@statewalker/fsm-charts 0.0.2 → 0.0.4

package/dist/chunk-TPNWHU7Y.js

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