feat(ui): double-click a port to start a cable draw

Double-click a port → enter cable-draw mode from that port without having to arm the cable tool first. armTool("cable") is called so the crosshair cursor is active during the draw; the next port-click hits the existing cable-draw-in-progress branch in onPortPointerDown and commits the cable. Esc / clicking the source port cancels. Single-click behaviour (select + open port inspector) is unchanged because pointerdown still hits onPortPointerDown first; dblclick upgrades the selection to a cable-draw source.
merge: drag-to-replug cable endpoints
2026-05-16 13:29:02 +02:00 · 2026-05-16 13:17:25 +02:00 · 2026-05-16 13:11:33 +02:00 · 2026-05-16 13:07:31 +02:00 · 2026-05-16 12:59:51 +02:00 · 2026-05-16 12:10:28 +02:00
3 changed files with 1144 additions and 131 deletions
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -23,6 +23,11 @@
    <button type="button" id="btn-apply-template" class="btn">Apply template…</button>
    <button type="button" id="btn-solve" class="btn btn-primary">Solve</button>
    <button type="button" id="btn-export" class="btn">Export</button>
+    <button type="button" id="btn-admin" class="btn" title="Admin: projects, cable types, device types, setup templates">⚙ Admin</button>
+    <span class="zoom-cluster">
+      <span id="zoom-pct" title="Zoom — scroll on canvas, or 0/Home to reset">100%</span>
+      <button type="button" id="btn-fit" class="btn btn-tiny" title="Fit content to view">Fit</button>
+    </span>
    <span id="toast" class="toast" hidden></span>
  </header>

@@ -33,11 +38,6 @@
        <ul id="legend-list" class="legend-list"></ul>
        <button type="button" id="btn-add-type" class="btn btn-tiny">+ Type</button>
      </section>
-      <section class="requirements">
-        <h2 class="sidebar-heading">Requirements</h2>
-        <ul id="requirement-list" class="requirement-list"></ul>
-        <button type="button" id="btn-add-requirement" class="btn btn-tiny">+ Requirement</button>
-      </section>
      <section class="tools">
        <h2 class="sidebar-heading">Tools</h2>
        <ul class="tool-list">
@@ -224,6 +224,24 @@
    </form>
  </dialog>

+  <!-- Admin: projects + cable types + device types + setup templates -->
+  <dialog id="modal-admin" class="modal modal-wide" aria-labelledby="adm-title">
+    <div class="admin-shell">
+      <header class="admin-header">
+        <h2 id="adm-title">Admin</h2>
+        <button type="button" class="btn btn-link admin-close" data-close>✕</button>
+      </header>
+      <nav class="admin-tabs" role="tablist">
+        <button type="button" class="admin-tab" data-admin-tab="projects" role="tab" aria-selected="true">Projects</button>
+        <button type="button" class="admin-tab" data-admin-tab="cable-types" role="tab">Cable types</button>
+        <button type="button" class="admin-tab" data-admin-tab="device-types" role="tab">Device types</button>
+        <button type="button" class="admin-tab" data-admin-tab="setup-templates" role="tab">Setup templates</button>
+        <button type="button" class="admin-tab" data-admin-tab="requirements" role="tab">Requirements</button>
+      </nav>
+      <section class="admin-body" id="admin-body" role="tabpanel"></section>
+    </div>
+  </dialog>
+
  <script type="module" src="/main.js"></script>
 </body>
 </html>
--- a/web/static/main.js
+++ b/web/static/main.js
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -192,6 +192,18 @@ body {
 .device-rect.selected { stroke-width: 3; }
 .device-rect:hover { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); }

+/* Bottom-right resize affordance per device. Subtle grey by default,
+   stronger on hover so m can find it without it dominating the rect. */
+.device-resize-handle {
+  fill: rgba(120, 120, 120, 0.35);
+  stroke: rgba(60, 60, 60, 0.45);
+  stroke-width: 1;
+  cursor: nwse-resize;
+}
+.device-resize-handle:hover {
+  fill: rgba(60, 60, 60, 0.65);
+}
+
 .device-label {
  fill: var(--text);
  font-size: 12px;
@@ -215,8 +227,6 @@ body {
 .canvas-wrap.tool-device #canvas *,
 .canvas-wrap.tool-io     #canvas,
 .canvas-wrap.tool-io     #canvas *,
-.canvas-wrap.tool-port   #canvas,
-.canvas-wrap.tool-port   #canvas *,
 .canvas-wrap.tool-cable  #canvas,
 .canvas-wrap.tool-cable  #canvas * { cursor: crosshair !important; }

@@ -237,6 +247,27 @@ body {
  filter: drop-shadow(0 0 4px var(--accent));
 }

+/* Zoom cluster — % + Fit button next to Admin. */
+.zoom-cluster {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 8px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
+#zoom-pct {
+  font-size: 12px;
+  color: var(--text-muted);
+  min-width: 38px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.canvas-wrap.panning #canvas,
+.canvas-wrap.panning #canvas * { cursor: grabbing !important; }
+.canvas-wrap.space-pan-ready #canvas,
+.canvas-wrap.space-pan-ready #canvas * { cursor: grab !important; }
+
 /* Header toast — slice 8 export feedback */
 .toast {
  display: inline-block;
@@ -296,8 +327,11 @@ body {
  align-items: center;
  gap: 6px;
  font-size: 12px;
-  padding: 2px 0;
+  padding: 2px 4px;
+  border-radius: 4px;
+  cursor: pointer;
 }
+.port-row:hover { background: var(--surface-2); }
 .port-row .swatch,
 .swatch {
  display: inline-block;
@@ -373,8 +407,121 @@ body {
 .cable-line:hover { stroke-width: 4; }
 .cable-line.selected { stroke-width: 4; }

+/* Endpoint handles — only rendered for the currently-selected cable.
+   Grab cursor on idle, grabbing while dragging (.replugging on root). */
+.cable-handle {
+  cursor: grab;
+  stroke-width: 2;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));
+}
+.cable-handle:hover { stroke-width: 3; }
+.canvas-wrap.replugging .cable-handle,
+.canvas-wrap.replugging #canvas * { cursor: grabbing !important; }
+
 /* Solve preview-diff modal */
 .modal-wide { width: 560px; }
+
+/* Admin modal — wider, tabbed */
+.modal-wide.admin-shell-host { width: 760px; }
+#modal-admin { width: 760px; max-width: 90vw; }
+.admin-shell { padding: 16px; min-height: 460px; }
+.admin-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.admin-header h2 { margin: 0; }
+.admin-close { font-size: 16px; padding: 4px 8px; }
+.admin-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+.admin-tab {
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: 8px 12px;
+  font: inherit;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.admin-tab:hover { color: var(--text); }
+.admin-tab[aria-selected="true"] {
+  color: var(--text);
+  border-bottom-color: var(--accent);
+}
+.admin-body {
+  font-size: 13px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+.admin-row {
+  display: grid;
+  gap: 6px 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.admin-row:last-child { border-bottom: 0; }
+.admin-row .field { display: grid; grid-template-columns: 110px 1fr; align-items: center; }
+.admin-row .field span { color: var(--text-muted); font-size: 12px; }
+.admin-row .field input,
+.admin-row .field textarea,
+.admin-row .field select {
+  width: 100%;
+  font: inherit;
+  padding: 4px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text);
+}
+.admin-row .actions { display: flex; gap: 6px; justify-content: flex-end; }
+.admin-row.locked { opacity: 0.85; }
+.admin-row .locked-badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: var(--surface-2);
+  color: var(--text-muted);
+}
+.admin-row-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.admin-row-title .swatch { display: inline-block; }
+.admin-empty { color: var(--text-muted); padding: 16px 0; }
+.admin-add-row {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.port-profile-list {
+  margin: 4px 0 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.port-profile-list li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0;
+}
+.tmpl-detail {
+  margin: 4px 0 0 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.tmpl-detail ul { margin: 4px 0 0 16px; padding: 0; }
+
 .sv-body { font-size: 13px; }
 .sv-body h3 {
  font-size: 11px;
Author	SHA1	Message	Date
mAi	0ecd9c8b4a	feat(ui): double-click a port to start a cable draw Double-click a port → enter cable-draw mode from that port without having to arm the cable tool first. armTool("cable") is called so the crosshair cursor is active during the draw; the next port-click hits the existing cable-draw-in-progress branch in onPortPointerDown and commits the cable. Esc / clicking the source port cancels. Single-click behaviour (select + open port inspector) is unchanged because pointerdown still hits onPortPointerDown first; dblclick upgrades the selection to a cable-draw source.	2026-05-16 13:29:02 +02:00
mAi	40ab3d2630	merge: drag-to-replug cable endpoints Selected cable shows two endpoint handles (r=7, coloured + halo). pointerdown on a handle starts an endpoint drag; hitTestEndpointTarget resolves cursor over port / device / IO marker; pointerup PATCHes the from_/to_ field. Cancel on empty canvas or same-endpoint drop. auto=1 cables auto-promote to auto=0 when m successfully drops on a new valid endpoint.	2026-05-16 13:17:25 +02:00
mAi	17e6b5e91c	feat(ui): cable endpoint replug — drag handles to a new target m can grab either end of a selected cable and drop it on a different port / device / IO marker. Mechanics: - Selected cable renders two .cable-handle circles at its endpoints (handle radius 7, filled in the cable's colour with a white halo + drop-shadow). Hidden unless the cable is selected so unrelated cables don't litter the canvas with grab points. - pointerdown on a handle calls startCableReplug; the module-level cableReplug = {cableID, end, x, y} drives renderCanvas to anchor the affected endpoint at the cursor in world coords. Pointermove keeps the line tracking; pointerup hit-tests the cursor via elementsFromPoint (skipping the cable-handle itself). - Drop target: port → PATCH {from\|to: {port_id}} device → PATCH {from\|to: {device_id}} IO → PATCH {from\|to: {io_id}} empty / same endpoint → cancel (no PATCH) - When the cable was auto=1 and the drop commits, the PATCH also sends promote=true so the server flips it to manual — m took control. - preventDefault + stopPropagation on the handle pointerdown so canvas panning / cable-line clicks don't interfere. Pointer capture survives the drag leaving the SVG bounds. CSS: .cable-handle gets grab cursor + drop-shadow; .replugging on the canvas-wrap promotes to grabbing during the gesture.	2026-05-16 13:11:33 +02:00
mAi	9107a9f7b2	merge: device resize handle (bottom-right corner) 10x10 handle on every device, drag to resize. Min 60x30. On pointerup, PATCH width/height + relayoutAllEdges so ports re-distribute. stopPropagation keeps the body drag separate from the handle drag. Works at any zoom.	2026-05-16 13:07:31 +02:00
mAi	89686d0c1f	feat(ui): bottom-right resize handle on devices m: 'I want the size of devices to be customizable. A resize function at the bottom right corner would be good.' - 10×10 SVG handle drawn at each device's bottom-right corner with class .device-resize-handle + cursor: nwse-resize. Subtle grey by default, darker on hover so m can find it without it dominating the rect. - startResize captures the pointer, stops propagation so the rect's pointerdown (= startDrag) doesn't also fire, and updates the local device.width / .height on every pointermove using svgPoint deltas — works at any zoom level via the same world-coord conversion the rest of the canvas uses. - Clamps to 60×30 minimum during the drag so the rect can't collapse. - On pointerup: PATCH /devices/:id with the new width + height, then relayoutAllEdges(deviceID) so ports on every edge redistribute to their i/(N+1) positions against the new dimensions. Right- and bottom-edge ports get the visible adjustment; top/left re-space too but their absolute positions don't change.	2026-05-16 12:59:51 +02:00
mAi	57a9154f18	merge: canvas zoom + pan (last of 6 polish tasks) state.view = {x,y,zoom} drives SVG viewBox. Zoom clamped 0.2-5x. - Wheel = zoom around cursor (Excalidraw-style) - Middle-drag or Space+drag = pan - 0 or Home = reset - Header: zoom % indicator + Fit button (bbox + 40px padding) - URL persists ?z=&px=&py= (cleaned when at default) - All inputs/hit-tests stay in world coords — no changes needed to port/cable/drag handlers	2026-05-16 12:10:28 +02:00
mAi	6c31802522	feat(ui): canvas zoom + pan via SVG viewBox m: wheel to zoom around the cursor, drag with middle-mouse / Space-held to pan, `0` or `Home` to reset, Fit button to frame all content. Implementation: - state.view = { x, y, zoom } drives the SVG viewBox via applyViewBox(). Base canvas is 2000×1500; viewBox = (view.x, view.y, 2000/zoom, 1500/zoom). - Zoom clamped to 0.2x..5x. wheelZoom captures the cursor's world coord before + after the zoom-step and shifts view.x/y so it stays under the cursor (Excalidraw-style cursor-anchored zoom). - startPan captures screen→world scale from getScreenCTM at pointerdown and converts pointer-move deltas into view.x/y updates — robust across zoom levels. Triggered by middle-mouse OR Space+drag. Releases pointer capture + persists the view on pointerup. - resetView (0 / Home) restores zoom=1, x=0, y=0. - fitToContent walks frames + devices + IO markers, computes their bbox with 40px padding, picks zoom = min(BASE_W/bw, BASE_H/bh), and centres the bbox inside the viewBox (compensating for aspect-ratio meet). - Header gets a "100%" zoom indicator + Fit button. URL persists view as ?z=1.200&px=…&py=… so reload returns to the same view. Because everything goes through viewBox (not CSS transform), svgPoint still maps screen pixels to world coords via getScreenCTM. Existing hit-tests, drag, port/cable placement all keep working unchanged.	2026-05-16 12:05:24 +02:00
mAi	46e8474c2b	merge: requirements UX — per-device primary + all-view in admin Device inspector gains a Requirements section + Requirement button pre-filled with the current device's id. The global Requirements section is removed from the left sidebar — legend + tools reclaim the space. All-requirements view moves into the admin modal as a 5th tab.	2026-05-16 12:00:32 +02:00
mAi	9aa395854d	feat(ui): requirements live in the device inspector + admin tab m wants 'this device connects to ...' declared from the device itself, not a global sidebar list. - Device inspector gets a '+ Requirement' button under its Requirements section. Click pre-fills the modal with from_device_id = this device, so m only picks the other endpoint + cable type + must/nice. - Existing requirement rows in the device inspector remain clickable — they jump to the requirement's own inspector pane. - New 5th admin tab 'Requirements' carries the all-projects-wide list with Edit + Delete actions per row and a single '+ Add requirement' entry point (uses the same modal). Edit/Add close the admin modal so the requirement modal isn't stacked on top. - Left sidebar 'Requirements' section + '+ Requirement' button removed. The legend + tools sections reclaim the freed real estate. renderRequirements() and the renderRequirements call site in render() deleted (no consumer left). #btn-add-requirement boot wiring removed.	2026-05-16 11:59:08 +02:00
mAi	f08c48e9b5	merge: admin modal — projects + cable types + device types + templates ⚙ button in header opens a tabbed modal: - Projects: list, rename name/drawing_name/description, delete with typed-name confirm. patchProject API helper added. - Cable types: global-scope banner, name + colour edit + delete (blocked on use) + add. - Device types: built-ins read-only with locked badge; project-custom name/kind/icon/description CRUD. Port-profile reshape deferred — flagged in the UI. - Setup templates: read-only with expanded member devices + requirements. Modal over full page — fits the no-build vanilla-JS shape. Verified on mDock (PATCH project rename + description round-trips).	2026-05-16 11:55:26 +02:00
mAi	6cd5925f4c	feat(ui): admin modal — projects + cable types + device types + templates Header gear ('⚙ Admin') opens a wide modal with four tabs: - Projects — list, rename, edit drawing_name + description, delete with typed-name confirm. Wires the existing PATCH /projects/:id and DELETE /projects/:id?confirm=<name> endpoints; renaming was previously only reachable via the API. - Cable types — full CRUD with the global-scope banner. Mirrors the legend's quick edit but in a tabular list, plus an inline "+ Add" form at the bottom. - Device types — built-ins listed read-only with a locked badge showing kind, description, and port profile (each port row tinted with the cable_type's colour). Project-custom types under the active project get editable name / kind / icon / description + Delete. Port-profile editing on custom types is still deferred (port-profile reshape will land in a follow-up). - Setup templates — read-only list of built-ins with member devices and connection requirements expanded under each. The modal re-fetches projects / cable types / setup templates on open so it reflects current state regardless of what m did via inspector panes while it was closed. Files: - index.html: ⚙ Admin button + #modal-admin dialog scaffold. - main.js: patchProject + createDeviceType/patchDeviceType/deleteDeviceType API helpers; openAdminModal + switchAdminTab + 4 render functions. - style.css: .admin-shell / .admin-tabs / .admin-row + state classes.	2026-05-16 11:51:05 +02:00
mAi	9773063008	merge: port editor in sidebar — type + edge + name; +Port retired Port inspector now has a Type dropdown (PATCH /ports/:id with type_id), keeps edge picker + label input + delete + back-link. Replaces the canvas-armed +Port tool with a sidebar 'Add port' form (reached via +Port button in the device inspector). Form fields: Type, Edge, Label with auto-default '<type> <next-index>' that stops auto-updating once m hand-edits. Submit → POST → relayout edge for even spacing → selection switches to the new port's editor. Port rows in the device inspector's list now click-to-select. Removed scaffolding: tool === 'port' branch, armPortTool, placePortAt, snapToDeviceEdge, .tool-port cursor CSS.	2026-05-16 11:45:25 +02:00
mAi	61bc1dcf43	feat(ui): port editor + add-port form in the sidebar inspector m: 'Add port' should be a sidebar form, not a two-step canvas gesture. - Port inspector gains a Type dropdown (read /api/cable-types via state.cableTypes, PATCH /ports/:id with type_id). Edge picker + label + delete from prior shift are unchanged. - New "Add port" form rendered from selection.kind === "port_new": Type / Edge / Label, Create + Cancel buttons. Default label is the next free index for the chosen type on this device ("HDMI 3" if two HDMIs already live there). Recomputes when m changes the type, but stops recomputing as soon as m hand-edits the label. - +Port in the device inspector now flips selection to port_new, rendering the form. Submit → POST → switch to the new port's editor. No second canvas click required. - Clicking a port row in the device inspector's port list selects that port and opens its editor (same surface as canvas-click). - "← <device name>" back-link in both port editor and add-port form jumps back to the device inspector. Removed: state.tool === "port" branch, armPortTool helper, placePortAt function, .tool-port CSS, state.portToolDevice / portToolTypeID. The canvas-armed +Port tool was the user-trip-wire perseus flagged; the sidebar form replaces it entirely. snapToDeviceEdge also removed — placePortAt was its only caller; the edgeCentre + portEdge + relayoutEdge trio fully owns port placement now. Port rows in the device inspector get a hover background + pointer cursor to read as clickable.	2026-05-16 11:40:45 +02:00
mAi	056777f1c1	merge: template-apply creates frame + grid-places devices inside ApplyTemplate now creates a frame named after the template ('Living Room' etc, suffixed on collision), computes a uniform grid (cols=min(ceil(sqrt(N)),4), rows=ceil(N/cols)), and places each device inside the frame with frame_id set. Frontend unchanged — activateProject re-hydrates the snapshot including the new frame. Tests cover frame creation + in-frame placement + name-collision suffix. Verified on mDock: Living Room template → frame (200,200, 294×200) with TV/Soundbar at row 0 and ChromeCast wrapping to row 1.	2026-05-16 11:35:25 +02:00