@statewalker/fsm-charts 0.2.6 → 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.
Files changed (10) hide show
  1. package/README.md +13 -6
  2. package/dist/{buildStatechartsPanel-CxQlIwTh.js → buildStatechartsPanel-BX7e0GzA.js} +2 -2
  3. package/dist/buildStatechartsPanel-BX7e0GzA.js.map +1 -0
  4. package/dist/index-html.js +1 -1
  5. package/dist/index.js +1 -1
  6. package/package.json +1 -4
  7. package/src/utils/serializeAttrs.ts +1 -3
  8. package/dist/buildStatechartsPanel-CxQlIwTh.js.map +0 -1
  9. package/src/full/index.ts +0 -1
  10. package/src/full/toFsmStateCharts.ts +0 -119
package/README.md CHANGED
@@ -33,8 +33,9 @@ FsmStateConfig --buildCharts--> StateChart --buildStatechartsPanel--> HTML + SVG
33
33
  +--> RuntimeStatechartApi (highlight, panels, clicks on the DOM)
34
34
  ```
35
35
 
36
- The only entry point is the package root, `@statewalker/fsm-charts` (`dist/index.js` with
37
- `.d.ts` types; sources are published in `src/`). It is ESM only.
36
+ The main entry point is the package root, `@statewalker/fsm-charts` (`dist/index.js` with
37
+ `.d.ts` types; sources are published in `src/`); each area also has its own subpath entry
38
+ (see [Internals](#internals-vendored-layout-injected-lodash)). It is ESM only.
38
39
 
39
40
  The `config`, `layout` and `html` functions produce plain strings and objects and run
40
41
  anywhere, including Node.js. The `dom` helpers and `RuntimeStatechartApi` work on DOM
@@ -50,7 +51,8 @@ elements and need a browser or a DOM implementation such as jsdom.
50
51
  into `[from, event, to]` tuples; `concatTransitionsToString(transitions)` does the
51
52
  reverse.
52
53
  - `toFsmStateConfig(json)` - normalize a loosely written configuration (transitions as
53
- strings or arrays, duplicates removed) into an `FsmStateConfig`.
54
+ strings or arrays, duplicates removed) into an `FsmStateConfig` (`undefined` when `json`
55
+ has no string `key`).
54
56
 
55
57
  **Layout**
56
58
 
@@ -68,7 +70,8 @@ elements and need a browser or a DOM implementation such as jsdom.
68
70
  **HTML and CSS**
69
71
 
70
72
  - `buildStatechartsPanel({ statechart, newId, println })` - write nested `<details>`
71
- panels, one per composite state, each with its SVG chart.
73
+ panels, one per state (the root and every nested `states` entry), with an SVG chart in
74
+ each state that has transitions.
72
75
  - `buildStatechartSvg({ graph, newId, println, ... })` - write the SVG of one chart.
73
76
  - `buildStatechartCss({ prefix })` - the stylesheet for the charts, scoped to `prefix`
74
77
  (default `:root`). `buildStatechartStyles`, `buildStatechartStylesWithModifier`,
@@ -183,7 +186,10 @@ console.log(splitTransitionString("Idle -play-> Active -stop-> Idle"));
183
186
  - **Layout.** `buildCharts` walks the state tree and lays out each composite state as a
184
187
  separate flat graph with `buildFlatCharts`, which uses the vendored dagre and graphlib
185
188
  sources in `src/dagre` and `src/graphlib`. Pseudo-states are drawn as `"<initial>"` and
186
- `"<final>"` nodes; both keys can be changed with `initialStateKey` / `finalStateKey`.
189
+ `"<final>"` nodes (a `"*"` source becomes a node keyed `"*"`); both keys can be changed
190
+ with `initialStateKey` / `finalStateKey`, and the same values must then be passed to
191
+ `buildStatechartsPanel` / `buildStatechartSvg` and `StateChartIndex`, which default to
192
+ the same two keys.
187
193
  - **Rendering is string output.** `buildStatechartsPanel` and `buildStatechartSvg` write
188
194
  lines through a `println` callback instead of creating DOM nodes, so the same code
189
195
  renders in a browser, in Node.js, or into a file.
@@ -194,7 +200,8 @@ console.log(splitTransitionString("Idle -play-> Active -stop-> Idle"));
194
200
  holder that `buildFlatCharts` sets from the `lodash` option, so the host decides which
195
201
  lodash build ends up in its bundle. Without it, layout fails with
196
202
  `TypeError: Cannot read properties of undefined (reading 'has')`.
197
- - **Entry points by area.** Besides the package root (everything), each area is its own
203
+ - **Entry points by area.** Besides the package root (everything, including the
204
+ `serializeCss` / `toKebabCase` helpers, which no subpath exports), each area is its own
198
205
  entry: `@statewalker/fsm-charts/config`, `/layout`, `/html`, `/dom` and `/runtime`. Layout
199
206
  and HTML generation import no DOM code, so a Node.js or worker build can take
200
207
  `/layout` and `/html` alone.
package/dist/{buildStatechartsPanel-CxQlIwTh.js → buildStatechartsPanel-BX7e0GzA.js} RENAMED
@@ -285,7 +285,7 @@ function serializeAttrs(attrs = {}, { prefix = "", transform = false } = {}) {
285
285
  const result = [];
286
286
  for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => a > b ? 1 : -1)) {
287
287
  if (value === void 0 || value === null || value === "") continue;
288
- result.push(`${prefix}${escapeValue(key)}${"=" + JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`);
288
+ result.push(`${prefix}${escapeValue(key)}=${JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`);
289
289
  }
290
290
  return result.join(" ");
291
291
  function escapeValue(value) {
@@ -491,4 +491,4 @@ function buildStatechartsPanel({ statechart, newId, println, initialStateKey = "
491
491
  //#endregion
492
492
  export { activeTransitionsStyle as a, buildStatechartStyles as c, selectedTransitionsStyle as d, serializeCss as f, activeStatesStyle as i, buildStatechartStylesWithModifier as l, buildStatechartSvg as n, buildStateDetailsStyle as o, toKebabCase as p, buildStatechartCss as r, buildStateDetailsStyleWithModifier as s, buildStatechartsPanel as t, selectedStatesStyle as u };
493
493
 
494
- //# sourceMappingURL=buildStatechartsPanel-CxQlIwTh.js.map
494
+ //# sourceMappingURL=buildStatechartsPanel-BX7e0GzA.js.map
package/dist/buildStatechartsPanel-BX7e0GzA.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"buildStatechartsPanel-BX7e0GzA.js","names":[],"sources":["../src/utils/toKebabCase.ts","../src/utils/serializeCss.ts","../src/html/buildStatechartStyles.ts","../src/html/buildStatechartCss.ts","../src/utils/BasisCurve.ts","../src/utils/serializeAttrs.ts","../src/html/buildStatechartSvg.ts","../src/html/buildStatechartsPanel.ts"],"sourcesContent":["export function toKebabCase(str?: string): string {\n // Remove spaces:\n str = (str || \"\").trim().replace(/\\s+/gim, \"-\");\n // Transform to kebab:\n str = str.replace(/([^A-Z]?)([A-Z])/g, (_, a, b) => `${a.toLowerCase()}-${b.toLowerCase()}`);\n return str;\n\n // return (\n // str.match(\n // /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g\n // ) || []\n // )\n // .join(\"-\")\n // .toLowerCase();\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport interface CssTree extends Record<string, string | number | CssTree> {}\n\nexport function serializeCss(obj: CssTree) {\n return visitStyle(obj).join(\"\\n\");\n\n function visitStyle(obj: CssTree, lines: string[] = [], prefixes: string[] = [\"\"]) {\n for (const [key, style] of Object.entries(obj)) {\n const selectors = [];\n for (const sel of key.split(\",\").map((_) => _.trim())) {\n for (const prefix of prefixes) {\n const selector = sel.replace(/^(.)/, (_, ch) =>\n ch === \"&\" ? prefix : prefix.length > 0 ? `${prefix} ${ch}` : ch,\n );\n selectors.push(selector);\n }\n }\n const selectorRules = [];\n const extensions: string[] = [];\n for (let [key, value] of Object.entries(style)) {\n if (typeof value === \"object\") {\n visitStyle({ [key]: value }, extensions, selectors);\n } else {\n key = toKebabCase(key);\n selectorRules.push(` ${key}: ${value};`);\n }\n }\n if (selectorRules.length) {\n lines.push(`${selectors.join(\",\\n\")} {`);\n lines.push(...selectorRules);\n lines.push(`}`);\n }\n lines.push(...extensions);\n }\n return lines;\n }\n}\n","import type { CssTree } from \"../utils/serializeCss.js\";\n\nexport const activeStatesStyle = {\n backgroundColor: \"white\",\n borderColor: \"red\",\n borderWidth: \"2px\",\n labelColor: \"red\",\n};\nexport const activeTransitionsStyle = {\n backgroundColor: \"#eee\",\n borderColor: \"none\",\n borderWidth: \"0\",\n lineColor: \"red\",\n lineWidth: \"1px\",\n labelColor: \"red\",\n};\n\nexport const selectedStatesStyle = {\n backgroundColor: \"white\",\n borderColor: \"navy\",\n borderWidth: \"2px\",\n labelColor: \"navy\",\n};\nexport const selectedTransitionsStyle = {\n backgroundColor: \"#eee\",\n borderColor: \"none\",\n borderWidth: \"0\",\n lineColor: \"navy\",\n lineWidth: \"1px\",\n labelColor: \"navy\",\n};\n\nexport function buildStateDetailsStyle({ root = \":root\" }: { root?: string }): CssTree {\n return {\n [root]: {\n // --------------------------\n // Panels\n\n \".state-details\": {\n backgroundColor: \"var(--state-background-color, white)\",\n border: \"var(--state-border-width, 1px) solid var(--state-border-color, currentColor)\",\n borderRadius: \"0.5em\",\n padding: \"0.5em\",\n },\n \".state-details__label\": {\n cursor: \"pointer\",\n color: \"var(--transition-label-color, currentColor)\",\n fontFamily: \"var(--state-label-font-family, sans-serif)\",\n fontSize: \"var(--state-label-font-size, 14px)\",\n },\n \".state-details__content\": {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"0.5em\",\n },\n \".state-details__chart\": {\n maxWidth: \"100%\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n },\n },\n };\n}\n\nexport function buildStateDetailsStyleWithModifier({\n root = \":root\",\n modifier,\n states,\n}: {\n root?: string;\n modifier: string;\n states: Record<string, string>;\n}): CssTree {\n return {\n [root]: {\n //\n \".state-details\": {\n [`&.state-details--${modifier}`]: {\n backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,\n border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`,\n },\n },\n \".state-details__label\": {\n [`&.state-details__label--${modifier}`]: {\n color: `var(--state-${modifier}-label-color)`,\n },\n },\n },\n };\n}\n\nexport function buildStatechartStylesWithModifier({\n root = \":root\",\n modifier,\n states,\n transitions,\n}: {\n root?: string;\n modifier: string;\n states: Record<string, string>;\n transitions: Record<string, string>;\n}): CssTree {\n return {\n [root]: {\n // --------------------------------------\n // Default values for transitions\n [`--transition-${modifier}-background-color`]: transitions.backgroundColor,\n [`--transition-${modifier}-border-color`]: transitions.borderColor,\n [`--transition-${modifier}-border-width`]: transitions.borderWidth,\n [`--transition-${modifier}-line-color`]: transitions.lineColor,\n [`--transition-${modifier}-line-width`]: transitions.lineWidth,\n [`--transition-${modifier}-label-color`]: transitions.labelColor,\n\n // --------------------------------------\n // Default values for states\n [`--state-${modifier}-background-color`]: states.backgroundColor,\n [`--state-${modifier}-border-color`]: states.borderColor,\n [`--state-${modifier}-border-width`]: states.borderWidth,\n [`--state-${modifier}-label-color`]: states.labelColor,\n\n \".state\": {\n [`&.state--${modifier}`]: {\n \"--state-background-color\": `var(--state-${modifier}-background-color)`,\n \"--state-border-color\": `var(--state-${modifier}-border-color)`,\n \"--state-border-width\": `var(--state-${modifier}-border-width)`,\n \"--state-label-color\": `var(--state-${modifier}-label-color)`,\n },\n },\n\n \".transition\": {\n [`&.transition--${modifier}`]: {\n \"--transition-background-color\": `var(--transition-${modifier}-background-color)`,\n \"--transition-border-color\": `var(--transition-${modifier}-border-color)`,\n \"--transition-border-width\": `var(--transition-${modifier}-border-width)`,\n \"--transition-line-color\": `var(--transition-${modifier}-line-color)`,\n \"--transition-line-width\": `var(--transition-${modifier}-line-width)`,\n \"--transition-label-color\": `var(--transition-${modifier}-label-color)`,\n },\n },\n },\n };\n}\n\nexport function buildStatechartStyles({ root = \":root\" }: { root?: string }): CssTree {\n return {\n [root]: {\n // --------------------------------------\n // Transitions\n \"--transition-background-color\": \"rgba(255,255,255,0.7)\",\n \"--transition-border-color\": \"none\",\n \"--transition-border-width\": \"1px\",\n \"--transition-line-color\": \"silver\",\n \"--transition-line-width\": \"1px\",\n \"--transition-label-color\": \"gray\",\n \"--transition-label-font-size\": \"12px\",\n \"--transition-label-font-family\": \"sans-serif\",\n\n \".transition__marker\": {\n fill: \"var(--transition-line-color, currentColor)\",\n stroke: \"none\",\n },\n \".transition__line\": {\n stroke: \"var(--transition-line-color, currentColor)\",\n strokeWidth: \"var(--transition-line-width, 1px)\",\n },\n \".transition__box\": {\n fill: \"var(--transition-background-color, rgba(255,255,255,0.7))\",\n stroke: \"var(--transition-border-color, none)\",\n strokeWidth: \"var(--transition-border-width, 1px)\",\n borderRadius: \"0.5em\",\n cursor: \"pointer\",\n },\n \".transition__label\": {\n fill: \"var(--transition-label-color, currentColor)\",\n fontSize: \"var(--transition-label-font-size, 12px)\",\n fontFamily: \"var(--transition-label-font-family, sans-serif)\",\n cursor: \"pointer\",\n },\n\n // --------------------------------------\n // Normal states\n \"--state-background-color\": \"white\",\n \"--state-border-color\": \"silver\",\n \"--state-border-width\": \"1px\",\n \"--state-label-color\": \"gray\",\n \"--state-label-font-size\": \"14px\",\n \"--state-label-font-family\": \"sans-serif\",\n\n \".state__box\": {\n fill: \"var(--state-background-color, white)\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 1px)\",\n borderRadius: \"0.5em\",\n cursor: \"pointer\",\n },\n \".state__label\": {\n color: \"var(--state-label-color, currentColor)\",\n fill: \"var(--state-label-color, currentColor)\",\n fontSize: \"var(--state-label-font-size, 14px)\",\n fontFamily: \"var(--state-label-font-family, sans-serif)\",\n cursor: \"pointer\",\n },\n \".state__initial\": {\n fill: \"var(--state-border-color, currentColor)\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 2px)\",\n },\n \".state__final\": {\n fill: \"white\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 2px)\",\n // ---------------------------\n \"&.state__final--inner\": {\n fill: \"var(--state-border-color, currentColor)\",\n stroke: \"none\",\n strokeWidth: \"0\",\n },\n },\n },\n };\n}\n","import { serializeCss } from \"../utils/serializeCss.js\";\nimport {\n activeStatesStyle,\n activeTransitionsStyle,\n buildStatechartStyles,\n buildStatechartStylesWithModifier,\n buildStateDetailsStyle,\n buildStateDetailsStyleWithModifier,\n selectedStatesStyle,\n selectedTransitionsStyle,\n} from \"./buildStatechartStyles.js\";\n\nexport function buildStatechartCss({ prefix = \"\" } = {}): string {\n const root = prefix || \":root\";\n return [\n buildStatechartStyles({ root }),\n buildStatechartStylesWithModifier({\n root,\n modifier: \"selected\",\n states: selectedStatesStyle,\n transitions: selectedTransitionsStyle,\n }),\n buildStatechartStylesWithModifier({\n root,\n modifier: \"active\",\n states: activeStatesStyle,\n transitions: activeTransitionsStyle,\n }),\n buildStateDetailsStyle({ root }),\n buildStateDetailsStyleWithModifier({\n root,\n modifier: \"selected\",\n states: selectedStatesStyle,\n }),\n buildStateDetailsStyleWithModifier({\n root,\n modifier: \"active\",\n states: activeStatesStyle,\n }),\n ]\n .map(serializeCss)\n .join(\"\\n\");\n}\n","// This file contains the implementation of the BasisCurve class\n// copied from d3-shape/src/curve/basis.ts (Mike Bostock, MIT License)\n\nexport type DrawContext = {\n bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number): void;\n moveTo(x: number, y: number): void;\n lineTo(x: number, y: number): void;\n closePath(): void;\n};\n\nexport class BasisCurve {\n _context: DrawContext;\n _x0: number = 0;\n _y0: number = 0;\n _x1: number = 0;\n _y1: number = 0;\n _point: number = 0;\n _line: number = 0;\n constructor(context: DrawContext) {\n this._context = context;\n }\n $point(x: number, y: number) {\n this._context.bezierCurveTo(\n (2 * this._x0 + this._x1) / 3,\n (2 * this._y0 + this._y1) / 3,\n (this._x0 + 2 * this._x1) / 3,\n (this._y0 + 2 * this._y1) / 3,\n (this._x0 + 4 * this._x1 + x) / 6,\n (this._y0 + 4 * this._y1 + y) / 6,\n );\n }\n\n areaStart() {\n this._line = 0;\n }\n\n areaEnd() {\n this._line = NaN;\n }\n\n lineStart() {\n this._x0 = this._x1 = this._y0 = this._y1 = NaN;\n this._point = 0;\n }\n\n lineEnd() {\n switch (this._point) {\n // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n case 3:\n this.$point(this._x1, this._y1); // falls through\n case 2:\n this._context.lineTo(this._x1, this._y1);\n break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n }\n\n point(x: number, y: number) {\n (x = +x), (y = +y);\n switch (this._point) {\n case 0:\n this._point = 1;\n this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);\n break;\n case 1:\n this._point = 2;\n break;\n // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n case 2:\n this._point = 3;\n this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // falls through\n default:\n this.$point(x, y);\n break;\n }\n (this._x0 = this._x1), (this._x1 = x);\n (this._y0 = this._y1), (this._y1 = y);\n }\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport function serializeAttrs(\n attrs: Record<string, string | number | undefined> = {},\n { prefix = \"\", transform = false }: { prefix?: string; transform?: boolean } = {},\n) {\n const result: string[] = [];\n for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => (a > b ? 1 : -1))) {\n if (value === undefined || value === null || value === \"\") continue;\n result.push(\n `${prefix}${escapeValue(key)}=${JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`,\n );\n }\n return result.join(\" \");\n\n function escapeValue(value: string | number | undefined): string {\n return String(value)\n .replaceAll(/</gim, \"&lt;\")\n .replaceAll(/>/gim, \"&gt;\")\n .replaceAll(/\"/gim, \"&quot;\");\n }\n}\n","import type { Dimensions, Padding, Position, TransitionsGraph } from \"../types/index.js\";\nimport { BasisCurve } from \"../utils/BasisCurve.js\";\nimport { getPadding } from \"../utils/getPadding.js\";\nimport { serializeAttrs } from \"../utils/serializeAttrs.js\";\n\nfunction getBoxParams({\n x,\n y,\n width,\n height,\n padding = 0,\n}: Position & Dimensions & { padding?: Padding }) {\n const [top, right, bottom, left] = getPadding(padding);\n const h = Math.ceil(height - top - bottom);\n return {\n x: x + left,\n y: y - bottom - h,\n width: Math.ceil(width - left - right),\n height: h,\n };\n}\n\nexport function buildStatechartSvg({\n graph: { width, height, nodes, edges },\n newId,\n stateFontSize = 14,\n transitionFontSize = 12,\n println,\n initialStateKey = \"<initial>\",\n finalStateKey = \"<final>\",\n}: {\n graph: TransitionsGraph;\n newId: (prefix: string) => string;\n println: (str: string) => void;\n stateFontSize?: number;\n transitionFontSize?: number;\n initialStateKey?: string;\n finalStateKey?: string;\n}) {\n if (!nodes.length && !edges.length) return;\n width = Math.ceil(width);\n height = Math.ceil(height);\n println(\n `<svg ${serializeAttrs({\n class: \"statechart\",\n width,\n height,\n viewbox: `0 0 ${width} ${height}`,\n xmlns: \"http://www.w3.org/2000/svg\",\n })}>`,\n );\n\n /*\n --------------------------------------------------- \n Transitions visualization\n\n CSS Classes:\n .transitions .transition-marker\n .transitions .transition .transition-line\n .transitions .transition .transition-box\n .transitions .transition .transition-label\n --------------------------------------------------- \n */\n println(`<g class=\"statechart__transitions\">`);\n\n const markerAttrs = serializeAttrs({\n refX: 19,\n refY: 7,\n markerWidth: 20,\n markerHeight: 14,\n orient: \"auto\",\n class: \"transition__marker\",\n stroke: \"none\",\n fill: \"currentColor\",\n });\n\n for (const edge of edges) {\n const { id, points, text } = edge;\n println(` <g class=\"transition\" data-transition-id=\"${id}\">`);\n const markerId = newId(\"marker\");\n\n println(` <defs>`);\n println(` <marker id=\"${markerId}\" ${markerAttrs}>`);\n println(` <path d=\"M 19,7 L9,13 L14,7 L9,1 Z\"></path>`);\n println(` </marker>`);\n println(` </defs>`);\n\n const path: string[] = [];\n const round = (...n: number[]) => n.map(Math.round);\n const base = new BasisCurve({\n bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number) {\n path.push(`C${round(x0, y0, x1, y1, x2, y2).join(\",\")}`);\n },\n moveTo(x: number, y: number) {\n path.push(`M${round(x, y).join(\",\")}`);\n },\n lineTo(x: number, y: number) {\n path.push(`L${round(x, y).join(\",\")}`);\n },\n closePath() {\n path.push(\"Z\");\n },\n });\n base.lineStart();\n for (const point of points) {\n base.point(point.x, point.y);\n }\n base.lineEnd();\n\n const serializedAttrs = serializeAttrs({\n class: \"transition__line\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"1px\",\n d: path.join(\"\"),\n \"marker-end\": `url(#${markerId})`,\n });\n println(` <path ${serializedAttrs} />`);\n\n if (text) {\n const { x, y, width, height } = getBoxParams({\n ...edge,\n padding: 0,\n });\n\n const rectAttrs = serializeAttrs({\n x,\n y: y - transitionFontSize,\n width,\n height,\n rx: Math.ceil(transitionFontSize / 2),\n ry: Math.ceil(transitionFontSize / 2),\n fill: \"rgba(255,255,255,0.7)\",\n stroke: \"none\",\n strokeWidth: \"1\",\n class: \"transition__box\",\n });\n println(` <rect ${rectAttrs} />`);\n\n const textAttrs = serializeAttrs({\n class: \"transition__label\",\n \"text-anchor\": \"middle\",\n fill: \"currentColor\",\n x: Math.round(x + width / 2),\n y: Math.round(y + height / 2 - transitionFontSize / 2),\n });\n println(` <text ${textAttrs}>${text}</text>`);\n }\n println(` </g>`);\n }\n println(\"</g>\");\n\n /*\n --------------------------------------------------- \n States visualization\n\n CSS Classes:\n .states .state\n .states .state .state-box \n .states .state .state-initial \n .states .state .state-final \n .states .state .state-final.inner \n .states .state .state-label\n --------------------------------------------------- \n */\n\n const shift = stateFontSize / 4;\n const initialStateRadius = 6;\n const finalStateRadius = initialStateRadius / 2;\n\n println(`<g class=\"statechart__states\">`);\n for (const node of nodes) {\n const { key, id, text } = node;\n const { x, y, width, height } = getBoxParams({ ...node, padding: shift });\n\n println(` <g class=\"state\" data-state-id=\"${id}\">`);\n if (key === initialStateKey || key === finalStateKey) {\n const cx = Math.round(x + width / 2);\n const cy = Math.round(y + height / 2);\n if (key === initialStateKey) {\n const serializedAttrs = serializeAttrs({\n class: \"state__initial\",\n cx,\n cy,\n r: initialStateRadius,\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n });\n println(` <circle ${serializedAttrs} />`);\n } else {\n let serializedAttrs = serializeAttrs({\n class: \"state__final\",\n cx,\n cy,\n r: initialStateRadius,\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n });\n println(` <circle ${serializedAttrs} />`);\n\n serializedAttrs = serializeAttrs({\n class: \"state__final state__final--inner\",\n cx,\n cy,\n r: finalStateRadius,\n fill: \"currentColor\",\n stroke: \"none\",\n strokeWidth: 0,\n });\n println(` <circle ${serializedAttrs} />`);\n }\n } else {\n const rectAttrs = serializeAttrs({\n x,\n y,\n width,\n height,\n rx: Math.ceil(stateFontSize / 2),\n ry: Math.ceil(stateFontSize / 2),\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n class: \"state__box\",\n });\n println(` <rect ${rectAttrs} />`);\n\n const textAttrs = serializeAttrs({\n class: \"state__label\",\n \"text-anchor\": \"middle\",\n fill: \"currentColor\",\n x: Math.round(x + width / 2),\n y: Math.round(y + height / 2 + stateFontSize / 4),\n });\n println(` <text ${textAttrs}>${text}</text>`);\n }\n println(\" </g>\");\n }\n println(\"</g>\");\n\n println(\"</svg>\");\n}\n","import type { StateChart } from \"../types/StateChart.js\";\nimport { buildStatechartSvg } from \"./buildStatechartSvg.js\";\n\nexport function buildStatechartsPanel({\n statechart,\n newId,\n println,\n initialStateKey = \"<initial>\",\n finalStateKey = \"<final>\",\n}: {\n statechart: StateChart;\n newId: (prefix: string) => string;\n println: (str: string) => void;\n initialStateKey?: string;\n finalStateKey?: string;\n}): void {\n render(statechart, println);\n\n function render(statechart: StateChart, println: (str: string) => void) {\n println(` <details class=\"state-details\" data-state-id=\"${statechart.id}\">`);\n println(\n ` <summary class=\"state-details__label\">${statechart.text ?? statechart.state}</summary>`,\n );\n println(` <div class=\"state-details__content\">`);\n const printChildren = (str: string) => println(` ${str}`);\n if (statechart.nodes.length) {\n println(` <div class=\"state-details__chart\">`);\n buildStatechartSvg({\n graph: statechart,\n newId,\n println: printChildren,\n initialStateKey,\n finalStateKey,\n });\n println(` </div>`);\n }\n println(` <div class=\"state-details__description\">`);\n println(` </div>`);\n for (const child of statechart.children || []) {\n render(child, printChildren);\n }\n println(` </div>`);\n println(` </details>`);\n }\n}\n"],"mappings":"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"}
package/dist/index-html.js CHANGED
@@ -1,2 +1,2 @@
1
- import { a as activeTransitionsStyle, c as buildStatechartStyles, d as selectedTransitionsStyle, i as activeStatesStyle, l as buildStatechartStylesWithModifier, n as buildStatechartSvg, o as buildStateDetailsStyle, r as buildStatechartCss, s as buildStateDetailsStyleWithModifier, t as buildStatechartsPanel, u as selectedStatesStyle } from "./buildStatechartsPanel-CxQlIwTh.js";
1
+ import { a as activeTransitionsStyle, c as buildStatechartStyles, d as selectedTransitionsStyle, i as activeStatesStyle, l as buildStatechartStylesWithModifier, n as buildStatechartSvg, o as buildStateDetailsStyle, r as buildStatechartCss, s as buildStateDetailsStyleWithModifier, t as buildStatechartsPanel, u as selectedStatesStyle } from "./buildStatechartsPanel-BX7e0GzA.js";
2
2
  export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle };
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { i as concatTransitionsToString, n as splitTransitionString, r as serializeProcessConfig, t as toFsmStateConfig } from "./toFsmStateConfig-DlJkyZni.js";
2
2
  import { a as buildSections, c as toDomNodesIterator, d as vistSections, f as newTreeBuilder, i as visitStateDescriptions, l as visitDom, n as renderSections, o as findSection, r as getStatesDescriptions, s as isDomElement, t as getStateDescriptionRenderer, u as visitSectionNodes } from "./description-panels-DI2MNlbK.js";
3
- import { a as activeTransitionsStyle, c as buildStatechartStyles, d as selectedTransitionsStyle, f as serializeCss, i as activeStatesStyle, l as buildStatechartStylesWithModifier, n as buildStatechartSvg, o as buildStateDetailsStyle, p as toKebabCase, r as buildStatechartCss, s as buildStateDetailsStyleWithModifier, t as buildStatechartsPanel, u as selectedStatesStyle } from "./buildStatechartsPanel-CxQlIwTh.js";
3
+ import { a as activeTransitionsStyle, c as buildStatechartStyles, d as selectedTransitionsStyle, f as serializeCss, i as activeStatesStyle, l as buildStatechartStylesWithModifier, n as buildStatechartSvg, o as buildStateDetailsStyle, p as toKebabCase, r as buildStatechartCss, s as buildStateDetailsStyleWithModifier, t as buildStatechartsPanel, u as selectedStatesStyle } from "./buildStatechartsPanel-BX7e0GzA.js";
4
4
  import { i as buildFlatCharts, n as getLabelDimensions, r as buildCharts, t as getGraphParamsProvider } from "./layout-Dp671N6q.js";
5
5
  import { n as RuntimeStatechartApi, t as StateChartIndex } from "./StateChartIndex-BOIrc_nq.js";
6
6
  export { RuntimeStatechartApi, StateChartIndex, activeStatesStyle, activeTransitionsStyle, buildCharts, buildFlatCharts, buildSections, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, concatTransitionsToString, findSection, getGraphParamsProvider, getLabelDimensions, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, selectedStatesStyle, selectedTransitionsStyle, serializeCss, serializeProcessConfig, splitTransitionString, toDomNodesIterator, toFsmStateConfig, toKebabCase, visitDom, visitSectionNodes, visitStateDescriptions, vistSections };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@statewalker/fsm-charts",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "description": "Statechart layout, SVG rendering and runtime binding for hierarchical finite state machines",
5
5
  "bugs": {
6
6
  "url": "https://github.com/statewalker/statewalker-fsm/issues"
@@ -64,7 +64,6 @@
64
64
  "devDependencies": {
65
65
  "@types/jsdom": "^30.0.0",
66
66
  "@types/lodash-es": "^4.17.12",
67
- "eslint": "^10.12.0",
68
67
  "jsdom": "^30.1.1",
69
68
  "lodash": "^4.18.1",
70
69
  "lodash-es": "^4.18.1",
@@ -84,8 +83,6 @@
84
83
  "build": "rm -fr ./dist && pnpm test && tsdown",
85
84
  "watch": "tsdown --watch",
86
85
  "clean": "rm -rf dist",
87
- "lint": "eslint",
88
- "lint:fix": "pnpm lint --fix",
89
86
  "test": "vitest --run",
90
87
  "test:watch": "vitest",
91
88
  "prepublish": "pnpm build"
package/src/utils/serializeAttrs.ts CHANGED
@@ -8,9 +8,7 @@ export function serializeAttrs(
8
8
  for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => (a > b ? 1 : -1))) {
9
9
  if (value === undefined || value === null || value === "") continue;
10
10
  result.push(
11
- `${prefix}${escapeValue(key)}${
12
- "=" + JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))
13
- }`,
11
+ `${prefix}${escapeValue(key)}=${JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))}`,
14
12
  );
15
13
  }
16
14
  return result.join(" ");
package/dist/buildStatechartsPanel-CxQlIwTh.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"buildStatechartsPanel-CxQlIwTh.js","names":[],"sources":["../src/utils/toKebabCase.ts","../src/utils/serializeCss.ts","../src/html/buildStatechartStyles.ts","../src/html/buildStatechartCss.ts","../src/utils/BasisCurve.ts","../src/utils/serializeAttrs.ts","../src/html/buildStatechartSvg.ts","../src/html/buildStatechartsPanel.ts"],"sourcesContent":["export function toKebabCase(str?: string): string {\n // Remove spaces:\n str = (str || \"\").trim().replace(/\\s+/gim, \"-\");\n // Transform to kebab:\n str = str.replace(/([^A-Z]?)([A-Z])/g, (_, a, b) => `${a.toLowerCase()}-${b.toLowerCase()}`);\n return str;\n\n // return (\n // str.match(\n // /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g\n // ) || []\n // )\n // .join(\"-\")\n // .toLowerCase();\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport interface CssTree extends Record<string, string | number | CssTree> {}\n\nexport function serializeCss(obj: CssTree) {\n return visitStyle(obj).join(\"\\n\");\n\n function visitStyle(obj: CssTree, lines: string[] = [], prefixes: string[] = [\"\"]) {\n for (const [key, style] of Object.entries(obj)) {\n const selectors = [];\n for (const sel of key.split(\",\").map((_) => _.trim())) {\n for (const prefix of prefixes) {\n const selector = sel.replace(/^(.)/, (_, ch) =>\n ch === \"&\" ? prefix : prefix.length > 0 ? `${prefix} ${ch}` : ch,\n );\n selectors.push(selector);\n }\n }\n const selectorRules = [];\n const extensions: string[] = [];\n for (let [key, value] of Object.entries(style)) {\n if (typeof value === \"object\") {\n visitStyle({ [key]: value }, extensions, selectors);\n } else {\n key = toKebabCase(key);\n selectorRules.push(` ${key}: ${value};`);\n }\n }\n if (selectorRules.length) {\n lines.push(`${selectors.join(\",\\n\")} {`);\n lines.push(...selectorRules);\n lines.push(`}`);\n }\n lines.push(...extensions);\n }\n return lines;\n }\n}\n","import type { CssTree } from \"../utils/serializeCss.js\";\n\nexport const activeStatesStyle = {\n backgroundColor: \"white\",\n borderColor: \"red\",\n borderWidth: \"2px\",\n labelColor: \"red\",\n};\nexport const activeTransitionsStyle = {\n backgroundColor: \"#eee\",\n borderColor: \"none\",\n borderWidth: \"0\",\n lineColor: \"red\",\n lineWidth: \"1px\",\n labelColor: \"red\",\n};\n\nexport const selectedStatesStyle = {\n backgroundColor: \"white\",\n borderColor: \"navy\",\n borderWidth: \"2px\",\n labelColor: \"navy\",\n};\nexport const selectedTransitionsStyle = {\n backgroundColor: \"#eee\",\n borderColor: \"none\",\n borderWidth: \"0\",\n lineColor: \"navy\",\n lineWidth: \"1px\",\n labelColor: \"navy\",\n};\n\nexport function buildStateDetailsStyle({ root = \":root\" }: { root?: string }): CssTree {\n return {\n [root]: {\n // --------------------------\n // Panels\n\n \".state-details\": {\n backgroundColor: \"var(--state-background-color, white)\",\n border: \"var(--state-border-width, 1px) solid var(--state-border-color, currentColor)\",\n borderRadius: \"0.5em\",\n padding: \"0.5em\",\n },\n \".state-details__label\": {\n cursor: \"pointer\",\n color: \"var(--transition-label-color, currentColor)\",\n fontFamily: \"var(--state-label-font-family, sans-serif)\",\n fontSize: \"var(--state-label-font-size, 14px)\",\n },\n \".state-details__content\": {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"0.5em\",\n },\n \".state-details__chart\": {\n maxWidth: \"100%\",\n overflow: \"auto\",\n scrollbarWidth: \"thin\",\n },\n },\n };\n}\n\nexport function buildStateDetailsStyleWithModifier({\n root = \":root\",\n modifier,\n states,\n}: {\n root?: string;\n modifier: string;\n states: Record<string, string>;\n}): CssTree {\n return {\n [root]: {\n //\n \".state-details\": {\n [`&.state-details--${modifier}`]: {\n backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,\n border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`,\n },\n },\n \".state-details__label\": {\n [`&.state-details__label--${modifier}`]: {\n color: `var(--state-${modifier}-label-color)`,\n },\n },\n },\n };\n}\n\nexport function buildStatechartStylesWithModifier({\n root = \":root\",\n modifier,\n states,\n transitions,\n}: {\n root?: string;\n modifier: string;\n states: Record<string, string>;\n transitions: Record<string, string>;\n}): CssTree {\n return {\n [root]: {\n // --------------------------------------\n // Default values for transitions\n [`--transition-${modifier}-background-color`]: transitions.backgroundColor,\n [`--transition-${modifier}-border-color`]: transitions.borderColor,\n [`--transition-${modifier}-border-width`]: transitions.borderWidth,\n [`--transition-${modifier}-line-color`]: transitions.lineColor,\n [`--transition-${modifier}-line-width`]: transitions.lineWidth,\n [`--transition-${modifier}-label-color`]: transitions.labelColor,\n\n // --------------------------------------\n // Default values for states\n [`--state-${modifier}-background-color`]: states.backgroundColor,\n [`--state-${modifier}-border-color`]: states.borderColor,\n [`--state-${modifier}-border-width`]: states.borderWidth,\n [`--state-${modifier}-label-color`]: states.labelColor,\n\n \".state\": {\n [`&.state--${modifier}`]: {\n \"--state-background-color\": `var(--state-${modifier}-background-color)`,\n \"--state-border-color\": `var(--state-${modifier}-border-color)`,\n \"--state-border-width\": `var(--state-${modifier}-border-width)`,\n \"--state-label-color\": `var(--state-${modifier}-label-color)`,\n },\n },\n\n \".transition\": {\n [`&.transition--${modifier}`]: {\n \"--transition-background-color\": `var(--transition-${modifier}-background-color)`,\n \"--transition-border-color\": `var(--transition-${modifier}-border-color)`,\n \"--transition-border-width\": `var(--transition-${modifier}-border-width)`,\n \"--transition-line-color\": `var(--transition-${modifier}-line-color)`,\n \"--transition-line-width\": `var(--transition-${modifier}-line-width)`,\n \"--transition-label-color\": `var(--transition-${modifier}-label-color)`,\n },\n },\n },\n };\n}\n\nexport function buildStatechartStyles({ root = \":root\" }: { root?: string }): CssTree {\n return {\n [root]: {\n // --------------------------------------\n // Transitions\n \"--transition-background-color\": \"rgba(255,255,255,0.7)\",\n \"--transition-border-color\": \"none\",\n \"--transition-border-width\": \"1px\",\n \"--transition-line-color\": \"silver\",\n \"--transition-line-width\": \"1px\",\n \"--transition-label-color\": \"gray\",\n \"--transition-label-font-size\": \"12px\",\n \"--transition-label-font-family\": \"sans-serif\",\n\n \".transition__marker\": {\n fill: \"var(--transition-line-color, currentColor)\",\n stroke: \"none\",\n },\n \".transition__line\": {\n stroke: \"var(--transition-line-color, currentColor)\",\n strokeWidth: \"var(--transition-line-width, 1px)\",\n },\n \".transition__box\": {\n fill: \"var(--transition-background-color, rgba(255,255,255,0.7))\",\n stroke: \"var(--transition-border-color, none)\",\n strokeWidth: \"var(--transition-border-width, 1px)\",\n borderRadius: \"0.5em\",\n cursor: \"pointer\",\n },\n \".transition__label\": {\n fill: \"var(--transition-label-color, currentColor)\",\n fontSize: \"var(--transition-label-font-size, 12px)\",\n fontFamily: \"var(--transition-label-font-family, sans-serif)\",\n cursor: \"pointer\",\n },\n\n // --------------------------------------\n // Normal states\n \"--state-background-color\": \"white\",\n \"--state-border-color\": \"silver\",\n \"--state-border-width\": \"1px\",\n \"--state-label-color\": \"gray\",\n \"--state-label-font-size\": \"14px\",\n \"--state-label-font-family\": \"sans-serif\",\n\n \".state__box\": {\n fill: \"var(--state-background-color, white)\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 1px)\",\n borderRadius: \"0.5em\",\n cursor: \"pointer\",\n },\n \".state__label\": {\n color: \"var(--state-label-color, currentColor)\",\n fill: \"var(--state-label-color, currentColor)\",\n fontSize: \"var(--state-label-font-size, 14px)\",\n fontFamily: \"var(--state-label-font-family, sans-serif)\",\n cursor: \"pointer\",\n },\n \".state__initial\": {\n fill: \"var(--state-border-color, currentColor)\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 2px)\",\n },\n \".state__final\": {\n fill: \"white\",\n stroke: \"var(--state-border-color, currentColor)\",\n strokeWidth: \"var(--state-border-width, 2px)\",\n // ---------------------------\n \"&.state__final--inner\": {\n fill: \"var(--state-border-color, currentColor)\",\n stroke: \"none\",\n strokeWidth: \"0\",\n },\n },\n },\n };\n}\n","import { serializeCss } from \"../utils/serializeCss.js\";\nimport {\n activeStatesStyle,\n activeTransitionsStyle,\n buildStatechartStyles,\n buildStatechartStylesWithModifier,\n buildStateDetailsStyle,\n buildStateDetailsStyleWithModifier,\n selectedStatesStyle,\n selectedTransitionsStyle,\n} from \"./buildStatechartStyles.js\";\n\nexport function buildStatechartCss({ prefix = \"\" } = {}): string {\n const root = prefix || \":root\";\n return [\n buildStatechartStyles({ root }),\n buildStatechartStylesWithModifier({\n root,\n modifier: \"selected\",\n states: selectedStatesStyle,\n transitions: selectedTransitionsStyle,\n }),\n buildStatechartStylesWithModifier({\n root,\n modifier: \"active\",\n states: activeStatesStyle,\n transitions: activeTransitionsStyle,\n }),\n buildStateDetailsStyle({ root }),\n buildStateDetailsStyleWithModifier({\n root,\n modifier: \"selected\",\n states: selectedStatesStyle,\n }),\n buildStateDetailsStyleWithModifier({\n root,\n modifier: \"active\",\n states: activeStatesStyle,\n }),\n ]\n .map(serializeCss)\n .join(\"\\n\");\n}\n","// This file contains the implementation of the BasisCurve class\n// copied from d3-shape/src/curve/basis.ts (Mike Bostock, MIT License)\n\nexport type DrawContext = {\n bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number): void;\n moveTo(x: number, y: number): void;\n lineTo(x: number, y: number): void;\n closePath(): void;\n};\n\nexport class BasisCurve {\n _context: DrawContext;\n _x0: number = 0;\n _y0: number = 0;\n _x1: number = 0;\n _y1: number = 0;\n _point: number = 0;\n _line: number = 0;\n constructor(context: DrawContext) {\n this._context = context;\n }\n $point(x: number, y: number) {\n this._context.bezierCurveTo(\n (2 * this._x0 + this._x1) / 3,\n (2 * this._y0 + this._y1) / 3,\n (this._x0 + 2 * this._x1) / 3,\n (this._y0 + 2 * this._y1) / 3,\n (this._x0 + 4 * this._x1 + x) / 6,\n (this._y0 + 4 * this._y1 + y) / 6,\n );\n }\n\n areaStart() {\n this._line = 0;\n }\n\n areaEnd() {\n this._line = NaN;\n }\n\n lineStart() {\n this._x0 = this._x1 = this._y0 = this._y1 = NaN;\n this._point = 0;\n }\n\n lineEnd() {\n switch (this._point) {\n // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n case 3:\n this.$point(this._x1, this._y1); // falls through\n case 2:\n this._context.lineTo(this._x1, this._y1);\n break;\n }\n if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n this._line = 1 - this._line;\n }\n\n point(x: number, y: number) {\n (x = +x), (y = +y);\n switch (this._point) {\n case 0:\n this._point = 1;\n this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);\n break;\n case 1:\n this._point = 2;\n break;\n // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports\n case 2:\n this._point = 3;\n this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // falls through\n default:\n this.$point(x, y);\n break;\n }\n (this._x0 = this._x1), (this._x1 = x);\n (this._y0 = this._y1), (this._y1 = y);\n }\n}\n","import { toKebabCase } from \"./toKebabCase.js\";\n\nexport function serializeAttrs(\n attrs: Record<string, string | number | undefined> = {},\n { prefix = \"\", transform = false }: { prefix?: string; transform?: boolean } = {},\n) {\n const result: string[] = [];\n for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) => (a > b ? 1 : -1))) {\n if (value === undefined || value === null || value === \"\") continue;\n result.push(\n `${prefix}${escapeValue(key)}${\n \"=\" + JSON.stringify(escapeValue(transform ? toKebabCase(String(value)) : value))\n }`,\n );\n }\n return result.join(\" \");\n\n function escapeValue(value: string | number | undefined): string {\n return String(value)\n .replaceAll(/</gim, \"&lt;\")\n .replaceAll(/>/gim, \"&gt;\")\n .replaceAll(/\"/gim, \"&quot;\");\n }\n}\n","import type { Dimensions, Padding, Position, TransitionsGraph } from \"../types/index.js\";\nimport { BasisCurve } from \"../utils/BasisCurve.js\";\nimport { getPadding } from \"../utils/getPadding.js\";\nimport { serializeAttrs } from \"../utils/serializeAttrs.js\";\n\nfunction getBoxParams({\n x,\n y,\n width,\n height,\n padding = 0,\n}: Position & Dimensions & { padding?: Padding }) {\n const [top, right, bottom, left] = getPadding(padding);\n const h = Math.ceil(height - top - bottom);\n return {\n x: x + left,\n y: y - bottom - h,\n width: Math.ceil(width - left - right),\n height: h,\n };\n}\n\nexport function buildStatechartSvg({\n graph: { width, height, nodes, edges },\n newId,\n stateFontSize = 14,\n transitionFontSize = 12,\n println,\n initialStateKey = \"<initial>\",\n finalStateKey = \"<final>\",\n}: {\n graph: TransitionsGraph;\n newId: (prefix: string) => string;\n println: (str: string) => void;\n stateFontSize?: number;\n transitionFontSize?: number;\n initialStateKey?: string;\n finalStateKey?: string;\n}) {\n if (!nodes.length && !edges.length) return;\n width = Math.ceil(width);\n height = Math.ceil(height);\n println(\n `<svg ${serializeAttrs({\n class: \"statechart\",\n width,\n height,\n viewbox: `0 0 ${width} ${height}`,\n xmlns: \"http://www.w3.org/2000/svg\",\n })}>`,\n );\n\n /*\n --------------------------------------------------- \n Transitions visualization\n\n CSS Classes:\n .transitions .transition-marker\n .transitions .transition .transition-line\n .transitions .transition .transition-box\n .transitions .transition .transition-label\n --------------------------------------------------- \n */\n println(`<g class=\"statechart__transitions\">`);\n\n const markerAttrs = serializeAttrs({\n refX: 19,\n refY: 7,\n markerWidth: 20,\n markerHeight: 14,\n orient: \"auto\",\n class: \"transition__marker\",\n stroke: \"none\",\n fill: \"currentColor\",\n });\n\n for (const edge of edges) {\n const { id, points, text } = edge;\n println(` <g class=\"transition\" data-transition-id=\"${id}\">`);\n const markerId = newId(\"marker\");\n\n println(` <defs>`);\n println(` <marker id=\"${markerId}\" ${markerAttrs}>`);\n println(` <path d=\"M 19,7 L9,13 L14,7 L9,1 Z\"></path>`);\n println(` </marker>`);\n println(` </defs>`);\n\n const path: string[] = [];\n const round = (...n: number[]) => n.map(Math.round);\n const base = new BasisCurve({\n bezierCurveTo(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number) {\n path.push(`C${round(x0, y0, x1, y1, x2, y2).join(\",\")}`);\n },\n moveTo(x: number, y: number) {\n path.push(`M${round(x, y).join(\",\")}`);\n },\n lineTo(x: number, y: number) {\n path.push(`L${round(x, y).join(\",\")}`);\n },\n closePath() {\n path.push(\"Z\");\n },\n });\n base.lineStart();\n for (const point of points) {\n base.point(point.x, point.y);\n }\n base.lineEnd();\n\n const serializedAttrs = serializeAttrs({\n class: \"transition__line\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"1px\",\n d: path.join(\"\"),\n \"marker-end\": `url(#${markerId})`,\n });\n println(` <path ${serializedAttrs} />`);\n\n if (text) {\n const { x, y, width, height } = getBoxParams({\n ...edge,\n padding: 0,\n });\n\n const rectAttrs = serializeAttrs({\n x,\n y: y - transitionFontSize,\n width,\n height,\n rx: Math.ceil(transitionFontSize / 2),\n ry: Math.ceil(transitionFontSize / 2),\n fill: \"rgba(255,255,255,0.7)\",\n stroke: \"none\",\n strokeWidth: \"1\",\n class: \"transition__box\",\n });\n println(` <rect ${rectAttrs} />`);\n\n const textAttrs = serializeAttrs({\n class: \"transition__label\",\n \"text-anchor\": \"middle\",\n fill: \"currentColor\",\n x: Math.round(x + width / 2),\n y: Math.round(y + height / 2 - transitionFontSize / 2),\n });\n println(` <text ${textAttrs}>${text}</text>`);\n }\n println(` </g>`);\n }\n println(\"</g>\");\n\n /*\n --------------------------------------------------- \n States visualization\n\n CSS Classes:\n .states .state\n .states .state .state-box \n .states .state .state-initial \n .states .state .state-final \n .states .state .state-final.inner \n .states .state .state-label\n --------------------------------------------------- \n */\n\n const shift = stateFontSize / 4;\n const initialStateRadius = 6;\n const finalStateRadius = initialStateRadius / 2;\n\n println(`<g class=\"statechart__states\">`);\n for (const node of nodes) {\n const { key, id, text } = node;\n const { x, y, width, height } = getBoxParams({ ...node, padding: shift });\n\n println(` <g class=\"state\" data-state-id=\"${id}\">`);\n if (key === initialStateKey || key === finalStateKey) {\n const cx = Math.round(x + width / 2);\n const cy = Math.round(y + height / 2);\n if (key === initialStateKey) {\n const serializedAttrs = serializeAttrs({\n class: \"state__initial\",\n cx,\n cy,\n r: initialStateRadius,\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n });\n println(` <circle ${serializedAttrs} />`);\n } else {\n let serializedAttrs = serializeAttrs({\n class: \"state__final\",\n cx,\n cy,\n r: initialStateRadius,\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 2,\n });\n println(` <circle ${serializedAttrs} />`);\n\n serializedAttrs = serializeAttrs({\n class: \"state__final state__final--inner\",\n cx,\n cy,\n r: finalStateRadius,\n fill: \"currentColor\",\n stroke: \"none\",\n strokeWidth: 0,\n });\n println(` <circle ${serializedAttrs} />`);\n }\n } else {\n const rectAttrs = serializeAttrs({\n x,\n y,\n width,\n height,\n rx: Math.ceil(stateFontSize / 2),\n ry: Math.ceil(stateFontSize / 2),\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: \"2\",\n class: \"state__box\",\n });\n println(` <rect ${rectAttrs} />`);\n\n const textAttrs = serializeAttrs({\n class: \"state__label\",\n \"text-anchor\": \"middle\",\n fill: \"currentColor\",\n x: Math.round(x + width / 2),\n y: Math.round(y + height / 2 + stateFontSize / 4),\n });\n println(` <text ${textAttrs}>${text}</text>`);\n }\n println(\" </g>\");\n }\n println(\"</g>\");\n\n println(\"</svg>\");\n}\n","import type { StateChart } from \"../types/StateChart.js\";\nimport { buildStatechartSvg } from \"./buildStatechartSvg.js\";\n\nexport function buildStatechartsPanel({\n statechart,\n newId,\n println,\n initialStateKey = \"<initial>\",\n finalStateKey = \"<final>\",\n}: {\n statechart: StateChart;\n newId: (prefix: string) => string;\n println: (str: string) => void;\n initialStateKey?: string;\n finalStateKey?: string;\n}): void {\n render(statechart, println);\n\n function render(statechart: StateChart, println: (str: string) => void) {\n println(` <details class=\"state-details\" data-state-id=\"${statechart.id}\">`);\n println(\n ` <summary class=\"state-details__label\">${statechart.text ?? statechart.state}</summary>`,\n );\n println(` <div class=\"state-details__content\">`);\n const printChildren = (str: string) => println(` ${str}`);\n if (statechart.nodes.length) {\n println(` <div class=\"state-details__chart\">`);\n buildStatechartSvg({\n graph: statechart,\n newId,\n println: printChildren,\n initialStateKey,\n finalStateKey,\n });\n println(` </div>`);\n }\n println(` <div class=\"state-details__description\">`);\n println(` </div>`);\n for (const child of statechart.children || []) {\n render(child, printChildren);\n }\n println(` </div>`);\n println(` </details>`);\n }\n}\n"],"mappings":"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"}
package/src/full/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from "./toFsmStateCharts.js";
package/src/full/toFsmStateCharts.ts DELETED
@@ -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
- for (const t of transitions) 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
- }