@zoneflow/renderer-dom 0.0.3 → 0.0.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/dist/engines/drawEngine.js +35 -26
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/theme.d.ts +35 -0
- package/dist/themes/defaultTheme.js +67 -0
- package/package.json +2 -2
|
@@ -57,8 +57,9 @@ function resolvePathTargetDisplay(params) {
|
|
|
57
57
|
};
|
|
58
58
|
}
|
|
59
59
|
function createPathStatusBadge(params) {
|
|
60
|
-
const { owner, status } = params;
|
|
60
|
+
const { owner, status, theme } = params;
|
|
61
61
|
const badge = document.createElement("div");
|
|
62
|
+
const tone = status === "missing" ? theme.status.warning : theme.status.info;
|
|
62
63
|
const isMissing = status === "missing";
|
|
63
64
|
badge.title = isMissing ? "Broken path target" : "Path target not set";
|
|
64
65
|
badge.setAttribute("aria-label", isMissing ? "Broken path target" : "Path target not set");
|
|
@@ -73,10 +74,10 @@ function createPathStatusBadge(params) {
|
|
|
73
74
|
alignItems: "center",
|
|
74
75
|
justifyContent: "center",
|
|
75
76
|
borderRadius: "999px",
|
|
76
|
-
border:
|
|
77
|
-
background:
|
|
78
|
-
color:
|
|
79
|
-
boxShadow:
|
|
77
|
+
border: tone.border,
|
|
78
|
+
background: tone.background,
|
|
79
|
+
color: tone.color,
|
|
80
|
+
boxShadow: tone.shadow,
|
|
80
81
|
fontSize: "12px",
|
|
81
82
|
lineHeight: "1",
|
|
82
83
|
fontWeight: "700",
|
|
@@ -101,8 +102,10 @@ function getOpacity(emphasis) {
|
|
|
101
102
|
function createSvgElement(tag) {
|
|
102
103
|
return document.createElementNS("http://www.w3.org/2000/svg", tag);
|
|
103
104
|
}
|
|
104
|
-
function getEdgeColor(
|
|
105
|
-
return kind === "zone-to-path"
|
|
105
|
+
function getEdgeColor(params) {
|
|
106
|
+
return params.kind === "zone-to-path"
|
|
107
|
+
? params.theme.pathEdge
|
|
108
|
+
: params.theme.pathInboundEdge;
|
|
106
109
|
}
|
|
107
110
|
function getBezierCurvePathD(params) {
|
|
108
111
|
const { source, target } = params;
|
|
@@ -271,9 +274,9 @@ function renderPathFallback(host, slot, context) {
|
|
|
271
274
|
applyStyles(host, {
|
|
272
275
|
...base,
|
|
273
276
|
color: targetDisplay.status === "missing"
|
|
274
|
-
?
|
|
277
|
+
? context.theme.status.warning.color
|
|
275
278
|
: targetDisplay.status === "unconfigured"
|
|
276
|
-
?
|
|
279
|
+
? context.theme.status.info.color
|
|
277
280
|
: context.theme.zoneSubtext,
|
|
278
281
|
fontSize: "11px",
|
|
279
282
|
fontWeight: targetDisplay.status === "resolved" ? 500 : 700,
|
|
@@ -406,7 +409,10 @@ function drawEdges(params) {
|
|
|
406
409
|
if (!visibility?.shouldRenderEdge)
|
|
407
410
|
continue;
|
|
408
411
|
for (const edge of edges) {
|
|
409
|
-
const stroke = getEdgeColor(
|
|
412
|
+
const stroke = getEdgeColor({
|
|
413
|
+
kind: edge.kind,
|
|
414
|
+
theme: input.theme,
|
|
415
|
+
});
|
|
410
416
|
const path = createSvgElement("path");
|
|
411
417
|
path.setAttribute("d", getBezierCurvePathD({
|
|
412
418
|
source: edge.source,
|
|
@@ -435,7 +441,7 @@ function drawEdges(params) {
|
|
|
435
441
|
}
|
|
436
442
|
}
|
|
437
443
|
function createSurfaceChrome(params) {
|
|
438
|
-
const { owner, accent, radius, topBandOpacity = 0.64 } = params;
|
|
444
|
+
const { owner, accent, radius, theme, topBandOpacity = 0.64 } = params;
|
|
439
445
|
const chrome = document.createElement("div");
|
|
440
446
|
const topBand = document.createElement("div");
|
|
441
447
|
const cornerGlow = document.createElement("div");
|
|
@@ -444,7 +450,7 @@ function createSurfaceChrome(params) {
|
|
|
444
450
|
inset: "0",
|
|
445
451
|
borderRadius: radius,
|
|
446
452
|
pointerEvents: "none",
|
|
447
|
-
background:
|
|
453
|
+
background: theme.surface.chrome.overlay,
|
|
448
454
|
});
|
|
449
455
|
applyStyles(topBand, {
|
|
450
456
|
position: "absolute",
|
|
@@ -454,7 +460,7 @@ function createSurfaceChrome(params) {
|
|
|
454
460
|
height: "44px",
|
|
455
461
|
borderTopLeftRadius: radius,
|
|
456
462
|
borderTopRightRadius: radius,
|
|
457
|
-
background: `linear-gradient(90deg, ${accent} 0%,
|
|
463
|
+
background: `linear-gradient(90deg, ${accent} 0%, ${theme.surface.chrome.accentFade} 72%)`,
|
|
458
464
|
opacity: topBandOpacity,
|
|
459
465
|
pointerEvents: "none",
|
|
460
466
|
});
|
|
@@ -465,7 +471,7 @@ function createSurfaceChrome(params) {
|
|
|
465
471
|
width: "116px",
|
|
466
472
|
height: "116px",
|
|
467
473
|
borderRadius: "999px",
|
|
468
|
-
background:
|
|
474
|
+
background: theme.surface.chrome.glow,
|
|
469
475
|
pointerEvents: "none",
|
|
470
476
|
});
|
|
471
477
|
chrome.appendChild(topBand);
|
|
@@ -478,8 +484,8 @@ function drawZoneAnchors(params) {
|
|
|
478
484
|
? input.theme.zoneActionBorder
|
|
479
485
|
: input.theme.zoneContainerBorder;
|
|
480
486
|
const anchorAccentColor = zone.zone.zoneType === "action"
|
|
481
|
-
?
|
|
482
|
-
:
|
|
487
|
+
? input.theme.surface.anchor.actionAccent
|
|
488
|
+
: input.theme.surface.anchor.containerAccent;
|
|
483
489
|
const shouldRenderAnchor = (kind) => kind === "inlet"
|
|
484
490
|
? isZoneInputEnabled(zone.zone)
|
|
485
491
|
: isZoneOutputEnabled(zone.zone);
|
|
@@ -502,11 +508,11 @@ function drawZoneAnchors(params) {
|
|
|
502
508
|
width: `${rect.width}px`,
|
|
503
509
|
height: `${rect.height}px`,
|
|
504
510
|
borderRadius: "0",
|
|
505
|
-
background:
|
|
511
|
+
background: input.theme.surface.anchor.background,
|
|
506
512
|
border: `1px solid ${zoneBorderColor}`,
|
|
507
513
|
borderRight: kind === "inlet" ? "none" : `1px solid ${zoneBorderColor}`,
|
|
508
514
|
borderLeft: kind === "outlet" ? "none" : `1px solid ${zoneBorderColor}`,
|
|
509
|
-
boxShadow:
|
|
515
|
+
boxShadow: input.theme.surface.anchor.shadow,
|
|
510
516
|
boxSizing: "border-box",
|
|
511
517
|
overflow: "hidden",
|
|
512
518
|
pointerEvents: "none",
|
|
@@ -516,7 +522,7 @@ function drawZoneAnchors(params) {
|
|
|
516
522
|
top: "0",
|
|
517
523
|
bottom: "0",
|
|
518
524
|
width: "10px",
|
|
519
|
-
background:
|
|
525
|
+
background: input.theme.surface.anchor.background,
|
|
520
526
|
right: kind === "inlet" ? "0" : "auto",
|
|
521
527
|
left: kind === "outlet" ? "0" : "auto",
|
|
522
528
|
});
|
|
@@ -651,9 +657,9 @@ export const domDrawEngine = {
|
|
|
651
657
|
border: `1px solid ${zoneVisual.zone.zoneType === "action"
|
|
652
658
|
? theme.zoneActionBorder
|
|
653
659
|
: theme.zoneContainerBorder}`,
|
|
654
|
-
background:
|
|
660
|
+
background: theme.surface.zone.background,
|
|
655
661
|
boxSizing: "border-box",
|
|
656
|
-
boxShadow:
|
|
662
|
+
boxShadow: theme.surface.zone.shadow,
|
|
657
663
|
overflow: "hidden",
|
|
658
664
|
});
|
|
659
665
|
zoneEl.addEventListener("click", (event) => {
|
|
@@ -663,9 +669,10 @@ export const domDrawEngine = {
|
|
|
663
669
|
createSurfaceChrome({
|
|
664
670
|
owner: zoneChromeEl,
|
|
665
671
|
accent: zoneVisual.zone.zoneType === "action"
|
|
666
|
-
?
|
|
667
|
-
:
|
|
672
|
+
? theme.surface.zone.actionAccent
|
|
673
|
+
: theme.surface.zone.containerAccent,
|
|
668
674
|
radius: "0",
|
|
675
|
+
theme,
|
|
669
676
|
});
|
|
670
677
|
zoneBodyEl.appendChild(zoneChromeEl);
|
|
671
678
|
zoneEl.appendChild(zoneBodyEl);
|
|
@@ -705,9 +712,9 @@ export const domDrawEngine = {
|
|
|
705
712
|
height: `${pathVisual.rect.height}px`,
|
|
706
713
|
borderRadius: "18px",
|
|
707
714
|
border: `1px solid ${theme.pathEdge}`,
|
|
708
|
-
background:
|
|
715
|
+
background: theme.surface.path.background,
|
|
709
716
|
boxSizing: "border-box",
|
|
710
|
-
boxShadow:
|
|
717
|
+
boxShadow: theme.surface.path.shadow,
|
|
711
718
|
opacity: getOpacity(visibility.emphasis),
|
|
712
719
|
zIndex: 1,
|
|
713
720
|
overflow: "hidden",
|
|
@@ -718,8 +725,9 @@ export const domDrawEngine = {
|
|
|
718
725
|
});
|
|
719
726
|
createSurfaceChrome({
|
|
720
727
|
owner: pathChromeEl,
|
|
721
|
-
accent:
|
|
728
|
+
accent: theme.surface.path.accent,
|
|
722
729
|
radius: "18px",
|
|
730
|
+
theme,
|
|
723
731
|
topBandOpacity: 0.72,
|
|
724
732
|
});
|
|
725
733
|
pathEl.appendChild(pathChromeEl);
|
|
@@ -731,6 +739,7 @@ export const domDrawEngine = {
|
|
|
731
739
|
createPathStatusBadge({
|
|
732
740
|
owner: pathEl,
|
|
733
741
|
status: targetDisplay.status,
|
|
742
|
+
theme,
|
|
734
743
|
});
|
|
735
744
|
}
|
|
736
745
|
for (const slot of Object.keys(componentLayout?.slots ?? {})) {
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/theme.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
export type ZoneflowStatusTone = {
|
|
2
|
+
border: string;
|
|
3
|
+
background: string;
|
|
4
|
+
color: string;
|
|
5
|
+
shadow: string;
|
|
6
|
+
};
|
|
1
7
|
export type ZoneflowTheme = {
|
|
2
8
|
background: string;
|
|
3
9
|
zoneTitle: string;
|
|
@@ -7,7 +13,36 @@ export type ZoneflowTheme = {
|
|
|
7
13
|
zoneBadgeBg: string;
|
|
8
14
|
pathLabel: string;
|
|
9
15
|
pathEdge: string;
|
|
16
|
+
pathInboundEdge: string;
|
|
10
17
|
selection: string;
|
|
18
|
+
surface: {
|
|
19
|
+
chrome: {
|
|
20
|
+
overlay: string;
|
|
21
|
+
glow: string;
|
|
22
|
+
accentFade: string;
|
|
23
|
+
};
|
|
24
|
+
zone: {
|
|
25
|
+
background: string;
|
|
26
|
+
shadow: string;
|
|
27
|
+
containerAccent: string;
|
|
28
|
+
actionAccent: string;
|
|
29
|
+
};
|
|
30
|
+
path: {
|
|
31
|
+
background: string;
|
|
32
|
+
shadow: string;
|
|
33
|
+
accent: string;
|
|
34
|
+
};
|
|
35
|
+
anchor: {
|
|
36
|
+
background: string;
|
|
37
|
+
shadow: string;
|
|
38
|
+
containerAccent: string;
|
|
39
|
+
actionAccent: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
status: {
|
|
43
|
+
info: ZoneflowStatusTone;
|
|
44
|
+
warning: ZoneflowStatusTone;
|
|
45
|
+
};
|
|
11
46
|
density: {
|
|
12
47
|
zone: {
|
|
13
48
|
detail: number;
|
|
@@ -10,7 +10,46 @@ export const defaultTheme = {
|
|
|
10
10
|
zoneBadgeBg: "#e0f2fe",
|
|
11
11
|
pathLabel: "#1e293b",
|
|
12
12
|
pathEdge: "#7a8aa0",
|
|
13
|
+
pathInboundEdge: "#0f766e",
|
|
13
14
|
selection: "#2e90fa",
|
|
15
|
+
surface: {
|
|
16
|
+
chrome: {
|
|
17
|
+
overlay: "linear-gradient(180deg, rgba(255,255,255,0.74) 0%, rgba(255,255,255,0.08) 42%, rgba(255,255,255,0) 100%)",
|
|
18
|
+
glow: "radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.22) 36%, rgba(255,255,255,0) 72%)",
|
|
19
|
+
accentFade: "rgba(255,255,255,0.04)",
|
|
20
|
+
},
|
|
21
|
+
zone: {
|
|
22
|
+
background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%)",
|
|
23
|
+
shadow: "0 18px 34px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
|
|
24
|
+
containerAccent: "rgba(37, 99, 235, 0.12)",
|
|
25
|
+
actionAccent: "rgba(245, 158, 11, 0.18)",
|
|
26
|
+
},
|
|
27
|
+
path: {
|
|
28
|
+
background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,248,252,0.98) 100%)",
|
|
29
|
+
shadow: "0 16px 26px rgba(15, 23, 42, 0.08), 0 3px 8px rgba(15, 23, 42, 0.05)",
|
|
30
|
+
accent: "rgba(56, 189, 248, 0.16)",
|
|
31
|
+
},
|
|
32
|
+
anchor: {
|
|
33
|
+
background: "linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(247,250,253,0.98) 100%)",
|
|
34
|
+
shadow: "0 18px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.9)",
|
|
35
|
+
containerAccent: "rgba(37, 99, 235, 0.96)",
|
|
36
|
+
actionAccent: "rgba(245, 158, 11, 0.96)",
|
|
37
|
+
},
|
|
38
|
+
},
|
|
39
|
+
status: {
|
|
40
|
+
info: {
|
|
41
|
+
border: "1px solid rgba(217, 119, 6, 0.24)",
|
|
42
|
+
background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.98) 100%)",
|
|
43
|
+
color: "#b45309",
|
|
44
|
+
shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
|
|
45
|
+
},
|
|
46
|
+
warning: {
|
|
47
|
+
border: "1px solid rgba(217, 119, 6, 0.24)",
|
|
48
|
+
background: "linear-gradient(180deg, rgba(255,251,235,0.98) 0%, rgba(254,243,199,0.98) 100%)",
|
|
49
|
+
color: "#b45309",
|
|
50
|
+
shadow: "0 6px 14px rgba(180, 83, 9, 0.16)",
|
|
51
|
+
},
|
|
52
|
+
},
|
|
14
53
|
density: {
|
|
15
54
|
zone: {
|
|
16
55
|
detail: 200,
|
|
@@ -32,6 +71,34 @@ export function resolveTheme(theme) {
|
|
|
32
71
|
return {
|
|
33
72
|
...defaultTheme,
|
|
34
73
|
...theme,
|
|
74
|
+
surface: {
|
|
75
|
+
chrome: {
|
|
76
|
+
...defaultTheme.surface.chrome,
|
|
77
|
+
...theme.surface?.chrome,
|
|
78
|
+
},
|
|
79
|
+
zone: {
|
|
80
|
+
...defaultTheme.surface.zone,
|
|
81
|
+
...theme.surface?.zone,
|
|
82
|
+
},
|
|
83
|
+
path: {
|
|
84
|
+
...defaultTheme.surface.path,
|
|
85
|
+
...theme.surface?.path,
|
|
86
|
+
},
|
|
87
|
+
anchor: {
|
|
88
|
+
...defaultTheme.surface.anchor,
|
|
89
|
+
...theme.surface?.anchor,
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
status: {
|
|
93
|
+
info: {
|
|
94
|
+
...defaultTheme.status.info,
|
|
95
|
+
...theme.status?.info,
|
|
96
|
+
},
|
|
97
|
+
warning: {
|
|
98
|
+
...defaultTheme.status.warning,
|
|
99
|
+
...theme.status?.warning,
|
|
100
|
+
},
|
|
101
|
+
},
|
|
35
102
|
density: {
|
|
36
103
|
zone: {
|
|
37
104
|
...defaultTheme.density.zone,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoneflow/renderer-dom",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Low-level DOM renderer engines for Zoneflow.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"dist"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@zoneflow/core": "0.0.
|
|
21
|
+
"@zoneflow/core": "0.0.4"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build": "tsc -p tsconfig.json",
|