Initial commit — wiring diagram maker with full feature set
- FastAPI + SQLite backend with routers for diagrams, devices, wires, bundles, connectors, export, and Octopart/Nexar search - Konva.js canvas: ortho/direct/curved routing, wire crossings, harness mode, snap-to-grid, multi-select, drag, resize, undo - Wire features: color/stripe, twisted pair helix, shielded glow, gauge size label, multi-core bundle grouping, length/unit tracking - Device library: connector, terminal block, cable, splice, label, group, relay, fuse, switch, component with custom connector support - Exports: BOM CSV, assembly TXT, JSON, formboard layout, PNG image - Auto-migration for schema changes via ALTER TABLE at startup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
/* ── Reset & base ─────────────────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body, #app { height: 100%; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px; }
|
||||
body { background: #12121c; color: #c8ccee; }
|
||||
|
||||
/* ── Layout ───────────────────────────────────────────────────────────────── */
|
||||
#app { display: flex; flex-direction: column; }
|
||||
|
||||
#toolbar {
|
||||
display: flex; align-items: center; gap: 8px; padding: 0 12px;
|
||||
height: 48px; background: #0e0e1a; border-bottom: 1px solid #2a2a44;
|
||||
flex-shrink: 0; z-index: 10;
|
||||
}
|
||||
.toolbar-left { display: flex; align-items: center; gap: 10px; min-width: 220px; }
|
||||
.toolbar-center { display: flex; align-items: center; gap: 5px; flex: 1; justify-content: center; flex-wrap: wrap; }
|
||||
.toolbar-right { display: flex; align-items: center; gap: 8px; min-width: 180px; justify-content: flex-end; }
|
||||
.toolbar-label { font-size: 11px; color: #555577; white-space: nowrap; }
|
||||
|
||||
#mode-indicator {
|
||||
text-align: center; font-size: 11px; color: #00cc88; background: #0a1a14;
|
||||
border-bottom: 1px solid #1a3a2a; height: 22px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
#main { display: flex; flex: 1; overflow: hidden; }
|
||||
|
||||
/* ── Sidebars ─────────────────────────────────────────────────────────────── */
|
||||
#left-sidebar {
|
||||
width: 240px; flex-shrink: 0; background: #14142a;
|
||||
border-right: 1px solid #2a2a44; display: flex; flex-direction: column; overflow: hidden;
|
||||
}
|
||||
#right-sidebar {
|
||||
width: 248px; flex-shrink: 0; background: #14142a;
|
||||
border-left: 1px solid #2a2a44; overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section { display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.section-header {
|
||||
padding: 7px 10px; font-size: 11px; font-weight: 600; letter-spacing: .05em;
|
||||
text-transform: uppercase; color: #6666aa; background: #10101e;
|
||||
border-bottom: 1px solid #222238; display: flex; align-items: center; justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Sidebar tabs ─────────────────────────────────────────────────────────── */
|
||||
.tab-bar {
|
||||
display: flex; border-bottom: 1px solid #222238; background: #10101e; flex-shrink: 0;
|
||||
}
|
||||
.sidebar-tab {
|
||||
flex: 1; padding: 6px 4px; font-size: 11px; font-weight: 500; text-align: center;
|
||||
background: transparent; border: none; border-radius: 0; color: #555577;
|
||||
border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s;
|
||||
}
|
||||
.sidebar-tab:hover { color: #9999cc; background: #18182e; }
|
||||
.sidebar-tab.active { color: #88aaff; border-bottom-color: #5577dd; }
|
||||
|
||||
.tab-panel { display: flex; flex-direction: column; }
|
||||
|
||||
/* ── Diagram list ─────────────────────────────────────────────────────────── */
|
||||
#diagram-list { padding: 4px; }
|
||||
.diagram-item {
|
||||
padding: 6px 8px; border-radius: 5px; cursor: pointer;
|
||||
display: flex; justify-content: space-between; align-items: baseline;
|
||||
border: 1px solid transparent; margin-bottom: 2px;
|
||||
}
|
||||
.diagram-item:hover { background: #1e1e3a; border-color: #3a3a5a; }
|
||||
.diagram-item.active { background: #1a2a4a; border-color: #4466aa; }
|
||||
.di-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-size: 12px; cursor: pointer; }
|
||||
.di-date { font-size: 10px; color: #555577; margin-left: 6px; white-space: nowrap; cursor: pointer; }
|
||||
.di-del-btn {
|
||||
flex-shrink: 0; opacity: 0; padding: 1px 5px; font-size: 13px; line-height: 1;
|
||||
background: transparent; border-color: transparent; color: #ff6666;
|
||||
transition: opacity .15s; margin-left: 4px;
|
||||
}
|
||||
.diagram-item:hover .di-del-btn { opacity: 1; }
|
||||
.di-del-btn:hover { background: #3a1414; border-color: #aa3333; }
|
||||
|
||||
/* ── Device library ───────────────────────────────────────────────────────── */
|
||||
#device-library { padding: 6px; display: flex; flex-direction: column; gap: 3px; }
|
||||
.lib-item {
|
||||
display: flex; align-items: center; gap: 8px; padding: 7px 8px;
|
||||
border: 1px solid #2a2a44; border-radius: 5px; cursor: grab; user-select: none;
|
||||
background: #18182e; transition: background .1s, border-color .1s;
|
||||
}
|
||||
.lib-item:hover { background: #22224a; border-color: #5555aa; }
|
||||
.lib-item:active { cursor: grabbing; }
|
||||
.lib-icon { font-size: 16px; width: 22px; text-align: center; }
|
||||
.lib-label { font-size: 12px; }
|
||||
|
||||
/* ── Connector library ────────────────────────────────────────────────────── */
|
||||
.lib-conn-item {
|
||||
padding: 7px 8px; border: 1px solid #1e1e38; border-radius: 5px; cursor: grab;
|
||||
background: #141428; margin-bottom: 3px; user-select: none; transition: background .1s, border-color .1s;
|
||||
}
|
||||
.lib-conn-item:hover { background: #1e1e40; border-color: #4444aa; }
|
||||
.lib-conn-item:active { cursor: grabbing; }
|
||||
.conn-name { font-size: 12px; font-weight: 500; color: #bbc0ee; }
|
||||
.conn-meta { font-size: 10px; color: #556688; margin-top: 1px; }
|
||||
|
||||
/* ── Canvas area ──────────────────────────────────────────────────────────── */
|
||||
#canvas-area { flex: 1; position: relative; overflow: hidden; }
|
||||
#canvas-container {
|
||||
width: 100%; height: 100%;
|
||||
background-color: #131320;
|
||||
background-image: radial-gradient(circle, #2e2e50 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
#canvas-container.wire-mode { cursor: crosshair; }
|
||||
|
||||
#canvas-placeholder {
|
||||
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
|
||||
pointer-events: none; z-index: 5;
|
||||
}
|
||||
.placeholder-content { text-align: center; color: #44446a; pointer-events: all; }
|
||||
.placeholder-content h2 { font-size: 28px; margin-bottom: 10px; }
|
||||
.placeholder-content p { margin-bottom: 16px; }
|
||||
|
||||
/* ── Buttons ──────────────────────────────────────────────────────────────── */
|
||||
button {
|
||||
background: #22223a; border: 1px solid #3a3a5a; color: #c0c4e8;
|
||||
padding: 5px 11px; border-radius: 5px; cursor: pointer; font-size: 12px;
|
||||
transition: background .12s, border-color .12s; white-space: nowrap;
|
||||
}
|
||||
button:hover { background: #2e2e54; border-color: #5555aa; }
|
||||
button:active { background: #1a1a3a; }
|
||||
|
||||
.mode-btn { padding: 5px 12px; }
|
||||
.mode-btn.active { background: #1e3a6a; border-color: #4488dd; color: #88bbff; }
|
||||
|
||||
.route-btn { padding: 4px 10px; font-size: 11px; }
|
||||
.route-btn.active { background: #1a2a4a; border-color: #336699; color: #77aaee; }
|
||||
|
||||
#btn-harness.active { background: #1a2a1a; border-color: #336633; color: #88ee88; }
|
||||
|
||||
.danger-btn { color: #ff6666; border-color: #662222; }
|
||||
.danger-btn:hover { background: #3a1414; border-color: #aa3333; }
|
||||
|
||||
.app-title { font-weight: 700; font-size: 15px; color: #88aaff; white-space: nowrap; }
|
||||
|
||||
.diagram-name-input {
|
||||
background: #1a1a2e; border: 1px solid #2a2a44; color: #c8ccee;
|
||||
padding: 4px 8px; border-radius: 4px; font-size: 13px; width: 180px;
|
||||
}
|
||||
.diagram-name-input:focus { outline: none; border-color: #5566aa; }
|
||||
|
||||
/* Export dropdown */
|
||||
.export-wrap { position: relative; }
|
||||
#export-menu {
|
||||
display: none; position: absolute; right: 0; top: calc(100% + 4px);
|
||||
background: #1a1a2e; border: 1px solid #3a3a5a; border-radius: 6px;
|
||||
min-width: 170px; z-index: 100; overflow: hidden; flex-direction: column;
|
||||
}
|
||||
#export-menu.open { display: flex; }
|
||||
#export-menu button { border: none; border-radius: 0; text-align: left; padding: 8px 14px; border-bottom: 1px solid #222238; }
|
||||
#export-menu button:last-child { border-bottom: none; }
|
||||
|
||||
/* Saved indicator */
|
||||
#saved-indicator {
|
||||
font-size: 11px; color: #4caa77; background: #0f2a1a;
|
||||
border: 1px solid #1e4a2a; padding: 4px 10px; border-radius: 4px;
|
||||
opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap;
|
||||
}
|
||||
#saved-indicator.show { opacity: 1; }
|
||||
|
||||
/* ── Octopart search results ──────────────────────────────────────────────── */
|
||||
#octopart-results {
|
||||
margin-top: 5px; border: 1px solid #2a2a44; border-radius: 4px;
|
||||
background: #0e0e1e; max-height: 220px; overflow-y: auto;
|
||||
}
|
||||
.op-result {
|
||||
padding: 7px 9px; cursor: pointer; border-bottom: 1px solid #1a1a30;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.op-result:last-child { border-bottom: none; }
|
||||
.op-result:hover { background: #1a1a38; }
|
||||
.op-mpn { font-size: 11px; font-weight: 600; color: #c8ccee; }
|
||||
.op-mfr { font-size: 10px; color: #7788aa; margin-top: 1px; }
|
||||
.op-desc { font-size: 10px; color: #4a5566; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.op-ds { font-size: 10px; color: #4466aa; margin-top: 1px; }
|
||||
.op-no-results { padding: 10px; font-size: 11px; color: #444466; text-align: center; }
|
||||
#btn-octopart-search.searching { opacity: 0.5; pointer-events: none; }
|
||||
|
||||
/* ── Properties panel ─────────────────────────────────────────────────────── */
|
||||
.prop-row { padding: 7px 10px; border-bottom: 1px solid #1e1e36; }
|
||||
.prop-row label {
|
||||
display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .06em; color: #555577; margin-bottom: 4px;
|
||||
}
|
||||
.prop-row input[type="text"], .prop-row input[type="number"],
|
||||
.prop-row select, .prop-row textarea {
|
||||
width: 100%; background: #0e0e1e; border: 1px solid #2a2a44;
|
||||
color: #c0c4e8; padding: 5px 7px; border-radius: 4px; font-size: 12px; font-family: inherit;
|
||||
}
|
||||
.prop-row input:focus, .prop-row select:focus, .prop-row textarea:focus { outline: none; border-color: #5566aa; }
|
||||
.prop-value { font-size: 12px; color: #99aacc; }
|
||||
.prop-value.mono { font-family: monospace; }
|
||||
|
||||
.color-swatch { width: 36px; height: 28px; padding: 2px; cursor: pointer; border-radius: 4px; flex-shrink: 0; border: 1px solid #3a3a5a; }
|
||||
|
||||
/* Pin table */
|
||||
.pin-table { width: 100%; border-collapse: collapse; font-size: 11px; }
|
||||
.pin-table th { text-align: left; padding: 3px 4px; color: #555577; font-weight: 600; border-bottom: 1px solid #222238; }
|
||||
.pin-table td { padding: 2px 4px; border-bottom: 1px solid #1a1a30; vertical-align: middle; }
|
||||
.pin-table .pin-side { color: #444466; font-size: 10px; }
|
||||
.pin-input { width: 100%; background: #0e0e1e; border: 1px solid #2a2a44; color: #c0c4e8; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 11px; }
|
||||
.pin-side-select { width: 100%; background: #0e0e1e; border: 1px solid #2a2a44; color: #c0c4e8; padding: 2px 3px; border-radius: 3px; font-size: 11px; cursor: pointer; }
|
||||
|
||||
/* ── Connector library extras ─────────────────────────────────────────────── */
|
||||
.lib-section-header {
|
||||
font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
|
||||
color: #555577; padding: 8px 8px 3px; border-top: 1px solid #1a1a30; margin-top: 4px;
|
||||
}
|
||||
.lib-section-header:first-child { border-top: none; margin-top: 0; }
|
||||
|
||||
.conn-item-body { flex: 1; min-width: 0; }
|
||||
.conn-custom-badge {
|
||||
display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .06em;
|
||||
text-transform: uppercase; background: #2a1a4a; color: #9966ee;
|
||||
border: 1px solid #4422aa; border-radius: 3px; padding: 0 4px; vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.lib-conn-item { display: flex; align-items: center; gap: 6px; }
|
||||
.conn-edit-btn {
|
||||
flex-shrink: 0; opacity: 0; padding: 3px 6px; font-size: 12px;
|
||||
background: #1e1e3a; border-color: #3a3a5a; transition: opacity .15s;
|
||||
}
|
||||
.lib-conn-item:hover .conn-edit-btn { opacity: 1; }
|
||||
.conn-edit-btn:hover { background: #2a2a5a; border-color: #6666aa; }
|
||||
|
||||
/* ── Modal ───────────────────────────────────────────────────────────────── */
|
||||
#connector-modal {
|
||||
position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 1000;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.modal-box {
|
||||
background: #16162a; border: 1px solid #3a3a5a; border-radius: 8px;
|
||||
width: 480px; max-width: 94vw; max-height: 86vh;
|
||||
display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.7);
|
||||
}
|
||||
.modal-header {
|
||||
padding: 14px 18px 12px; border-bottom: 1px solid #222238; flex-shrink: 0;
|
||||
}
|
||||
.modal-header h3 { font-size: 15px; font-weight: 600; color: #c8ccee; }
|
||||
.modal-body {
|
||||
padding: 14px 18px; overflow-y: auto; flex: 1;
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
}
|
||||
.modal-footer {
|
||||
padding: 10px 18px; border-top: 1px solid #222238;
|
||||
display: flex; align-items: center; gap: 8px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cm-label {
|
||||
display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
|
||||
letter-spacing: .06em; color: #555577; margin-bottom: 4px;
|
||||
}
|
||||
.cm-input {
|
||||
width: 100%; background: #0e0e1e; border: 1px solid #2a2a44;
|
||||
color: #c0c4e8; padding: 6px 8px; border-radius: 4px; font-size: 12px; font-family: inherit;
|
||||
}
|
||||
.cm-input:focus { outline: none; border-color: #5566aa; }
|
||||
.cm-row { display: flex; flex-direction: column; }
|
||||
.cm-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
|
||||
#cm-pin-labels {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
|
||||
max-height: 220px; overflow-y: auto; padding: 4px 0;
|
||||
}
|
||||
.pin-label-row { display: flex; align-items: center; gap: 5px; }
|
||||
.pin-idx {
|
||||
width: 22px; text-align: right; flex-shrink: 0;
|
||||
font-size: 10px; font-weight: 600; color: #555577; font-family: monospace;
|
||||
}
|
||||
.pin-label-input {
|
||||
flex: 1; background: #0e0e1e; border: 1px solid #222238;
|
||||
color: #c0c4e8; padding: 4px 6px; border-radius: 3px; font-size: 11px; font-family: monospace;
|
||||
}
|
||||
.pin-label-input:focus { outline: none; border-color: #5566aa; }
|
||||
|
||||
.btn-primary {
|
||||
background: #1e3a6a; border-color: #4488dd; color: #88bbff; font-weight: 600;
|
||||
}
|
||||
.btn-primary:hover { background: #264a8a; border-color: #66aaff; }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
/* Pin remove button */
|
||||
.pin-del-btn {
|
||||
padding: 0 4px; font-size: 12px; line-height: 1.4;
|
||||
background: transparent; border-color: transparent; color: #ff6666;
|
||||
opacity: 0; transition: opacity .15s;
|
||||
}
|
||||
.pin-table tr:hover .pin-del-btn { opacity: 1; }
|
||||
.pin-del-btn:hover { background: #3a1414; border-color: #aa3333; }
|
||||
|
||||
/* Wire drag cursor hint */
|
||||
#canvas-container.wire-drag { cursor: grabbing; }
|
||||
|
||||
/* ── Context menu ─────────────────────────────────────────────────────────── */
|
||||
#ctx-menu {
|
||||
position: fixed; z-index: 9000; display: none;
|
||||
background: #1a1a2e; border: 1px solid #3a3a66; border-radius: 6px;
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,.55); padding: 4px 0; min-width: 170px;
|
||||
user-select: none;
|
||||
}
|
||||
#ctx-menu.open { display: block; }
|
||||
.ctx-item {
|
||||
padding: 7px 14px; font-size: 12px; color: #c0c4e8; cursor: pointer;
|
||||
display: flex; align-items: center; gap: 8px; white-space: nowrap;
|
||||
}
|
||||
.ctx-item:hover { background: #2a2a50; color: #fff; }
|
||||
.ctx-item.danger { color: #dd6666; }
|
||||
.ctx-item.danger:hover { background: #3a1414; color: #ff8888; }
|
||||
.ctx-sep { height: 1px; background: #2a2a44; margin: 4px 0; }
|
||||
|
||||
/* Misc */
|
||||
input[type="checkbox"] { accent-color: #5588dd; width: 14px; height: 14px; cursor: pointer; }
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #2a2a44; border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #3a3a66; }
|
||||
.muted { color: #444466; }
|
||||
.small { font-size: 11px; }
|
||||
.sep { width: 1px; height: 22px; background: #2a2a44; margin: 0 3px; }
|
||||
@@ -0,0 +1,405 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WireDraw — Wiring Diagram Maker</title>
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
<!-- ── Toolbar ──────────────────────────────────────────────────────────── -->
|
||||
<header id="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<span class="app-title">⚡ WireDraw</span>
|
||||
<input id="diagram-name" type="text" class="diagram-name-input" placeholder="Diagram name…">
|
||||
</div>
|
||||
|
||||
<div class="toolbar-center">
|
||||
<!-- Mode -->
|
||||
<button id="btn-select" class="mode-btn active" title="Select mode (S)">▸ Select</button>
|
||||
<button id="btn-wire" class="mode-btn" title="Draw wire: drag from pin to pin (W)">∿ Wire</button>
|
||||
<div class="sep"></div>
|
||||
<!-- Routing -->
|
||||
<span class="toolbar-label">Route:</span>
|
||||
<button id="btn-route-ortho" class="route-btn active" title="Orthogonal (right-angle) routing">⌐ Ortho</button>
|
||||
<button id="btn-route-direct" class="route-btn" title="Direct (straight line) routing">⤢ Direct</button>
|
||||
<button id="btn-route-curved" class="route-btn" title="Curved (smooth bezier) routing">∿ Curved</button>
|
||||
<div class="sep"></div>
|
||||
<!-- Actions -->
|
||||
<button id="btn-snap" title="Toggle grid snap (G)" class="snap-btn">⊹ Snap</button>
|
||||
<button id="btn-harness" title="Toggle harness view (H)">⌇ Harness</button>
|
||||
<button id="btn-fit" title="Fit canvas to devices (F)">⊞ Fit</button>
|
||||
<button id="btn-duplicate" title="Duplicate selected (Ctrl+D)">⊕ Dupe</button>
|
||||
<button id="btn-undo" title="Undo (Ctrl+Z)">↩ Undo</button>
|
||||
<button id="btn-delete" class="danger-btn" title="Delete selected (Del)">✕ Delete</button>
|
||||
</div>
|
||||
|
||||
<div class="toolbar-right">
|
||||
<div id="saved-indicator">✓ Saved</div>
|
||||
<div class="export-wrap">
|
||||
<button id="export-toggle">Export ▾</button>
|
||||
<div id="export-menu">
|
||||
<button id="btn-bom">📋 BOM (CSV)</button>
|
||||
<button id="btn-assembly">📄 Assembly (TXT)</button>
|
||||
<button id="btn-json">{ } JSON</button>
|
||||
<button id="btn-img">🖼 Image (PNG)</button>
|
||||
<button id="btn-formboard">📐 Formboard (1:1)</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ── Mode bar ─────────────────────────────────────────────────────────── -->
|
||||
<div id="mode-indicator"></div>
|
||||
|
||||
<!-- ── Main ─────────────────────────────────────────────────────────────── -->
|
||||
<div id="main">
|
||||
|
||||
<!-- Left sidebar -->
|
||||
<aside id="left-sidebar">
|
||||
<!-- Diagram list -->
|
||||
<div class="sidebar-section" style="flex-shrink:0">
|
||||
<div class="section-header">
|
||||
Diagrams
|
||||
<button id="btn-new" title="New diagram" style="padding:2px 8px;font-size:16px;line-height:1">+</button>
|
||||
</div>
|
||||
<div id="diagram-list" style="overflow-y:auto;max-height:180px"></div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs: Devices / Connectors -->
|
||||
<div class="tab-bar">
|
||||
<button class="sidebar-tab active" data-tab="devices">Devices</button>
|
||||
<button class="sidebar-tab" data-tab="connectors">Connector Library</button>
|
||||
</div>
|
||||
|
||||
<!-- Devices panel -->
|
||||
<div class="tab-panel" data-panel="devices" style="overflow-y:auto;flex:1">
|
||||
<p class="muted small" style="padding:5px 10px">Drag to canvas or double-click to add</p>
|
||||
<div id="device-library"></div>
|
||||
</div>
|
||||
|
||||
<!-- Connector library panel -->
|
||||
<div class="tab-panel" data-panel="connectors" style="display:none;flex-direction:column;overflow:hidden;flex:1">
|
||||
<div style="padding:6px 8px;display:flex;flex-direction:column;gap:4px;flex-shrink:0">
|
||||
<div style="display:flex;gap:4px;align-items:center">
|
||||
<input id="lib-search" type="text" placeholder="Search connectors…" style="flex:1;background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:5px 8px;border-radius:4px;font-size:12px">
|
||||
<button id="btn-new-connector" title="Create custom connector" style="padding:4px 8px;font-size:13px;flex-shrink:0">+</button>
|
||||
</div>
|
||||
<select id="lib-category" style="background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:4px 6px;border-radius:4px;font-size:11px"></select>
|
||||
</div>
|
||||
<p class="muted small" style="padding:0 10px 4px">Drag to canvas or double-click to add</p>
|
||||
<div id="lib-list" style="overflow-y:auto;flex:1;padding:4px"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Canvas -->
|
||||
<main id="canvas-area">
|
||||
<div id="canvas-container"></div>
|
||||
<div id="canvas-placeholder">
|
||||
<div class="placeholder-content">
|
||||
<h2>⚡ WireDraw</h2>
|
||||
<p>Create or open a diagram to begin</p>
|
||||
<button onclick="app.newDiagram()">+ New Diagram</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Right sidebar — Properties -->
|
||||
<aside id="right-sidebar">
|
||||
<div class="section-header">Properties</div>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div id="props-empty" style="padding:20px 12px;color:#444466;font-size:12px;text-align:center">
|
||||
Select a device or wire to edit its properties.
|
||||
</div>
|
||||
|
||||
<!-- Multi-select state -->
|
||||
<div id="props-multi" style="display:none;padding:24px 12px;text-align:center">
|
||||
<div id="props-multi-count" style="font-size:13px;color:#c8ccee"></div>
|
||||
<div style="margin-top:6px;font-size:11px;color:#444466">Drag any to move all · Ctrl+D to duplicate · Del to delete</div>
|
||||
</div>
|
||||
|
||||
<!-- Device properties -->
|
||||
<div id="props-device" style="display:none">
|
||||
<div class="prop-row">
|
||||
<label>Type</label>
|
||||
<span id="prop-type" class="prop-value"></span>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Reference</label>
|
||||
<input id="prop-reference" type="text" placeholder="J1, TB1, U1…">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Label</label>
|
||||
<input id="prop-label" type="text" placeholder="Friendly name">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Part Number</label>
|
||||
<div style="display:flex;gap:4px">
|
||||
<input id="prop-partnumber" type="text" placeholder="Mfr part number" style="flex:1;min-width:0">
|
||||
<button id="btn-octopart-search" title="Search Octopart / Nexar" style="padding:4px 7px;font-size:13px;flex-shrink:0">🔍</button>
|
||||
</div>
|
||||
<div id="octopart-results" style="display:none"></div>
|
||||
<div id="octopart-status-msg" style="display:none;font-size:10px;color:#666688;margin-top:3px"></div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Manufacturer</label>
|
||||
<input id="prop-manufacturer" type="text" placeholder="Manufacturer">
|
||||
</div>
|
||||
<div class="prop-row" id="prop-datasheet-row" style="display:none">
|
||||
<label>Datasheet</label>
|
||||
<a id="prop-datasheet-link" href="#" target="_blank" rel="noopener noreferrer"
|
||||
style="font-size:11px;color:#7788ff;word-break:break-all;display:block">📄 Open datasheet</a>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Font Size</label>
|
||||
<input id="prop-fontsize" type="number" min="6" max="72" step="1" placeholder="12" style="width:64px">
|
||||
</div>
|
||||
<!-- Group-specific section (shown only for section box) -->
|
||||
<div id="group-section" style="display:none">
|
||||
<div class="prop-row">
|
||||
<label>Fill Color</label>
|
||||
<input id="group-fill-color" type="color" value="#2828a0" class="color-swatch">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Opacity</label>
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<input id="group-fill-opacity" type="range" min="0.02" max="0.6" step="0.01" value="0.15" style="flex:1">
|
||||
<span id="group-fill-opacity-val" style="font-size:10px;color:#778;width:28px;text-align:right">15%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Cable-specific section (shown only for cable devices) -->
|
||||
<div id="cable-section" style="display:none">
|
||||
<div class="prop-row">
|
||||
<label>Jacket Color</label>
|
||||
<input id="cable-jacket-color" type="color" value="#2a2a2a" class="color-swatch">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Sleeve Length</label>
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<input id="cable-sleeve-length" type="range" min="0" max="200" step="5" value="60" style="flex:1">
|
||||
<span id="cable-sleeve-length-val" style="font-size:10px;color:#778;width:32px;text-align:right">60 px</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Conductors</label>
|
||||
<table class="pin-table">
|
||||
<thead><tr><th>#</th><th>Name</th><th>Color</th><th></th></tr></thead>
|
||||
<tbody id="conductor-table-body"></tbody>
|
||||
</table>
|
||||
<button id="prop-add-conductor" style="margin-top:5px;width:100%;font-size:11px;padding:3px 6px">+ Add Conductor</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prop-row">
|
||||
<label>Pins <span class="muted small">(rename inline)</span></label>
|
||||
<table class="pin-table">
|
||||
<thead><tr><th>ID</th><th>Name</th><th title="L=left R=right T=top B=bottom">Side</th><th></th></tr></thead>
|
||||
<tbody id="pin-table-body"></tbody>
|
||||
</table>
|
||||
<div style="margin-top:5px;display:flex;gap:4px">
|
||||
<button id="prop-add-pin" style="flex:1;font-size:11px;padding:3px 6px">+ Add Pin</button>
|
||||
<button id="prop-save-connector" class="btn-primary" style="flex:1;font-size:11px;padding:3px 6px">⬆ Save to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wire properties -->
|
||||
<div id="props-wire" style="display:none">
|
||||
<div class="prop-row">
|
||||
<label>From</label>
|
||||
<span id="wire-from" class="prop-value mono"></span>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>To</label>
|
||||
<span id="wire-to" class="prop-value mono"></span>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Label</label>
|
||||
<input id="wire-label" type="text" placeholder="Wire label / ID">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Primary Color</label>
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<input id="wire-color" type="color" value="#CC0000" class="color-swatch">
|
||||
<select id="wire-color-preset" style="flex:1;background:#0e0e1e;border:1px solid #2a2a44;color:#c0c4e8;padding:4px 6px;border-radius:4px;font-size:11px">
|
||||
<option value="">— Preset colors —</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label id="wire-stripe-lbl">Stripe Color</label>
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<label id="wire-stripe-toggle-lbl" style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
|
||||
<input id="wire-stripe-enabled" type="checkbox"> stripe
|
||||
</label>
|
||||
<input id="wire-stripe" type="color" value="#ffffff" disabled class="color-swatch" style="opacity:0.3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Wire Gauge</label>
|
||||
<select id="wire-gauge">
|
||||
<optgroup label="AWG">
|
||||
<option>4 AWG</option>
|
||||
<option>6 AWG</option>
|
||||
<option>8 AWG</option>
|
||||
<option>10 AWG</option>
|
||||
<option>12 AWG</option>
|
||||
<option>14 AWG</option>
|
||||
<option>16 AWG</option>
|
||||
<option selected>18 AWG</option>
|
||||
<option>20 AWG</option>
|
||||
<option>22 AWG</option>
|
||||
<option>24 AWG</option>
|
||||
<option>26 AWG</option>
|
||||
</optgroup>
|
||||
<optgroup label="Metric (mm²)">
|
||||
<option>0.5 mm²</option>
|
||||
<option>0.75 mm²</option>
|
||||
<option>1.0 mm²</option>
|
||||
<option>1.5 mm²</option>
|
||||
<option>2.0 mm²</option>
|
||||
<option>2.5 mm²</option>
|
||||
<option>4.0 mm²</option>
|
||||
<option>6.0 mm²</option>
|
||||
<option>10 mm²</option>
|
||||
<option>16 mm²</option>
|
||||
<option>25 mm²</option>
|
||||
<option>35 mm²</option>
|
||||
<option>50 mm²</option>
|
||||
<option>70 mm²</option>
|
||||
<option>95 mm²</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="prop-row" style="display:flex;gap:6px">
|
||||
<div style="flex:1">
|
||||
<label>Length</label>
|
||||
<input id="wire-length" type="number" min="0" step="0.5" placeholder="0.0">
|
||||
</div>
|
||||
<div style="width:64px">
|
||||
<label>Unit</label>
|
||||
<select id="wire-unit">
|
||||
<option>in</option><option>cm</option><option>mm</option><option>ft</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Twisted Pair</label>
|
||||
<div style="display:flex;gap:8px;align-items:center">
|
||||
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
|
||||
<input id="wire-twisted" type="checkbox"> twisted pair
|
||||
</label>
|
||||
<input id="wire-twist-pitch" type="number" min="8" max="64" step="2" value="16" disabled
|
||||
style="width:48px;opacity:0.3">
|
||||
<span id="wire-twist-pitch-label" style="font-size:10px;color:#444466">px pitch</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Shielded</label>
|
||||
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
|
||||
<input id="wire-shielded" type="checkbox"> shielded cable
|
||||
</label>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Size Label</label>
|
||||
<label style="display:flex;align-items:center;gap:4px;cursor:pointer;font-size:11px;color:#778">
|
||||
<input id="wire-show-size-label" type="checkbox"> show gauge on canvas
|
||||
</label>
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Notes</label>
|
||||
<textarea id="wire-notes" rows="3" placeholder="Notes…" style="resize:vertical"></textarea>
|
||||
</div>
|
||||
<div class="prop-section-header" style="margin-top:10px;margin-bottom:4px;font-size:10px;color:#556;text-transform:uppercase;letter-spacing:.05em">Multi-Core Bundle</div>
|
||||
<div class="prop-row">
|
||||
<label>Bundle</label>
|
||||
<div style="display:flex;gap:4px;flex:1">
|
||||
<select id="wire-bundle-select" style="flex:1">
|
||||
<option value="">— none —</option>
|
||||
</select>
|
||||
<button id="wire-bundle-new" title="New bundle" style="padding:2px 7px;font-size:13px">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wire-bundle-edit" style="display:none">
|
||||
<div class="prop-row">
|
||||
<label>Label</label>
|
||||
<input id="wire-bundle-label" type="text" placeholder="e.g. CAN Bus" style="flex:1">
|
||||
</div>
|
||||
<div class="prop-row">
|
||||
<label>Jacket</label>
|
||||
<input id="wire-bundle-color" type="color" value="#2a2a2a" style="width:50px">
|
||||
<button id="wire-bundle-delete" style="margin-left:auto;padding:2px 7px;font-size:11px;color:#c66;background:none;border:1px solid #c66;border-radius:3px;cursor:pointer">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div><!-- #main -->
|
||||
</div><!-- #app -->
|
||||
|
||||
<!-- ── Custom Connector Modal ──────────────────────────────────────────────── -->
|
||||
<div id="connector-modal" style="display:none">
|
||||
<div class="modal-box">
|
||||
<div class="modal-header">
|
||||
<h3 id="cm-modal-title">New Custom Connector</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="cm-row">
|
||||
<label class="cm-label" for="cm-name">Name <span style="color:#ff6666">*</span></label>
|
||||
<input id="cm-name" type="text" class="cm-input" placeholder="e.g. AMP Superseal 6P">
|
||||
</div>
|
||||
<div class="cm-row cm-row-2col">
|
||||
<div>
|
||||
<label class="cm-label" for="cm-category">Category</label>
|
||||
<input id="cm-category" type="text" class="cm-input" placeholder="Custom">
|
||||
</div>
|
||||
<div>
|
||||
<label class="cm-label" for="cm-pincount">Pin Count <span style="color:#ff6666">*</span></label>
|
||||
<input id="cm-pincount" type="number" class="cm-input" min="1" max="64" value="4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-row cm-row-2col">
|
||||
<div>
|
||||
<label class="cm-label" for="cm-manufacturer">Manufacturer</label>
|
||||
<input id="cm-manufacturer" type="text" class="cm-input" placeholder="e.g. TE Connectivity">
|
||||
</div>
|
||||
<div>
|
||||
<label class="cm-label" for="cm-partnumber">Part Number</label>
|
||||
<input id="cm-partnumber" type="text" class="cm-input" placeholder="e.g. 1-1703630-1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="cm-row">
|
||||
<label class="cm-label" for="cm-description">Description</label>
|
||||
<input id="cm-description" type="text" class="cm-input" placeholder="Optional description">
|
||||
</div>
|
||||
<div class="cm-row">
|
||||
<label class="cm-label">Pin Labels <span class="muted small">(optional)</span></label>
|
||||
<div id="cm-pin-labels"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cm-delete" class="danger-btn" style="display:none">Delete</button>
|
||||
<div style="flex:1"></div>
|
||||
<button id="cm-cancel">Cancel</button>
|
||||
<button id="cm-save" class="btn-primary">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Context Menu ──────────────────────────────────────────────────────────── -->
|
||||
<div id="ctx-menu">
|
||||
<!-- populated dynamically by app.js -->
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/konva@9/konva.min.js"></script>
|
||||
<script src="/js/api.js"></script>
|
||||
<script src="/js/deviceTypes.js"></script>
|
||||
<script src="/js/connectorLibrary.js"></script>
|
||||
<script src="/js/canvas.js"></script>
|
||||
<script src="/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
const API_BASE = "/api";
|
||||
|
||||
async function apiFetch(path, options = {}) {
|
||||
const res = await fetch(`${API_BASE}${path}`, options);
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(`API ${res.status}: ${text}`);
|
||||
}
|
||||
return res.json();
|
||||
}
|
||||
|
||||
const api = {
|
||||
diagrams: {
|
||||
list: () => apiFetch("/diagrams/"),
|
||||
create: (data) => apiFetch("/diagrams/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
get: (id) => apiFetch(`/diagrams/${id}`),
|
||||
update: (id, data) => apiFetch(`/diagrams/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
delete: (id) => apiFetch(`/diagrams/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
devices: {
|
||||
create: (data) => apiFetch("/devices/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
update: (id, data) => apiFetch(`/devices/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
delete: (id) => apiFetch(`/devices/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
wires: {
|
||||
create: (data) => apiFetch("/wires/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
update: (id, data) => apiFetch(`/wires/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
delete: (id) => apiFetch(`/wires/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
bundles: {
|
||||
listForDiagram: (diagramId) => apiFetch(`/bundles/diagram/${diagramId}`),
|
||||
create: (data) => apiFetch("/bundles/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
update: (id, data) => apiFetch(`/bundles/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
delete: (id) => apiFetch(`/bundles/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
connectors: {
|
||||
list: () => apiFetch("/connectors/"),
|
||||
create: (data) => apiFetch("/connectors/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
update: (id, data) => apiFetch(`/connectors/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }),
|
||||
delete: (id) => apiFetch(`/connectors/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
octopart: {
|
||||
status: () => apiFetch("/octopart/status"),
|
||||
search: (q, n) => apiFetch(`/octopart/search?q=${encodeURIComponent(q)}&limit=${n || 8}`),
|
||||
},
|
||||
export: {
|
||||
bomUrl: (id) => `${API_BASE}/export/${id}/bom/csv`,
|
||||
assemblyUrl: (id) => `${API_BASE}/export/${id}/assembly/txt`,
|
||||
jsonUrl: (id) => `${API_BASE}/export/${id}/json`,
|
||||
formboardUrl: (id) => `${API_BASE}/export/${id}/formboard`,
|
||||
},
|
||||
};
|
||||
+1449
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,184 @@
|
||||
// Automotive / EV connector library
|
||||
// Each entry: { id, name, manufacturer, partNumber, pinCount, pinLabels?, description }
|
||||
|
||||
const CONNECTOR_LIBRARY = {
|
||||
"Deutsch DT": [
|
||||
{ id: "dt-2p", name: "DT04-2P", manufacturer: "TE Connectivity", partNumber: "DT04-2P-P012", pinCount: 2, description: "2-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-3p", name: "DT04-3P", manufacturer: "TE Connectivity", partNumber: "DT04-3P-P012", pinCount: 3, description: "3-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-4p", name: "DT04-4P", manufacturer: "TE Connectivity", partNumber: "DT04-4P-P012", pinCount: 4, description: "4-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-6p", name: "DT04-6P", manufacturer: "TE Connectivity", partNumber: "DT04-6P-P012", pinCount: 6, description: "6-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-8p", name: "DT04-8P", manufacturer: "TE Connectivity", partNumber: "DT04-8P-P012", pinCount: 8, description: "8-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-12p", name: "DT04-12P", manufacturer: "TE Connectivity", partNumber: "DT04-12P-P014", pinCount: 12, description: "12-pin weatherproof plug, 20–14 AWG" },
|
||||
{ id: "dt-2s", name: "DT06-2S", manufacturer: "TE Connectivity", partNumber: "DT06-2S", pinCount: 2, description: "2-pin weatherproof socket (receptacle)" },
|
||||
{ id: "dt-4s", name: "DT06-4S", manufacturer: "TE Connectivity", partNumber: "DT06-4S", pinCount: 4, description: "4-pin weatherproof socket (receptacle)" },
|
||||
{ id: "dt-6s", name: "DT06-6S", manufacturer: "TE Connectivity", partNumber: "DT06-6S", pinCount: 6, description: "6-pin weatherproof socket (receptacle)" },
|
||||
{ id: "dt-8s", name: "DT06-8S", manufacturer: "TE Connectivity", partNumber: "DT06-8S", pinCount: 8, description: "8-pin weatherproof socket (receptacle)" },
|
||||
],
|
||||
"Deutsch DTM (Miniature)": [
|
||||
{ id: "dtm-2p", name: "DTM04-2P", manufacturer: "TE Connectivity", partNumber: "DTM04-2P", pinCount: 2, description: "2-pin miniature weatherproof, 24–20 AWG" },
|
||||
{ id: "dtm-3p", name: "DTM04-3P", manufacturer: "TE Connectivity", partNumber: "DTM04-3P", pinCount: 3, description: "3-pin miniature weatherproof" },
|
||||
{ id: "dtm-4p", name: "DTM04-4P", manufacturer: "TE Connectivity", partNumber: "DTM04-4P", pinCount: 4, description: "4-pin miniature weatherproof" },
|
||||
{ id: "dtm-6p", name: "DTM04-6P", manufacturer: "TE Connectivity", partNumber: "DTM04-6P", pinCount: 6, description: "6-pin miniature weatherproof" },
|
||||
{ id: "dtm-8p", name: "DTM04-8P", manufacturer: "TE Connectivity", partNumber: "DTM04-8P", pinCount: 8, description: "8-pin miniature weatherproof" },
|
||||
{ id: "dtm-2s", name: "DTM06-2S", manufacturer: "TE Connectivity", partNumber: "DTM06-2S", pinCount: 2, description: "2-pin miniature socket" },
|
||||
{ id: "dtm-4s", name: "DTM06-4S", manufacturer: "TE Connectivity", partNumber: "DTM06-4S", pinCount: 4, description: "4-pin miniature socket" },
|
||||
],
|
||||
"Deutsch DTP (High Current)": [
|
||||
{ id: "dtp-2p", name: "DTP04-2P", manufacturer: "TE Connectivity", partNumber: "DTP04-2P-E003", pinCount: 2, description: "2-pin high current plug, up to 40A per pin, 12–10 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "dtp-4p", name: "DTP04-4P", manufacturer: "TE Connectivity", partNumber: "DTP04-4P-E003", pinCount: 4, description: "4-pin high current plug, up to 40A per pin" },
|
||||
{ id: "dtp-2s", name: "DTP06-2S", manufacturer: "TE Connectivity", partNumber: "DTP06-2S-E003", pinCount: 2, description: "2-pin high current socket" },
|
||||
{ id: "dtp-4s", name: "DTP06-4S", manufacturer: "TE Connectivity", partNumber: "DTP06-4S-E003", pinCount: 4, description: "4-pin high current socket" },
|
||||
],
|
||||
"Deutsch HD (Heavy Duty)": [
|
||||
{ id: "hd-9", name: "HD30-9", manufacturer: "TE Connectivity", partNumber: "HD30-9-1939P", pinCount: 9, description: "9-pin heavy duty, SAE J1939 CAN" },
|
||||
{ id: "hd-18", name: "HD30-18", manufacturer: "TE Connectivity", partNumber: "HD30-18-14P", pinCount: 18, description: "18-pin heavy duty" },
|
||||
{ id: "hd-24", name: "HD30-24", manufacturer: "TE Connectivity", partNumber: "HD30-24-14P", pinCount: 24, description: "24-pin heavy duty" },
|
||||
],
|
||||
"Anderson Powerpole": [
|
||||
{ id: "ap-pp15", name: "PP15/30", manufacturer: "Anderson Power", partNumber: "1327G6", pinCount: 2, description: "15/30 A Powerpole, 15–12 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-pp45", name: "PP45", manufacturer: "Anderson Power", partNumber: "1338G6", pinCount: 2, description: "45 A Powerpole, 12–10 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-pp75", name: "PP75", manufacturer: "Anderson Power", partNumber: "5913G2", pinCount: 2, description: "75 A Powerpole, 8–4 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-sb50", name: "SB 50", manufacturer: "Anderson Power", partNumber: "6319G1", pinCount: 2, description: "50 A SB connector, 6–2 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-sb120", name: "SB 120", manufacturer: "Anderson Power", partNumber: "6352G1", pinCount: 2, description: "120 A SB connector, 2–4/0 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-sb175", name: "SB 175", manufacturer: "Anderson Power", partNumber: "6321G1", pinCount: 2, description: "175 A SB connector, 2–4/0 AWG", pinLabels: ["+", "−"] },
|
||||
{ id: "ap-sb350", name: "SB 350", manufacturer: "Anderson Power", partNumber: "6348G1", pinCount: 2, description: "350 A SB connector, 4/0 AWG", pinLabels: ["+", "−"] },
|
||||
],
|
||||
"Molex Micro-Fit 3.0": [
|
||||
{ id: "mf-2", name: "Micro-Fit 2-pin", manufacturer: "Molex", partNumber: "43045-0200", pinCount: 2, description: "600 V, 5 A, 3.0 mm pitch" },
|
||||
{ id: "mf-4", name: "Micro-Fit 4-pin", manufacturer: "Molex", partNumber: "43045-0400", pinCount: 4, description: "600 V, 5 A" },
|
||||
{ id: "mf-6", name: "Micro-Fit 6-pin", manufacturer: "Molex", partNumber: "43045-0600", pinCount: 6, description: "600 V, 5 A" },
|
||||
{ id: "mf-8", name: "Micro-Fit 8-pin", manufacturer: "Molex", partNumber: "43045-0800", pinCount: 8, description: "600 V, 5 A" },
|
||||
{ id: "mf-10", name: "Micro-Fit 10-pin", manufacturer: "Molex", partNumber: "43045-1000", pinCount: 10, description: "600 V, 5 A" },
|
||||
{ id: "mf-12", name: "Micro-Fit 12-pin", manufacturer: "Molex", partNumber: "43045-1200", pinCount: 12, description: "600 V, 5 A" },
|
||||
],
|
||||
"Molex Mini-Fit Jr.": [
|
||||
{ id: "mfj-2", name: "Mini-Fit Jr. 2-pin", manufacturer: "Molex", partNumber: "39012020", pinCount: 2, description: "600 V, 9 A, 4.20 mm pitch" },
|
||||
{ id: "mfj-4", name: "Mini-Fit Jr. 4-pin", manufacturer: "Molex", partNumber: "39012040", pinCount: 4, description: "600 V, 9 A" },
|
||||
{ id: "mfj-6", name: "Mini-Fit Jr. 6-pin", manufacturer: "Molex", partNumber: "39012060", pinCount: 6, description: "600 V, 9 A" },
|
||||
{ id: "mfj-8", name: "Mini-Fit Jr. 8-pin", manufacturer: "Molex", partNumber: "39012080", pinCount: 8, description: "600 V, 9 A" },
|
||||
{ id: "mfj-12", name: "Mini-Fit Jr. 12-pin", manufacturer: "Molex", partNumber: "39012120", pinCount: 12, description: "600 V, 9 A" },
|
||||
],
|
||||
"Molex MX150 (Automotive)": [
|
||||
{ id: "mx-2", name: "MX150 2-pin", manufacturer: "Molex", partNumber: "33472-0201", pinCount: 2, description: "Sealed automotive, 600 V, 13 A" },
|
||||
{ id: "mx-4", name: "MX150 4-pin", manufacturer: "Molex", partNumber: "33472-0401", pinCount: 4, description: "Sealed automotive" },
|
||||
{ id: "mx-6", name: "MX150 6-pin", manufacturer: "Molex", partNumber: "33472-0601", pinCount: 6, description: "Sealed automotive" },
|
||||
{ id: "mx-8", name: "MX150 8-pin", manufacturer: "Molex", partNumber: "33472-0801", pinCount: 8, description: "Sealed automotive" },
|
||||
],
|
||||
"TE Superseal 1.5 mm (IP67)": [
|
||||
{ id: "ss-1", name: "Superseal 1-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-1", pinCount: 1, description: "IP67, 0.5–1.0 mm², 8.5 A" },
|
||||
{ id: "ss-2", name: "Superseal 2-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-2", pinCount: 2, description: "IP67, 0.5–1.0 mm²" },
|
||||
{ id: "ss-3", name: "Superseal 3-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-3", pinCount: 3, description: "IP67, 0.5–1.0 mm²" },
|
||||
{ id: "ss-4", name: "Superseal 4-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-4", pinCount: 4, description: "IP67, 0.5–1.0 mm²" },
|
||||
{ id: "ss-6", name: "Superseal 6-pin", manufacturer: "TE Connectivity", partNumber: "1-967616-6", pinCount: 6, description: "IP67, 0.5–1.0 mm²" },
|
||||
],
|
||||
"Delphi / Aptiv Weatherpack": [
|
||||
{ id: "wp-1", name: "Weatherpack 1-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12015793", pinCount: 1, description: "GT series, 100 °C rated, 20–18 AWG" },
|
||||
{ id: "wp-2", name: "Weatherpack 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010299", pinCount: 2, description: "GT series, 100 °C rated" },
|
||||
{ id: "wp-3", name: "Weatherpack 3-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010325", pinCount: 3, description: "GT series" },
|
||||
{ id: "wp-4", name: "Weatherpack 4-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010298", pinCount: 4, description: "GT series" },
|
||||
{ id: "wp-6", name: "Weatherpack 6-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010973", pinCount: 6, description: "GT series" },
|
||||
],
|
||||
"Delphi Metripack": [
|
||||
{ id: "mp150-2", name: "Metripack 150 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12162825", pinCount: 2, description: "Metripack 150, sealed" },
|
||||
{ id: "mp150-3", name: "Metripack 150 3-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12162193", pinCount: 3, description: "Metripack 150, sealed" },
|
||||
{ id: "mp280-2", name: "Metripack 280 2-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12010973", pinCount: 2, description: "Metripack 280 (larger terminal, higher current)" },
|
||||
{ id: "mp630-1", name: "Metripack 630 1-pin", manufacturer: "Aptiv (Delphi)", partNumber: "12110293", pinCount: 1, description: "Metripack 630, high current single contact" },
|
||||
],
|
||||
"Tesla (Proprietary / Approximate)": [
|
||||
{
|
||||
id: "tesla-hv23", name: "HV Battery 23-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
|
||||
pinCount: 23, description: "Model S/X HV battery main connector (proprietary pinout — verify with service manual)",
|
||||
pinLabels: ["HV+","HV+","HV−","HV−","SH","SH","HVIL+","HVIL−","CAN H","CAN L","CANH2","CANL2","12V","GND","GND","TP","TP","TP","TP","TP","TP","TP","TP"],
|
||||
},
|
||||
{
|
||||
id: "tesla-hvil2", name: "HV Interlock 2-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
|
||||
pinCount: 2, description: "High voltage interlock loop", pinLabels: ["HVIL+", "HVIL−"],
|
||||
},
|
||||
{
|
||||
id: "tesla-charge-m3", name: "Charge Port (Model 3/Y)", manufacturer: "Tesla", partNumber: "Tesla OEM",
|
||||
pinCount: 5, description: "AC charge port, Model 3 / Y (proprietary, similar to J1772)", pinLabels: ["L1","L2/N","GND","PP","CP"],
|
||||
},
|
||||
{
|
||||
id: "tesla-can4", name: "CAN Bus 4-pin", manufacturer: "Tesla", partNumber: "Tesla OEM",
|
||||
pinCount: 4, description: "Typical CAN bus connector (varies by model/year)", pinLabels: ["CAN H","CAN L","GND","12V"],
|
||||
},
|
||||
{
|
||||
id: "tesla-hv2", name: "HV 2-pin (Phase)", manufacturer: "Tesla", partNumber: "Tesla OEM",
|
||||
pinCount: 2, description: "HV 2-pin power connector (motor/inverter phase, approximate)", pinLabels: ["+","−"],
|
||||
},
|
||||
],
|
||||
"EV Charging Standards": [
|
||||
{
|
||||
id: "ev-j1772", name: "SAE J1772 Type 1", manufacturer: "Standard", partNumber: "SAE J1772",
|
||||
pinCount: 5, description: "AC Level 1/2 charging — North America", pinLabels: ["L1","N","GND","PP","CP"],
|
||||
},
|
||||
{
|
||||
id: "ev-type2", name: "IEC 62196 Type 2", manufacturer: "Standard", partNumber: "IEC 62196-2",
|
||||
pinCount: 7, description: "AC charging — Europe / international", pinLabels: ["L1","L2","L3","N","GND","PP","CP"],
|
||||
},
|
||||
{
|
||||
id: "ev-chademo", name: "CHAdeMO DC Fast", manufacturer: "Standard", partNumber: "CHAdeMO",
|
||||
pinCount: 10, description: "DC fast charge (up to 400 A / 500 V)", pinLabels: ["DC+","DC−","GND","CAN H","CAN L","Charge enable","Car ready","Charge stop","FG","Shield"],
|
||||
},
|
||||
{
|
||||
id: "ev-ccs1", name: "CCS Combo 1 (DC)", manufacturer: "Standard", partNumber: "SAE J1772 CCS",
|
||||
pinCount: 2, description: "CCS DC fast charge pins (2 large pins below J1772)", pinLabels: ["DC+","DC−"],
|
||||
},
|
||||
],
|
||||
"CAN / Network": [
|
||||
{ id: "can-dt2", name: "CAN Deutsch 2-pin", manufacturer: "TE Connectivity", partNumber: "DT04-2P", pinCount: 2, description: "Deutsch DT 2-pin for CAN bus", pinLabels: ["CAN H","CAN L"] },
|
||||
{ id: "can-j1939", name: "SAE J1939 9-pin", manufacturer: "Amphenol", partNumber: "HD10-9-1939P", pinCount: 9, description: "J1939 CAN heavy-vehicle datalink", pinLabels: ["−Battery","+Battery","GND","CAN H","Shield","GND","CAN L","NC","NC"] },
|
||||
{ id: "can-obd2", name: "OBD-II 16-pin", manufacturer: "Standard", partNumber: "SAE J1962", pinCount: 16, description: "On-board diagnostics port", pinLabels: ["Mfr","Mfr","GND","Mfr","Sig GND","CAN H","K-Line","Mfr","Bat+","Mfr","Mfr","Mfr","Mfr","CAN L","L-Line","OBD+"] },
|
||||
],
|
||||
"General Automotive / EV": [
|
||||
{ id: "ga-motor3", name: "Motor Phase 3-pin", manufacturer: "varies", partNumber: "varies", pinCount: 3, description: "3-phase motor connections", pinLabels: ["U","V","W"] },
|
||||
{ id: "ga-res2", name: "Resolver 2-pin", manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "Motor resolver position sensor", pinLabels: ["SIN","COS"] },
|
||||
{ id: "ga-therm2", name: "Temperature Sensor 2-pin",manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "NTC/PTC thermistor", pinLabels: ["SIG","GND"] },
|
||||
{ id: "ga-hall3", name: "Hall Sensor 3-pin", manufacturer: "varies", partNumber: "varies", pinCount: 3, description: "Hall effect position sensor", pinLabels: ["VCC","GND","SIG"] },
|
||||
{ id: "ga-batt2", name: "12 V Battery 2-pin", manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "12 V battery / accessory supply", pinLabels: ["+12V","GND"] },
|
||||
{ id: "ga-ctrlr4", name: "Controller 4-pin", manufacturer: "varies", partNumber: "varies", pinCount: 4, description: "Generic 4-pin controller interface", pinLabels: ["VCC","GND","SIG","EN"] },
|
||||
{ id: "ga-fuse2", name: "Fuse Holder 2-pin", manufacturer: "varies", partNumber: "varies", pinCount: 2, description: "Inline fuse holder connections", pinLabels: ["IN","OUT"] },
|
||||
{ id: "ga-relay5", name: "Relay 5-pin (SPDT)", manufacturer: "varies", partNumber: "varies", pinCount: 5, description: "SPDT automotive relay", pinLabels: ["85","86","30","87","87a"] },
|
||||
],
|
||||
};
|
||||
|
||||
// Build a flat lookup map for quick access by id
|
||||
const _CONN_BY_ID = {};
|
||||
for (const conns of Object.values(CONNECTOR_LIBRARY)) {
|
||||
for (const c of conns) { _CONN_BY_ID[c.id] = c; }
|
||||
}
|
||||
|
||||
function getConnectorById(id) { return _CONN_BY_ID[id] || null; }
|
||||
|
||||
function connectorToDevice(connId, diagramId) {
|
||||
const conn = getConnectorById(connId);
|
||||
if (!conn) return null;
|
||||
|
||||
const pinCount = conn.pinCount || 2;
|
||||
const w = 120;
|
||||
const h = Math.max(60, pinCount * 18 + 20);
|
||||
const pins = Array.from({ length: pinCount }, (_, i) => ({
|
||||
id: `pin_${i + 1}`,
|
||||
name: conn.pinLabels ? (conn.pinLabels[i] || String(i + 1)) : String(i + 1),
|
||||
side: "right",
|
||||
x_offset: w,
|
||||
y_offset: ((i + 1) / (pinCount + 1)) * h,
|
||||
}));
|
||||
|
||||
return {
|
||||
diagram_id: diagramId,
|
||||
device_type: "connector",
|
||||
label: conn.name,
|
||||
reference: "",
|
||||
x: 200, y: 200,
|
||||
width: w, height: h,
|
||||
properties: {
|
||||
pinCount,
|
||||
orientation: "right",
|
||||
partNumber: conn.partNumber || "",
|
||||
manufacturer: conn.manufacturer || "",
|
||||
connectorLibraryId: connId,
|
||||
},
|
||||
pins,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
const WIRE_COLORS = [
|
||||
{ name: "Black", hex: "#000000" },
|
||||
{ name: "Brown", hex: "#8B4513" },
|
||||
{ name: "Red", hex: "#CC0000" },
|
||||
{ name: "Orange", hex: "#FF8C00" },
|
||||
{ name: "Yellow", hex: "#FFD700" },
|
||||
{ name: "Green", hex: "#007700" },
|
||||
{ name: "Blue", hex: "#0000CC" },
|
||||
{ name: "Violet", hex: "#7B00CC" },
|
||||
{ name: "Grey", hex: "#808080" },
|
||||
{ name: "White", hex: "#DDDDDD" },
|
||||
{ name: "Pink", hex: "#FF69B4" },
|
||||
{ name: "Tan", hex: "#D2B48C" },
|
||||
];
|
||||
|
||||
const SIDE = { LEFT: "left", RIGHT: "right", TOP: "top", BOTTOM: "bottom" };
|
||||
|
||||
function makePins(side, count, w, h, prefix = "") {
|
||||
return Array.from({ length: count }, (_, i) => {
|
||||
const t = (i + 1) / (count + 1);
|
||||
const x = side === SIDE.LEFT ? 0 : side === SIDE.RIGHT ? w : t * w;
|
||||
const y = side === SIDE.TOP ? 0 : side === SIDE.BOTTOM ? h : t * h;
|
||||
return { id: `${prefix}pin_${i + 1}`, name: String(i + 1), side, x_offset: x, y_offset: y };
|
||||
});
|
||||
}
|
||||
|
||||
const DEVICE_TYPES = {
|
||||
connector: {
|
||||
label: "Connector",
|
||||
description: "Multi-pin connector (inline/header)",
|
||||
icon: "🔌",
|
||||
defaultProps: { pinCount: 4, orientation: "right", partNumber: "", manufacturer: "" },
|
||||
defaultSize: (p) => ({ w: 100, h: Math.max(60, (p.pinCount || 4) * 20 + 20) }),
|
||||
getPins: (p, w, h) => makePins(p.orientation || SIDE.RIGHT, p.pinCount || 4, w, h),
|
||||
},
|
||||
terminal_block: {
|
||||
label: "Terminal Block",
|
||||
description: "Screw terminal block",
|
||||
icon: "⬛",
|
||||
defaultProps: { terminalCount: 4, partNumber: "", manufacturer: "" },
|
||||
defaultSize: (p) => ({ w: Math.max(60, (p.terminalCount || 4) * 24), h: 60 }),
|
||||
getPins: (p, w, h) => {
|
||||
const count = p.terminalCount || 4;
|
||||
const pins = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const x = ((i + 0.5) / count) * w;
|
||||
pins.push({ id: `t${i + 1}`, name: String(i + 1), side: SIDE.TOP, x_offset: x, y_offset: 0 });
|
||||
pins.push({ id: `b${i + 1}`, name: String(i + 1), side: SIDE.BOTTOM, x_offset: x, y_offset: h });
|
||||
}
|
||||
return pins;
|
||||
},
|
||||
},
|
||||
component: {
|
||||
label: "Component",
|
||||
description: "Generic component / IC",
|
||||
icon: "⬜",
|
||||
defaultProps: { leftPins: 2, rightPins: 2, partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 120, h: 80 }),
|
||||
getPins: (p, w, h) => {
|
||||
const left = makePins(SIDE.LEFT, p.leftPins || 2, w, h, "L");
|
||||
const right = makePins(SIDE.RIGHT, p.rightPins || 2, w, h, "R");
|
||||
left.forEach((pin, i) => (pin.name = `L${i + 1}`));
|
||||
right.forEach((pin, i) => (pin.name = `R${i + 1}`));
|
||||
return [...left, ...right];
|
||||
},
|
||||
},
|
||||
splice: {
|
||||
label: "Splice / Junction",
|
||||
description: "Wire splice or junction point",
|
||||
icon: "✕",
|
||||
defaultProps: {},
|
||||
defaultSize: () => ({ w: 32, h: 32 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "left", name: "L", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "right", name: "R", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
{ id: "top", name: "T", side: SIDE.TOP, x_offset: w / 2, y_offset: 0 },
|
||||
{ id: "bottom", name: "B", side: SIDE.BOTTOM, x_offset: w / 2, y_offset: h },
|
||||
],
|
||||
},
|
||||
label: {
|
||||
label: "Note / Label",
|
||||
description: "Text annotation on the diagram",
|
||||
icon: "📝",
|
||||
defaultProps: { text: "Note" },
|
||||
defaultSize: () => ({ w: 160, h: 40 }),
|
||||
getPins: () => [],
|
||||
},
|
||||
group: {
|
||||
label: "Section Box",
|
||||
description: "Labeled section rectangle for visual grouping",
|
||||
icon: "⬚",
|
||||
defaultProps: { fillColor: "#2828a0", fillOpacity: 0.15 },
|
||||
defaultSize: () => ({ w: 320, h: 220 }),
|
||||
getPins: () => [],
|
||||
},
|
||||
|
||||
// ── Electrical components ───────────────────────────────────────────────────
|
||||
fuse: {
|
||||
label: "Fuse",
|
||||
description: "In-line fuse or fusible link",
|
||||
icon: "⚡",
|
||||
defaultProps: { ampRating: "10A", fuseType: "blade", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 80, h: 44 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "A", name: "A", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "B", name: "B", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
relay: {
|
||||
label: "Relay",
|
||||
description: "Electromagnetic relay — SPDT 5-pin (85/86/30/87/87a)",
|
||||
icon: "🔁",
|
||||
defaultProps: { coilVoltage: "12V", ampRating: "30A", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 110, h: 100 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "85", name: "85", side: SIDE.LEFT, x_offset: 0, y_offset: h * 0.30 },
|
||||
{ id: "86", name: "86", side: SIDE.LEFT, x_offset: 0, y_offset: h * 0.70 },
|
||||
{ id: "87a", name: "87a", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.20 },
|
||||
{ id: "30", name: "30", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.50 },
|
||||
{ id: "87", name: "87", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.80 },
|
||||
],
|
||||
},
|
||||
switch: {
|
||||
label: "Switch",
|
||||
description: "SPDT switch — common, normally-open, normally-closed",
|
||||
icon: "⎘",
|
||||
defaultProps: { switchType: "SPDT", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 90, h: 70 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "C", name: "C", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "NO", name: "NO", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.30 },
|
||||
{ id: "NC", name: "NC", side: SIDE.RIGHT, x_offset: w, y_offset: h * 0.70 },
|
||||
],
|
||||
},
|
||||
bulb: {
|
||||
label: "Bulb / Light",
|
||||
description: "Indicator lamp or lighting load",
|
||||
icon: "💡",
|
||||
defaultProps: { voltage: "12V", wattage: "", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 80, h: 50 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "+", name: "+", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
motor: {
|
||||
label: "Motor",
|
||||
description: "DC motor or actuator",
|
||||
icon: "⚙",
|
||||
defaultProps: { voltage: "12V", ampRating: "", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 90, h: 60 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "+", name: "+", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
diode: {
|
||||
label: "Diode",
|
||||
description: "Diode, Schottky, or TVS — anode / cathode",
|
||||
icon: "⊳",
|
||||
defaultProps: { diodeType: "rectifier", voltage: "", current: "", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 80, h: 44 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "A", name: "A", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "K", name: "K", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
resistor: {
|
||||
label: "Resistor",
|
||||
description: "Fixed resistor or load",
|
||||
icon: "Ω",
|
||||
defaultProps: { resistance: "", wattage: "", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 80, h: 44 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "1", name: "1", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "2", name: "2", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
capacitor: {
|
||||
label: "Capacitor",
|
||||
description: "Electrolytic or film capacitor",
|
||||
icon: "⊏",
|
||||
defaultProps: { capacitance: "", voltage: "", partNumber: "", manufacturer: "" },
|
||||
defaultSize: () => ({ w: 80, h: 44 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "+", name: "+", side: SIDE.LEFT, x_offset: 0, y_offset: h / 2 },
|
||||
{ id: "-", name: "−", side: SIDE.RIGHT, x_offset: w, y_offset: h / 2 },
|
||||
],
|
||||
},
|
||||
ground: {
|
||||
label: "Ground",
|
||||
description: "Chassis or signal ground reference",
|
||||
icon: "⏚",
|
||||
defaultProps: { groundType: "chassis", reference: "" },
|
||||
defaultSize: () => ({ w: 60, h: 50 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "GND", name: "GND", side: SIDE.TOP, x_offset: w / 2, y_offset: 0 },
|
||||
],
|
||||
},
|
||||
power: {
|
||||
label: "Power Rail",
|
||||
description: "Battery positive, ignition, or supply rail",
|
||||
icon: "⊕",
|
||||
defaultProps: { voltage: "12V", sourceType: "battery", reference: "" },
|
||||
defaultSize: () => ({ w: 70, h: 50 }),
|
||||
getPins: (p, w, h) => [
|
||||
{ id: "PWR", name: "+", side: SIDE.BOTTOM, x_offset: w / 2, y_offset: h },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const CABLE_DEFAULT_COLORS = [
|
||||
"#dddddd", "#cc0000", "#111111", "#007700",
|
||||
"#0000cc", "#ff8c00", "#8b4513", "#7b00cc",
|
||||
];
|
||||
|
||||
const DEVICE_TYPES_EXTRA = {
|
||||
cable: {
|
||||
label: "Cable",
|
||||
description: "Multi-conductor cable under one jacket",
|
||||
icon: "🔗",
|
||||
defaultProps: {
|
||||
conductorCount: 4,
|
||||
partNumber: "",
|
||||
manufacturer: "",
|
||||
jacketColor: "#2a2a2a",
|
||||
sleeveLength: 60,
|
||||
conductors: [
|
||||
{ name: "1", color: "#dddddd" },
|
||||
{ name: "2", color: "#cc0000" },
|
||||
{ name: "3", color: "#111111" },
|
||||
{ name: "4", color: "#007700" },
|
||||
],
|
||||
},
|
||||
defaultSize: (p) => {
|
||||
const n = p.conductorCount || p.conductors?.length || 4;
|
||||
return { w: 200, h: n * 24 + 40 };
|
||||
},
|
||||
getPins: (p, w, h) => {
|
||||
const conductors = p.conductors || Array.from({ length: p.conductorCount || 4 }, (_, i) => ({ name: String(i + 1) }));
|
||||
return conductors.flatMap((c, i) => {
|
||||
const yOff = 26 + i * 24 + 12;
|
||||
return [
|
||||
{ id: `L${i + 1}`, name: c.name || String(i + 1), side: "left", x_offset: 0, y_offset: yOff },
|
||||
{ id: `R${i + 1}`, name: c.name || String(i + 1), side: "right", x_offset: w, y_offset: yOff },
|
||||
];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Object.assign(DEVICE_TYPES, DEVICE_TYPES_EXTRA);
|
||||
|
||||
function buildDefaultDevice(typeKey, diagramId) {
|
||||
const type = DEVICE_TYPES[typeKey];
|
||||
if (!type) return null;
|
||||
const props = { ...type.defaultProps };
|
||||
const { w, h } = type.defaultSize(props);
|
||||
const pins = type.getPins(props, w, h);
|
||||
return {
|
||||
diagram_id: diagramId,
|
||||
device_type: typeKey,
|
||||
label: type.label,
|
||||
reference: "",
|
||||
x: 200,
|
||||
y: 200,
|
||||
width: w,
|
||||
height: h,
|
||||
properties: props,
|
||||
pins,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user