@statewalker/fsm-charts 0.2.5 → 0.2.7
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 +213 -1
- package/dist/StateChart-cXyVRcs-.d.ts +94 -0
- package/dist/StateChart-cXyVRcs-.d.ts.map +1 -0
- package/dist/StateChartIndex-BK2315qj.d.ts +142 -0
- package/dist/StateChartIndex-BK2315qj.d.ts.map +1 -0
- package/dist/StateChartIndex-BOIrc_nq.js +355 -0
- package/dist/StateChartIndex-BOIrc_nq.js.map +1 -0
- package/dist/buildStatechartsPanel-BX7e0GzA.js +494 -0
- package/dist/buildStatechartsPanel-BX7e0GzA.js.map +1 -0
- package/dist/buildStatechartsPanel-hCtZbdiF.d.ts +79 -0
- package/dist/buildStatechartsPanel-hCtZbdiF.d.ts.map +1 -0
- package/dist/defineProperty-C0rC37pP.js +39 -0
- package/dist/description-panels-DI2MNlbK.js +184 -0
- package/dist/description-panels-DI2MNlbK.js.map +1 -0
- package/dist/getLabelDimensions-BY0q7j3D.d.ts +79 -0
- package/dist/getLabelDimensions-BY0q7j3D.d.ts.map +1 -0
- package/dist/getPadding-Cw0e7G2v.js +25 -0
- package/dist/getPadding-Cw0e7G2v.js.map +1 -0
- package/dist/index-config.d.ts +3 -12
- package/dist/index-config.js +2 -2
- package/dist/index-dom.d.ts +2 -49
- package/dist/index-dom.js +2 -2
- package/dist/index-html.d.ts +3 -2
- package/dist/index-html.js +2 -3
- package/dist/index-layout.d.ts +3 -77
- package/dist/index-layout.js +2 -3
- package/dist/index-runtime.d.ts +3 -141
- package/dist/index-runtime.js +2 -2
- package/dist/index.d.ts +11 -10
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -7
- package/dist/layout-Dp671N6q.js +2465 -0
- package/dist/layout-Dp671N6q.js.map +1 -0
- package/dist/newTreeBuilder-CvtLDjGj.d.ts +54 -0
- package/dist/newTreeBuilder-CvtLDjGj.d.ts.map +1 -0
- package/dist/toFsmStateConfig-DlJkyZni.js +135 -0
- package/dist/toFsmStateConfig-DlJkyZni.js.map +1 -0
- package/dist/toFsmStateConfig-DmOlTRjv.d.ts +15 -0
- package/dist/toFsmStateConfig-DmOlTRjv.d.ts.map +1 -0
- package/package.json +52 -27
- package/src/config/concatTransitionsToString.ts +2 -2
- package/src/config/splitTransitionString.ts +1 -3
- package/src/config/toFsmStateConfig.ts +2 -9
- package/src/dom/buildSections.ts +3 -11
- package/src/dom/description-panels.ts +2 -4
- package/src/dom/getStatesDescriptions.ts +3 -9
- package/src/html/buildStatechartStyles.ts +4 -14
- package/src/html/buildStatechartSvg.ts +2 -14
- package/src/html/buildStatechartsPanel.ts +1 -3
- package/src/layout/buildCharts.ts +1 -2
- package/src/layout/buildFlatCharts.ts +6 -8
- package/src/layout/getGraphParamsProvider.ts +3 -12
- package/src/runtime/RuntimeStatechartApi.ts +10 -32
- package/src/runtime/StateChartIndex.ts +6 -23
- package/src/types/GraphParamsProvider.ts +1 -4
- package/src/utils/BasisCurve.ts +5 -14
- package/src/utils/domToText.ts +2 -6
- package/src/utils/getPadding.ts +1 -2
- package/src/utils/newId.ts +2 -1
- package/src/utils/newRegistry.ts +12 -12
- package/src/utils/serializeAttrs.ts +3 -13
- package/src/utils/serializeCss.ts +1 -5
- package/src/utils/serializeStyle.ts +1 -4
- package/src/utils/toKebabCase.ts +1 -4
- package/dist/StateChart-BYBjTmC2.d.ts +0 -82
- package/dist/chunk-2LFUT2C6.js +0 -2691
- package/dist/chunk-ARZYBFNA.js +0 -133
- package/dist/chunk-CR2M4445.js +0 -608
- package/dist/chunk-FIQDLBWD.js +0 -9
- package/dist/chunk-GW2Z65BN.js +0 -429
- package/dist/chunk-PKBMQBKP.js +0 -5
- package/dist/chunk-RZ4FP6JB.js +0 -233
- package/dist/index-html-BBQqYoST.d.ts +0 -75
- package/src/full/index.ts +0 -1
- package/src/full/toFsmStateCharts.ts +0 -119
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { d as TransitionsGraph, S as StateChart } from './StateChart-BYBjTmC2.js';
|
|
2
|
-
|
|
3
|
-
declare function buildStatechartCss({ prefix }?: {
|
|
4
|
-
prefix?: string | undefined;
|
|
5
|
-
}): string;
|
|
6
|
-
|
|
7
|
-
interface CssTree extends Record<string, string | number | CssTree> {
|
|
8
|
-
}
|
|
9
|
-
declare function serializeCss(obj: CssTree): string;
|
|
10
|
-
|
|
11
|
-
declare const activeStatesStyle: {
|
|
12
|
-
backgroundColor: string;
|
|
13
|
-
borderColor: string;
|
|
14
|
-
borderWidth: string;
|
|
15
|
-
labelColor: string;
|
|
16
|
-
};
|
|
17
|
-
declare const activeTransitionsStyle: {
|
|
18
|
-
backgroundColor: string;
|
|
19
|
-
borderColor: string;
|
|
20
|
-
borderWidth: string;
|
|
21
|
-
lineColor: string;
|
|
22
|
-
lineWidth: string;
|
|
23
|
-
labelColor: string;
|
|
24
|
-
};
|
|
25
|
-
declare const selectedStatesStyle: {
|
|
26
|
-
backgroundColor: string;
|
|
27
|
-
borderColor: string;
|
|
28
|
-
borderWidth: string;
|
|
29
|
-
labelColor: string;
|
|
30
|
-
};
|
|
31
|
-
declare const selectedTransitionsStyle: {
|
|
32
|
-
backgroundColor: string;
|
|
33
|
-
borderColor: string;
|
|
34
|
-
borderWidth: string;
|
|
35
|
-
lineColor: string;
|
|
36
|
-
lineWidth: string;
|
|
37
|
-
labelColor: string;
|
|
38
|
-
};
|
|
39
|
-
declare function buildStateDetailsStyle({ root, }: {
|
|
40
|
-
root?: string;
|
|
41
|
-
}): CssTree;
|
|
42
|
-
declare function buildStateDetailsStyleWithModifier({ root, modifier, states, }: {
|
|
43
|
-
root?: string;
|
|
44
|
-
modifier: string;
|
|
45
|
-
states: Record<string, string>;
|
|
46
|
-
}): CssTree;
|
|
47
|
-
declare function buildStatechartStylesWithModifier({ root, modifier, states, transitions, }: {
|
|
48
|
-
root?: string;
|
|
49
|
-
modifier: string;
|
|
50
|
-
states: Record<string, string>;
|
|
51
|
-
transitions: Record<string, string>;
|
|
52
|
-
}): CssTree;
|
|
53
|
-
declare function buildStatechartStyles({ root, }: {
|
|
54
|
-
root?: string;
|
|
55
|
-
}): CssTree;
|
|
56
|
-
|
|
57
|
-
declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
|
|
58
|
-
graph: TransitionsGraph;
|
|
59
|
-
newId: (prefix: string) => string;
|
|
60
|
-
println: (str: string) => void;
|
|
61
|
-
stateFontSize?: number;
|
|
62
|
-
transitionFontSize?: number;
|
|
63
|
-
initialStateKey?: string;
|
|
64
|
-
finalStateKey?: string;
|
|
65
|
-
}): void;
|
|
66
|
-
|
|
67
|
-
declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
|
|
68
|
-
statechart: StateChart;
|
|
69
|
-
newId: (prefix: string) => string;
|
|
70
|
-
println: (str: string) => void;
|
|
71
|
-
initialStateKey?: string;
|
|
72
|
-
finalStateKey?: string;
|
|
73
|
-
}): void;
|
|
74
|
-
|
|
75
|
-
export { type CssTree as C, activeStatesStyle as a, activeTransitionsStyle as b, buildStateDetailsStyle as c, buildStateDetailsStyleWithModifier as d, buildStatechartCss as e, buildStatechartStyles as f, buildStatechartStylesWithModifier as g, buildStatechartSvg as h, buildStatechartsPanel as i, selectedTransitionsStyle as j, serializeCss as k, selectedStatesStyle as s };
|
package/src/full/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./toFsmStateCharts.js";
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
buildStatechartCss,
|
|
3
|
-
buildStatechartsPanel,
|
|
4
|
-
type FsmStateConfig,
|
|
5
|
-
type StateChart,
|
|
6
|
-
type StateGraphEdge,
|
|
7
|
-
} from "../index-html.js";
|
|
8
|
-
import { buildCharts, getGraphParamsProvider } from "../index-layout.js";
|
|
9
|
-
import { RuntimeStatechartApi, StateChartIndex } from "../runtime/index.js";
|
|
10
|
-
import { newId } from "../utils/newId.js";
|
|
11
|
-
import { newRegistry } from "../utils/newRegistry.js";
|
|
12
|
-
|
|
13
|
-
export type FsmStateCharts = {
|
|
14
|
-
api: RuntimeStatechartApi;
|
|
15
|
-
index: StateChartIndex;
|
|
16
|
-
statechart: StateChart;
|
|
17
|
-
html: string;
|
|
18
|
-
element: HTMLElement;
|
|
19
|
-
|
|
20
|
-
register: (action: () => void) => () => void;
|
|
21
|
-
cleanup: () => void;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export function toFsmStateCharts({
|
|
25
|
-
config,
|
|
26
|
-
lodash,
|
|
27
|
-
onTransitionClick,
|
|
28
|
-
}: {
|
|
29
|
-
onTransitionClick: (transition: StateGraphEdge) => unknown;
|
|
30
|
-
config: FsmStateConfig;
|
|
31
|
-
lodash: any;
|
|
32
|
-
}): FsmStateCharts {
|
|
33
|
-
const statechart = buildCharts({
|
|
34
|
-
lodash,
|
|
35
|
-
newId,
|
|
36
|
-
config,
|
|
37
|
-
padding: [15, 15],
|
|
38
|
-
...getGraphParamsProvider({
|
|
39
|
-
// fontSize: 14,
|
|
40
|
-
stateFontSize: 14,
|
|
41
|
-
stateTextPadding: [14, 16],
|
|
42
|
-
transitionsFontSize: 12,
|
|
43
|
-
transitionsTextPadding: 6,
|
|
44
|
-
}),
|
|
45
|
-
});
|
|
46
|
-
const index = new StateChartIndex({ statechart });
|
|
47
|
-
|
|
48
|
-
const lines: string[] = [];
|
|
49
|
-
buildStatechartsPanel({
|
|
50
|
-
statechart,
|
|
51
|
-
newId,
|
|
52
|
-
println: (str) => lines.push(str),
|
|
53
|
-
});
|
|
54
|
-
const html = lines.join("\n");
|
|
55
|
-
const statechartId = newId("statechart");
|
|
56
|
-
const css = buildStatechartCss({
|
|
57
|
-
// prefix: `#${statechartId}`
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
const container = document.createElement("div");
|
|
61
|
-
container.innerHTML = `${html}
|
|
62
|
-
<style>
|
|
63
|
-
${css}
|
|
64
|
-
#${statechartId} {
|
|
65
|
-
padding: 0.5em 0;
|
|
66
|
-
}
|
|
67
|
-
</style>`;
|
|
68
|
-
container.id = statechartId;
|
|
69
|
-
// const style = container.querySelector("style");
|
|
70
|
-
|
|
71
|
-
const [register, cleanup] = newRegistry();
|
|
72
|
-
register(() => {
|
|
73
|
-
container.remove();
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
const api = new RuntimeStatechartApi({
|
|
77
|
-
element: container,
|
|
78
|
-
statechart,
|
|
79
|
-
});
|
|
80
|
-
const topNodeId = index.getStackByStateId(statechart.id)[0].id;
|
|
81
|
-
// api.selectState(topNodeId);
|
|
82
|
-
api.openStatePanel(topNodeId);
|
|
83
|
-
|
|
84
|
-
register(
|
|
85
|
-
api.onStateClick((stateId) => {
|
|
86
|
-
const nodes = index.getStackByStateId(stateId);
|
|
87
|
-
const nodeIds = nodes.map((n) => n.id);
|
|
88
|
-
api.deselectTransitions();
|
|
89
|
-
const selected = api.toggleState(...nodeIds);
|
|
90
|
-
for (let i = 0; i < nodes.length; i++) {
|
|
91
|
-
const node = nodes[i];
|
|
92
|
-
const stateId = node.id;
|
|
93
|
-
if (i < nodes.length - 1 || selected) {
|
|
94
|
-
const transitions = index.getTransitions(stateId);
|
|
95
|
-
transitions.forEach((t) => api.selectTransition(t.id));
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
// api.focusStates(...nodeIds);
|
|
99
|
-
}),
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
if (onTransitionClick) {
|
|
103
|
-
register(
|
|
104
|
-
api.onTransitionClick((transitionId) => {
|
|
105
|
-
const transition = index.getEdgeById(transitionId);
|
|
106
|
-
transition && onTransitionClick(transition);
|
|
107
|
-
}),
|
|
108
|
-
);
|
|
109
|
-
}
|
|
110
|
-
return {
|
|
111
|
-
register,
|
|
112
|
-
cleanup,
|
|
113
|
-
statechart,
|
|
114
|
-
api,
|
|
115
|
-
html,
|
|
116
|
-
element: container,
|
|
117
|
-
index,
|
|
118
|
-
};
|
|
119
|
-
}
|