Claude/add drawing feature 01 jwv5e gnfl ckg cv3fwiutdk #171
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
**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
…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
**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.
**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.
**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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
wow claude do cool stuff