Create shapes square + circle + ....

src/pages/editor/components/canvas/ObjectRenderer.tsx

@@ -3,6 +3,8 @@ import type { EditorObject } from "../../store/editorStore";
 import {
     RectangleShape,
     CircleShape,
+    TriangleShape,
+    AbstractShape,
     TextShape,
     LineShape,
     ArrowShape,
@@ -41,6 +43,15 @@ const ObjectRenderer = ({
 
     switch (obj.type) {
         case "rectangle":
+            if (obj.shapeType === "circle") {
+                return <CircleShape key={obj.id} {...commonProps} />;
+            }
+            if (obj.shapeType === "triangle") {
+                return <TriangleShape key={obj.id} {...commonProps} />;
+            }
+            if (obj.shapeType === "abstract") {
+                return <AbstractShape key={obj.id} {...commonProps} />;
+            }
             return <RectangleShape key={obj.id} {...commonProps} />;
         case "circle":
             return <CircleShape key={obj.id} {...commonProps} />;

src/pages/editor/components/canvas/drawingUtils.ts

@@ -1,4 +1,5 @@
 import type { EditorObject, ToolType } from "../../store/editorStore";
+import { useShapeStore } from "../../store/shapeStore";
 
 type DrawingParams = {
   tool: ToolType;
@@ -17,6 +18,7 @@ export const createDrawingObject = ({
   const height = pointerPos.y - startPos.y;
 
   if (tool === "rectangle") {
+    const activeShape = useShapeStore.getState().activeShape;
     return {
       id: tempObject?.id || `rect-${Date.now()}`,
       type: "rectangle",
@@ -27,6 +29,7 @@ export const createDrawingObject = ({
       fill: "#3b82f6",
       stroke: "#1e40af",
       strokeWidth: 2,
+      shapeType: activeShape,
     };
   }