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

get size logo smaller
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-03 11:21:50 +03:30
parent 8a5cd09172
commit 76f3e1bf6e
1 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorSidebar.tsx
+70 -65
View File
@@ -5,88 +5,93 @@ import { useSharedStore } from "@/shared/store/sharedStore";
import { CloseSquare } from "iconsax-react";
import { useEditorStore, type ToolType } from "../store/editorStore";
import { useObjectHandlers } from "./canvas/useObjectHandlers";
import { ToolsBar, ObjectSettings, ToolInstructions } from "./sidebar";
import { ObjectSettings, ToolInstructions, ToolsBar } from "./sidebar";
type EditorSidebarProps = {
catalogSize?: string;
catalogSize?: string;
};
const EditorSidebar = ({ catalogSize }: EditorSidebarProps) => {
const { openSidebar, setOpenSidebar } = useSharedStore();
const { tool, setTool, selectedObjectId, objects, deleteObject } = useEditorStore();
const { handleObjectUpdate } = useObjectHandlers();
const { openSidebar, setOpenSidebar } = useSharedStore();
const { tool, setTool, selectedObjectId, objects, deleteObject } =
useEditorStore();
const { handleObjectUpdate } = useObjectHandlers();
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
const { width: pageWidth, height: pageHeight } = getPaperDimensions(catalogSize ?? "a4");
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
const { width: pageWidth, height: pageHeight } = getPaperDimensions(
catalogSize ?? "a4",
);
const handleToolClick = (selectedTool: ToolType) => {
setTool(selectedTool);
};
const handleToolClick = (selectedTool: ToolType) => {
setTool(selectedTool);
};
// const handleLoadJSON = async () => {
// try {
// const response = await fetch('/viewer-data.json');
// const data = await response.json();
// if (data.pages && Array.isArray(data.pages)) {
// loadPages(data.pages);
// }
// } catch (error) {
// console.error('خطا در لود JSON:', error);
// alert('خطا در لود فایل JSON');
// }
// };
// const handleLoadJSON = async () => {
// try {
// const response = await fetch('/viewer-data.json');
// const data = await response.json();
// if (data.pages && Array.isArray(data.pages)) {
// loadPages(data.pages);
// }
// } catch (error) {
// console.error('خطا در لود JSON:', error);
// alert('خطا در لود فایل JSON');
// }
// };
return (
<>
{openSidebar ? (
<div className="fixed inset-0 z-10 bg-black/50" onClick={() => setOpenSidebar(false)} />
) : null}
<aside
className={clx(
"fixed right-0 top-0 bottom-0 flex translate-x-[420px] w-[350px] flex-col bg-white py-10 opacity-0 transition-all ease-in-out xl:visible xl:right-4 xl:top-4 xl:bottom-4 xl:translate-x-0 xl:rounded-[32px] xl:bg-white xl:px-2 pl-8 xl:pl-8 px-2 xl:py-10 xl:opacity-100",
openSidebar && "z-40 translate-x-0 opacity-100",
)}
>
<div className="mb-10 flex items-center justify-between">
<img src={Logo} alt="لوگو دانک" className="h-9 mx-auto pr-3" />
<div className="flex items-center gap-2">
{/* <button
return (
<>
{openSidebar ? (
<div
className="fixed inset-0 z-10 bg-black/50"
onClick={() => setOpenSidebar(false)}
/>
) : null}
<aside
className={clx(
"fixed right-0 top-0 bottom-0 flex translate-x-[420px] w-[350px] flex-col bg-white py-10 opacity-0 transition-all ease-in-out xl:visible xl:right-4 xl:top-4 xl:bottom-4 xl:translate-x-0 xl:rounded-[32px] xl:bg-white xl:px-2 pl-8 xl:pl-8 px-2 xl:py-10 xl:opacity-100",
openSidebar && "z-40 translate-x-0 opacity-100",
)}
>
<div className="mb-10 flex items-center justify-between">
<img src={Logo} alt="لوگو دانک" className="h-5 mx-auto pr-3" />
<div className="flex items-center gap-2">
{/* <button
onClick={handleLoadJSON}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
title="لود JSON"
>
<DocumentUpload color="black" size={24} />
</button> */}
<button
onClick={() => setOpenSidebar(false)}
className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<CloseSquare color="black" size={24} />
</button>
</div>
</div>
<button
onClick={() => setOpenSidebar(false)}
className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
<CloseSquare color="black" size={24} />
</button>
</div>
</div>
<div className="flex gap-8 flex-1 min-h-0">
<ToolsBar tool={tool} onToolClick={handleToolClick} />
<div className="flex gap-8 flex-1 min-h-0">
<ToolsBar tool={tool} onToolClick={handleToolClick} />
<div className="flex-1 overflow-y-auto">
{selectedObject ? (
<ObjectSettings
selectedObject={selectedObject}
pageWidth={pageWidth}
pageHeight={pageHeight}
onUpdate={handleObjectUpdate}
onDelete={deleteObject}
/>
) : (
<ToolInstructions tool={tool} />
)}
</div>
</div>
</aside>
</>
);
<div className="flex-1 overflow-y-auto">
{selectedObject ? (
<ObjectSettings
selectedObject={selectedObject}
pageWidth={pageWidth}
pageHeight={pageHeight}
onUpdate={handleObjectUpdate}
onDelete={deleteObject}
/>
) : (
<ToolInstructions tool={tool} />
)}
</div>
</div>
</aside>
</>
);
};
export default EditorSidebar;