@statewalker/fsm-charts 0.1.11 → 0.1.13

package/dist/{StateChart-DlcWaRml.d.ts → StateChart-CdOU9XAq.d.ts}

@@ -19,12 +19,19 @@ type FsmStateConfig = {
     states?: FsmStateConfig[];
 } & Record<string, any>;
 
+/**
+ * Human-readable label
+ */
+type Label = {
+    text: string;
+};
+
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
  */
 type GraphParamsProvider = {
-    getStateParams: (stateKey: string, state?: string) => Dimensions & Record<string, any>;
-    getTransitionParams: (fromStateKey: string, event: string, toStateKey: string) => Dimensions & Record<string, any>;
+    getStateParams: (stateKey: string, state?: string) => Dimensions & Label & Record<string, any>;
+    getTransitionParams: (fromStateKey: string, event: string, toStateKey: string) => Dimensions & Label & Record<string, any>;
 };
 
 /**
@@ -72,4 +79,4 @@ type StateChart = TransitionsGraph & StateGraphNode & {
     children?: StateChart[];
 } & Record<string, any>;
 
-export type { Dimensions as D, FsmStateConfig as F, GraphParamsProvider as G, Padding as P, StateChart as S, Transition as T, Position as a, StateGraphEdge as b, StateGraphNode as c, TransitionsGraph as d };
+export type { Dimensions as D, FsmStateConfig as F, GraphParamsProvider as G, Label as L, Padding as P, StateChart as S, Transition as T, Position as a, StateGraphEdge as b, StateGraphNode as c, TransitionsGraph as d };

package/dist/{chunk-2OGGKHD6.js → chunk-AVTSJE25.js}

@@ -57,9 +57,12 @@ function getStateDescriptionRenderer({
   }
 }
 function* visitDom(elm) {
+  if (isDomElement(elm) && elm.tagName === "TEMPLATE") {
+    elm = elm.content;
+  }
   for (let node = elm.firstChild; node; node = node.nextSibling) {
     if (isDomElement(node)) {
-      if (node.tagName === "DIV") {
+      if (node.tagName === "DIV" || node.tagName === "TEMPLATE") {
         yield* visitDom(node);
       } else {
         yield node;

package/dist/{chunk-SURKRLPB.js → chunk-GCVBCAOL.js}

@@ -422,7 +422,7 @@ function buildStatechartSvg({
     fill: "currentColor"
   });
   for (const edge of edges) {
-    const { id, points, event: text } = edge;
+    const { id, points, text } = edge;
     println(`  <g class="transition" data-transition-id="${id}">`);
     const markerId = newId("marker");
     println(`    <defs>`);
@@ -495,7 +495,7 @@ function buildStatechartSvg({
   const finalStateRadius = initialStateRadius / 2;
   println(`<g class="statechart__states">`);
   for (const node of nodes) {
-    const { key, id, state: text } = node;
+    const { key, id, text } = node;
     const { x, y, width: width2, height: height2 } = getBoxParams({ ...node, padding: shift });
     println(`  <g class="state" data-state-id="${id}">`);
     if (key === initialStateKey || key === finalStateKey) {

package/dist/{chunk-HQZXOJPG.js → chunk-NWCC4WSF.js}

@@ -2664,18 +2664,22 @@ function getGraphParamsProvider({
   stateFontSize = fontSize,
   stateTextPadding = 0,
   transitionsFontSize = fontSize,
-  transitionsTextPadding = 0
+  transitionsTextPadding = 0,
+  getStateLabel = (state) => state,
+  getTransitionLabel = (fromState, event, toState) => event
 } = {}) {
   return {
     getStateParams: (stateKey, state = stateKey) => {
       const padding = getPadding(stateTextPadding);
       const fontSize2 = stateFontSize;
+      const stateLabel = getStateLabel(state);
       return {
-        ...getLabelDimensions(state, {
+        ...getLabelDimensions(stateLabel, {
           padding,
           fontSize: fontSize2
         }),
         state,
+        text: stateLabel,
         key: stateKey,
         padding,
         fontSize: fontSize2
@@ -2684,14 +2688,16 @@ function getGraphParamsProvider({
     getTransitionParams: (fromStateKey, event, toStateKey) => {
       const padding = getPadding(transitionsTextPadding);
       const fontSize2 = transitionsFontSize;
+      const eventLabel = getTransitionLabel(fromStateKey, event, toStateKey);
       return {
-        ...getLabelDimensions(event, {
+        ...getLabelDimensions(eventLabel, {
           padding,
           fontSize: fontSize2
         }),
         from: fromStateKey,
         event,
         to: toStateKey,
+        text: eventLabel,
         padding,
         fontSize: fontSize2
       };

package/dist/index-config.d.ts

@@ -1,5 +1,5 @@
-import { T as Transition, F as FsmStateConfig } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { T as Transition, F as FsmStateConfig } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 declare function concatTransitionsToString(transitions: Transition[]): string[];
 

package/dist/index-dom.js

@@ -1 +1 @@
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-2OGGKHD6.js';
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-AVTSJE25.js';

package/dist/{index-html-De8e33ol.d.ts → index-html-BKMwwc5Q.d.ts}

@@ -1,4 +1,4 @@
-import { S as StateChart, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { S as StateChart, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 declare function buildStatechartCss({ prefix }?: {
     prefix?: string | undefined;

package/dist/index-html.d.ts

@@ -1,2 +1,2 @@
-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-DlcWaRml.js';
-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-De8e33ol.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
+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-BKMwwc5Q.js';

package/dist/index-html.js

@@ -1,2 +1,2 @@
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-SURKRLPB.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle } from './chunk-GCVBCAOL.js';
 import './chunk-FIQDLBWD.js';

package/dist/index-layout.d.ts

@@ -1,5 +1,5 @@
-import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-DlcWaRml.js';
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, L as Label, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-CdOU9XAq.js';
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -52,12 +52,14 @@ declare function buildCharts({ lodash, config, newId, getStateParams, getTransit
  * @param transitionsFontSize - The font size for the transition labels.
  * @param transitionsTextPadding - The padding around the transition labels.
  */
-declare function getGraphParamsProvider({ fontSize, stateFontSize, stateTextPadding, transitionsFontSize, transitionsTextPadding, }?: {
+declare function getGraphParamsProvider({ fontSize, stateFontSize, stateTextPadding, transitionsFontSize, transitionsTextPadding, getStateLabel, getTransitionLabel, }?: {
     fontSize?: number;
     stateFontSize?: number;
     stateTextPadding?: Padding;
     transitionsFontSize?: number;
     transitionsTextPadding?: Padding;
+    getStateLabel?: (state: string) => string;
+    getTransitionLabel?: (fromState: string, event: string, toState: string) => string;
 }): GraphParamsProvider;
 
 declare function getLabelDimensions(label: string, { padding, fontSize, getCharWidth, // Golden ratio and all that jazz :-)

package/dist/index-layout.js

@@ -1,2 +1,2 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-HQZXOJPG.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-NWCC4WSF.js';
 import './chunk-FIQDLBWD.js';

package/dist/index-runtime.d.ts

@@ -1,5 +1,5 @@
-import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-DlcWaRml.js';
-export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-DlcWaRml.js';
+import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-CdOU9XAq.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 
 type RuntimeListener = (id: string) => void;
 declare class RuntimeStatechartApi {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-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-DlcWaRml.js';
+export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, L as Label, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-CdOU9XAq.js';
 export { DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './index-dom.js';
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './index-config.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-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-De8e33ol.js';
+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-BKMwwc5Q.js';
 export { RuntimeListener, RuntimeStatechartApi, StateChartIndex } from './index-runtime.js';
 
 declare function toKebabCase(str?: string): string;

package/dist/index.js

@@ -1,6 +1,6 @@
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SVKVQY7B.js';
-export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-2OGGKHD6.js';
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-SURKRLPB.js';
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-HQZXOJPG.js';
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-AVTSJE25.js';
+export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-GCVBCAOL.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-NWCC4WSF.js';
 import './chunk-FIQDLBWD.js';
 export { RuntimeStatechartApi, StateChartIndex } from './chunk-N77KKO5K.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",

package/src/dom/index.ts

@@ -90,9 +90,12 @@ export function getStateDescriptionRenderer({
 }
 
 export function* visitDom(elm: Node): Iterable<Node> {
+  if (isDomElement(elm) && elm.tagName === "TEMPLATE") {
+    elm = (elm as HTMLTemplateElement).content;
+  }
   for (let node = elm.firstChild; node; node = node.nextSibling) {
     if (isDomElement(node)) {
-      if (node.tagName === "DIV") {
+      if (node.tagName === "DIV" || node.tagName === "TEMPLATE") {
         yield* visitDom(node);
       } else {
         yield node;

package/src/html/buildStatechartSvg.ts

@@ -51,7 +51,7 @@ export function buildStatechartSvg({
       height,
       viewbox: `0 0 ${width} ${height}`,
       xmlns: "http://www.w3.org/2000/svg",
-    })}>`
+    })}>`,
   );
 
   /*
@@ -79,7 +79,7 @@ export function buildStatechartSvg({
   });
 
   for (const edge of edges) {
-    const { id, points, event: text } = edge;
+    const { id, points, text } = edge;
     println(`  <g class="transition" data-transition-id="${id}">`);
     const markerId = newId("marker");
 
@@ -98,7 +98,7 @@ export function buildStatechartSvg({
         x1: number,
         y1: number,
         x2: number,
-        y2: number
+        y2: number,
       ) {
         path.push("C" + round(x0, y0, x1, y1, x2, y2).join(","));
       },
@@ -181,7 +181,7 @@ export function buildStatechartSvg({
 
   println(`<g class="statechart__states">`);
   for (const node of nodes) {
-    const { key, id, state: text } = node;
+    const { key, id, text } = node;
     const { x, y, width, height } = getBoxParams({ ...node, padding: shift });
 
     println(`  <g class="state" data-state-id="${id}">`);

package/src/layout/getGraphParamsProvider.ts

@@ -4,6 +4,7 @@ import type { Padding } from "../types/Padding.ts";
 
 import { getLabelDimensions } from "./getLabelDimensions.ts";
 import { getPadding } from "../utils/getPadding.ts";
+import { Label } from "../types/Label.ts";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
@@ -19,23 +20,34 @@ export function getGraphParamsProvider({
   stateTextPadding = 0,
   transitionsFontSize = fontSize,
   transitionsTextPadding = 0,
+  getStateLabel = (state: string) => state,
+  getTransitionLabel = (fromState: string, event: string, toState: string) =>
+    event,
 }: {
   fontSize?: number;
   stateFontSize?: number;
   stateTextPadding?: Padding;
   transitionsFontSize?: number;
   transitionsTextPadding?: Padding;
+  getStateLabel?: (state: string) => string;
+  getTransitionLabel?: (
+    fromState: string,
+    event: string,
+    toState: string,
+  ) => string;
 } = {}): GraphParamsProvider {
   return {
     getStateParams: (stateKey: string, state: string = stateKey) => {
       const padding = getPadding(stateTextPadding);
       const fontSize = stateFontSize;
+      const stateLabel = getStateLabel(state);
       return {
-        ...getLabelDimensions(state, {
+        ...getLabelDimensions(stateLabel, {
           padding,
           fontSize,
         }),
         state,
+        text: stateLabel,
         key: stateKey,
         padding,
         fontSize,
@@ -44,18 +56,20 @@ export function getGraphParamsProvider({
     getTransitionParams: (
       fromStateKey: string,
       event: string,
-      toStateKey: string
-    ): Dimensions & Record<string, any> => {
+      toStateKey: string,
+    ) => {
       const padding = getPadding(transitionsTextPadding);
       const fontSize = transitionsFontSize;
+      const eventLabel = getTransitionLabel(fromStateKey, event, toStateKey);
       return {
-        ...getLabelDimensions(event, {
+        ...getLabelDimensions(eventLabel, {
           padding,
           fontSize,
         }),
         from: fromStateKey,
         event,
         to: toStateKey,
+        text: eventLabel,
         padding,
         fontSize,
       };

package/src/types/GraphParamsProvider.ts

@@ -1,4 +1,5 @@
 import type { Dimensions } from "./Dimensions.ts";
+import { Label } from "./Label.ts";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
@@ -6,12 +7,11 @@ import type { Dimensions } from "./Dimensions.ts";
 export type GraphParamsProvider = {
   getStateParams: (
     stateKey: string,
-    state?: string
-  ) => Dimensions & Record<string, any>;
+    state?: string,
+  ) => Dimensions & Label & Record<string, any>;
   getTransitionParams: (
     fromStateKey: string,
     event: string,
-    toStateKey: string
-  ) => Dimensions & Record<string, any>;
+    toStateKey: string,
+  ) => Dimensions & Label & Record<string, any>;
 };
-

package/src/types/Label.ts

@@ -0,0 +1,7 @@
+/**
+ * Human-readable label
+ */
+export type Label = {
+  // The text of the label
+  text: string;
+};

package/src/types/index.ts

@@ -1,6 +1,7 @@
 export type * from "./Dimensions.ts";
 export type * from "./FsmStateConfig.ts";
 export type * from "./GraphParamsProvider.ts";
+export type * from "./Label.ts";
 export type * from "./Padding.ts";
 export type * from "./Position.ts";
 export type * from "./StateChart.ts";