FloorPlanEditor

The full-featured floor plan editor with tools and status bar.

Overview

FloorPlanEditor wraps FloorplanCanvas with a complete editing UI including annotation tools, alignment tools, keyboard shortcuts, and a context menu. It is the primary component used in the Floor Plan tab.

Features

Drawing Tools

• Select/Move — Default tool for selecting and moving elements
• Line — Click-to-click line drawing
• Polyline — Multi-point path drawing (double-click to finish)
• Arrow — Line with arrowhead
• Text — Click to place editable text boxes

Canvas Tools

• Color picker (preset colors + custom)
• Stroke width selector (1-4px)
• Stroke style toggle (solid/dashed)
• Alignment tools (left, center, right, top, middle, bottom, distribute)
• Group/ungroup (Ctrl+G / Ctrl+Shift+G)

SPEC Pill Placement

• Drag specs from SpecsPanel onto the canvas
• Color-coded pills by match status (pending=amber, approved=green, rejected=red)
• Movable, resizable spec pills
• Snap-to-spec for line endpoints

Keyboard Shortcuts

Shortcut	Action
V	Select tool
L	Line tool
P	Polyline tool
A	Arrow tool
T	Text tool
Delete	Delete selected
Ctrl+Z	Undo
Ctrl+Shift+Z	Redo
Ctrl+A	Select all
Space+drag	Pan canvas
+/- or scroll	Zoom

Status Bar

• Current zoom level
• Mouse coordinates
• Selected object count
• Current tool indicator

Source

app/components/floorplan/FloorPlanEditor.vue