Make the cursor move while moving

src/components/Glyph.css

@@ -22,3 +22,7 @@
   fill: #cc0000;
   stroke: none;
 }
+
+.movable-stroke {
+  cursor: move;
+}

src/components/Glyph.tsx

@@ -31,7 +31,10 @@ const GlyphComponent = (props: GlyphComponentProps) => {
       <g className="strokes-deselected">
         {nonSelection.map((index) => (
           <g key={index} onMouseDown={(evt) => props.handleMouseDownDeselectedStroke?.(evt, index)}>
-            <Stroke polygons={polygonsSep[index]} />
+            <Stroke
+              polygons={polygonsSep[index]}
+              className={props.handleMouseDownDeselectedStroke ? "movable-stroke" : ""}
+            />
           </g>
         ))}
       </g>
@@ -51,7 +54,10 @@ const GlyphComponent = (props: GlyphComponentProps) => {
       <g className="strokes-selected">
         {selection.map((index) => (
           <g key={index} onMouseDown={(evt) => props.handleMouseDownSelectedStroke?.(evt, index)}>
-            <Stroke polygons={polygonsSep[index]} />
+            <Stroke
+              polygons={polygonsSep[index]}
+              className={props.handleMouseDownSelectedStroke ? "movable-stroke" : ""}
+            />
           </g>
         ))}
       </g>

src/components/Stroke.tsx

@@ -4,12 +4,17 @@ import { Polygons } from '@kurgm/kage-engine';
 
 export interface StrokeComponentProps {
   polygons: Polygons;
+  className?: string;
 }
 
 const StrokeComponent = (props: StrokeComponentProps) => (
   <>
     {props.polygons.array.map((polygon, i) => (
-      <polygon key={i} points={polygon.array.map(({ x, y }) => `${x},${y} `).join("")} />
+      <polygon
+        key={i}
+        className={props.className}
+        points={polygon.array.map(({ x, y }) => `${x},${y} `).join("")}
+      />
     ))}
   </>
 );

src/components/StrokeCenterLine.css

@@ -2,4 +2,5 @@
   fill: none;
   stroke: #ffffff;
   stroke-width: 1px;
+  pointer-events: none;
 }