{"version":3,"file":"roomDrawer.mjs","names":[],"sources":["../../../../package/common/roomDrawer/roomDrawer.tsx"],"sourcesContent":["import {\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n type PointerEvent as ReactPointerEvent,\n type ReactElement,\n} from 'react';\nimport cx from 'classnames';\nimport {\n faArrowPointer,\n faArrowRotateLeft,\n faArrowRotateRight,\n faBorderAll,\n faClone,\n faDoorOpen,\n faDownload,\n faDraftingCompass,\n faExpand,\n faMagnet,\n faMagnifyingGlassMinus,\n faMagnifyingGlassPlus,\n faAngleDown,\n faAngleUp,\n faLayerGroup,\n faMinus,\n faPlus,\n faRulerCombined,\n faSquare,\n faUpload,\n faTrash,\n faWindowMaximize,\n} from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport { useComponentDefaults, useLabels } from '../configProvider';\nimport { useCoarsePointer } from '../hooks/useCoarsePointer';\nimport Input from '../input';\nimport NumberInput from '../numberInput';\nimport PlanCanvas from '../planCanvas';\nimport { renderIcon } from '../utils/renderIcon';\nimport {\n DEFAULT_WALL_ATTRS,\n HIT_PX,\n HIT_PX_COARSE,\n OpeningKind,\n SnapKind,\n WallType,\n addOpening,\n addRect,\n addWall,\n clientToWorld,\n commitDerivation,\n derivePlan,\n detachWall,\n dissolveNode,\n emptyFloorPlan,\n floorBounds,\n getFloor,\n hitTest,\n mergeNodes,\n MIN_WALL_LENGTH,\n addFloor,\n duplicateFloor,\n floorBelow,\n floorIndex,\n moveNode,\n MIN_FLOOR_HEIGHT,\n moveFloor,\n planFromJson,\n planToJson,\n removeFloor,\n renameFloor,\n setFloorHeight,\n removeOpening,\n removeWall,\n resolveSnap,\n selectionsEqual,\n setFloor,\n splitWall,\n updateOpening,\n weldShortWalls,\n worldTolerances,\n type FloorPlan,\n type PlanFloor,\n type PlanParseResult,\n type PlanPoint,\n type PlanSelection,\n type PlanView,\n type SnapResult,\n} from '../floorPlan';\nimport { pointToSegment } from '../floorPlan/floorPlan.geometry';\nimport { usePlanHistory } from './usePlanHistory';\nimport type {\n RoomDrawerChangeMeta,\n RoomDrawerChangeReason,\n RoomDrawerLabels,\n RoomDrawerProps,\n RoomDrawerTool,\n} from './roomDrawer.types';\nimport styles from './roomDrawer.module.pcss';\nimport { ThemeColor } from '../themeProvider/color.types';\n\nconst ALL_TOOLS: RoomDrawerTool[] = ['select', 'wall', 'rect', 'door', 'window', 'archway', 'measure'];\n\nconst TOOL_KEYS: Record = {\n v: 'select',\n w: 'wall',\n r: 'rect',\n d: 'door',\n n: 'window',\n a: 'archway',\n m: 'measure',\n};\n\nconst OPENING_TOOL_KIND: Partial> = {\n door: OpeningKind.Door,\n window: OpeningKind.Window,\n archway: OpeningKind.Archway,\n};\n\nconst BUILT_IN_OPENING_DEFAULTS: Record = {\n [OpeningKind.Door]: { width: 900, sill: 0, head: 2100 },\n [OpeningKind.Window]: { width: 1200, sill: 900, head: 2100 },\n [OpeningKind.Archway]: { width: 1200, sill: 0, head: 2100 },\n [OpeningKind.Gap]: { width: 1000, sill: 0, head: 2500 },\n};\n\n/** Below this length a ruler drag is a slip of the hand, not a measurement. */\nconst EPS_MEASURE = 1;\n\n/** Past this many pixels a press becomes a drag rather than a click. */\nconst DRAG_THRESHOLD_PX = 4;\n\n/** Stable identity for an empty selection, so memos keyed on it do not re-run. */\nconst EMPTY_SELECTION: readonly PlanSelection[] = [];\n\ntype Gesture =\n | { kind: 'none' }\n | { kind: 'pan'; startClient: PlanPoint; startView: PlanView }\n | { kind: 'pinch'; startDist: number; startView: PlanView; startMid: PlanPoint }\n /**\n * `origin`, `referenceAngle` and `excludeWallIds` are captured ONCE at gesture start.\n * Recomputing them per frame makes them follow the node being dragged, so angle lock\n * ends up measuring from a basis that rotates with the cursor, and the walls attached\n * to the corner become snap targets for the corner itself.\n */\n | {\n kind: 'node';\n nodeId: string;\n moved: boolean;\n origin?: PlanPoint;\n referenceAngle?: number;\n excludeWallIds: ReadonlySet;\n }\n | {\n kind: 'wall';\n wallId: string;\n startWorld: PlanPoint;\n origA: PlanPoint;\n origB: PlanPoint;\n moved: boolean;\n /** Ctrl was held: pull the wall off its neighbours on the first real movement. */\n detach?: boolean;\n /** Which way it was pulled, once it has been. It cannot be pushed back across that line. */\n detachedSign?: number;\n /** A Ctrl press that has not become a drag yet, and so may still be a selection toggle. */\n toggle?: boolean;\n }\n | { kind: 'opening'; openingId: string; moved: boolean }\n | { kind: 'room'; nodeIds: string[]; startWorld: PlanPoint; orig: Record; moved: boolean }\n /**\n * The midpoint handle of a selected wall has been pressed. The split is deliberately\n * deferred until the pointer actually moves, so a stray click on the handle leaves the\n * wall exactly as it was instead of silently adding a corner.\n */\n | { kind: 'wallSplit'; wallId: string; at: PlanPoint }\n | { kind: 'rect'; start: PlanPoint; current: PlanPoint }\n | { kind: 'measure'; start: PlanPoint; current: PlanPoint }\n /** Dragging one end of a measurement already taken. */\n | { kind: 'measureEnd'; id: number; end: 'a' | 'b' }\n /** Sliding a whole measurement, both ends together. */\n | { kind: 'measureMove'; id: number; startWorld: PlanPoint; origA: PlanPoint; origB: PlanPoint }\n /** Rubber-band selection over empty canvas. `base` is what was selected before it began. */\n | {\n kind: 'marquee';\n start: PlanPoint;\n current: PlanPoint;\n additive: boolean;\n base: readonly PlanSelection[];\n };\n\nfunction defaultFormatLength(mm: number): string {\n return mm >= 1000 ? `${(mm / 1000).toFixed(2)} m` : `${Math.round(mm)} mm`;\n}\n\nfunction defaultFormatArea(mm2: number): string {\n const m2 = mm2 / 1_000_000;\n return `${m2.toFixed(m2 < 10 ? 1 : 0)} m²`;\n}\n\nfunction defaultFormatAngle(degrees: number): string {\n return `${Math.round(degrees * 10) / 10}°`;\n}\n\nfunction defaultFormatZoom(zoom: number): string {\n return `${Math.round(zoom * 1000) / 10}%`;\n}\n\n/** Radians to a signed degree reading in (-180, 180], which is how a plan angle reads. */\nfunction toDegrees(radians: number): number {\n const deg = ((((radians * 180) / Math.PI) % 360) + 360) % 360;\n return deg > 180 ? deg - 360 : deg;\n}\n\nconst DEFAULT_LABELS: Required = {\n tools: 'Drawing tools',\n storeyHeightHint: 'Storey height. The floors above move to sit on top of it.',\n sillHeightHint: 'How far above the floor the opening starts. Stored for a 3D view; it does not change the plan.',\n select: 'Select and edit',\n wall: 'Draw walls',\n rect: 'Draw a room',\n measure: 'Measure',\n door: 'Add a door',\n window: 'Add a window',\n archway: 'Add an archway',\n undo: 'Undo',\n redo: 'Redo',\n download: 'Download plan',\n upload: 'Open a plan file',\n underlay: 'Show the floor below',\n addFloor: 'Add a floor above',\n floorName: 'Floor name',\n duplicateFloor: 'Copy this floor to a new one above',\n deleteFloor: 'Delete this floor',\n floorHeight: 'Height (mm)',\n moveFloorUp: 'Move this floor up',\n moveFloorDown: 'Move this floor down',\n newRoomName: (n) => `Room ${n}`,\n newFloorName: (n) => `Floor ${n}`,\n copiedFloorName: (name) => `${name} copy`,\n initialFloorName: 'Ground floor',\n selectedFloor: 'Floor',\n importFailed: 'That file could not be read as a floor plan',\n snap: 'Snap to grid and geometry',\n angleLock: (angle) => `Lock to ${angle}° angles`,\n grid: 'Show grid',\n zoomIn: 'Zoom in',\n zoomOut: 'Zoom out',\n fit: 'Fit to content',\n roomName: 'Room name',\n addCorner: 'Add corner',\n thickness: 'Thickness (mm)',\n width: 'Width (mm)',\n sill: 'Sill (mm)',\n deleteSelection: 'Delete selection',\n selectedCount: (count) => `${count} selected`,\n selectedRoom: 'Room',\n selectedWall: 'Wall',\n selectedCorner: 'Corner',\n selectedDoor: 'Door',\n selectedWindow: 'Window',\n selectedArchway: 'Archway',\n selectedGap: 'Gap',\n hintSelect:\n 'Drag a corner to reshape · Drag a wall to push it, and the room next door moves with it · Ctrl-click or drag a box to select several · Delete to remove',\n hintSelectSingle:\n 'Drag a corner to reshape · Drag a wall to push it, and the room next door moves with it · Drag the dot on a selected wall to add a corner · Delete to remove',\n hintWall:\n 'Click to place corners · Shift for a fixed angle, L to latch it · Click the first corner or press Enter to close',\n hintRect: 'Drag to draw a room',\n hintMeasure: 'Drag to measure · Drag an end or the line to adjust it · Delete removes one, Escape clears them',\n hintOpening: 'Click a wall to cut an opening into it',\n relativeAngle: (angle) => `${angle} rel`,\n};\n\nfunction RoomDrawer(props: RoomDrawerProps) {\n const {\n ref,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n floorId,\n defaultFloorId,\n onFloorChange,\n showFloorBar = true,\n showUnderlay = true,\n\n tool: toolProp,\n defaultTool = 'select',\n onToolChange,\n tools = ALL_TOOLS,\n\n selection: selectionProp,\n defaultSelection,\n onSelectionChange,\n multiSelect = true,\n onHoverChange,\n\n view: viewProp,\n defaultView,\n onViewChange,\n minZoom = 0.005,\n maxZoom = 2,\n fitOnMount = true,\n\n gridSize = 100,\n showGrid = true,\n snap = true,\n angleLock = false,\n constrainAngle = 45,\n showSnapGuides = true,\n\n wallThickness = DEFAULT_WALL_ATTRS.thickness,\n wallHeight,\n openingDefaults,\n\n showMeasurements = true,\n formatLength = defaultFormatLength,\n formatArea = defaultFormatArea,\n formatAngle = defaultFormatAngle,\n formatZoom = defaultFormatZoom,\n\n showToolbar = true,\n showInspector = true,\n showHint = true,\n showHistoryControls = true,\n showFileControls = true,\n fileName,\n onImport,\n\n historyMode = 'internal',\n historyLimit = 50,\n onHistoryChange,\n\n readOnly = false,\n disabled = false,\n\n canvasHeight = '420px',\n getRoomColor,\n renderRoomLabel,\n\n labels,\n icons,\n 'aria-label': ariaLabel,\n\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RoomDrawer', props);\n const text = useLabels('RoomDrawer', labels, DEFAULT_LABELS);\n // The hooks below list these rather than `text`, which is a new object every render.\n const { newRoomName, newFloorName, copiedFloorName, initialFloorName, relativeAngle } = text;\n\n const coarse = useCoarsePointer();\n const hitPx = coarse ? HIT_PX_COARSE : HIT_PX;\n\n const rootRef = useRef(null);\n const canvasWrapRef = useRef(null);\n const svgRef = useRef(null);\n const lastEmittedRef = useRef(null);\n const gestureRef = useRef({ kind: 'none' });\n const pointersRef = useRef>(new Map());\n const pressRef = useRef<{ client: PlanPoint; moved: boolean } | null>(null);\n const spaceHeldRef = useRef(false);\n const altHeldRef = useRef(false);\n const shiftHeldRef = useRef(false);\n\n // ─── Plan state ───────────────────────────────────────────────────────────────\n\n const initialPlan = useMemo(\n () => defaultValue ?? value ?? emptyFloorPlan({ floorLabel: initialFloorName }),\n // Only ever read once, to seed the uncontrolled state.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n const history = usePlanHistory(initialPlan, historyLimit);\n const isControlled = value !== undefined;\n const plan = isControlled ? value : history.present;\n\n // Keep the internal history in step with an externally driven value, so undo still\n // works for a controlled consumer that has not implemented its own.\n useEffect(() => {\n if (!isControlled || !value) return;\n if (value === lastEmittedRef.current) {\n history.replace(value);\n return;\n }\n history.commit(value, 'external');\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value, isControlled]);\n\n const [floorIdState, setFloorIdState] = useState(defaultFloorId);\n // The floor a stale id points at is gone, so fall back to the lowest rather than\n // rendering nothing: a plan always has at least one floor.\n const activeFloorId = floorId ?? floorIdState ?? plan.floors[0]?.id;\n const floor: PlanFloor = useMemo(\n () => getFloor(plan, activeFloorId) ?? getFloor(plan) ?? emptyFloorPlan().floors[0],\n [plan, activeFloorId],\n );\n const [underlayOn, setUnderlayOn] = useState(showUnderlay);\n useEffect(() => setUnderlayOn(showUnderlay), [showUnderlay]);\n const underlayFloor = useMemo(() => (underlayOn ? floorBelow(plan, floor.id) : null), [underlayOn, plan, floor.id]);\n\n const selectFloor = useCallback(\n (nextId: string) => {\n if (nextId === floor.id) return;\n if (floorId === undefined) setFloorIdState(nextId);\n onFloorChange?.(nextId);\n },\n [floor.id, floorId, onFloorChange],\n );\n\n // Memoised on the floor identity, so a gesture that changed nothing re-derives nothing.\n const derivation = useMemo(() => derivePlan(floor), [floor]);\n const rooms = derivation.rooms;\n\n // ─── Tool / selection / view ──────────────────────────────────────────────────\n\n const [toolState, setToolState] = useState(defaultTool);\n const tool = toolProp ?? toolState;\n const setTool = useCallback(\n (next: RoomDrawerTool) => {\n if (toolProp === undefined) setToolState(next);\n onToolChange?.(next);\n },\n [toolProp, onToolChange],\n );\n\n const [selectionState, setSelectionState] = useState(defaultSelection ?? EMPTY_SELECTION);\n const selection = selectionProp !== undefined ? selectionProp : selectionState;\n /**\n * Mirrors `selection` synchronously, so `handle.select(x)` immediately followed by\n * `handle.deleteSelection()` acts on `x` rather than on whatever was selected before\n * React re-rendered.\n */\n const selectionRef = useRef(selection);\n selectionRef.current = selection;\n\n const setSelection = useCallback(\n (next: readonly PlanSelection[] | PlanSelection | null) => {\n const list = next === null ? EMPTY_SELECTION : Array.isArray(next) ? next : [next as PlanSelection];\n selectionRef.current = list;\n if (selectionProp === undefined) setSelectionState(list);\n onSelectionChange?.([...list]);\n },\n [selectionProp, onSelectionChange],\n );\n\n /** Adds an entry if absent, removes it if present. */\n const toggleSelection = useCallback(\n (entry: PlanSelection) => {\n const current = selectionRef.current;\n const without = current.filter((e) => !(e.type === entry.type && e.id === entry.id));\n setSelection(without.length === current.length ? [...current, entry] : without);\n },\n [setSelection],\n );\n\n /**\n * Exactly one thing selected. The per-entity chrome (the inspector's fields, the\n * midpoint handle) keys off this rather than off `selection[0]`, so it disappears\n * cleanly once a second thing joins the selection instead of silently acting on\n * whichever entry happened to come first.\n */\n const single = selection.length === 1 ? selection[0] : null;\n\n /**\n * Every node the selection implies, which is what a translation actually moves. A room\n * is its face's corners, a wall is its two ends, a corner is itself. Openings have no\n * corners of their own and so translate with whatever wall they are cut into.\n */\n const nodeIdsForSelection = useCallback(\n (entries: readonly PlanSelection[]): Set => {\n const ids = new Set();\n for (const entry of entries) {\n if (entry.type === 'node') {\n ids.add(entry.id);\n } else if (entry.type === 'wall') {\n const wall = floor.walls[entry.id];\n if (wall) {\n ids.add(wall.a);\n ids.add(wall.b);\n }\n } else if (entry.type === 'room') {\n const room = rooms.find((r) => r.roomId === entry.id);\n for (const id of room?.nodeIds ?? []) ids.add(id);\n }\n }\n return ids;\n },\n [floor.walls, rooms],\n );\n\n const selectedNodeIds = useMemo(() => nodeIdsForSelection(selection), [nodeIdsForSelection, selection]);\n\n const [hovered, setHovered] = useState(null);\n const [viewState, setViewState] = useState(defaultView ?? { x: 0, y: 0, zoom: 0.05 });\n const view = viewProp ?? viewState;\n const setView = useCallback(\n (next: PlanView) => {\n if (viewProp === undefined) setViewState(next);\n onViewChange?.(next);\n },\n [viewProp, onViewChange],\n );\n\n // `measured` holds the fit back until the canvas has been measured: the fit runs in the same\n // effect flush as the first measurement, and would otherwise fit the plan to this guess.\n const [size, setSize] = useState({ width: 800, height: 420, measured: false });\n const [wallChain, setWallChain] = useState([]);\n const [cursor, setCursor] = useState(null);\n\n /**\n * Latched snapping and angle lock. Seeded from the props, then owned by the toolbar\n * toggles and their hotkeys; changing the prop resets the latch.\n */\n const [snapEnabled, setSnapEnabled] = useState(snap);\n const [angleLockEnabled, setAngleLockEnabled] = useState(angleLock);\n useEffect(() => setSnapEnabled(snap), [snap]);\n useEffect(() => setAngleLockEnabled(angleLock), [angleLock]);\n\n const [gridVisible, setGridVisible] = useState(showGrid);\n useEffect(() => setGridVisible(showGrid), [showGrid]);\n\n /** The most recent snap result, so the overlay can explain what it snapped to. */\n const lastSnapRef = useRef(null);\n const [snapHint, setSnapHint] = useState(null);\n\n /**\n * Ruler measurements. Deliberately component state rather than plan data: a line in\n * the wall graph would close faces, and faces become rooms, so a \"guide\" stored as\n * geometry would fight the whole derived-room model. Nothing here reaches `onChange`,\n * a downloaded file, or the undo stack.\n */\n const [measurements, setMeasurements] = useState>([]);\n const measureSeqRef = useRef(0);\n const [hoveredMeasure, setHoveredMeasure] = useState(null);\n\n const fileInputRef = useRef(null);\n\n /**\n * What of the ruler is under a point, nearest first: an end before the line, so the\n * ends stay grabbable where they sit on top of it. Only live while the measure tool is\n * up, so measurements are inert scenery under every other tool.\n */\n const measureHit = useCallback(\n (world: PlanPoint): { id: number; end?: 'a' | 'b' } | null => {\n const tol = worldTolerances(hitPx, view.zoom);\n for (let i = measurements.length - 1; i >= 0; i--) {\n const m = measurements[i];\n if (Math.hypot(world.x - m.a.x, world.y - m.a.y) <= tol.node) return { id: m.id, end: 'a' };\n if (Math.hypot(world.x - m.b.x, world.y - m.b.y) <= tol.node) return { id: m.id, end: 'b' };\n }\n for (let i = measurements.length - 1; i >= 0; i--) {\n const m = measurements[i];\n if (pointToSegment(world, m.a, m.b).dist <= tol.wall) return { id: m.id };\n }\n return null;\n },\n [measurements, hitPx, view.zoom],\n );\n\n /**\n * What to say about the file that was just opened, or `null` when there is nothing to\n * say. An empty array means it failed outright; a filled one means it loaded but had to\n * be repaired. Shown in the hint line, and cleared as soon as the user carries on.\n */\n const [importReport, setImportReport] = useState(null);\n\n const editable = !readOnly && !disabled;\n\n /** Direction of the last committed chain segment, so the next one can go square to it. */\n const chainReferenceAngle = useMemo(() => {\n if (wallChain.length < 2) return undefined;\n const a = wallChain[wallChain.length - 2];\n const b = wallChain[wallChain.length - 1];\n return Math.atan2(b.y - a.y, b.x - a.x);\n }, [wallChain]);\n\n // ─── Sizing ───────────────────────────────────────────────────────────────────\n\n useEffect(() => {\n const element = canvasWrapRef.current;\n if (!element) return undefined;\n const observer = new ResizeObserver(() => {\n const rect = element.getBoundingClientRect();\n if (rect.width > 0 && rect.height > 0) {\n setSize({ width: Math.round(rect.width), height: Math.round(rect.height), measured: true });\n }\n });\n observer.observe(element);\n const rect = element.getBoundingClientRect();\n if (rect.width > 0 && rect.height > 0) {\n setSize({ width: Math.round(rect.width), height: Math.round(rect.height), measured: true });\n }\n return () => observer.disconnect();\n }, []);\n\n // ─── Coordinates ──────────────────────────────────────────────────────────────\n\n const toWorld = useCallback(\n (clientX: number, clientY: number): PlanPoint => {\n const rect = canvasWrapRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };\n return clientToWorld(clientX, clientY, rect, view);\n },\n [view],\n );\n\n const toScreen = useCallback(\n (p: PlanPoint) => ({ x: (p.x - view.x) * view.zoom, y: (p.y - view.y) * view.zoom }),\n [view],\n );\n\n const snapAt = useCallback(\n (\n world: PlanPoint,\n origin?: PlanPoint,\n excludeNodeIds?: ReadonlySet,\n referenceAngle?: number,\n excludeWallIds?: ReadonlySet,\n ) => {\n // Alt INVERTS the current setting rather than only switching snapping off, so it\n // doubles as a momentary \"snap just this once\" when snapping is latched off.\n const useSnap = snapEnabled !== altHeldRef.current;\n // Likewise Shift: momentary lock when the latch is off, momentary release when on.\n const lockAngle = angleLockEnabled !== shiftHeldRef.current;\n const result = resolveSnap(world, {\n floor,\n pxToWorld: view.zoom > 0 ? 1 / view.zoom : 1,\n origin,\n referenceAngle,\n excludeNodeIds,\n excludeWallIds,\n options: {\n enabled: useSnap\n ? [\n SnapKind.Node,\n SnapKind.Intersection,\n SnapKind.Wall,\n SnapKind.Angle,\n SnapKind.Extension,\n SnapKind.Alignment,\n SnapKind.Grid,\n ]\n : [],\n gridSize,\n angleStepDeg: lockAngle ? constrainAngle : 0,\n toleranceScreenPx: coarse ? 16 : 10,\n },\n });\n lastSnapRef.current = result;\n return result;\n },\n [floor, view.zoom, snapEnabled, angleLockEnabled, gridSize, constrainAngle, coarse],\n );\n\n /**\n * The snapping context for dragging a corner, measured once before anything moves.\n *\n * `origin` is the far end of one incident wall, so angle lock has something fixed to\n * measure from. `referenceAngle` is the direction of a wall meeting the graph at that\n * ORIGIN, which makes \"square to the run this corner hangs off\" available. It is taken\n * from there rather than from a second incident wall because neither of the origin\n * wall's endpoints moves during the drag, so the basis stays put; a wall touching the\n * dragged corner would rotate as the corner moves and the lock would chase itself.\n *\n * Every incident wall is excluded from snapping: they move with the corner, so leaving\n * them in means the corner snaps to itself.\n */\n const nodeDragContext = useCallback(\n (nodeId: string): { origin?: PlanPoint; referenceAngle?: number; excludeWallIds: ReadonlySet } => {\n const incident = Object.values(floor.walls).filter((w) => w.a === nodeId || w.b === nodeId);\n // Every wall meeting the corner moves with it, so none of them may be snapped to:\n // leaving them in means the corner snaps to itself.\n const excludeWallIds = new Set(incident.map((w) => w.id));\n\n const node = floor.nodes[nodeId];\n if (!node) return { excludeWallIds };\n\n // Angle lock constrains the DIRECTION OF TRAVEL, measured from where the corner\n // started, which is what Shift-dragging means in every editor and makes all eight\n // directions reachable. Measuring from a neighbouring corner instead (as this once\n // did) only ever puts one ray near the corner you are holding: the one running\n // along the existing wall. Everything else lands metres away, so in practice the\n // lock appeared to work in one direction only.\n const origin = { x: node.x, y: node.y };\n\n // Plus the direction of a wall meeting here, so travel can also be taken parallel\n // or square to it rather than only to the page.\n let referenceAngle: number | undefined;\n const first = incident[0];\n if (first) {\n const farId = first.a === nodeId ? first.b : first.a;\n const far = floor.nodes[farId];\n if (far) referenceAngle = Math.atan2(far.y - node.y, far.x - node.x);\n }\n\n return { origin, referenceAngle, excludeWallIds };\n },\n [floor],\n );\n\n const fitToContent = useCallback(\n (options: { padding?: number } = {}) => {\n const padding = options.padding ?? 24;\n const bounds = floorBounds(floor);\n if (!bounds || bounds.width <= 0 || bounds.height <= 0) {\n setView({ x: -1000, y: -1000, zoom: 0.05 });\n return;\n }\n const zoom = Math.min((size.width - padding * 2) / bounds.width, (size.height - padding * 2) / bounds.height);\n const clamped = Math.max(minZoom, Math.min(maxZoom, zoom));\n setView({\n x: bounds.minX - (size.width / clamped - bounds.width) / 2,\n y: bounds.minY - (size.height / clamped - bounds.height) / 2,\n zoom: clamped,\n });\n },\n [floor, size.width, size.height, minZoom, maxZoom, setView],\n );\n\n // Fit once, as soon as there is something to fit and a measured canvas.\n const didFitRef = useRef(false);\n useEffect(() => {\n if (!fitOnMount || didFitRef.current) return;\n if (Object.keys(floor.nodes).length === 0) return;\n if (!size.measured) return;\n didFitRef.current = true;\n fitToContent();\n }, [fitOnMount, floor, size.measured, fitToContent]);\n\n // ─── Emitting changes ─────────────────────────────────────────────────────────\n\n const emit = useCallback(\n (\n nextFloor: PlanFloor,\n reason: RoomDrawerChangeReason,\n committed: boolean,\n targetIds: string[] = [],\n /**\n * `false` when the edit is the tail of a gesture that already pushed its own\n * snapshot, so the two do not become two undo steps for one action.\n */\n options: { push?: boolean } = {},\n ) => {\n if (nextFloor === floor) return plan;\n const nextPlan = setFloor(plan, nextFloor);\n lastEmittedRef.current = nextPlan;\n\n // History is bookkeeping, not rendering state, so it runs in BOTH modes. Skipping\n // it while controlled left discrete edits (delete, rename, nudge) with no entry at\n // all, and Undo then jumped back past them to whatever the last drag had stashed.\n if (committed) {\n if (options.push === false) history.replace(nextPlan);\n else history.commit(nextPlan, reason, targetIds);\n } else {\n history.updateGesture(nextPlan);\n }\n\n const meta: RoomDrawerChangeMeta = { reason, committed, targetIds };\n onChange?.(nextPlan, meta);\n if (committed) onChangeEnd?.(nextPlan, meta);\n return nextPlan;\n },\n [floor, plan, history, onChange, onChangeEnd],\n );\n\n /** A discrete edit: names new rooms and pushes exactly one history entry. */\n const commitEdit = useCallback(\n (\n nextFloor: PlanFloor,\n reason: RoomDrawerChangeReason,\n targetIds: string[] = [],\n options: { push?: boolean } = {},\n ) => {\n // Welding here rather than per-gesture: a drag is not the only way to squash a\n // wall to nothing, and a plan with two corners on the same point derives as two\n // rooms and refuses to round-trip through JSON without being \"repaired\".\n const named = commitDerivation(weldShortWalls(nextFloor).floor, { nameFor: newRoomName }).floor;\n return emit(named, reason, true, targetIds, options);\n },\n [emit, newRoomName],\n );\n\n useEffect(() => {\n onHistoryChange?.({ canUndo: history.canUndo, canRedo: history.canRedo });\n }, [history.canUndo, history.canRedo, onHistoryChange]);\n\n // ─── Selection helpers ────────────────────────────────────────────────────────\n\n const selectedRoom = useMemo(\n () => (single?.type === 'room' ? (rooms.find((r) => r.roomId === single.id) ?? null) : null),\n [single, rooms],\n );\n const selectedWall = single?.type === 'wall' ? floor.walls[single.id] : undefined;\n const selectedOpening = single?.type === 'opening' ? floor.openings[single.id] : undefined;\n\n /** Midpoint of the selected wall, where its \"add a corner\" handle sits. */\n const selectedWallMidpoint = useMemo(() => {\n if (!selectedWall) return null;\n const a = floor.nodes[selectedWall.a];\n const b = floor.nodes[selectedWall.b];\n if (!a || !b) return null;\n return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };\n }, [selectedWall, floor.nodes]);\n\n /** Splits the selected wall at its midpoint and selects the corner that appears. */\n const addCornerToSelectedWall = useCallback(() => {\n if (!editable || !selectedWall) return;\n const edit = splitWall(floor, selectedWall.id, 0.5);\n if (!edit.result.wallIds) return;\n commitEdit(edit.floor, 'edit-wall', [edit.result.nodeId]);\n setSelection({ type: 'node', id: edit.result.nodeId });\n }, [editable, selectedWall, floor, commitEdit, setSelection]);\n\n /** Removes one entry. Split out so deleting a whole selection can reuse it. */\n const deleteOne = useCallback(\n (\n entry: PlanSelection,\n from: PlanFloor,\n /** Room ids going in the same operation, so they do not count as needing a wall. */\n alsoDeleting: ReadonlySet = new Set(),\n ): { floor: PlanFloor; reselect?: PlanSelection } => {\n if (entry.type === 'wall') return { floor: removeWall(from, entry.id).floor };\n if (entry.type === 'opening') return { floor: removeOpening(from, entry.id).floor };\n\n if (entry.type === 'node') {\n // Deleting a corner between exactly two walls means \"straighten this out\": the\n // two walls rejoin into one. Removing both of them instead would leave a hole\n // where the user only wanted the bend gone. `force` is needed because the corner\n // is normally bent by the time anyone wants rid of it, which the unforced\n // dissolve refuses.\n const rejoined = dissolveNode(from, entry.id, { force: true });\n if (rejoined.result) {\n return { floor: rejoined.floor, reselect: { type: 'wall', id: rejoined.result.wallId } };\n }\n // A loose end or a junction of three or more: there is nothing to rejoin, so the\n // walls meeting there go with it.\n let next = from;\n for (const wall of Object.values(from.walls)) {\n if (wall.a === entry.id || wall.b === entry.id) {\n next = removeWall(next, wall.id, { dissolveCollinear: false }).floor;\n }\n }\n return { floor: next };\n }\n\n // A room: drop its metadata and the walls that ONLY it uses. A wall a neighbouring\n // room still needs survives, which is what \"walls are shared\" has to mean.\n const room = rooms.find((r) => r.roomId === entry.id);\n if (!room) return { floor: from };\n const usedElsewhere = new Set();\n for (const other of rooms) {\n if (other.roomId === entry.id) continue;\n // A neighbour being deleted in the same breath does not need the wall either,\n // otherwise deleting two adjacent rooms together would strand the wall they share.\n if (other.roomId && alsoDeleting.has(other.roomId)) continue;\n for (const id of other.wallIds) usedElsewhere.add(id);\n }\n let next = from;\n for (const wallId of new Set(room.wallIds)) {\n if (usedElsewhere.has(wallId)) continue;\n next = removeWall(next, wallId, { dissolveCollinear: false }).floor;\n }\n const nextRooms = { ...next.rooms };\n delete nextRooms[entry.id];\n return { floor: { ...next, rooms: nextRooms } };\n },\n [rooms],\n );\n\n const deleteSelection = useCallback(() => {\n const entries = selectionRef.current;\n if (!editable || entries.length === 0) return;\n\n // Rooms first, then walls, then corners. A corner deleted early can dissolve a wall\n // that a later entry still refers to, and rooms need their walls intact to work out\n // which of them a neighbour is still using.\n const order: Record = { room: 0, opening: 1, wall: 2, node: 3 };\n const ordered = [...entries].sort((a, b) => order[a.type] - order[b.type]);\n\n const deletingRooms = new Set(ordered.filter((e) => e.type === 'room').map((e) => e.id));\n let next = floor;\n let reselect: PlanSelection | undefined;\n for (const entry of ordered) {\n const result = deleteOne(entry, next, deletingRooms);\n next = result.floor;\n // Only meaningful when one thing was deleted; a bulk delete just clears.\n if (ordered.length === 1) reselect = result.reselect;\n }\n\n if (next === floor) return;\n commitEdit(\n next,\n 'delete',\n ordered.map((e) => e.id),\n );\n setSelection(reselect ?? null);\n }, [editable, floor, deleteOne, commitEdit, setSelection]);\n\n // ─── Pointer handling ─────────────────────────────────────────────────────────\n\n /**\n * The snap hint belongs to whatever is being drawn, and only `finishGesture` used to\n * clear it — so ending a chain from the keyboard left its guide and marker painted on\n * the canvas with nothing to explain them. Identity is preserved when there is nothing\n * to clear, so the tool-change effect below costs no render.\n */\n const endWallChain = useCallback(() => {\n setWallChain((prev) => (prev.length === 0 ? prev : []));\n setSnapHint(null);\n }, []);\n\n // Switching tool abandons whatever the last one had half-drawn, hint included.\n useEffect(() => {\n endWallChain();\n }, [tool, endWallChain]);\n\n const handlePointerDown = useCallback(\n (event: ReactPointerEvent) => {\n if (disabled) return;\n rootRef.current?.focus();\n // Whatever the last opened file had to say, the user has read it or does not care.\n setImportReport(null);\n pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });\n (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);\n\n // Two pointers abort whatever tool gesture was running and become a pinch.\n if (pointersRef.current.size === 2) {\n const [p1, p2] = [...pointersRef.current.values()];\n if (gestureRef.current.kind !== 'none' && gestureRef.current.kind !== 'pan') {\n history.cancelGesture();\n }\n gestureRef.current = {\n kind: 'pinch',\n startDist: Math.hypot(p2.x - p1.x, p2.y - p1.y),\n startView: view,\n startMid: { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 },\n };\n return;\n }\n if (pointersRef.current.size > 2) return;\n\n pressRef.current = { client: { x: event.clientX, y: event.clientY }, moved: false };\n\n // Pan: middle button, or space held.\n if (event.button === 1 || spaceHeldRef.current) {\n gestureRef.current = {\n kind: 'pan',\n startClient: { x: event.clientX, y: event.clientY },\n startView: view,\n };\n return;\n }\n if (event.button !== 0) return;\n\n const world = toWorld(event.clientX, event.clientY);\n\n if (!editable) {\n const hit = hitTest(floor, rooms, world, worldTolerances(hitPx, view.zoom));\n setSelection(hit);\n return;\n }\n\n if (tool === 'rect') {\n const start = snapAt(world).point;\n gestureRef.current = { kind: 'rect', start, current: start };\n history.beginGesture();\n return;\n }\n\n if (tool === 'measure') {\n // No `history.beginGesture()` anywhere in here: measuring changes nothing, so\n // there is nothing to take back and an undo entry would be a lie.\n const grabbed = measureHit(world);\n if (grabbed) {\n const m = measurements.find((x) => x.id === grabbed.id)!;\n gestureRef.current = grabbed.end\n ? { kind: 'measureEnd', id: grabbed.id, end: grabbed.end }\n : { kind: 'measureMove', id: grabbed.id, startWorld: world, origA: m.a, origB: m.b };\n return;\n }\n const start = snapAt(world).point;\n gestureRef.current = { kind: 'measure', start, current: start };\n return;\n }\n\n if (tool === 'wall') {\n const origin = wallChain[wallChain.length - 1];\n const snapped = snapAt(world, origin, undefined, chainReferenceAngle).point;\n if (wallChain.length === 0) {\n setWallChain([snapped]);\n return;\n }\n const from = wallChain[wallChain.length - 1];\n const edit = addWall(\n floor,\n from,\n snapped,\n { thickness: wallThickness, type: WallType.Interior, height: wallHeight },\n worldTolerances(hitPx, view.zoom).node,\n );\n if (edit.result.wallIds.length > 0) commitEdit(edit.floor, 'draw-wall', edit.result.wallIds);\n // Closing the loop on the chain's own start finishes it.\n const closes =\n wallChain.length >= 2 &&\n Math.hypot(snapped.x - wallChain[0].x, snapped.y - wallChain[0].y) < worldTolerances(hitPx, view.zoom).node;\n if (closes) endWallChain();\n else setWallChain((prev) => [...prev, snapped]);\n return;\n }\n\n const openingKind = OPENING_TOOL_KIND[tool];\n if (openingKind) {\n const tolerances = worldTolerances(hitPx, view.zoom);\n const hit = hitTest(floor, rooms, world, tolerances, { accept: ['wall'] });\n if (hit?.type !== 'wall') return;\n const wall = floor.walls[hit.id];\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n const len = Math.hypot(b.x - a.x, b.y - a.y);\n const t = ((world.x - a.x) * (b.x - a.x) + (world.y - a.y) * (b.y - a.y)) / (len * len || 1);\n const defaults = {\n ...BUILT_IN_OPENING_DEFAULTS[openingKind],\n ...openingDefaults?.[openingKind],\n };\n const edit = addOpening(floor, {\n wallId: wall.id,\n kind: openingKind,\n offset: Math.min(Math.max(t, 0), 1) * len,\n width: defaults.width,\n sill: defaults.sill,\n head: defaults.head,\n });\n if (edit.result.openingId) {\n commitEdit(edit.floor, 'add-opening', [edit.result.openingId]);\n setSelection({ type: 'opening', id: edit.result.openingId });\n }\n return;\n }\n\n // Select tool.\n const tolerances = worldTolerances(hitPx, view.zoom);\n\n // The selected wall's midpoint handle sits on top of the wall itself, so it has to\n // be tested before the general hit test or the wall underneath always wins.\n if (selectedWallMidpoint && single?.type === 'wall') {\n const grabbed =\n Math.hypot(world.x - selectedWallMidpoint.x, world.y - selectedWallMidpoint.y) <= tolerances.node;\n if (grabbed) {\n history.beginGesture();\n gestureRef.current = {\n kind: 'wallSplit',\n wallId: single.id,\n at: selectedWallMidpoint,\n };\n return;\n }\n }\n\n const hit = hitTest(floor, rooms, world, tolerances);\n const additive = multiSelect && (event.ctrlKey || event.metaKey);\n\n if (!hit) {\n // Empty canvas. With multi-select on, a drag from here is a marquee; a plain\n // click clears. Ctrl is honoured so a stray miss does not wipe the selection.\n if (!additive) setSelection(null);\n gestureRef.current = multiSelect\n ? { kind: 'marquee', start: world, current: world, additive, base: selectionRef.current }\n : { kind: 'none' };\n return;\n }\n\n if ((event.ctrlKey || event.metaKey) && hit.type === 'wall' && floor.walls[hit.id]) {\n // Ctrl on a wall stays ambiguous until the pointer moves: a click toggles it in\n // or out of the selection, a drag pulls it off its neighbours. The drag\n // threshold decides, which is the same gate that stops a wobbling click from\n // moving what it just picked up, so the toggle waits for pointerup.\n const wall = floor.walls[hit.id];\n if (!additive) setSelection(hit);\n history.beginGesture();\n gestureRef.current = {\n kind: 'wall',\n wallId: hit.id,\n startWorld: world,\n origA: { ...floor.nodes[wall.a] },\n origB: { ...floor.nodes[wall.b] },\n moved: false,\n detach: true,\n toggle: additive,\n };\n return;\n }\n\n if (additive) {\n // Toggling is a selection change on its own: no drag follows, so that a\n // Ctrl-click which happens to wobble does not also move what it just picked up.\n toggleSelection(hit);\n gestureRef.current = { kind: 'none' };\n return;\n }\n\n const alreadySelected = selectionRef.current.some((entry) => entry.type === hit.type && entry.id === hit.id);\n // Pressing something already in a multi-selection moves the whole set. Pressing\n // anything else selects just it, which is what every editor does.\n if (!alreadySelected) setSelection(hit);\n\n history.beginGesture();\n\n if (selectionRef.current.length > 1) {\n const nodeIds = [...nodeIdsForSelection(selectionRef.current)];\n const orig: Record = {};\n for (const id of nodeIds) {\n const node = floor.nodes[id];\n if (node) orig[id] = { x: node.x, y: node.y };\n }\n gestureRef.current = { kind: 'room', nodeIds, startWorld: world, orig, moved: false };\n return;\n }\n\n if (hit.type === 'node') {\n gestureRef.current = {\n kind: 'node',\n nodeId: hit.id,\n moved: false,\n ...nodeDragContext(hit.id),\n };\n } else if (hit.type === 'wall') {\n const wall = floor.walls[hit.id];\n gestureRef.current = {\n kind: 'wall',\n wallId: hit.id,\n startWorld: world,\n origA: { ...floor.nodes[wall.a] },\n origB: { ...floor.nodes[wall.b] },\n moved: false,\n };\n } else if (hit.type === 'opening') {\n gestureRef.current = { kind: 'opening', openingId: hit.id, moved: false };\n } else {\n const room = rooms.find((r) => r.roomId === hit.id);\n const nodeIds = room ? [...new Set(room.nodeIds)] : [];\n const orig: Record = {};\n for (const id of nodeIds) {\n const node = floor.nodes[id];\n if (node) orig[id] = { x: node.x, y: node.y };\n }\n gestureRef.current = { kind: 'room', nodeIds, startWorld: world, orig, moved: false };\n }\n },\n [\n disabled,\n editable,\n view,\n tool,\n floor,\n rooms,\n hitPx,\n toWorld,\n snapAt,\n wallChain,\n wallThickness,\n wallHeight,\n openingDefaults,\n commitEdit,\n setSelection,\n selectedWallMidpoint,\n single,\n chainReferenceAngle,\n nodeDragContext,\n nodeIdsForSelection,\n multiSelect,\n toggleSelection,\n history,\n endWallChain,\n measureHit,\n measurements,\n ],\n );\n\n const handlePointerMove = useCallback(\n (event: ReactPointerEvent) => {\n if (disabled) return;\n if (pointersRef.current.has(event.pointerId)) {\n pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY });\n }\n\n const gesture = gestureRef.current;\n\n if (gesture.kind === 'pinch' && pointersRef.current.size >= 2) {\n const [p1, p2] = [...pointersRef.current.values()];\n const distNow = Math.hypot(p2.x - p1.x, p2.y - p1.y);\n if (gesture.startDist <= 0) return;\n const nextZoom = Math.max(minZoom, Math.min(maxZoom, gesture.startView.zoom * (distNow / gesture.startDist)));\n const rect = canvasWrapRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };\n const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };\n // Keep the world point under the pinch midpoint where it is.\n const worldMid = clientToWorld(gesture.startMid.x, gesture.startMid.y, rect, gesture.startView);\n setView({\n x: worldMid.x - (mid.x - rect.left) / nextZoom,\n y: worldMid.y - (mid.y - rect.top) / nextZoom,\n zoom: nextZoom,\n });\n return;\n }\n\n if (pressRef.current) {\n const dx = event.clientX - pressRef.current.client.x;\n const dy = event.clientY - pressRef.current.client.y;\n if (Math.hypot(dx, dy) > DRAG_THRESHOLD_PX) pressRef.current.moved = true;\n }\n\n if (gesture.kind === 'pan') {\n setView({\n x: gesture.startView.x - (event.clientX - gesture.startClient.x) / gesture.startView.zoom,\n y: gesture.startView.y - (event.clientY - gesture.startClient.y) / gesture.startView.zoom,\n zoom: gesture.startView.zoom,\n });\n return;\n }\n\n const world = toWorld(event.clientX, event.clientY);\n setCursor(world);\n\n if (gesture.kind === 'none') {\n if (!editable) return;\n if (tool === 'wall' && wallChain.length > 0) {\n // Preview where the wall will actually land, not where the pointer is.\n const snapped = snapAt(world, wallChain[wallChain.length - 1], undefined, chainReferenceAngle);\n setCursor(snapped.point);\n setSnapHint(snapped);\n return;\n }\n if (tool === 'select') {\n const hit = hitTest(floor, rooms, world, worldTolerances(hitPx, view.zoom));\n if (!selectionsEqual(hit, hovered)) {\n setHovered(hit);\n onHoverChange?.(hit);\n }\n }\n if (tool === 'measure') setHoveredMeasure(measureHit(world)?.id ?? null);\n return;\n }\n\n if (!pressRef.current?.moved) return;\n\n if (gesture.kind === 'measureEnd') {\n const point = snapAt(world).point;\n setMeasurements((list) => list.map((m) => (m.id === gesture.id ? { ...m, [gesture.end]: point } : m)));\n setCursor(point);\n return;\n }\n\n if (gesture.kind === 'measureMove') {\n const dx = world.x - gesture.startWorld.x;\n const dy = world.y - gesture.startWorld.y;\n setMeasurements((list) =>\n list.map((m) =>\n m.id === gesture.id\n ? {\n ...m,\n a: { x: gesture.origA.x + dx, y: gesture.origA.y + dy },\n b: { x: gesture.origB.x + dx, y: gesture.origB.y + dy },\n }\n : m,\n ),\n );\n return;\n }\n\n if (gesture.kind === 'rect' || gesture.kind === 'measure') {\n gestureRef.current = { ...gesture, current: snapAt(world).point };\n setCursor(snapAt(world).point);\n return;\n }\n\n if (gesture.kind === 'marquee') {\n // Unsnapped: a selection rectangle is not geometry, so pulling it onto the grid\n // would only make it harder to enclose exactly what you meant.\n gestureRef.current = { ...gesture, current: world };\n setCursor(world);\n return;\n }\n\n if (gesture.kind === 'wallSplit') {\n // First real movement: cut the wall in two and hand the drag over to the new\n // corner, so adding a corner and placing it are one continuous gesture.\n const edit = splitWall(floor, gesture.wallId, gesture.at);\n if (!edit.result.wallIds) {\n gestureRef.current = { kind: 'none' };\n return;\n }\n const nodeId = edit.result.nodeId;\n // The two halves of the wall just split both move with the new corner, so they\n // are excluded like any other incident wall. The original wall's direction is\n // the reference, which makes \"square to the wall I am bending\" available.\n const wasWall = floor.walls[gesture.wallId];\n const originNode = wasWall ? edit.floor.nodes[wasWall.a] : undefined;\n const farNode = wasWall ? edit.floor.nodes[wasWall.b] : undefined;\n const context = {\n origin: originNode ? { x: originNode.x, y: originNode.y } : undefined,\n referenceAngle:\n originNode && farNode ? Math.atan2(farNode.y - originNode.y, farNode.x - originNode.x) : undefined,\n excludeWallIds: new Set(edit.result.wallIds),\n };\n const snapped = snapAt(\n world,\n context.origin,\n new Set([nodeId]),\n context.referenceAngle,\n context.excludeWallIds,\n ).point;\n gestureRef.current = { kind: 'node', nodeId, moved: true, ...context };\n setSelection({ type: 'node', id: nodeId });\n setSnapHint(lastSnapRef.current);\n emit(moveNode(edit.floor, nodeId, snapped).floor, 'move-node', false, [nodeId]);\n return;\n }\n\n if (gesture.kind === 'node') {\n const snapped = snapAt(\n world,\n gesture.origin,\n new Set([gesture.nodeId]),\n gesture.referenceAngle,\n gesture.excludeWallIds,\n ).point;\n setSnapHint(lastSnapRef.current);\n gestureRef.current = { ...gesture, moved: true };\n emit(moveNode(floor, gesture.nodeId, snapped).floor, 'move-node', false, [gesture.nodeId]);\n return;\n }\n\n if (gesture.kind === 'wall') {\n // Constrained to the wall's own normal: pushing a wall sideways. Because the\n // endpoints are shared, the neighbouring room follows, which is the point.\n const wall = floor.walls[gesture.wallId];\n if (!wall) return;\n const dx = gesture.origB.x - gesture.origA.x;\n const dy = gesture.origB.y - gesture.origA.y;\n const len = Math.hypot(dx, dy);\n if (len < 1e-6) return;\n const normal = { x: -dy / len, y: dx / len };\n const raw = (world.x - gesture.startWorld.x) * normal.x + (world.y - gesture.startWorld.y) * normal.y;\n const step = snap !== altHeldRef.current && gridSize > 0 ? gridSize : 1;\n const offset = Math.round(raw / step) * step;\n // How far the wall has to move before it is worth detaching: the connectors are\n // exactly this long, so anything shorter is a wall the model will not accept.\n const minDetach = Math.max(step, MIN_WALL_LENGTH);\n\n if (gesture.detach) {\n // Nothing happens until the wall has somewhere to go: detaching at zero would\n // mint two zero-length connectors, which the model forbids.\n if (Math.abs(offset) < minDetach) return;\n const edit = detachWall(floor, gesture.wallId, {\n x: normal.x * offset,\n y: normal.y * offset,\n });\n if (!edit.result) return;\n gestureRef.current = {\n ...gesture,\n detach: false,\n toggle: false,\n detachedSign: Math.sign(offset),\n moved: true,\n };\n setSelection({ type: 'wall', id: gesture.wallId });\n emit(edit.floor, 'move-wall', false, [gesture.wallId]);\n return;\n }\n\n let next = moveNode(floor, wall.a, {\n x: gesture.origA.x + normal.x * offset,\n y: gesture.origA.y + normal.y * offset,\n }).floor;\n next = moveNode(next, wall.b, {\n x: gesture.origB.x + normal.x * offset,\n y: gesture.origB.y + normal.y * offset,\n }).floor;\n\n if (gesture.detachedSign && Math.abs(offset) < MIN_WALL_LENGTH) {\n // Pushed back onto the line it came off. The connectors have no length left,\n // so their ends weld and the rest of the drag is an ordinary wall drag: the\n // corner that survives a weld is the one that was already there, which is\n // exactly the corner the wall was pulled off.\n next = weldShortWalls(next).floor;\n gestureRef.current = { ...gesture, detachedSign: undefined, moved: true };\n } else {\n gestureRef.current = { ...gesture, moved: true };\n }\n emit(next, 'move-wall', false, [gesture.wallId]);\n return;\n }\n\n if (gesture.kind === 'opening') {\n const opening = floor.openings[gesture.openingId];\n if (!opening) return;\n const wall = floor.walls[opening.wallId];\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n const len = Math.hypot(b.x - a.x, b.y - a.y);\n const t = ((world.x - a.x) * (b.x - a.x) + (world.y - a.y) * (b.y - a.y)) / (len * len || 1);\n gestureRef.current = { ...gesture, moved: true };\n emit(\n updateOpening(floor, gesture.openingId, { offset: Math.min(Math.max(t, 0), 1) * len }).floor,\n 'move-opening',\n false,\n [gesture.openingId],\n );\n return;\n }\n\n if (gesture.kind === 'room') {\n const rawDx = world.x - gesture.startWorld.x;\n const rawDy = world.y - gesture.startWorld.y;\n const step = snap !== altHeldRef.current && gridSize > 0 ? gridSize : 1;\n const dx = Math.round(rawDx / step) * step;\n const dy = Math.round(rawDy / step) * step;\n let next = floor;\n for (const id of gesture.nodeIds) {\n const orig = gesture.orig[id];\n if (!orig) continue;\n next = moveNode(next, id, { x: orig.x + dx, y: orig.y + dy }).floor;\n }\n gestureRef.current = { ...gesture, moved: true };\n emit(next, 'move-room', false, gesture.nodeIds);\n }\n },\n [\n disabled,\n editable,\n tool,\n floor,\n rooms,\n hovered,\n hitPx,\n view.zoom,\n minZoom,\n maxZoom,\n gridSize,\n snap,\n toWorld,\n snapAt,\n emit,\n setView,\n setSelection,\n wallChain,\n chainReferenceAngle,\n onHoverChange,\n measureHit,\n ],\n );\n\n const finishGesture = useCallback(\n (event: ReactPointerEvent, cancelled: boolean) => {\n pointersRef.current.delete(event.pointerId);\n const gesture = gestureRef.current;\n gestureRef.current = { kind: 'none' };\n const moved = pressRef.current?.moved ?? false;\n pressRef.current = null;\n setSnapHint(null);\n\n if (gesture.kind === 'none' || gesture.kind === 'pan' || gesture.kind === 'pinch') return;\n\n if (gesture.kind === 'marquee') {\n // The marquee never touches the plan, so it has no gesture snapshot to unwind.\n if (cancelled || !moved) {\n if (cancelled) setSelection([...gesture.base]);\n return;\n }\n const minX = Math.min(gesture.start.x, gesture.current.x);\n const maxX = Math.max(gesture.start.x, gesture.current.x);\n const minY = Math.min(gesture.start.y, gesture.current.y);\n const maxY = Math.max(gesture.start.y, gesture.current.y);\n\n // Corners only. A room is not a primitive you can enclose, it is whatever its\n // corners form, and selecting the corners is what makes a drag move it. Walls and\n // rooms light up on their own wherever all of their corners are in the set.\n const caught: PlanSelection[] = [];\n for (const node of Object.values(floor.nodes)) {\n if (node.x >= minX && node.x <= maxX && node.y >= minY && node.y <= maxY) {\n caught.push({ type: 'node', id: node.id });\n }\n }\n\n if (gesture.additive) {\n const existing = new Set(gesture.base.map((e) => `${e.type}:${e.id}`));\n setSelection([...gesture.base, ...caught.filter((e) => !existing.has(`${e.type}:${e.id}`))]);\n } else {\n setSelection(caught);\n }\n return;\n }\n\n if (cancelled) {\n const restored = history.cancelGesture();\n if (restored) onChange?.(restored, { reason: 'external', committed: false, targetIds: [] });\n return;\n }\n\n if (gesture.kind === 'measureEnd' || gesture.kind === 'measureMove') return;\n\n if (gesture.kind === 'measure') {\n // A measurement stays on the canvas after the drag, so it can be read while\n // drawing against it. A tap that went nowhere leaves nothing behind.\n const span = Math.hypot(gesture.current.x - gesture.start.x, gesture.current.y - gesture.start.y);\n if (moved && span > EPS_MEASURE) {\n measureSeqRef.current += 1;\n setMeasurements((list) => [...list, { id: measureSeqRef.current, a: gesture.start, b: gesture.current }]);\n }\n return;\n }\n\n if (gesture.kind === 'rect') {\n if (!moved) {\n history.cancelGesture();\n return;\n }\n const edit = addRect(\n floor,\n gesture.start,\n gesture.current,\n { thickness: wallThickness, type: WallType.Interior, height: wallHeight },\n worldTolerances(hitPx, view.zoom).node,\n );\n if (edit.result.wallIds.length === 0) {\n history.cancelGesture();\n return;\n }\n // One entry for the whole gesture, not one per pointermove.\n const pushedRect = history.endGesture();\n commitEdit(edit.floor, 'draw-rect', edit.result.wallIds, { push: !pushedRect });\n return;\n }\n\n if (!moved) {\n history.cancelGesture();\n // A Ctrl press on a wall that never became a detach drag was a selection toggle.\n if (gesture.kind === 'wall' && gesture.toggle) {\n toggleSelection({ type: 'wall', id: gesture.wallId });\n }\n return;\n }\n\n if (gesture.kind === 'node') {\n // Dropping a node onto another welds them.\n const node = floor.nodes[gesture.nodeId];\n if (node) {\n const tolerance = worldTolerances(hitPx, view.zoom).node;\n const target = Object.values(floor.nodes).find(\n (other) => other.id !== gesture.nodeId && Math.hypot(other.x - node.x, other.y - node.y) <= tolerance,\n );\n if (target) {\n const pushedWeld = history.endGesture();\n commitEdit(mergeNodes(floor, target.id, gesture.nodeId).floor, 'move-node', [target.id], {\n push: !pushedWeld,\n });\n setSelection({ type: 'node', id: target.id });\n return;\n }\n }\n }\n\n const pushedDrag = history.endGesture();\n const reason: RoomDrawerChangeReason =\n gesture.kind === 'wall'\n ? 'move-wall'\n : gesture.kind === 'opening'\n ? 'move-opening'\n : gesture.kind === 'room'\n ? 'move-room'\n : 'move-node';\n commitEdit(floor, reason, [], { push: !pushedDrag });\n },\n [floor, history, hitPx, view.zoom, wallThickness, wallHeight, commitEdit, setSelection, toggleSelection, onChange],\n );\n\n // Wheel zoom needs a non-passive listener: React's synthetic wheel handler is passive\n // and cannot preventDefault, so the page would scroll instead.\n useEffect(() => {\n const element = canvasWrapRef.current;\n if (!element || disabled) return undefined;\n function onWheel(e: WheelEvent) {\n e.preventDefault();\n const rect = element!.getBoundingClientRect();\n const factor = Math.exp(-e.deltaY * 0.002);\n setView(\n (() => {\n const current = viewRef.current;\n const nextZoom = Math.max(minZoom, Math.min(maxZoom, current.zoom * factor));\n const world = clientToWorld(e.clientX, e.clientY, rect, current);\n return {\n x: world.x - (e.clientX - rect.left) / nextZoom,\n y: world.y - (e.clientY - rect.top) / nextZoom,\n zoom: nextZoom,\n };\n })(),\n );\n }\n element.addEventListener('wheel', onWheel, { passive: false });\n return () => element.removeEventListener('wheel', onWheel);\n }, [disabled, minZoom, maxZoom, setView]);\n\n const viewRef = useRef(view);\n viewRef.current = view;\n\n // ─── Keyboard ─────────────────────────────────────────────────────────────────\n\n const zoomBy = useCallback(\n (factor: number) => {\n const nextZoom = Math.max(minZoom, Math.min(maxZoom, view.zoom * factor));\n const centreWorld = {\n x: view.x + size.width / 2 / view.zoom,\n y: view.y + size.height / 2 / view.zoom,\n };\n setView({\n x: centreWorld.x - size.width / 2 / nextZoom,\n y: centreWorld.y - size.height / 2 / nextZoom,\n zoom: nextZoom,\n });\n },\n [view, size, minZoom, maxZoom, setView],\n );\n\n const undo = useCallback(() => {\n if (historyMode === 'none') return;\n const target = history.undo();\n if (!target) return;\n lastEmittedRef.current = target;\n onChange?.(target, { reason: 'undo', committed: true, targetIds: [] });\n onChangeEnd?.(target, { reason: 'undo', committed: true, targetIds: [] });\n }, [historyMode, history, onChange, onChangeEnd]);\n\n const redo = useCallback(() => {\n if (historyMode === 'none') return;\n const target = history.redo();\n if (!target) return;\n lastEmittedRef.current = target;\n onChange?.(target, { reason: 'redo', committed: true, targetIds: [] });\n onChangeEnd?.(target, { reason: 'redo', committed: true, targetIds: [] });\n }, [historyMode, history, onChange, onChangeEnd]);\n\n /** Selects every room, or every corner when the plan has no enclosed rooms yet. */\n const selectAll = useCallback(() => {\n const asRooms = rooms.filter((r) => r.roomId).map((r) => ({ type: 'room', id: r.roomId! }) as PlanSelection);\n if (asRooms.length > 0) {\n setSelection(asRooms);\n return;\n }\n setSelection(Object.keys(floor.nodes).map((id) => ({ type: 'node', id }) as PlanSelection));\n }, [rooms, floor.nodes, setSelection]);\n\n const nudge = useCallback(\n (dx: number, dy: number) => {\n if (!editable || selectedNodeIds.size === 0) return;\n const step = gridSize > 0 ? gridSize : 100;\n const amount = shiftHeldRef.current ? step * 10 : step;\n let next = floor;\n for (const id of selectedNodeIds) {\n const node = next.nodes[id];\n if (node) next = moveNode(next, id, { x: node.x + dx * amount, y: node.y + dy * amount }).floor;\n }\n commitEdit(next, 'nudge', [...selectedNodeIds]);\n },\n [editable, selectedNodeIds, floor, gridSize, commitEdit],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (disabled) return;\n // The old implementation put this on `window`, so any mounted drawer swallowed\n // Delete and `+` for the whole page. Scoping it to the focused root fixes that.\n const target = event.target as HTMLElement;\n if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {\n if (event.key === 'Escape') (target as HTMLElement).blur();\n return;\n }\n\n if (event.key === 'Shift') shiftHeldRef.current = true;\n if (event.key === 'Alt') altHeldRef.current = true;\n if (event.key === ' ' && !spaceHeldRef.current) {\n spaceHeldRef.current = true;\n event.preventDefault();\n return;\n }\n\n const meta = event.metaKey || event.ctrlKey;\n if (meta && event.key.toLowerCase() === 'z') {\n event.preventDefault();\n if (event.shiftKey) redo();\n else undo();\n return;\n }\n if (meta && event.key.toLowerCase() === 'a') {\n event.preventDefault();\n if (multiSelect) selectAll();\n return;\n }\n if (meta && event.key.toLowerCase() === 'y') {\n event.preventDefault();\n redo();\n return;\n }\n\n if (event.key === 'Escape') {\n if (wallChain.length > 0) endWallChain();\n // Clears the ruler before the selection: with measurements on screen, Escape\n // most likely means \"put that away\".\n else if (measurements.length > 0) setMeasurements([]);\n else setSelection(null);\n return;\n }\n if (event.key === 'Enter' && tool === 'wall') {\n endWallChain();\n return;\n }\n if (event.key === 'Delete' || event.key === 'Backspace') {\n event.preventDefault();\n // With the ruler up, Delete belongs to the ruler and NOTHING else. It takes the\n // measurement under the pointer, and with none there it does nothing: falling\n // through to the selection would let a measuring tool quietly destroy a room that\n // was selected minutes earlier with another tool.\n if (tool === 'measure') {\n if (hoveredMeasure !== null) {\n setMeasurements((list) => list.filter((m) => m.id !== hoveredMeasure));\n setHoveredMeasure(null);\n }\n return;\n }\n deleteSelection();\n return;\n }\n if (event.key === '+' || event.key === '=') {\n zoomBy(1.25);\n return;\n }\n if (event.key === '-') {\n zoomBy(1 / 1.25);\n return;\n }\n if (event.key === '0') {\n fitToContent();\n return;\n }\n if (event.key.startsWith('Arrow')) {\n event.preventDefault();\n const map: Record = {\n ArrowLeft: [-1, 0],\n ArrowRight: [1, 0],\n ArrowUp: [0, -1],\n ArrowDown: [0, 1],\n };\n const delta = map[event.key];\n if (delta) nudge(delta[0], delta[1]);\n return;\n }\n\n const lower = event.key.toLowerCase();\n if (lower === 's') {\n setSnapEnabled((on) => !on);\n return;\n }\n if (lower === 'l') {\n setAngleLockEnabled((on) => !on);\n return;\n }\n if (lower === 'g') {\n setGridVisible((on) => !on);\n return;\n }\n\n const toolKey = TOOL_KEYS[event.key.toLowerCase()];\n if (toolKey && editable && tools.includes(toolKey)) {\n setTool(toolKey);\n endWallChain();\n }\n },\n [\n disabled,\n editable,\n tools,\n tool,\n wallChain,\n measurements.length,\n hoveredMeasure,\n redo,\n undo,\n setSelection,\n endWallChain,\n deleteSelection,\n zoomBy,\n fitToContent,\n nudge,\n setTool,\n multiSelect,\n selectAll,\n ],\n );\n\n // ─── Files ────────────────────────────────────────────────────────────────────\n\n /**\n * Swaps the whole plan out as one history entry. Opening a file and the `setPlan`\n * handle share it, so a file and a programmatic replacement behave identically, and\n * both stay undoable: opening a file over an hour's work is exactly the mistake that\n * most needs taking back.\n */\n const replacePlan = useCallback(\n (next: FloorPlan, reason: RoomDrawerChangeReason, options?: { resetHistory?: boolean }) => {\n lastEmittedRef.current = next;\n if (options?.resetHistory) {\n history.clearHistory();\n history.replace(next);\n } else {\n history.commit(next, reason);\n }\n const meta: RoomDrawerChangeMeta = { reason, committed: true, targetIds: [] };\n onChange?.(next, meta);\n onChangeEnd?.(next, meta);\n },\n [history, onChange, onChangeEnd],\n );\n\n // ─── Floors ───────────────────────────────────────────────────────────────────\n\n /**\n * Floor operations go through `emit` like any other edit, so each is one undo step and\n * reaches a controlled parent through `onChange`. Adding or copying a storey also\n * switches to it: nobody adds a floor in order to keep looking at the one below.\n */\n const addFloorAt = useCallback(\n (options: { label?: string } = {}) => {\n const { plan: next, floor: added } = addFloor(plan, {\n nameFor: newFloorName,\n ...options,\n index: floorIndex(plan, floor.id) + 1,\n });\n replacePlan(next, 'add-floor');\n selectFloor(added.id);\n return added.id;\n },\n [plan, floor.id, replacePlan, selectFloor, newFloorName],\n );\n\n const duplicateActiveFloor = useCallback(() => {\n const { plan: next, floor: copy } = duplicateFloor(plan, floor.id, { label: copiedFloorName(floor.label) });\n if (!copy) return null;\n replacePlan(next, 'duplicate-floor');\n selectFloor(copy.id);\n return copy.id;\n }, [plan, floor.id, floor.label, replacePlan, selectFloor, copiedFloorName]);\n\n const removeFloorById = useCallback(\n (id?: string) => {\n const target = id ?? floor.id;\n const next = removeFloor(plan, target);\n if (next === plan) return; // the last floor, which stays\n replacePlan(next, 'remove-floor');\n if (target === floor.id) {\n // Step down to the storey below where there is one, so the view lands somewhere\n // adjacent rather than at the bottom of the building.\n const was = floorIndex(plan, target);\n selectFloor(next.floors[Math.max(0, was - 1)].id);\n }\n },\n [plan, floor.id, replacePlan, selectFloor],\n );\n\n const moveFloorTo = useCallback(\n (id: string, toIndex: number) => {\n const next = moveFloor(plan, id, toIndex);\n if (next !== plan) replacePlan(next, 'move-floor');\n },\n [plan, replacePlan],\n );\n\n const setFloorHeightById = useCallback(\n (id: string, height: number) => {\n const next = setFloorHeight(plan, id, height);\n if (next !== plan) replacePlan(next, 'edit-floor');\n },\n [plan, replacePlan],\n );\n\n const renameFloorById = useCallback(\n (id: string, label: string) => {\n const next = renameFloor(plan, id, label);\n if (next !== plan) replacePlan(next, 'rename-floor');\n },\n [plan, replacePlan],\n );\n\n const downloadPlan = useCallback(\n (name?: string) => {\n const chosen = (name ?? fileName ?? plan.name ?? '').trim() || 'floor-plan';\n const url = URL.createObjectURL(new Blob([planToJson(plan)], { type: 'application/json' }));\n const link = document.createElement('a');\n link.href = url;\n link.download = chosen.endsWith('.json') ? chosen : `${chosen}.json`;\n link.click();\n // Revoking in the same tick cancels the download in some browsers, so let the task\n // queue drain first.\n setTimeout(() => URL.revokeObjectURL(url), 0);\n },\n [fileName, plan],\n );\n\n const loadJson = useCallback(\n (text: string): PlanParseResult => {\n const result = planFromJson(text);\n if (result.plan) replacePlan(result.plan, 'import');\n // Silence is the report for a clean file: the canvas changing says it worked.\n setImportReport(result.plan && result.issues.length === 0 ? null : result.issues);\n onImport?.(result);\n return result;\n },\n [onImport, replacePlan],\n );\n\n const openFile = useCallback(\n (file: File) => {\n file\n .text()\n .then((text) => loadJson(text))\n .catch((error: Error) => {\n const issues = [`Could not read that file: ${error.message}`];\n setImportReport(issues);\n onImport?.({ plan: null, issues });\n });\n },\n [loadJson, onImport],\n );\n\n const clearMeasurements = useCallback(() => setMeasurements([]), []);\n\n const handleKeyUp = useCallback((event: React.KeyboardEvent) => {\n if (event.key === 'Shift') shiftHeldRef.current = false;\n if (event.key === 'Alt') altHeldRef.current = false;\n if (event.key === ' ') spaceHeldRef.current = false;\n }, []);\n\n // ─── Imperative handle ────────────────────────────────────────────────────────\n\n useImperativeHandle(\n ref,\n () => ({\n getPlan: () => plan,\n setPlan: (next, options) => replacePlan(next, 'import', options),\n clear: () => replacePlan(emptyFloorPlan({ floorLabel: initialFloorName }), 'clear'),\n getFloorId: () => floor.id,\n setFloorId: selectFloor,\n addFloor: (options) => addFloorAt(options),\n duplicateFloor: duplicateActiveFloor,\n removeFloor: removeFloorById,\n renameFloor: renameFloorById,\n moveFloor: moveFloorTo,\n setFloorHeight: setFloorHeightById,\n clearMeasurements,\n download: downloadPlan,\n loadJson,\n undo,\n redo,\n canUndo: () => historyMode !== 'none' && history.canUndo,\n canRedo: () => historyMode !== 'none' && history.canRedo,\n clearHistory: history.clearHistory,\n getSelection: () => [...selectionRef.current],\n select: setSelection,\n addToSelection: (next) => {\n const additions = Array.isArray(next) ? next : [next as PlanSelection];\n const existing = new Set(selectionRef.current.map((e) => `${e.type}:${e.id}`));\n setSelection([...selectionRef.current, ...additions.filter((e) => !existing.has(`${e.type}:${e.id}`))]);\n },\n toggleSelection,\n selectAll,\n deleteSelection,\n getView: () => view,\n setView,\n zoomBy,\n fitToContent,\n toWorld,\n toScreen,\n getSvgElement: () => svgRef.current,\n }),\n [\n plan,\n history,\n replacePlan,\n initialFloorName,\n floor,\n selectFloor,\n addFloorAt,\n duplicateActiveFloor,\n removeFloorById,\n renameFloorById,\n moveFloorTo,\n setFloorHeightById,\n clearMeasurements,\n downloadPlan,\n loadJson,\n undo,\n redo,\n historyMode,\n setSelection,\n toggleSelection,\n selectAll,\n deleteSelection,\n view,\n setView,\n zoomBy,\n fitToContent,\n toWorld,\n toScreen,\n ],\n );\n\n // ─── Overlay (screen space) ───────────────────────────────────────────────────\n\n const gesture = gestureRef.current;\n const overlay = useMemo(() => {\n if (!editable) return null;\n const parts: ReactElement[] = [];\n\n // The ruler: measurements already taken, plus the one in flight. Drawn in screen\n // space, so ticks and figures stay the same size at any zoom.\n const rulerLines = [\n ...measurements,\n ...(gesture.kind === 'measure' ? [{ id: -1, a: gesture.start, b: gesture.current }] : []),\n ];\n for (const line of rulerLines) {\n const a = toScreen(line.a);\n const b = toScreen(line.b);\n const length = Math.hypot(line.b.x - line.a.x, line.b.y - line.a.y);\n if (length < EPS_MEASURE) continue;\n const angle = Math.atan2(line.b.y - line.a.y, line.b.x - line.a.x);\n // End ticks, perpendicular to the run, so a measurement reads as a dimension\n // rather than as something that was drawn.\n const nx = -Math.sin(angle) * 5;\n const ny = Math.cos(angle) * 5;\n const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };\n parts.push(\n \n \n \n \n ,\n );\n // Grab handles, only while the ruler is the active tool: under any other tool a\n // measurement is inert scenery and its handles would compete with the plan's own.\n if (tool === 'measure' && line.id >= 0) {\n for (const [end, p] of [\n ['a', a],\n ['b', b],\n ] as const) {\n parts.push(\n ,\n );\n }\n }\n parts.push(\n \n {`${formatLength(length)} · ${formatAngle(toDegrees(angle))}`}\n ,\n );\n }\n\n // Snap guides: the construction lines explaining what the pointer locked onto.\n // resolveSnap has always produced these; without drawing them, snapping reads as the\n // app quietly moving the pointer somewhere the user did not ask for.\n if (showSnapGuides && snapHint) {\n snapHint.guides.forEach((guide, i) => {\n const a = toScreen(guide.a);\n const b = toScreen(guide.b);\n parts.push(\n ,\n );\n });\n\n // A marker on the point itself, so a node or wall snap is visible too, not just\n // the constraint-style snaps that come with a line.\n if (snapHint.kind !== SnapKind.None && snapHint.kind !== SnapKind.Grid) {\n const p = toScreen(snapHint.point);\n parts.push(\n ,\n );\n }\n }\n\n // Rect preview.\n if (gesture.kind === 'rect') {\n const a = toScreen(gesture.start);\n const b = toScreen(gesture.current);\n const left = Math.min(a.x, b.x);\n const top = Math.min(a.y, b.y);\n const right = Math.max(a.x, b.x);\n const bottom = Math.max(a.y, b.y);\n parts.push(\n ,\n );\n\n // Both sides and the area, each sitting on what it measures. The figures are the\n // wall CENTRELINES, which is also what the finished room reports its area from, so\n // the number does not change the moment the drag ends.\n const width = Math.abs(gesture.current.x - gesture.start.x);\n const height = Math.abs(gesture.current.y - gesture.start.y);\n if (showMeasurements && (width > 0 || height > 0)) {\n parts.push(\n \n {formatLength(width)}\n ,\n \n {formatLength(height)}\n ,\n );\n if (width > 0 && height > 0) {\n parts.push(\n \n {formatArea(width * height)}\n ,\n );\n }\n }\n }\n\n // Wall chain preview.\n if (tool === 'wall' && wallChain.length > 0) {\n const points = [...wallChain, cursor].filter(Boolean) as PlanPoint[];\n const screen = points.map(toScreen);\n parts.push(\n `${p.x},${p.y}`).join(' ')}\n fill='none'\n />,\n );\n screen.forEach((p, i) => {\n parts.push();\n });\n if (showMeasurements && cursor && wallChain.length > 0) {\n const from = wallChain[wallChain.length - 1];\n const length = Math.hypot(cursor.x - from.x, cursor.y - from.y);\n const mid = toScreen({ x: (from.x + cursor.x) / 2, y: (from.y + cursor.y) / 2 });\n const locked = snapHint?.kind === SnapKind.Angle;\n parts.push(\n \n {`${formatLength(length)} · ${\n // Relative to the previous segment when the lock is measuring from it, since\n // \"90° to the last wall\" is the number the user is actually aiming for.\n snapHint?.angleRelativeTo === 'reference' && chainReferenceAngle !== undefined\n ? relativeAngle(\n formatAngle(toDegrees(Math.atan2(cursor.y - from.y, cursor.x - from.x) - chainReferenceAngle)),\n )\n : formatAngle(toDegrees(Math.atan2(cursor.y - from.y, cursor.x - from.x)))\n }`}\n ,\n );\n }\n }\n\n // A handle on every corner the selection implies, so a multi-selection shows exactly\n // what a drag would move. Corners picked explicitly are filled; ones that came along\n // because their wall or room was selected are outlined.\n const explicitNodes = new Set(selection.filter((e) => e.type === 'node').map((e) => e.id));\n for (const id of selectedNodeIds) {\n const node = floor.nodes[id];\n if (!node) continue;\n const p = toScreen(node);\n parts.push(\n ,\n );\n }\n\n // Marquee rectangle.\n if (gesture.kind === 'marquee' && pressRef.current?.moved) {\n const a = toScreen(gesture.start);\n const b = toScreen(gesture.current);\n parts.push(\n ,\n );\n }\n\n // The selected wall's \"add a corner\" handle. Hollow and smaller than a real corner,\n // so it reads as something that is not there yet rather than as an existing node.\n if (selectedWallMidpoint && gesture.kind !== 'node') {\n const p = toScreen(selectedWallMidpoint);\n parts.push();\n }\n\n // Dragging a whole ROOM is a rigid translation of every node in its face, so its own\n // walls and area are all frozen; the only things changing are how far it has moved\n // and any wall straddling its boundary. Reporting its own dimensions here would put\n // five stuck numbers on screen.\n if (showMeasurements && gesture.kind === 'room' && gesture.moved) {\n const moving = new Set(gesture.nodeIds);\n\n const sampleId = gesture.nodeIds.find((id) => floor.nodes[id] && gesture.orig[id]);\n if (sampleId) {\n const now = floor.nodes[sampleId];\n const was = gesture.orig[sampleId];\n const dx = now.x - was.x;\n const dy = now.y - was.y;\n const room = single?.type === 'room' ? rooms.find((r) => r.roomId === single.id) : undefined;\n const at = toScreen(room ? room.anchor : now);\n parts.push(\n \n {`${formatLength(Math.hypot(dx, dy))} · ${formatAngle(toDegrees(Math.atan2(dy, dx)))}`}\n ,\n );\n }\n\n // A wall with both ends moving travels with the room and keeps its shape; one with\n // neither is untouched. Only the ones bridging the two are being stretched.\n for (const wall of Object.values(floor.walls)) {\n if (moving.has(wall.a) === moving.has(wall.b)) continue;\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) continue;\n const tail = moving.has(wall.a) ? a : b;\n const head = moving.has(wall.a) ? b : a;\n const mid = toScreen({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });\n parts.push(\n \n {`${formatLength(Math.hypot(head.x - tail.x, head.y - tail.y))} · ${formatAngle(toDegrees(Math.atan2(head.y - tail.y, head.x - tail.x)))}`}\n ,\n );\n }\n }\n\n // A CORNER reports every wall meeting it, since reshaping it changes all of them. A\n // WALL reports itself plus the walls running off its ends: dragging a wall moves both\n // its endpoints, so its own length is the one number that cannot change. Single\n // selections only; a multi-selection moves rigidly and uses the offset readout above.\n if (showMeasurements && (single?.type === 'node' || single?.type === 'wall')) {\n const measured: Array<{ wall: (typeof floor.walls)[string]; from: string; primary: boolean }> = [];\n const seen = new Set();\n const add = (wallId: string, from: string, primary: boolean) => {\n if (seen.has(wallId)) return;\n const wall = floor.walls[wallId];\n if (!wall) return;\n seen.add(wallId);\n measured.push({ wall, from, primary });\n };\n\n if (single.type === 'node') {\n for (const wall of Object.values(floor.walls)) {\n if (wall.a === single.id || wall.b === single.id) add(wall.id, single.id, true);\n }\n } else {\n const selected = floor.walls[single.id];\n if (selected) {\n add(selected.id, selected.a, true);\n // Everything attached at either end. These are what actually resize as the\n // selected wall is pushed sideways.\n for (const wall of Object.values(floor.walls)) {\n if (wall.id === selected.id) continue;\n for (const end of [selected.a, selected.b]) {\n if (wall.a === end || wall.b === end) add(wall.id, end, false);\n }\n }\n }\n }\n\n const locked = snapHint?.kind === SnapKind.Angle && gesture.kind !== 'none';\n for (const { wall, from, primary } of measured) {\n const a = floor.nodes[wall.a];\n const b = floor.nodes[wall.b];\n if (!a || !b) continue;\n // Measured outward from the shared end, so the angle describes the wall as it\n // leaves that point rather than depending on which end it was stored from.\n const tail = wall.a === from ? a : b;\n const head = wall.a === from ? b : a;\n const mid = toScreen({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 });\n parts.push(\n \n {`${formatLength(Math.hypot(head.x - tail.x, head.y - tail.y))} · ${formatAngle(toDegrees(Math.atan2(head.y - tail.y, head.x - tail.x)))}`}\n ,\n );\n }\n }\n\n return <>{parts};\n }, [\n editable,\n gesture,\n tool,\n wallChain,\n cursor,\n selection,\n floor,\n rooms,\n single,\n selectedNodeIds,\n selectedWallMidpoint,\n showMeasurements,\n showSnapGuides,\n snapHint,\n chainReferenceAngle,\n formatLength,\n formatArea,\n formatAngle,\n relativeAngle,\n measurements,\n hoveredMeasure,\n classNames?.measureLine,\n toScreen,\n ]);\n\n // ─── Chrome ───────────────────────────────────────────────────────────────────\n\n const TOOL_META: Record = {\n select: { icon: faArrowPointer, label: text.select, key: 'V' },\n wall: { icon: faMinus, label: text.wall, key: 'W' },\n rect: { icon: faSquare, label: text.rect, key: 'R' },\n door: { icon: faDoorOpen, label: text.door, key: 'D' },\n window: { icon: faWindowMaximize, label: text.window, key: 'N' },\n archway: { icon: faExpand, label: text.archway, key: 'A' },\n measure: { icon: faRulerCombined, label: text.measure, key: 'M' },\n };\n\n const hint = (() => {\n if (!editable) return '';\n if (tool === 'wall') return text.hintWall;\n if (tool === 'rect') return text.hintRect;\n if (tool === 'measure') return text.hintMeasure;\n if (OPENING_TOOL_KIND[tool]) return text.hintOpening;\n return multiSelect ? text.hintSelect : text.hintSelectSingle;\n })();\n\n /**\n * What the inspector calls the current selection. It is the only thing in the bar for a\n * corner, which has nothing to edit that dragging it does not already do.\n */\n const selectionNoun = (() => {\n if (selection.length === 0) return text.selectedFloor;\n if (selection.length > 1) return text.selectedCount(selection.length);\n if (selectedOpening) {\n const nouns: Record = {\n [OpeningKind.Door]: text.selectedDoor,\n [OpeningKind.Window]: text.selectedWindow,\n [OpeningKind.Archway]: text.selectedArchway,\n [OpeningKind.Gap]: text.selectedGap,\n };\n return nouns[selectedOpening.kind];\n }\n if (selectedWall) return text.selectedWall;\n if (single?.type === 'room') return text.selectedRoom;\n return text.selectedCorner;\n })();\n\n const visibleTools = editable ? tools : [];\n\n return (\n \n {showToolbar && (\n \n {visibleTools.map((t) => {\n const meta = TOOL_META[t];\n return (\n {\n setTool(t);\n endWallChain();\n }}\n >\n {renderIcon(icons?.[t] ?? meta.icon, {\n className: cx(styles.roomDrawerToolIcon, classNames?.toolIcon),\n style: slotStyles?.toolIcon,\n })}\n \n );\n })}\n\n {visibleTools.length > 0 && }\n\n {editable && (\n <>\n {(\n [\n {\n on: snapEnabled,\n toggle: () => setSnapEnabled((v) => !v),\n icon: icons?.snap ?? faMagnet,\n label: text.snap,\n key: 'S',\n },\n {\n on: angleLockEnabled,\n toggle: () => setAngleLockEnabled((v) => !v),\n icon: icons?.angleLock ?? faDraftingCompass,\n label: text.angleLock(constrainAngle),\n key: 'L',\n },\n {\n on: gridVisible,\n toggle: () => setGridVisible((v) => !v),\n icon: icons?.grid ?? faBorderAll,\n label: text.grid,\n key: 'G',\n },\n // Only worth offering when there is a storey below to trace.\n ...(floorBelow(plan, floor.id)\n ? [\n {\n on: underlayOn,\n toggle: () => setUnderlayOn((v) => !v),\n icon: icons?.underlay ?? faLayerGroup,\n label: text.underlay,\n key: 'B',\n },\n ]\n : []),\n ] as const\n ).map((toggle) => (\n \n {renderIcon(toggle.icon, {\n className: cx(styles.roomDrawerToolIcon, classNames?.toolIcon),\n style: slotStyles?.toolIcon,\n })}\n \n ))}\n \n \n )}\n\n {showHistoryControls && historyMode !== 'none' && editable && (\n <>\n \n {renderIcon(icons?.undo ?? faArrowRotateLeft)}\n \n \n {renderIcon(icons?.redo ?? faArrowRotateRight)}\n \n \n \n )}\n\n {showFileControls && (\n <>\n downloadPlan()}\n >\n {renderIcon(icons?.download ?? faDownload)}\n \n {editable && (\n fileInputRef.current?.click()}\n >\n {renderIcon(icons?.upload ?? faUpload)}\n \n )}\n \n \n )}\n\n
\n zoomBy(1 / 1.25)}\n >\n {renderIcon(icons?.zoomOut ?? faMagnifyingGlassMinus)}\n \n fitToContent()}\n >\n {formatZoom(view.zoom)}\n \n zoomBy(1.25)}\n >\n {renderIcon(icons?.zoomIn ?? faMagnifyingGlassPlus)}\n \n
\n \n )}\n\n {showFloorBar && plan.floors.length > 0 && (\n \n {/* Top storey first, so the strip reads the way a building does in section\n rather than the way the array happens to be ordered. */}\n {[...plan.floors].reverse().map((f) => (\n selectFloor(f.id)}\n >\n {f.label}\n \n ))}\n {editable && (\n addFloorAt()}\n >\n {renderIcon(icons?.addFloor ?? faPlus)}\n \n )}\n \n )}\n\n {\n if (!disabled && e.button === 1) e.preventDefault();\n }}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={(e) => finishGesture(e, false)}\n onPointerCancel={(e) => finishGesture(e, true)}\n >\n \n \n\n {showInspector && editable && (\n
\n \n {selectionNoun}\n \n\n {selection.length === 0 && (\n <>\n renameFloorById(floor.id, next)}\n />\n {\n if (next === undefined) return;\n setFloorHeightById(floor.id, next);\n }}\n />\n {/* The strip lists storeys top first, so \"up\" is a higher index. Only\n offered when there is somewhere to go. */}\n {plan.floors.length > 1 && (\n <>\n = plan.floors.length - 1}\n onClick={() => moveFloorTo(floor.id, floorIndex(plan, floor.id) + 1)}\n >\n {renderIcon(icons?.moveFloorUp ?? faAngleUp)}\n \n moveFloorTo(floor.id, floorIndex(plan, floor.id) - 1)}\n >\n {renderIcon(icons?.moveFloorDown ?? faAngleDown)}\n \n \n )}\n duplicateActiveFloor()}\n >\n {renderIcon(icons?.duplicateFloor ?? faClone)}\n \n {plan.floors.length > 1 && (\n removeFloorById()}\n />\n )}\n \n )}\n\n {selectedRoom?.meta && (\n <>\n {\n const room = selectedRoom.meta!;\n commitEdit({ ...floor, rooms: { ...floor.rooms, [room.id]: { ...room, name: next } } }, 'edit-room', [\n room.id,\n ]);\n }}\n />\n \n {formatArea(selectedRoom.area)}\n \n \n )}\n\n {selectedWall && (\n \n {text.addCorner}\n \n )}\n\n {selectedWall && (\n {\n if (next === undefined) return;\n commitEdit(\n {\n ...floor,\n walls: { ...floor.walls, [selectedWall.id]: { ...selectedWall, thickness: next } },\n },\n 'edit-wall',\n [selectedWall.id],\n );\n }}\n />\n )}\n\n {selectedOpening && (\n <>\n {\n if (next === undefined) return;\n commitEdit(updateOpening(floor, selectedOpening.id, { width: next }).floor, 'edit-opening', [\n selectedOpening.id,\n ]);\n }}\n />\n {\n if (next === undefined) return;\n commitEdit(updateOpening(floor, selectedOpening.id, { sill: next }).floor, 'edit-opening', [\n selectedOpening.id,\n ]);\n }}\n />\n \n )}\n\n {selection.length > 0 && (\n \n )}\n
\n )}\n\n {showFileControls && editable && (\n