@cascivo/flow 0.17.1 → 1.0.0
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/index.d.ts +9 -0
- package/dist/index.js +68 -68
- package/dist/node/index.js +68 -68
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -545,6 +545,14 @@ interface FlowMiniMapProps {
|
|
|
545
545
|
nodeColor?: string | undefined;
|
|
546
546
|
onViewportChange?: ((viewport: Viewport) => void) | undefined;
|
|
547
547
|
label?: string | undefined;
|
|
548
|
+
/**
|
|
549
|
+
* Alias of `label` — the same invisible accessible name under the catalog's own spelling.
|
|
550
|
+
*
|
|
551
|
+
* `ariaLabel` is what the catalog calls a name nothing paints, so it is the guess an agent
|
|
552
|
+
* makes after reading one other component (2026-08-21 report item 1). This component
|
|
553
|
+
* predates the convention and shipped `label`; both work and neither is deprecated.
|
|
554
|
+
*/
|
|
555
|
+
ariaLabel?: string | undefined;
|
|
548
556
|
className?: string | undefined;
|
|
549
557
|
}
|
|
550
558
|
/**
|
|
@@ -562,6 +570,7 @@ declare function FlowMiniMap({
|
|
|
562
570
|
nodeColor,
|
|
563
571
|
onViewportChange,
|
|
564
572
|
label,
|
|
573
|
+
ariaLabel,
|
|
565
574
|
className
|
|
566
575
|
}: FlowMiniMapProps): import("react").JSX.Element;
|
|
567
576
|
type FlowPanelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
package/dist/index.js
CHANGED
|
@@ -285,16 +285,16 @@ function B(e, t, n) {
|
|
|
285
285
|
}
|
|
286
286
|
//#endregion
|
|
287
287
|
//#region src/engine/script.ts
|
|
288
|
-
function
|
|
288
|
+
function V(e) {
|
|
289
289
|
return "edge" in e;
|
|
290
290
|
}
|
|
291
|
-
function
|
|
291
|
+
function ee(e, t) {
|
|
292
292
|
let n = {
|
|
293
293
|
label: e.label,
|
|
294
294
|
description: e.description,
|
|
295
295
|
duration: e.duration
|
|
296
296
|
};
|
|
297
|
-
if (
|
|
297
|
+
if (V(e)) {
|
|
298
298
|
let r = t.find((t) => t.id === e.edge);
|
|
299
299
|
if (!r) throw Error(`FlowStory: step references unknown edge "${e.edge}"`);
|
|
300
300
|
return {
|
|
@@ -317,8 +317,8 @@ function te(e, t) {
|
|
|
317
317
|
};
|
|
318
318
|
throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`);
|
|
319
319
|
}
|
|
320
|
-
function
|
|
321
|
-
return e.map((e) =>
|
|
320
|
+
function te(e, t) {
|
|
321
|
+
return e.map((e) => ee(e, t));
|
|
322
322
|
}
|
|
323
323
|
//#endregion
|
|
324
324
|
//#region src/core/use-viewport.ts
|
|
@@ -421,7 +421,7 @@ function U(e, t = {}) {
|
|
|
421
421
|
//#endregion
|
|
422
422
|
//#region src/core/use-connection.ts
|
|
423
423
|
var ne = "[data-flow-handle][data-handle-type=\"source\"]", re = "[data-flow-handle][data-handle-type=\"target\"]";
|
|
424
|
-
function
|
|
424
|
+
function ie(e) {
|
|
425
425
|
let { containerRef: t } = e, n = o(null), r = u(e.onConnect);
|
|
426
426
|
r.current = e.onConnect;
|
|
427
427
|
let a = u(e.isValid);
|
|
@@ -474,9 +474,9 @@ function W(e) {
|
|
|
474
474
|
}
|
|
475
475
|
//#endregion
|
|
476
476
|
//#region src/core/use-story.ts
|
|
477
|
-
var
|
|
478
|
-
function
|
|
479
|
-
let { steps: r, loop: i = !0, stepDuration: a =
|
|
477
|
+
var ae = 1500;
|
|
478
|
+
function oe(e) {
|
|
479
|
+
let { steps: r, loop: i = !0, stepDuration: a = ae, stepGap: o = 0 } = e, [c, l] = n({
|
|
480
480
|
value: e.currentStep,
|
|
481
481
|
defaultValue: e.defaultCurrentStep ?? 0,
|
|
482
482
|
onChange: e.onStepChange
|
|
@@ -520,14 +520,14 @@ function ae(e) {
|
|
|
520
520
|
}
|
|
521
521
|
};
|
|
522
522
|
}
|
|
523
|
-
var
|
|
523
|
+
var W = {
|
|
524
524
|
canvas: "_canvas_6fiig_2",
|
|
525
525
|
pane: "_pane_6fiig_13",
|
|
526
526
|
panSurface: "_panSurface_6fiig_24"
|
|
527
527
|
};
|
|
528
528
|
//#endregion
|
|
529
529
|
//#region src/core/flow-canvas/flow-canvas.tsx
|
|
530
|
-
function
|
|
530
|
+
function se({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportChange: a, minZoom: o, maxZoom: s, panOnDrag: l = !0, zoomOnScroll: u = !0, fitView: d = !1, controller: m, chrome: h, className: g, role: _ = "application", ...v }) {
|
|
531
531
|
c();
|
|
532
532
|
let b = y({
|
|
533
533
|
viewport: r,
|
|
@@ -542,11 +542,11 @@ function oe({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
|
|
|
542
542
|
}), C = m ?? S, w = x.viewport.value;
|
|
543
543
|
return /* @__PURE__ */ p("div", {
|
|
544
544
|
ref: C.containerRef,
|
|
545
|
-
className: e(
|
|
545
|
+
className: e(W.canvas, g),
|
|
546
546
|
role: _,
|
|
547
547
|
...v,
|
|
548
548
|
children: [/* @__PURE__ */ p("div", {
|
|
549
|
-
className:
|
|
549
|
+
className: W.pane,
|
|
550
550
|
style: {
|
|
551
551
|
"--flow-tx": `${w.x}px`,
|
|
552
552
|
"--flow-ty": `${w.y}px`,
|
|
@@ -554,20 +554,20 @@ function oe({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
|
|
|
554
554
|
},
|
|
555
555
|
children: [/* @__PURE__ */ f("div", {
|
|
556
556
|
ref: C.panHandleRef,
|
|
557
|
-
className:
|
|
557
|
+
className: W.panSurface,
|
|
558
558
|
"aria-hidden": "true"
|
|
559
559
|
}), t]
|
|
560
560
|
}), h]
|
|
561
561
|
});
|
|
562
562
|
}
|
|
563
|
-
var
|
|
563
|
+
var ce = { background: "_background_1pu9x_2" };
|
|
564
564
|
//#endregion
|
|
565
565
|
//#region src/flows/flow-background/flow-background.tsx
|
|
566
|
-
function
|
|
566
|
+
function le({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className: i, style: a, ...o }) {
|
|
567
567
|
return /* @__PURE__ */ f("div", {
|
|
568
568
|
"data-variant": e,
|
|
569
569
|
"aria-hidden": "true",
|
|
570
|
-
className: m(
|
|
570
|
+
className: m(ce.background, i),
|
|
571
571
|
style: {
|
|
572
572
|
"--flow-bg-gap": `${t}px`,
|
|
573
573
|
"--flow-bg-size": `${n}px`,
|
|
@@ -578,10 +578,10 @@ function ce({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className
|
|
|
578
578
|
...o
|
|
579
579
|
});
|
|
580
580
|
}
|
|
581
|
-
var
|
|
581
|
+
var ue = { node: "_node_9zyg4_2" };
|
|
582
582
|
//#endregion
|
|
583
583
|
//#region src/flows/flow-node/flow-node.tsx
|
|
584
|
-
function
|
|
584
|
+
function de({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMeasure: l, zoom: d = 1, selected: p = !1, draggable: m = !0, interactive: h = !0, onSelect: g, children: _, className: v, onClick: y, onKeyDown: b, ...x }) {
|
|
585
585
|
c();
|
|
586
586
|
let S = m && h, [C, w] = n({
|
|
587
587
|
value: i,
|
|
@@ -636,7 +636,7 @@ function ue({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
|
|
|
636
636
|
"data-static": !h || void 0,
|
|
637
637
|
role: "group",
|
|
638
638
|
tabIndex: h ? 0 : void 0,
|
|
639
|
-
className: e(
|
|
639
|
+
className: e(ue.node, v),
|
|
640
640
|
style: {
|
|
641
641
|
"--flow-x": `${P.x}px`,
|
|
642
642
|
"--flow-y": `${P.y}px`
|
|
@@ -651,7 +651,7 @@ function ue({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
|
|
|
651
651
|
children: _
|
|
652
652
|
});
|
|
653
653
|
}
|
|
654
|
-
var
|
|
654
|
+
var G = {
|
|
655
655
|
handle: "_handle_8a1xa_2",
|
|
656
656
|
dot: "_dot_8a1xa_41"
|
|
657
657
|
};
|
|
@@ -668,10 +668,10 @@ function K({ type: e, position: t, id: n, isConnectable: r = !0, className: i, .
|
|
|
668
668
|
"data-connectable": r || void 0,
|
|
669
669
|
"data-flow-handle": "",
|
|
670
670
|
tabIndex: r ? 0 : -1,
|
|
671
|
-
className: m(
|
|
671
|
+
className: m(G.handle, i),
|
|
672
672
|
...a,
|
|
673
673
|
children: /* @__PURE__ */ f("span", {
|
|
674
|
-
className:
|
|
674
|
+
className: G.dot,
|
|
675
675
|
"aria-hidden": "true"
|
|
676
676
|
})
|
|
677
677
|
});
|
|
@@ -809,22 +809,22 @@ var Z = {
|
|
|
809
809
|
};
|
|
810
810
|
//#endregion
|
|
811
811
|
//#region src/flows/flow-minimap/flow-minimap.tsx
|
|
812
|
-
function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: m, onViewportChange: _, label: v,
|
|
812
|
+
function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: m, onViewportChange: _, label: v, ariaLabel: y, className: b }) {
|
|
813
813
|
c();
|
|
814
|
-
let
|
|
814
|
+
let S = E(t) ?? {
|
|
815
815
|
x: 0,
|
|
816
816
|
y: 0,
|
|
817
817
|
width: 1,
|
|
818
818
|
height: 1
|
|
819
|
-
},
|
|
820
|
-
x:
|
|
821
|
-
y:
|
|
822
|
-
width:
|
|
823
|
-
height:
|
|
824
|
-
},
|
|
825
|
-
x: e.x *
|
|
826
|
-
y: e.y *
|
|
827
|
-
}),
|
|
819
|
+
}, C = S.width || 1, T = S.height || 1, D = C * .1, O = T * .1, k = {
|
|
820
|
+
x: S.x - D,
|
|
821
|
+
y: S.y - O,
|
|
822
|
+
width: C + D * 2,
|
|
823
|
+
height: T + O * 2
|
|
824
|
+
}, A = Math.min(o / k.width, l / k.height), j = -k.x * A + (o - k.width * A) / 2, M = -k.y * A + (l - k.height * A) / 2, N = (e) => ({
|
|
825
|
+
x: e.x * A + j,
|
|
826
|
+
y: e.y * A + M
|
|
827
|
+
}), P = null;
|
|
828
828
|
if (i && a) {
|
|
829
829
|
let e = x({
|
|
830
830
|
x: 0,
|
|
@@ -832,45 +832,45 @@ function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
|
|
|
832
832
|
}, n), t = x({
|
|
833
833
|
x: i,
|
|
834
834
|
y: a
|
|
835
|
-
}, n), r =
|
|
836
|
-
|
|
835
|
+
}, n), r = N(e);
|
|
836
|
+
P = {
|
|
837
837
|
x: r.x,
|
|
838
838
|
y: r.y,
|
|
839
|
-
w: (t.x - e.x) *
|
|
840
|
-
h: (t.y - e.y) *
|
|
839
|
+
w: (t.x - e.x) * A,
|
|
840
|
+
h: (t.y - e.y) * A
|
|
841
841
|
};
|
|
842
842
|
}
|
|
843
|
-
let { handleRef:
|
|
844
|
-
|
|
845
|
-
},
|
|
846
|
-
|
|
847
|
-
let
|
|
843
|
+
let { handleRef: F, offset: I, isDragging: L } = r({ isDisabled: !_ }), R = u(null), z = (e) => {
|
|
844
|
+
R.current = e, F.current = e;
|
|
845
|
+
}, B = u(_);
|
|
846
|
+
B.current = _;
|
|
847
|
+
let V = u(null);
|
|
848
848
|
return s(() => {
|
|
849
|
-
let e =
|
|
850
|
-
if (!
|
|
849
|
+
let e = L.value, t = I.value;
|
|
850
|
+
if (!B.current) return;
|
|
851
851
|
if (!e) {
|
|
852
|
-
|
|
852
|
+
V.current = null;
|
|
853
853
|
return;
|
|
854
854
|
}
|
|
855
|
-
|
|
855
|
+
V.current ||= {
|
|
856
856
|
vp: n,
|
|
857
857
|
off: t
|
|
858
858
|
};
|
|
859
|
-
let r =
|
|
860
|
-
|
|
861
|
-
x: r.vp.x - (t.x - r.off.x) /
|
|
862
|
-
y: r.vp.y - (t.y - r.off.y) /
|
|
859
|
+
let r = V.current, i = r.vp.zoom;
|
|
860
|
+
B.current({
|
|
861
|
+
x: r.vp.x - (t.x - r.off.x) / A * i,
|
|
862
|
+
y: r.vp.y - (t.y - r.off.y) / A * i,
|
|
863
863
|
zoom: i
|
|
864
864
|
});
|
|
865
865
|
}), /* @__PURE__ */ p("svg", {
|
|
866
866
|
"data-position": d,
|
|
867
|
-
className: e(Z.minimap,
|
|
867
|
+
className: e(Z.minimap, b),
|
|
868
868
|
width: o,
|
|
869
869
|
height: l,
|
|
870
870
|
role: "img",
|
|
871
|
-
"aria-label": v ?? g(h.flow.minimap),
|
|
871
|
+
"aria-label": y ?? v ?? g(h.flow.minimap),
|
|
872
872
|
children: [t.map((e) => {
|
|
873
|
-
let t = w(e), n =
|
|
873
|
+
let t = w(e), n = N({
|
|
874
874
|
x: t.x,
|
|
875
875
|
y: t.y
|
|
876
876
|
});
|
|
@@ -879,18 +879,18 @@ function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
|
|
|
879
879
|
className: Z.node,
|
|
880
880
|
x: n.x,
|
|
881
881
|
y: n.y,
|
|
882
|
-
width: t.width *
|
|
883
|
-
height: t.height *
|
|
882
|
+
width: t.width * A,
|
|
883
|
+
height: t.height * A,
|
|
884
884
|
fill: m
|
|
885
885
|
}, e.id);
|
|
886
|
-
}),
|
|
887
|
-
ref:
|
|
886
|
+
}), P && /* @__PURE__ */ f("rect", {
|
|
887
|
+
ref: z,
|
|
888
888
|
"data-viewport": "",
|
|
889
889
|
className: Z.viewport,
|
|
890
|
-
x:
|
|
891
|
-
y:
|
|
892
|
-
width:
|
|
893
|
-
height:
|
|
890
|
+
x: P.x,
|
|
891
|
+
y: P.y,
|
|
892
|
+
width: P.w,
|
|
893
|
+
height: P.h
|
|
894
894
|
})]
|
|
895
895
|
});
|
|
896
896
|
}
|
|
@@ -917,7 +917,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
917
917
|
minZoom: _,
|
|
918
918
|
maxZoom: v,
|
|
919
919
|
fitOnInit: l
|
|
920
|
-
}), { connection: k } =
|
|
920
|
+
}), { connection: k } = ie({
|
|
921
921
|
containerRef: O.containerRef,
|
|
922
922
|
clientToFlow: (e, t) => {
|
|
923
923
|
let n = O.containerRef.current?.getBoundingClientRect();
|
|
@@ -953,7 +953,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
953
953
|
height: t.height
|
|
954
954
|
} : e];
|
|
955
955
|
})), R = k.value;
|
|
956
|
-
return /* @__PURE__ */ p(
|
|
956
|
+
return /* @__PURE__ */ p(se, {
|
|
957
957
|
flow: D,
|
|
958
958
|
controller: O,
|
|
959
959
|
minZoom: _,
|
|
@@ -972,7 +972,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
972
972
|
className: e(_e.flow, w),
|
|
973
973
|
style: E,
|
|
974
974
|
children: [
|
|
975
|
-
u && /* @__PURE__ */ f(
|
|
975
|
+
u && /* @__PURE__ */ f(le, { ...typeof u == "object" ? u : {} }),
|
|
976
976
|
P.map((e) => {
|
|
977
977
|
let t = L.get(e.source), n = L.get(e.target);
|
|
978
978
|
if (!t || !n) return null;
|
|
@@ -1000,7 +1000,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
1000
1000
|
targetY: R.to.y,
|
|
1001
1001
|
markerEnd: !1
|
|
1002
1002
|
}),
|
|
1003
|
-
N.map((e) => /* @__PURE__ */ f(
|
|
1003
|
+
N.map((e) => /* @__PURE__ */ f(de, {
|
|
1004
1004
|
id: e.id,
|
|
1005
1005
|
position: e.position,
|
|
1006
1006
|
zoom: F,
|
|
@@ -1042,7 +1042,7 @@ var Q = {
|
|
|
1042
1042
|
};
|
|
1043
1043
|
function be({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 1500, stepGap: o = 0, playing: s, currentStep: l, onStepChange: u, controls: d = !0, autoPlay: m = !0, background: _ = !0, interactive: v = !1, labels: y, clock: b, className: x, style: S }) {
|
|
1044
1044
|
c();
|
|
1045
|
-
let C =
|
|
1045
|
+
let C = te(r, n), w = oe({
|
|
1046
1046
|
steps: C,
|
|
1047
1047
|
loop: i,
|
|
1048
1048
|
stepDuration: a,
|
|
@@ -1136,4 +1136,4 @@ function be({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
|
|
|
1136
1136
|
});
|
|
1137
1137
|
}
|
|
1138
1138
|
//#endregion
|
|
1139
|
-
export { _ as DEFAULT_NODE_SIZE, ye as Flow,
|
|
1139
|
+
export { _ as DEFAULT_NODE_SIZE, ye as Flow, le as FlowBackground, se as FlowCanvas, pe as FlowControls, J as FlowEdge, K as FlowHandle, me as FlowMiniMap, de as FlowNode, ge as FlowPanel, be as FlowStory, B as applyLayout, M as bezierPath, b as clampZoom, L as edgePath, D as fitViewport, S as flowToScreen, E as graphBounds, R as gridLayout, T as handleAnchor, z as layeredLayout, w as nodeBounds, C as nodeSize, te as resolveScript, ee as resolveStep, x as screenToFlow, I as smoothStepPath, j as straightPath, ie as useConnection, y as useFlow, oe as useStory, U as useViewport };
|
package/dist/node/index.js
CHANGED
|
@@ -284,16 +284,16 @@ function B(e, t, n) {
|
|
|
284
284
|
}
|
|
285
285
|
//#endregion
|
|
286
286
|
//#region src/engine/script.ts
|
|
287
|
-
function
|
|
287
|
+
function V(e) {
|
|
288
288
|
return "edge" in e;
|
|
289
289
|
}
|
|
290
|
-
function
|
|
290
|
+
function ee(e, t) {
|
|
291
291
|
let n = {
|
|
292
292
|
label: e.label,
|
|
293
293
|
description: e.description,
|
|
294
294
|
duration: e.duration
|
|
295
295
|
};
|
|
296
|
-
if (
|
|
296
|
+
if (V(e)) {
|
|
297
297
|
let r = t.find((t) => t.id === e.edge);
|
|
298
298
|
if (!r) throw Error(`FlowStory: step references unknown edge "${e.edge}"`);
|
|
299
299
|
return {
|
|
@@ -316,8 +316,8 @@ function te(e, t) {
|
|
|
316
316
|
};
|
|
317
317
|
throw Error(`FlowStory: no edge connects "${e.from}" and "${e.to}"`);
|
|
318
318
|
}
|
|
319
|
-
function
|
|
320
|
-
return e.map((e) =>
|
|
319
|
+
function te(e, t) {
|
|
320
|
+
return e.map((e) => ee(e, t));
|
|
321
321
|
}
|
|
322
322
|
//#endregion
|
|
323
323
|
//#region src/core/use-viewport.ts
|
|
@@ -420,7 +420,7 @@ function U(e, t = {}) {
|
|
|
420
420
|
//#endregion
|
|
421
421
|
//#region src/core/use-connection.ts
|
|
422
422
|
var ne = "[data-flow-handle][data-handle-type=\"source\"]", re = "[data-flow-handle][data-handle-type=\"target\"]";
|
|
423
|
-
function
|
|
423
|
+
function ie(e) {
|
|
424
424
|
let { containerRef: t } = e, n = o(null), r = u(e.onConnect);
|
|
425
425
|
r.current = e.onConnect;
|
|
426
426
|
let a = u(e.isValid);
|
|
@@ -473,9 +473,9 @@ function W(e) {
|
|
|
473
473
|
}
|
|
474
474
|
//#endregion
|
|
475
475
|
//#region src/core/use-story.ts
|
|
476
|
-
var
|
|
477
|
-
function
|
|
478
|
-
let { steps: r, loop: i = !0, stepDuration: a =
|
|
476
|
+
var ae = 1500;
|
|
477
|
+
function oe(e) {
|
|
478
|
+
let { steps: r, loop: i = !0, stepDuration: a = ae, stepGap: o = 0 } = e, [c, l] = n({
|
|
479
479
|
value: e.currentStep,
|
|
480
480
|
defaultValue: e.defaultCurrentStep ?? 0,
|
|
481
481
|
onChange: e.onStepChange
|
|
@@ -519,14 +519,14 @@ function ae(e) {
|
|
|
519
519
|
}
|
|
520
520
|
};
|
|
521
521
|
}
|
|
522
|
-
var
|
|
522
|
+
var W = {
|
|
523
523
|
canvas: "_canvas_6fiig_2",
|
|
524
524
|
pane: "_pane_6fiig_13",
|
|
525
525
|
panSurface: "_panSurface_6fiig_24"
|
|
526
526
|
};
|
|
527
527
|
//#endregion
|
|
528
528
|
//#region src/core/flow-canvas/flow-canvas.tsx
|
|
529
|
-
function
|
|
529
|
+
function se({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportChange: a, minZoom: o, maxZoom: s, panOnDrag: l = !0, zoomOnScroll: u = !0, fitView: d = !1, controller: m, chrome: h, className: g, role: _ = "application", ...v }) {
|
|
530
530
|
c();
|
|
531
531
|
let b = y({
|
|
532
532
|
viewport: r,
|
|
@@ -541,11 +541,11 @@ function oe({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
|
|
|
541
541
|
}), C = m ?? S, w = x.viewport.value;
|
|
542
542
|
return /* @__PURE__ */ p("div", {
|
|
543
543
|
ref: C.containerRef,
|
|
544
|
-
className: e(
|
|
544
|
+
className: e(W.canvas, g),
|
|
545
545
|
role: _,
|
|
546
546
|
...v,
|
|
547
547
|
children: [/* @__PURE__ */ p("div", {
|
|
548
|
-
className:
|
|
548
|
+
className: W.pane,
|
|
549
549
|
style: {
|
|
550
550
|
"--flow-tx": `${w.x}px`,
|
|
551
551
|
"--flow-ty": `${w.y}px`,
|
|
@@ -553,20 +553,20 @@ function oe({ children: t, flow: n, viewport: r, defaultViewport: i, onViewportC
|
|
|
553
553
|
},
|
|
554
554
|
children: [/* @__PURE__ */ f("div", {
|
|
555
555
|
ref: C.panHandleRef,
|
|
556
|
-
className:
|
|
556
|
+
className: W.panSurface,
|
|
557
557
|
"aria-hidden": "true"
|
|
558
558
|
}), t]
|
|
559
559
|
}), h]
|
|
560
560
|
});
|
|
561
561
|
}
|
|
562
|
-
var
|
|
562
|
+
var ce = { background: "_background_1pu9x_2" };
|
|
563
563
|
//#endregion
|
|
564
564
|
//#region src/flows/flow-background/flow-background.tsx
|
|
565
|
-
function
|
|
565
|
+
function le({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className: i, style: a, ...o }) {
|
|
566
566
|
return /* @__PURE__ */ f("div", {
|
|
567
567
|
"data-variant": e,
|
|
568
568
|
"aria-hidden": "true",
|
|
569
|
-
className: m(
|
|
569
|
+
className: m(ce.background, i),
|
|
570
570
|
style: {
|
|
571
571
|
"--flow-bg-gap": `${t}px`,
|
|
572
572
|
"--flow-bg-size": `${n}px`,
|
|
@@ -577,10 +577,10 @@ function ce({ variant: e = "dots", gap: t = 20, size: n = 1, color: r, className
|
|
|
577
577
|
...o
|
|
578
578
|
});
|
|
579
579
|
}
|
|
580
|
-
var
|
|
580
|
+
var ue = { node: "_node_9zyg4_2" };
|
|
581
581
|
//#endregion
|
|
582
582
|
//#region src/flows/flow-node/flow-node.tsx
|
|
583
|
-
function
|
|
583
|
+
function de({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMeasure: l, zoom: d = 1, selected: p = !1, draggable: m = !0, interactive: h = !0, onSelect: g, children: _, className: v, onClick: y, onKeyDown: b, ...x }) {
|
|
584
584
|
c();
|
|
585
585
|
let S = m && h, [C, w] = n({
|
|
586
586
|
value: i,
|
|
@@ -635,7 +635,7 @@ function ue({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
|
|
|
635
635
|
"data-static": !h || void 0,
|
|
636
636
|
role: "group",
|
|
637
637
|
tabIndex: h ? 0 : void 0,
|
|
638
|
-
className: e(
|
|
638
|
+
className: e(ue.node, v),
|
|
639
639
|
style: {
|
|
640
640
|
"--flow-x": `${P.x}px`,
|
|
641
641
|
"--flow-y": `${P.y}px`
|
|
@@ -650,7 +650,7 @@ function ue({ id: t, position: i, defaultPosition: a, onPositionChange: o, onMea
|
|
|
650
650
|
children: _
|
|
651
651
|
});
|
|
652
652
|
}
|
|
653
|
-
var
|
|
653
|
+
var G = {
|
|
654
654
|
handle: "_handle_8a1xa_2",
|
|
655
655
|
dot: "_dot_8a1xa_41"
|
|
656
656
|
};
|
|
@@ -667,10 +667,10 @@ function K({ type: e, position: t, id: n, isConnectable: r = !0, className: i, .
|
|
|
667
667
|
"data-connectable": r || void 0,
|
|
668
668
|
"data-flow-handle": "",
|
|
669
669
|
tabIndex: r ? 0 : -1,
|
|
670
|
-
className: m(
|
|
670
|
+
className: m(G.handle, i),
|
|
671
671
|
...a,
|
|
672
672
|
children: /* @__PURE__ */ f("span", {
|
|
673
|
-
className:
|
|
673
|
+
className: G.dot,
|
|
674
674
|
"aria-hidden": "true"
|
|
675
675
|
})
|
|
676
676
|
});
|
|
@@ -808,22 +808,22 @@ var Z = {
|
|
|
808
808
|
};
|
|
809
809
|
//#endregion
|
|
810
810
|
//#region src/flows/flow-minimap/flow-minimap.tsx
|
|
811
|
-
function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: m, onViewportChange: _, label: v,
|
|
811
|
+
function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, width: o = 200, height: l = 150, position: d = "bottom-right", nodeColor: m, onViewportChange: _, label: v, ariaLabel: y, className: b }) {
|
|
812
812
|
c();
|
|
813
|
-
let
|
|
813
|
+
let S = E(t) ?? {
|
|
814
814
|
x: 0,
|
|
815
815
|
y: 0,
|
|
816
816
|
width: 1,
|
|
817
817
|
height: 1
|
|
818
|
-
},
|
|
819
|
-
x:
|
|
820
|
-
y:
|
|
821
|
-
width:
|
|
822
|
-
height:
|
|
823
|
-
},
|
|
824
|
-
x: e.x *
|
|
825
|
-
y: e.y *
|
|
826
|
-
}),
|
|
818
|
+
}, C = S.width || 1, T = S.height || 1, D = C * .1, O = T * .1, k = {
|
|
819
|
+
x: S.x - D,
|
|
820
|
+
y: S.y - O,
|
|
821
|
+
width: C + D * 2,
|
|
822
|
+
height: T + O * 2
|
|
823
|
+
}, A = Math.min(o / k.width, l / k.height), j = -k.x * A + (o - k.width * A) / 2, M = -k.y * A + (l - k.height * A) / 2, N = (e) => ({
|
|
824
|
+
x: e.x * A + j,
|
|
825
|
+
y: e.y * A + M
|
|
826
|
+
}), P = null;
|
|
827
827
|
if (i && a) {
|
|
828
828
|
let e = x({
|
|
829
829
|
x: 0,
|
|
@@ -831,45 +831,45 @@ function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
|
|
|
831
831
|
}, n), t = x({
|
|
832
832
|
x: i,
|
|
833
833
|
y: a
|
|
834
|
-
}, n), r =
|
|
835
|
-
|
|
834
|
+
}, n), r = N(e);
|
|
835
|
+
P = {
|
|
836
836
|
x: r.x,
|
|
837
837
|
y: r.y,
|
|
838
|
-
w: (t.x - e.x) *
|
|
839
|
-
h: (t.y - e.y) *
|
|
838
|
+
w: (t.x - e.x) * A,
|
|
839
|
+
h: (t.y - e.y) * A
|
|
840
840
|
};
|
|
841
841
|
}
|
|
842
|
-
let { handleRef:
|
|
843
|
-
|
|
844
|
-
},
|
|
845
|
-
|
|
846
|
-
let
|
|
842
|
+
let { handleRef: F, offset: I, isDragging: L } = r({ isDisabled: !_ }), R = u(null), z = (e) => {
|
|
843
|
+
R.current = e, F.current = e;
|
|
844
|
+
}, B = u(_);
|
|
845
|
+
B.current = _;
|
|
846
|
+
let V = u(null);
|
|
847
847
|
return s(() => {
|
|
848
|
-
let e =
|
|
849
|
-
if (!
|
|
848
|
+
let e = L.value, t = I.value;
|
|
849
|
+
if (!B.current) return;
|
|
850
850
|
if (!e) {
|
|
851
|
-
|
|
851
|
+
V.current = null;
|
|
852
852
|
return;
|
|
853
853
|
}
|
|
854
|
-
|
|
854
|
+
V.current ||= {
|
|
855
855
|
vp: n,
|
|
856
856
|
off: t
|
|
857
857
|
};
|
|
858
|
-
let r =
|
|
859
|
-
|
|
860
|
-
x: r.vp.x - (t.x - r.off.x) /
|
|
861
|
-
y: r.vp.y - (t.y - r.off.y) /
|
|
858
|
+
let r = V.current, i = r.vp.zoom;
|
|
859
|
+
B.current({
|
|
860
|
+
x: r.vp.x - (t.x - r.off.x) / A * i,
|
|
861
|
+
y: r.vp.y - (t.y - r.off.y) / A * i,
|
|
862
862
|
zoom: i
|
|
863
863
|
});
|
|
864
864
|
}), /* @__PURE__ */ p("svg", {
|
|
865
865
|
"data-position": d,
|
|
866
|
-
className: e(Z.minimap,
|
|
866
|
+
className: e(Z.minimap, b),
|
|
867
867
|
width: o,
|
|
868
868
|
height: l,
|
|
869
869
|
role: "img",
|
|
870
|
-
"aria-label": v ?? g(h.flow.minimap),
|
|
870
|
+
"aria-label": y ?? v ?? g(h.flow.minimap),
|
|
871
871
|
children: [t.map((e) => {
|
|
872
|
-
let t = w(e), n =
|
|
872
|
+
let t = w(e), n = N({
|
|
873
873
|
x: t.x,
|
|
874
874
|
y: t.y
|
|
875
875
|
});
|
|
@@ -878,18 +878,18 @@ function me({ nodes: t, viewport: n, containerWidth: i, containerHeight: a, widt
|
|
|
878
878
|
className: Z.node,
|
|
879
879
|
x: n.x,
|
|
880
880
|
y: n.y,
|
|
881
|
-
width: t.width *
|
|
882
|
-
height: t.height *
|
|
881
|
+
width: t.width * A,
|
|
882
|
+
height: t.height * A,
|
|
883
883
|
fill: m
|
|
884
884
|
}, e.id);
|
|
885
|
-
}),
|
|
886
|
-
ref:
|
|
885
|
+
}), P && /* @__PURE__ */ f("rect", {
|
|
886
|
+
ref: z,
|
|
887
887
|
"data-viewport": "",
|
|
888
888
|
className: Z.viewport,
|
|
889
|
-
x:
|
|
890
|
-
y:
|
|
891
|
-
width:
|
|
892
|
-
height:
|
|
889
|
+
x: P.x,
|
|
890
|
+
y: P.y,
|
|
891
|
+
width: P.w,
|
|
892
|
+
height: P.h
|
|
893
893
|
})]
|
|
894
894
|
});
|
|
895
895
|
}
|
|
@@ -916,7 +916,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
916
916
|
minZoom: _,
|
|
917
917
|
maxZoom: v,
|
|
918
918
|
fitOnInit: l
|
|
919
|
-
}), { connection: k } =
|
|
919
|
+
}), { connection: k } = ie({
|
|
920
920
|
containerRef: O.containerRef,
|
|
921
921
|
clientToFlow: (e, t) => {
|
|
922
922
|
let n = O.containerRef.current?.getBoundingClientRect();
|
|
@@ -952,7 +952,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
952
952
|
height: t.height
|
|
953
953
|
} : e];
|
|
954
954
|
})), R = k.value;
|
|
955
|
-
return /* @__PURE__ */ p(
|
|
955
|
+
return /* @__PURE__ */ p(se, {
|
|
956
956
|
flow: D,
|
|
957
957
|
controller: O,
|
|
958
958
|
minZoom: _,
|
|
@@ -971,7 +971,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
971
971
|
className: e(_e.flow, w),
|
|
972
972
|
style: E,
|
|
973
973
|
children: [
|
|
974
|
-
u && /* @__PURE__ */ f(
|
|
974
|
+
u && /* @__PURE__ */ f(le, { ...typeof u == "object" ? u : {} }),
|
|
975
975
|
P.map((e) => {
|
|
976
976
|
let t = L.get(e.source), n = L.get(e.target);
|
|
977
977
|
if (!t || !n) return null;
|
|
@@ -999,7 +999,7 @@ function ye({ nodes: t, edges: n, onNodesChange: r, onEdgesChange: i, onConnect:
|
|
|
999
999
|
targetY: R.to.y,
|
|
1000
1000
|
markerEnd: !1
|
|
1001
1001
|
}),
|
|
1002
|
-
N.map((e) => /* @__PURE__ */ f(
|
|
1002
|
+
N.map((e) => /* @__PURE__ */ f(de, {
|
|
1003
1003
|
id: e.id,
|
|
1004
1004
|
position: e.position,
|
|
1005
1005
|
zoom: F,
|
|
@@ -1041,7 +1041,7 @@ var Q = {
|
|
|
1041
1041
|
};
|
|
1042
1042
|
function be({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 1500, stepGap: o = 0, playing: s, currentStep: l, onStepChange: u, controls: d = !0, autoPlay: m = !0, background: _ = !0, interactive: v = !1, labels: y, clock: b, className: x, style: S }) {
|
|
1043
1043
|
c();
|
|
1044
|
-
let C =
|
|
1044
|
+
let C = te(r, n), w = oe({
|
|
1045
1045
|
steps: C,
|
|
1046
1046
|
loop: i,
|
|
1047
1047
|
stepDuration: a,
|
|
@@ -1135,4 +1135,4 @@ function be({ nodes: t, edges: n, script: r, loop: i = !0, stepDuration: a = 150
|
|
|
1135
1135
|
});
|
|
1136
1136
|
}
|
|
1137
1137
|
//#endregion
|
|
1138
|
-
export { _ as DEFAULT_NODE_SIZE, ye as Flow,
|
|
1138
|
+
export { _ as DEFAULT_NODE_SIZE, ye as Flow, le as FlowBackground, se as FlowCanvas, pe as FlowControls, J as FlowEdge, K as FlowHandle, me as FlowMiniMap, de as FlowNode, ge as FlowPanel, be as FlowStory, B as applyLayout, M as bezierPath, b as clampZoom, L as edgePath, D as fitViewport, S as flowToScreen, E as graphBounds, R as gridLayout, T as handleAnchor, z as layeredLayout, w as nodeBounds, C as nodeSize, te as resolveScript, ee as resolveStep, x as screenToFlow, I as smoothStepPath, j as straightPath, ie as useConnection, y as useFlow, oe as useStory, U as useViewport };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cascivo/flow",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Flow & diagram components — CSS-native, signal-driven node/edge graphs with pan/zoom, draggable nodes, animated edges, and scripted storylines, zero dependencies",
|
|
6
6
|
"keywords": [
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"provenance": true
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@cascivo/core": "^0.
|
|
51
|
-
"@cascivo/i18n": "^0.
|
|
50
|
+
"@cascivo/core": "^1.0.0",
|
|
51
|
+
"@cascivo/i18n": "^1.0.0"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@testing-library/jest-dom": "^6.9.1",
|