@statewalker/fsm-charts 0.1.1 → 0.1.3

package/dist/chunk-4KTXTN7J.js

@@ -0,0 +1,375 @@
+import { __publicField } from './chunk-XEO3YXBM.js';
+
+// src/runtime/RuntimeStatechartApi.ts
+var RuntimeStatechartApi = class {
+  constructor({
+    element,
+    statechart
+  }) {
+    __publicField(this, "element");
+    __publicField(this, "statechart");
+    __publicField(this, "_listenersCounter", 0);
+    __publicField(this, "_transitionsClickListeners", {});
+    __publicField(this, "_statesClickListeners", {});
+    __publicField(this, "_registry", {});
+    this.element = element;
+    this.statechart = statechart;
+    this._bindListeners();
+  }
+  close() {
+    Object.values(this._registry).forEach((r) => r && r());
+    this._registry = {};
+    this._transitionsClickListeners = {};
+    this._statesClickListeners = {};
+  }
+  onStateClick(listener) {
+    return this._addListener(this._statesClickListeners, listener);
+  }
+  onTransitionClick(listener) {
+    return this._addListener(this._transitionsClickListeners, listener);
+  }
+  openStatePanels() {
+    this._setStatePanelStatus(`details[data-state-id]`, true);
+  }
+  closeStatePanels() {
+    this._setStatePanelStatus(`details[data-state-id]`, false);
+  }
+  isStatePanelOpen(stateId) {
+    const elm = this.element.querySelector(
+      `details[data-state-id="${stateId}"]`
+    );
+    return elm && !!elm.open;
+  }
+  toggleState(...stateIds) {
+    const lastId = stateIds[stateIds.length - 1];
+    const selected = this.isStateSelected(lastId);
+    this.deselectStates();
+    this.closeStatePanels();
+    this.activateStates(...stateIds);
+    if (selected) {
+      this.deselectState(lastId);
+      this.closeStatePanel(lastId);
+    }
+    return !selected;
+  }
+  activateStates(...stateIds) {
+    for (let i = 0; i < stateIds.length; i++) {
+      const id = stateIds[i];
+      this.openStatePanel(id);
+      this.selectState(id);
+    }
+  }
+  // toggleStatePanel(stateId) {
+  //   const elm = this.element.querySelector(
+  //     `details[data-state-id="${stateId}"]`
+  //   );
+  //   if (elm) {
+  //     elm.open = !elm.open;
+  //   }
+  // }
+  closeStatePanel(stateId) {
+    this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, false);
+  }
+  openStatePanel(stateId) {
+    this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, true);
+  }
+  deselectTransitions(modifier = "selected") {
+    this._removeTransitionsModifier("[data-transition-id]", modifier);
+  }
+  deselectTransition(id, modifier = "selected") {
+    this._removeTransitionsModifier(`[data-transition-id="${id}"]`, modifier);
+  }
+  selectTransition(id, modifier = "selected") {
+    this._addTransitionsModifier(`[data-transition-id="${id}"]`, modifier);
+  }
+  toggleTransition(id, modifier = "selected") {
+    const selected = this.isTransitionSelected(id, modifier);
+    this.deselectTransitions();
+    if (!selected) {
+      this.selectTransition(id, modifier);
+    }
+  }
+  isTransitionSelected(id, modifier = "selected") {
+    const elm = this.element.querySelector(`[data-transition-id="${id}"]`);
+    const stateModifier = `transition--${modifier}`;
+    return !!elm?.classList.contains(stateModifier);
+  }
+  deselectStates(modifier = "selected") {
+    this._removeStateModifier("[data-state-id]", modifier);
+  }
+  isStateSelected(id, modifier = "selected") {
+    const elm = this.element.querySelector(`[data-state-id="${id}"]`);
+    const stateModifier = `state--${modifier}`;
+    return !!elm?.classList.contains(stateModifier);
+  }
+  deselectState(id, modifier = "selected") {
+    this._removeStateModifier(`[data-state-id="${id}"]`, modifier);
+  }
+  selectState(id, modifier = "selected") {
+    this._addStateModifier(`[data-state-id="${id}"]`, modifier);
+  }
+  // Internal methods
+  _addListener(index, listener) {
+    const id = this._listenersCounter++;
+    index[id] = listener;
+    return () => {
+      delete index[id];
+    };
+  }
+  _bindListeners() {
+    const bindListeners = (index, dataField, eventType) => {
+      function newEventListener(index2, elm) {
+        return (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          let id = elm.getAttribute(dataField);
+          if (!id) {
+            id = elm.closest(`[${dataField}]`)?.getAttribute(dataField);
+          }
+          if (id) {
+            for (const listener of Object.values(index2)) {
+              listener(id);
+            }
+          }
+        };
+      }
+      [...this.element.querySelectorAll(`[${dataField}]`)].forEach((elm) => {
+        const eventListener = newEventListener(index, elm);
+        elm.addEventListener(eventType, eventListener);
+        this._addListener(
+          this._registry,
+          () => elm.removeEventListener(eventType, eventListener)
+        );
+      });
+    };
+    bindListeners(this._statesClickListeners, "data-state-id", "click");
+    bindListeners(
+      this._transitionsClickListeners,
+      "data-transition-id",
+      "click"
+    );
+  }
+  _setStatePanelStatus(selector, open) {
+    [...this.element.querySelectorAll(selector)].forEach((elm) => {
+      if (open)
+        elm.setAttribute("open", "open");
+      else
+        elm.removeAttribute("open");
+    });
+  }
+  _addStateModifier(cssSelector, modifier = "selected") {
+    this._applyStateModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.add(cls)
+    );
+  }
+  _removeStateModifier(cssSelector, modifier = "selected") {
+    this._applyStateModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.remove(cls)
+    );
+  }
+  _applyStateModifier(cssSelector, modifier = "selected", apply) {
+    const detailsModifier = `state-details--${modifier}`;
+    const stateLabelsModifier = `state-details__label--${modifier}`;
+    const stateModifier = `state--${modifier}`;
+    [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
+      if (elm.tagName.toLowerCase() === "details") {
+        apply(elm, detailsModifier);
+        const labelElm = elm.querySelector(".state-details__label");
+        if (labelElm)
+          apply(labelElm, stateLabelsModifier);
+      } else {
+        apply(elm, stateModifier);
+      }
+    });
+  }
+  _addTransitionsModifier(cssSelector, modifier = "selected") {
+    this._applyTransitionsModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.add(cls)
+    );
+  }
+  _removeTransitionsModifier(cssSelector, modifier = "selected") {
+    this._applyTransitionsModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.remove(cls)
+    );
+  }
+  _applyTransitionsModifier(cssSelector, modifier = "selected", apply) {
+    const transitionModifier = `transition--${modifier}`;
+    const transitionLineModifier = `transition__line--${modifier}`;
+    const transitionBoxModifier = `transition__box--${modifier}`;
+    const transitionLabelModifier = `transition__label--${modifier}`;
+    [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
+      apply(elm, transitionModifier);
+      apply(elm.querySelector(".transition__line"), transitionLineModifier);
+      apply(elm.querySelector(".transition__box"), transitionBoxModifier);
+      apply(elm.querySelector(".transition__label"), transitionLabelModifier);
+    });
+  }
+};
+
+// src/runtime/StateChartIndex.ts
+var StateChartIndex = class {
+  constructor({ statechart }) {
+    __publicField(this, "statechart");
+    __publicField(this, "_chartsIndex", {});
+    __publicField(this, "_nodesIndex", {});
+    __publicField(this, "_nodesParentsIndex", {});
+    __publicField(this, "_edgeIndex", {});
+    __publicField(this, "_edgesParentsIndex", {});
+    this.statechart = statechart;
+    this._buildIndexes();
+  }
+  /**
+   * Transforms a stack of state keys to the corresponding identifiers.
+   * If a key in the stack was not found then this method returns
+   * an empty stack.
+   * @param stack a stack of state keys
+   * @returns a stack of state identifiers for the given states
+   */
+  getStatesIds(...stack) {
+    let result = [];
+    let list = [this.statechart];
+    for (let i = 0; list?.length > 0 && i < stack.length; i++) {
+      const key = stack[i];
+      const node = list.find((node2) => node2.key === key);
+      if (!node)
+        break;
+      result.push(node.id);
+      list = [...node.children || [], ...node.nodes || []];
+    }
+    return result.length === stack.length ? result : [];
+  }
+  /**
+   * Returns graph nodes for the specified identifier.
+   * @param id the id of a  node
+   * @returns a stack of nodes
+   */
+  getStackByStateId(id) {
+    if (!id)
+      return [];
+    const node = this._chartsIndex[id] || this._nodesIndex[id];
+    if (!node)
+      return [];
+    const parentId = this._nodesParentsIndex[id];
+    if (parentId) {
+      const parentStack = this.getStackByStateId(parentId);
+      if (!parentStack.length)
+        return [];
+      parentStack.push(node);
+      return parentStack;
+    } else {
+      return [node];
+    }
+  }
+  /**
+   * Returns an edge object corresponding to the transition from the state
+   * @param stateId identifier of the source state
+   * @param event an event triggering the transition
+   * @returns graph edge
+   */
+  getTransition(stateId, event) {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    if (!state || !stack.length)
+      return;
+    const parent = stack[stack.length - 1];
+    const t = parent.edges.find(
+      (t2) => t2.from === state.key && t2.event === event
+    );
+    return t;
+  }
+  /**
+   * Returns a list of edge objects corresponding to all transitions from the state
+   * @param stateId identifier of the source state
+   * @returns a list of graph edges
+   */
+  getTransitions(stateId) {
+    const stack = this.getStackByStateId(stateId);
+    const state = stack.pop();
+    if (!state || !stack.length)
+      return [];
+    const parent = stack[stack.length - 1];
+    return parent.edges.filter((t) => t.from === state.key);
+  }
+  /**
+   * Returns a graph node corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateChart
+   */
+  getStateNode(stateId) {
+    return stateId ? this._nodesIndex[stateId] : void 0;
+  }
+  /**
+   * Returns a chart corresponding to the specified state id.
+   * @param stateId identifier of the state
+   * @returns graph node
+   * @see getStateNode
+   */
+  getStateChart(stateId) {
+    return stateId ? this._chartsIndex[stateId] : void 0;
+  }
+  /**
+   * Returns ids of the previous and next state for the specified transition
+   * @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) {
+    const result = [
+      void 0,
+      void 0
+    ];
+    if (!transition)
+      return result;
+    const parentId = this._edgesParentsIndex[transition.id];
+    if (!parentId)
+      return result;
+    const parent = this._chartsIndex[parentId];
+    if (!parent)
+      return result;
+    parent.nodes.forEach((node) => {
+      if (node.key === transition.from) {
+        result[0] = node.id;
+      }
+      if (node.key === transition.to) {
+        result[1] = node.id;
+      }
+    });
+    return result;
+  }
+  // ----------------------------------------------------------
+  // Internal methods
+  _buildIndexes() {
+    const addToIndex = (chart) => {
+      const chartId = chart.id;
+      this._chartsIndex[chartId] = chart;
+      if (!(chartId in this._nodesIndex)) {
+        this._nodesIndex[chartId] = chart;
+      }
+      chart.nodes.forEach((node) => {
+        const nodeId = node.id;
+        this._nodesIndex[nodeId] = node;
+        this._nodesParentsIndex[nodeId] = chartId;
+      });
+      chart.edges.forEach((edge) => {
+        const edgeId = edge.id;
+        this._edgeIndex[edgeId] = edge;
+        this._edgesParentsIndex[edgeId] = chartId;
+      });
+      (chart.children || []).forEach((child) => {
+        this._nodesParentsIndex[child.id] = chartId;
+        addToIndex(child);
+      });
+    };
+    addToIndex(this.statechart);
+  }
+};
+
+export { RuntimeStatechartApi, StateChartIndex };

package/dist/{chunk-ZSGS37QH.js → chunk-OTGN3OYG.js}

@@ -2474,8 +2474,9 @@ function buildFlatCharts({
   try {
     setLodash(lodash);
     const graph = new Graph({
-      directed: true
-    }).setGraph({ rankdir: vertical ? "tb" : "lr" }).setDefaultEdgeLabel(() => ({}));
+      directed: true,
+      multigraph: true
+    }).setGraph({ rankdir: vertical ? "tb" : "lr", multigraph: true });
     const nodesIndex = {};
     const getStateNodeId = (key, state = key) => {
       let id = nodesIndex[key];
@@ -2492,12 +2493,18 @@ function buildFlatCharts({
       const toStateKey = toState || finalStateKey;
       const to = getStateNodeId(toStateKey, toState);
       const params = getTransitionParams(fromStateKey, event, toStateKey);
-      graph.setEdge(from, to, {
-        id: newId("t"),
-        ...params
-      });
+      const edgeId = newId("t");
+      graph.setEdge(
+        from,
+        to,
+        {
+          id: edgeId,
+          ...params
+        },
+        edgeId
+      );
     }
-    layout(graph, { rankdir: vertical ? "tb" : "lr" });
+    layout(graph, { rankdir: "lr" });
     const [top, right, bottom, left] = getPadding(padding);
     const nodes = graph.nodes().map((id) => {
       const n = graph.node(id);

package/dist/index-layout.js

@@ -1,3 +1,3 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ZSGS37QH.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
 import './chunk-NXWOFQMO.js';
 import './chunk-XEO3YXBM.js';

package/dist/index-runtime.d.ts

@@ -1,6 +1,48 @@
 import { S as StateChart, c as StateGraphNode, b as StateGraphEdge } from './StateChart-PdtJDEPy.js';
 export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, T as Transition, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
 
+type RuntimeListener = (id: string) => void;
+declare class RuntimeStatechartApi {
+    element: HTMLElement;
+    statechart: StateChart;
+    _listenersCounter: number;
+    _transitionsClickListeners: Record<number, RuntimeListener>;
+    _statesClickListeners: Record<number, RuntimeListener>;
+    _registry: Record<number, () => void>;
+    constructor({ element, statechart, }: {
+        element: HTMLElement;
+        statechart: StateChart;
+    });
+    close(): void;
+    onStateClick(listener: RuntimeListener): () => void;
+    onTransitionClick(listener: RuntimeListener): () => void;
+    openStatePanels(): void;
+    closeStatePanels(): void;
+    isStatePanelOpen(stateId: string): boolean;
+    toggleState(...stateIds: string[]): boolean;
+    activateStates(...stateIds: string[]): void;
+    closeStatePanel(stateId: string): void;
+    openStatePanel(stateId: string): void;
+    deselectTransitions(modifier?: string): void;
+    deselectTransition(id: string, modifier?: string): void;
+    selectTransition(id: string, modifier?: string): void;
+    toggleTransition(id: string, modifier?: string): void;
+    isTransitionSelected(id: string, modifier?: string): boolean;
+    deselectStates(modifier?: string): void;
+    isStateSelected(id: string, modifier?: string): boolean;
+    deselectState(id: string, modifier?: string): void;
+    selectState(id: string, modifier?: string): void;
+    _addListener<T = Function>(index: Record<string, T>, listener: T): () => void;
+    _bindListeners(): void;
+    _setStatePanelStatus(selector: string, open: boolean): void;
+    _addStateModifier(cssSelector: string, modifier?: string): void;
+    _removeStateModifier(cssSelector: string, modifier?: string): void;
+    _applyStateModifier(cssSelector: string, modifier: string | undefined, apply: (elm: Element | null, className: string) => void): void;
+    _addTransitionsModifier(cssSelector: string, modifier?: string): void;
+    _removeTransitionsModifier(cssSelector: string, modifier?: string): void;
+    _applyTransitionsModifier(cssSelector: string, modifier: string | undefined, apply: (elm: Element | null, className: string) => void): void;
+}
+
 declare class StateChartIndex {
     statechart: StateChart;
     _chartsIndex: Record<string, StateChart>;
@@ -61,4 +103,4 @@ declare class StateChartIndex {
     _buildIndexes(): void;
 }
 
-export { StateChart, StateChartIndex, StateGraphEdge, StateGraphNode };
+export { type RuntimeListener, RuntimeStatechartApi, StateChart, StateChartIndex, StateGraphEdge, StateGraphNode };

package/dist/index-runtime.js

@@ -1,2 +1,2 @@
-export { StateChartIndex } from './chunk-EU64L34M.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-4KTXTN7J.js';
 import './chunk-XEO3YXBM.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { D as Dimensions, F as FsmStateConfig, G as GraphParamsProvider, P as Padding, a as Position, S as StateChart, b as StateGraphEdge, c as StateGraphNode, T as Transition, d as TransitionsGraph } from './StateChart-PdtJDEPy.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
 export { C as CssTree, b as buildStatechartCss, c as buildStatechartStyles, d as buildStatechartSvg, a as buildStatechartsPanel, s as serializeCss } from './index-html-CbDZzk2n.js';
-export { StateChartIndex } from './index-runtime.js';
+export { RuntimeListener, RuntimeStatechartApi, StateChartIndex } from './index-runtime.js';
 
 declare function toKebabCase(str: string): string;
 

package/dist/index.js

@@ -1,5 +1,5 @@
-export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-ZSGS37QH.js';
+export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-OTGN3OYG.js';
 export { buildStatechartCss, buildStatechartStyles, buildStatechartSvg, buildStatechartsPanel, serializeCss, toKebabCase } from './chunk-YYNW6Q2T.js';
 import './chunk-NXWOFQMO.js';
-export { StateChartIndex } from './chunk-EU64L34M.js';
+export { RuntimeStatechartApi, StateChartIndex } from './chunk-4KTXTN7J.js';
 import './chunk-XEO3YXBM.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statewalker/fsm-charts",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "HFSM Implementation",
   "keywords": [],
   "homepage": "https://github.com/statewalker/statewalker-fsm-charts",

package/src/layout/buildFlatCharts.ts

@@ -49,9 +49,8 @@ export function buildFlatCharts({
     setLodash(lodash);
     const graph = new Graph({
       directed: true,
-    })
-      .setGraph({ rankdir: vertical ? "tb" : "lr" })
-      .setDefaultEdgeLabel(() => ({}));
+      multigraph: true,
+    }).setGraph({ rankdir: vertical ? "tb" : "lr", multigraph: true });
 
     const nodesIndex: Record<string, string> = {};
 
@@ -71,12 +70,18 @@ export function buildFlatCharts({
       const toStateKey = toState || finalStateKey;
       const to = getStateNodeId(toStateKey, toState);
       const params = getTransitionParams(fromStateKey, event, toStateKey);
-      graph.setEdge(from, to, {
-        id: newId("t"),
-        ...params,
-      });
+      const edgeId = newId("t");
+      graph.setEdge(
+        from,
+        to,
+        {
+          id: edgeId,
+          ...params,
+        },
+        edgeId
+      );
     }
-    layout(graph, { rankdir: vertical ? "tb" : "lr" });
+    layout(graph, { rankdir: "lr" });
 
     const [top, right, bottom, left] = getPadding(padding);
 

package/src/runtime/RuntimeStatechartApi.ts

@@ -0,0 +1,250 @@
+import type { StateChart } from "../types/index.ts";
+
+export type RuntimeListener = (id: string) => void;
+export class RuntimeStatechartApi {
+  element: HTMLElement;
+  statechart: StateChart;
+  _listenersCounter: number = 0;
+  _transitionsClickListeners: Record<number, RuntimeListener> = {};
+  _statesClickListeners: Record<number, RuntimeListener> = {};
+  _registry: Record<number, () => void> = {};
+
+  constructor({
+    element,
+    statechart,
+  }: {
+    element: HTMLElement;
+    statechart: StateChart;
+  }) {
+    this.element = element;
+    this.statechart = statechart;
+    this._bindListeners();
+  }
+
+  close() {
+    Object.values(this._registry).forEach((r) => r && r());
+    this._registry = {};
+    this._transitionsClickListeners = {};
+    this._statesClickListeners = {};
+  }
+
+  onStateClick(listener: RuntimeListener) {
+    return this._addListener(this._statesClickListeners, listener);
+  }
+  onTransitionClick(listener: RuntimeListener) {
+    return this._addListener(this._transitionsClickListeners, listener);
+  }
+
+  openStatePanels() {
+    this._setStatePanelStatus(`details[data-state-id]`, true);
+  }
+  closeStatePanels() {
+    this._setStatePanelStatus(`details[data-state-id]`, false);
+  }
+  isStatePanelOpen(stateId: string) {
+    const elm = this.element.querySelector(
+      `details[data-state-id="${stateId}"]`
+    ) as HTMLDetailsElement;
+    return elm && !!elm.open;
+  }
+
+  toggleState(...stateIds: string[]) {
+    const lastId = stateIds[stateIds.length - 1];
+    const selected = this.isStateSelected(lastId);
+    this.deselectStates();
+    this.closeStatePanels();
+    this.activateStates(...stateIds);
+    if (selected) {
+      this.deselectState(lastId);
+      this.closeStatePanel(lastId);
+    }
+    return !selected;
+  }
+
+  activateStates(...stateIds: string[]) {
+    for (let i = 0; i < stateIds.length; i++) {
+      const id = stateIds[i];
+      this.openStatePanel(id);
+      this.selectState(id);
+    }
+  }
+
+  // toggleStatePanel(stateId) {
+  //   const elm = this.element.querySelector(
+  //     `details[data-state-id="${stateId}"]`
+  //   );
+  //   if (elm) {
+  //     elm.open = !elm.open;
+  //   }
+  // }
+
+  closeStatePanel(stateId: string) {
+    this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, false);
+  }
+  openStatePanel(stateId: string) {
+    this._setStatePanelStatus(`details[data-state-id="${stateId}"]`, true);
+  }
+
+  deselectTransitions(modifier = "selected") {
+    this._removeTransitionsModifier("[data-transition-id]", modifier);
+  }
+  deselectTransition(id: string, modifier: string = "selected") {
+    this._removeTransitionsModifier(`[data-transition-id="${id}"]`, modifier);
+  }
+  selectTransition(id: string, modifier: string = "selected") {
+    this._addTransitionsModifier(`[data-transition-id="${id}"]`, modifier);
+  }
+  toggleTransition(id: string, modifier: string = "selected") {
+    const selected = this.isTransitionSelected(id, modifier);
+    this.deselectTransitions();
+    if (!selected) {
+      this.selectTransition(id, modifier);
+    }
+    // if (!selected) this.deselectTransition(id, modifier);
+    // else this.selectTransition(id, modifier);
+  }
+  isTransitionSelected(id: string, modifier: string = "selected") {
+    const elm = this.element.querySelector(`[data-transition-id="${id}"]`);
+    const stateModifier = `transition--${modifier}`;
+    return !!elm?.classList.contains(stateModifier);
+  }
+
+  deselectStates(modifier: string = "selected") {
+    this._removeStateModifier("[data-state-id]", modifier);
+  }
+  isStateSelected(id: string, modifier: string = "selected") {
+    const elm = this.element.querySelector(`[data-state-id="${id}"]`);
+    const stateModifier = `state--${modifier}`;
+    return !!elm?.classList.contains(stateModifier);
+  }
+  deselectState(id: string, modifier: string = "selected") {
+    this._removeStateModifier(`[data-state-id="${id}"]`, modifier);
+  }
+  selectState(id: string, modifier: string = "selected") {
+    this._addStateModifier(`[data-state-id="${id}"]`, modifier);
+  }
+
+  // Internal methods
+
+  _addListener<T = Function>(index: Record<string, T>, listener: T) {
+    const id = this._listenersCounter++;
+    index[id] = listener;
+    return () => {
+      delete index[id];
+    };
+  }
+
+  _bindListeners() {
+    const bindListeners = (
+      index: Record<string, RuntimeListener>,
+      dataField: string,
+      eventType: string
+    ) => {
+      function newEventListener(
+        index: Record<string, RuntimeListener>,
+        elm: Element
+      ) {
+        return (ev: Event) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          let id: string | null | undefined = elm.getAttribute(dataField);
+          if (!id) {
+            id = elm.closest(`[${dataField}]`)?.getAttribute(dataField);
+          }
+          if (id) {
+            for (const listener of Object.values(index)) {
+              listener(id);
+            }
+          }
+        };
+      }
+      [...this.element.querySelectorAll(`[${dataField}]`)].forEach((elm) => {
+        const eventListener = newEventListener(index, elm);
+        elm.addEventListener(eventType, eventListener);
+        this._addListener(this._registry, () =>
+          elm.removeEventListener(eventType, eventListener)
+        );
+      });
+    };
+    bindListeners(this._statesClickListeners, "data-state-id", "click");
+    bindListeners(
+      this._transitionsClickListeners,
+      "data-transition-id",
+      "click"
+    );
+  }
+
+  _setStatePanelStatus(selector: string, open: boolean) {
+    [...this.element.querySelectorAll(selector)].forEach((elm) => {
+      if (open) elm.setAttribute("open", "open");
+      else elm.removeAttribute("open");
+    });
+  }
+
+  _addStateModifier(cssSelector: string, modifier: string = "selected") {
+    this._applyStateModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.add(cls)
+    );
+  }
+  _removeStateModifier(cssSelector: string, modifier: string = "selected") {
+    this._applyStateModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.remove(cls)
+    );
+  }
+  _applyStateModifier(
+    cssSelector: string,
+    modifier: string = "selected",
+    apply: (elm: Element | null, className: string) => void
+  ) {
+    const detailsModifier = `state-details--${modifier}`;
+    const stateLabelsModifier = `state-details__label--${modifier}`;
+    const stateModifier = `state--${modifier}`;
+    [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
+      if (elm.tagName.toLowerCase() === "details") {
+        apply(elm, detailsModifier);
+        const labelElm = elm.querySelector(".state-details__label");
+        if (labelElm) apply(labelElm, stateLabelsModifier);
+      } else {
+        apply(elm, stateModifier);
+      }
+    });
+  }
+
+  _addTransitionsModifier(cssSelector: string, modifier: string = "selected") {
+    this._applyTransitionsModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.add(cls)
+    );
+  }
+  _removeTransitionsModifier(
+    cssSelector: string,
+    modifier: string = "selected"
+  ) {
+    this._applyTransitionsModifier(
+      cssSelector,
+      modifier,
+      (elm, cls) => elm && elm.classList.remove(cls)
+    );
+  }
+  _applyTransitionsModifier(
+    cssSelector: string,
+    modifier: string = "selected",
+    apply: (elm: Element | null, className: string) => void
+  ) {
+    const transitionModifier = `transition--${modifier}`;
+    const transitionLineModifier = `transition__line--${modifier}`;
+    const transitionBoxModifier = `transition__box--${modifier}`;
+    const transitionLabelModifier = `transition__label--${modifier}`;
+    [...this.element.querySelectorAll(cssSelector)].forEach((elm) => {
+      apply(elm, transitionModifier);
+      apply(elm.querySelector(".transition__line"), transitionLineModifier);
+      apply(elm.querySelector(".transition__box"), transitionBoxModifier);
+      apply(elm.querySelector(".transition__label"), transitionLabelModifier);
+    });
+  }
+}

package/src/runtime/StateChartIndex.ts

@@ -32,8 +32,7 @@ export class StateChartIndex {
       const node = list.find((node) => node.key === key);
       if (!node) break;
       result.push(node.id);
-      list = node.children;
-      if (!list?.length) list = node.nodes;
+      list = [...(node.children || []), ...(node.nodes || [])];
     }
     return result.length === stack.length ? result : [];
   }

package/src/runtime/index.ts

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

package/dist/chunk-EU64L34M.js

@@ -1,163 +0,0 @@
-import { __publicField } from './chunk-XEO3YXBM.js';
-
-// src/runtime/StateChartIndex.ts
-var StateChartIndex = class {
-  constructor({ statechart }) {
-    __publicField(this, "statechart");
-    __publicField(this, "_chartsIndex", {});
-    __publicField(this, "_nodesIndex", {});
-    __publicField(this, "_nodesParentsIndex", {});
-    __publicField(this, "_edgeIndex", {});
-    __publicField(this, "_edgesParentsIndex", {});
-    this.statechart = statechart;
-    this._buildIndexes();
-  }
-  /**
-   * Transforms a stack of state keys to the corresponding identifiers.
-   * If a key in the stack was not found then this method returns
-   * an empty stack.
-   * @param stack a stack of state keys
-   * @returns a stack of state identifiers for the given states
-   */
-  getStatesIds(...stack) {
-    let result = [];
-    let list = [this.statechart];
-    for (let i = 0; list?.length > 0 && i < stack.length; i++) {
-      const key = stack[i];
-      const node = list.find((node2) => node2.key === key);
-      if (!node)
-        break;
-      result.push(node.id);
-      list = node.children;
-      if (!list?.length)
-        list = node.nodes;
-    }
-    return result.length === stack.length ? result : [];
-  }
-  /**
-   * Returns graph nodes for the specified identifier.
-   * @param id the id of a  node
-   * @returns a stack of nodes
-   */
-  getStackByStateId(id) {
-    if (!id)
-      return [];
-    const node = this._chartsIndex[id] || this._nodesIndex[id];
-    if (!node)
-      return [];
-    const parentId = this._nodesParentsIndex[id];
-    if (parentId) {
-      const parentStack = this.getStackByStateId(parentId);
-      if (!parentStack.length)
-        return [];
-      parentStack.push(node);
-      return parentStack;
-    } else {
-      return [node];
-    }
-  }
-  /**
-   * Returns an edge object corresponding to the transition from the state
-   * @param stateId identifier of the source state
-   * @param event an event triggering the transition
-   * @returns graph edge
-   */
-  getTransition(stateId, event) {
-    const stack = this.getStackByStateId(stateId);
-    const state = stack.pop();
-    if (!state || !stack.length)
-      return;
-    const parent = stack[stack.length - 1];
-    const t = parent.edges.find(
-      (t2) => t2.from === state.key && t2.event === event
-    );
-    return t;
-  }
-  /**
-   * Returns a list of edge objects corresponding to all transitions from the state
-   * @param stateId identifier of the source state
-   * @returns a list of graph edges
-   */
-  getTransitions(stateId) {
-    const stack = this.getStackByStateId(stateId);
-    const state = stack.pop();
-    if (!state || !stack.length)
-      return [];
-    const parent = stack[stack.length - 1];
-    return parent.edges.filter((t) => t.from === state.key);
-  }
-  /**
-   * Returns a graph node corresponding to the specified state id.
-   * @param stateId identifier of the state
-   * @returns graph node
-   * @see getStateChart
-   */
-  getStateNode(stateId) {
-    return stateId ? this._nodesIndex[stateId] : void 0;
-  }
-  /**
-   * Returns a chart corresponding to the specified state id.
-   * @param stateId identifier of the state
-   * @returns graph node
-   * @see getStateNode
-   */
-  getStateChart(stateId) {
-    return stateId ? this._chartsIndex[stateId] : void 0;
-  }
-  /**
-   * Returns ids of the previous and next state for the specified transition
-   * @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) {
-    const result = [
-      void 0,
-      void 0
-    ];
-    if (!transition)
-      return result;
-    const parentId = this._edgesParentsIndex[transition.id];
-    if (!parentId)
-      return result;
-    const parent = this._chartsIndex[parentId];
-    if (!parent)
-      return result;
-    parent.nodes.forEach((node) => {
-      if (node.key === transition.from) {
-        result[0] = node.id;
-      }
-      if (node.key === transition.to) {
-        result[1] = node.id;
-      }
-    });
-    return result;
-  }
-  // ----------------------------------------------------------
-  // Internal methods
-  _buildIndexes() {
-    const addToIndex = (chart) => {
-      const chartId = chart.id;
-      this._chartsIndex[chartId] = chart;
-      if (!(chartId in this._nodesIndex)) {
-        this._nodesIndex[chartId] = chart;
-      }
-      chart.nodes.forEach((node) => {
-        const nodeId = node.id;
-        this._nodesIndex[nodeId] = node;
-        this._nodesParentsIndex[nodeId] = chartId;
-      });
-      chart.edges.forEach((edge) => {
-        const edgeId = edge.id;
-        this._edgeIndex[edgeId] = edge;
-        this._edgesParentsIndex[edgeId] = chartId;
-      });
-      (chart.children || []).forEach((child) => {
-        this._nodesParentsIndex[child.id] = chartId;
-        addToIndex(child);
-      });
-    };
-    addToIndex(this.statechart);
-  }
-};
-
-export { StateChartIndex };