@statewalker/fsm-charts 0.2.4 → 0.2.6

package/dist/chunk-36ZLXJVD.js

@@ -1,606 +0,0 @@
-import { getPadding } from './chunk-FIQDLBWD.js';
-
-// src/utils/toKebabCase.ts
-function toKebabCase(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 = toKebabCase(key2);
-          selectorRules.push(`  ${key2}: ${value};`);
-        }
-      }
-      if (selectorRules.length) {
-        lines.push(`${selectors.join(",\n")} {`);
-        lines.push(...selectorRules);
-        lines.push(`}`);
-      }
-      lines.push(...extensions);
-    }
-    return lines;
-  }
-}
-
-// src/html/buildStatechartStyles.ts
-var activeStatesStyle = {
-  backgroundColor: "white",
-  borderColor: "red",
-  borderWidth: "2px",
-  labelColor: "red"
-};
-var activeTransitionsStyle = {
-  backgroundColor: "#eee",
-  borderColor: "none",
-  borderWidth: "0",
-  lineColor: "red",
-  lineWidth: "1px",
-  labelColor: "red"
-};
-var selectedStatesStyle = {
-  backgroundColor: "white",
-  borderColor: "navy",
-  borderWidth: "2px",
-  labelColor: "navy"
-};
-var selectedTransitionsStyle = {
-  backgroundColor: "#eee",
-  borderColor: "none",
-  borderWidth: "0",
-  lineColor: "navy",
-  lineWidth: "1px",
-  labelColor: "navy"
-};
-function buildStateDetailsStyle({
-  root = ":root"
-}) {
-  return {
-    [root]: {
-      // --------------------------
-      // 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-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__content": {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.5em"
-      },
-      ".state-details__chart": {
-        maxWidth: "100%",
-        overflow: "auto",
-        scrollbarWidth: "thin"
-      }
-    }
-  };
-}
-function buildStateDetailsStyleWithModifier({
-  root = ":root",
-  modifier,
-  states
-}) {
-  return {
-    [root]: {
-      //
-      ".state-details": {
-        [`&.state-details--${modifier}`]: {
-          backgroundColor: `var(--state-${modifier}-background-color, ${states.backgroundColor})`,
-          border: `var(--state-${modifier}-border-width, 1px) solid var(--state-${modifier}-border-color, currentColor)`
-        }
-      },
-      ".state-details__label": {
-        [`&.state-details__label--${modifier}`]: {
-          color: `var(--state-${modifier}-label-color)`
-        }
-      }
-    }
-  };
-}
-function buildStatechartStylesWithModifier({
-  root = ":root",
-  modifier,
-  states,
-  transitions
-}) {
-  return {
-    [root]: {
-      // --------------------------------------
-      // Default values for transitions
-      [`--transition-${modifier}-background-color`]: transitions.backgroundColor,
-      [`--transition-${modifier}-border-color`]: transitions.borderColor,
-      [`--transition-${modifier}-border-width`]: transitions.borderWidth,
-      [`--transition-${modifier}-line-color`]: transitions.lineColor,
-      [`--transition-${modifier}-line-width`]: transitions.lineWidth,
-      [`--transition-${modifier}-label-color`]: transitions.labelColor,
-      // --------------------------------------
-      // Default values for states
-      [`--state-${modifier}-background-color`]: states.backgroundColor,
-      [`--state-${modifier}-border-color`]: states.borderColor,
-      [`--state-${modifier}-border-width`]: states.borderWidth,
-      [`--state-${modifier}-label-color`]: states.labelColor,
-      ".state": {
-        [`&.state--${modifier}`]: {
-          "--state-background-color": `var(--state-${modifier}-background-color)`,
-          "--state-border-color": `var(--state-${modifier}-border-color)`,
-          "--state-border-width": `var(--state-${modifier}-border-width)`,
-          "--state-label-color": `var(--state-${modifier}-label-color)`
-        }
-      },
-      ".transition": {
-        [`&.transition--${modifier}`]: {
-          "--transition-background-color": `var(--transition-${modifier}-background-color)`,
-          "--transition-border-color": `var(--transition-${modifier}-border-color)`,
-          "--transition-border-width": `var(--transition-${modifier}-border-width)`,
-          "--transition-line-color": `var(--transition-${modifier}-line-color)`,
-          "--transition-line-width": `var(--transition-${modifier}-line-width)`,
-          "--transition-label-color": `var(--transition-${modifier}-label-color)`
-        }
-      }
-    }
-  };
-}
-function buildStatechartStyles({
-  root = ":root"
-}) {
-  return {
-    [root]: {
-      // --------------------------------------
-      // 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",
-      ".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"
-      },
-      // --------------------------------------
-      // 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",
-      ".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/html/buildStatechartCss.ts
-function buildStatechartCss({ prefix = "" } = {}) {
-  const root = prefix || ":root";
-  return [
-    buildStatechartStyles({ root }),
-    buildStatechartStylesWithModifier({
-      root,
-      modifier: "selected",
-      states: selectedStatesStyle,
-      transitions: selectedTransitionsStyle
-    }),
-    buildStatechartStylesWithModifier({
-      root,
-      modifier: "active",
-      states: activeStatesStyle,
-      transitions: activeTransitionsStyle
-    }),
-    buildStateDetailsStyle({ root }),
-    buildStateDetailsStyleWithModifier({
-      root,
-      modifier: "selected",
-      states: selectedStatesStyle
-    }),
-    buildStateDetailsStyleWithModifier({
-      root,
-      modifier: "active",
-      states: activeStatesStyle
-    })
-  ].map(serializeCss).join("\n");
-}
-
-// 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(String(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 {
-  constructor(context) {
-    this._x0 = 0;
-    this._y0 = 0;
-    this._x1 = 0;
-    this._y1 = 0;
-    this._point = 0;
-    this._line = 0;
-    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);
-      // falls through
-      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
-        );
-      // falls through
-      default:
-        this.$point(x, y);
-        break;
-    }
-    this._x0 = this._x1, this._x1 = x;
-    this._y0 = this._y1, this._y1 = y;
-  }
-};
-
-// src/html/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>"
-}) {
-  if (!nodes.length && !edges.length) return;
-  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, 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, 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/html/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.text ?? statechart2.state}</summary>`
-    );
-    println2(`    <div class="state-details__content">`);
-    const printChildren = (str) => println2(`    ${str}`);
-    if (statechart2.nodes.length) {
-      println2(`      <div class="state-details__chart">`);
-      buildStatechartSvg({
-        graph: statechart2,
-        newId,
-        println: printChildren,
-        initialStateKey,
-        finalStateKey
-      });
-      println2(`    </div>`);
-    }
-    println2(`    <div class="state-details__description">`);
-    println2(`    </div>`);
-    for (const child of statechart2.children || []) {
-      render(child, printChildren);
-    }
-    println2(`    </div>`);
-    println2(`  </details>`);
-  }
-}
-
-export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase };