@statewalker/fsm-charts 0.2.4 → 0.2.6

package/src/layout/buildFlatCharts.ts

@@ -1,17 +1,15 @@
 import { layout } from "../dagre/layout.js";
 import { Graph } from "../graphlib/graph.js";
-
-import type { GraphParamsProvider } from "../types/GraphParamsProvider.ts";
-import type { Transition } from "../types/Transition.ts";
-import type { TransitionsGraph } from "../types/TransitionsGraph.ts";
-import type { StateGraphNode } from "../types/StateGraphNode.ts";
-import type { StateGraphEdge } from "../types/StateGraphEdge.ts";
-import type { Padding } from "../types/Padding.ts";
-import type { Position } from "../types/Position.ts";
-import type { Dimensions } from "../types/Dimensions.ts";
-
-import { getPadding } from "../utils/getPadding.ts";
-import { getLodash, setLodash } from "../lodash-es/index.ts";
+import { getLodash, setLodash } from "../lodash-es/index.js";
+import type { Dimensions } from "../types/Dimensions.js";
+import type { GraphParamsProvider } from "../types/GraphParamsProvider.js";
+import type { Padding } from "../types/Padding.js";
+import type { Position } from "../types/Position.js";
+import type { StateGraphEdge } from "../types/StateGraphEdge.js";
+import type { StateGraphNode } from "../types/StateGraphNode.js";
+import type { Transition } from "../types/Transition.js";
+import type { TransitionsGraph } from "../types/TransitionsGraph.js";
+import { getPadding } from "../utils/getPadding.js";
 
 /**
  * Build graphs corresponding to the specified transitions.
@@ -46,7 +44,7 @@ export function buildFlatCharts({
   padding?: Padding;
   direction?: "tb" | "bt" | "lr" | "rl";
 } & GraphParamsProvider): TransitionsGraph {
-  let prevLodash = getLodash();
+  const prevLodash = getLodash();
   try {
     setLodash(lodash);
     const rankdir = direction || (vertical ? "tb" : "lr");
@@ -94,14 +92,12 @@ export function buildFlatCharts({
       n.y += -n.height / 2;
       return n;
     });
-    const edges = graph
-      .edges()
-      .map(({ v, w, name }: { v: string; w: string; name: string }) => {
-        const e = graph.edge(v, w, name) as StateGraphEdge;
-        e.x += -e.width / 2;
-        e.y += -e.height / 2;
-        return e;
-      });
+    const edges = graph.edges().map(({ v, w, name }: { v: string; w: string; name: string }) => {
+      const e = graph.edge(v, w, name) as StateGraphEdge;
+      e.x += -e.width / 2;
+      e.y += -e.height / 2;
+      return e;
+    });
 
     // Get the bounding box of the graph
     let x = 0;

package/src/layout/getGraphParamsProvider.ts

@@ -1,10 +1,7 @@
-import type { Dimensions } from "../types/Dimensions.ts";
-import type { GraphParamsProvider } from "../types/GraphParamsProvider.ts";
-import type { Padding } from "../types/Padding.ts";
-
-import { getLabelDimensions } from "./getLabelDimensions.ts";
-import { getPadding } from "../utils/getPadding.ts";
-import { Label } from "../types/Label.ts";
+import type { GraphParamsProvider } from "../types/GraphParamsProvider.js";
+import type { Padding } from "../types/Padding.js";
+import { getPadding } from "../utils/getPadding.js";
+import { getLabelDimensions } from "./getLabelDimensions.js";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
@@ -21,8 +18,7 @@ export function getGraphParamsProvider({
   transitionsFontSize = fontSize,
   transitionsTextPadding = 0,
   getStateLabel = (state: string) => state,
-  getTransitionLabel = (fromState: string, event: string, toState: string) =>
-    event,
+  getTransitionLabel = (_fromState: string, event: string, _toState: string) => event,
 }: {
   fontSize?: number;
   stateFontSize?: number;
@@ -30,11 +26,7 @@ export function getGraphParamsProvider({
   transitionsFontSize?: number;
   transitionsTextPadding?: Padding;
   getStateLabel?: (state: string) => string;
-  getTransitionLabel?: (
-    fromState: string,
-    event: string,
-    toState: string,
-  ) => string;
+  getTransitionLabel?: (fromState: string, event: string, toState: string) => string;
 } = {}): GraphParamsProvider {
   return {
     getStateParams: (stateKey: string, state: string = stateKey) => {
@@ -53,11 +45,7 @@ export function getGraphParamsProvider({
         fontSize,
       };
     },
-    getTransitionParams: (
-      fromStateKey: string,
-      event: string,
-      toStateKey: string,
-    ) => {
+    getTransitionParams: (fromStateKey: string, event: string, toStateKey: string) => {
       const padding = getPadding(transitionsTextPadding);
       const fontSize = transitionsFontSize;
       const eventLabel = getTransitionLabel(fromStateKey, event, toStateKey);

package/src/layout/getLabelDimensions.ts

@@ -1,6 +1,6 @@
-import type { Dimensions } from "../types/Dimensions.ts";
-import type { Padding } from "../types/Padding.ts";
-import { getPadding } from "../utils/getPadding.ts";
+import type { Dimensions } from "../types/Dimensions.js";
+import type { Padding } from "../types/Padding.js";
+import { getPadding } from "../utils/getPadding.js";
 
 export function getLabelDimensions(
   label: string,
@@ -14,7 +14,7 @@ export function getLabelDimensions(
     fontSize?: number;
     getCharWidth?: (char: string) => number;
     lineGap?: number;
-  } = {}
+  } = {},
 ) {
   const lines = [label]; // label.split("\n");
   let dimensions: Dimensions = { width: 0, height: 0 };
@@ -27,7 +27,7 @@ export function getLabelDimensions(
         line,
         fontSize,
         getCharWidth,
-      })
+      }),
     );
   }
   const [top, right, bottom, left] = getPadding(padding);

package/src/layout/index.ts

@@ -1,5 +1,6 @@
 // Methods
-export * from "./buildFlatCharts.ts";
-export * from "./buildCharts.ts";
-export * from "./getGraphParamsProvider.ts";
-export * from "./getLabelDimensions.ts";
+
+export * from "./buildCharts.js";
+export * from "./buildFlatCharts.js";
+export * from "./getGraphParamsProvider.js";
+export * from "./getLabelDimensions.js";

package/src/lodash-es/index.ts

@@ -2,8 +2,8 @@ export let _: any = {
   constant: (value: any) => () => value,
 };
 export function setLodash(lib: any) {
-  _ = lib;  
+  _ = lib;
 }
-export function getLodash() { 
+export function getLodash() {
   return _;
 }

package/src/lodash-es/types.ts

@@ -1,35 +1,37 @@
-export type { constant } from "lodash-es";
-export type { clone } from "lodash-es";
-export type { cloneDeep } from "lodash-es";
-export type { defaults } from "lodash-es";
-export type { each } from "lodash-es";
-export type { forEach } from "lodash-es";
-export type { find } from "lodash-es";
-export type { filter } from "lodash-es";
-export type { flatten } from "lodash-es";
-export type { forIn } from "lodash-es";
-export type { forOwn } from "lodash-es";
-export type { has } from "lodash-es";
-export type { isArray } from "lodash-es";
-export type { isEmpty } from "lodash-es";
-export type { isFunction } from "lodash-es";
-export type { isUndefined } from "lodash-es";
-export type { keys } from "lodash-es";
-export type { last } from "lodash-es";
-export type { map } from "lodash-es";
-export type { mapValues } from "lodash-es";
-export type { max } from "lodash-es";
-export type { merge } from "lodash-es";
-export type { min } from "lodash-es";
-export type { minBy } from "lodash-es";
-export type { now } from "lodash-es";
-export type { pick } from "lodash-es";
-export type { range } from "lodash-es";
-export type { reduce } from "lodash-es";
-export type { sortBy } from "lodash-es";
-export type { size } from "lodash-es";
-export type { transform } from "lodash-es";
-export type { values } from "lodash-es";
-export type { uniqueId } from "lodash-es";
-export type { union } from "lodash-es";
-export type { zipObject } from "lodash-es";
+export type {
+  clone,
+  cloneDeep,
+  constant,
+  defaults,
+  each,
+  filter,
+  find,
+  flatten,
+  forEach,
+  forIn,
+  forOwn,
+  has,
+  isArray,
+  isEmpty,
+  isFunction,
+  isUndefined,
+  keys,
+  last,
+  map,
+  mapValues,
+  max,
+  merge,
+  min,
+  minBy,
+  now,
+  pick,
+  range,
+  reduce,
+  size,
+  sortBy,
+  transform,
+  union,
+  uniqueId,
+  values,
+  zipObject,
+} from "lodash-es";

package/src/runtime/RuntimeStatechartApi.ts

@@ -1,4 +1,4 @@
-import type { StateChart } from "../types/index.ts";
+import type { StateChart } from "../types/index.js";
 
 export type RuntimeListener = (id: string) => void;
 export class RuntimeStatechartApi {
@@ -22,7 +22,7 @@ export class RuntimeStatechartApi {
   }
 
   close() {
-    Object.values(this._registry).forEach((r) => r && r());
+    for (const r of Object.values(this._registry)) r?.();
     this._registry = {};
     this._transitionsClickListeners = {};
     this._statesClickListeners = {};
@@ -68,23 +68,18 @@ export class RuntimeStatechartApi {
       this.selectState(id);
     }
   }
- 
+
   focusStates(...stateIds: string[]) {
     for (let i = 0; i < stateIds.length; i++) {
       const stateId = stateIds[i];
       for (const tagName of ["details", "g"]) {
-        const elm = this.element.querySelector(
-          `${tagName}[data-state-id="${stateId}"]`,
-        );
+        const elm = this.element.querySelector(`${tagName}[data-state-id="${stateId}"]`);
         elm?.scrollIntoView();
       }
     }
   }
 
-  setStateDescription(
-    stateId: string,
-    description: Node | string | undefined,
-  ) {
+  setStateDescription(stateId: string, description: Node | string | undefined) {
     const descriptionContainer = this.element.querySelector(
       `details[data-state-id="${stateId}"] .state-details__description`,
     );
@@ -156,10 +151,7 @@ export class RuntimeStatechartApi {
       dataField: string,
       eventType: string,
     ) => {
-      function newEventListener(
-        index: Record<string, RuntimeListener>,
-        elm: Element,
-      ) {
+      function newEventListener(index: Record<string, RuntimeListener>, elm: Element) {
         return (ev: Event) => {
           ev.preventDefault();
           ev.stopPropagation();
@@ -177,17 +169,11 @@ export class RuntimeStatechartApi {
       [...this.element.querySelectorAll(`[${dataField}]`)].forEach((elm) => {
         const eventListener = newEventListener(index, elm);
         elm.addEventListener(eventType, eventListener);
-        this._addListener(this._registry, () =>
-          elm.removeEventListener(eventType, eventListener),
-        );
+        this._addListener(this._registry, () => elm.removeEventListener(eventType, eventListener));
       });
     };
     bindListeners(this._statesClickListeners, "data-state-id", "click");
-    bindListeners(
-      this._transitionsClickListeners,
-      "data-transition-id",
-      "click",
-    );
+    bindListeners(this._transitionsClickListeners, "data-transition-id", "click");
   }
 
   _setStatePanelStatus(selector: string, open: boolean) {
@@ -198,18 +184,10 @@ export class RuntimeStatechartApi {
   }
 
   _addStateModifier(cssSelector: string, modifier: string = "selected") {
-    this._applyStateModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => elm && elm.classList.add(cls),
-    );
+    this._applyStateModifier(cssSelector, modifier, (elm, cls) => elm?.classList.add(cls));
   }
   _removeStateModifier(cssSelector: string, modifier: string = "selected") {
-    this._applyStateModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => elm && elm.classList.remove(cls),
-    );
+    this._applyStateModifier(cssSelector, modifier, (elm, cls) => elm?.classList.remove(cls));
   }
   _applyStateModifier(
     cssSelector: string,
@@ -231,21 +209,10 @@ export class RuntimeStatechartApi {
   }
 
   _addTransitionsModifier(cssSelector: string, modifier: string = "selected") {
-    this._applyTransitionsModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => elm && elm.classList.add(cls),
-    );
+    this._applyTransitionsModifier(cssSelector, modifier, (elm, cls) => elm?.classList.add(cls));
   }
-  _removeTransitionsModifier(
-    cssSelector: string,
-    modifier: string = "selected",
-  ) {
-    this._applyTransitionsModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => elm && elm.classList.remove(cls),
-    );
+  _removeTransitionsModifier(cssSelector: string, modifier: string = "selected") {
+    this._applyTransitionsModifier(cssSelector, modifier, (elm, cls) => elm?.classList.remove(cls));
   }
   _applyTransitionsModifier(
     cssSelector: string,

package/src/runtime/StateChartIndex.ts

@@ -1,8 +1,4 @@
-import type {
-  StateChart,
-  StateGraphNode,
-  StateGraphEdge,
-} from "../types/index.ts";
+import type { StateChart, StateGraphEdge, StateGraphNode } from "../types/index.js";
 
 export class StateChartIndex {
   statechart: StateChart;
@@ -62,12 +58,7 @@ export class StateChartIndex {
    * @return a list of all nodes
    */
   getAllNodes(): StateGraphNode[] {
-    return [
-      ...new Set([
-        ...Object.values(this._chartsIndex),
-        ...Object.values(this._nodesIndex),
-      ]),
-    ];
+    return [...new Set([...Object.values(this._chartsIndex), ...Object.values(this._nodesIndex)])];
   }
 
   /**
@@ -77,8 +68,7 @@ export class StateChartIndex {
    */
   getStateNodes(): StateGraphNode[] {
     return this.getAllNodes().filter(
-      (node) =>
-        node.key !== this.initialStateKey && node.key !== this.finalStateKey,
+      (node) => node.key !== this.initialStateKey && node.key !== this.finalStateKey,
     );
   }
 
@@ -90,7 +80,7 @@ export class StateChartIndex {
    * @returns a stack of state identifiers for the given states
    */
   getStatesIds(...stack: string[]): string[] {
-    let result = [];
+    const result = [];
     let list = [this.statechart] as (StateChart | StateGraphNode)[];
     for (let i = 0; list?.length > 0 && i < stack.length; i++) {
       const key = stack[i];
@@ -133,9 +123,7 @@ export class StateChartIndex {
     const state = stack.pop();
     if (!state || !stack.length) return;
     const parent = stack[stack.length - 1];
-    const t = parent.edges.find(
-      (t: StateGraphEdge) => t.from === state.key && t.event === event,
-    );
+    const t = parent.edges.find((t: StateGraphEdge) => t.from === state.key && t.event === event);
     return t;
   }
 
@@ -177,13 +165,8 @@ export class StateChartIndex {
    * @param transition a graph edge instance defining transition
    * @returns an array with two identifiers - [sourceStateId, targetStateId] - the source state id and target state id
    */
-  getTransitionStateIds(
-    transition?: StateGraphEdge,
-  ): [string | undefined, string | undefined] {
-    const result: [string | undefined, string | undefined] = [
-      undefined,
-      undefined,
-    ];
+  getTransitionStateIds(transition?: StateGraphEdge): [string | undefined, string | undefined] {
+    const result: [string | undefined, string | undefined] = [undefined, undefined];
     if (!transition) return result;
     const parentId = this._edgesParentsIndex[transition.id];
     if (!parentId) return result;

package/src/runtime/index.ts

@@ -1,2 +1,2 @@
-export * from "./RuntimeStatechartApi.ts";
-export * from "./StateChartIndex.ts";
+export * from "./RuntimeStatechartApi.js";
+export * from "./StateChartIndex.js";

package/src/types/FsmStateConfig.ts

@@ -1,4 +1,4 @@
-import type { Transition } from "./Transition.ts";
+import type { Transition } from "./Transition.js";
 
 // export type FsmStateKey = string;
 // export type FsmEventKey = string;

package/src/types/GraphParamsProvider.ts

@@ -1,14 +1,11 @@
-import type { Dimensions } from "./Dimensions.ts";
-import { Label } from "./Label.ts";
+import type { Dimensions } from "./Dimensions.js";
+import type { Label } from "./Label.js";
 
 /**
  * Provides default functions measuring dimensions for state nodes and transition edges in the graph.
  */
 export type GraphParamsProvider = {
-  getStateParams: (
-    stateKey: string,
-    state?: string,
-  ) => Dimensions & Label & Record<string, any>;
+  getStateParams: (stateKey: string, state?: string) => Dimensions & Label & Record<string, any>;
   getTransitionParams: (
     fromStateKey: string,
     event: string,

package/src/types/Position.ts

@@ -1,4 +1,4 @@
 /**
  * X/Y position of a node in the graph.
  */
-export type Position = { x: number; y: number; };
+export type Position = { x: number; y: number };

package/src/types/StateChart.ts

@@ -1,5 +1,5 @@
-import type { StateGraphNode } from "./StateGraphNode.ts";
-import type { TransitionsGraph } from "./TransitionsGraph.ts";
+import type { StateGraphNode } from "./StateGraphNode.js";
+import type { TransitionsGraph } from "./TransitionsGraph.js";
 
 export type StateChart = TransitionsGraph &
   StateGraphNode & {

package/src/types/StateGraphEdge.ts

@@ -1,5 +1,5 @@
-import type { Dimensions } from "./Dimensions.ts";
-import type { Position } from "./Position.ts";
+import type { Dimensions } from "./Dimensions.js";
+import type { Position } from "./Position.js";
 
 /**
  * Information about a state graph edge.

package/src/types/StateGraphNode.ts

@@ -1,5 +1,5 @@
-import type { Dimensions } from "./Dimensions.ts";
-import type { Position } from "./Position.ts";
+import type { Dimensions } from "./Dimensions.js";
+import type { Position } from "./Position.js";
 
 /**
  * Information about a state node in the graph.

package/src/types/TransitionsGraph.ts

@@ -1,7 +1,7 @@
-import type { Dimensions } from "./Dimensions.ts";
-import type { Position } from "./Position.ts";
-import type { StateGraphEdge } from "./StateGraphEdge.ts";
-import type { StateGraphNode } from "./StateGraphNode.ts";
+import type { Dimensions } from "./Dimensions.js";
+import type { Position } from "./Position.js";
+import type { StateGraphEdge } from "./StateGraphEdge.js";
+import type { StateGraphNode } from "./StateGraphNode.js";
 
 /**
  * Coordinates for state nodes and endges corresponding to state transitions.

package/src/types/index.ts

@@ -1,11 +1,11 @@
-export type * from "./Dimensions.ts";
-export type * from "./FsmStateConfig.ts";
-export type * from "./GraphParamsProvider.ts";
-export type * from "./Label.ts";
-export type * from "./Padding.ts";
-export type * from "./Position.ts";
-export type * from "./StateChart.ts";
-export type * from "./StateGraphEdge.ts";
-export type * from "./StateGraphNode.ts";
-export type * from "./Transition.ts";
-export type * from "./TransitionsGraph.ts";
+export type * from "./Dimensions.js";
+export type * from "./FsmStateConfig.js";
+export type * from "./GraphParamsProvider.js";
+export type * from "./Label.js";
+export type * from "./Padding.js";
+export type * from "./Position.js";
+export type * from "./StateChart.js";
+export type * from "./StateGraphEdge.js";
+export type * from "./StateGraphNode.js";
+export type * from "./Transition.js";
+export type * from "./TransitionsGraph.js";

package/src/utils/BasisCurve.ts

@@ -2,14 +2,7 @@
 // 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;
+  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;
@@ -33,7 +26,7 @@ export class BasisCurve {
       (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 
+      (this._y0 + 4 * this._y1 + y) / 6,
     );
   }
 
@@ -52,14 +45,14 @@ export class BasisCurve {
 
   lineEnd() {
     switch (this._point) {
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports
       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();
+    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
     this._line = 1 - this._line;
   }
 
@@ -73,12 +66,10 @@ export class BasisCurve {
       case 1:
         this._point = 2;
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: deliberate fall-through, as in the d3-shape basis curve this ports
       case 2:
         this._point = 3;
-        this._context.lineTo(
-          (5 * this._x0 + this._x1) / 6,
-          (5 * this._y0 + this._y1) / 6
-        ); // falls through
+        this._context.lineTo((5 * this._x0 + this._x1) / 6, (5 * this._y0 + this._y1) / 6); // falls through
       default:
         this.$point(x, y);
         break;

package/src/utils/domToText.ts

@@ -4,11 +4,7 @@ export function domToText(elm: HTMLElement) {
     if (node.nodeType === Node.TEXT_NODE) {
       lines.push(node.textContent || "");
     } else if (node.nodeType === Node.ELEMENT_NODE) {
-      if (
-        node.nodeName === "BR" ||
-        node.nodeName === "P" ||
-        node.nodeName === "DIV"
-      ) {
+      if (node.nodeName === "BR" || node.nodeName === "P" || node.nodeName === "DIV") {
         lines.push("\n");
       }
     }
@@ -16,11 +12,11 @@ export function domToText(elm: HTMLElement) {
   return lines.join("");
 
   function visit(el: HTMLElement, visitor: (node: Node) => void) {
-    for (var i = 0; i < el.childNodes.length; i++) {
+    for (let i = 0; i < el.childNodes.length; i++) {
       const child = el.childNodes[i];
       const result = visitor(el.childNodes[i]);
       if (child.nodeType !== Node.ELEMENT_NODE) continue;
-      if (result !== undefined && !Boolean(result)) continue;
+      if (result !== undefined && !result) continue;
       visit(child as HTMLElement, visitor);
     }
   }

package/src/utils/getPadding.ts

@@ -1,4 +1,4 @@
-import type { Padding } from "../types/Padding.ts";
+import type { Padding } from "../types/Padding.js";
 
 /**
  * Expands a padding value to a 4-element array: [top, right, bottom, left].
@@ -7,7 +7,6 @@ import type { Padding } from "../types/Padding.ts";
  */
 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]];
+  if (padding.length === 2) return [padding[0], padding[1], padding[0], padding[1]];
   return padding;
 }

package/src/utils/newId.ts

@@ -1,5 +1,6 @@
 export function newId(prefix: string = "id"): string {
   const ns = newId as any;
-  const id = (ns._idCounter = (ns._idCounter || 0) + 1);
+  ns._idCounter = (ns._idCounter || 0) + 1;
+  const id = ns._idCounter;
   return `${prefix}_${id}`;
 }