topo-engine 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +402 -366
- package/dist/style.css +366 -248
- package/dist/topo-engine.cjs +228 -91
- package/dist/topo-engine.cjs.map +1 -1
- package/dist/topo-engine.js +228 -91
- package/dist/topo-engine.js.map +1 -1
- package/dist/topo-engine.umd.cjs +228 -91
- package/dist/topo-engine.umd.cjs.map +1 -1
- package/package.json +1 -1
package/dist/topo-engine.js
CHANGED
|
@@ -1333,11 +1333,26 @@ function foldModel(model, plans, nodeMap) {
|
|
|
1333
1333
|
const extNodes = model.nodes.filter((n) => !containAll.has(n.id)).map((n) => ({ ...n }));
|
|
1334
1334
|
for (const p of plans) {
|
|
1335
1335
|
const inner = stationInner(p, model, 50, nodeMap);
|
|
1336
|
+
let estH = inner.estH;
|
|
1337
|
+
const title = p.name || "";
|
|
1338
|
+
if (title && inner.estW > 24) {
|
|
1339
|
+
const tFs = 11, tLH = tFs * 1.35;
|
|
1340
|
+
let tW = 0, lines = 1;
|
|
1341
|
+
for (const ch of title) {
|
|
1342
|
+
const cw = /[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/.test(ch) ? tFs : tFs * 0.6;
|
|
1343
|
+
if (tW && tW + cw > inner.estW - 12) {
|
|
1344
|
+
lines++;
|
|
1345
|
+
tW = 0;
|
|
1346
|
+
}
|
|
1347
|
+
tW += cw;
|
|
1348
|
+
}
|
|
1349
|
+
estH = Math.max(estH, 13 + lines * tLH + 6);
|
|
1350
|
+
}
|
|
1336
1351
|
extNodes.push({
|
|
1337
1352
|
id: p.sid,
|
|
1338
1353
|
cat: "station",
|
|
1339
1354
|
name: p.name,
|
|
1340
|
-
_size: { w: inner.estW, h:
|
|
1355
|
+
_size: { w: inner.estW, h: estH },
|
|
1341
1356
|
_fanW: inner.fanW
|
|
1342
1357
|
});
|
|
1343
1358
|
}
|
|
@@ -1832,7 +1847,23 @@ function expandStations(model, plans, pos, edgeCP, band, bandClear, vTrunkStatio
|
|
|
1832
1847
|
const fx = xS + (bminX + bmaxX) / 2;
|
|
1833
1848
|
const fy = yS + (bminY + bmaxY) / 2;
|
|
1834
1849
|
const fw = bmaxX - bminX + 2 * HM;
|
|
1835
|
-
|
|
1850
|
+
let fh = bmaxY - bminY + 2 * VM;
|
|
1851
|
+
const title = plan.name || "";
|
|
1852
|
+
if (title && fw > 24) {
|
|
1853
|
+
const tFs = 11;
|
|
1854
|
+
const tLH = tFs * 1.35;
|
|
1855
|
+
let tW = 0, lines = 1;
|
|
1856
|
+
for (const ch of title) {
|
|
1857
|
+
const cw = /[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/.test(ch) ? tFs : tFs * 0.6;
|
|
1858
|
+
if (tW && tW + cw > fw - 12) {
|
|
1859
|
+
lines++;
|
|
1860
|
+
tW = 0;
|
|
1861
|
+
}
|
|
1862
|
+
tW += cw;
|
|
1863
|
+
}
|
|
1864
|
+
const titleH = 13 + lines * tLH + 6;
|
|
1865
|
+
fh = Math.max(fh, titleH);
|
|
1866
|
+
}
|
|
1836
1867
|
pos.set(plan.sid, { x: fx, y: fy });
|
|
1837
1868
|
frames.push({ id: plan.sid, x: fx, y: fy, w: fw, h: fh, name: plan.name });
|
|
1838
1869
|
if (plan.busNode) busWidth.set(plan.busNode, bs.w);
|
|
@@ -2422,6 +2453,69 @@ function assertOrthogonal(model, edgeCP) {
|
|
|
2422
2453
|
}
|
|
2423
2454
|
return bad;
|
|
2424
2455
|
}
|
|
2456
|
+
const THEMES = {
|
|
2457
|
+
// —— 深色主题(默认,与历史版本完全一致)——
|
|
2458
|
+
dark: {
|
|
2459
|
+
// 画布背景
|
|
2460
|
+
canvasBg: "#050505",
|
|
2461
|
+
// 导线(边)
|
|
2462
|
+
trunkEdge: "#FFFFFF",
|
|
2463
|
+
// 干线:白
|
|
2464
|
+
branchEdge: "#8B8B8B",
|
|
2465
|
+
// 支线:灰
|
|
2466
|
+
// 图元符号
|
|
2467
|
+
trunkLine: "#07A4F8",
|
|
2468
|
+
// 变压器连接线(蓝)
|
|
2469
|
+
red: "#F00",
|
|
2470
|
+
orange: "#FF6600",
|
|
2471
|
+
white: "#FFF",
|
|
2472
|
+
// 通用浅色元素(描边/文字/标签),light 下为深色
|
|
2473
|
+
cyan: "#00C8FF",
|
|
2474
|
+
gold: "#FFD700",
|
|
2475
|
+
gray: "#8B8B8B",
|
|
2476
|
+
// 计量箱(JX):深色主题黑底白字;浅色主题白底深框深字(随画布配套)
|
|
2477
|
+
meterFill: "#000000",
|
|
2478
|
+
meterText: "#FFFFFF",
|
|
2479
|
+
// 母线填充
|
|
2480
|
+
busFill: "rgba(255,255,255,0.15)",
|
|
2481
|
+
// 导线连接点填充
|
|
2482
|
+
dotFill: "rgba(0,200,255,0.18)",
|
|
2483
|
+
// 站房外框
|
|
2484
|
+
stationFill: "rgba(255,255,255,0.02)",
|
|
2485
|
+
stationText: "rgba(255,255,255,0.85)",
|
|
2486
|
+
// 未知图元
|
|
2487
|
+
unknownFill: "#333333",
|
|
2488
|
+
unknownStroke: "#AAAAAA"
|
|
2489
|
+
},
|
|
2490
|
+
// —— 浅色主题(白色画布 + 配套深色图元)——
|
|
2491
|
+
light: {
|
|
2492
|
+
canvasBg: "#FFFFFF",
|
|
2493
|
+
// 白底上干线用深灰、支线用浅灰
|
|
2494
|
+
trunkEdge: "#3F3F3F",
|
|
2495
|
+
branchEdge: "#9C9C9C",
|
|
2496
|
+
// 蓝/橙/红在白底上加深一档保证对比度
|
|
2497
|
+
trunkLine: "#0B78B5",
|
|
2498
|
+
red: "#C62828",
|
|
2499
|
+
orange: "#E05F00",
|
|
2500
|
+
white: "#333333",
|
|
2501
|
+
cyan: "#0087B8",
|
|
2502
|
+
gold: "#B8860B",
|
|
2503
|
+
gray: "#9C9C9C",
|
|
2504
|
+
meterFill: "#FFFFFF",
|
|
2505
|
+
// 浅色主题:白底 + 深框深字(随白画布配套)
|
|
2506
|
+
meterText: "#3A3A3A",
|
|
2507
|
+
busFill: "rgba(0,0,0,0.07)",
|
|
2508
|
+
dotFill: "rgba(0,135,184,0.14)",
|
|
2509
|
+
stationFill: "rgba(0,0,0,0.03)",
|
|
2510
|
+
stationText: "rgba(50,50,50,0.8)",
|
|
2511
|
+
unknownFill: "#EDEDED",
|
|
2512
|
+
unknownStroke: "#777777"
|
|
2513
|
+
}
|
|
2514
|
+
};
|
|
2515
|
+
let edgeTheme = THEMES.dark;
|
|
2516
|
+
function setEdgeTheme(themeName) {
|
|
2517
|
+
edgeTheme = THEMES[themeName] || THEMES.dark;
|
|
2518
|
+
}
|
|
2425
2519
|
function buildGraphData(model, layout) {
|
|
2426
2520
|
const nodes = model.nodes.map((n) => {
|
|
2427
2521
|
const spec = getSymbolSpec(n.cat);
|
|
@@ -2437,7 +2531,7 @@ function buildGraphData(model, layout) {
|
|
|
2437
2531
|
size: [w, spec.h],
|
|
2438
2532
|
// 自定义字段(进 attributes,供 svg-symbol 节点绘制使用)
|
|
2439
2533
|
cat: n.cat,
|
|
2440
|
-
labelText: n.shortName || "",
|
|
2534
|
+
labelText: n.cat === "bus" || n.cat === "cableTerminal" ? "" : n.shortName || "",
|
|
2441
2535
|
rotate: layout.stationRotate && layout.stationRotate.get(n.id) || 0,
|
|
2442
2536
|
highlight: 0,
|
|
2443
2537
|
cursor: "pointer",
|
|
@@ -2454,9 +2548,9 @@ function buildGraphData(model, layout) {
|
|
|
2454
2548
|
y: f2.y,
|
|
2455
2549
|
size: [f2.w, f2.h],
|
|
2456
2550
|
cat: "station",
|
|
2457
|
-
labelText: f2.name || "",
|
|
2458
2551
|
highlight: 0,
|
|
2459
|
-
zIndex: -1
|
|
2552
|
+
zIndex: -1,
|
|
2553
|
+
_stationTitle: f2.name || ""
|
|
2460
2554
|
}
|
|
2461
2555
|
});
|
|
2462
2556
|
}
|
|
@@ -2496,7 +2590,7 @@ function edgeStyle(datum) {
|
|
|
2496
2590
|
};
|
|
2497
2591
|
}
|
|
2498
2592
|
const base = {
|
|
2499
|
-
stroke: s2 && s2.overrideStroke || d2 && d2.overrideStroke || (isBranch ?
|
|
2593
|
+
stroke: s2 && s2.overrideStroke || d2 && d2.overrideStroke || (isBranch ? edgeTheme.branchEdge : edgeTheme.trunkEdge),
|
|
2500
2594
|
lineWidth: s2 && s2.overrideLineWidth || d2 && d2.overrideLineWidth || (isBranch ? 1.1 : 1.5),
|
|
2501
2595
|
opacity: s2 && s2.overrideOpacity != null ? s2.overrideOpacity : d2 && d2.overrideOpacity != null ? d2.overrideOpacity : isBranch ? 0.85 : 1,
|
|
2502
2596
|
controlPoints: d2 && d2.cp || [],
|
|
@@ -27557,14 +27651,13 @@ var Sector = /* @__PURE__ */ function(_Path) {
|
|
|
27557
27651
|
}]);
|
|
27558
27652
|
}(Path);
|
|
27559
27653
|
Sector.PARSED_STYLE_LIST = new Set([].concat(_toConsumableArray(Path.PARSED_STYLE_LIST), ["x", "y", "sr", "sr0", "radius", "startAngle", "endAngle"]));
|
|
27560
|
-
const C2 = {
|
|
27561
|
-
|
|
27562
|
-
|
|
27563
|
-
|
|
27564
|
-
|
|
27565
|
-
|
|
27566
|
-
|
|
27567
|
-
};
|
|
27654
|
+
const C2 = { ...THEMES.dark };
|
|
27655
|
+
function setNodePalette(themeName) {
|
|
27656
|
+
const t = THEMES[themeName] || THEMES.dark;
|
|
27657
|
+
for (const key of Object.keys(t)) {
|
|
27658
|
+
if (key in C2) C2[key] = t[key];
|
|
27659
|
+
}
|
|
27660
|
+
}
|
|
27568
27661
|
function drawHighlight(attributes, group) {
|
|
27569
27662
|
if (!attributes.highlight) return;
|
|
27570
27663
|
const [w, h] = attributes.size;
|
|
@@ -27585,45 +27678,19 @@ function drawHighlight(attributes, group) {
|
|
|
27585
27678
|
);
|
|
27586
27679
|
}
|
|
27587
27680
|
function drawAnnotation(attributes, group) {
|
|
27588
|
-
const
|
|
27589
|
-
if (!
|
|
27590
|
-
const [, h] = attributes.size;
|
|
27681
|
+
const label = attributes.annotationText;
|
|
27682
|
+
if (!label) return;
|
|
27683
|
+
const [w, h] = attributes.size;
|
|
27591
27684
|
const pos = attributes.annotationPos || "top";
|
|
27592
27685
|
const offset = attributes.annotationOffset || 4;
|
|
27593
27686
|
const y = pos === "top" ? -h / 2 - offset - 6 : h / 2 + offset + 6;
|
|
27594
|
-
group.
|
|
27595
|
-
new Text({
|
|
27596
|
-
style: {
|
|
27597
|
-
text: text2,
|
|
27598
|
-
x: 0,
|
|
27599
|
-
y,
|
|
27600
|
-
fontSize: attributes.annotationSize || 12,
|
|
27601
|
-
fill: attributes.annotationColor || "#FFFFFF",
|
|
27602
|
-
fontFamily: FONT,
|
|
27603
|
-
textAlign: "center",
|
|
27604
|
-
textBaseline: "middle"
|
|
27605
|
-
}
|
|
27606
|
-
})
|
|
27607
|
-
);
|
|
27687
|
+
_drawWrappedText(group, label, 0, y, attributes.annotationSize || 12, attributes.annotationColor || C2.white, w + 10, 1.25);
|
|
27608
27688
|
}
|
|
27609
27689
|
function drawLabelUnder(attributes, group) {
|
|
27610
|
-
const
|
|
27611
|
-
if (!
|
|
27690
|
+
const label = attributes.labelText || "";
|
|
27691
|
+
if (!label) return;
|
|
27612
27692
|
const [w, h] = attributes.size;
|
|
27613
|
-
group.
|
|
27614
|
-
new Text({
|
|
27615
|
-
style: {
|
|
27616
|
-
text: text2,
|
|
27617
|
-
x: 0,
|
|
27618
|
-
y: h / 2 + 8,
|
|
27619
|
-
fontSize: 11,
|
|
27620
|
-
fill: C2.white,
|
|
27621
|
-
fontFamily: FONT,
|
|
27622
|
-
textAlign: "center",
|
|
27623
|
-
textBaseline: "middle"
|
|
27624
|
-
}
|
|
27625
|
-
})
|
|
27626
|
-
);
|
|
27693
|
+
_drawWrappedText(group, label, 0, h / 2 + 8, 11, C2.white, w + 4, 1.3);
|
|
27627
27694
|
}
|
|
27628
27695
|
function text(attributes, group, str2, x, y, size, fill) {
|
|
27629
27696
|
if (!str2) return;
|
|
@@ -27642,6 +27709,52 @@ function text(attributes, group, str2, x, y, size, fill) {
|
|
|
27642
27709
|
})
|
|
27643
27710
|
);
|
|
27644
27711
|
}
|
|
27712
|
+
function _measureWidth(str2, fontSize2) {
|
|
27713
|
+
let w = 0;
|
|
27714
|
+
for (const ch of str2) {
|
|
27715
|
+
w += /[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/.test(ch) ? fontSize2 : fontSize2 * 0.6;
|
|
27716
|
+
}
|
|
27717
|
+
return w;
|
|
27718
|
+
}
|
|
27719
|
+
function _wrapLines(str2, fontSize2, maxWidth) {
|
|
27720
|
+
if (!str2) return [];
|
|
27721
|
+
const lines = [];
|
|
27722
|
+
let line = "";
|
|
27723
|
+
for (const ch of str2) {
|
|
27724
|
+
const test = line + ch;
|
|
27725
|
+
if (line && _measureWidth(test, fontSize2) > maxWidth) {
|
|
27726
|
+
lines.push(line);
|
|
27727
|
+
line = ch;
|
|
27728
|
+
} else {
|
|
27729
|
+
line = test;
|
|
27730
|
+
}
|
|
27731
|
+
}
|
|
27732
|
+
if (line) lines.push(line);
|
|
27733
|
+
return lines;
|
|
27734
|
+
}
|
|
27735
|
+
function _drawWrappedText(group, str2, x, y, fontSize2, fill, maxWidth, lineGap = 1.3) {
|
|
27736
|
+
if (!str2) return;
|
|
27737
|
+
const lines = _wrapLines(str2, fontSize2, maxWidth);
|
|
27738
|
+
if (!lines.length) return;
|
|
27739
|
+
const lineHeight2 = fontSize2 * lineGap;
|
|
27740
|
+
const totalH = lines.length * lineHeight2;
|
|
27741
|
+
for (let i = 0; i < lines.length; i++) {
|
|
27742
|
+
group.appendChild(
|
|
27743
|
+
new Text({
|
|
27744
|
+
style: {
|
|
27745
|
+
text: lines[i],
|
|
27746
|
+
x,
|
|
27747
|
+
y: y - totalH / 2 + lineHeight2 * (i + 0.5),
|
|
27748
|
+
fontSize: fontSize2,
|
|
27749
|
+
fill,
|
|
27750
|
+
fontFamily: FONT,
|
|
27751
|
+
textAlign: "center",
|
|
27752
|
+
textBaseline: "middle"
|
|
27753
|
+
}
|
|
27754
|
+
})
|
|
27755
|
+
);
|
|
27756
|
+
}
|
|
27757
|
+
}
|
|
27645
27758
|
function drawTransformer(attributes, group) {
|
|
27646
27759
|
const lw = 1.4;
|
|
27647
27760
|
group.appendChild(new Line({ style: { x1: -24, y1: 0, x2: -15, y2: 0, stroke: C2.trunkLine, lineWidth: lw } }));
|
|
@@ -27663,7 +27776,7 @@ function drawBreaker(attributes, group) {
|
|
|
27663
27776
|
group.appendChild(new Line({ style: { x1: -28, y1: 0, x2: -21, y2: 0, stroke: C2.red, lineWidth: lw } }));
|
|
27664
27777
|
group.appendChild(new Rect({ style: { x: -21, y: -9, width: 42, height: 18, radius: 2, fill: "none", stroke: C2.red, lineWidth: lw } }));
|
|
27665
27778
|
group.appendChild(new Rect({ style: { x: -21, y: -9, width: 42, height: 7, fill: "rgba(255,0,0,0.25)" } }));
|
|
27666
|
-
|
|
27779
|
+
_drawWrappedText(group, attributes.labelText, 0, 0.5, 10, C2.white, 36, 1.2);
|
|
27667
27780
|
group.appendChild(new Line({ style: { x1: 21, y1: 0, x2: 28, y2: 0, stroke: C2.red, lineWidth: lw } }));
|
|
27668
27781
|
}
|
|
27669
27782
|
function drawCableTerminal(attributes, group) {
|
|
@@ -27674,8 +27787,8 @@ function drawStationTerminal(attributes, group) {
|
|
|
27674
27787
|
group.appendChild(new Polygon({ style: { points: [[0, -5], [0, 5], [9, 0]], fill: "none", stroke: C2.red, lineWidth: 1.4 } }));
|
|
27675
27788
|
}
|
|
27676
27789
|
function drawMeterBox(attributes, group) {
|
|
27677
|
-
group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill:
|
|
27678
|
-
text(attributes, group, "JX", 0, 0.5, 7.5, C2.
|
|
27790
|
+
group.appendChild(new Rect({ style: { x: -9.5, y: -9.5, width: 19, height: 19, fill: C2.meterFill, stroke: C2.meterText, lineWidth: 0.9 } }));
|
|
27791
|
+
text(attributes, group, "JX", 0, 0.5, 7.5, C2.meterText);
|
|
27679
27792
|
}
|
|
27680
27793
|
function drawConsumer(attributes, group) {
|
|
27681
27794
|
group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 12.5, fill: "none", stroke: C2.white, lineWidth: 1.8 } }));
|
|
@@ -27683,10 +27796,10 @@ function drawConsumer(attributes, group) {
|
|
|
27683
27796
|
}
|
|
27684
27797
|
function drawBus(attributes, group) {
|
|
27685
27798
|
const [w] = attributes.size;
|
|
27686
|
-
group.appendChild(new Rect({ style: { x: -w / 2, y: -3, width: w, height: 6, radius: 2, fill:
|
|
27799
|
+
group.appendChild(new Rect({ style: { x: -w / 2, y: -3, width: w, height: 6, radius: 2, fill: C2.busFill, stroke: C2.white, lineWidth: 1.4 } }));
|
|
27687
27800
|
}
|
|
27688
27801
|
function drawLineDot(attributes, group) {
|
|
27689
|
-
group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 4, fill:
|
|
27802
|
+
group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 4, fill: C2.dotFill, stroke: C2.cyan, lineWidth: 1.4 } }));
|
|
27690
27803
|
}
|
|
27691
27804
|
function drawJunction(attributes, group) {
|
|
27692
27805
|
const lw = 1.4;
|
|
@@ -27696,7 +27809,7 @@ function drawJunction(attributes, group) {
|
|
|
27696
27809
|
group.appendChild(new Line({ style: { x1: 3.5, y1: -3.5, x2: -3.5, y2: 3.5, stroke: C2.red, lineWidth: lw } }));
|
|
27697
27810
|
}
|
|
27698
27811
|
function drawUnknown(attributes, group) {
|
|
27699
|
-
group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 8, fill:
|
|
27812
|
+
group.appendChild(new Circle({ style: { cx: 0, cy: 0, r: 8, fill: C2.unknownFill, stroke: C2.unknownStroke, lineWidth: 1.2 } }));
|
|
27700
27813
|
}
|
|
27701
27814
|
function drawStation(attributes, group) {
|
|
27702
27815
|
const [w, h] = attributes.size;
|
|
@@ -27708,28 +27821,15 @@ function drawStation(attributes, group) {
|
|
|
27708
27821
|
width: w,
|
|
27709
27822
|
height: h,
|
|
27710
27823
|
radius: 2,
|
|
27711
|
-
fill:
|
|
27824
|
+
fill: C2.stationFill,
|
|
27712
27825
|
stroke: C2.white,
|
|
27713
27826
|
lineWidth: 1.2,
|
|
27714
27827
|
opacity: 0.9
|
|
27715
27828
|
}
|
|
27716
27829
|
})
|
|
27717
27830
|
);
|
|
27718
|
-
if (attributes.
|
|
27719
|
-
group.
|
|
27720
|
-
new Text({
|
|
27721
|
-
style: {
|
|
27722
|
-
text: attributes.labelText,
|
|
27723
|
-
x: 0,
|
|
27724
|
-
y: -h / 2 + 13,
|
|
27725
|
-
fontSize: 11,
|
|
27726
|
-
fill: "rgba(255,255,255,0.85)",
|
|
27727
|
-
fontFamily: FONT,
|
|
27728
|
-
textAlign: "center",
|
|
27729
|
-
textBaseline: "middle"
|
|
27730
|
-
}
|
|
27731
|
-
})
|
|
27732
|
-
);
|
|
27831
|
+
if (attributes._stationTitle) {
|
|
27832
|
+
_drawWrappedText(group, attributes._stationTitle, 0, -h / 2 + 13, 11, C2.stationText, w - 12, 1.35);
|
|
27733
27833
|
}
|
|
27734
27834
|
}
|
|
27735
27835
|
const DRAWERS = {
|
|
@@ -27746,7 +27846,7 @@ const DRAWERS = {
|
|
|
27746
27846
|
station: drawStation,
|
|
27747
27847
|
other: drawUnknown
|
|
27748
27848
|
};
|
|
27749
|
-
const LABEL_UNDER = /* @__PURE__ */ new Set(["transformer", "fuse"
|
|
27849
|
+
const LABEL_UNDER = /* @__PURE__ */ new Set(["transformer", "fuse"]);
|
|
27750
27850
|
const _pulseState = /* @__PURE__ */ new Map();
|
|
27751
27851
|
class SvgSymbolNode extends BaseNode {
|
|
27752
27852
|
drawKeyShape(attributes, container) {
|
|
@@ -27796,15 +27896,16 @@ const _export_sfc = (sfc, props) => {
|
|
|
27796
27896
|
}
|
|
27797
27897
|
return target;
|
|
27798
27898
|
};
|
|
27799
|
-
const _hoisted_1$2 =
|
|
27899
|
+
const _hoisted_1$2 = ["data-theme"];
|
|
27800
27900
|
const _hoisted_2$2 = { class: "topo-toolbar" };
|
|
27801
27901
|
const _hoisted_3$2 = { class: "topo-title" };
|
|
27802
27902
|
const _hoisted_4$2 = { class: "topo-meta" };
|
|
27803
|
-
const _hoisted_5$2 =
|
|
27903
|
+
const _hoisted_5$2 = ["title"];
|
|
27904
|
+
const _hoisted_6$2 = {
|
|
27804
27905
|
key: 0,
|
|
27805
27906
|
class: "topo-loading"
|
|
27806
27907
|
};
|
|
27807
|
-
const
|
|
27908
|
+
const _hoisted_7$2 = {
|
|
27808
27909
|
key: 1,
|
|
27809
27910
|
class: "topo-error"
|
|
27810
27911
|
};
|
|
@@ -27812,9 +27913,11 @@ const _sfc_main$2 = {
|
|
|
27812
27913
|
__name: "TopoGraph",
|
|
27813
27914
|
props: {
|
|
27814
27915
|
dataUrl: { type: String, default: "" },
|
|
27815
|
-
data: { type: Object, default: null }
|
|
27916
|
+
data: { type: Object, default: null },
|
|
27917
|
+
/** 主题:'dark'(默认,黑底 SCADA 风)| 'light'(白底);支持 v-model:theme 双向绑定 */
|
|
27918
|
+
theme: { type: String, default: "dark" }
|
|
27816
27919
|
},
|
|
27817
|
-
emits: ["node-select", "loaded", "top-distances"],
|
|
27920
|
+
emits: ["node-select", "loaded", "top-distances", "update:theme"],
|
|
27818
27921
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
27819
27922
|
const props = __props;
|
|
27820
27923
|
const emit = __emit;
|
|
@@ -27888,6 +27991,7 @@ const _sfc_main$2 = {
|
|
|
27888
27991
|
console.error("导出 PNG 失败:", e2);
|
|
27889
27992
|
}
|
|
27890
27993
|
}
|
|
27994
|
+
const lastRaw = ref(null);
|
|
27891
27995
|
async function loadAndRender() {
|
|
27892
27996
|
loading.value = true;
|
|
27893
27997
|
error.value = "";
|
|
@@ -27916,7 +28020,16 @@ const _sfc_main$2 = {
|
|
|
27916
28020
|
rawText = text2;
|
|
27917
28021
|
loadAndRender();
|
|
27918
28022
|
}
|
|
28023
|
+
const themeName = () => props.theme === "light" ? "light" : "dark";
|
|
28024
|
+
function applyTheme() {
|
|
28025
|
+
const t = themeName();
|
|
28026
|
+
setNodePalette(t);
|
|
28027
|
+
setEdgeTheme(t);
|
|
28028
|
+
return t;
|
|
28029
|
+
}
|
|
27919
28030
|
function render(raw) {
|
|
28031
|
+
lastRaw.value = raw;
|
|
28032
|
+
const theme = applyTheme();
|
|
27920
28033
|
model = parseTopo(raw);
|
|
27921
28034
|
nodeByIdMap = new Map(model.nodes.map((n) => [n.id, n]));
|
|
27922
28035
|
title.value = String(model.title || "").replace(/\.+$/, "");
|
|
@@ -27943,7 +28056,7 @@ const _sfc_main$2 = {
|
|
|
27943
28056
|
graph = new Graph({
|
|
27944
28057
|
container: container.value,
|
|
27945
28058
|
autoResize: true,
|
|
27946
|
-
background:
|
|
28059
|
+
background: THEMES[theme].canvasBg,
|
|
27947
28060
|
data: data2,
|
|
27948
28061
|
// 节点坐标与边路径均由正交布局引擎显式给定(存储在layoutData中)
|
|
27949
28062
|
node: {
|
|
@@ -28043,6 +28156,12 @@ const _sfc_main$2 = {
|
|
|
28043
28156
|
},
|
|
28044
28157
|
{ deep: true }
|
|
28045
28158
|
);
|
|
28159
|
+
watch(
|
|
28160
|
+
() => props.theme,
|
|
28161
|
+
() => {
|
|
28162
|
+
if (lastRaw.value) render(lastRaw.value);
|
|
28163
|
+
}
|
|
28164
|
+
);
|
|
28046
28165
|
onBeforeUnmount(() => {
|
|
28047
28166
|
if (api) {
|
|
28048
28167
|
api.destroy();
|
|
@@ -28071,7 +28190,10 @@ const _sfc_main$2 = {
|
|
|
28071
28190
|
getTopDistances: () => topDistances.value
|
|
28072
28191
|
});
|
|
28073
28192
|
return (_ctx, _cache) => {
|
|
28074
|
-
return openBlock(), createElementBlock("div",
|
|
28193
|
+
return openBlock(), createElementBlock("div", {
|
|
28194
|
+
class: "topo-wrap",
|
|
28195
|
+
"data-theme": themeName()
|
|
28196
|
+
}, [
|
|
28075
28197
|
createElementVNode("div", {
|
|
28076
28198
|
ref_key: "container",
|
|
28077
28199
|
ref: container,
|
|
@@ -28080,6 +28202,11 @@ const _sfc_main$2 = {
|
|
|
28080
28202
|
createElementVNode("div", _hoisted_2$2, [
|
|
28081
28203
|
createElementVNode("span", _hoisted_3$2, toDisplayString(title.value), 1),
|
|
28082
28204
|
createElementVNode("span", _hoisted_4$2, " 节点 " + toDisplayString(stats.value.total) + " · 边 " + toDisplayString(edgeCount.value) + " · 深度 " + toDisplayString(stats.value.depth) + " · 叶子 " + toDisplayString(stats.value.leaves), 1),
|
|
28205
|
+
createElementVNode("button", {
|
|
28206
|
+
class: "btn",
|
|
28207
|
+
title: __props.theme === "light" ? "切换到深色主题" : "切换到浅色主题",
|
|
28208
|
+
onClick: _cache[0] || (_cache[0] = ($event) => emit("update:theme", __props.theme === "light" ? "dark" : "light"))
|
|
28209
|
+
}, toDisplayString(__props.theme === "light" ? "🌙 深色" : "☀️ 浅色"), 9, _hoisted_5$2),
|
|
28083
28210
|
createElementVNode("button", {
|
|
28084
28211
|
class: "btn",
|
|
28085
28212
|
onClick: resetView
|
|
@@ -28089,13 +28216,13 @@ const _sfc_main$2 = {
|
|
|
28089
28216
|
onClick: exportPng
|
|
28090
28217
|
}, "导出 PNG")
|
|
28091
28218
|
]),
|
|
28092
|
-
loading.value ? (openBlock(), createElementBlock("div",
|
|
28093
|
-
]);
|
|
28219
|
+
loading.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, "正在解析台区拓扑…")) : error.value ? (openBlock(), createElementBlock("div", _hoisted_7$2, toDisplayString(error.value), 1)) : createCommentVNode("", true)
|
|
28220
|
+
], 8, _hoisted_1$2);
|
|
28094
28221
|
};
|
|
28095
28222
|
}
|
|
28096
28223
|
};
|
|
28097
|
-
const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-
|
|
28098
|
-
const _hoisted_1$1 =
|
|
28224
|
+
const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-562b2247"]]);
|
|
28225
|
+
const _hoisted_1$1 = ["data-theme"];
|
|
28099
28226
|
const _hoisted_2$1 = { class: "panel-head" };
|
|
28100
28227
|
const _hoisted_3$1 = {
|
|
28101
28228
|
key: 0,
|
|
@@ -28147,7 +28274,9 @@ const _sfc_main$1 = {
|
|
|
28147
28274
|
node: { type: Object, default: null },
|
|
28148
28275
|
upstream: { type: Array, default: () => [] },
|
|
28149
28276
|
downstream: { type: Array, default: () => [] },
|
|
28150
|
-
stats: { type: Object, default: () => ({}) }
|
|
28277
|
+
stats: { type: Object, default: () => ({}) },
|
|
28278
|
+
/** 主题:'dark'(默认)| 'light' */
|
|
28279
|
+
theme: { type: String, default: "dark" }
|
|
28151
28280
|
},
|
|
28152
28281
|
emits: ["close", "jump"],
|
|
28153
28282
|
setup(__props, { emit: __emit }) {
|
|
@@ -28187,7 +28316,10 @@ const _sfc_main$1 = {
|
|
|
28187
28316
|
return Object.entries(byCat).map(([cat, count]) => ({ label: CAT_LABEL[cat] || cat, count })).sort((a2, b) => b.count - a2.count);
|
|
28188
28317
|
});
|
|
28189
28318
|
return (_ctx, _cache) => {
|
|
28190
|
-
return openBlock(), createElementBlock("div",
|
|
28319
|
+
return openBlock(), createElementBlock("div", {
|
|
28320
|
+
class: "panel",
|
|
28321
|
+
"data-theme": __props.theme
|
|
28322
|
+
}, [
|
|
28191
28323
|
createElementVNode("div", _hoisted_2$1, [
|
|
28192
28324
|
createElementVNode("span", null, toDisplayString(headTitle.value), 1),
|
|
28193
28325
|
createElementVNode("button", {
|
|
@@ -28282,12 +28414,12 @@ const _sfc_main$1 = {
|
|
|
28282
28414
|
createTextVNode(" 鼠标悬浮节点可高亮上下游与连线。 ")
|
|
28283
28415
|
], -1))
|
|
28284
28416
|
]))
|
|
28285
|
-
]);
|
|
28417
|
+
], 8, _hoisted_1$1);
|
|
28286
28418
|
};
|
|
28287
28419
|
}
|
|
28288
28420
|
};
|
|
28289
|
-
const SidePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-
|
|
28290
|
-
const _hoisted_1 =
|
|
28421
|
+
const SidePanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-547b7d57"]]);
|
|
28422
|
+
const _hoisted_1 = ["data-theme"];
|
|
28291
28423
|
const _hoisted_2 = { class: "panel-head" };
|
|
28292
28424
|
const _hoisted_3 = { class: "panel-body" };
|
|
28293
28425
|
const _hoisted_4 = {
|
|
@@ -28313,7 +28445,9 @@ const _sfc_main = {
|
|
|
28313
28445
|
distances: {
|
|
28314
28446
|
type: Array,
|
|
28315
28447
|
default: () => []
|
|
28316
|
-
}
|
|
28448
|
+
},
|
|
28449
|
+
/** 主题:'dark'(默认)| 'light' */
|
|
28450
|
+
theme: { type: String, default: "dark" }
|
|
28317
28451
|
},
|
|
28318
28452
|
emits: ["close", "jump"],
|
|
28319
28453
|
setup(__props, { emit: __emit }) {
|
|
@@ -28332,7 +28466,10 @@ const _sfc_main = {
|
|
|
28332
28466
|
return distance2 / maxDistance.value * 100;
|
|
28333
28467
|
}
|
|
28334
28468
|
return (_ctx, _cache) => {
|
|
28335
|
-
return openBlock(), createElementBlock("div",
|
|
28469
|
+
return openBlock(), createElementBlock("div", {
|
|
28470
|
+
class: "distance-top10",
|
|
28471
|
+
"data-theme": __props.theme
|
|
28472
|
+
}, [
|
|
28336
28473
|
createElementVNode("div", _hoisted_2, [
|
|
28337
28474
|
_cache[1] || (_cache[1] = createElementVNode("div", { class: "head-left" }, [
|
|
28338
28475
|
createElementVNode("span", { class: "head-icon" }, "📏"),
|
|
@@ -28389,12 +28526,12 @@ const _sfc_main = {
|
|
|
28389
28526
|
}), 128))
|
|
28390
28527
|
]))
|
|
28391
28528
|
])
|
|
28392
|
-
]);
|
|
28529
|
+
], 8, _hoisted_1);
|
|
28393
28530
|
};
|
|
28394
28531
|
}
|
|
28395
28532
|
};
|
|
28396
|
-
const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
28397
|
-
const VERSION = "0.1.
|
|
28533
|
+
const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
|
|
28534
|
+
const VERSION = "0.1.4";
|
|
28398
28535
|
const DESCRIPTION = "配电台区单线图拓扑成图引擎";
|
|
28399
28536
|
export {
|
|
28400
28537
|
DESCRIPTION,
|