@statewalker/fsm-charts 0.1.3 → 0.1.5
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/{chunk-YYNW6Q2T.js → chunk-NLFRNVS3.js} +159 -97
- package/dist/{chunk-4KTXTN7J.js → chunk-NXS24DZQ.js} +24 -0
- package/dist/index-html-D4UI0s_n.d.ts +75 -0
- package/dist/index-html.d.ts +1 -1
- package/dist/index-html.js +1 -1
- package/dist/index-runtime.d.ts +18 -0
- package/dist/index-runtime.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/html/buildStatechartCss.ts +40 -4
- package/src/html/buildStatechartStyles.ts +153 -100
- package/src/runtime/StateChartIndex.ts +27 -0
- package/dist/index-html-CbDZzk2n.d.ts +0 -33
|
@@ -48,60 +48,138 @@ function serializeCss(obj) {
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
// src/html/buildStatechartStyles.ts
|
|
51
|
-
|
|
51
|
+
var activeStatesStyle = {
|
|
52
|
+
backgroundColor: "white",
|
|
53
|
+
borderColor: "red",
|
|
54
|
+
borderWidth: "2px",
|
|
55
|
+
labelColor: "red"
|
|
56
|
+
};
|
|
57
|
+
var activeTransitionsStyle = {
|
|
58
|
+
backgroundColor: "#eee",
|
|
59
|
+
borderColor: "none",
|
|
60
|
+
borderWidth: "0",
|
|
61
|
+
lineColor: "red",
|
|
62
|
+
lineWidth: "1px",
|
|
63
|
+
labelColor: "red"
|
|
64
|
+
};
|
|
65
|
+
var selectedStatesStyle = {
|
|
66
|
+
backgroundColor: "white",
|
|
67
|
+
borderColor: "navy",
|
|
68
|
+
borderWidth: "2px",
|
|
69
|
+
labelColor: "navy"
|
|
70
|
+
};
|
|
71
|
+
var selectedTransitionsStyle = {
|
|
72
|
+
backgroundColor: "#eee",
|
|
73
|
+
borderColor: "none",
|
|
74
|
+
borderWidth: "0",
|
|
75
|
+
lineColor: "navy",
|
|
76
|
+
lineWidth: "1px",
|
|
77
|
+
labelColor: "navy"
|
|
78
|
+
};
|
|
79
|
+
function buildStateDetailsStyle({
|
|
80
|
+
root = ":root"
|
|
81
|
+
}) {
|
|
52
82
|
return {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
[root]: {
|
|
84
|
+
// --------------------------
|
|
85
|
+
// Panels
|
|
86
|
+
".state-details": {
|
|
87
|
+
backgroundColor: "var(--state-background-color, white)",
|
|
88
|
+
border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
|
|
89
|
+
borderRadius: "0.5em",
|
|
90
|
+
padding: "0.5em"
|
|
91
|
+
},
|
|
92
|
+
".state-details__label": {
|
|
93
|
+
cursor: "pointer",
|
|
94
|
+
color: "var(--transition-label-color, currentColor)",
|
|
95
|
+
fontFamily: "var(--state-label-font-family, sans-serif)",
|
|
96
|
+
fontSize: "var(--state-label-font-size, 14px)"
|
|
97
|
+
},
|
|
98
|
+
".state-details__description": {
|
|
99
|
+
display: "flex",
|
|
100
|
+
flexDirection: "column",
|
|
101
|
+
gap: "0.5em"
|
|
102
|
+
},
|
|
103
|
+
".state-details__chart": {
|
|
104
|
+
maxWidth: "100%",
|
|
105
|
+
overflow: "auto",
|
|
106
|
+
scrollbarWidth: "thin"
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
function buildStateDetailsStyleWithModifier({
|
|
112
|
+
root = ":root",
|
|
113
|
+
modifier,
|
|
114
|
+
states
|
|
115
|
+
}) {
|
|
116
|
+
return {
|
|
117
|
+
[root]: {
|
|
118
|
+
//
|
|
119
|
+
".state-details": {
|
|
120
|
+
[`&.state-details--${modifier}`]: {
|
|
121
|
+
backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
|
|
122
|
+
border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
".state-details__label": {
|
|
126
|
+
[`&.state-details__label--${modifier}`]: {
|
|
127
|
+
color: `var(--state-${modifier}-label-color)`
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
}
|
|
133
|
+
function buildStatechartStylesWithModifier({
|
|
134
|
+
root = ":root",
|
|
135
|
+
modifier,
|
|
136
|
+
states,
|
|
137
|
+
transitions
|
|
138
|
+
}) {
|
|
139
|
+
return {
|
|
140
|
+
[root]: {
|
|
141
|
+
// --------------------------------------
|
|
142
|
+
// Default values for transitions
|
|
143
|
+
[`--transition-${modifier}-background-color`]: transitions.backgroundColor,
|
|
144
|
+
[`--transition-${modifier}-border-color`]: transitions.borderColor,
|
|
145
|
+
[`--transition-${modifier}-border-width`]: transitions.borderWidth,
|
|
146
|
+
[`--transition-${modifier}-line-color`]: transitions.lineColor,
|
|
147
|
+
[`--transition-${modifier}-line-width`]: transitions.lineWidth,
|
|
148
|
+
[`--transition-${modifier}-label-color`]: transitions.labelColor,
|
|
149
|
+
// --------------------------------------
|
|
150
|
+
// Default values for states
|
|
151
|
+
[`--state-${modifier}-background-color`]: states.backgroundColor,
|
|
152
|
+
[`--state-${modifier}-border-color`]: states.borderColor,
|
|
153
|
+
[`--state-${modifier}-border-width`]: states.borderWidth,
|
|
154
|
+
[`--state-${modifier}-label-color`]: states.labelColor,
|
|
155
|
+
".state": {
|
|
156
|
+
[`&.state--${modifier}`]: {
|
|
157
|
+
"--state-background-color": `var(--state-${modifier}-background-color)`,
|
|
158
|
+
"--state-border-color": `var(--state-${modifier}-border-color)`,
|
|
159
|
+
"--state-border-width": `var(--state-${modifier}-border-width)`,
|
|
160
|
+
"--state-label-color": `var(--state-${modifier}-label-color)`
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
".transition": {
|
|
164
|
+
[`&.transition--${modifier}`]: {
|
|
165
|
+
"--transition-background-color": `var(--transition-${modifier}-background-color)`,
|
|
166
|
+
"--transition-border-color": `var(--transition-${modifier}-border-color)`,
|
|
167
|
+
"--transition-border-width": `var(--transition-${modifier}-border-width)`,
|
|
168
|
+
"--transition-line-color": `var(--transition-${modifier}-line-color)`,
|
|
169
|
+
"--transition-line-width": `var(--transition-${modifier}-line-width)`,
|
|
170
|
+
"--transition-label-color": `var(--transition-${modifier}-label-color)`
|
|
171
|
+
}
|
|
172
|
+
}
|
|
82
173
|
}
|
|
83
174
|
};
|
|
84
175
|
}
|
|
85
176
|
function buildStatechartStyles({
|
|
86
177
|
root = ":root"
|
|
87
|
-
}
|
|
178
|
+
}) {
|
|
88
179
|
return {
|
|
89
180
|
[root]: {
|
|
90
181
|
// --------------------------------------
|
|
91
|
-
//
|
|
92
|
-
"--state-background-color": "white",
|
|
93
|
-
"--state-border-color": "silver",
|
|
94
|
-
"--state-border-width": "1px",
|
|
95
|
-
"--state-label-color": "gray",
|
|
96
|
-
"--state-label-font-size": "14px",
|
|
97
|
-
"--state-label-font-family": "sans-serif",
|
|
98
|
-
// Selected states
|
|
99
|
-
"--state-selected-background-color": "#eee",
|
|
100
|
-
"--state-selected-border-color": "red",
|
|
101
|
-
"--state-selected-border-width": "2px",
|
|
102
|
-
"--state-selected-label-color": "red",
|
|
103
|
-
// --------------------------------------
|
|
104
|
-
// Normal transitions
|
|
182
|
+
// Transitions
|
|
105
183
|
"--transition-background-color": "rgba(255,255,255,0.7)",
|
|
106
184
|
"--transition-border-color": "none",
|
|
107
185
|
"--transition-border-width": "1px",
|
|
@@ -110,26 +188,6 @@ function buildStatechartStyles({
|
|
|
110
188
|
"--transition-label-color": "gray",
|
|
111
189
|
"--transition-label-font-size": "12px",
|
|
112
190
|
"--transition-label-font-family": "sans-serif",
|
|
113
|
-
// --------------------------------------
|
|
114
|
-
// Selected transitions
|
|
115
|
-
"--transition-selected-background-color": "#eee",
|
|
116
|
-
"--transition-selected-border-color": "none",
|
|
117
|
-
"--transition-selected-border-width": "0",
|
|
118
|
-
"--transition-selected-line-color": "red",
|
|
119
|
-
"--transition-selected-line-width": "1px",
|
|
120
|
-
"--transition-selected-label-color": "red",
|
|
121
|
-
// --------------------------------------
|
|
122
|
-
// --------------------------------------
|
|
123
|
-
...buildStateDetailsStyle(),
|
|
124
|
-
".transition": {},
|
|
125
|
-
".transition--selected": {
|
|
126
|
-
"--transition-background-color": "var(--transition-selected-background-color)",
|
|
127
|
-
"--transition-border-color": "var(--transition-selected-border-color)",
|
|
128
|
-
"--transition-border-width": "var(--transition-selected-border-width)",
|
|
129
|
-
"--transition-line-color": "var(--transition-selected-line-color)",
|
|
130
|
-
"--transition-line-width": "var(--transition-selected-line-width)",
|
|
131
|
-
"--transition-label-color": "var(--transition-selected-label-color)"
|
|
132
|
-
},
|
|
133
191
|
".transition__marker": {
|
|
134
192
|
fill: "var(--transition-line-color, currentColor)",
|
|
135
193
|
stroke: "none"
|
|
@@ -151,35 +209,14 @@ function buildStatechartStyles({
|
|
|
151
209
|
fontFamily: "var(--transition-label-font-family, sans-serif)",
|
|
152
210
|
cursor: "pointer"
|
|
153
211
|
},
|
|
154
|
-
//
|
|
155
|
-
//
|
|
156
|
-
"
|
|
157
|
-
"
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
},
|
|
163
|
-
// --------------------------
|
|
164
|
-
// Panels
|
|
165
|
-
".state__details": {
|
|
166
|
-
backgroundColor: "var(--state-background-color, white)",
|
|
167
|
-
border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
|
|
168
|
-
borderRadius: "0.5em",
|
|
169
|
-
padding: "0.5em"
|
|
170
|
-
},
|
|
171
|
-
".state__description": {
|
|
172
|
-
display: "flex",
|
|
173
|
-
flexDirection: "column",
|
|
174
|
-
gap: "0.5em"
|
|
175
|
-
},
|
|
176
|
-
".state__chart-container": {
|
|
177
|
-
maxWidth: "100%",
|
|
178
|
-
overflow: "auto",
|
|
179
|
-
scrollbarWidth: "thin"
|
|
180
|
-
},
|
|
181
|
-
// --------------------------
|
|
182
|
-
// Statecharts
|
|
212
|
+
// --------------------------------------
|
|
213
|
+
// Normal states
|
|
214
|
+
"--state-background-color": "white",
|
|
215
|
+
"--state-border-color": "silver",
|
|
216
|
+
"--state-border-width": "1px",
|
|
217
|
+
"--state-label-color": "gray",
|
|
218
|
+
"--state-label-font-size": "14px",
|
|
219
|
+
"--state-label-font-family": "sans-serif",
|
|
183
220
|
".state__box": {
|
|
184
221
|
fill: "var(--state-background-color, white)",
|
|
185
222
|
stroke: "var(--state-border-color, currentColor)",
|
|
@@ -216,8 +253,33 @@ function buildStatechartStyles({
|
|
|
216
253
|
|
|
217
254
|
// src/html/buildStatechartCss.ts
|
|
218
255
|
function buildStatechartCss({ prefix = "" } = {}) {
|
|
219
|
-
const
|
|
220
|
-
return
|
|
256
|
+
const root = prefix || ":root";
|
|
257
|
+
return [
|
|
258
|
+
buildStatechartStyles({ root }),
|
|
259
|
+
buildStatechartStylesWithModifier({
|
|
260
|
+
root,
|
|
261
|
+
modifier: "selected",
|
|
262
|
+
states: selectedStatesStyle,
|
|
263
|
+
transitions: selectedTransitionsStyle
|
|
264
|
+
}),
|
|
265
|
+
buildStatechartStylesWithModifier({
|
|
266
|
+
root,
|
|
267
|
+
modifier: "active",
|
|
268
|
+
states: activeStatesStyle,
|
|
269
|
+
transitions: activeTransitionsStyle
|
|
270
|
+
}),
|
|
271
|
+
buildStateDetailsStyle({ root }),
|
|
272
|
+
buildStateDetailsStyleWithModifier({
|
|
273
|
+
root,
|
|
274
|
+
modifier: "selected",
|
|
275
|
+
states: selectedStatesStyle
|
|
276
|
+
}),
|
|
277
|
+
buildStateDetailsStyleWithModifier({
|
|
278
|
+
root,
|
|
279
|
+
modifier: "active",
|
|
280
|
+
states: activeStatesStyle
|
|
281
|
+
})
|
|
282
|
+
].map(serializeCss).join("\n");
|
|
221
283
|
}
|
|
222
284
|
|
|
223
285
|
// src/utils/serializeAttrs.ts
|
|
@@ -536,4 +598,4 @@ function buildStatechartsPanel({
|
|
|
536
598
|
}
|
|
537
599
|
}
|
|
538
600
|
|
|
539
|
-
export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase2 as toKebabCase };
|
|
601
|
+
export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase2 as toKebabCase };
|
|
@@ -226,6 +226,30 @@ var StateChartIndex = class {
|
|
|
226
226
|
this.statechart = statechart;
|
|
227
227
|
this._buildIndexes();
|
|
228
228
|
}
|
|
229
|
+
/**
|
|
230
|
+
* Returns a state node or a chart by the specified identifier.
|
|
231
|
+
* @param id the id of a state node or a chart
|
|
232
|
+
* @returns a state node or a chart
|
|
233
|
+
*/
|
|
234
|
+
getNodeById(id) {
|
|
235
|
+
return this._nodesIndex[id] || this._chartsIndex[id];
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Returns a chart by the specified identifier.
|
|
239
|
+
* @param id the id of a state node or a chart
|
|
240
|
+
* @returns a state node or a chart
|
|
241
|
+
*/
|
|
242
|
+
getChartById(id) {
|
|
243
|
+
return this._chartsIndex[id];
|
|
244
|
+
}
|
|
245
|
+
/**
|
|
246
|
+
* Returns an edge by the specified identifier.
|
|
247
|
+
* @param id the id of a graph edge
|
|
248
|
+
* @returns a graph edge
|
|
249
|
+
*/
|
|
250
|
+
getEdgeById(id) {
|
|
251
|
+
return this._edgeIndex[id];
|
|
252
|
+
}
|
|
229
253
|
/**
|
|
230
254
|
* Transforms a stack of state keys to the corresponding identifiers.
|
|
231
255
|
* If a key in the stack was not found then this method returns
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { S as StateChart, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
|
|
2
|
+
|
|
3
|
+
declare function buildStatechartCss({ prefix }?: {
|
|
4
|
+
prefix?: string | undefined;
|
|
5
|
+
}): string;
|
|
6
|
+
|
|
7
|
+
declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
|
|
8
|
+
statechart: StateChart;
|
|
9
|
+
newId: (prefix: string) => string;
|
|
10
|
+
println: (str: string) => void;
|
|
11
|
+
initialStateKey?: string;
|
|
12
|
+
finalStateKey?: string;
|
|
13
|
+
}): void;
|
|
14
|
+
|
|
15
|
+
interface CssTree extends Record<string, string | number | CssTree> {
|
|
16
|
+
}
|
|
17
|
+
declare function serializeCss(obj: CssTree): string;
|
|
18
|
+
|
|
19
|
+
declare const activeStatesStyle: {
|
|
20
|
+
backgroundColor: string;
|
|
21
|
+
borderColor: string;
|
|
22
|
+
borderWidth: string;
|
|
23
|
+
labelColor: string;
|
|
24
|
+
};
|
|
25
|
+
declare const activeTransitionsStyle: {
|
|
26
|
+
backgroundColor: string;
|
|
27
|
+
borderColor: string;
|
|
28
|
+
borderWidth: string;
|
|
29
|
+
lineColor: string;
|
|
30
|
+
lineWidth: string;
|
|
31
|
+
labelColor: string;
|
|
32
|
+
};
|
|
33
|
+
declare const selectedStatesStyle: {
|
|
34
|
+
backgroundColor: string;
|
|
35
|
+
borderColor: string;
|
|
36
|
+
borderWidth: string;
|
|
37
|
+
labelColor: string;
|
|
38
|
+
};
|
|
39
|
+
declare const selectedTransitionsStyle: {
|
|
40
|
+
backgroundColor: string;
|
|
41
|
+
borderColor: string;
|
|
42
|
+
borderWidth: string;
|
|
43
|
+
lineColor: string;
|
|
44
|
+
lineWidth: string;
|
|
45
|
+
labelColor: string;
|
|
46
|
+
};
|
|
47
|
+
declare function buildStateDetailsStyle({ root, }: {
|
|
48
|
+
root?: string;
|
|
49
|
+
}): CssTree;
|
|
50
|
+
declare function buildStateDetailsStyleWithModifier({ root, modifier, states, }: {
|
|
51
|
+
root?: string;
|
|
52
|
+
modifier: string;
|
|
53
|
+
states: Record<string, string>;
|
|
54
|
+
}): CssTree;
|
|
55
|
+
declare function buildStatechartStylesWithModifier({ root, modifier, states, transitions, }: {
|
|
56
|
+
root?: string;
|
|
57
|
+
modifier: string;
|
|
58
|
+
states: Record<string, string>;
|
|
59
|
+
transitions: Record<string, string>;
|
|
60
|
+
}): CssTree;
|
|
61
|
+
declare function buildStatechartStyles({ root, }: {
|
|
62
|
+
root?: string;
|
|
63
|
+
}): CssTree;
|
|
64
|
+
|
|
65
|
+
declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
|
|
66
|
+
graph: TransitionsGraph;
|
|
67
|
+
newId: (prefix: string) => string;
|
|
68
|
+
println: (str: string) => void;
|
|
69
|
+
stateFontSize?: number;
|
|
70
|
+
transitionFontSize?: number;
|
|
71
|
+
initialStateKey?: string;
|
|
72
|
+
finalStateKey?: string;
|
|
73
|
+
}): void;
|
|
74
|
+
|
|
75
|
+
export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, activeStatesStyle as c, activeTransitionsStyle as d, selectedTransitionsStyle as e, buildStateDetailsStyle as f, buildStateDetailsStyleWithModifier as g, buildStatechartStylesWithModifier as h, buildStatechartStyles as i, buildStatechartSvg as j, serializeCss as k, selectedStatesStyle as s };
|
package/dist/index-html.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
|
|
2
|
-
export { b as buildStatechartCss,
|
|
2
|
+
export { c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle } from './index-html-D4UI0s_n.js';
|
package/dist/index-html.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-
|
|
1
|
+
export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-NLFRNVS3.js';
|
|
2
2
|
import './chunk-NXWOFQMO.js';
|
|
3
3
|
import './chunk-XEO3YXBM.js';
|
package/dist/index-runtime.d.ts
CHANGED
|
@@ -53,6 +53,24 @@ declare class StateChartIndex {
|
|
|
53
53
|
constructor({ statechart }: {
|
|
54
54
|
statechart: StateChart;
|
|
55
55
|
});
|
|
56
|
+
/**
|
|
57
|
+
* Returns a state node or a chart by the specified identifier.
|
|
58
|
+
* @param id the id of a state node or a chart
|
|
59
|
+
* @returns a state node or a chart
|
|
60
|
+
*/
|
|
61
|
+
getNodeById(id: string): StateGraphNode | undefined;
|
|
62
|
+
/**
|
|
63
|
+
* Returns a chart by the specified identifier.
|
|
64
|
+
* @param id the id of a state node or a chart
|
|
65
|
+
* @returns a state node or a chart
|
|
66
|
+
*/
|
|
67
|
+
getChartById(id: string): StateChart | undefined;
|
|
68
|
+
/**
|
|
69
|
+
* Returns an edge by the specified identifier.
|
|
70
|
+
* @param id the id of a graph edge
|
|
71
|
+
* @returns a graph edge
|
|
72
|
+
*/
|
|
73
|
+
getEdgeById(id: string): StateGraphEdge | undefined;
|
|
56
74
|
/**
|
|
57
75
|
* Transforms a stack of state keys to the corresponding identifiers.
|
|
58
76
|
* If a key in the stack was not found then this method returns
|
package/dist/index-runtime.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { RuntimeStatechartApi, StateChartIndex } from './chunk-
|
|
1
|
+
export { RuntimeStatechartApi, StateChartIndex } from './chunk-NXS24DZQ.js';
|
|
2
2
|
import './chunk-XEO3YXBM.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
|
|
2
2
|
export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
|
|
3
|
-
export { C as CssTree, b as buildStatechartCss,
|
|
3
|
+
export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-D4UI0s_n.js';
|
|
4
4
|
export { RuntimeListener, RuntimeStatechartApi, StateChartIndex } from './index-runtime.js';
|
|
5
5
|
|
|
6
6
|
declare function toKebabCase(str: string): string;
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
|
|
2
|
-
export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-
|
|
2
|
+
export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-NLFRNVS3.js';
|
|
3
3
|
import './chunk-NXWOFQMO.js';
|
|
4
|
-
export { RuntimeStatechartApi, StateChartIndex } from './chunk-
|
|
4
|
+
export { RuntimeStatechartApi, StateChartIndex } from './chunk-NXS24DZQ.js';
|
|
5
5
|
import './chunk-XEO3YXBM.js';
|
package/package.json
CHANGED
|
@@ -1,7 +1,43 @@
|
|
|
1
|
-
import { serializeCss } from "../utils/serializeCss";
|
|
2
|
-
import {
|
|
1
|
+
import { serializeCss } from "../utils/serializeCss.ts";
|
|
2
|
+
import {
|
|
3
|
+
activeStatesStyle,
|
|
4
|
+
activeTransitionsStyle,
|
|
5
|
+
buildStatechartStyles,
|
|
6
|
+
buildStatechartStylesWithModifier,
|
|
7
|
+
buildStateDetailsStyle,
|
|
8
|
+
buildStateDetailsStyleWithModifier,
|
|
9
|
+
selectedStatesStyle,
|
|
10
|
+
selectedTransitionsStyle,
|
|
11
|
+
} from "./buildStatechartStyles.ts";
|
|
3
12
|
|
|
4
13
|
export function buildStatechartCss({ prefix = "" } = {}): string {
|
|
5
|
-
const
|
|
6
|
-
return
|
|
14
|
+
const root = prefix || ":root";
|
|
15
|
+
return [
|
|
16
|
+
buildStatechartStyles({ root }),
|
|
17
|
+
buildStatechartStylesWithModifier({
|
|
18
|
+
root,
|
|
19
|
+
modifier: "selected",
|
|
20
|
+
states: selectedStatesStyle,
|
|
21
|
+
transitions: selectedTransitionsStyle,
|
|
22
|
+
}),
|
|
23
|
+
buildStatechartStylesWithModifier({
|
|
24
|
+
root,
|
|
25
|
+
modifier: "active",
|
|
26
|
+
states: activeStatesStyle,
|
|
27
|
+
transitions: activeTransitionsStyle,
|
|
28
|
+
}),
|
|
29
|
+
buildStateDetailsStyle({ root }),
|
|
30
|
+
buildStateDetailsStyleWithModifier({
|
|
31
|
+
root,
|
|
32
|
+
modifier: "selected",
|
|
33
|
+
states: selectedStatesStyle,
|
|
34
|
+
}),
|
|
35
|
+
buildStateDetailsStyleWithModifier({
|
|
36
|
+
root,
|
|
37
|
+
modifier: "active",
|
|
38
|
+
states: activeStatesStyle,
|
|
39
|
+
}),
|
|
40
|
+
]
|
|
41
|
+
.map(serializeCss)
|
|
42
|
+
.join("\n");
|
|
7
43
|
}
|
|
@@ -1,63 +1,162 @@
|
|
|
1
|
+
import { tail } from "lodash";
|
|
1
2
|
import type { CssTree } from "../utils/serializeCss";
|
|
2
3
|
|
|
3
|
-
|
|
4
|
+
export const activeStatesStyle = {
|
|
5
|
+
backgroundColor: "white",
|
|
6
|
+
borderColor: "red",
|
|
7
|
+
borderWidth: "2px",
|
|
8
|
+
labelColor: "red",
|
|
9
|
+
};
|
|
10
|
+
export const activeTransitionsStyle = {
|
|
11
|
+
backgroundColor: "#eee",
|
|
12
|
+
borderColor: "none",
|
|
13
|
+
borderWidth: "0",
|
|
14
|
+
lineColor: "red",
|
|
15
|
+
lineWidth: "1px",
|
|
16
|
+
labelColor: "red",
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export const selectedStatesStyle = {
|
|
20
|
+
backgroundColor: "white",
|
|
21
|
+
borderColor: "navy",
|
|
22
|
+
borderWidth: "2px",
|
|
23
|
+
labelColor: "navy",
|
|
24
|
+
};
|
|
25
|
+
export const selectedTransitionsStyle = {
|
|
26
|
+
backgroundColor: "#eee",
|
|
27
|
+
borderColor: "none",
|
|
28
|
+
borderWidth: "0",
|
|
29
|
+
lineColor: "navy",
|
|
30
|
+
lineWidth: "1px",
|
|
31
|
+
labelColor: "navy",
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export function buildStateDetailsStyle({
|
|
35
|
+
root = ":root",
|
|
36
|
+
}: {
|
|
37
|
+
root?: string;
|
|
38
|
+
}): CssTree {
|
|
4
39
|
return {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)",
|
|
40
|
+
[root]: {
|
|
41
|
+
// --------------------------
|
|
42
|
+
// Panels
|
|
43
|
+
|
|
44
|
+
".state-details": {
|
|
45
|
+
backgroundColor: "var(--state-background-color, white)",
|
|
46
|
+
border:
|
|
47
|
+
"var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
|
|
48
|
+
borderRadius: "0.5em",
|
|
49
|
+
padding: "0.5em",
|
|
50
|
+
},
|
|
51
|
+
".state-details__label": {
|
|
52
|
+
cursor: "pointer",
|
|
53
|
+
color: "var(--transition-label-color, currentColor)",
|
|
54
|
+
fontFamily: "var(--state-label-font-family, sans-serif)",
|
|
55
|
+
fontSize: "var(--state-label-font-size, 14px)",
|
|
56
|
+
},
|
|
57
|
+
".state-details__description": {
|
|
58
|
+
display: "flex",
|
|
59
|
+
flexDirection: "column",
|
|
60
|
+
gap: "0.5em",
|
|
61
|
+
},
|
|
62
|
+
".state-details__chart": {
|
|
63
|
+
maxWidth: "100%",
|
|
64
|
+
overflow: "auto",
|
|
65
|
+
scrollbarWidth: "thin",
|
|
66
|
+
},
|
|
33
67
|
},
|
|
34
|
-
|
|
35
|
-
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export function buildStateDetailsStyleWithModifier({
|
|
72
|
+
root = ":root",
|
|
73
|
+
modifier,
|
|
74
|
+
states,
|
|
75
|
+
}: {
|
|
76
|
+
root?: string;
|
|
77
|
+
modifier: string;
|
|
78
|
+
states: Record<string, string>;
|
|
79
|
+
}): CssTree {
|
|
80
|
+
return {
|
|
81
|
+
[root]: {
|
|
82
|
+
//
|
|
83
|
+
".state-details": {
|
|
84
|
+
[`&.state-details--${modifier}`]: {
|
|
85
|
+
backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
|
|
86
|
+
border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`,
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
".state-details__label": {
|
|
90
|
+
[`&.state-details__label--${modifier}`]: {
|
|
91
|
+
color: `var(--state-${modifier}-label-color)`,
|
|
92
|
+
},
|
|
93
|
+
},
|
|
36
94
|
},
|
|
37
95
|
};
|
|
38
96
|
}
|
|
39
|
-
|
|
97
|
+
|
|
98
|
+
export function buildStatechartStylesWithModifier({
|
|
40
99
|
root = ":root",
|
|
41
|
-
|
|
100
|
+
modifier,
|
|
101
|
+
states,
|
|
102
|
+
transitions,
|
|
103
|
+
}: {
|
|
104
|
+
root?: string;
|
|
105
|
+
modifier: string;
|
|
106
|
+
states: Record<string, string>;
|
|
107
|
+
transitions: Record<string, string>;
|
|
108
|
+
}): CssTree {
|
|
42
109
|
return {
|
|
43
110
|
[root]: {
|
|
44
111
|
// --------------------------------------
|
|
45
|
-
//
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
112
|
+
// Default values for transitions
|
|
113
|
+
[`--transition-${modifier}-background-color`]:
|
|
114
|
+
transitions.backgroundColor,
|
|
115
|
+
[`--transition-${modifier}-border-color`]: transitions.borderColor,
|
|
116
|
+
[`--transition-${modifier}-border-width`]: transitions.borderWidth,
|
|
117
|
+
[`--transition-${modifier}-line-color`]: transitions.lineColor,
|
|
118
|
+
[`--transition-${modifier}-line-width`]: transitions.lineWidth,
|
|
119
|
+
[`--transition-${modifier}-label-color`]: transitions.labelColor,
|
|
52
120
|
|
|
53
|
-
//
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
121
|
+
// --------------------------------------
|
|
122
|
+
// Default values for states
|
|
123
|
+
[`--state-${modifier}-background-color`]: states.backgroundColor,
|
|
124
|
+
[`--state-${modifier}-border-color`]: states.borderColor,
|
|
125
|
+
[`--state-${modifier}-border-width`]: states.borderWidth,
|
|
126
|
+
[`--state-${modifier}-label-color`]: states.labelColor,
|
|
127
|
+
|
|
128
|
+
".state": {
|
|
129
|
+
[`&.state--${modifier}`]: {
|
|
130
|
+
"--state-background-color": `var(--state-${modifier}-background-color)`,
|
|
131
|
+
"--state-border-color": `var(--state-${modifier}-border-color)`,
|
|
132
|
+
"--state-border-width": `var(--state-${modifier}-border-width)`,
|
|
133
|
+
"--state-label-color": `var(--state-${modifier}-label-color)`,
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
|
|
137
|
+
".transition": {
|
|
138
|
+
[`&.transition--${modifier}`]: {
|
|
139
|
+
"--transition-background-color": `var(--transition-${modifier}-background-color)`,
|
|
140
|
+
"--transition-border-color": `var(--transition-${modifier}-border-color)`,
|
|
141
|
+
"--transition-border-width": `var(--transition-${modifier}-border-width)`,
|
|
142
|
+
"--transition-line-color": `var(--transition-${modifier}-line-color)`,
|
|
143
|
+
"--transition-line-width": `var(--transition-${modifier}-line-width)`,
|
|
144
|
+
"--transition-label-color": `var(--transition-${modifier}-label-color)`,
|
|
145
|
+
},
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
};
|
|
149
|
+
}
|
|
58
150
|
|
|
151
|
+
export function buildStatechartStyles({
|
|
152
|
+
root = ":root",
|
|
153
|
+
}: {
|
|
154
|
+
root?: string;
|
|
155
|
+
}): CssTree {
|
|
156
|
+
return {
|
|
157
|
+
[root]: {
|
|
59
158
|
// --------------------------------------
|
|
60
|
-
//
|
|
159
|
+
// Transitions
|
|
61
160
|
"--transition-background-color": "rgba(255,255,255,0.7)",
|
|
62
161
|
"--transition-border-color": "none",
|
|
63
162
|
"--transition-border-width": "1px",
|
|
@@ -67,28 +166,6 @@ export function buildStatechartStyles({
|
|
|
67
166
|
"--transition-label-font-size": "12px",
|
|
68
167
|
"--transition-label-font-family": "sans-serif",
|
|
69
168
|
|
|
70
|
-
// --------------------------------------
|
|
71
|
-
// Selected transitions
|
|
72
|
-
"--transition-selected-background-color": "#eee",
|
|
73
|
-
"--transition-selected-border-color": "none",
|
|
74
|
-
"--transition-selected-border-width": "0",
|
|
75
|
-
"--transition-selected-line-color": "red",
|
|
76
|
-
"--transition-selected-line-width": "1px",
|
|
77
|
-
"--transition-selected-label-color": "red",
|
|
78
|
-
|
|
79
|
-
// --------------------------------------
|
|
80
|
-
// --------------------------------------
|
|
81
|
-
...buildStateDetailsStyle(),
|
|
82
|
-
".transition": {},
|
|
83
|
-
".transition--selected": {
|
|
84
|
-
"--transition-background-color":
|
|
85
|
-
"var(--transition-selected-background-color)",
|
|
86
|
-
"--transition-border-color": "var(--transition-selected-border-color)",
|
|
87
|
-
"--transition-border-width": "var(--transition-selected-border-width)",
|
|
88
|
-
"--transition-line-color": "var(--transition-selected-line-color)",
|
|
89
|
-
"--transition-line-width": "var(--transition-selected-line-width)",
|
|
90
|
-
"--transition-label-color": "var(--transition-selected-label-color)",
|
|
91
|
-
},
|
|
92
169
|
".transition__marker": {
|
|
93
170
|
fill: "var(--transition-line-color, currentColor)",
|
|
94
171
|
stroke: "none",
|
|
@@ -111,39 +188,15 @@ export function buildStatechartStyles({
|
|
|
111
188
|
cursor: "pointer",
|
|
112
189
|
},
|
|
113
190
|
|
|
114
|
-
//
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
"
|
|
118
|
-
"
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
"--state-label-color": "var(--state-selected-label-color)",
|
|
123
|
-
},
|
|
124
|
-
|
|
125
|
-
// --------------------------
|
|
126
|
-
// Panels
|
|
127
|
-
".state__details": {
|
|
128
|
-
backgroundColor: "var(--state-background-color, white)",
|
|
129
|
-
border:
|
|
130
|
-
"var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
|
|
131
|
-
borderRadius: "0.5em",
|
|
132
|
-
padding: "0.5em",
|
|
133
|
-
},
|
|
134
|
-
".state__description": {
|
|
135
|
-
display: "flex",
|
|
136
|
-
flexDirection: "column",
|
|
137
|
-
gap: "0.5em",
|
|
138
|
-
},
|
|
139
|
-
".state__chart-container": {
|
|
140
|
-
maxWidth: "100%",
|
|
141
|
-
overflow: "auto",
|
|
142
|
-
scrollbarWidth: "thin",
|
|
143
|
-
},
|
|
191
|
+
// --------------------------------------
|
|
192
|
+
// Normal states
|
|
193
|
+
"--state-background-color": "white",
|
|
194
|
+
"--state-border-color": "silver",
|
|
195
|
+
"--state-border-width": "1px",
|
|
196
|
+
"--state-label-color": "gray",
|
|
197
|
+
"--state-label-font-size": "14px",
|
|
198
|
+
"--state-label-font-family": "sans-serif",
|
|
144
199
|
|
|
145
|
-
// --------------------------
|
|
146
|
-
// Statecharts
|
|
147
200
|
".state__box": {
|
|
148
201
|
fill: "var(--state-background-color, white)",
|
|
149
202
|
stroke: "var(--state-border-color, currentColor)",
|
|
@@ -17,6 +17,33 @@ export class StateChartIndex {
|
|
|
17
17
|
this._buildIndexes();
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Returns a state node or a chart by the specified identifier.
|
|
22
|
+
* @param id the id of a state node or a chart
|
|
23
|
+
* @returns a state node or a chart
|
|
24
|
+
*/
|
|
25
|
+
getNodeById(id: string): StateGraphNode | undefined {
|
|
26
|
+
return this._nodesIndex[id] || this._chartsIndex[id];
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Returns a chart by the specified identifier.
|
|
31
|
+
* @param id the id of a state node or a chart
|
|
32
|
+
* @returns a state node or a chart
|
|
33
|
+
*/
|
|
34
|
+
getChartById(id: string): StateChart | undefined {
|
|
35
|
+
return this._chartsIndex[id];
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Returns an edge by the specified identifier.
|
|
40
|
+
* @param id the id of a graph edge
|
|
41
|
+
* @returns a graph edge
|
|
42
|
+
*/
|
|
43
|
+
getEdgeById(id: string): StateGraphEdge | undefined {
|
|
44
|
+
return this._edgeIndex[id];
|
|
45
|
+
}
|
|
46
|
+
|
|
20
47
|
/**
|
|
21
48
|
* Transforms a stack of state keys to the corresponding identifiers.
|
|
22
49
|
* If a key in the stack was not found then this method returns
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { S as StateChart, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
|
|
2
|
-
|
|
3
|
-
declare function buildStatechartCss({ prefix }?: {
|
|
4
|
-
prefix?: string | undefined;
|
|
5
|
-
}): string;
|
|
6
|
-
|
|
7
|
-
declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
|
|
8
|
-
statechart: StateChart;
|
|
9
|
-
newId: (prefix: string) => string;
|
|
10
|
-
println: (str: string) => void;
|
|
11
|
-
initialStateKey?: string;
|
|
12
|
-
finalStateKey?: string;
|
|
13
|
-
}): void;
|
|
14
|
-
|
|
15
|
-
interface CssTree extends Record<string, string | number | CssTree> {
|
|
16
|
-
}
|
|
17
|
-
declare function serializeCss(obj: CssTree): string;
|
|
18
|
-
|
|
19
|
-
declare function buildStatechartStyles({ root, }?: {
|
|
20
|
-
root?: string;
|
|
21
|
-
}): CssTree;
|
|
22
|
-
|
|
23
|
-
declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
|
|
24
|
-
graph: TransitionsGraph;
|
|
25
|
-
newId: (prefix: string) => string;
|
|
26
|
-
println: (str: string) => void;
|
|
27
|
-
stateFontSize?: number;
|
|
28
|
-
transitionFontSize?: number;
|
|
29
|
-
initialStateKey?: string;
|
|
30
|
-
finalStateKey?: string;
|
|
31
|
-
}): void;
|
|
32
|
-
|
|
33
|
-
export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, buildStatechartStyles as c, buildStatechartSvg as d, serializeCss as s };
|