Kyle/Wiring-Designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update wiring diagram maker: formboard router + frontend

Browse Source 
Backend formboard router and frontend (canvas, formboard, connector library,
app/api, index/css) updates. Ignore *.log.
This commit is contained in:
Kyle
2026-07-14 07:09:10 -04:00
parent 906a0a1075
commit f3564cbbb0
9 changed files with 591 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/formboard.js
+7 -3
View File
@@ -80,9 +80,11 @@ class FormboardCanvas {
const el = this.stage?.container()?.parentElement;
if (!el) return;
const w = el.clientWidth, h = el.clientHeight;
if (!w || !h) return;
this.stage.width(w); this.stage.height(h);
this._bg.width(w); this._bg.height(h);
this.bgLayer.batchDraw();
this._applyTransform();
}
_s2w(sx, sy) { return { x: (sx - this.offsetX) / this.scale, y: (sy - this.offsetY) / this.scale }; }
@@ -100,7 +102,7 @@ class FormboardCanvas {
setMode(mode) {
this.mode = mode;
if (mode !== "connect") this._cancelConnect();
this.stage?.container().style.cursor =
if (this.stage) this.stage.container().style.cursor =
["add-branch", "add-splice", "connect"].includes(mode) ? "crosshair" : "default";
}
@@ -223,8 +225,8 @@ class FormboardCanvas {
this.segKonva.clear(); this.segData.clear();
this.selectedId = null; this.selectedType = null;
(data.segments || []).forEach(s => { this.segData.set(s.id, s); this._renderSeg(s); });
(data.nodes || []).forEach(n => { this.nodeData.set(n.id, n); this._renderNode(n); });
(data.segments || []).forEach(s => { this.segData.set(s.id, s); this._renderSeg(s); });
this.segLayer.batchDraw(); this.nodeLayer.batchDraw();
}
@@ -376,9 +378,11 @@ class FormboardCanvas {
fitView() {
if (!this.nodeData.size) return;
const sw = this.stage.width(), sh = this.stage.height();
if (!sw || !sh) return;
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
this.nodeData.forEach(n => { minX = Math.min(minX, n.x); minY = Math.min(minY, n.y); maxX = Math.max(maxX, n.x); maxY = Math.max(maxY, n.y); });
const pad = 120, sw = this.stage.width(), sh = this.stage.height();
const pad = 120;
this.scale = Math.min(sw / (maxX - minX + pad * 2), sh / (maxY - minY + pad * 2), 2);
this.offsetX = sw / 2 - ((minX + maxX) / 2) * this.scale;
this.offsetY = sh / 2 - ((minY + maxY) / 2) * this.scale;