feat: implement Convex-synced canvas foundation

2026-03-25 14:21:19 +01:00
parent 66c4455033
commit 4d17936570
21 changed files with 2347 additions and 35 deletions
--- a/components/canvas/canvas-toolbar.tsx
+++ b/components/canvas/canvas-toolbar.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useMutation } from "convex/react";
+import { useRef } from "react";
+
+import { api } from "@/convex/_generated/api";
+import type { Id } from "@/convex/_generated/dataModel";
+
+const nodeTemplates = [
+  {
+    type: "image",
+    label: "Bild",
+    width: 280,
+    height: 180,
+    defaultData: {},
+  },
+  {
+    type: "text",
+    label: "Text",
+    width: 256,
+    height: 120,
+    defaultData: { content: "" },
+  },
+  {
+    type: "prompt",
+    label: "Prompt",
+    width: 320,
+    height: 140,
+    defaultData: { content: "", model: "" },
+  },
+  {
+    type: "note",
+    label: "Notiz",
+    width: 220,
+    height: 120,
+    defaultData: { content: "" },
+  },
+  {
+    type: "frame",
+    label: "Frame",
+    width: 360,
+    height: 240,
+    defaultData: { label: "Untitled", exportWidth: 1080, exportHeight: 1080 },
+  },
+] as const;
+
+interface CanvasToolbarProps {
+  canvasId: Id<"canvases">;
+}
+
+export default function CanvasToolbar({ canvasId }: CanvasToolbarProps) {
+  const createNode = useMutation(api.nodes.create);
+  const nodeCountRef = useRef(0);
+
+  const handleAddNode = async (
+    type: (typeof nodeTemplates)[number]["type"],
+    data: (typeof nodeTemplates)[number]["defaultData"],
+    width: number,
+    height: number,
+  ) => {
+    const offset = (nodeCountRef.current % 8) * 24;
+    nodeCountRef.current += 1;
+    await createNode({
+      canvasId,
+      type,
+      positionX: 100 + offset,
+      positionY: 100 + offset,
+      width,
+      height,
+      data,
+    });
+  };
+
+  return (
+    <div className="absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-1 rounded-xl border bg-card/90 p-1.5 shadow-lg backdrop-blur-sm">
+      {nodeTemplates.map((template) => (
+        <button
+          key={template.type}
+          onClick={() =>
+            void handleAddNode(
+              template.type,
+              template.defaultData,
+              template.width,
+              template.height,
+            )
+          }
+          className="rounded-lg px-3 py-1.5 text-sm transition-colors hover:bg-accent"
+          title={`${template.label} hinzufuegen`}
+          type="button"
+        >
+          {template.label}
+        </button>
+      ))}
+    </div>
+  );
+}