Issue 1 — cursor lies about armed tool. .svg-draggable { cursor: grab }
on frame/device rects beat the .canvas-wrap.tool-device #canvas {
cursor: crosshair } rule because element-level wins over descendant.
m saw "grab" hovering a frame with +Dev armed and thought the tool was
broken even though clicks routed correctly after the previous fix. Add
a descendant rule with !important so tool-armed wraps any child cursor:
.canvas-wrap.tool-frame #canvas *,
.canvas-wrap.tool-device #canvas * { cursor: crosshair !important; }
Issue 2 — stale browser cache after each redeploy. http.FileServerFS
served embedded assets with no Cache-Control header, so browsers held
on to the previous main.js/style.css until hard-reload. New noCache
middleware on the static handler emits Cache-Control: no-cache. Note:
embedded FS files have zero ModTime, so http.FileServer suppresses
Last-Modified — every fetch is a fresh 200 rather than a 304. Fine at
~30KB of JS+CSS, and fixes the staleness problem completely.
Middleware is wrapped only around the static handler. /api/* responses
write their own headers and aren't touched.
Verified locally:
curl -I /main.js → Cache-Control: no-cache
curl -I /style.css → Cache-Control: no-cache + contains the new rule
curl -I /api/healthz → unaffected (no Cache-Control from us)
go test -race ./... still green.
onCanvasPointerDown returned early whenever the click landed on a
[data-device-id] or [data-frame-id] element so the per-element drag
handlers wouldn't get hijacked. Problem: this early-return fired BEFORE
the tool check, so clicking +Dev inside an existing frame never reached
placeDeviceAt().
Reordered: tool-armed branches run first and short-circuit. Only when
no tool is armed does the "click started on a child element — leave it
alone" guard kick in. End behaviour:
- +Dev anywhere (incl. inside a frame) drops a device. frame_id
auto-resolves via the existing frameAt() point-in-rect.
- +Frm anywhere (incl. inside an existing frame) starts a rubber-band;
rare but not harmful.
- No tool armed: clicking a device/frame still goes to its own handler
(drag / select). Clicking empty canvas still clears selection.
Hand-tested via the served /main.js + the equivalent backend POST/PATCH
sequence: device-in-frame, device-outside, device-drag, frame-drag with
cascaded device patches — all work.
Renders the slice-2 backend on the empty canvas from slice 1.
Canvas:
- Frames render as dashed-stroke rects with top-left label, slightly
tinted fill. Devices render as solid-stroke rects with centred label
in device.color.
- Selection halo via .selected class (stroke-width bump).
- Empty-state hint disappears once any geometry exists.
Tools (left sidebar + keyboard):
- F / + Frame — rubber-band rect on the canvas. <80×60 cancels. On
release, inline foreignObject namer → POST /api/projects/:pid/frames.
- D / + Device — single click places a 100×35 device centred at the
click. Inline namer → POST devices. Drop-point determines initial
frame_id via point-in-rect against all frames (smallest bbox wins).
- Esc cancels active tool / inline namer / clears selection.
Drag (pointer events + svg getScreenCTM):
- Devices: drag updates x/y live via transform, persists via
PATCH .../devices/:id on pointerup. Also recomputes frame_id from
drop point and includes "frame_id": null|<id> if it changed.
- Frames: dragging a frame moves its contained devices visually too;
on pointerup, single PATCH for the frame + one PATCH per moved device.
Children-batch is computed at pointerdown and only sent on release —
no per-pointermove network traffic.
Inspector:
- Frame selection: name (debounced rename), x/y/w/h, device count,
Delete button (confirm prompt — devices keep existing, frame_id → NULL
via the schema's ON DELETE SET NULL).
- Device selection: name (debounced rename), colour picker
(change-event PATCH, no debounce), x/y/w/h, current frame, Delete.
- Background click clears selection.
devicePatch wire format uses tri-state frame_id: key absent = leave,
key:null = clear, key:<int> = move. Frontend uses `null` explicitly
when a device drops outside all frames.
