mAi
a3f0586296
Slice 3 frontend.
+ IO tool (keyboard `I`):
- Single-click on canvas places a 30x30 diamond (rotated <rect>) at the
point, with the Power-cable_type colour fill (red-ish).
- Inline namer prompts for a label; empty → server defaults to "IO".
- Drop-point determines initial frame_id via the existing frameAt()
point-in-rect logic, same as devices.
Render:
- io_markers come from snap.io_markers in the snapshot loader. Each
renders as a <rect> with rotate(45) around its centre + a small text
label below the diamond. Selection halo on stroke-width.
- Drag is the same pointer-event flow as devices; on pointerup, PATCH
x,y + recompute frame_id from the new centre. Cross-frame moves
update frame_id with explicit null on the wire when leaving all frames.
- Frame-drag now also relocates contained IO markers (mirrors the
device-cascade pattern). Single PATCH per IO marker on release.
Cable-type inspector:
- Clicking a legend row now sets state.selection = {kind:"cable_type", id}
in addition to toggling activeTypeId. The inspector renders the cable
type's details (name + colour, both editable, with the
"shared across projects" banner from v3 §7), a used-by counter (0
until slice 7 ships cables), and a Delete button that surfaces the
RESTRICT in_use_by_cables count from the server.
- Debounced rename via the existing bindDebouncedRename helper.
Inspector frame view picks up an "IO" count alongside the device count.
Background click + Esc clear the selection (existing behaviour, now
covers cable_type too).
Hand-tested via the API equivalents: 3 IO markers created (free, in
frame, default-label), PATCH x,y + frame_id-to-null all work, cross-
project frame_id rejected with 400, DELETE 9999 returns 404. Snapshot
shape post-slice-3: {frames, devices, io_markers, cable_types} all
populated, ports/cables/bundles still [].
138 lines
5.0 KiB
HTML
138 lines
5.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>mCables</title>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<span class="brand">mCables</span>
|
|
<div class="project-picker">
|
|
<label for="project-select" class="sr-only">Project</label>
|
|
<select id="project-select" aria-label="Active project">
|
|
<option value="">— no project —</option>
|
|
</select>
|
|
<button type="button" id="btn-new-project" class="btn">+ Project</button>
|
|
<button type="button" id="btn-delete-project" class="btn btn-danger" hidden>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<div class="topbar-spacer"></div>
|
|
<button type="button" id="btn-export" class="btn" disabled title="Slice 5">
|
|
Export
|
|
</button>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="sidebar" aria-label="Tools">
|
|
<section class="legend">
|
|
<h2 class="sidebar-heading">Cable types</h2>
|
|
<ul id="legend-list" class="legend-list"></ul>
|
|
<button type="button" id="btn-add-type" class="btn btn-tiny">+ Type</button>
|
|
</section>
|
|
<section class="tools">
|
|
<h2 class="sidebar-heading">Tools</h2>
|
|
<ul class="tool-list">
|
|
<li><button type="button" id="tool-frame" class="btn btn-tiny" data-tool="frame">+ Frame</button></li>
|
|
<li><button type="button" id="tool-device" class="btn btn-tiny" data-tool="device">+ Device</button></li>
|
|
<li><button type="button" id="tool-io" class="btn btn-tiny" data-tool="io">+ IO</button></li>
|
|
<li><button type="button" class="btn btn-tiny" disabled title="Slice 7">Draw cable</button></li>
|
|
</ul>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="canvas-wrap" aria-label="Diagram">
|
|
<svg id="canvas" viewBox="0 0 2000 1500" preserveAspectRatio="xMidYMid meet">
|
|
<g id="canvas-frames"></g>
|
|
<g id="canvas-devices"></g>
|
|
<g id="canvas-ports"></g>
|
|
<g id="canvas-cables"></g>
|
|
<g id="canvas-io"></g>
|
|
</svg>
|
|
<p id="empty-hint" class="empty-hint">
|
|
Pick or create a project to start drawing.
|
|
</p>
|
|
</section>
|
|
|
|
<aside class="inspector" aria-label="Inspector">
|
|
<h2 class="sidebar-heading">Inspector</h2>
|
|
<div id="inspector-body">
|
|
<p class="muted">Nothing selected.</p>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<!-- New Project modal -->
|
|
<dialog id="modal-new-project" class="modal" aria-labelledby="np-title">
|
|
<form method="dialog" id="form-new-project">
|
|
<h2 id="np-title">New project</h2>
|
|
<label class="field">
|
|
<span>Name</span>
|
|
<input type="text" name="name" required autocomplete="off" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Drawing name</span>
|
|
<input type="text" name="drawing_name" autocomplete="off"
|
|
placeholder="auto: <name>.excalidraw" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Description</span>
|
|
<textarea name="description" rows="2"></textarea>
|
|
</label>
|
|
<p class="form-error" id="np-error" hidden></p>
|
|
<div class="actions">
|
|
<button type="submit" class="btn btn-primary">Create</button>
|
|
<button type="button" class="btn" data-close>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<!-- New/Edit Cable Type modal -->
|
|
<dialog id="modal-cable-type" class="modal" aria-labelledby="ct-title">
|
|
<form method="dialog" id="form-cable-type">
|
|
<h2 id="ct-title">Cable type</h2>
|
|
<p class="banner">
|
|
Cable types are shared across all projects. Renaming or recolouring
|
|
affects every project.
|
|
</p>
|
|
<label class="field">
|
|
<span>Name</span>
|
|
<input type="text" name="name" required autocomplete="off" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Colour</span>
|
|
<input type="color" name="color" value="#1971c2" />
|
|
</label>
|
|
<p class="form-error" id="ct-error" hidden></p>
|
|
<div class="actions">
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
<button type="button" class="btn" data-close>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<!-- Delete Project confirm -->
|
|
<dialog id="modal-delete-project" class="modal" aria-labelledby="dp-title">
|
|
<form method="dialog" id="form-delete-project">
|
|
<h2 id="dp-title">Delete project</h2>
|
|
<p>
|
|
This will cascade-delete every frame, device, port, cable, IO marker
|
|
and bundle in the project. <strong>Cable types are global and are not affected.</strong>
|
|
</p>
|
|
<p>Type the project name to confirm:</p>
|
|
<input type="text" name="confirm" required autocomplete="off"
|
|
id="dp-confirm-input" />
|
|
<p class="form-error" id="dp-error" hidden></p>
|
|
<div class="actions">
|
|
<button type="submit" class="btn btn-danger">Delete</button>
|
|
<button type="button" class="btn" data-close>Cancel</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|