@zoneflow/renderer-dom 0.0.4 → 0.0.6
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 +14 -6
- package/package.json +3 -2
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { resolveZoneAnchorRect } from "../anchors";
|
|
2
2
|
import { getZoneDepth, isZoneInputEnabled, isZoneOutputEnabled, } from "@zoneflow/core";
|
|
3
3
|
const SCENE_PADDING = 64;
|
|
4
|
+
const RENDER_Z_INDEX = {
|
|
5
|
+
zoneBase: 1,
|
|
6
|
+
pathNode: 1,
|
|
7
|
+
pathStatusBadge: 2,
|
|
8
|
+
zoneLayer: 10,
|
|
9
|
+
edgeLayer: 20,
|
|
10
|
+
pathLayer: 30,
|
|
11
|
+
};
|
|
4
12
|
function applyStyles(el, styles) {
|
|
5
13
|
for (const [key, value] of Object.entries(styles)) {
|
|
6
14
|
// @ts-expect-error CSSStyleDeclaration index access
|
|
@@ -82,7 +90,7 @@ function createPathStatusBadge(params) {
|
|
|
82
90
|
lineHeight: "1",
|
|
83
91
|
fontWeight: "700",
|
|
84
92
|
pointerEvents: "none",
|
|
85
|
-
zIndex:
|
|
93
|
+
zIndex: RENDER_Z_INDEX.pathStatusBadge,
|
|
86
94
|
});
|
|
87
95
|
owner.appendChild(badge);
|
|
88
96
|
}
|
|
@@ -596,7 +604,7 @@ export const domDrawEngine = {
|
|
|
596
604
|
height: `${sceneBounds.height}px`,
|
|
597
605
|
overflow: "visible",
|
|
598
606
|
pointerEvents: "none",
|
|
599
|
-
zIndex:
|
|
607
|
+
zIndex: RENDER_Z_INDEX.edgeLayer,
|
|
600
608
|
});
|
|
601
609
|
applyStyles(zoneLayer, {
|
|
602
610
|
position: "absolute",
|
|
@@ -604,7 +612,7 @@ export const domDrawEngine = {
|
|
|
604
612
|
top: "0",
|
|
605
613
|
width: `${sceneBounds.width}px`,
|
|
606
614
|
height: `${sceneBounds.height}px`,
|
|
607
|
-
zIndex:
|
|
615
|
+
zIndex: RENDER_Z_INDEX.zoneLayer,
|
|
608
616
|
});
|
|
609
617
|
applyStyles(pathLayer, {
|
|
610
618
|
position: "absolute",
|
|
@@ -612,7 +620,7 @@ export const domDrawEngine = {
|
|
|
612
620
|
top: "0",
|
|
613
621
|
width: `${sceneBounds.width}px`,
|
|
614
622
|
height: `${sceneBounds.height}px`,
|
|
615
|
-
zIndex:
|
|
623
|
+
zIndex: RENDER_Z_INDEX.pathLayer,
|
|
616
624
|
});
|
|
617
625
|
worldRoot.appendChild(edgeSvg);
|
|
618
626
|
worldRoot.appendChild(zoneLayer);
|
|
@@ -645,7 +653,7 @@ export const domDrawEngine = {
|
|
|
645
653
|
height: `${zoneVisual.rect.height}px`,
|
|
646
654
|
opacity: getOpacity(visibility.emphasis),
|
|
647
655
|
overflow: "visible",
|
|
648
|
-
zIndex: zoneDepth +
|
|
656
|
+
zIndex: zoneDepth + RENDER_Z_INDEX.zoneBase,
|
|
649
657
|
});
|
|
650
658
|
applyStyles(zoneBodyEl, {
|
|
651
659
|
position: "absolute",
|
|
@@ -716,7 +724,7 @@ export const domDrawEngine = {
|
|
|
716
724
|
boxSizing: "border-box",
|
|
717
725
|
boxShadow: theme.surface.path.shadow,
|
|
718
726
|
opacity: getOpacity(visibility.emphasis),
|
|
719
|
-
zIndex:
|
|
727
|
+
zIndex: RENDER_Z_INDEX.pathNode,
|
|
720
728
|
overflow: "hidden",
|
|
721
729
|
});
|
|
722
730
|
pathEl.addEventListener("click", (event) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoneflow/renderer-dom",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
|
+
"license": "MIT",
|
|
4
5
|
"description": "Low-level DOM renderer engines for Zoneflow.",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "dist/index.js",
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
"dist"
|
|
19
20
|
],
|
|
20
21
|
"dependencies": {
|
|
21
|
-
"@zoneflow/core": "0.0.
|
|
22
|
+
"@zoneflow/core": "0.0.6"
|
|
22
23
|
},
|
|
23
24
|
"scripts": {
|
|
24
25
|
"build": "tsc -p tsconfig.json",
|