feat: optimise roi surface annotation (#73)

* refactor: optimise roi surface annotation

* refactor: fix eslint

* refactor: fix eslint

* refactor: optimise roi surface annotation

src/components/roi/annotation/SurfaceAnnotation.tsx

@@ -9,32 +9,44 @@ interface SurfaceAnnotationProps {
 
 function SurfaceAnnotation({ roi }: SurfaceAnnotationProps) {
   const preferences = usePreferences();
-
   const { color, enabled } = preferences.rois.annotations.surface;
 
-  const rectStyle: CSSProperties = useMemo(
+  const svgPath = useMemo(() => {
+    if (!enabled) return '';
+    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}`);
+          let maxRow = 1;
+          for (; row + maxRow <= height; maxRow++) {
+            if (mask.getBit(column, row + maxRow) !== 1) {
+              break;
+            }
+          }
+
+          pathCommands.push(`V${row + maxRow}`, `H${column + 1}`, `V${row}`);
+          row = row + maxRow;
+        }
+      }
+    }
+    return pathCommands.join(' ');
+  }, [roi, enabled]);
+
+  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);