@statewalker/fsm-charts 0.0.1

package/src/svg/buildStatechartSvg.ts

@@ -0,0 +1,256 @@
+import type {
+  Dimensions,
+  Padding,
+  Position,
+  TransitionsGraph,
+} from "../layout/index.ts";
+import { getPadding } from "../utils/getPadding.ts";
+import { serializeAttrs } from "../utils/serializeAttrs.ts";
+import { BasisCurve } from "../utils/BasisCurve.ts";
+
+function getBoxParams({
+  x,
+  y,
+  width,
+  height,
+  padding = 0,
+}: Position & Dimensions & { padding?: Padding }) {
+  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,
+  };
+}
+
+export function buildStatechartSvg({
+  graph: { width, height, nodes, edges },
+  newId,
+  stateFontSize = 14,
+  transitionFontSize = 12,
+  println,
+  initialStateKey = "<initial>",
+  finalStateKey = "<final>",
+}: {
+  graph: TransitionsGraph;
+  newId: (prefix: string) => string;
+  println: (str: string) => void;
+  stateFontSize?: number;
+  transitionFontSize?: number;
+  initialStateKey?: string;
+  finalStateKey?: string;
+}) {
+  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",
+    })}>`
+  );
+
+  /*
+  --------------------------------------------------- 
+  Transitions visualization
+
+  CSS Classes:
+  .transitions .transition-marker
+  .transitions .transition .transition-line
+  .transitions .transition .transition-box
+  .transitions .transition .transition-label
+   --------------------------------------------------- 
+  */
+  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: string[] = [];
+    const round = (...n: number[]) => n.map(Math.round);
+    const base = new BasisCurve({
+      bezierCurveTo(
+        x0: number,
+        y0: number,
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number
+      ) {
+        path.push("C" + round(x0, y0, x1, y1, x2, y2).join(","));
+      },
+      moveTo(x: number, y: number) {
+        path.push("M" + round(x, y).join(","));
+      },
+      lineTo(x: number, y: number) {
+        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, height } = getBoxParams({
+        ...edge,
+        padding: 0,
+      });
+
+      const rectAttrs = serializeAttrs({
+        x,
+        y: y - transitionFontSize,
+        width,
+        height,
+        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 + width / 2),
+        y: Math.round(y + height / 2 - transitionFontSize / 2),
+      });
+      println(`    <text ${textAttrs}>${text}</text>`);
+    }
+    println(`  </g>`);
+  }
+  println("</g>");
+
+  /*
+  --------------------------------------------------- 
+  States visualization
+
+  CSS Classes:
+  .states .state
+  .states .state .state-box 
+  .states .state .state-initial 
+  .states .state .state-final 
+  .states .state .state-final.inner 
+  .states .state .state-label
+   --------------------------------------------------- 
+  */
+
+  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, height } = getBoxParams({ ...node, padding: shift });
+
+    println(`  <g class="state" data-state-id="${id}">`);
+    if (key === initialStateKey || key === finalStateKey) {
+      const cx = Math.round(x + width / 2);
+      const cy = Math.round(y + height / 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,
+        height,
+        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 + width / 2),
+        y: Math.round(y + height / 2 + stateFontSize / 4),
+        "data-state-id": id,
+      });
+      println(`    <text ${textAttrs}>${text}</text>`);
+    }
+    println("  </g>");
+  }
+  println("</g>");
+
+  println("</svg>");
+}

package/src/svg/buildStatechartsPanel.ts

@@ -0,0 +1,38 @@
+import { buildStatechartSvg } from "./buildStatechartSvg.ts";
+import type { StateChart } from "../layout/StateChart.ts";
+
+export function buildStatechartsPanel({
+  statechart,
+  newId,
+  println,
+  initialStateKey = "<initial>",
+  finalStateKey = "<final>",
+}: {
+  statechart: StateChart;
+  newId: (prefix: string) => string;
+  println: (str: string) => void;
+  initialStateKey?: string;
+  finalStateKey?: string;
+}) : void {
+  render(statechart, println);
+
+  function render(statechart: StateChart, println: (str: string) => void) {
+    println(`<details class="state-details" data-state-id="${statechart.id}">`);
+    println(`  <summary class="state-label">${statechart.key}</summary>`);
+    println(`  <div class="state-description"><div class="state-chart-container">`);
+    const printChildren = (str: string) => println(`    ${str}`);
+    buildStatechartSvg({
+      graph: statechart.graph,
+      newId,
+      println: printChildren,
+      initialStateKey,
+      finalStateKey,
+    });
+    println(`  </div>`);
+    for (const child of statechart.children || []) {
+      render(child, printChildren);
+    }
+    println(`  </div>`);
+    println(`</details>`);
+  }
+}

package/src/svg/index.ts

@@ -0,0 +1,3 @@
+export * from "./buildStatechartCss.ts";
+export * from "./buildStatechartsPanel.ts";
+export * from "./buildStatechartSvg.ts";

package/src/utils/BasisCurve.ts

@@ -0,0 +1,89 @@
+// This file contains the implementation of the BasisCurve class
+// copied from d3-shape/src/curve/basis.ts (Mike Bostock, MIT License)
+
+export type DrawContext = {
+  bezierCurveTo(
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number
+  ): void;
+  moveTo(x: number, y: number): void;
+  lineTo(x: number, y: number): void;
+  closePath(): void;
+};
+
+export class BasisCurve {
+  _context: DrawContext;
+  _x0: number = 0;
+  _y0: number = 0;
+  _x1: number = 0;
+  _y1: number = 0;
+  _point: number = 0;
+  _line: number = 0;
+  constructor(context: DrawContext) {
+    this._context = context;
+  }
+  $point(x: number, y: number) {
+    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: number, y: number) {
+    (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);
+  }
+}

package/src/utils/getPadding.ts

@@ -0,0 +1,13 @@
+import { Padding } from "../layout/Padding.ts";
+
+/**
+ * Expands a padding value to a 4-element array: [top, right, bottom, left].
+ * @param padding padding value to expand
+ * @returns a 4-element array representing the padding
+ */
+export function getPadding(padding: Padding): [number, number, number, number] {
+  if (typeof padding === "number") return [padding, padding, padding, padding];
+  if (padding.length === 2)
+    return [padding[0], padding[1], padding[0], padding[1]];
+  return padding;
+}

package/src/utils/serializeAttrs.ts

@@ -0,0 +1,28 @@
+export function serializeAttrs(
+  attrs: Record<string, string | number | undefined> = {},
+  {
+    prefix = "",
+    transform = false,
+  }: { prefix: string; transform: boolean } = {}
+) {
+  const result: string[] = [];
+  for (const [key, value] of Object.entries(attrs || {}).sort(([a], [b]) =>
+    a > b ? 1 : -1
+  )) {
+    if (value === undefined || value === null || value === "") continue;
+    result.push(
+      `${prefix}${escapeValue(key)}${
+        "=" +
+        JSON.stringify(escapeValue(transform ? toKebabCase(value) : value))
+      }`
+    );
+  }
+  return result.join(" ");
+
+  function escapeValue(value: string | number | undefined): string {
+    return String(value)
+      .replaceAll(/</gim, "&lt;")
+      .replaceAll(/>/gim, "&gt;")
+      .replaceAll(/"/gim, "&qout;");
+  }
+}

package/src/utils/serializeStyle.ts

@@ -0,0 +1,11 @@
+import { toKebabCase } from "./toKebabCase.ts";
+
+export function serializeStyle(
+  style: Record<string, string>,
+  separator = "; "
+) {
+  const str = Object.entries(style)
+    .map(([key, value]) => `${toKebabCase(key)}: ${value}`)
+    .join(separator);
+  return str ? str + separator : "";
+}

package/src/utils/toKebabCase.ts

@@ -0,0 +1,18 @@
+export function toKebabCase(str: string): string {
+  // Remove spaces:
+  str = str.trim().replace(/\s+/gim, "-");
+  // Transform to kebab:
+  str = str.replace(
+    /([^A-Z]?)([A-Z])/g,
+    (_, a, b) => a.toLowerCase() + "-" + b.toLowerCase()
+  );
+  return str;
+  
+  // return (
+  //   str.match(
+  //     /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+  //   ) || []
+  // )
+  //   .join("-")
+  //   .toLowerCase();
+}