@statewalker/fsm-charts 0.0.3 → 0.0.5

package/dist/StateChart-pFSQIvtE.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Visual element dimensions.
+ * @typedef {Object} Dimensions
+ */
+type Dimensions = {
+    width: number;
+    height: number;
+};
+
+/**
+ * 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];
+
+type FsmStateConfig = {
+    key: string;
+    transitions: Transition[];
+    states?: FsmStateConfig[];
+};
+
+/**
+ * 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>;
+};
+
+/**
+ * Padding type.
+ */
+type Padding = [number, number, number, number] | [number, number] | 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 = TransitionsGraph & {
+    id: string;
+    key: string;
+    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 };

package/dist/chunk-3PNSXN5U.js

@@ -0,0 +1,538 @@
+import { getPadding } from './chunk-NXWOFQMO.js';
+
+// src/utils/toKebabCase.ts
+function toKebabCase2(str) {
+  str = str.trim().replace(/\s+/gim, "-");
+  str = str.replace(
+    /([^A-Z]?)([A-Z])/g,
+    (_, a, b) => a.toLowerCase() + "-" + b.toLowerCase()
+  );
+  return str;
+}
+
+// src/utils/serializeCss.ts
+function serializeCss(obj) {
+  return visitStyle(obj).join("\n");
+  function visitStyle(obj2, lines = [], prefixes = [""]) {
+    for (const [key, style] of Object.entries(obj2)) {
+      const selectors = [];
+      for (const sel of key.split(",").map((_) => _.trim())) {
+        for (const prefix of prefixes) {
+          const selector = sel.replace(
+            /^(.)/,
+            (_, ch) => ch === "&" ? prefix : prefix.length > 0 ? prefix + " " + ch : ch
+          );
+          selectors.push(selector);
+        }
+      }
+      const selectorRules = [];
+      const extensions = [];
+      for (let [key2, value] of Object.entries(style)) {
+        if (typeof value === "object") {
+          visitStyle({ [key2]: value }, extensions, selectors);
+        } else {
+          key2 = toKebabCase2(key2);
+          selectorRules.push(`  ${key2}: ${value};`);
+        }
+      }
+      if (selectorRules.length) {
+        lines.push(`${selectors.join(",\n")} {`);
+        lines.push(...selectorRules);
+        lines.push(`}`);
+      }
+      lines.push(...extensions);
+    }
+    return lines;
+  }
+}
+
+// src/svg/buildStatechartStyles.ts
+function buildStateDetailsStyle() {
+  return {
+    ".state-details": {
+      backgroundColor: "var(--state-background-color, white)",
+      border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+      borderRadius: "0.5em",
+      padding: "0.5em"
+    },
+    ".state-details__label": {
+      cursor: "pointer",
+      color: "var(--transition-label-color, currentColor)",
+      fontFamily: "var(--state-label-font-family, sans-serif)",
+      fontSize: "var(--state-label-font-size, 14px)"
+    },
+    ".state-details__description": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5em"
+    },
+    ".state-details__chart": {
+      maxWidth: "100%",
+      overflow: "auto",
+      scrollbarWidth: "thin"
+    },
+    //
+    ".state-details--selected": {
+      backgroundColor: "var(--state-selected-background-color, white)",
+      border: "var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)"
+    },
+    ".state-details__label--selected": {
+      color: "var(--state-selected-label-color)"
+    }
+  };
+}
+function buildStatechartStyles({
+  root = ":root"
+} = {}) {
+  return {
+    [root]: {
+      // --------------------------------------
+      // Normal states
+      "--state-background-color": "white",
+      "--state-border-color": "silver",
+      "--state-border-width": "1px",
+      "--state-label-color": "gray",
+      "--state-label-font-size": "14px",
+      "--state-label-font-family": "sans-serif",
+      // Selected states
+      "--state-selected-background-color": "#eee",
+      "--state-selected-border-color": "red",
+      "--state-selected-border-width": "2px",
+      "--state-selected-label-color": "red",
+      // --------------------------------------
+      // Normal transitions
+      "--transition-background-color": "rgba(255,255,255,0.7)",
+      "--transition-border-color": "none",
+      "--transition-border-width": "1px",
+      "--transition-line-color": "silver",
+      "--transition-line-width": "1px",
+      "--transition-label-color": "gray",
+      "--transition-label-font-size": "12px",
+      "--transition-label-font-family": "sans-serif",
+      // --------------------------------------
+      // Selected transitions
+      "--transition-selected-background-color": "#eee",
+      "--transition-selected-border-color": "none",
+      "--transition-selected-border-width": "0",
+      "--transition-selected-line-color": "red",
+      "--transition-selected-line-width": "1px",
+      "--transition-selected-label-color": "red",
+      // --------------------------------------
+      // --------------------------------------
+      ...buildStateDetailsStyle(),
+      ".transition": {},
+      ".transition--selected": {
+        "--transition-background-color": "var(--transition-selected-background-color)",
+        "--transition-border-color": "var(--transition-selected-border-color)",
+        "--transition-border-width": "var(--transition-selected-border-width)",
+        "--transition-line-color": "var(--transition-selected-line-color)",
+        "--transition-line-width": "var(--transition-selected-line-width)",
+        "--transition-label-color": "var(--transition-selected-label-color)"
+      },
+      ".transition__marker": {
+        fill: "var(--transition-line-color, currentColor)",
+        stroke: "none"
+      },
+      ".transition__line": {
+        stroke: "var(--transition-line-color, currentColor)",
+        strokeWidth: "var(--transition-line-width, 1px)"
+      },
+      ".transition__box": {
+        fill: "var(--transition-background-color, rgba(255,255,255,0.7))",
+        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"
+      },
+      // ----------------------------------------------
+      // States
+      ".state": {},
+      ".state--selected": {
+        "--state-background-color": "var(--state-selected-background-color)",
+        "--state-border-color": "var(--state-selected-border-color)",
+        "--state-border-width": "var(--state-selected-border-width)",
+        "--state-label-color": "var(--state-selected-label-color)"
+      },
+      // --------------------------
+      // Panels
+      ".state__details": {
+        backgroundColor: "var(--state-background-color, white)",
+        border: "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+        borderRadius: "0.5em",
+        padding: "0.5em"
+      },
+      ".state__description": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5em"
+      },
+      ".state__chart-container": {
+        maxWidth: "100%",
+        overflow: "auto",
+        scrollbarWidth: "thin"
+      },
+      // --------------------------
+      // Statecharts
+      ".state__box": {
+        fill: "var(--state-background-color, white)",
+        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)",
+        fill: "var(--state-label-color, currentColor)",
+        fontSize: "var(--state-label-font-size, 14px)",
+        fontFamily: "var(--state-label-font-family, sans-serif)",
+        cursor: "pointer"
+      },
+      ".state__initial": {
+        fill: "var(--state-border-color, currentColor)",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 2px)"
+      },
+      ".state__final": {
+        fill: "white",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 2px)",
+        // ---------------------------
+        "&.state__final--inner": {
+          fill: "var(--state-border-color, currentColor)",
+          stroke: "none",
+          strokeWidth: "0"
+        }
+      }
+    }
+  };
+}
+
+// src/svg/buildStatechartCss.ts
+function buildStatechartCss({ prefix = "" } = {}) {
+  const cssObject = buildStatechartStyles({ root: prefix || ":root" });
+  return serializeCss(cssObject);
+}
+
+// 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="statechart__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",
+      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="statechart__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 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)
+      });
+      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-details__label">${statechart2.key}</summary>`
+    );
+    println2(
+      `    <div class="state-details__description"><div class="state-details__chart">`
+    );
+    const printChildren = (str) => println2(`    ${str}`);
+    buildStatechartSvg({
+      graph: statechart2,
+      newId,
+      println: printChildren,
+      initialStateKey,
+      finalStateKey
+    });
+    println2(`    </div>`);
+    for (const child of statechart2.children || []) {
+      render(child, printChildren);
+    }
+    println2(`    </div>`);
+    println2(`  </details>`);
+  }
+}
+
+export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase2 as toKebabCase };

package/dist/{chunk-3GGM3ZWL.js → chunk-IT7GBMYV.js}

@@ -2564,7 +2564,7 @@ function buildCharts({
   finalStateKey = "<final>"
 }) {
   return buildChart(config);
-  function buildChart(config2, id = newId("state")) {
+  function buildChart(config2, id = newId("s")) {
     const graph = buildFlatCharts({
       lodash,
       transitions: config2.transitions,
@@ -2589,7 +2589,7 @@ function buildCharts({
     return {
       id,
       key: config2.key,
-      graph,
+      ...graph,
       children
     };
   }

package/dist/chunk-X2UPWZLX.js

@@ -0,0 +1,4 @@
+// src/runtime/index.ts
+var a = "a";
+
+export { a };

package/dist/index-layout.d.ts

@@ -1,24 +1,5 @@
-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;
+import { T as Transition, P as Padding, G as GraphParamsProvider, d as TransitionsGraph, F as FsmStateConfig, S as StateChart } from './StateChart-pFSQIvtE.js';
+export { D as Dimensions, a as Position, b as StateGraphEdge, c as StateGraphNode } from './StateChart-pFSQIvtE.js';
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -41,12 +22,6 @@ declare function buildFlatCharts({ lodash, transitions, newId, getStateParams, g
     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.
@@ -93,4 +68,4 @@ lineGap, }?: {
     height: number;
 };
 
-export { Dimensions, type GraphParamsProvider, type Padding, type Transition, TransitionsGraph, buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions };
+export { FsmStateConfig, GraphParamsProvider, Padding, StateChart, Transition, TransitionsGraph, buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions };

package/dist/index-layout.js

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

package/dist/index-runtime.d.ts

@@ -0,0 +1,5 @@
+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';
+
+declare const a = "a";
+
+export { a };

package/dist/index-runtime.js

@@ -0,0 +1 @@
+export { a } from './chunk-X2UPWZLX.js';