@statewalker/fsm-charts 0.0.2 → 0.0.4

package/dist/{chunk-3GGM3ZWL.js → chunk-ASIV3YDZ.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,

package/dist/chunk-DX2ZO7QN.js

@@ -0,0 +1,529 @@
+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"
+      },
+      ".transition__label": {
+        fill: "var(--transition-label-color, currentColor)",
+        fontSize: "var(--transition-label-font-size, 12px)",
+        fontFamily: "var(--transition-label-font-family, sans-serif)"
+      },
+      // ----------------------------------------------
+      // 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"
+      },
+      ".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.graph,
+      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/index-layout.js

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

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

@@ -0,0 +1,33 @@
+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;
+
+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 { b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel } from './index-svg-DW8Cf450.js';
+import './StateChart-DNGQd1XG.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-DX2ZO7QN.js';
 import './chunk-NXWOFQMO.js';

package/dist/index.d.ts

@@ -1,3 +1,7 @@
 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 { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-svg-DW8Cf450.js';
+
+declare function toKebabCase(str: string): string;
+
+export { toKebabCase };

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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.ts

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

package/src/layout/buildCharts.ts

@@ -41,7 +41,7 @@ export function buildCharts({
 } & GraphParamsProvider): StateChart {
   return buildChart(config);
 
-  function buildChart(config: FsmStateConfig, id: string = newId("state")) {
+  function buildChart(config: FsmStateConfig, id: string = newId("s")) {
     const graph = buildFlatCharts({
       lodash,
       transitions: config.transitions,