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

add konva js to project + create some components with ai

Browse Source
This commit is contained in:
hamid zarghami
2025-11-16 16:33:54 +03:30
parent c1c6b0ebf7
commit 1a0c869101
38 changed files with 1855 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/editor/components/EditorSidebar.tsx
+54 -39
View File
@@ -1,11 +1,44 @@
import Logo from "@/assets/images/logo.svg";
import { clx } from "@/helpers/utils";
import { useSharedStore } from "@/shared/store/sharedStore";
import { DocumentUpload, Element, Gallery, Grid8, Link, MouseSquare, Shapes, Sticker, Text, VideoSquare } from "iconsax-react";
import { CloseSquare } from "iconsax-react";
import { useEditorStore, type ToolType } from "../store/editorStore";
import { ToolsBar, ObjectSettings, ToolInstructions } from "./sidebar";
const EditorSidebar = () => {
const { openSidebar, setOpenSidebar } = useSharedStore();
const { tool, setTool, selectedObjectId, objects, updateObject, deleteObject } = useEditorStore();
const selectedObject = objects.find((obj) => obj.id === selectedObjectId);
const handleToolClick = (selectedTool: ToolType) => {
setTool(selectedTool);
};
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (event) => {
const imageUrl = event.target?.result as string;
const img = new Image();
img.onload = () => {
const newImage = {
id: `image-${Date.now()}`,
type: "image" as ToolType,
x: 100,
y: 100,
width: img.width,
height: img.height,
imageUrl,
};
useEditorStore.getState().addObject(newImage);
};
img.src = imageUrl;
};
reader.readAsDataURL(file);
};
return (
<>
@@ -18,52 +51,34 @@ const EditorSidebar = () => {
openSidebar && "z-40 translate-x-0 opacity-100",
)}
>
<div className="mb-10 flex items-center justify-center">
<div className="mb-10 flex items-center justify-between">
<img src={Logo} alt="لوگو دانک" className="h-9" />
<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 className="flex gap-8 flex-1 min-h-0">
<div className="flex h-full max-w-[72px] flex-1 flex-col items-center gap-6 overflow-y-auto border-l border-border">
<div className="min-h-10">
<MouseSquare size={20} color="black" />
</div>
<div className="min-h-10">
<Shapes size={20} color="black" />
</div>
<div className="min-h-10">
<Text size={20} color="black" />
</div>
<div className="min-h-10">
<Grid8 size={20} color="black" />
</div>
<div className="min-h-10">
<Sticker size={20} color="black" />
</div>
<div className="min-h-10">
<DocumentUpload size={20} color="black" />
</div>
<div className="min-h-10">
<Element size={20} color="black" />
</div>
<div className="min-h-10">
<Gallery size={20} color="black" />
</div>
<div className="min-h-10">
<VideoSquare size={20} color="black" />
</div>
<div className="min-h-10">
<Link size={20} color="black" />
</div>
</div>
<div>
s
<ToolsBar tool={tool} onToolClick={handleToolClick} />
<div className="flex-1 overflow-y-auto">
{selectedObject ? (
<ObjectSettings
selectedObject={selectedObject}
onUpdate={updateObject}
onDelete={deleteObject}
/>
) : (
<ToolInstructions tool={tool} onImageUpload={handleImageUpload} />
)}
</div>
</div>
</aside>
</>
);
};
export default EditorSidebar;