danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create editor canvas toolbar

Browse Source
This commit is contained in:
hamid zarghami
2026-05-06 11:17:35 +03:30
parent 1518e83c1d
commit e15dc76468
9 changed files with 353 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorCanvas.tsx
+53 -6
View File
@@ -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
+90
View File
@@ -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
+3
View File
@@ -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
+26 -1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+4
View File
@@ -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 });
};
src/pages/editor/store/editorStore.ts
+174 -2
View File
@@ -20,6 +20,17 @@ import type {
ToolType,
} from "./editorStore.types";
const MAX_OBJECT_HISTORY = 50;
/** اسنپ‌شات آرایٔهٔ اشیا برای undo؛ از انتشار مرج مشترک جلوگیری می‌شود */
const cloneObjectList = (objects: EditorObject[]): EditorObject[] =>
structuredClone(objects);
const objectListsEqual = (a: EditorObject[], b: EditorObject[]) =>
JSON.stringify(a) === JSON.stringify(b);
let objectGestureSnapshot: EditorObject[] | null = null;
export type {
EditorObject,
Page,
@@ -37,7 +48,7 @@ type EditorStoreType = {
addObject: (object: EditorObject) => void;
setGuides: (guides: PageGuide[]) => void;
updateObject: (id: string, updates: Partial<EditorObject>) => void;
deleteObject: (id: string) => void;
deleteObject: (id: string, options?: { skipHistory?: boolean }) => void;
duplicateObject: (id: string) => void;
copySelectedObjects: () => void;
pasteCopiedObjects: () => void;
@@ -108,6 +119,15 @@ type EditorStoreType = {
ungroupObjects: (groupId: string) => void;
loadPages: (pages: Page[]) => void;
clipboardObjects: EditorObject[];
objectHistoryPast: EditorObject[][];
objectHistoryFuture: EditorObject[][];
commitObjectHistoryBeforeChange: () => void;
beginObjectGesture: () => void;
endObjectGesture: () => void;
undoObjects: () => void;
redoObjects: () => void;
bringObjectForward: (id: string) => void;
sendObjectBackward: (id: string) => void;
};
export const useEditorStore = create<EditorStoreType>((set, get) => {
@@ -161,6 +181,135 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
objects: [],
guides: [],
clipboardObjects: [],
objectHistoryPast: [],
objectHistoryFuture: [],
commitObjectHistoryBeforeChange: () => {
const s = get();
const snap = cloneObjectList(s.objects);
set({
objectHistoryPast: [...s.objectHistoryPast, snap].slice(
-MAX_OBJECT_HISTORY,
),
objectHistoryFuture: [],
});
},
beginObjectGesture: () => {
if (objectGestureSnapshot !== null) return;
objectGestureSnapshot = cloneObjectList(get().objects);
},
endObjectGesture: () => {
const base = objectGestureSnapshot;
objectGestureSnapshot = null;
if (!base) return;
if (objectListsEqual(base, get().objects)) return;
const s = get();
set({
objectHistoryPast: [...s.objectHistoryPast, base].slice(
-MAX_OBJECT_HISTORY,
),
objectHistoryFuture: [],
});
},
undoObjects: () => {
const s = get();
if (s.objectHistoryPast.length === 0) return;
const previous = s.objectHistoryPast[s.objectHistoryPast.length - 1]!;
const newPast = s.objectHistoryPast.slice(0, -1);
const currentSnap = cloneObjectList(s.objects);
const next = cloneObjectList(previous);
const idSet = new Set(next.map((o) => o.id));
const nextSelIds = s.selectedObjectIds.filter((id) => idSet.has(id));
const nextTable =
s.selectedTableId && idSet.has(s.selectedTableId)
? s.selectedTableId
: null;
set({
objects: next,
objectHistoryPast: newPast,
objectHistoryFuture: [currentSnap, ...s.objectHistoryFuture].slice(
-MAX_OBJECT_HISTORY,
),
pages:
s.currentPageId != null
? s.pages.map((p) =>
p.id === s.currentPageId ? { ...p, objects: next } : p,
)
: s.pages,
selectedObjectIds: nextSelIds,
selectedObjectId: nextSelIds[0] ?? null,
selectedTableId: nextTable,
selectedCellId: null,
editingCell: null,
});
},
redoObjects: () => {
const s = get();
if (s.objectHistoryFuture.length === 0) return;
const forward = s.objectHistoryFuture[0]!;
const newFuture = s.objectHistoryFuture.slice(1);
const currentSnap = cloneObjectList(s.objects);
const next = cloneObjectList(forward);
const idSet = new Set(next.map((o) => o.id));
const nextSelIds = s.selectedObjectIds.filter((id) => idSet.has(id));
const nextTable =
s.selectedTableId && idSet.has(s.selectedTableId)
? s.selectedTableId
: null;
set({
objects: next,
objectHistoryPast: [...s.objectHistoryPast, currentSnap].slice(
-MAX_OBJECT_HISTORY,
),
objectHistoryFuture: newFuture,
pages:
s.currentPageId != null
? s.pages.map((p) =>
p.id === s.currentPageId ? { ...p, objects: next } : p,
)
: s.pages,
selectedObjectIds: nextSelIds,
selectedObjectId: nextSelIds[0] ?? null,
selectedTableId: nextTable,
selectedCellId: null,
editingCell: null,
});
},
bringObjectForward: (id) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const objs = [...state.objects];
const i = objs.findIndex((o) => o.id === id);
if (i === -1 || i >= objs.length - 1) return;
[objs[i], objs[i + 1]] = [objs[i + 1]!, objs[i]!];
if (state.currentPageId) {
set({
objects: objs,
pages: state.pages.map((p) =>
p.id === state.currentPageId ? { ...p, objects: objs } : p,
),
});
return;
}
set({ objects: objs });
},
sendObjectBackward: (id) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const objs = [...state.objects];
const i = objs.findIndex((o) => o.id === id);
if (i <= 0) return;
[objs[i], objs[i - 1]] = [objs[i - 1]!, objs[i]!];
if (state.currentPageId) {
set({
objects: objs,
pages: state.pages.map((p) =>
p.id === state.currentPageId ? { ...p, objects: objs } : p,
),
});
return;
}
set({ objects: objs });
},
addObject: (object) => {
const state = get();
if (state.currentPageId) {
@@ -220,7 +369,10 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
),
}));
},
deleteObject: (id) => {
deleteObject: (id, options) => {
if (!options?.skipHistory) {
get().commitObjectHistoryBeforeChange();
}
const state = get();
if (state.currentPageId) {
set((state) => ({
@@ -246,6 +398,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
}));
},
duplicateObject: (id) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const objectToDuplicate = state.objects.find((obj) => obj.id === id);
if (!objectToDuplicate) return;
@@ -297,6 +450,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
const state = get();
if (state.clipboardObjects.length === 0) return;
get().commitObjectHistoryBeforeChange();
const pastedObjects = cloneObjectsForPaste(state.clipboardObjects);
const pastedIds = pastedObjects.map((obj) => obj.id);
@@ -323,6 +477,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
reorderObjects: (draggedId, targetId) => {
if (draggedId === targetId) return;
get().commitObjectHistoryBeforeChange();
const state = get();
if (state.currentPageId) {
set((state) => ({
@@ -411,6 +566,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
get().setSelectedTableId(tableId);
},
addRow: (tableId) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -440,6 +596,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
});
},
addColumn: (tableId) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -469,6 +626,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
});
},
removeRow: (tableId) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -492,6 +650,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
});
},
removeColumn: (tableId) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -515,6 +674,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
});
},
updateCellValue: (tableId, cellId, text) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -536,6 +696,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
});
},
changeCellBackground: (tableId, cellId, color) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === tableId);
if (!obj || !obj.tableData) return;
@@ -617,6 +778,8 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
objects: [],
guides: [],
selectedObjectId: null,
objectHistoryPast: [],
objectHistoryFuture: [],
}));
},
duplicatePage: (pageId) => {
@@ -658,6 +821,8 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
objects: newCurrentPage?.objects || [],
guides: newCurrentPage?.guides || [],
selectedObjectId: null,
objectHistoryPast: [],
objectHistoryFuture: [],
});
},
setCurrentPage: (pageId) => {
@@ -683,6 +848,8 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
objects: targetPageFromUpdated.objects,
guides: targetPageFromUpdated.guides || [],
selectedObjectId: null,
objectHistoryPast: [],
objectHistoryFuture: [],
});
},
updatePageName: (pageId, name) => {
@@ -691,6 +858,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
}));
},
toggleObjectVisibility: (id) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const obj = state.objects.find((o) => o.id === id);
if (!obj) return;
@@ -729,6 +897,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
}));
},
groupObjects: (objectIds) => {
get().commitObjectHistoryBeforeChange();
const state = get();
const result = buildGroupResult(state.objects, objectIds);
if (!result) return;
@@ -762,6 +931,7 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
}));
},
ungroupObjects: (groupId) => {
get().commitObjectHistoryBeforeChange();
const state = get();
if (state.currentPageId) {
@@ -803,6 +973,8 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
guides: firstPage.guides || [],
selectedObjectId: null,
selectedObjectIds: [],
objectHistoryPast: [],
objectHistoryFuture: [],
});
},
};