@statewalker/fsm-charts 0.0.3 → 0.0.5

package/dist/index-svg-DCwEyX8X.d.ts

@@ -0,0 +1,33 @@
+import { S as StateChart, d as TransitionsGraph } from './StateChart-pFSQIvtE.js';
+
+declare function buildStatechartCss({ prefix }?: {
+    prefix?: string | undefined;
+}): string;
+
+declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
+    statechart: StateChart;
+    newId: (prefix: string) => string;
+    println: (str: string) => void;
+    initialStateKey?: string;
+    finalStateKey?: string;
+}): void;
+
+interface CssTree extends Record<string, string | number | CssTree> {
+}
+declare function serializeCss(obj: CssTree): string;
+
+declare function buildStatechartStyles({ root, }?: {
+    root?: string;
+}): CssTree;
+
+declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
+    graph: TransitionsGraph;
+    newId: (prefix: string) => string;
+    println: (str: string) => void;
+    stateFontSize?: number;
+    transitionFontSize?: number;
+    initialStateKey?: string;
+    finalStateKey?: string;
+}): void;
+
+export { type CssTree as C, buildStatechartsPanel as a, buildStatechartCss as b, buildStatechartStyles as c, buildStatechartSvg as d, serializeCss as s };

package/dist/index-svg.d.ts

@@ -1,25 +1,2 @@
-import { b as StateChart, T as TransitionsGraph } from './StateChart-DNGQd1XG.js';
-
-declare function buildStatechartCss({ prefix }?: {
-    prefix?: string | undefined;
-}): string;
-
-declare function buildStatechartsPanel({ statechart, newId, println, initialStateKey, finalStateKey, }: {
-    statechart: StateChart;
-    newId: (prefix: string) => string;
-    println: (str: string) => void;
-    initialStateKey?: string;
-    finalStateKey?: string;
-}): void;
-
-declare function buildStatechartSvg({ graph: { width, height, nodes, edges }, newId, stateFontSize, transitionFontSize, println, initialStateKey, finalStateKey, }: {
-    graph: TransitionsGraph;
-    newId: (prefix: string) => string;
-    println: (str: string) => void;
-    stateFontSize?: number;
-    transitionFontSize?: number;
-    initialStateKey?: string;
-    finalStateKey?: string;
-}): void;
-
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel };
+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-pFSQIvtE.js';
+export { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-svg-DCwEyX8X.js';

package/dist/index-svg.js

@@ -1,2 +1,2 @@
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './chunk-TPNWHU7Y.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel } from './chunk-3PNSXN5U.js';
 import './chunk-NXWOFQMO.js';

package/dist/index.d.ts

@@ -1,3 +1,8 @@
-export { GraphParamsProvider, Padding, Transition, buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
-export { D as Dimensions, P as Position, S as StateGraphEdge, a as StateGraphNode, T as TransitionsGraph } from './StateChart-DNGQd1XG.js';
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './index-svg.js';
+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-pFSQIvtE.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
+export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-svg-DCwEyX8X.js';
+export { a } from './index-runtime.js';
+
+declare function toKebabCase(str: string): string;
+
+export { toKebabCase };

package/dist/index.js

@@ -1,3 +1,4 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-3GGM3ZWL.js';
-export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './chunk-TPNWHU7Y.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-IT7GBMYV.js';
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-3PNSXN5U.js';
 import './chunk-NXWOFQMO.js';
+export { a } from './chunk-X2UPWZLX.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
@@ -44,8 +44,8 @@
     "url": "git@github.com:statewalker/statewalker-fsm-charts.git"
   },
   "scripts": {
-    "build_": "yarn test && tsup",
-    "build": "tsup",
+    "build": "rm -fr ./dist && yarn test && tsup",
+    "prepare": "yarn build",
     "watch": "tsup --watch",
     "clean": "rm -rf dist",
     "lint": "eslint",

package/src/index-layout.ts

@@ -1 +1,2 @@
+export * from "./types/index.ts";
 export * from "./layout/index.ts";

package/src/index-runtime.ts

@@ -0,0 +1,2 @@
+export * from "./types/index.ts";
+export * from "./runtime/index.ts";

package/src/index-svg.ts

@@ -1 +1,2 @@
+export * from "./types/index.ts";
 export * from "./svg/index.ts";

package/src/index.ts

@@ -1,4 +1,6 @@
-export * from "./index-layout.ts";
-export * from "./index-svg.ts";
+export * from "./types/index.ts";
+export * from "./layout/index.ts";
+export * from "./svg/index.ts";
+export * from "./runtime/index.ts";
 export * from "./utils/toKebabCase.ts";
 export * from "./utils/serializeCss.ts";

package/src/layout/buildCharts.ts

@@ -1,16 +1,8 @@
-import type { GraphParamsProvider } from "./GraphParamsProvider.ts";
-import type { StateGraphNode } from "./StateGraphNode.ts";
-import type { StateGraphEdge } from "./StateGraphEdge.ts";
-import type { Padding } from "./Padding.ts";
-import type { Position } from "./Position.ts";
-import type { Dimensions } from "./Dimensions.ts";
-import type { FsmStateConfig } from "../FsmStateConfig.ts";
-import type { StateChart } from "./StateChart.ts";
+import type { GraphParamsProvider } from "../types/GraphParamsProvider.ts";
+import type { Padding } from "../types/Padding.ts";
+import type { FsmStateConfig } from "../types/FsmStateConfig.ts";
+import type { StateChart } from "../types/StateChart.ts";
 
-import { layout } from "../dagre/layout.js";
-import { Graph } from "../graphlib/graph.js";
-import { getPadding } from "../utils/getPadding.ts";
-import { getLodash, setLodash } from "../lodash-es/index.ts";
 import { buildFlatCharts } from "./buildFlatCharts.ts";
 /**
  * Build graphs corresponding to the specified transitions.
@@ -67,7 +59,7 @@ export function buildCharts({
     return {
       id,
       key: config.key,
-      graph,
+      ...graph,
       children,
     };
   }

package/src/layout/buildFlatCharts.ts

@@ -1,15 +1,16 @@
 import { layout } from "../dagre/layout.js";
 import { Graph } from "../graphlib/graph.js";
 
-import type { GraphParamsProvider } from "./GraphParamsProvider.ts";
-import type { Transition } from "./Transition.ts";
-import type { TransitionsGraph } from "./TransitionsGraph.ts";
-import type { StateGraphNode } from "./StateGraphNode.ts";
-import type { StateGraphEdge } from "./StateGraphEdge.ts";
-import { Padding } from "./Padding.ts";
+import type { GraphParamsProvider } from "../types/GraphParamsProvider.ts";
+import type { Transition } from "../types/Transition.ts";
+import type { TransitionsGraph } from "../types/TransitionsGraph.ts";
+import type { StateGraphNode } from "../types/StateGraphNode.ts";
+import type { StateGraphEdge } from "../types/StateGraphEdge.ts";
+import type { Padding } from "../types/Padding.ts";
+import type { Position } from "../types/Position.ts";
+import type { Dimensions } from "../types/Dimensions.ts";
+
 import { getPadding } from "../utils/getPadding.ts";
-import { Position } from "./Position.ts";
-import { Dimensions } from "./Dimensions.ts";
 import { getLodash, setLodash } from "../lodash-es/index.ts";
 
 /**

package/src/layout/getGraphParamsProvider.ts

@@ -1,8 +1,9 @@
-import type { Dimensions } from "./Dimensions.ts";
+import type { Dimensions } from "../types/Dimensions.ts";
+import type { GraphParamsProvider } from "../types/GraphParamsProvider.ts";
+import type { Padding } from "../types/Padding.ts";
+
 import { getLabelDimensions } from "./getLabelDimensions.ts";
 import { getPadding } from "../utils/getPadding.ts";
-import type { GraphParamsProvider } from "./GraphParamsProvider.ts";
-import type { Padding } from "./Padding.ts";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.

package/src/layout/getLabelDimensions.ts

@@ -1,5 +1,5 @@
-import type { Dimensions } from "./Dimensions.ts";
-import type { Padding } from "./Padding.ts";
+import type { Dimensions } from "../types/Dimensions.ts";
+import type { Padding } from "../types/Padding.ts";
 import { getPadding } from "../utils/getPadding.ts";
 
 export function getLabelDimensions(

package/src/layout/index.ts

@@ -3,13 +3,3 @@ export * from "./buildFlatCharts.ts";
 export * from "./buildCharts.ts";
 export * from "./getGraphParamsProvider.ts";
 export * from "./getLabelDimensions.ts";
-
-// Types
-export * from "./Dimensions.ts";
-export * from "./GraphParamsProvider.ts";
-export * from "./Padding.ts";
-export * from "./Position.ts";
-export * from "./StateGraphEdge.ts";
-export * from "./StateGraphNode.ts";
-export * from "./Transition.ts";
-export * from "./TransitionsGraph.ts";

package/src/runtime/index.ts

@@ -0,0 +1,211 @@
+export const a = "a";
+
+// class RuntimeStatechartsApi {
+//   constructor({ element, statechart }) {
+//     this.element = element;
+//     this.statechart = statechart;
+//     // this._statesIndex = {};
+//     // this._transitionsIndex = {};
+//     // this._buildIndexes(this.statechart);
+//   }
+
+//   _applyStateModifier(cssSelector, modifier = "selected", apply) {
+//     const detailsModifier = `state-details--${modifier}`;
+//     const stateLabelsModifier = `state-details__label--${modifier}`;
+//     const stateModifier = `state--${modifier}`;
+//     [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
+//       if (elm.tagName.toLowerCase() === "details") {
+//         apply(elm, detailsModifier);
+//         const labelElm = elm.querySelector(".state-details__label");
+//         if (labelElm) apply(labelElm, stateLabelsModifier);
+//       } else {
+//         apply(elm, stateModifier);
+//       }
+//     });
+//   }
+
+//   _applyTransitionsModifier(cssSelector, modifier = "selected", action) {}
+
+//   deselectAllTransitions() {
+//     const removeClass = (elm, cls) => elm.classList.remove(cls);
+//     this._applyTransitionsModifier(
+//       "[data-transition-id]",
+//       "selected",
+//       removeClass
+//     );
+//   }
+//   deselectTransitions(...ids) {
+//     const removeClass = (elm, cls) => elm.classList.remove(cls);
+//     for (const id of ids) {
+//       this._applyTransitionsModifier(
+//         `[data-transition-id="${id}"]`,
+//         "selected",
+//         removeClass
+//       );
+//     }
+//   }
+//   selectTransitions(...ids) {
+//     const addClass = (elm, cls) => elm.classList.add(cls);
+//     for (const id of ids) {
+//       this._applyTransitionsModifier(
+//         `[data-transition-id="${id}"]`,
+//         "selected",
+//         addClass
+//       );
+//     }
+//   }
+
+//   deselectAllStates() {
+//     const removeClass = (elm, cls) => elm.classList.remove(cls);
+//     this._applyStateModifier("[data-state-id]", "selected", removeClass);
+//   }
+//   deselectStates(...ids) {
+//     const removeClass = (elm, cls) => elm.classList.remove(cls);
+//     for (const id of ids) {
+//       this._applyStateModifier(
+//         `[data-state-id="${id}"]`,
+//         "selected",
+//         removeClass
+//       );
+//     }
+//   }
+//   selectStates(...ids) {
+//     const addClass = (elm, cls) => elm.classList.add(cls);
+//     for (const id of ids) {
+//       this._applyStateModifier(`[data-state-id="${id}"]`, "selected", addClass);
+//     }
+//   }
+
+//   // -----------------------------------------------
+//   // Access to charts data
+//   // - get state ids by stack of state keys
+//   // - get stack of states by state id
+//   // - get transitionId by stateId + event
+//   // - get targetId, sourceId, event by transitionId
+//   getStatesIds(...stack) {
+//     let statechart = this.statechart;
+//     let result = [];
+//     if (statechart.key === stack[0]) {
+//       result.push(statechart.id);
+//       for (let i = 1; i < stack.length; i++) {
+//         const key = stack[i];
+//         let id = statechart.graph.nodes.find((node) => node.key === key)?.id;
+//         if (!id) break;
+//         result.push(id);
+//         statechart = (statechart.children || []).find(
+//           (child) => child.key === key
+//         );
+//       }
+//     }
+//     return result.length === stack.length ? result : [];
+//   }
+
+//   getStackByStateId(id) {
+//     return this._getStack(id, ({ id, key }) => key);
+//   }
+
+//   getTransition(stateId, event) {
+//     const stack = this._getStack(stateId);
+//     const state = stack.pop();
+//     if (!state || !stack.length) return;
+//     const parent = stack[stack.length - 1];
+//     const t = parent.graph.edges.find(
+//       (t) => t.from === state.key && t.event === event
+//     );
+//     if (!t) return;
+//     const to = parent.graph.nodes.find((n) => n.key === t.to);
+//     return to && { id: t.id, fromId: state.id, event: t.event, toId: to.id };
+//   }
+
+//   _getStack(id, get = (d) => d) {
+//     return findById(this.statechart, id, get);
+
+//     function findById(statechart, id, get, stack = []) {
+//       try {
+//         stack.push(get(statechart));
+//         if (statechart.id === id) {
+//           return [...stack];
+//         } else {
+//           let node = statechart.graph.nodes.find((node) => node.id === id);
+//           if (node) {
+//             return [...stack, get(node)];
+//           } else {
+//             let result;
+//             if (statechart.children) {
+//               for (const child of statechart.children) {
+//                 result = findById(child, id, get, stack);
+//                 if (result) break;
+//               }
+//             }
+//             return result;
+//           }
+//         }
+//       } finally {
+//         stack.pop();
+//       }
+//     }
+//   }
+
+//   // getTransitionId(stateId, event) {
+//   // }
+
+//   //   const stateInfo = this._statesIndex[stateId];
+//   //   if (!stateInfo) return;
+//   //   if (stateInfo.parent) return ;
+//   //   const targetState = stateInfo.parent.
+//   //   const fromId = stateIds.pop();
+//   //   const parentId = stateIds.pop();
+//   //   const parent = parentId ? this._statesIndex[parentId] : null;
+//   //   return parent
+//   //     ? parent.graph?.edges.find(
+//   //         (edge) => edge.from === fromId && edge.event === event
+//   //       )
+//   //     : undefined;
+//   // }
+
+//   // _getInfo(index, id, create) {
+//   //   let info = index[id];
+//   //   if (!info && create) {
+//   //     info = index[id] = { id };
+//   //   }
+//   //   return info;
+//   // }
+//   // _getStateInfo(id, create) {
+//   //   return this._getInfo(this._statesIndex, id, create);
+//   // }
+//   // _getTransitionInfo(id, create) {
+//   //   return this._getInfo(this._transitionsIndex, id, create);
+//   // }
+//   // _buildIndexes(statechart) {
+//   //   const { id, key } = statechart;
+//   //   const stateInfo = this._getStateInfo(id, true);
+//   //   stateInfo.key = key;
+//   //   stateInfo.detailsElement = this.element.querySelector(
+//   //     `details[data-state-id="${id}"]`
+//   //   );
+//   //   for (const node of statechart.graph?.nodes || []) {
+//   //     const info = this._getStateInfo(node.id, true);
+//   //     info.parent = stateInfo;
+//   //     // info.parentId = id;
+//   //     info.node = node;
+//   //     info.key = node.key;
+//   //     info.svgGroupElement = this.element.querySelector(
+//   //       `g[data-state-id="${info.id}"]`
+//   //     );
+//   //   }
+//   //   for (const edge of statechart.graph?.edges || []) {
+//   //     const info = this._getTransitionInfo(edge.id, true);
+//   //     info.transition = edge;
+//   //     info.from = edge.from;
+//   //     info.event = edge.event;
+//   //     info.to = edge.to;
+//   //     info.svgGroupElement = this.element.querySelector(
+//   //       `g[data-transition-id="${info.id}"]`
+//   //     );
+//   //   }
+
+//   //   for (const child of statechart.children) {
+//   //     this._buildIndexes(child);
+//   //   }
+//   // }
+// }

package/src/svg/buildStatechartStyles.ts

@@ -102,11 +102,13 @@ export function buildStatechartStyles({
         stroke: "var(--transition-border-color, none)",
         strokeWidth: "var(--transition-border-width, 1px)",
         borderRadius: "0.5em",
+        cursor: "pointer",
       },
       ".transition__label": {
         fill: "var(--transition-label-color, currentColor)",
         fontSize: "var(--transition-label-font-size, 12px)",
         fontFamily: "var(--transition-label-font-family, sans-serif)",
+        cursor: "pointer",
       },
 
       // ----------------------------------------------
@@ -147,6 +149,7 @@ export function buildStatechartStyles({
         stroke: "var(--state-border-color, currentColor)",
         strokeWidth: "var(--state-border-width, 1px)",
         borderRadius: "0.5em",
+        cursor: "pointer",
       },
       ".state__label": {
         color: "var(--state-label-color, currentColor)",

package/src/svg/buildStatechartSvg.ts

@@ -3,7 +3,7 @@ import type {
   Padding,
   Position,
   TransitionsGraph,
-} from "../layout/index.ts";
+} from "../types/index.ts";
 import { getPadding } from "../utils/getPadding.ts";
 import { serializeAttrs } from "../utils/serializeAttrs.ts";
 import { BasisCurve } from "../utils/BasisCurve.ts";

package/src/svg/buildStatechartsPanel.ts

@@ -1,5 +1,5 @@
 import { buildStatechartSvg } from "./buildStatechartSvg.ts";
-import type { StateChart } from "../layout/StateChart.ts";
+import type { StateChart } from "../types/StateChart.ts";
 
 export function buildStatechartsPanel({
   statechart,
@@ -13,16 +13,22 @@ export function buildStatechartsPanel({
   println: (str: string) => void;
   initialStateKey?: string;
   finalStateKey?: string;
-}) : void {
+}): void {
   render(statechart, println);
 
   function render(statechart: StateChart, println: (str: string) => void) {
-    println(`  <details class="state-details" data-state-id="${statechart.id}">`);
-    println(`    <summary class="state-details__label">${statechart.key}</summary>`);
-    println(`    <div class="state-details__description"><div class="state-details__chart">`);
+    println(
+      `  <details class="state-details" data-state-id="${statechart.id}">`
+    );
+    println(
+      `    <summary class="state-details__label">${statechart.key}</summary>`
+    );
+    println(
+      `    <div class="state-details__description"><div class="state-details__chart">`
+    );
     const printChildren = (str: string) => println(`    ${str}`);
     buildStatechartSvg({
-      graph: statechart.graph,
+      graph: statechart,
       newId,
       println: printChildren,
       initialStateKey,

package/src/types/FsmStateConfig.ts

@@ -0,0 +1,7 @@
+import type { Transition } from "./Transition.ts";
+
+export type FsmStateConfig = {
+  key: string;
+  transitions: Transition[];
+  states?: FsmStateConfig[];
+};

package/src/{layout → types}/StateChart.ts

@@ -1,8 +1,7 @@
 import type { TransitionsGraph } from "./TransitionsGraph.ts";
 
-export type StateChart = {
+export type StateChart = TransitionsGraph & {
   id: string;
   key: string;
   children?: StateChart[];
-  graph: TransitionsGraph;
 } & Record<string, any>;

package/src/{layout → types}/StateGraphEdge.ts

@@ -1,5 +1,5 @@
-import { Dimensions } from "./Dimensions.ts";
-import { Position } from "./Position.ts";
+import type { Dimensions } from "./Dimensions.ts";
+import type { Position } from "./Position.ts";
 
 /**
  * Information about a state graph edge.

package/src/{layout → types}/StateGraphNode.ts

@@ -1,5 +1,5 @@
-import { Dimensions } from "./Dimensions";
-import { Position } from "./Position";
+import type { Dimensions } from "./Dimensions.ts";
+import type { Position } from "./Position.ts";
 
 /**
  * Information about a state node in the graph.

package/src/types/TransitionsGraph.ts

@@ -0,0 +1,13 @@
+import type { Dimensions } from "./Dimensions.ts";
+import type { Position } from "./Position.ts";
+import type { StateGraphEdge } from "./StateGraphEdge.ts";
+import type { StateGraphNode } from "./StateGraphNode.ts";
+
+/**
+ * Coordinates for state nodes and endges corresponding to state transitions.
+ */
+export type TransitionsGraph = Position &
+  Dimensions & {
+    nodes: StateGraphNode[];
+    edges: StateGraphEdge[];
+  };

package/src/types/index.ts

@@ -0,0 +1,10 @@
+export * from "./Dimensions.ts";
+export * from "./FsmStateConfig.ts";
+export * from "./GraphParamsProvider.ts";
+export * from "./Padding.ts";
+export * from "./Position.ts";
+export * from "./StateChart.ts";
+export * from "./StateGraphEdge.ts";
+export * from "./StateGraphNode.ts";
+export * from "./Transition.ts";
+export * from "./TransitionsGraph.ts";

package/src/utils/getPadding.ts

@@ -1,4 +1,4 @@
-import { Padding } from "../layout/Padding.ts";
+import type { Padding } from "../types/Padding.ts";
 
 /**
  * Expands a padding value to a 4-element array: [top, right, bottom, left].

package/dist/StateChart-DNGQd1XG.d.ts

@@ -1,53 +0,0 @@
-/**
- * Visual element dimensions.
- * @typedef {Object} Dimensions
- */
-type Dimensions = {
-    width: number;
-    height: number;
-};
-
-/**
- * X/Y position of a node in the graph.
- */
-type Position = {
-    x: number;
-    y: number;
-};
-
-/**
- * Information about a state graph edge.
- */
-type StateGraphEdge = Dimensions & Position & {
-    id: string;
-    from: string;
-    event: string;
-    to: string;
-    points: Position[];
-} & Record<string, any>;
-
-/**
- * Information about a state node in the graph.
- */
-type StateGraphNode = Dimensions & Position & {
-    id: string;
-    key: string;
-    state: string;
-} & Record<string, any>;
-
-/**
- * Coordinates for state nodes and endges corresponding to state transitions.
- */
-type TransitionsGraph = Position & Dimensions & {
-    nodes: StateGraphNode[];
-    edges: StateGraphEdge[];
-};
-
-type StateChart = {
-    id: string;
-    key: string;
-    children?: StateChart[];
-    graph: TransitionsGraph;
-} & Record<string, any>;
-
-export type { Dimensions as D, Position as P, StateGraphEdge as S, TransitionsGraph as T, StateGraphNode as a, StateChart as b };