add konva js to project + create some components with ai

src/pages/editor/store/editorStore.ts

@@ -0,0 +1,62 @@
+import { create } from "zustand";
+import Konva from "konva";
+
+export type ToolType = "select" | "rectangle" | "circle" | "text" | "image" | "line" | "arrow" | "sticker" | "document" | "video" | "link" | "grid";
+
+export type EditorObject = {
+  id: string;
+  type: ToolType;
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  text?: string;
+  fontSize?: number;
+  imageUrl?: string;
+  videoUrl?: string;
+  linkUrl?: string;
+  rotation?: number;
+  scaleX?: number;
+  scaleY?: number;
+};
+
+type EditorStoreType = {
+  tool: ToolType;
+  setTool: (tool: ToolType) => void;
+  objects: EditorObject[];
+  addObject: (object: EditorObject) => void;
+  updateObject: (id: string, updates: Partial<EditorObject>) => void;
+  deleteObject: (id: string) => void;
+  selectedObjectId: string | null;
+  setSelectedObjectId: (id: string | null) => void;
+  stageRef: React.RefObject<Konva.Stage | null> | null;
+  setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
+  layerRef: React.RefObject<Konva.Layer | null> | null;
+  setLayerRef: (ref: React.RefObject<Konva.Layer | null>) => void;
+};
+
+export const useEditorStore = create<EditorStoreType>((set) => ({
+  tool: "select",
+  setTool: (tool) => set({ tool }),
+  objects: [],
+  addObject: (object) => set((state) => ({ objects: [...state.objects, object] })),
+  updateObject: (id, updates) =>
+    set((state) => ({
+      objects: state.objects.map((obj) => (obj.id === id ? { ...obj, ...updates } : obj)),
+    })),
+  deleteObject: (id) =>
+    set((state) => ({
+      objects: state.objects.filter((obj) => obj.id !== id),
+      selectedObjectId: state.selectedObjectId === id ? null : state.selectedObjectId,
+    })),
+  selectedObjectId: null,
+  setSelectedObjectId: (id) => set({ selectedObjectId: id }),
+  stageRef: null,
+  setStageRef: (ref) => set({ stageRef: ref }),
+  layerRef: null,
+  setLayerRef: (ref) => set({ layerRef: ref }),
+}));
+