save guide line

src/pages/editor/components/EditorCanvas.tsx

@@ -28,12 +28,14 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const {
     tool,
     objects,
+    guides,
     selectedObjectId,
     selectedObjectIds,
     selectedCellId,
     editingCell,
     setStageRef,
     setLayerRef,
+    setGuides,
     zoom,
   } = useEditorStore();
 
@@ -49,7 +51,6 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
 
   useTransformHandlers(transformerRef, layerRef);
 
-  const [guides, setGuides] = useState<Guide[]>([]);
   const [activeGuideIds, setActiveGuideIds] = useState<string[]>([]);
   const [selectedGuideId, setSelectedGuideId] = useState<string | null>(null);
   const [draftGuide, setDraftGuide] = useState<{
@@ -81,13 +82,13 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   };
 
   const handleGuidePositionChange = (id: string, position: number) => {
-    setGuides((prev) =>
-      prev.map((guide) =>
+    setGuides(
+      guides.map((guide) =>
         guide.id === id
           ? {
-            ...guide,
-            position,
-          }
+              ...guide,
+              position,
+            }
           : guide,
       ),
     );
@@ -95,12 +96,12 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
 
   const addGuide = (orientation: Guide["orientation"], position: number) => {
     const id = `guide-${orientation}-${crypto.randomUUID()}`;
-    setGuides((prev) => [...prev, { id, orientation, position }]);
+    setGuides([...guides, { id, orientation, position }]);
     setSelectedGuideId(id);
   };
 
   const removeGuide = (id: string) => {
-    setGuides((prev) => prev.filter((guide) => guide.id !== id));
+    setGuides(guides.filter((guide) => guide.id !== id));
     setActiveGuideIds((prev) => prev.filter((activeId) => activeId !== id));
     setSelectedGuideId((prev) => (prev === id ? null : prev));
   };