fix bug guide line

src/pages/editor/components/EditorCanvas.tsx

@@ -14,6 +14,7 @@ import GuidesLayer from "./canvas/GuidesLayer";
 import { getSnappedPosition, type Guide } from "./canvas/useSnap";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
+import { createScopedId } from "../store/editorStore.helpers";
 
 type EditorCanvasProps = {
   catalogSize?: string;
@@ -24,10 +25,6 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const layerRef = useRef<Konva.Layer>(null);
   const activeGuideIdsRef = useRef<string[]>([]);
   const stageWrapRef = useRef<HTMLDivElement>(null);
-  const draggingGuideRef = useRef<{
-    id: string;
-    orientation: Guide["orientation"];
-  } | null>(null);
 
   const {
     tool,
@@ -100,7 +97,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   };
 
   const addGuide = (orientation: Guide["orientation"], position: number) => {
-    const id = `guide-${orientation}-${crypto.randomUUID()}`;
+    const id = createScopedId(`guide-${orientation}`);
     setGuides([...guides, { id, orientation, position }]);
     setSelectedGuideId(id);
   };
@@ -112,7 +109,6 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   };
 
   const handleGuideDragEnd = (id: string, position: number, shouldRemove: boolean) => {
-    draggingGuideRef.current = null;
     if (shouldRemove) {
       removeGuide(id);
       return;
@@ -120,51 +116,6 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     handleGuidePositionChange(id, position);
   };
 
-  useEffect(() => {
-    const forceFinishGuideDrag = () => {
-      const draggingGuide = draggingGuideRef.current;
-      if (!draggingGuide) return;
-
-      const stage = stageRef.current;
-      if (!stage) return;
-
-      const node = stage.findOne(`#${draggingGuide.id}`) as Konva.Node | null;
-      if (!node) {
-        draggingGuideRef.current = null;
-        return;
-      }
-
-      if (node.isDragging()) {
-        node.stopDrag();
-      }
-
-      const nextPosition =
-        draggingGuide.orientation === "vertical"
-          ? node.x()
-          : node.y();
-      const shouldRemove =
-        draggingGuide.orientation === "vertical"
-          ? nextPosition < 0 || nextPosition > stageSize.width
-          : nextPosition < 0 || nextPosition > stageSize.height;
-
-      handleGuideDragEnd(draggingGuide.id, nextPosition, shouldRemove);
-    };
-
-    window.addEventListener("pointerup", forceFinishGuideDrag);
-    window.addEventListener("mouseup", forceFinishGuideDrag);
-    window.addEventListener("touchend", forceFinishGuideDrag);
-    window.addEventListener("pointercancel", forceFinishGuideDrag);
-    window.addEventListener("blur", forceFinishGuideDrag);
-
-    return () => {
-      window.removeEventListener("pointerup", forceFinishGuideDrag);
-      window.removeEventListener("mouseup", forceFinishGuideDrag);
-      window.removeEventListener("touchend", forceFinishGuideDrag);
-      window.removeEventListener("pointercancel", forceFinishGuideDrag);
-      window.removeEventListener("blur", forceFinishGuideDrag);
-    };
-  }, [stageSize.height, stageSize.width]);
-
   useEffect(() => {
     const handleDeleteGuide = (e: KeyboardEvent) => {
       if (!selectedGuideId) return;
@@ -396,10 +347,6 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                 selectedGuideId={selectedGuideId}
                 draftGuide={draftGuide}
                 onGuideSelect={setSelectedGuideId}
-                onGuideDragStart={(id, orientation) => {
-                  draggingGuideRef.current = { id, orientation };
-                  setSelectedGuideId(id);
-                }}
                 onGuideDragEnd={handleGuideDragEnd}
               />
             </Stage>