create editor canvas toolbar

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 EditorCanvasToolbar from "./EditorCanvasToolbar";
 import { createScopedId } from "../store/editorStore.helpers";
 
 type EditorCanvasProps = {
@@ -69,8 +70,37 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     }
   }, [setStageRef, setLayerRef]);
 
-
   const finalScale = stageSize.scale * zoom;
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
+    let raf = 0;
+
+    const begin = () => useEditorStore.getState().beginObjectGesture();
+    const end = () => useEditorStore.getState().endObjectGesture();
+
+    const attach = () => {
+      const stage = stageRef.current;
+      if (!stage || cleanup) return;
+      stage.on("dragstart", begin);
+      stage.on("dragend", end);
+      cleanup = () => {
+        stage.off("dragstart", begin);
+        stage.off("dragend", end);
+      };
+    };
+
+    attach();
+    if (!cleanup) {
+      raf = window.requestAnimationFrame(attach);
+    }
+
+    return () => {
+      if (raf) window.cancelAnimationFrame(raf);
+      cleanup?.();
+    };
+  }, [finalScale, stageSize.width, stageSize.height]);
+
   const updateActiveGuides = (nextActiveGuideIds: string[]) => {
     const prev = activeGuideIdsRef.current;
     const changed =
@@ -268,16 +298,32 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     handleStageMouseDown(e);
   };
 
+  const scaledW = stageSize.width * finalScale;
+  const scaledH = stageSize.height * finalScale;
+
   return (
-    <div className="flex-1 flex items-center justify-center pb-8 overflow-auto relative xl:pl-6">
-      <div className="mt-8">
+    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-auto pb-8 xl:pl-6">
+      <div
+        className="flex w-full justify-center mx-auto"
+        style={{ maxWidth: scaledW }}
+      >
         <div
-          className="relative select-none"
+          className="overflow-hidden"
+          style={{ width: scaledW }}
+        >
+          <EditorCanvasToolbar barWidthPx={scaledW} />
+        </div>
+      </div>
+      <div className="mx-auto mt-4 flex w-full min-w-0 flex-col items-center">
+
+        <div
+          className="relative z-40 -mt-px select-none rounded-b-[14px] border border-t-0 border-[#d8dde5] bg-white shadow-[0_2px_8px_rgba(15,23,42,0.07)]"
           style={{
-            width: stageSize.width * finalScale,
-            height: stageSize.height * finalScale,
+            width: scaledW,
+            height: scaledH,
           }}
         >
+
           <div
             className="absolute -top-6 left-0 h-6 bg-slate-100 border-b border-slate-300 cursor-col-resize"
             style={{ width: stageSize.width * finalScale }}
@@ -354,6 +400,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
           </div>
         </div>
       </div>
+
       {editingCell && (
         <CellEditor
           x={editingCell.x}

src/pages/editor/components/EditorCanvasToolbar.tsx

@@ -0,0 +1,90 @@
+import {
+  ArrowForward,
+} from "iconsax-react";
+import { useEditorStore } from "../store/editorStore";
+
+const FA_DIGITS = ["۰", "۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹"] as const;
+
+function toPersianDigits(num: number): string {
+  return String(num).replace(/\d/g, (d) => FA_DIGITS[parseInt(d, 10)]!);
+}
+
+type EditorCanvasToolbarProps = {
+  barWidthPx: number;
+};
+
+const iconHistory = {
+  size: 22,
+  variant: "Linear" as const,
+  color: "currentColor",
+};
+
+const EditorCanvasToolbar = ({ barWidthPx }: EditorCanvasToolbarProps) => {
+  const {
+    pages,
+    currentPageId,
+    objectHistoryPast,
+    objectHistoryFuture,
+    undoObjects,
+    redoObjects,
+  } = useEditorStore();
+
+  const canUndo = objectHistoryPast.length > 0;
+  const canRedo = objectHistoryFuture.length > 0;
+
+  const pageIndexOneBased = currentPageId
+    ? pages.findIndex((p) => p.id === currentPageId) + 1
+    : 0;
+
+  const pageLabel =
+    pages.length > 0
+      ? `${toPersianDigits(pageIndexOneBased)}\u200e / ${toPersianDigits(pages.length)}`
+      : "";
+
+  const historyBtn =
+    "flex size-10 items-center justify-center rounded-xl text-[#4a5568] transition-colors hover:bg-black/[0.04] active:bg-black/[0.06] disabled:pointer-events-none disabled:opacity-[0.32] outline-none";
+
+  return (
+    <div
+      dir="ltr"
+      role="toolbar"
+      aria-label="نوار کنترل بوم"
+      className="flex h-[52px] shrink-0 items-center justify-between"
+      style={{ width: barWidthPx }}
+    >
+      <div className="flex flex-1 items-center min-w-0">
+        <div className="flex items-center gap-1 pl-1">
+          <button
+            type="button"
+            title="برگشت"
+            disabled={!canUndo}
+            onClick={() => undoObjects()}
+            className={historyBtn}
+          >
+            <span className="inline-flex scale-x-[-1]" aria-hidden>
+              <ArrowForward {...iconHistory} />
+            </span>
+          </button>
+          <button
+            type="button"
+            title="از نو"
+            disabled={!canRedo}
+            onClick={() => redoObjects()}
+            className={historyBtn}
+          >
+            <ArrowForward {...iconHistory} aria-hidden />
+          </button>
+        </div>
+      </div>
+
+      <span
+        dir="ltr"
+        className="select-none whitespace-nowrap text-[14px]  tabular-nums font-bold"
+      >
+        {pageLabel}
+      </span>
+    </div>
+  );
+};
+
+export default EditorCanvasToolbar;

src/pages/editor/components/canvas/useDrawingHandlers.ts

@@ -81,12 +81,14 @@ export const useDrawingHandlers = () => {
                 width: 150,
                 height: defaults.fontSize || 24,
             };
+            useEditorStore.getState().commitObjectHistoryBeforeChange();
             addObject(newText);
             setSelectedObjectId(newText.id);
             setTool("select");
         }
 
         if (tool === "grid") {
+            useEditorStore.getState().commitObjectHistoryBeforeChange();
             addTable(realPos.x, realPos.y, 4, 5);
             setSelectedTableId(null);
             setTool("select");
@@ -114,6 +116,7 @@ export const useDrawingHandlers = () => {
         if (!newObject) return;
 
         if (!tempObject) {
+            useEditorStore.getState().commitObjectHistoryBeforeChange();
             addObject(newObject);
             setTempObject(newObject);
         } else {

src/pages/editor/components/canvas/useKeyboardMovement.ts

@@ -13,6 +13,8 @@ export const useKeyboardMovement = () => {
     layerRef,
     groupObjects,
     ungroupObjects,
+    undoObjects,
+    redoObjects,
   } = useEditorStore();
 
   useEffect(() => {
@@ -34,7 +36,10 @@ export const useKeyboardMovement = () => {
       if (e.key === "Delete" || e.key === "Backspace") {
         if (selectedObjectIds.length > 0) {
           e.preventDefault();
-          selectedObjectIds.forEach((id) => deleteObject(id));
+          useEditorStore.getState().commitObjectHistoryBeforeChange();
+          selectedObjectIds.forEach((id) =>
+            deleteObject(id, { skipHistory: true }),
+          );
           return;
         }
       }
@@ -73,6 +78,22 @@ export const useKeyboardMovement = () => {
         return;
       }
 
+      if ((e.metaKey || e.ctrlKey) && (e.key === "z" || e.key === "Z")) {
+        e.preventDefault();
+        if (e.shiftKey) {
+          redoObjects();
+        } else {
+          undoObjects();
+        }
+        return;
+      }
+
+      if ((e.metaKey || e.ctrlKey) && (e.key === "y" || e.key === "Y")) {
+        e.preventDefault();
+        redoObjects();
+        return;
+      }
+
       if (selectedObjectIds.length === 0) {
         return;
       }
@@ -102,6 +123,8 @@ export const useKeyboardMovement = () => {
           return;
       }
 
+      useEditorStore.getState().commitObjectHistoryBeforeChange();
+
       // Move all selected objects
       selectedObjectIds.forEach((id) => {
         const selectedObject = objects.find((obj) => obj.id === id);
@@ -144,5 +167,7 @@ export const useKeyboardMovement = () => {
     layerRef,
     groupObjects,
     ungroupObjects,
+    undoObjects,
+    redoObjects,
   ]);
 };

src/pages/editor/components/canvas/useTransformHandlers.ts

@@ -142,6 +142,7 @@ export const useTransformHandlers = (
     };
 
     const handleTransformEnd = () => {
+      useEditorStore.getState().commitObjectHistoryBeforeChange();
       const nodes = transformer.nodes();
       if (nodes.length === 0) return;
 

src/pages/editor/components/sidebar/instructions/TextInstruction.tsx

@@ -64,6 +64,7 @@ const TextInstruction: FC = () => {
             // اعمال تغییرات به صورت لایو
             const newState = { ...formState, [field]: value };
             setFormState(newState);
+            useEditorStore.getState().commitObjectHistoryBeforeChange();
             updateObject(selectedObject.id, { [field]: value });
         } else {
             // text فقط برای حالت ویرایش است و نباید در defaults ذخیره شود

src/pages/editor/components/sidebar/settings/AlignmentSettings.tsx

@@ -38,6 +38,7 @@ const AlignmentSettings = ({
   // const alignToSelection = selectedObjectIds.length === 2;
 
   const applyAlign = (kind: AlignKind) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     const { objects: objs, selectedObjectIds: ids, layerRef } = useEditorStore.getState();
     const layer = layerRef?.current ?? null;
 

src/pages/editor/components/sidebar/settings/MaskSettings.tsx

@@ -30,6 +30,7 @@ const MaskSettings = ({ objectId }: MaskSettingsProps) => {
   );
 
   const handleToggleMask = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, {
       isMask: checked,
       showMaskGuide: checked ? true : undefined,
@@ -42,14 +43,17 @@ const MaskSettings = ({ objectId }: MaskSettingsProps) => {
   };
 
   const handleToggleGuide = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { showMaskGuide: checked });
   };
 
   const handleSelectMask = (maskId: string) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { maskId: maskId || undefined });
   };
 
   const handleToggleMaskInvert = (checked: boolean) => {
+    useEditorStore.getState().commitObjectHistoryBeforeChange();
     updateObject(objectId, { maskInvert: checked });
   };