mAi
2cbefd3146
Walks every cable's polyline, keys each vertex by stable identity
(port:N / device:N / io:N / clamp:N), and accumulates cables by
undirected segment-key. Segments with ≥ 2 cables get a thick striped
overlay line in a new <g id="canvas-bundles"> layer, drawn on top of
the individual cable lines so the shared portion reads as a bundle
while endpoints still fan out to each cable's port colour.
- Stripe width: 2 + N px, capped at 12 (design v5 §11.3).
- Stripe order: by distinct cable-type count (ties by id) per
v5 §11.9 q4.
- Implementation: SVG <linearGradient> with hard stops oriented
perpendicular to the segment, registered in a new
<defs id="canvas-defs"> on every render. Bundle <line> uses
stroke="url(#bundle-grad-…)".
- <title> child lists the cable types and total cable count for
hover tooltips.
- Clamp render gains a ×N badge when ≥ 2 cables route through it,
derived independently from state.cableClamps.
Helper rename: cableVertices → cableVerticesWithKeys (returns
{vertices, keys}). The keys array also feeds the shared-segment
detection — keeps the geometry + identity tracking in one pass.
252 lines
10 KiB
HTML
252 lines
10 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-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>
|
|
|
|
<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" id="tool-clamp" class="btn btn-tiny" data-tool="clamp" title="Click canvas to drop a clamp. Cables can then route through it.">+ Clamp</button></li>
|
|
<li><button type="button" id="tool-req" class="btn btn-tiny" data-tool="req">Drag req A→B</button></li>
|
|
<li><button type="button" id="tool-cable" class="btn btn-tiny" data-tool="cable" title="Click a port to start, then click another port / device / IO marker">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">
|
|
<defs id="canvas-defs"></defs>
|
|
<g id="canvas-frames"></g>
|
|
<g id="canvas-devices"></g>
|
|
<g id="canvas-ports"></g>
|
|
<g id="canvas-cables"></g>
|
|
<g id="canvas-bundles"></g>
|
|
<g id="canvas-clamps"></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>
|
|
|
|
<!-- New device (slice 4: type-aware) -->
|
|
<dialog id="modal-new-device" class="modal" aria-labelledby="nd-title">
|
|
<form method="dialog" id="form-new-device">
|
|
<h2 id="nd-title">New device</h2>
|
|
<label class="field">
|
|
<span>Type</span>
|
|
<select id="nd-type" name="type_id" required>
|
|
<option value="">Loading…</option>
|
|
</select>
|
|
</label>
|
|
<label class="field">
|
|
<span>Name</span>
|
|
<input type="text" name="name" id="nd-name" required autocomplete="off" />
|
|
</label>
|
|
<p class="form-error" id="nd-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 connection requirement (slice 5) -->
|
|
<dialog id="modal-requirement" class="modal" aria-labelledby="rq-title">
|
|
<form method="dialog" id="form-requirement">
|
|
<h2 id="rq-title">New requirement</h2>
|
|
<label class="field">
|
|
<span>From device</span>
|
|
<select id="rq-from" name="from_device_id" required></select>
|
|
</label>
|
|
<label class="field">
|
|
<span>To device</span>
|
|
<select id="rq-to" name="to_device_id" required></select>
|
|
</label>
|
|
<label class="field">
|
|
<span>Cable type</span>
|
|
<select id="rq-cable" name="preferred_cable_type_id">
|
|
<option value="">— solver picks —</option>
|
|
</select>
|
|
</label>
|
|
<label class="field" style="flex-direction: row; align-items: center; gap: 8px;">
|
|
<input type="checkbox" id="rq-must" name="must_connect" checked />
|
|
<span style="font-size: 13px; color: var(--text);">Must connect (solver hard-requires this link)</span>
|
|
</label>
|
|
<label class="field">
|
|
<span>Notes</span>
|
|
<textarea name="notes" rows="2"></textarea>
|
|
</label>
|
|
<p class="form-error" id="rq-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>
|
|
|
|
<!-- Solve preview-diff (slice 6) -->
|
|
<dialog id="modal-solve" class="modal modal-wide" aria-labelledby="sv-title">
|
|
<div style="padding: 16px;">
|
|
<h2 id="sv-title">Solve preview</h2>
|
|
<div id="sv-body" class="sv-body"></div>
|
|
<div class="actions" style="margin-top: 12px;">
|
|
<button type="button" class="btn btn-primary" id="sv-apply">Apply</button>
|
|
<button type="button" class="btn" data-close>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Apply template (slice 6) -->
|
|
<dialog id="modal-template" class="modal modal-wide" aria-labelledby="tp-title">
|
|
<form method="dialog" id="form-template">
|
|
<h2 id="tp-title">Apply setup template</h2>
|
|
<label class="field">
|
|
<span>Template</span>
|
|
<select id="tp-select" required></select>
|
|
</label>
|
|
<div id="tp-preview" class="tp-preview"></div>
|
|
<p class="form-error" id="tp-error" hidden></p>
|
|
<div class="actions">
|
|
<button type="submit" class="btn btn-primary">Apply</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>
|
|
|
|
<!-- 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>
|