smart guide

src/pages/editor/components/EditorCanvas.tsx

@@ -12,7 +12,12 @@ import { useObjectHandlers } from "./canvas/useObjectHandlers";
 import { useMaskGroupState } from "./canvas/useMaskGroupState";
 import ObjectsLayer from "./canvas/ObjectsLayer";
 import GuidesLayer from "./canvas/GuidesLayer";
-import { getSnappedPosition, type Guide } from "./canvas/useSnap";
+import {
+  clearSmartGuides,
+  drawSmartGuides,
+  getSnappedPosition,
+  type Guide,
+} from "./canvas/useSnap";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
 import EditorCanvasToolbar from "./EditorCanvasToolbar";
@@ -26,6 +31,7 @@ type EditorCanvasProps = {
 const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const stageRef = useRef<Konva.Stage>(null);
   const layerRef = useRef<Konva.Layer>(null);
+  const smartGuidesLayerRef = useRef<Konva.Layer>(null);
   const activeGuideIdsRef = useRef<string[]>([]);
   const stageWrapRef = useRef<HTMLDivElement>(null);
 
@@ -302,7 +308,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     const node = e.target;
     if (!node || node.name() === "guide-line") return;
 
-    const snapped = getSnappedPosition(node, guides);
+    const snapped = getSnappedPosition(node, guides, finalScale);
 
     if (node.x() !== snapped.position.x || node.y() !== snapped.position.y) {
       node.position(snapped.position);
@@ -318,10 +324,18 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
         y: snapped.position.y,
       });
     }
+
+    drawSmartGuides(
+      smartGuidesLayerRef.current,
+      snapped.smartGuides,
+      stageSize.width,
+      stageSize.height,
+    );
   };
 
   const handleDragEnd = () => {
     updateActiveGuides([]);
+    clearSmartGuides(smartGuidesLayerRef.current);
   };
 
   const handleStageMouseDownWithGuideReset = (e: Konva.KonvaEventObject<MouseEvent>) => {
@@ -448,6 +462,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                 onGuideSelect={setSelectedGuideId}
                 onGuideDragEnd={handleGuideDragEnd}
               />
+              <Layer ref={smartGuidesLayerRef} listening={false} visible={false} />
             </Stage>
           </div>
         </div>