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 { CloseSquare } from "iconsax-react";
import { useEditorStore, type ToolType } from "../store/editorStore"; import { useEditorStore, type ToolType } from "../store/editorStore";
import { useObjectHandlers } from "./canvas/useObjectHandlers"; import { useObjectHandlers } from "./canvas/useObjectHandlers";
import { ToolsBar, ObjectSettings, ToolInstructions } from "./sidebar"; import { ObjectSettings, ToolInstructions, ToolsBar } from "./sidebar";
type EditorSidebarProps = { type EditorSidebarProps = {
catalogSize?: string; catalogSize?: string;
}; };
const EditorSidebar = ({ catalogSize }: EditorSidebarProps) => { const EditorSidebar = ({ catalogSize }: EditorSidebarProps) => {
const { openSidebar, setOpenSidebar } = useSharedStore(); const { openSidebar, setOpenSidebar } = useSharedStore();
const { tool, setTool, selectedObjectId, objects, deleteObject } = useEditorStore(); const { tool, setTool, selectedObjectId, objects, deleteObject } =
const { handleObjectUpdate } = useObjectHandlers(); useEditorStore();
const { handleObjectUpdate } = useObjectHandlers();
const selectedObject = objects.find((obj) => obj.id === selectedObjectId); const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
const { width: pageWidth, height: pageHeight } = getPaperDimensions(catalogSize ?? "a4"); const { width: pageWidth, height: pageHeight } = getPaperDimensions(
catalogSize ?? "a4",
);
const handleToolClick = (selectedTool: ToolType) => { const handleToolClick = (selectedTool: ToolType) => {
setTool(selectedTool); setTool(selectedTool);
}; };
// const handleLoadJSON = async () => { // const handleLoadJSON = async () => {
// try { // try {
// const response = await fetch('/viewer-data.json'); // const response = await fetch('/viewer-data.json');
// const data = await response.json(); // const data = await response.json();
// if (data.pages && Array.isArray(data.pages)) { // if (data.pages && Array.isArray(data.pages)) {
// loadPages(data.pages); // loadPages(data.pages);
// } // }
// } catch (error) { // } catch (error) {
// console.error('خطا در لود JSON:', error); // console.error('خطا در لود JSON:', error);
// alert('خطا در لود فایل JSON'); // alert('خطا در لود فایل JSON');
// } // }
// }; // };
return (
return ( <>
<> {openSidebar ? (
{openSidebar ? ( <div
<div className="fixed inset-0 z-10 bg-black/50" onClick={() => setOpenSidebar(false)} /> className="fixed inset-0 z-10 bg-black/50"
) : null} onClick={() => setOpenSidebar(false)}
<aside />
className={clx( ) : null}
"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", <aside
openSidebar && "z-40 translate-x-0 opacity-100", 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"> <div className="mb-10 flex items-center justify-between">
{/* <button <img src={Logo} alt="لوگو دانک" className="h-5 mx-auto pr-3" />
<div className="flex items-center gap-2">
{/* <button
onClick={handleLoadJSON} onClick={handleLoadJSON}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors" className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
title="لود JSON" title="لود JSON"
> >
<DocumentUpload color="black" size={24} /> <DocumentUpload color="black" size={24} />
</button> */} </button> */}
<button <button
onClick={() => setOpenSidebar(false)} onClick={() => setOpenSidebar(false)}
className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors" className="xl:hidden p-2 hover:bg-gray-100 rounded-lg transition-colors"
> >
<CloseSquare color="black" size={24} /> <CloseSquare color="black" size={24} />
</button> </button>
</div> </div>
</div> </div>
<div className="flex gap-8 flex-1 min-h-0"> <div className="flex gap-8 flex-1 min-h-0">
<ToolsBar tool={tool} onToolClick={handleToolClick} /> <ToolsBar tool={tool} onToolClick={handleToolClick} />
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
{selectedObject ? ( {selectedObject ? (
<ObjectSettings <ObjectSettings
selectedObject={selectedObject} selectedObject={selectedObject}
pageWidth={pageWidth} pageWidth={pageWidth}
pageHeight={pageHeight} pageHeight={pageHeight}
onUpdate={handleObjectUpdate} onUpdate={handleObjectUpdate}
onDelete={deleteObject} onDelete={deleteObject}
/> />
) : ( ) : (
<ToolInstructions tool={tool} /> <ToolInstructions tool={tool} />
)} )}
</div> </div>
</div> </div>
</aside> </aside>
</> </>
); );
}; };
export default EditorSidebar; export default EditorSidebar;