@statewalker/fsm-charts 0.0.1

package/dist/chunk-NXWOFQMO.js

@@ -0,0 +1,10 @@
+// src/utils/getPadding.ts
+function getPadding(padding) {
+  if (typeof padding === "number")
+    return [padding, padding, padding, padding];
+  if (padding.length === 2)
+    return [padding[0], padding[1], padding[0], padding[1]];
+  return padding;
+}
+
+export { getPadding };

package/dist/chunk-TPNWHU7Y.js

@@ -0,0 +1,437 @@
+import { getPadding } from './chunk-NXWOFQMO.js';
+
+// src/svg/buildStatechartCss.ts
+function buildStatechartCss({ prefix = "" } = {}) {
+  return `
+    --state--fill: white;
+    --state--stroke-color: silver;
+    --state--stroke-width: 1px;
+
+    --state-initial--fill: var(--state--stroke-color, silver);
+    --state-initial--stroke-color: var(--state--stroke-color, none);
+    --state-initial--stroke-width: var(--state--stroke-width, 0);
+
+    --state-final--fill: var(--state--fill, white);
+    --state-final--stroke-color: var(--state--stroke-color, silver);
+    --state-final--stroke-width: var(--state--stroke-width, 1px);
+
+    --state-label--color: gray;
+    --state-label--font-size: 14px;
+    --state-label--font-family: sans-serif;
+
+    --transition--fill: rgba(255,255,255,0.7);
+    --transition--stroke-color: none;
+    --transition--stroke-width: 1;
+
+    --transition-line--stroke-color: silver;
+    --transition-line--stroke-width: 1px;
+
+    --transition-label--color: gray;
+    --transition-label--font-size: 12px;
+    --transition-label--font-family: sans-serif;
+
+    --transition-marker--fill: var(--transition-line--stroke-color, gray);
+    
+  .state-details {
+    
+  }
+  
+  .state-details  {
+    background-color: var(--state--fill, white);
+    border: var(--state--stroke-width, 1px) solid var(--state--stroke-color, silver);
+    border-radius: 0.5em;
+    padding: 0.5em;
+  }
+
+  .state-details .state-label {
+    cursor: pointer;
+    color: var(--transition-label--color, gray);
+    font-family: var(--state-label--font-family, sans-serif);
+    font-size: var(--state-label--font-size, 14px);
+  }
+  .state-details .state-description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+  .state-details .state-chart-container {
+    max-width: 100%;
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+
+  .state-details  .statechart {
+
+  }
+
+  .state-details  .statechart .transition-marker {
+    fill : var(--transition-marker--fill, silver);
+  }
+
+  .state-details  .statechart .transitions {
+  }
+
+  .state-details  .statechart .transitions .transition .transition-line {
+    stroke: var(--transition-line--stroke-color, silver);
+    stroke-width: var(--transition-line--stroke-width, 1px);
+  }
+
+  .state-details  .statechart .transitions .transition .transition-box {
+    fill: var(--transition--fill, rgba(255,255,255,0.7));
+    stroke: var(--transition--stroke-color, none);
+    stroke-width: var(--transition--stroke-width, 1);
+    border-radius: 0.5em;
+  }
+
+  .state-details  .statechart .transitions .transition .transition-label {
+    fill: var(--transition-label--color, gray);
+    font-size: var(--transition-label--font-size, 12px);
+    font-family: var(--transition-label--font-family, sans-serif);
+  }
+
+  /* ------------------------------------------ */
+  .state-details  .statechart .states .state {
+  }
+  .state-details  .statechart .states .state .state-box {
+    fill: var(--state--fill, white);
+    stroke: var(--state--stroke-color, silver);
+    stroke-width: var(--state--stroke-width, 1px);
+    border-radius: 0.5em;
+  }
+  .state-details  .statechart .states .state .state-initial {
+    fill: var(--state-initial--fill, gray);
+    stroke: var(--state-initial--stroke-color, none); 
+    stroke-width: var(--state-initial--stroke-width, 0);
+  }
+  .state-details  .statechart .states .state .state-final {
+    fill: var(--state-final--fill, white);
+    stroke: var(--state-final--stroke-color, silver);
+    stroke-width: var(--state-final--stroke-width, 2);
+  }
+  .state-details  .statechart .states .state .state-final.inner {
+    fill: var(--state-final--stroke-color, silver);
+    stroke: none;
+    stroke-width: 0;
+  }
+  .state-details  .statechart .states .state .state-label {
+    fill: var(--state-label--color, gray);
+    font-size: var(--state-label--font-size, 14px);
+    font-family: var(--state-label--font-family, sans-serif);
+  }
+
+  `;
+}
+
+// src/utils/serializeAttrs.ts
+function serializeAttrs(attrs = {}, {
+  prefix = "",
+  transform = false
+} = {}) {
+  const result = [];
+  for (const [key, value] of Object.entries(attrs || {}).sort(
+    ([a], [b]) => a > b ? 1 : -1
+  )) {
+    if (value === void 0 || value === null || value === "")
+      continue;
+    result.push(
+      `${prefix}${escapeValue(key)}${"=" + JSON.stringify(escapeValue(transform ? toKebabCase(value) : value))}`
+    );
+  }
+  return result.join(" ");
+  function escapeValue(value) {
+    return String(value).replaceAll(/</gim, "&lt;").replaceAll(/>/gim, "&gt;").replaceAll(/"/gim, "&qout;");
+  }
+}
+
+// src/utils/BasisCurve.ts
+var BasisCurve = class {
+  _context;
+  _x0 = 0;
+  _y0 = 0;
+  _x1 = 0;
+  _y1 = 0;
+  _point = 0;
+  _line = 0;
+  constructor(context) {
+    this._context = context;
+  }
+  $point(x, y) {
+    this._context.bezierCurveTo(
+      (2 * this._x0 + this._x1) / 3,
+      (2 * this._y0 + this._y1) / 3,
+      (this._x0 + 2 * this._x1) / 3,
+      (this._y0 + 2 * this._y1) / 3,
+      (this._x0 + 4 * this._x1 + x) / 6,
+      (this._y0 + 4 * this._y1 + y) / 6
+    );
+  }
+  areaStart() {
+    this._line = 0;
+  }
+  areaEnd() {
+    this._line = NaN;
+  }
+  lineStart() {
+    this._x0 = this._x1 = this._y0 = this._y1 = NaN;
+    this._point = 0;
+  }
+  lineEnd() {
+    switch (this._point) {
+      case 3:
+        this.$point(this._x1, this._y1);
+      case 2:
+        this._context.lineTo(this._x1, this._y1);
+        break;
+    }
+    if (this._line || this._line !== 0 && this._point === 1)
+      this._context.closePath();
+    this._line = 1 - this._line;
+  }
+  point(x, y) {
+    x = +x, y = +y;
+    switch (this._point) {
+      case 0:
+        this._point = 1;
+        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
+        break;
+      case 1:
+        this._point = 2;
+        break;
+      case 2:
+        this._point = 3;
+        this._context.lineTo(
+          (5 * this._x0 + this._x1) / 6,
+          (5 * this._y0 + this._y1) / 6
+        );
+      default:
+        this.$point(x, y);
+        break;
+    }
+    this._x0 = this._x1, this._x1 = x;
+    this._y0 = this._y1, this._y1 = y;
+  }
+};
+
+// src/svg/buildStatechartSvg.ts
+function getBoxParams({
+  x,
+  y,
+  width,
+  height,
+  padding = 0
+}) {
+  const [top, right, bottom, left] = getPadding(padding);
+  const h = Math.ceil(height - top - bottom);
+  return {
+    x: x + left,
+    y: y - bottom - h,
+    width: Math.ceil(width - left - right),
+    height: h
+  };
+}
+function buildStatechartSvg({
+  graph: { width, height, nodes, edges },
+  newId,
+  stateFontSize = 14,
+  transitionFontSize = 12,
+  println,
+  initialStateKey = "<initial>",
+  finalStateKey = "<final>"
+}) {
+  width = Math.ceil(width);
+  height = Math.ceil(height);
+  println(
+    `<svg ${serializeAttrs({
+      class: "statechart",
+      width,
+      height,
+      viewbox: `0 0 ${width} ${height}`,
+      xmlns: "http://www.w3.org/2000/svg"
+    })}>`
+  );
+  println(`<g class="transitions">`);
+  const markerAttrs = serializeAttrs({
+    refX: 19,
+    refY: 7,
+    markerWidth: 20,
+    markerHeight: 14,
+    orient: "auto",
+    class: "transition-marker",
+    stroke: "none",
+    fill: "currentColor"
+  });
+  for (const edge of edges) {
+    const { id, points, event: text } = edge;
+    println(`  <g class="transition" data-transition-id="${id}">`);
+    const markerId = newId("marker");
+    println(`    <defs>`);
+    println(`      <marker id="${markerId}" ${markerAttrs}>`);
+    println(`        <path d="M 19,7 L9,13 L14,7 L9,1 Z"></path>`);
+    println(`      </marker>`);
+    println(`    </defs>`);
+    const path = [];
+    const round = (...n) => n.map(Math.round);
+    const base = new BasisCurve({
+      bezierCurveTo(x0, y0, x1, y1, x2, y2) {
+        path.push("C" + round(x0, y0, x1, y1, x2, y2).join(","));
+      },
+      moveTo(x, y) {
+        path.push("M" + round(x, y).join(","));
+      },
+      lineTo(x, y) {
+        path.push("L" + round(x, y).join(","));
+      },
+      closePath() {
+        path.push("Z");
+      }
+    });
+    base.lineStart();
+    for (const point of points) {
+      base.point(point.x, point.y);
+    }
+    base.lineEnd();
+    const serializedAttrs = serializeAttrs({
+      class: "transition-line",
+      "transition-id": id,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1px",
+      d: path.join(""),
+      "marker-end": `url(#${markerId})`
+    });
+    println(`    <path ${serializedAttrs} />`);
+    if (text) {
+      const { x, y, width: width2, height: height2 } = getBoxParams({
+        ...edge,
+        padding: 0
+      });
+      const rectAttrs = serializeAttrs({
+        x,
+        y: y - transitionFontSize,
+        width: width2,
+        height: height2,
+        rx: Math.ceil(transitionFontSize / 2),
+        ry: Math.ceil(transitionFontSize / 2),
+        fill: "rgba(255,255,255,0.7)",
+        stroke: "none",
+        strokeWidth: "1",
+        class: "transition-box"
+      });
+      println(`    <rect ${rectAttrs} />`);
+      const textAttrs = serializeAttrs({
+        class: "transition-label",
+        "text-anchor": "middle",
+        fill: "currentColor",
+        x: Math.round(x + width2 / 2),
+        y: Math.round(y + height2 / 2 - transitionFontSize / 2)
+      });
+      println(`    <text ${textAttrs}>${text}</text>`);
+    }
+    println(`  </g>`);
+  }
+  println("</g>");
+  const shift = stateFontSize / 4;
+  const initialStateRadius = 6;
+  const finalStateRadius = initialStateRadius / 2;
+  println(`<g class="states">`);
+  for (const node of nodes) {
+    const { key, id, state: 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) {
+      const cx = Math.round(x + width2 / 2);
+      const cy = Math.round(y + height2 / 2);
+      if (key === initialStateKey) {
+        const serializedAttrs = serializeAttrs({
+          class: "state-initial",
+          cx,
+          cy,
+          r: initialStateRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        });
+        println(`    <circle ${serializedAttrs} />`);
+      } else {
+        let serializedAttrs = serializeAttrs({
+          class: "state-final",
+          cx,
+          cy,
+          r: initialStateRadius,
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2
+        });
+        println(`    <circle ${serializedAttrs} />`);
+        serializedAttrs = serializeAttrs({
+          class: "state-final inner",
+          cx,
+          cy,
+          r: finalStateRadius,
+          fill: "currentColor",
+          stroke: "none",
+          strokeWidth: 0
+        });
+        println(`    <circle ${serializedAttrs} />`);
+      }
+    } else {
+      const rectAttrs = serializeAttrs({
+        x,
+        y,
+        width: width2,
+        height: height2,
+        rx: Math.ceil(stateFontSize / 2),
+        ry: Math.ceil(stateFontSize / 2),
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        class: "state-box"
+      });
+      println(`    <rect ${rectAttrs} />`);
+      const textAttrs = serializeAttrs({
+        class: "state-label",
+        "text-anchor": "middle",
+        fill: "currentColor",
+        x: Math.round(x + width2 / 2),
+        y: Math.round(y + height2 / 2 + stateFontSize / 4),
+        "data-state-id": id
+      });
+      println(`    <text ${textAttrs}>${text}</text>`);
+    }
+    println("  </g>");
+  }
+  println("</g>");
+  println("</svg>");
+}
+
+// src/svg/buildStatechartsPanel.ts
+function buildStatechartsPanel({
+  statechart,
+  newId,
+  println,
+  initialStateKey = "<initial>",
+  finalStateKey = "<final>"
+}) {
+  render(statechart, println);
+  function render(statechart2, println2) {
+    println2(`<details class="state-details" data-state-id="${statechart2.id}">`);
+    println2(`  <summary class="state-label">${statechart2.key}</summary>`);
+    println2(`  <div class="state-description"><div class="state-chart-container">`);
+    const printChildren = (str) => println2(`    ${str}`);
+    buildStatechartSvg({
+      graph: statechart2.graph,
+      newId,
+      println: printChildren,
+      initialStateKey,
+      finalStateKey
+    });
+    println2(`  </div>`);
+    for (const child of statechart2.children || []) {
+      render(child, printChildren);
+    }
+    println2(`  </div>`);
+    println2(`</details>`);
+  }
+}
+
+export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel };

package/dist/index-layout.d.ts

@@ -0,0 +1,96 @@
+import { D as Dimensions, T as TransitionsGraph, b as StateChart } from './StateChart-DNGQd1XG.js';
+export { P as Position, S as StateGraphEdge, a as StateGraphNode } from './StateChart-DNGQd1XG.js';
+
+/**
+ * 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>;
+};
+
+/**
+ * A transition from one state to another.
+ * Contains the state before the transition, the event that triggers the transition, and the state after the transition.
+ */
+type Transition = [string, string, string];
+
+/**
+ * Padding type.
+ */
+type Padding = [number, number, number, number] | [number, number] | number;
+
+/**
+ * Build graphs corresponding to the specified transitions.
+ * @param transitions - The transitions between states.
+ * @param newId - A function that generates unique ids for nodes and edges.
+ * @param getStateParams - A function that returns the dimensions of a state node.
+ * @param getTransitionParams - A function that returns the dimensions of a transition edge.
+ * @param initialStateKey - The key for the initial state.
+ * @param finalStateKey - The key for the final state.
+ * @param vertical - Whether the graph should be vertical.
+ * @returns {TransitionsGraph} - The graph with nodes and edges.
+ */
+declare function buildFlatCharts({ lodash, transitions, newId, getStateParams, getTransitionParams, padding, initialStateKey, finalStateKey, vertical, }: {
+    transitions: Transition[];
+    lodash: any;
+    newId: (prefix: string) => string;
+    initialStateKey?: string;
+    finalStateKey?: string;
+    vertical?: boolean;
+    padding?: Padding;
+} & GraphParamsProvider): TransitionsGraph;
+
+type FsmStateConfig = {
+    key: string;
+    transitions: [string, string, string][];
+    states?: FsmStateConfig[];
+};
+
+/**
+ * Build graphs corresponding to the specified transitions.
+ * @param config - State configuration with transitions and sub-states.
+ * @param newId - A function that generates unique ids for nodes and edges.
+ * @param getStateParams - A function that returns the dimensions of a state node.
+ * @param getTransitionParams - A function that returns the dimensions of a transition edge.
+ * @param initialStateKey - The key for the initial state.
+ * @param finalStateKey - The key for the final state.
+ * @returns {StateChart} - The graph with nodes and edges.
+ */
+declare function buildCharts({ lodash, config, newId, getStateParams, getTransitionParams, padding, initialStateKey, finalStateKey, }: {
+    config: FsmStateConfig;
+    lodash: any;
+    newId: (prefix: string) => string;
+    initialStateKey?: string;
+    finalStateKey?: string;
+    padding?: Padding;
+} & GraphParamsProvider): StateChart;
+
+/**
+ * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
+ * @param fontSize - The font size for the state and transition labels.
+ * @param stateFontSize - The font size for the state labels.
+ * @param stateTextPadding - The padding around the state labels.
+ * @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, }?: {
+    fontSize?: number;
+    stateFontSize?: number;
+    stateTextPadding?: Padding;
+    transitionsFontSize?: number;
+    transitionsTextPadding?: Padding;
+}): GraphParamsProvider;
+
+declare function getLabelDimensions(label: string, { padding, fontSize, getCharWidth, // Golden ratio and all that jazz :-)
+lineGap, }?: {
+    padding?: Padding;
+    fontSize?: number;
+    getCharWidth?: (char: string) => number;
+    lineGap?: number;
+}): {
+    width: number;
+    height: number;
+};
+
+export { Dimensions, type GraphParamsProvider, type Padding, type Transition, TransitionsGraph, buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions };

package/dist/index-layout.js

@@ -0,0 +1,2 @@
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-3GGM3ZWL.js';
+import './chunk-NXWOFQMO.js';

package/dist/index-svg.d.ts

@@ -0,0 +1,25 @@
+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 };

package/dist/index-svg.js

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+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';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-3GGM3ZWL.js';
+export { buildStatechartCss, buildStatechartSvg, buildStatechartsPanel } from './chunk-TPNWHU7Y.js';
+import './chunk-NXWOFQMO.js';

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@statewalker/fsm-charts",
+  "version": "0.0.1",
+  "description": "HFSM Implementation",
+  "keywords": [],
+  "homepage": "https://github.com/statewalker/statewalker-fsm-charts",
+  "author": {
+    "name": "Mikhail Kotelnikov",
+    "email": "mikhail.kotelnikov@gmail.com"
+  },
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "jsdelivr": "./dist/index.js",
+  "unpkg": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts"
+    }
+  },
+  "devDependencies": {
+    "@statewalker/typescript-config": "*",
+    "@types/lodash-es": "^4.17.12",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "tsup": "^8.0.2",
+    "typescript": "*",
+    "vitest": "^1.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:statewalker/statewalker-fsm-charts.git"
+  },
+  "scripts": {
+    "build_": "yarn test && tsup",
+    "build": "tsup",
+    "watch": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint",
+    "lint:fix": "yarn lint -- --fix",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/FsmStateConfig.ts

@@ -0,0 +1,5 @@
+export type FsmStateConfig = {
+  key : string;
+  transitions: [string, string, string][];
+  states?: FsmStateConfig[];
+}

package/src/dagre/acyclic.d.ts

@@ -0,0 +1,2 @@
+export function run(g: any): void;
+export function undo(g: any): void;