From 1b165baa2dbc310fa9eff7c1303c7b6503f7c17d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:01:14 +0000
Subject: [PATCH 1/6] Add comprehensive drawing feature to mapping application

Implemented a full-featured drawing toolset that allows users to draw directly on event floor plans:

**New Components:**
- FreehandDrawingNode: Supports freehand pen drawing with customizable stroke width and color
- ShapeNode: Enables drawing of rectangles, circles, and arrows with fill/stroke options
- TextAnnotationNode: Allows adding text annotations with font size and style controls
- DrawingToolbar: Central toolbar with tool selection (select, freehand, shapes, text)
- DrawingSettings: Unified settings panel for customizing drawn elements
- UI Components: Added Checkbox and Slider components from Radix UI

**Enhanced EventFlow:**
- Integrated drawing mode with tool selection
- Added mouse event handlers for interactive drawing (mousedown, mousemove, mouseup)
- Drawing elements are fully compatible with existing undo/redo system
- All drawn elements auto-save to database like other nodes
- Drawn elements support all standard operations: move, delete, edit properties

**Features:**
- Freehand drawing with smooth SVG paths
- Shape drawing (rectangles, circles, arrows) with optional fill
- Text annotations with customizable font size, weight, and background
- Color picker with presets for all drawing elements
- Stroke width adjustment for lines and shapes
- Label and notes support for all drawn elements
- Real-time collaboration support (drawn elements sync via Ably)
- Full integration with existing copy/paste functionality

**Dependencies:**
- Added @radix-ui/react-slider and @radix-ui/react-checkbox

This feature enables users to annotate floor plans with custom drawings, shapes, and text, making event planning more flexible and detailed.
---
 components/DrawingSettings.tsx     | 268 +++++++++++++++++++++++++++++
 components/DrawingToolbar.tsx      |  61 +++++++
 components/EventFlow.tsx           | 201 +++++++++++++++++++++-
 components/FreehandDrawingNode.tsx | 144 ++++++++++++++++
 components/ShapeNode.tsx           | 220 +++++++++++++++++++++++
 components/TextAnnotationNode.tsx  | 178 +++++++++++++++++++
 components/ui/checkbox.tsx         |  30 ++++
 components/ui/slider.tsx           |  28 +++
 package.json                       |   2 +
 9 files changed, 1130 insertions(+), 2 deletions(-)
 create mode 100644 components/DrawingSettings.tsx
 create mode 100644 components/DrawingToolbar.tsx
 create mode 100644 components/FreehandDrawingNode.tsx
 create mode 100644 components/ShapeNode.tsx
 create mode 100644 components/TextAnnotationNode.tsx
 create mode 100644 components/ui/checkbox.tsx
 create mode 100644 components/ui/slider.tsx

diff --git a/components/DrawingSettings.tsx b/components/DrawingSettings.tsx
new file mode 100644
index 0000000..eab9068
--- /dev/null
+++ b/components/DrawingSettings.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Trash2, Palette } from "lucide-react";
+import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FreehandDrawingData } from "./FreehandDrawingNode";
+import { ShapeData } from "./ShapeNode";
+import { TextAnnotationData } from "./TextAnnotationNode";
+
+const colorPresets = [
+  "#000000", "#FF0000", "#00FF00", "#0000FF",
+  "#FFFF00", "#FF00FF", "#00FFFF", "#FFA500",
+  "#800080", "#008080", "#808080", "#FFFFFF"
+];
+
+interface DrawingSettingsProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  id: string;
+  data: FreehandDrawingData | ShapeData | TextAnnotationData;
+  type: "freehand" | "shape" | "text";
+  handleLabelChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleNotesChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleColorChange?: (color: string) => void;
+  handleFillColorChange?: (fillColor: string) => void;
+  handleFilledChange?: (filled: boolean) => void;
+  handleStrokeWidthChange?: (width: number) => void;
+  handleTextChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleBackgroundColorChange?: (color: string) => void;
+  handleFontSizeChange?: (size: number) => void;
+  handleFontWeightChange?: (weight: "normal" | "bold") => void;
+  handleDelete: () => void;
+}
+
+export default function DrawingSettings({
+  isOpen,
+  setIsOpen,
+  id,
+  data,
+  type,
+  handleLabelChange,
+  handleNotesChange,
+  handleColorChange,
+  handleFillColorChange,
+  handleFilledChange,
+  handleStrokeWidthChange,
+  handleTextChange,
+  handleBackgroundColorChange,
+  handleFontSizeChange,
+  handleFontWeightChange,
+  handleDelete,
+}: DrawingSettingsProps) {
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div
+          className="absolute inset-0 popover-trigger"
+          style={{ cursor: "move" }}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-80 max-h-[80vh] overflow-y-auto">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor={`label-${id}`}>Label</Label>
+            <Input
+              id={`label-${id}`}
+              value={data.label}
+              onChange={handleLabelChange}
+              placeholder="Enter label"
+            />
+          </div>
+
+          {type === "text" && handleTextChange && (
+            <div className="space-y-2">
+              <Label htmlFor={`text-${id}`}>Text</Label>
+              <Textarea
+                id={`text-${id}`}
+                value={(data as TextAnnotationData).text}
+                onChange={handleTextChange}
+                placeholder="Enter text"
+                rows={3}
+              />
+            </div>
+          )}
+
+          {type === "text" && handleFontSizeChange && (
+            <div className="space-y-2">
+              <Label>Font Size: {(data as TextAnnotationData).fontSize || 16}px</Label>
+              <Slider
+                value={[(data as TextAnnotationData).fontSize || 16]}
+                onValueChange={([value]) => handleFontSizeChange(value)}
+                min={8}
+                max={48}
+                step={1}
+              />
+            </div>
+          )}
+
+          {type === "text" && handleFontWeightChange && (
+            <div className="space-y-2">
+              <Label>Font Weight</Label>
+              <div className="flex gap-2">
+                <Button
+                  variant={(data as TextAnnotationData).fontWeight === "normal" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => handleFontWeightChange("normal")}
+                >
+                  Normal
+                </Button>
+                <Button
+                  variant={(data as TextAnnotationData).fontWeight === "bold" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => handleFontWeightChange("bold")}
+                >
+                  Bold
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {handleColorChange && (
+            <div className="space-y-2">
+              <Label>
+                <Palette className="inline w-4 h-4 mr-1" />
+                {type === "text" ? "Text Color" : "Stroke Color"}
+              </Label>
+              <div className="grid grid-cols-6 gap-2">
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                    style={{
+                      backgroundColor: color,
+                      borderColor: data.color === color ? "#000" : "#ccc",
+                    }}
+                    onClick={() => handleColorChange(color)}
+                  />
+                ))}
+              </div>
+              <Input
+                type="color"
+                value={data.color || "#000000"}
+                onChange={(e) => handleColorChange(e.target.value)}
+                className="w-full h-10"
+              />
+            </div>
+          )}
+
+          {type === "text" && handleBackgroundColorChange && (
+            <div className="space-y-2">
+              <Label>Background Color</Label>
+              <div className="grid grid-cols-6 gap-2">
+                <button
+                  className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                  style={{
+                    backgroundColor: "transparent",
+                    borderColor: (data as TextAnnotationData).backgroundColor === "transparent" ? "#000" : "#ccc",
+                    backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)",
+                    backgroundSize: "8px 8px",
+                    backgroundPosition: "0 0, 4px 4px",
+                  }}
+                  onClick={() => handleBackgroundColorChange("transparent")}
+                />
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                    style={{
+                      backgroundColor: color,
+                      borderColor: (data as TextAnnotationData).backgroundColor === color ? "#000" : "#ccc",
+                    }}
+                    onClick={() => handleBackgroundColorChange(color)}
+                  />
+                ))}
+              </div>
+              <Input
+                type="color"
+                value={(data as TextAnnotationData).backgroundColor !== "transparent"
+                  ? (data as TextAnnotationData).backgroundColor
+                  : "#FFFFFF"}
+                onChange={(e) => handleBackgroundColorChange(e.target.value)}
+                className="w-full h-10"
+              />
+            </div>
+          )}
+
+          {type === "shape" && handleFillColorChange && handleFilledChange && (
+            <>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id={`filled-${id}`}
+                  checked={(data as ShapeData).filled || false}
+                  onCheckedChange={(checked) => handleFilledChange(!!checked)}
+                />
+                <Label htmlFor={`filled-${id}`}>Fill Shape</Label>
+              </div>
+              {(data as ShapeData).filled && (
+                <div className="space-y-2">
+                  <Label>Fill Color</Label>
+                  <div className="grid grid-cols-6 gap-2">
+                    {colorPresets.map((color) => (
+                      <button
+                        key={color}
+                        className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                        style={{
+                          backgroundColor: color,
+                          borderColor: (data as ShapeData).fillColor === color ? "#000" : "#ccc",
+                        }}
+                        onClick={() => handleFillColorChange(color)}
+                      />
+                    ))}
+                  </div>
+                  <Input
+                    type="color"
+                    value={(data as ShapeData).fillColor || "#FFFFFF"}
+                    onChange={(e) => handleFillColorChange(e.target.value)}
+                    className="w-full h-10"
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {(type === "freehand" || type === "shape") && handleStrokeWidthChange && (
+            <div className="space-y-2">
+              <Label>
+                Stroke Width: {(data as FreehandDrawingData | ShapeData).strokeWidth || 2}px
+              </Label>
+              <Slider
+                value={[(data as FreehandDrawingData | ShapeData).strokeWidth || 2]}
+                onValueChange={([value]) => handleStrokeWidthChange(value)}
+                min={1}
+                max={10}
+                step={1}
+              />
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor={`notes-${id}`}>Notes</Label>
+            <Textarea
+              id={`notes-${id}`}
+              value={data.notes || ""}
+              onChange={handleNotesChange}
+              placeholder="Add notes..."
+              rows={3}
+            />
+          </div>
+
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={handleDelete}
+            className="w-full"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/components/DrawingToolbar.tsx b/components/DrawingToolbar.tsx
new file mode 100644
index 0000000..6f863c5
--- /dev/null
+++ b/components/DrawingToolbar.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Pencil,
+  Square,
+  Circle,
+  ArrowRight,
+  Type,
+  MousePointer,
+} from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+export type DrawingTool = "select" | "freehand" | "rectangle" | "circle" | "arrow" | "text";
+
+interface DrawingToolbarProps {
+  activeTool: DrawingTool;
+  onToolChange: (tool: DrawingTool) => void;
+  isEditable: boolean;
+}
+
+export default function DrawingToolbar({
+  activeTool,
+  onToolChange,
+  isEditable,
+}: DrawingToolbarProps) {
+  if (!isEditable) return null;
+
+  const tools: { id: DrawingTool; icon: React.ReactNode; label: string }[] = [
+    { id: "select", icon: <MousePointer className="w-4 h-4" />, label: "Select" },
+    { id: "freehand", icon: <Pencil className="w-4 h-4" />, label: "Freehand Draw" },
+    { id: "rectangle", icon: <Square className="w-4 h-4" />, label: "Rectangle" },
+    { id: "circle", icon: <Circle className="w-4 h-4" />, label: "Circle" },
+    { id: "arrow", icon: <ArrowRight className="w-4 h-4" />, label: "Arrow" },
+    { id: "text", icon: <Type className="w-4 h-4" />, label: "Text" },
+  ];
+
+  return (
+    <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex gap-1">
+      <TooltipProvider>
+        {tools.map((tool) => (
+          <Tooltip key={tool.id}>
+            <TooltipTrigger asChild>
+              <Button
+                variant={activeTool === tool.id ? "default" : "ghost"}
+                size="sm"
+                onClick={() => onToolChange(tool.id)}
+                className="w-10 h-10 p-0"
+              >
+                {tool.icon}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{tool.label}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index d26be5e..14a4194 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -32,6 +32,10 @@ import EventMapSelect from "@components/EventMapSelect";
 import { ActiveNodeContext, IconNode } from "@components/IconNode";
 import Legend from "@components/Legend";
 import ControlButtons from "./ControlButtons";
+import DrawingToolbar, { DrawingTool } from "./DrawingToolbar";
+import { FreehandDrawingNode, FreehandDrawingData } from "./FreehandDrawingNode";
+import { ShapeNode, ShapeData } from "./ShapeNode";
+import { TextAnnotationNode, TextAnnotationData } from "./TextAnnotationNode";
 
 // Types
 import { CustomNode } from "@/types/CustomNode";
@@ -50,6 +54,9 @@ const clientId = createId();
 const nodeTypes = {
   iconNode: IconNode,
   customImageNode: CustomImageNode,
+  freehandDrawing: FreehandDrawingNode,
+  shape: ShapeNode,
+  textAnnotation: TextAnnotationNode,
 };
 
 const edgeTypes = {
@@ -201,6 +208,12 @@ function Flow({
   // Add state for tracking the active node
   const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
 
+  // Drawing tool state
+  const [activeTool, setActiveTool] = useState<DrawingTool>("select");
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [drawingPath, setDrawingPath] = useState<{ x: number; y: number }[]>([]);
+  const [drawStartPos, setDrawStartPos] = useState<{ x: number; y: number } | null>(null);
+
   /**
    * Handle keyboard shortcuts (edit mode only)
    */
@@ -587,6 +600,180 @@ function Flow({
     [screenToFlowPosition, setNodes]
   );
 
+  /**
+   * Handle drawing tool change
+   */
+  const handleToolChange = useCallback((tool: DrawingTool) => {
+    setActiveTool(tool);
+    setIsDrawing(false);
+    setDrawingPath([]);
+    setDrawStartPos(null);
+  }, []);
+
+  /**
+   * Handle mouse down on pane for drawing
+   */
+  const onPaneMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditable || activeTool === "select") return;
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      setIsDrawing(true);
+      setDrawStartPos(position);
+      setDrawingPath([position]);
+    },
+    [isEditable, activeTool, screenToFlowPosition]
+  );
+
+  /**
+   * Handle mouse move while drawing
+   */
+  const onPaneMouseMove = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isDrawing || activeTool === "select") return;
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      if (activeTool === "freehand") {
+        setDrawingPath((path) => [...path, position]);
+      }
+    },
+    [isDrawing, activeTool, screenToFlowPosition]
+  );
+
+  /**
+   * Handle mouse up to finish drawing
+   */
+  const onPaneMouseUp = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isDrawing || !drawStartPos) return;
+
+      const endPosition = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      // Create the appropriate node based on the active tool
+      let newNode: CustomNode | null = null;
+
+      if (activeTool === "freehand" && drawingPath.length > 1) {
+        // Convert drawing path to SVG path
+        const minX = Math.min(...drawingPath.map((p) => p.x));
+        const minY = Math.min(...drawingPath.map((p) => p.y));
+        const pathData = drawingPath
+          .map((p, i) => {
+            const x = p.x - minX;
+            const y = p.y - minY;
+            return `${i === 0 ? "M" : "L"} ${x} ${y}`;
+          })
+          .join(" ");
+
+        newNode = {
+          id: getId(),
+          type: "freehandDrawing",
+          position: { x: minX, y: minY },
+          data: {
+            label: "Drawing",
+            path: pathData,
+            color: "#000000",
+            strokeWidth: 2,
+            rotation: 0,
+          } as FreehandDrawingData,
+          dragging: false,
+          zIndex: 0,
+          selectable: true,
+          deletable: true,
+          selected: false,
+          draggable: true,
+          isConnectable: false,
+          positionAbsoluteX: minX,
+          positionAbsoluteY: minY,
+        };
+      } else if (
+        activeTool === "rectangle" ||
+        activeTool === "circle" ||
+        activeTool === "arrow"
+      ) {
+        const width = Math.abs(endPosition.x - drawStartPos.x);
+        const height = Math.abs(endPosition.y - drawStartPos.y);
+        const x = Math.min(drawStartPos.x, endPosition.x);
+        const y = Math.min(drawStartPos.y, endPosition.y);
+
+        if (width > 5 && height > 5) {
+          newNode = {
+            id: getId(),
+            type: "shape",
+            position: { x, y },
+            data: {
+              label: activeTool.charAt(0).toUpperCase() + activeTool.slice(1),
+              shapeType: activeTool,
+              color: "#000000",
+              strokeWidth: 2,
+              width,
+              height,
+              rotation: 0,
+            } as ShapeData,
+            dragging: false,
+            zIndex: 0,
+            selectable: true,
+            deletable: true,
+            selected: false,
+            draggable: true,
+            isConnectable: false,
+            positionAbsoluteX: x,
+            positionAbsoluteY: y,
+          };
+        }
+      } else if (activeTool === "text") {
+        newNode = {
+          id: getId(),
+          type: "textAnnotation",
+          position: drawStartPos,
+          data: {
+            label: "Text",
+            text: "Click to edit",
+            color: "#000000",
+            fontSize: 16,
+            rotation: 0,
+          } as TextAnnotationData,
+          dragging: false,
+          zIndex: 0,
+          selectable: true,
+          deletable: true,
+          selected: false,
+          draggable: true,
+          isConnectable: false,
+          positionAbsoluteX: drawStartPos.x,
+          positionAbsoluteY: drawStartPos.y,
+        };
+      }
+
+      if (newNode) {
+        setNodes((nds) => [...nds, newNode as CustomNode]);
+      }
+
+      // Reset drawing state
+      setIsDrawing(false);
+      setDrawingPath([]);
+      setDrawStartPos(null);
+    },
+    [
+      isDrawing,
+      drawStartPos,
+      activeTool,
+      drawingPath,
+      screenToFlowPosition,
+      setNodes,
+    ]
+  );
+
   // Memoize the active node context value
   const activeNodeContextValue = useMemo(
     () => ({ activeNodeId, setActiveNodeId }),
@@ -604,11 +791,14 @@ function Flow({
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
+          onPaneMouseDown={onPaneMouseDown}
+          onPaneMouseMove={onPaneMouseMove}
+          onPaneMouseUp={onPaneMouseUp}
           zoomOnScroll={false}
           panOnScroll={false}
           nodeTypes={nodeTypes}
-          nodesDraggable={isEditable}
-          elementsSelectable={isEditable}
+          nodesDraggable={isEditable && activeTool === "select"}
+          elementsSelectable={isEditable && activeTool === "select"}
           nodesConnectable={isEditable}
           className="touch-none select-none"
           selectionKeyCode={'Shift'}
@@ -629,6 +819,13 @@ function Flow({
            )}
            </Panel>
 
+          {/* Drawing Toolbar */}
+          <DrawingToolbar
+            activeTool={activeTool}
+            onToolChange={handleToolChange}
+            isEditable={isEditable}
+          />
+
           {isEditable && (
             <ControlButtons
               undo={onUndo}
diff --git a/components/FreehandDrawingNode.tsx b/components/FreehandDrawingNode.tsx
new file mode 100644
index 0000000..177c82d
--- /dev/null
+++ b/components/FreehandDrawingNode.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface FreehandDrawingData {
+  label: string;
+  path: string; // SVG path data
+  color?: string;
+  strokeWidth?: number;
+  notes?: string;
+  rotation: number;
+}
+
+export const FreehandDrawingNode = memo(function FreehandDrawingNode({
+  data,
+  id,
+}: NodeProps<{ data: FreehandDrawingData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleStrokeWidthChange = useCallback(
+    (strokeWidth: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, strokeWidth } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const strokeWidth = data.strokeWidth || 2;
+
+  return (
+    <>
+      <div
+        className="cursor-move"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{ transform: `rotate(${data.rotation}deg)` }}
+      >
+        <svg
+          width="200"
+          height="200"
+          viewBox="0 0 200 200"
+          style={{ overflow: "visible" }}
+        >
+          <path
+            d={data.path}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        {data.label && (
+          <div
+            className="text-xs mt-1 text-center"
+            style={{ color: color }}
+          >
+            {data.label}
+          </div>
+        )}
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="freehand"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleColorChange={handleColorChange}
+          handleStrokeWidthChange={handleStrokeWidthChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/ShapeNode.tsx b/components/ShapeNode.tsx
new file mode 100644
index 0000000..55bb6a9
--- /dev/null
+++ b/components/ShapeNode.tsx
@@ -0,0 +1,220 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface ShapeData {
+  label: string;
+  shapeType: "rectangle" | "circle" | "arrow";
+  color?: string;
+  strokeWidth?: number;
+  fillColor?: string;
+  filled?: boolean;
+  width?: number;
+  height?: number;
+  notes?: string;
+  rotation: number;
+}
+
+export const ShapeNode = memo(function ShapeNode({
+  data,
+  id,
+}: NodeProps<{ data: ShapeData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFillColorChange = useCallback(
+    (fillColor: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fillColor } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFilledChange = useCallback(
+    (filled: boolean) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, filled } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleStrokeWidthChange = useCallback(
+    (strokeWidth: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, strokeWidth } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const strokeWidth = data.strokeWidth || 2;
+  const fillColor = data.fillColor || "transparent";
+  const filled = data.filled || false;
+  const width = data.width || 100;
+  const height = data.height || 100;
+
+  const renderShape = () => {
+    switch (data.shapeType) {
+      case "rectangle":
+        return (
+          <rect
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill={filled ? fillColor : "transparent"}
+            rx="4"
+          />
+        );
+      case "circle":
+        return (
+          <circle
+            cx={width / 2}
+            cy={height / 2}
+            r={Math.min(width, height) / 2}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill={filled ? fillColor : "transparent"}
+          />
+        );
+      case "arrow":
+        return (
+          <g>
+            <line
+              x1="10"
+              y1={height / 2}
+              x2={width - 10}
+              y2={height / 2}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+            <polygon
+              points={`${width - 10},${height / 2 - 10} ${width},${height / 2} ${width - 10},${height / 2 + 10}`}
+              fill={color}
+            />
+          </g>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <div
+        className="cursor-move"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{ transform: `rotate(${data.rotation}deg)` }}
+      >
+        <svg
+          width={width}
+          height={height}
+          style={{ overflow: "visible" }}
+        >
+          {renderShape()}
+        </svg>
+        {data.label && (
+          <div
+            className="text-xs mt-1 text-center"
+            style={{ color: color, maxWidth: width }}
+          >
+            {data.label}
+          </div>
+        )}
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="shape"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleColorChange={handleColorChange}
+          handleFillColorChange={handleFillColorChange}
+          handleFilledChange={handleFilledChange}
+          handleStrokeWidthChange={handleStrokeWidthChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/TextAnnotationNode.tsx b/components/TextAnnotationNode.tsx
new file mode 100644
index 0000000..68fd630
--- /dev/null
+++ b/components/TextAnnotationNode.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface TextAnnotationData {
+  label: string;
+  text: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: "normal" | "bold";
+  backgroundColor?: string;
+  notes?: string;
+  rotation: number;
+}
+
+export const TextAnnotationNode = memo(function TextAnnotationNode({
+  data,
+  id,
+}: NodeProps<{ data: TextAnnotationData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleBackgroundColorChange = useCallback(
+    (backgroundColor: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, backgroundColor } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFontSizeChange = useCallback(
+    (fontSize: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fontSize } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFontWeightChange = useCallback(
+    (fontWeight: "normal" | "bold") => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fontWeight } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, text: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const fontSize = data.fontSize || 16;
+  const fontWeight = data.fontWeight || "normal";
+  const backgroundColor = data.backgroundColor || "transparent";
+
+  return (
+    <>
+      <div
+        className="cursor-move px-3 py-2 rounded min-w-[100px] max-w-[300px]"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          color: color,
+          fontSize: `${fontSize}px`,
+          fontWeight: fontWeight,
+          backgroundColor: backgroundColor,
+          border: backgroundColor === "transparent" ? "none" : undefined,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}
+      >
+        {data.text || "Click to edit text"}
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="text"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleTextChange={handleTextChange}
+          handleColorChange={handleColorChange}
+          handleBackgroundColorChange={handleBackgroundColorChange}
+          handleFontSizeChange={handleFontSizeChange}
+          handleFontWeightChange={handleFontWeightChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..c31c2b3
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/package.json b/package.json
index 89a15bc..eda57ff 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,13 @@
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.4",
     "@radix-ui/react-tabs": "^1.1.4",

From c9ae1abe50ae9323cdc2819fac50ad1bb0902f3c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:15:20 +0000
Subject: [PATCH 2/6] Fix drawing functionality and remove invalid React Flow
 event handlers

**Issues Fixed:**
- Removed invalid onPaneMouseDown, onPaneMouseMove, onPaneMouseUp props that were causing warnings
- Fixed viewport dragging vs drawing mode conflict

**Changes:**
- Added panOnDrag={activeTool === "select"} to disable viewport panning when in drawing mode
- Created transparent drawing overlay that captures mouse events when not in select mode
- Implemented drawing preview to show freehand paths in real-time
- Updated mouse event handlers to work with overlay instead of invalid pane events

**Behavior:**
- Select mode: Can pan viewport by dragging, can move/select nodes
- Drawing modes: Viewport locked, mouse drag creates drawings
- Smooth transition between modes via toolbar
---
 components/EventFlow.tsx | 108 +++++++++++++++++++++++++++++++++------
 1 file changed, 93 insertions(+), 15 deletions(-)

diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index 14a4194..38b6339 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -611,15 +611,21 @@ function Flow({
   }, []);
 
   /**
-   * Handle mouse down on pane for drawing
+   * Handle mouse down for drawing on overlay
    */
-  const onPaneMouseDown = useCallback(
+  const handleDrawingMouseDown = useCallback(
     (event: React.MouseEvent) => {
       if (!isEditable || activeTool === "select") return;
 
+      event.preventDefault();
+      event.stopPropagation();
+
+      const rect = reactFlowWrapper.current?.getBoundingClientRect();
+      if (!rect) return;
+
       const position = screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
       });
 
       setIsDrawing(true);
@@ -630,15 +636,20 @@ function Flow({
   );
 
   /**
-   * Handle mouse move while drawing
+   * Handle mouse move while drawing on overlay
    */
-  const onPaneMouseMove = useCallback(
+  const handleDrawingMouseMove = useCallback(
     (event: React.MouseEvent) => {
       if (!isDrawing || activeTool === "select") return;
 
+      event.preventDefault();
+
+      const rect = reactFlowWrapper.current?.getBoundingClientRect();
+      if (!rect) return;
+
       const position = screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
       });
 
       if (activeTool === "freehand") {
@@ -651,13 +662,18 @@ function Flow({
   /**
    * Handle mouse up to finish drawing
    */
-  const onPaneMouseUp = useCallback(
+  const handleDrawingMouseUp = useCallback(
     (event: React.MouseEvent) => {
       if (!isDrawing || !drawStartPos) return;
 
+      event.preventDefault();
+
+      const rect = reactFlowWrapper.current?.getBoundingClientRect();
+      if (!rect) return;
+
       const endPosition = screenToFlowPosition({
-        x: event.clientX,
-        y: event.clientY,
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
       });
 
       // Create the appropriate node based on the active tool
@@ -774,6 +790,49 @@ function Flow({
     ]
   );
 
+  /**
+   * Render preview of shape being drawn
+   */
+  const renderDrawingPreview = useCallback(() => {
+    if (!isDrawing || !drawStartPos || activeTool === "select") return null;
+
+    const viewport = rfInstance?.getViewport();
+    if (!viewport) return null;
+
+    if (activeTool === "freehand" && drawingPath.length > 1) {
+      const pathData = drawingPath
+        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+        .join(" ");
+
+      return (
+        <svg
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            zIndex: 1000,
+          }}
+        >
+          <g transform={`translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`}>
+            <path
+              d={pathData}
+              stroke="#000000"
+              strokeWidth={2 / viewport.zoom}
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      );
+    }
+
+    return null;
+  }, [isDrawing, drawStartPos, drawingPath, activeTool, rfInstance]);
+
   // Memoize the active node context value
   const activeNodeContextValue = useMemo(
     () => ({ activeNodeId, setActiveNodeId }),
@@ -782,7 +841,7 @@ function Flow({
 
   return (
     <ActiveNodeContext.Provider value={activeNodeContextValue}>
-      <div style={{ width: "100vw", height: "100vh" }} ref={reactFlowWrapper} className="select-none">
+      <div style={{ width: "100vw", height: "100vh", position: "relative" }} ref={reactFlowWrapper} className="select-none">
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -791,11 +850,9 @@ function Flow({
           onNodesChange={onNodesChange}
           onEdgesChange={onEdgesChange}
           onConnect={onConnect}
-          onPaneMouseDown={onPaneMouseDown}
-          onPaneMouseMove={onPaneMouseMove}
-          onPaneMouseUp={onPaneMouseUp}
           zoomOnScroll={false}
           panOnScroll={false}
+          panOnDrag={activeTool === "select"}
           nodeTypes={nodeTypes}
           nodesDraggable={isEditable && activeTool === "select"}
           elementsSelectable={isEditable && activeTool === "select"}
@@ -841,6 +898,27 @@ function Flow({
             locations={eventLocations}
           />
         </ReactFlow>
+
+        {/* Drawing overlay - only shown when not in select mode */}
+        {isEditable && activeTool !== "select" && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              cursor: activeTool === "freehand" ? "crosshair" : "crosshair",
+              zIndex: 5,
+            }}
+            onMouseDown={handleDrawingMouseDown}
+            onMouseMove={handleDrawingMouseMove}
+            onMouseUp={handleDrawingMouseUp}
+            onMouseLeave={handleDrawingMouseUp}
+          >
+            {renderDrawingPreview()}
+          </div>
+        )}
       </div>
     </ActiveNodeContext.Provider>
   );

From 913a3c976cb893e1a80094e16da58011d1bba04e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:27:58 +0000
Subject: [PATCH 3/6] Fix drawing UX issues: remove labels, fix cursor offset,
 fix toolbar z-index

**Issues Fixed:**
1. Removed labels from drawing nodes (freehand and shapes)
2. Fixed cursor offset issue - drawings now appear exactly where cursor is
3. Fixed z-index so drawing toolbar is clickable when in drawing mode

**Changes:**
- Removed label display from FreehandDrawingNode and ShapeNode (text annotations keep their text)
- Fixed coordinate calculation - using clientX/clientY directly with screenToFlowPosition instead of double-offsetting
- Moved DrawingToolbar outside ReactFlow and increased z-index to 1000
- Drawing overlay now properly positioned below toolbar (zIndex: 5 vs 1000)

**Result:**
- Clean drawings without labels
- Drawings appear exactly under cursor
- Can switch between drawing tools and select mode easily
---
 components/DrawingToolbar.tsx      |  5 ++++-
 components/EventFlow.tsx           | 35 +++++++++++-------------------
 components/FreehandDrawingNode.tsx |  8 -------
 components/ShapeNode.tsx           |  8 -------
 4 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/components/DrawingToolbar.tsx b/components/DrawingToolbar.tsx
index 6f863c5..453c963 100644
--- a/components/DrawingToolbar.tsx
+++ b/components/DrawingToolbar.tsx
@@ -36,7 +36,10 @@ export default function DrawingToolbar({
   ];
 
   return (
-    <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex gap-1">
+    <div
+      className="absolute top-4 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex gap-1"
+      style={{ zIndex: 1000 }}
+    >
       <TooltipProvider>
         {tools.map((tool) => (
           <Tooltip key={tool.id}>
diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index 38b6339..1a9ce31 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -620,12 +620,9 @@ function Flow({
       event.preventDefault();
       event.stopPropagation();
 
-      const rect = reactFlowWrapper.current?.getBoundingClientRect();
-      if (!rect) return;
-
       const position = screenToFlowPosition({
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
+        x: event.clientX,
+        y: event.clientY,
       });
 
       setIsDrawing(true);
@@ -644,12 +641,9 @@ function Flow({
 
       event.preventDefault();
 
-      const rect = reactFlowWrapper.current?.getBoundingClientRect();
-      if (!rect) return;
-
       const position = screenToFlowPosition({
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
+        x: event.clientX,
+        y: event.clientY,
       });
 
       if (activeTool === "freehand") {
@@ -668,12 +662,9 @@ function Flow({
 
       event.preventDefault();
 
-      const rect = reactFlowWrapper.current?.getBoundingClientRect();
-      if (!rect) return;
-
       const endPosition = screenToFlowPosition({
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
+        x: event.clientX,
+        y: event.clientY,
       });
 
       // Create the appropriate node based on the active tool
@@ -876,13 +867,6 @@ function Flow({
            )}
            </Panel>
 
-          {/* Drawing Toolbar */}
-          <DrawingToolbar
-            activeTool={activeTool}
-            onToolChange={handleToolChange}
-            isEditable={isEditable}
-          />
-
           {isEditable && (
             <ControlButtons
               undo={onUndo}
@@ -899,6 +883,13 @@ function Flow({
           />
         </ReactFlow>
 
+        {/* Drawing Toolbar - outside ReactFlow with high z-index */}
+        <DrawingToolbar
+          activeTool={activeTool}
+          onToolChange={handleToolChange}
+          isEditable={isEditable}
+        />
+
         {/* Drawing overlay - only shown when not in select mode */}
         {isEditable && activeTool !== "select" && (
           <div
diff --git a/components/FreehandDrawingNode.tsx b/components/FreehandDrawingNode.tsx
index 177c82d..0f98d94 100644
--- a/components/FreehandDrawingNode.tsx
+++ b/components/FreehandDrawingNode.tsx
@@ -109,14 +109,6 @@ export const FreehandDrawingNode = memo(function FreehandDrawingNode({
             strokeLinejoin="round"
           />
         </svg>
-        {data.label && (
-          <div
-            className="text-xs mt-1 text-center"
-            style={{ color: color }}
-          >
-            {data.label}
-          </div>
-        )}
       </div>
       {isEditable && (
         <DrawingSettings
diff --git a/components/ShapeNode.tsx b/components/ShapeNode.tsx
index 55bb6a9..7b104f4 100644
--- a/components/ShapeNode.tsx
+++ b/components/ShapeNode.tsx
@@ -183,14 +183,6 @@ export const ShapeNode = memo(function ShapeNode({
         >
           {renderShape()}
         </svg>
-        {data.label && (
-          <div
-            className="text-xs mt-1 text-center"
-            style={{ color: color, maxWidth: width }}
-          >
-            {data.label}
-          </div>
-        )}
       </div>
       {isEditable && (
         <DrawingSettings

From 9f0efb86c8ec79d361c9b8d6c1f47062e7c374c2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:32:54 +0000
Subject: [PATCH 4/6] Fix controlled input error by ensuring all node data has
 default values

**Issue:**
React error about uncontrolled to controlled input components when creating drawings.

**Root Cause:**
Drawing nodes were created with missing optional fields (notes, fontWeight, backgroundColor, etc.), causing Input components to be uncontrolled (undefined value) initially, then controlled when values were set.

**Fix:**
- Ensured all drawing node types initialize with complete data objects
- FreehandDrawing: Added empty string defaults for label and notes
- Shape: Added defaults for label, notes, fillColor, and filled flag
- TextAnnotation: Added defaults for label, notes, fontWeight, and backgroundColor
- Added fallback values in DrawingSettings inputs (label, text) for safety

**Result:**
All Input components are now always controlled with defined values, preventing React warnings.
---
 components/DrawingSettings.tsx |  4 ++--
 components/EventFlow.tsx       | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/DrawingSettings.tsx b/components/DrawingSettings.tsx
index eab9068..27575d1 100644
--- a/components/DrawingSettings.tsx
+++ b/components/DrawingSettings.tsx
@@ -69,7 +69,7 @@ export default function DrawingSettings({
             <Label htmlFor={`label-${id}`}>Label</Label>
             <Input
               id={`label-${id}`}
-              value={data.label}
+              value={data.label || ""}
               onChange={handleLabelChange}
               placeholder="Enter label"
             />
@@ -80,7 +80,7 @@ export default function DrawingSettings({
               <Label htmlFor={`text-${id}`}>Text</Label>
               <Textarea
                 id={`text-${id}`}
-                value={(data as TextAnnotationData).text}
+                value={(data as TextAnnotationData).text || ""}
                 onChange={handleTextChange}
                 placeholder="Enter text"
                 rows={3}
diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index 1a9ce31..37f45d4 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -687,10 +687,11 @@ function Flow({
           type: "freehandDrawing",
           position: { x: minX, y: minY },
           data: {
-            label: "Drawing",
+            label: "",
             path: pathData,
             color: "#000000",
             strokeWidth: 2,
+            notes: "",
             rotation: 0,
           } as FreehandDrawingData,
           dragging: false,
@@ -719,12 +720,15 @@ function Flow({
             type: "shape",
             position: { x, y },
             data: {
-              label: activeTool.charAt(0).toUpperCase() + activeTool.slice(1),
+              label: "",
               shapeType: activeTool,
               color: "#000000",
               strokeWidth: 2,
+              fillColor: "#FFFFFF",
+              filled: false,
               width,
               height,
+              notes: "",
               rotation: 0,
             } as ShapeData,
             dragging: false,
@@ -744,10 +748,13 @@ function Flow({
           type: "textAnnotation",
           position: drawStartPos,
           data: {
-            label: "Text",
+            label: "",
             text: "Click to edit",
             color: "#000000",
             fontSize: 16,
+            fontWeight: "normal",
+            backgroundColor: "transparent",
+            notes: "",
             rotation: 0,
           } as TextAnnotationData,
           dragging: false,

From 9cdcaad94f4e6c152f55977cfea269140f2d25be Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:37:14 +0000
Subject: [PATCH 5/6] Fix selection box sizing to match actual drawing
 dimensions

**Issue:**
Selection boxes for drawings were much larger than the actual drawn content, making them difficult to select and work with precisely.

**Changes:**

**FreehandDrawingNode:**
- Calculate actual bounding box from path data by extracting all coordinates
- Set SVG width/height based on calculated bounds plus stroke width padding
- Set viewBox to match the actual drawing area instead of fixed 200x200
- Result: Selection box now tightly fits the freehand drawing

**ShapeNode:**
- Added proper viewBox matching width/height for consistent rendering
- Shapes already had correct width/height from user drawing, now viewBox ensures proper scaling

**TextAnnotationNode:**
- No changes needed - already uses min/max width with natural text sizing

**Result:**
Selection boxes now closely match the actual size and shape of drawn content, making drawings easier to select, move, and edit.
---
 components/FreehandDrawingNode.tsx | 26 +++++++++++++++++++++++---
 components/ShapeNode.tsx           |  1 +
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/FreehandDrawingNode.tsx b/components/FreehandDrawingNode.tsx
index 0f98d94..ad8e929 100644
--- a/components/FreehandDrawingNode.tsx
+++ b/components/FreehandDrawingNode.tsx
@@ -87,6 +87,26 @@ export const FreehandDrawingNode = memo(function FreehandDrawingNode({
   const color = data.color || "#000000";
   const strokeWidth = data.strokeWidth || 2;
 
+  // Calculate bounding box from path data
+  const pathPoints = data.path.match(/[\d.]+/g)?.map(Number) || [];
+  const xCoords: number[] = [];
+  const yCoords: number[] = [];
+
+  for (let i = 0; i < pathPoints.length; i += 2) {
+    if (pathPoints[i] !== undefined) xCoords.push(pathPoints[i]);
+    if (pathPoints[i + 1] !== undefined) yCoords.push(pathPoints[i + 1]);
+  }
+
+  const minX = Math.min(...xCoords, 0);
+  const maxX = Math.max(...xCoords, 100);
+  const minY = Math.min(...yCoords, 0);
+  const maxY = Math.max(...yCoords, 100);
+
+  const width = maxX - minX + strokeWidth * 2;
+  const height = maxY - minY + strokeWidth * 2;
+  const viewBoxWidth = maxX - minX;
+  const viewBoxHeight = maxY - minY;
+
   return (
     <>
       <div
@@ -95,9 +115,9 @@ export const FreehandDrawingNode = memo(function FreehandDrawingNode({
         style={{ transform: `rotate(${data.rotation}deg)` }}
       >
         <svg
-          width="200"
-          height="200"
-          viewBox="0 0 200 200"
+          width={width}
+          height={height}
+          viewBox={`${minX} ${minY} ${viewBoxWidth} ${viewBoxHeight}`}
           style={{ overflow: "visible" }}
         >
           <path
diff --git a/components/ShapeNode.tsx b/components/ShapeNode.tsx
index 7b104f4..45922bd 100644
--- a/components/ShapeNode.tsx
+++ b/components/ShapeNode.tsx
@@ -179,6 +179,7 @@ export const ShapeNode = memo(function ShapeNode({
         <svg
           width={width}
           height={height}
+          viewBox={`0 0 ${width} ${height}`}
           style={{ overflow: "visible" }}
         >
           {renderShape()}

From 71a7c0c9ef52d2e4d8b5fb1a1ce637a74e57e764 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 14 Nov 2025 18:42:53 +0000
Subject: [PATCH 6/6] Add dotted border to selected drawing nodes

**Feature:**
Drawing nodes now display a blue dotted border when selected, providing clear visual feedback about which drawing is currently active.

**Changes:**
- FreehandDrawingNode: Added `selected` prop and conditional dashed border styling
- ShapeNode: Added `selected` prop and conditional dashed border styling
- TextAnnotationNode: Added `selected` prop and conditional dashed border styling (preserves existing border logic)

**Styling:**
- Border: 2px dashed #3b82f6 (blue) when selected, transparent when not
- Padding: 2px to prevent border from overlapping content
- Border radius: 4px for rounded corners

**Result:**
Users can now clearly see which drawing is selected, making it easier to work with multiple drawings on the canvas.
---
 components/FreehandDrawingNode.tsx | 8 +++++++-
 components/ShapeNode.tsx           | 8 +++++++-
 components/TextAnnotationNode.tsx  | 7 ++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/components/FreehandDrawingNode.tsx b/components/FreehandDrawingNode.tsx
index ad8e929..6413090 100644
--- a/components/FreehandDrawingNode.tsx
+++ b/components/FreehandDrawingNode.tsx
@@ -18,6 +18,7 @@ export interface FreehandDrawingData {
 export const FreehandDrawingNode = memo(function FreehandDrawingNode({
   data,
   id,
+  selected,
 }: NodeProps<{ data: FreehandDrawingData }>) {
   const { deleteElements, setNodes } = useReactFlow();
   const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
@@ -112,7 +113,12 @@ export const FreehandDrawingNode = memo(function FreehandDrawingNode({
       <div
         className="cursor-move"
         onClick={() => isEditable && setIsOpen(true)}
-        style={{ transform: `rotate(${data.rotation}deg)` }}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          border: selected ? "2px dashed #3b82f6" : "2px dashed transparent",
+          padding: "2px",
+          borderRadius: "4px",
+        }}
       >
         <svg
           width={width}
diff --git a/components/ShapeNode.tsx b/components/ShapeNode.tsx
index 45922bd..c1779aa 100644
--- a/components/ShapeNode.tsx
+++ b/components/ShapeNode.tsx
@@ -22,6 +22,7 @@ export interface ShapeData {
 export const ShapeNode = memo(function ShapeNode({
   data,
   id,
+  selected,
 }: NodeProps<{ data: ShapeData }>) {
   const { deleteElements, setNodes } = useReactFlow();
   const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
@@ -174,7 +175,12 @@ export const ShapeNode = memo(function ShapeNode({
       <div
         className="cursor-move"
         onClick={() => isEditable && setIsOpen(true)}
-        style={{ transform: `rotate(${data.rotation}deg)` }}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          border: selected ? "2px dashed #3b82f6" : "2px dashed transparent",
+          padding: "2px",
+          borderRadius: "4px",
+        }}
       >
         <svg
           width={width}
diff --git a/components/TextAnnotationNode.tsx b/components/TextAnnotationNode.tsx
index 68fd630..21b853d 100644
--- a/components/TextAnnotationNode.tsx
+++ b/components/TextAnnotationNode.tsx
@@ -20,6 +20,7 @@ export interface TextAnnotationData {
 export const TextAnnotationNode = memo(function TextAnnotationNode({
   data,
   id,
+  selected,
 }: NodeProps<{ data: TextAnnotationData }>) {
   const { deleteElements, setNodes } = useReactFlow();
   const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
@@ -142,7 +143,11 @@ export const TextAnnotationNode = memo(function TextAnnotationNode({
           fontSize: `${fontSize}px`,
           fontWeight: fontWeight,
           backgroundColor: backgroundColor,
-          border: backgroundColor === "transparent" ? "none" : undefined,
+          border: selected
+            ? "2px dashed #3b82f6"
+            : backgroundColor === "transparent"
+            ? "none"
+            : undefined,
           whiteSpace: "pre-wrap",
           wordBreak: "break-word",
         }}