refactor: optimise roi surface annotation

package.json

@@ -48,33 +48,33 @@
     "eslint-config-cheminfo-react": "^9.1.1",
     "eslint-config-cheminfo-typescript": "^11.3.1",
     "husky": "^8.0.3",
+    "ky": "^0.25.1",
+    "modern-normalize": "^2.0.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
     "typescript": "^5.0.2",
-    "vite": "^4.3.2",
-    "ky": "^0.25.1",
-    "modern-normalize": "^2.0.0"
+    "vite": "^4.3.2"
   },
   "dependencies": {
-    "@lukeed/uuid": "^2.0.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
+    "@lukeed/uuid": "^2.0.1",
+    "cheminfo-font": "^1.9.0",
+    "fifo-logger": "^0.6.1",
+    "file-collection": "^0.2.0",
+    "filelist-utils": "^1.9.0",
     "image-js": "0.0.0-next-ce6a4f4a28",
     "immer": "^10.0.2",
-    "react-science": "^0.26.2",
     "lodash": "^4.17.21",
-    "react-use": "^17.4.0",
-    "react-plot": "^1.4.2",
-    "react-map-interaction": "^2.1.0",
-    "react-kbs": "^2.1.1",
-    "react-icons": "^4.10.1",
     "react-d3-utils": "^1.0.0",
-    "filelist-utils": "^1.9.0",
-    "file-collection": "^0.2.0",
-    "fifo-logger": "^0.6.1",
-    "cheminfo-font": "^1.9.0"
+    "react-icons": "^4.10.1",
+    "react-kbs": "^2.1.1",
+    "react-map-interaction": "^2.1.0",
+    "react-plot": "^1.4.2",
+    "react-science": "^0.26.2",
+    "react-use": "^17.4.0"
   },
   "volta": {
     "node": "18.16.0",

src/components/roi/annotation/SurfaceAnnotation.tsx

@@ -1,6 +1,5 @@
 import { Roi } from 'image-js';
-import { CSSProperties, memo, useMemo } from 'react';
-
+import { CSSProperties, memo, useEffect, useMemo } from 'react';
 import usePreferences from '../../../hooks/usePreferences';
 
 interface SurfaceAnnotationProps {
@@ -10,31 +9,41 @@ interface SurfaceAnnotationProps {
 function SurfaceAnnotation({ roi }: SurfaceAnnotationProps) {
   const preferences = usePreferences();
 
+  const svgPath = useMemo(() => {
+    const pathCommands: string[] = [];
+    const mask = roi.getMask();
+    const width = mask.width;
+    const height = mask.height;
+    for (let column = 0; column < width; column++) {
+      for (let row = 0; row < height; row++) {
+        if (mask.getBit(column, row) === 1) {
+          pathCommands.push(`M${column},${row}`);
+
+          if (row + 1 <= height) {
+            pathCommands.push(`V${row + 1}`);
+          }
+          if (column + 1 <= width) {
+            pathCommands.push(`H${column + 1}`);
+          }
+          pathCommands.push(`V${row}`);
+        }
+      }
+    }
+    return pathCommands.join(' ');
+  }, []);
   const { color, enabled } = preferences.rois.annotations.surface;
 
-  const rectStyle: CSSProperties = useMemo(
+  const pathStyle: CSSProperties = useMemo(
     () => ({
       fill: color.hex,
       fillOpacity: color.a,
-      stroke: color.hex,
-      strokeOpacity: color.a,
-      strokeWidth: 0.1,
     }),
     [color],
   );
 
   if (!enabled) return null;
 
-  return roi.points.map(([column, row]) => (
-    <rect
-      key={`${column}-${row}`}
-      x={column}
-      y={row}
-      width="1"
-      height="1"
-      style={rectStyle}
-    />
-  ));
+  return <path d={svgPath} style={pathStyle} />;
 }
 
 export default memo(SurfaceAnnotation);