layer panel with took left

2025-12-31 11:21:09 +03:30
parent a729777cb8
commit d1a55184df
2 changed files with 634 additions and 324 deletions
@@ -1,6 +1,9 @@
-import { DocumentText, Layer, Eye, EyeSlash, Lock1, Lock, Trash, ArrowRight2, Text, Shapes } from 'iconsax-react'
+import { DocumentText, Layer, Eye, Lock, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
+import { useState } from 'react'
+
+type TabType = 'pages' | 'layers'

 type LayersPanelProps = {
  isOpen: boolean
@@ -8,7 +11,16 @@ type LayersPanelProps = {
 }

 const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
+  const [activeTab, setActiveTab] = useState<TabType>('pages')
  const { objects, selectedObjectId, setSelectedObjectId, deleteObject } = useEditorStore()
+  const {
+    pages,
+    currentPageId,
+    setCurrentPage,
+    addPage,
+    duplicatePage,
+    deletePage,
+  } = useEditorStore()

  const getLayerIcon = (type: string) => {
    switch (type) {
@@ -36,19 +48,39 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
    }
  }

+  const handleAddPage = () => {
+    addPage()
+  }
+
+  const handleDuplicatePage = (pageId: string) => {
+    duplicatePage(pageId)
+  }
+
+  const handleDeletePage = (pageId: string) => {
+    if (pages.length > 1) {
+      deletePage(pageId)
+    }
+  }
+
  if (!isOpen) {
    return (
      <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
        <div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
          <button
-            onClick={() => setIsOpen(true)}
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+            onClick={() => {
+              setActiveTab('pages')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <DocumentText size={24} color="black" />
          </button>
          <button
-            onClick={() => setIsOpen(true)}
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+            onClick={() => {
+              setActiveTab('layers')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
          >
            <Layer size={24} color="black" />
          </button>
@@ -58,8 +90,34 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
  }

  return (
-    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
-      <div className="bg-white rounded-t-[32px] rounded-b-[32px] flex flex-col h-full">
+    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
+      <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
+        <button
+          onClick={() => {
+            setActiveTab('pages')
+          }}
+          className={clx(
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+            activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
+          )}
+        >
+          <DocumentText size={24} color="black" />
+        </button>
+        <button
+          onClick={() => {
+            setActiveTab('layers')
+          }}
+          className={clx(
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+            activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
+          )}
+        >
+          <Layer size={24} color="black" />
+        </button>
+      </div>
+
+      <div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
+        <div className="bg-white rounded-r-4xl flex flex-col h-full">
          <div className="flex items-center justify-between p-4 border-b border-border">
            <div className="flex items-center gap-3">
              <button
@@ -68,10 +126,76 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
              >
                <ArrowRight2 size={20} color="black" />
              </button>
-            <h2 className="text-lg font-medium">لایه ها</h2>
+              <h2 className="text-lg font-medium">
+                {activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
+              </h2>
            </div>
          </div>

+          {activeTab === 'pages' ? (
+            <>
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="flex flex-col gap-3">
+                  {pages.length === 0 ? (
+                    <div className="text-sm text-gray-500 text-center py-8">
+                      صفحه‌ای وجود ندارد
+                    </div>
+                  ) : (
+                    pages.map((page) => {
+                      const isSelected = currentPageId === page.id
+                      return (
+                        <div
+                          key={page.id}
+                          onClick={() => setCurrentPage(page.id)}
+                          className={clx(
+                            'flex flex-col gap-2 p-3 rounded-lg cursor-pointer transition-colors',
+                            isSelected
+                              ? 'bg-blue-50 border border-blue-200'
+                              : 'bg-gray-50 hover:bg-gray-100'
+                          )}
+                        >
+                          <div className="w-full aspect-4/3 bg-gray-100 rounded-lg flex items-center justify-center">
+                            <DocumentText size={32} color="#666" />
+                          </div>
+                          <div className="text-sm font-medium text-center">
+                            {page.name}
+                          </div>
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+              </div>
+
+              <div className="p-4 border-t border-border bg-gray-50 rounded-b-[32px]">
+                <div className="flex items-center justify-center gap-3">
+                  <button
+                    onClick={handleAddPage}
+                    className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
+                  >
+                    <Add size={20} color="black" />
+                  </button>
+                  {currentPageId && (
+                    <>
+                      <button
+                        onClick={() => handleDuplicatePage(currentPageId)}
+                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
+                      >
+                        <Copy size={20} color="black" />
+                      </button>
+                      <button
+                        onClick={() => handleDeletePage(currentPageId)}
+                        disabled={pages.length <= 1}
+                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-red-100 transition-colors border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        <Trash size={20} color="#FF3B30" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : (
            <div className="flex-1 overflow-y-auto p-4">
              <div className="flex flex-col gap-2">
                {objects.length === 0 ? (
@@ -90,7 +214,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
                          isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
                        )}
                      >
-                    <div className="flex-shrink-0">
+                        <div className="shrink-0">
                          {getLayerIcon(obj.type)}
                        </div>
                        <div className="flex-1 text-sm font-medium">
@@ -131,6 +255,8 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
                )}
              </div>
            </div>
+          )}
+        </div>
      </div>
    </div>
  )
@@ -61,6 +61,12 @@ export type EditorObject = {
  tableData?: TableData;
 };

+export type Page = {
+  id: string;
+  name: string;
+  objects: EditorObject[];
+};
+
 type EditorStoreType = {
  tool: ToolType;
  setTool: (tool: ToolType) => void;
@@ -74,16 +80,38 @@ type EditorStoreType = {
  setSelectedTableId: (id: string | null) => void;
  selectedCellId: string | null;
  setSelectedCellId: (id: string | null) => void;
-  editingCell: { tableId: string; cellId: string; x: number; y: number; value: string } | null;
-  setEditingCell: (cell: { tableId: string; cellId: string; x: number; y: number; value: string } | null) => void;
+  editingCell: {
+    tableId: string;
+    cellId: string;
+    x: number;
+    y: number;
+    value: string;
+  } | null;
+  setEditingCell: (
+    cell: {
+      tableId: string;
+      cellId: string;
+      x: number;
+      y: number;
+      value: string;
+    } | null
+  ) => void;
  addTable: (x: number, y: number, rows?: number, cols?: number) => void;
  addRow: (tableId: string) => void;
  addColumn: (tableId: string) => void;
  removeRow: (tableId: string) => void;
  removeColumn: (tableId: string) => void;
  updateCellValue: (tableId: string, cellId: string, text: string) => void;
-  changeCellBackground: (tableId: string, cellId: string, color: string) => void;
-  applyTableResize: (tableId: string, newWidth: number, newHeight: number) => void;
+  changeCellBackground: (
+    tableId: string,
+    cellId: string,
+    color: string
+  ) => void;
+  applyTableResize: (
+    tableId: string,
+    newWidth: number,
+    newHeight: number
+  ) => void;
  stageRef: React.RefObject<Konva.Stage | null> | null;
  setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
  layerRef: React.RefObject<Konva.Layer | null> | null;
@@ -92,11 +120,23 @@ type EditorStoreType = {
  setZoom: (zoom: number) => void;
  zoomIn: () => void;
  zoomOut: () => void;
+  pages: Page[];
+  currentPageId: string | null;
+  addPage: (name?: string) => void;
+  duplicatePage: (pageId: string) => void;
+  deletePage: (pageId: string) => void;
+  setCurrentPage: (pageId: string) => void;
+  updatePageName: (pageId: string, name: string) => void;
 };

 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;

-const createInitialCells = (rows: number, cols: number, cellWidth: number, cellHeight: number): Record<string, TableCell> => {
+const createInitialCells = (
+  rows: number,
+  cols: number,
+  cellWidth: number,
+  cellHeight: number
+): Record<string, TableCell> => {
  const cells: Record<string, TableCell> = {};
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
@@ -113,7 +153,15 @@ const createInitialCells = (rows: number, cols: number, cellWidth: number, cellH
  return cells;
 };

-export const useEditorStore = create<EditorStoreType>((set, get) => ({
+const createInitialPage = (name: string): Page => ({
+  id: `page-${crypto.randomUUID()}`,
+  name,
+  objects: [],
+});
+
+export const useEditorStore = create<EditorStoreType>((set, get) => {
+  const initialPage = createInitialPage("جلد");
+  return {
    tool: "select",
    setTool: (tool) =>
      set((state) => ({
@@ -121,21 +169,77 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
        selectedObjectId: tool === "select" ? state.selectedObjectId : null,
      })),
    objects: [],
-  addObject: (object) =>
-    set((state) => ({ objects: [...state.objects, object] })),
-  updateObject: (id, updates) =>
+    addObject: (object) => {
+      const state = get();
+      if (state.currentPageId) {
+        const currentPage = state.pages.find(
+          (p) => p.id === state.currentPageId
+        );
+        if (currentPage) {
+          set((state) => ({
+            objects: [...state.objects, object],
+            pages: state.pages.map((p) =>
+              p.id === state.currentPageId
+                ? { ...p, objects: [...p.objects, object] }
+                : p
+            ),
+          }));
+          return;
+        }
+      }
+      set((state) => ({ objects: [...state.objects, object] }));
+    },
+    updateObject: (id, updates) => {
+      const state = get();
+      if (state.currentPageId) {
        set((state) => ({
          objects: state.objects.map((obj) =>
            obj.id === id ? { ...obj, ...updates } : obj
          ),
-    })),
-  deleteObject: (id) =>
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? {
+                  ...p,
+                  objects: p.objects.map((obj) =>
+                    obj.id === id ? { ...obj, ...updates } : obj
+                  ),
+                }
+              : p
+          ),
+        }));
+        return;
+      }
+      set((state) => ({
+        objects: state.objects.map((obj) =>
+          obj.id === id ? { ...obj, ...updates } : obj
+        ),
+      }));
+    },
+    deleteObject: (id) => {
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: state.objects.filter((obj) => obj.id !== id),
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? { ...p, objects: p.objects.filter((obj) => obj.id !== id) }
+              : p
+          ),
+          selectedObjectId:
+            state.selectedObjectId === id ? null : state.selectedObjectId,
+          selectedTableId:
+            state.selectedTableId === id ? null : state.selectedTableId,
+        }));
+        return;
+      }
      set((state) => ({
        objects: state.objects.filter((obj) => obj.id !== id),
        selectedObjectId:
          state.selectedObjectId === id ? null : state.selectedObjectId,
-      selectedTableId: state.selectedTableId === id ? null : state.selectedTableId,
-    })),
+        selectedTableId:
+          state.selectedTableId === id ? null : state.selectedTableId,
+      }));
+    },
    selectedObjectId: null,
    setSelectedObjectId: (id) => set({ selectedObjectId: id }),
    selectedTableId: null,
@@ -366,4 +470,84 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
      const newZoom = Math.max(state.zoom - 0.1, 0.5);
      set({ zoom: newZoom });
    },
+    pages: [initialPage],
+    currentPageId: initialPage.id,
+    addPage: (name) => {
+      const state = get();
+      const pageNumber = state.pages.length + 1;
+      const newPage = createInitialPage(name || `${pageNumber}`);
+      set((state) => ({
+        pages: [...state.pages, newPage],
+        currentPageId: newPage.id,
+        objects: [],
+        selectedObjectId: null,
      }));
+    },
+    duplicatePage: (pageId) => {
+      const state = get();
+      const pageToDuplicate = state.pages.find((p) => p.id === pageId);
+      if (!pageToDuplicate) return;
+
+      const duplicatedObjects = pageToDuplicate.objects.map((obj) => ({
+        ...obj,
+        id: `${obj.id}-${crypto.randomUUID()}`,
+      }));
+
+      const newPage: Page = {
+        id: `page-${crypto.randomUUID()}`,
+        name: `${pageToDuplicate.name} (کپی)`,
+        objects: duplicatedObjects,
+      };
+
+      set((state) => ({
+        pages: [...state.pages, newPage],
+      }));
+    },
+    deletePage: (pageId) => {
+      const state = get();
+      if (state.pages.length <= 1) return;
+
+      const newPages = state.pages.filter((p) => p.id !== pageId);
+      const newCurrentPageId =
+        state.currentPageId === pageId
+          ? newPages[0]?.id || null
+          : state.currentPageId;
+
+      const newCurrentPage = newPages.find((p) => p.id === newCurrentPageId);
+
+      set({
+        pages: newPages,
+        currentPageId: newCurrentPageId,
+        objects: newCurrentPage?.objects || [],
+        selectedObjectId: null,
+      });
+    },
+    setCurrentPage: (pageId) => {
+      const state = get();
+      const targetPage = state.pages.find((p) => p.id === pageId);
+      if (!targetPage) return;
+
+      // 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
+          )
+        : state.pages;
+
+      const targetPageFromUpdated = updatedPages.find((p) => p.id === pageId);
+      if (!targetPageFromUpdated) return;
+
+      set({
+        pages: updatedPages,
+        currentPageId: pageId,
+        objects: targetPageFromUpdated.objects,
+        selectedObjectId: null,
+      });
+    },
+    updatePageName: (pageId, name) => {
+      set((state) => ({
+        pages: state.pages.map((p) => (p.id === pageId ? { ...p, name } : p)),
+      }));
+    },
+  };
+});