Create shapes square + circle + ....

src/pages/editor/store/editorStore.ts

@@ -1,7 +1,20 @@
 import { create } from "zustand";
 import Konva from "konva";
+import type { ShapeType } from "./shapeStore";
 
-export type ToolType = "select" | "rectangle" | "circle" | "text" | "image" | "line" | "arrow" | "sticker" | "document" | "video" | "link" | "grid";
+export type ToolType =
+  | "select"
+  | "rectangle"
+  | "circle"
+  | "text"
+  | "image"
+  | "line"
+  | "arrow"
+  | "sticker"
+  | "document"
+  | "video"
+  | "link"
+  | "grid";
 
 export type EditorObject = {
   id: string;
@@ -21,6 +34,7 @@ export type EditorObject = {
   rotation?: number;
   scaleX?: number;
   scaleY?: number;
+  shapeType?: ShapeType;
 };
 
 type EditorStoreType = {
@@ -42,15 +56,19 @@ export const useEditorStore = create<EditorStoreType>((set) => ({
   tool: "select",
   setTool: (tool) => set({ tool }),
   objects: [],
-  addObject: (object) => set((state) => ({ objects: [...state.objects, object] })),
+  addObject: (object) =>
+    set((state) => ({ objects: [...state.objects, object] })),
   updateObject: (id, updates) =>
     set((state) => ({
-      objects: state.objects.map((obj) => (obj.id === id ? { ...obj, ...updates } : obj)),
+      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:
+        state.selectedObjectId === id ? null : state.selectedObjectId,
     })),
   selectedObjectId: null,
   setSelectedObjectId: (id) => set({ selectedObjectId: id }),
@@ -59,4 +77,3 @@ export const useEditorStore = create<EditorStoreType>((set) => ({
   layerRef: null,
   setLayerRef: (ref) => set({ layerRef: ref }),
 }));
-

src/pages/editor/store/shapeStore.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+export type ShapeType = "square" | "circle" | "triangle" | "abstract";
+
+type ShapeStore = {
+    activeShape: ShapeType;
+    setActiveShape: (shape: ShapeType) => void;
+};
+
+export const useShapeStore = create<ShapeStore>((set) => ({
+    activeShape: "square",
+    setActiveShape: (shape) => set({ activeShape: shape }),
+}));
+
+