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) =>
+    setGuides(
-      prev.map((guide) =>
+      guides.map((guide) =>
         guide.id === id
           ? {
-            ...guide,
+              ...guide,
-            position,
+              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));
   };

src/pages/editor/store/editorStore.ts

@@ -72,13 +72,22 @@ export type Page = {
   id: string;
   name: string;
   objects: EditorObject[];
+  guides: PageGuide[];
+};
+
+export type PageGuide = {
+  id: string;
+  orientation: "vertical" | "horizontal";
+  position: number;
 };
 
 type EditorStoreType = {
   tool: ToolType;
   setTool: (tool: ToolType) => void;
   objects: EditorObject[];
+  guides: PageGuide[];
   addObject: (object: EditorObject) => void;
+  setGuides: (guides: PageGuide[]) => void;
   updateObject: (id: string, updates: Partial<EditorObject>) => void;
   deleteObject: (id: string) => void;
   duplicateObject: (id: string) => void;
@@ -177,6 +186,7 @@ const createInitialPage = (name: string): Page => ({
   id: `page-${crypto.randomUUID?.()}`,
   name,
   objects: [],
+  guides: [],
 });
 
 export const useEditorStore = create<EditorStoreType>((set, get) => {
@@ -189,6 +199,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         selectedObjectId: tool === "select" ? state.selectedObjectId : null,
       })),
     objects: [],
+    guides: [],
     addObject: (object) => {
       const state = get();
       if (state.currentPageId) {
@@ -209,6 +220,19 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       }
       set((state) => ({ objects: [...state.objects, object] }));
     },
+    setGuides: (guides) => {
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          guides,
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId ? { ...p, guides } : p,
+          ),
+        }));
+        return;
+      }
+      set({ guides });
+    },
     updateObject: (id, updates) => {
       const state = get();
       if (state.currentPageId) {
@@ -578,6 +602,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         pages: [...state.pages, newPage],
         currentPageId: newPage.id,
         objects: [],
+        guides: [],
         selectedObjectId: null,
       }));
     },
@@ -595,6 +620,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         id: `page-${crypto.randomUUID?.()}`,
         name: `${pageToDuplicate.name} (کپی)`,
         objects: duplicatedObjects,
+        guides: [...pageToDuplicate.guides],
       };
 
       set((state) => ({
@@ -617,6 +643,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         pages: newPages,
         currentPageId: newCurrentPageId,
         objects: newCurrentPage?.objects || [],
+        guides: newCurrentPage?.guides || [],
         selectedObjectId: null,
       });
     },
@@ -628,7 +655,9 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
       // Save current objects to current page before switching
       const updatedPages = state.currentPageId
         ? state.pages.map((p) =>
-            p.id === state.currentPageId ? { ...p, objects: state.objects } : p,
+            p.id === state.currentPageId
+              ? { ...p, objects: state.objects, guides: state.guides }
+              : p,
           )
         : state.pages;
 
@@ -639,6 +668,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         pages: updatedPages,
         currentPageId: pageId,
         objects: targetPageFromUpdated.objects,
+        guides: targetPageFromUpdated.guides || [],
         selectedObjectId: null,
       });
     },
@@ -939,11 +969,16 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
     },
     loadPages: (pages) => {
       if (pages.length === 0) return;
-      const firstPage = pages[0];
+      const normalizedPages = pages.map((page) => ({
+        ...page,
+        guides: page.guides || [],
+      }));
+      const firstPage = normalizedPages[0];
       set({
-        pages,
+        pages: normalizedPages,
         currentPageId: firstPage.id,
         objects: firstPage.objects,
+        guides: firstPage.guides || [],
         selectedObjectId: null,
         selectedObjectIds: [],
       });