add konva js to project + create some components with ai

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

@@ -0,0 +1,67 @@
+import Konva from "konva";
+import type { EditorObject } from "../../store/editorStore";
+import {
+    RectangleShape,
+    CircleShape,
+    TextShape,
+    LineShape,
+    ArrowShape,
+    ImageObject,
+    LinkShape,
+    VideoShape,
+} from "../tools";
+
+type ObjectRendererProps = {
+    obj: EditorObject;
+    isSelected: boolean;
+    transformerRef: React.RefObject<Konva.Transformer | null>;
+    layerRef: React.RefObject<Konva.Layer | null>;
+    onSelect: (id: string, node: Konva.Node) => void;
+    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+    draggable: boolean;
+};
+
+const ObjectRenderer = ({
+    obj,
+    isSelected,
+    transformerRef,
+    layerRef,
+    onSelect,
+    onUpdate,
+    draggable,
+}: ObjectRendererProps) => {
+    const commonProps = {
+        obj,
+        isSelected,
+        transformerRef,
+        onSelect,
+        onUpdate,
+        draggable,
+    };
+
+    switch (obj.type) {
+        case "rectangle":
+            return <RectangleShape key={obj.id} {...commonProps} />;
+        case "circle":
+            return <CircleShape key={obj.id} {...commonProps} />;
+        case "text":
+            return <TextShape key={obj.id} {...commonProps} layerRef={layerRef} />;
+        case "line":
+            return <LineShape key={obj.id} {...commonProps} />;
+        case "arrow":
+            return <ArrowShape key={obj.id} {...commonProps} />;
+        case "image":
+            return <ImageObject key={obj.id} {...commonProps} />;
+        case "link":
+            return <LinkShape key={obj.id} {...commonProps} />;
+        case "video":
+            return <VideoShape key={obj.id} {...commonProps} />;
+        case "document":
+            return <ImageObject key={obj.id} {...commonProps} />;
+        default:
+            return null;
+    }
+};
+
+export default ObjectRenderer;
+