feat: enhance canvas and node components with improved edge handling and new node features

- Refactored canvas toolbar to utilize new canvas placement context for node creation.
- Updated node components (compare, group, image, note, prompt, text) to include source and target handles for better edge management.
- Improved edge intersection handling during node drag operations for enhanced user experience.
- Added utility functions for edge identification and node positioning to streamline interactions.

components/canvas/nodes/compare-node.tsx

@@ -80,6 +80,12 @@ export default function CompareNode({ data, selected }: NodeProps) {
         style={{ top: "55%" }}
         className="!h-3 !w-3 !border-2 !border-background !bg-emerald-500"
       />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="compare-out"
+        className="!h-3 !w-3 !border-2 !border-background !bg-muted-foreground"
+      />
 
       <div
         ref={containerRef}

components/canvas/nodes/group-node.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect } from "react";
-import { type NodeProps, type Node } from "@xyflow/react";
+import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
 import { useMutation } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
@@ -22,6 +22,7 @@ export default function GroupNode({ id, data, selected }: NodeProps<GroupNode>)
 
   useEffect(() => {
     if (!isEditing) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setLabel(data.label ?? "Gruppe");
     }
   }, [data.label, isEditing]);
@@ -46,6 +47,12 @@ export default function GroupNode({ id, data, selected }: NodeProps<GroupNode>)
       selected={selected}
       className="min-w-[200px] min-h-[150px] p-3 border-dashed"
     >
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!h-3 !w-3 !bg-muted-foreground !border-2 !border-background"
+      />
+
       {isEditing ? (
         <input
           value={label}
@@ -63,6 +70,12 @@ export default function GroupNode({ id, data, selected }: NodeProps<GroupNode>)
           📁 {label}
         </div>
       )}
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!h-3 !w-3 !bg-muted-foreground !border-2 !border-background"
+      />
     </BaseNodeWrapper>
   );
 }

components/canvas/nodes/image-node.tsx

@@ -117,6 +117,12 @@ export default function ImageNode({ id, data, selected }: NodeProps<ImageNode>)
 
   return (
     <BaseNodeWrapper selected={selected} status={data._status}>
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="h-3! w-3! bg-primary! border-2! border-background!"
+      />
+
       <div className="p-2">
         <div className="mb-1 flex items-center justify-between">
           <div className="text-xs font-medium text-muted-foreground">🖼️ Bild</div>

components/canvas/nodes/note-node.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect } from "react";
-import { type NodeProps, type Node } from "@xyflow/react";
+import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
 import { useMutation } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
@@ -23,6 +23,7 @@ export default function NoteNode({ id, data, selected }: NodeProps<NoteNode>) {
 
   useEffect(() => {
     if (!isEditing) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setContent(data.content ?? "");
     }
   }, [data.content, isEditing]);
@@ -53,6 +54,12 @@ export default function NoteNode({ id, data, selected }: NodeProps<NoteNode>) {
 
   return (
     <BaseNodeWrapper selected={selected} className="w-52 p-3">
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+      />
+
       <div className="text-xs font-medium text-muted-foreground mb-1">
         📌 Notiz
       </div>
@@ -78,6 +85,12 @@ export default function NoteNode({ id, data, selected }: NodeProps<NoteNode>) {
           )}
         </div>
       )}
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+      />
     </BaseNodeWrapper>
   );
 }

components/canvas/nodes/prompt-node.tsx

@@ -13,6 +13,7 @@ import { useMutation, useAction } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import BaseNodeWrapper from "./base-node-wrapper";
+import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { DEFAULT_MODEL_ID } from "@/lib/ai-models";
 import {
@@ -104,9 +105,9 @@ export default function PromptNode({
   dataRef.current = data;
 
   const updateData = useMutation(api.nodes.updateData);
-  const createNode = useMutation(api.nodes.create);
   const createEdge = useMutation(api.edges.create);
   const generateImage = useAction(api.ai.generateImage);
+  const { createNodeWithIntersection } = useCanvasPlacement();
 
   const debouncedSave = useDebouncedCallback(() => {
     const raw = dataRef.current as Record<string, unknown>;
@@ -181,11 +182,9 @@ export default function PromptNode({
       const viewport = getImageViewportSize(aspectRatio);
       const outer = getAiImageNodeOuterSize(viewport);
 
-      const aiNodeId = await createNode({
-        canvasId,
+      const aiNodeId = await createNodeWithIntersection({
         type: "ai-image",
-        positionX: posX,
-        positionY: posY,
+        position: { x: posX, y: posY },
         width: outer.width,
         height: outer.height,
         data: {
@@ -229,7 +228,7 @@ export default function PromptNode({
     id,
     getEdges,
     getNode,
-    createNode,
+    createNodeWithIntersection,
     createEdge,
     generateImage,
   ]);

components/canvas/nodes/text-node.tsx

@@ -75,7 +75,13 @@ export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
   );
 
   return (
-    <BaseNodeWrapper selected={selected} status={data._status}>
+    <BaseNodeWrapper selected={selected} status={data._status} className="relative">
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!h-3 !w-3 !bg-primary !border-2 !border-background"
+      />
+
       <div className="w-64 p-3">
         <div className="text-xs font-medium text-muted-foreground mb-1">
           📝 Text