@almadar/ui 2.24.5 → 2.24.9
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/avl/index.cjs +43 -43
- package/dist/avl/index.js +43 -43
- package/dist/components/atoms/AnimatedGraphic.d.ts +29 -0
- package/dist/components/atoms/AnimatedReveal.d.ts +24 -0
- package/dist/components/atoms/index.d.ts +2 -0
- package/dist/components/index.cjs +2277 -1929
- package/dist/components/index.js +1415 -1069
- package/dist/components/organisms/debug/RuntimeDebugger.d.ts +2 -2
- package/dist/components/organisms/game/three/index.cjs +41 -41
- package/dist/components/organisms/game/three/index.js +41 -41
- package/dist/docs/index.cjs +144 -142
- package/dist/docs/index.js +144 -142
- package/dist/illustrations/index.cjs +17 -17
- package/dist/illustrations/index.js +17 -17
- package/dist/lib/index.cjs +62 -50
- package/dist/lib/index.js +62 -50
- package/dist/marketing/index.cjs +457 -172
- package/dist/marketing/index.d.cts +54 -1
- package/dist/marketing/index.d.ts +4 -0
- package/dist/marketing/index.js +457 -174
- package/dist/providers/index.cjs +628 -329
- package/dist/providers/index.js +540 -241
- package/dist/runtime/index.cjs +2151 -1770
- package/dist/runtime/index.js +1392 -1011
- package/package.json +1 -1
- package/tailwind-preset.cjs +32 -134
|
@@ -6642,28 +6642,28 @@ var marginYStyles = {
|
|
|
6642
6642
|
};
|
|
6643
6643
|
var bgStyles = {
|
|
6644
6644
|
transparent: "bg-transparent",
|
|
6645
|
-
primary: "bg-
|
|
6646
|
-
secondary: "bg-
|
|
6647
|
-
muted: "bg-
|
|
6648
|
-
accent: "bg-
|
|
6649
|
-
surface: "bg-
|
|
6650
|
-
overlay: "bg-
|
|
6645
|
+
primary: "bg-primary text-primary-foreground",
|
|
6646
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
6647
|
+
muted: "bg-muted text-foreground",
|
|
6648
|
+
accent: "bg-accent text-accent-foreground",
|
|
6649
|
+
surface: "bg-card",
|
|
6650
|
+
overlay: "bg-card/80 backdrop-blur-sm"
|
|
6651
6651
|
};
|
|
6652
6652
|
var roundedStyles = {
|
|
6653
6653
|
none: "rounded-none",
|
|
6654
|
-
sm: "rounded-
|
|
6655
|
-
md: "rounded-
|
|
6656
|
-
lg: "rounded-
|
|
6657
|
-
xl: "rounded-
|
|
6658
|
-
"2xl": "rounded-
|
|
6659
|
-
full: "rounded-
|
|
6654
|
+
sm: "rounded-sm",
|
|
6655
|
+
md: "rounded-md",
|
|
6656
|
+
lg: "rounded-lg",
|
|
6657
|
+
xl: "rounded-xl",
|
|
6658
|
+
"2xl": "rounded-xl",
|
|
6659
|
+
full: "rounded-full"
|
|
6660
6660
|
};
|
|
6661
6661
|
var shadowStyles = {
|
|
6662
6662
|
none: "shadow-none",
|
|
6663
|
-
sm: "shadow-
|
|
6664
|
-
md: "shadow
|
|
6665
|
-
lg: "shadow-
|
|
6666
|
-
xl: "shadow-
|
|
6663
|
+
sm: "shadow-sm",
|
|
6664
|
+
md: "shadow",
|
|
6665
|
+
lg: "shadow-lg",
|
|
6666
|
+
xl: "shadow-lg"
|
|
6667
6667
|
};
|
|
6668
6668
|
var displayStyles = {
|
|
6669
6669
|
block: "block",
|
|
@@ -6751,7 +6751,7 @@ var Box = React26__default.default.forwardRef(
|
|
|
6751
6751
|
// Background
|
|
6752
6752
|
bgStyles[bg],
|
|
6753
6753
|
// Border - uses theme variables
|
|
6754
|
-
border && "border-[length:var(--border-width)] border-
|
|
6754
|
+
border && "border-[length:var(--border-width)] border-border",
|
|
6755
6755
|
// Rounded
|
|
6756
6756
|
roundedStyles[rounded],
|
|
6757
6757
|
// Shadow
|
|
@@ -6636,28 +6636,28 @@ var marginYStyles = {
|
|
|
6636
6636
|
};
|
|
6637
6637
|
var bgStyles = {
|
|
6638
6638
|
transparent: "bg-transparent",
|
|
6639
|
-
primary: "bg-
|
|
6640
|
-
secondary: "bg-
|
|
6641
|
-
muted: "bg-
|
|
6642
|
-
accent: "bg-
|
|
6643
|
-
surface: "bg-
|
|
6644
|
-
overlay: "bg-
|
|
6639
|
+
primary: "bg-primary text-primary-foreground",
|
|
6640
|
+
secondary: "bg-secondary text-secondary-foreground",
|
|
6641
|
+
muted: "bg-muted text-foreground",
|
|
6642
|
+
accent: "bg-accent text-accent-foreground",
|
|
6643
|
+
surface: "bg-card",
|
|
6644
|
+
overlay: "bg-card/80 backdrop-blur-sm"
|
|
6645
6645
|
};
|
|
6646
6646
|
var roundedStyles = {
|
|
6647
6647
|
none: "rounded-none",
|
|
6648
|
-
sm: "rounded-
|
|
6649
|
-
md: "rounded-
|
|
6650
|
-
lg: "rounded-
|
|
6651
|
-
xl: "rounded-
|
|
6652
|
-
"2xl": "rounded-
|
|
6653
|
-
full: "rounded-
|
|
6648
|
+
sm: "rounded-sm",
|
|
6649
|
+
md: "rounded-md",
|
|
6650
|
+
lg: "rounded-lg",
|
|
6651
|
+
xl: "rounded-xl",
|
|
6652
|
+
"2xl": "rounded-xl",
|
|
6653
|
+
full: "rounded-full"
|
|
6654
6654
|
};
|
|
6655
6655
|
var shadowStyles = {
|
|
6656
6656
|
none: "shadow-none",
|
|
6657
|
-
sm: "shadow-
|
|
6658
|
-
md: "shadow
|
|
6659
|
-
lg: "shadow-
|
|
6660
|
-
xl: "shadow-
|
|
6657
|
+
sm: "shadow-sm",
|
|
6658
|
+
md: "shadow",
|
|
6659
|
+
lg: "shadow-lg",
|
|
6660
|
+
xl: "shadow-lg"
|
|
6661
6661
|
};
|
|
6662
6662
|
var displayStyles = {
|
|
6663
6663
|
block: "block",
|
|
@@ -6745,7 +6745,7 @@ var Box = React26.forwardRef(
|
|
|
6745
6745
|
// Background
|
|
6746
6746
|
bgStyles[bg],
|
|
6747
6747
|
// Border - uses theme variables
|
|
6748
|
-
border && "border-[length:var(--border-width)] border-
|
|
6748
|
+
border && "border-[length:var(--border-width)] border-border",
|
|
6749
6749
|
// Rounded
|
|
6750
6750
|
roundedStyles[rounded],
|
|
6751
6751
|
// Shadow
|
package/dist/lib/index.cjs
CHANGED
|
@@ -428,41 +428,52 @@ function clearTraits() {
|
|
|
428
428
|
}
|
|
429
429
|
|
|
430
430
|
// lib/verificationRegistry.ts
|
|
431
|
-
var checks = /* @__PURE__ */ new Map();
|
|
432
|
-
var transitions = [];
|
|
433
|
-
var bridgeHealth = null;
|
|
434
431
|
var MAX_TRANSITIONS = 500;
|
|
435
|
-
|
|
432
|
+
function getState() {
|
|
433
|
+
if (typeof window !== "undefined") {
|
|
434
|
+
const w = window;
|
|
435
|
+
if (!w.__verificationRegistryState) {
|
|
436
|
+
w.__verificationRegistryState = {
|
|
437
|
+
checks: /* @__PURE__ */ new Map(),
|
|
438
|
+
transitions: [],
|
|
439
|
+
bridgeHealth: null,
|
|
440
|
+
listeners: /* @__PURE__ */ new Set()
|
|
441
|
+
};
|
|
442
|
+
}
|
|
443
|
+
return w.__verificationRegistryState;
|
|
444
|
+
}
|
|
445
|
+
return { checks: /* @__PURE__ */ new Map(), transitions: [], bridgeHealth: null, listeners: /* @__PURE__ */ new Set() };
|
|
446
|
+
}
|
|
436
447
|
function notifyListeners5() {
|
|
437
|
-
|
|
448
|
+
getState().listeners.forEach((l) => l());
|
|
438
449
|
exposeOnWindow();
|
|
439
450
|
}
|
|
440
451
|
function registerCheck(id, label, status = "pending", details) {
|
|
441
|
-
checks.set(id, { id, label, status, details, updatedAt: Date.now() });
|
|
452
|
+
getState().checks.set(id, { id, label, status, details, updatedAt: Date.now() });
|
|
442
453
|
notifyListeners5();
|
|
443
454
|
}
|
|
444
455
|
function updateCheck(id, status, details) {
|
|
445
|
-
const check = checks.get(id);
|
|
456
|
+
const check = getState().checks.get(id);
|
|
446
457
|
if (check) {
|
|
447
458
|
check.status = status;
|
|
448
459
|
if (details !== void 0) check.details = details;
|
|
449
460
|
check.updatedAt = Date.now();
|
|
450
461
|
} else {
|
|
451
|
-
checks.set(id, { id, label: id, status, details, updatedAt: Date.now() });
|
|
462
|
+
getState().checks.set(id, { id, label: id, status, details, updatedAt: Date.now() });
|
|
452
463
|
}
|
|
453
464
|
notifyListeners5();
|
|
454
465
|
}
|
|
455
466
|
function getAllChecks() {
|
|
456
|
-
return Array.from(checks.values());
|
|
467
|
+
return Array.from(getState().checks.values());
|
|
457
468
|
}
|
|
458
469
|
function recordTransition(trace) {
|
|
459
470
|
const entry = {
|
|
460
471
|
...trace,
|
|
461
472
|
id: `t-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
|
|
462
473
|
};
|
|
463
|
-
transitions.push(entry);
|
|
464
|
-
if (transitions.length > MAX_TRANSITIONS) {
|
|
465
|
-
transitions.shift();
|
|
474
|
+
getState().transitions.push(entry);
|
|
475
|
+
if (getState().transitions.length > MAX_TRANSITIONS) {
|
|
476
|
+
getState().transitions.shift();
|
|
466
477
|
}
|
|
467
478
|
if (entry.event === "INIT") {
|
|
468
479
|
const hasFetch = entry.effects.some((e) => e.type === "fetch");
|
|
@@ -497,13 +508,13 @@ function recordTransition(trace) {
|
|
|
497
508
|
notifyListeners5();
|
|
498
509
|
}
|
|
499
510
|
function getTransitions() {
|
|
500
|
-
return [...transitions];
|
|
511
|
+
return [...getState().transitions];
|
|
501
512
|
}
|
|
502
513
|
function getTransitionsForTrait(traitName) {
|
|
503
|
-
return transitions.filter((t) => t.traitName === traitName);
|
|
514
|
+
return getState().transitions.filter((t) => t.traitName === traitName);
|
|
504
515
|
}
|
|
505
516
|
function updateBridgeHealth(health) {
|
|
506
|
-
bridgeHealth = { ...health };
|
|
517
|
+
getState().bridgeHealth = { ...health };
|
|
507
518
|
const checkId = "server-bridge";
|
|
508
519
|
if (health.connected) {
|
|
509
520
|
registerCheck(checkId, "Server bridge connected", "pass");
|
|
@@ -518,7 +529,8 @@ function updateBridgeHealth(health) {
|
|
|
518
529
|
notifyListeners5();
|
|
519
530
|
}
|
|
520
531
|
function getBridgeHealth() {
|
|
521
|
-
|
|
532
|
+
const bh = getState().bridgeHealth;
|
|
533
|
+
return bh ? { ...bh } : null;
|
|
522
534
|
}
|
|
523
535
|
function getSummary() {
|
|
524
536
|
const allChecks = getAllChecks();
|
|
@@ -539,8 +551,8 @@ function getSnapshot() {
|
|
|
539
551
|
};
|
|
540
552
|
}
|
|
541
553
|
function subscribeToVerification(listener) {
|
|
542
|
-
|
|
543
|
-
return () =>
|
|
554
|
+
getState().listeners.add(listener);
|
|
555
|
+
return () => getState().listeners.delete(listener);
|
|
544
556
|
}
|
|
545
557
|
function exposeOnWindow() {
|
|
546
558
|
if (typeof window === "undefined") return;
|
|
@@ -557,7 +569,7 @@ function exposeOnWindow() {
|
|
|
557
569
|
}
|
|
558
570
|
function waitForTransition(event, timeoutMs = 1e4) {
|
|
559
571
|
return new Promise((resolve) => {
|
|
560
|
-
const existing = transitions.find((t) => t.event === event);
|
|
572
|
+
const existing = getState().transitions.find((t) => t.event === event);
|
|
561
573
|
if (existing) {
|
|
562
574
|
resolve(existing);
|
|
563
575
|
return;
|
|
@@ -567,7 +579,7 @@ function waitForTransition(event, timeoutMs = 1e4) {
|
|
|
567
579
|
resolve(null);
|
|
568
580
|
}, timeoutMs);
|
|
569
581
|
const unsub = subscribeToVerification(() => {
|
|
570
|
-
const found = transitions.find((t) => t.event === event);
|
|
582
|
+
const found = getState().transitions.find((t) => t.event === event);
|
|
571
583
|
if (found) {
|
|
572
584
|
clearTimeout(timeout);
|
|
573
585
|
unsub();
|
|
@@ -627,9 +639,9 @@ function updateAssetStatus(url, status) {
|
|
|
627
639
|
}
|
|
628
640
|
}
|
|
629
641
|
function clearVerification() {
|
|
630
|
-
checks.clear();
|
|
631
|
-
transitions.length = 0;
|
|
632
|
-
bridgeHealth = null;
|
|
642
|
+
getState().checks.clear();
|
|
643
|
+
getState().transitions.length = 0;
|
|
644
|
+
getState().bridgeHealth = null;
|
|
633
645
|
notifyListeners5();
|
|
634
646
|
}
|
|
635
647
|
exposeOnWindow();
|
|
@@ -812,9 +824,9 @@ function getEffectSummary(effects) {
|
|
|
812
824
|
});
|
|
813
825
|
return summaries.join(" | ");
|
|
814
826
|
}
|
|
815
|
-
function extractOutputsFromTransitions(
|
|
827
|
+
function extractOutputsFromTransitions(transitions) {
|
|
816
828
|
const outputs = /* @__PURE__ */ new Set();
|
|
817
|
-
|
|
829
|
+
transitions.forEach((t) => {
|
|
818
830
|
if (t.effects) {
|
|
819
831
|
t.effects.forEach((effect) => {
|
|
820
832
|
if (Array.isArray(effect)) {
|
|
@@ -839,7 +851,7 @@ function getNodeRadius(stateName, config) {
|
|
|
839
851
|
if (textLength > 6) return baseRadius + 8;
|
|
840
852
|
return baseRadius;
|
|
841
853
|
}
|
|
842
|
-
function calculateLayout(states,
|
|
854
|
+
function calculateLayout(states, transitions, options, config) {
|
|
843
855
|
const positions = {};
|
|
844
856
|
const entityBoxWidth = options.hasEntity ? 200 : 0;
|
|
845
857
|
const outputBoxWidth = options.hasOutputs ? 200 : 0;
|
|
@@ -848,7 +860,7 @@ function calculateLayout(states, transitions2, options, config) {
|
|
|
848
860
|
states.filter((s) => s.isFinal);
|
|
849
861
|
states.filter((s) => !s.isInitial && !s.isFinal);
|
|
850
862
|
let maxLabelLength = 0;
|
|
851
|
-
|
|
863
|
+
transitions.forEach((t) => {
|
|
852
864
|
if (t.effects && t.effects.length > 0) {
|
|
853
865
|
const summary = getEffectSummary(t.effects);
|
|
854
866
|
maxLabelLength = Math.max(maxLabelLength, summary.length);
|
|
@@ -874,7 +886,7 @@ function calculateLayout(states, transitions2, options, config) {
|
|
|
874
886
|
if (stateColumn[name] === void 0) {
|
|
875
887
|
stateColumn[name] = col;
|
|
876
888
|
}
|
|
877
|
-
|
|
889
|
+
transitions.forEach((t) => {
|
|
878
890
|
if (t.from === name && t.from !== t.to && !visited.has(t.to)) {
|
|
879
891
|
queue.push({ name: t.to, col: col + 1 });
|
|
880
892
|
}
|
|
@@ -954,11 +966,11 @@ function drawStateSvg(name, x, y, state, config) {
|
|
|
954
966
|
svg += `</g>`;
|
|
955
967
|
return svg;
|
|
956
968
|
}
|
|
957
|
-
function drawTransitionPathSvg(from, to,
|
|
969
|
+
function drawTransitionPathSvg(from, to, transitions, positions, config) {
|
|
958
970
|
const fromPos = positions[from];
|
|
959
971
|
const toPos = positions[to];
|
|
960
972
|
if (!fromPos || !toPos) return "";
|
|
961
|
-
const relevantTransitions =
|
|
973
|
+
const relevantTransitions = transitions.filter((t) => t.from === from && t.to === to);
|
|
962
974
|
if (relevantTransitions.length === 0) return "";
|
|
963
975
|
const fromRadius = getNodeRadius(from, config);
|
|
964
976
|
const toRadius = getNodeRadius(to, config);
|
|
@@ -972,7 +984,7 @@ function drawTransitionPathSvg(from, to, transitions2, positions, config) {
|
|
|
972
984
|
const startY = fromPos.y + ny * fromRadius;
|
|
973
985
|
const endX = toPos.x - nx * (toRadius + 5);
|
|
974
986
|
const endY = toPos.y - ny * (toRadius + 5);
|
|
975
|
-
const hasReverse =
|
|
987
|
+
const hasReverse = transitions.some((t) => t.from === to && t.to === from);
|
|
976
988
|
const isReverse = hasReverse && from > to;
|
|
977
989
|
const baseOffset = hasReverse ? 50 : 30;
|
|
978
990
|
const curveOffset = baseOffset + (relevantTransitions.length > 1 ? 20 : 0);
|
|
@@ -981,11 +993,11 @@ function drawTransitionPathSvg(from, to, transitions2, positions, config) {
|
|
|
981
993
|
const midY = (startY + endY) / 2 + curveOffset * curveDirection;
|
|
982
994
|
return `<path class="transition-path" data-from="${from}" data-to="${to}" d="M ${startX} ${startY} Q ${midX} ${midY} ${endX} ${endY}" stroke="${config.colors.arrow}" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>`;
|
|
983
995
|
}
|
|
984
|
-
function drawTransitionLabelsSvg(from, to,
|
|
996
|
+
function drawTransitionLabelsSvg(from, to, transitions, positions, config) {
|
|
985
997
|
const fromPos = positions[from];
|
|
986
998
|
const toPos = positions[to];
|
|
987
999
|
if (!fromPos || !toPos) return "";
|
|
988
|
-
const relevantTransitions =
|
|
1000
|
+
const relevantTransitions = transitions.filter((t) => t.from === from && t.to === to);
|
|
989
1001
|
if (relevantTransitions.length === 0) return "";
|
|
990
1002
|
const fromRadius = getNodeRadius(from, config);
|
|
991
1003
|
const toRadius = getNodeRadius(to, config);
|
|
@@ -999,7 +1011,7 @@ function drawTransitionLabelsSvg(from, to, transitions2, positions, config) {
|
|
|
999
1011
|
const startY = fromPos.y + ny * fromRadius;
|
|
1000
1012
|
const endX = toPos.x - nx * (toRadius + 5);
|
|
1001
1013
|
const endY = toPos.y - ny * (toRadius + 5);
|
|
1002
|
-
const hasReverse =
|
|
1014
|
+
const hasReverse = transitions.some((t) => t.from === to && t.to === from);
|
|
1003
1015
|
const isReverse = hasReverse && from > to;
|
|
1004
1016
|
const baseOffset = hasReverse ? 50 : 40;
|
|
1005
1017
|
const curveOffset = baseOffset + (relevantTransitions.length > 1 ? 25 : 0);
|
|
@@ -1104,15 +1116,15 @@ function drawLegendSvg(y, config) {
|
|
|
1104
1116
|
}
|
|
1105
1117
|
function renderStateMachineToSvg(stateMachine, options = {}, config = DEFAULT_CONFIG) {
|
|
1106
1118
|
const states = stateMachine.states || [];
|
|
1107
|
-
const
|
|
1119
|
+
const transitions = stateMachine.transitions || [];
|
|
1108
1120
|
const title = options.title || "";
|
|
1109
1121
|
const entity = options.entity;
|
|
1110
|
-
const outputs = extractOutputsFromTransitions(
|
|
1122
|
+
const outputs = extractOutputsFromTransitions(transitions);
|
|
1111
1123
|
const layoutOptions = {
|
|
1112
1124
|
hasEntity: !!entity,
|
|
1113
1125
|
hasOutputs: outputs.length > 0
|
|
1114
1126
|
};
|
|
1115
|
-
const { positions, width, height } = calculateLayout(states,
|
|
1127
|
+
const { positions, width, height } = calculateLayout(states, transitions, layoutOptions, config);
|
|
1116
1128
|
let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height + 40}" viewBox="0 0 ${width} ${height + 40}" class="orbital-state-machine" style="display: block; max-width: none;">`;
|
|
1117
1129
|
svg += `<defs>`;
|
|
1118
1130
|
svg += createArrowMarkerSvg("arrow", config.colors.arrow, config);
|
|
@@ -1130,22 +1142,22 @@ function renderStateMachineToSvg(stateMachine, options = {}, config = DEFAULT_CO
|
|
|
1130
1142
|
svg += drawEntityInputSvg(entity, 20, height / 2);
|
|
1131
1143
|
}
|
|
1132
1144
|
const drawnPairs = /* @__PURE__ */ new Set();
|
|
1133
|
-
|
|
1145
|
+
transitions.forEach((transition) => {
|
|
1134
1146
|
const pairKey = `${transition.from}->${transition.to}`;
|
|
1135
1147
|
if (!drawnPairs.has(pairKey)) {
|
|
1136
1148
|
drawnPairs.add(pairKey);
|
|
1137
|
-
svg += drawTransitionPathSvg(transition.from, transition.to,
|
|
1149
|
+
svg += drawTransitionPathSvg(transition.from, transition.to, transitions, positions, config);
|
|
1138
1150
|
}
|
|
1139
1151
|
});
|
|
1140
1152
|
for (const [name, pos] of Object.entries(positions)) {
|
|
1141
1153
|
svg += drawStateSvg(name, pos.x, pos.y, pos.state, config);
|
|
1142
1154
|
}
|
|
1143
1155
|
drawnPairs.clear();
|
|
1144
|
-
|
|
1156
|
+
transitions.forEach((transition) => {
|
|
1145
1157
|
const pairKey = `${transition.from}->${transition.to}`;
|
|
1146
1158
|
if (!drawnPairs.has(pairKey)) {
|
|
1147
1159
|
drawnPairs.add(pairKey);
|
|
1148
|
-
svg += drawTransitionLabelsSvg(transition.from, transition.to,
|
|
1160
|
+
svg += drawTransitionLabelsSvg(transition.from, transition.to, transitions, positions, config);
|
|
1149
1161
|
}
|
|
1150
1162
|
});
|
|
1151
1163
|
if (outputs.length > 0) {
|
|
@@ -1176,11 +1188,11 @@ function extractStateMachine(data) {
|
|
|
1176
1188
|
}
|
|
1177
1189
|
return null;
|
|
1178
1190
|
}
|
|
1179
|
-
function calculateTransitionPathData(from, to,
|
|
1191
|
+
function calculateTransitionPathData(from, to, transitions, positions, config) {
|
|
1180
1192
|
const fromPos = positions[from];
|
|
1181
1193
|
const toPos = positions[to];
|
|
1182
1194
|
if (!fromPos || !toPos) return null;
|
|
1183
|
-
const relevantTransitions =
|
|
1195
|
+
const relevantTransitions = transitions.filter((t) => t.from === from && t.to === to);
|
|
1184
1196
|
if (relevantTransitions.length === 0) return null;
|
|
1185
1197
|
const fromRadius = getNodeRadius(from, config);
|
|
1186
1198
|
const toRadius = getNodeRadius(to, config);
|
|
@@ -1211,7 +1223,7 @@ function calculateTransitionPathData(from, to, transitions2, positions, config)
|
|
|
1211
1223
|
const startY = fromPos.y + ny * fromRadius;
|
|
1212
1224
|
const endX = toPos.x - nx * (toRadius + 5);
|
|
1213
1225
|
const endY = toPos.y - ny * (toRadius + 5);
|
|
1214
|
-
const hasReverse =
|
|
1226
|
+
const hasReverse = transitions.some((t) => t.from === to && t.to === from);
|
|
1215
1227
|
const isReverse = hasReverse && from > to;
|
|
1216
1228
|
const baseOffset = hasReverse ? 50 : 30;
|
|
1217
1229
|
const curveOffset = baseOffset + (relevantTransitions.length > 1 ? 20 : 0);
|
|
@@ -1226,15 +1238,15 @@ function calculateTransitionPathData(from, to, transitions2, positions, config)
|
|
|
1226
1238
|
}
|
|
1227
1239
|
function renderStateMachineToDomData(stateMachine, options = {}, config = DEFAULT_CONFIG) {
|
|
1228
1240
|
const states = stateMachine.states || [];
|
|
1229
|
-
const
|
|
1241
|
+
const transitions = stateMachine.transitions || [];
|
|
1230
1242
|
const title = options.title || "";
|
|
1231
1243
|
const entity = options.entity;
|
|
1232
|
-
const outputs = extractOutputsFromTransitions(
|
|
1244
|
+
const outputs = extractOutputsFromTransitions(transitions);
|
|
1233
1245
|
const layoutOptions = {
|
|
1234
1246
|
hasEntity: !!entity,
|
|
1235
1247
|
hasOutputs: outputs.length > 0
|
|
1236
1248
|
};
|
|
1237
|
-
const { positions, width, height } = calculateLayout(states,
|
|
1249
|
+
const { positions, width, height } = calculateLayout(states, transitions, layoutOptions, config);
|
|
1238
1250
|
const domStates = Object.entries(positions).map(([name, pos]) => ({
|
|
1239
1251
|
id: `state-${name}`,
|
|
1240
1252
|
name,
|
|
@@ -1248,14 +1260,14 @@ function renderStateMachineToDomData(stateMachine, options = {}, config = DEFAUL
|
|
|
1248
1260
|
const domPaths = [];
|
|
1249
1261
|
const domLabels = [];
|
|
1250
1262
|
const drawnPairs = /* @__PURE__ */ new Set();
|
|
1251
|
-
|
|
1263
|
+
transitions.forEach((transition, idx) => {
|
|
1252
1264
|
const pairKey = `${transition.from}->${transition.to}`;
|
|
1253
1265
|
if (!drawnPairs.has(pairKey)) {
|
|
1254
1266
|
drawnPairs.add(pairKey);
|
|
1255
1267
|
const pathData2 = calculateTransitionPathData(
|
|
1256
1268
|
transition.from,
|
|
1257
1269
|
transition.to,
|
|
1258
|
-
|
|
1270
|
+
transitions,
|
|
1259
1271
|
positions,
|
|
1260
1272
|
config
|
|
1261
1273
|
);
|
|
@@ -1276,7 +1288,7 @@ function renderStateMachineToDomData(stateMachine, options = {}, config = DEFAUL
|
|
|
1276
1288
|
const pathData = calculateTransitionPathData(
|
|
1277
1289
|
transition.from,
|
|
1278
1290
|
transition.to,
|
|
1279
|
-
|
|
1291
|
+
transitions,
|
|
1280
1292
|
positions,
|
|
1281
1293
|
config
|
|
1282
1294
|
);
|