@statewalker/fsm-charts 0.2.5 → 0.2.7

package/dist/chunk-GW2Z65BN.js

@@ -1,429 +0,0 @@
-import { __publicField } from './chunk-PKBMQBKP.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?.());
-    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);
-    }
-  }
-  focusStates(...stateIds) {
-    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}"]`
-        );
-        elm?.scrollIntoView();
-      }
-    }
-  }
-  setStateDescription(stateId, description) {
-    const descriptionContainer = this.element.querySelector(
-      `details[data-state-id="${stateId}"] .state-details__description`
-    );
-    if (descriptionContainer) {
-      descriptionContainer.innerHTML = "";
-      descriptionContainer.append(description ?? "");
-    }
-  }
-  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?.classList.add(cls)
-    );
-  }
-  _removeStateModifier(cssSelector, modifier = "selected") {
-    this._applyStateModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => 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?.classList.add(cls)
-    );
-  }
-  _removeTransitionsModifier(cssSelector, modifier = "selected") {
-    this._applyTransitionsModifier(
-      cssSelector,
-      modifier,
-      (elm, cls) => 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,
-    initialStateKey = "<initial>",
-    finalStateKey = "<final>"
-  }) {
-    __publicField(this, "statechart");
-    __publicField(this, "_chartsIndex", {});
-    __publicField(this, "_nodesIndex", {});
-    __publicField(this, "_nodesParentsIndex", {});
-    __publicField(this, "_edgeIndex", {});
-    __publicField(this, "_edgesParentsIndex", {});
-    __publicField(this, "initialStateKey");
-    __publicField(this, "finalStateKey");
-    this.statechart = statechart;
-    this.initialStateKey = initialStateKey;
-    this.finalStateKey = finalStateKey;
-    this._buildIndexes();
-  }
-  /**
-   * Returns a state node or a chart by the specified identifier.
-   * @param id the id of a state node or a chart
-   * @returns a state node or a chart
-   */
-  getNodeById(id) {
-    return this._nodesIndex[id] || this._chartsIndex[id];
-  }
-  /**
-   * Returns a chart by the specified identifier.
-   * @param id the id of a state node or a chart
-   * @returns a state node or a chart
-   */
-  getChartById(id) {
-    return this._chartsIndex[id];
-  }
-  /**
-   * Returns an edge by the specified identifier.
-   * @param id the id of a graph edge
-   * @returns a graph edge
-   */
-  getEdgeById(id) {
-    return this._edgeIndex[id];
-  }
-  /**
-   * Returns a list of all nodes in this chart.
-   * @return a list of all nodes
-   */
-  getAllNodes() {
-    return [
-      .../* @__PURE__ */ new Set([
-        ...Object.values(this._chartsIndex),
-        ...Object.values(this._nodesIndex)
-      ])
-    ];
-  }
-  /**
-   * Returns a list of all non-empty state nodes in this chart.
-   * The result excludes nodes for initial and fina states.
-   * @return a list of all non-empty state nodes
-   */
-  getStateNodes() {
-    return this.getAllNodes().filter(
-      (node) => node.key !== this.initialStateKey && node.key !== this.finalStateKey
-    );
-  }
-  /**
-   * 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) {
-    const 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-PKBMQBKP.js

@@ -1,5 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-export { __publicField };

package/dist/chunk-RZ4FP6JB.js

@@ -1,233 +0,0 @@
-// src/dom/newTreeBuilder.ts
-function newTreeBuilder(context) {
-  let level = -1;
-  return (newLevel, ...params) => {
-    while (level >= 0 && level >= newLevel) {
-      context.exit(level--, ...params);
-    }
-    while (level < newLevel) {
-      context.enter(++level, ...params);
-    }
-  };
-}
-
-// src/dom/buildSections.ts
-function buildSections(root) {
-  const nodes = toDomNodesIterator(root);
-  let top = null;
-  let peek = null;
-  const stack = [];
-  const aligner = newTreeBuilder({
-    enter(_level, header) {
-      const section = {
-        header,
-        content: [],
-        children: []
-      };
-      top = top || section;
-      peek?.children.push(section);
-      peek = section;
-      stack.push(section);
-    },
-    exit() {
-      stack.pop();
-      peek = stack[stack.length - 1];
-    }
-  });
-  aligner(0);
-  const headerLevels = [];
-  for (const node of nodes) {
-    if (isDomElement(node)) {
-      if (/^H[1-6]$/i.test(node.tagName)) {
-        const headerLevel = +node.tagName.replace(/^H/, "");
-        while (headerLevels.length > 0 && headerLevels[headerLevels.length - 1] >= headerLevel) {
-          headerLevels.pop();
-        }
-        headerLevels.push(headerLevel);
-        aligner(headerLevels.length, node);
-      } else {
-        peek.content.push(node);
-      }
-    } else {
-      peek.content.push(node);
-    }
-  }
-  return top.content.length === 0 && top.children.length === 1 && !top.header ? top.children[0] : top;
-}
-function* visitSectionNodes(section) {
-  if (section.header) yield section.header;
-  yield* section.content;
-  for (const s of vistSections(section, true)) {
-    yield* visitSectionNodes(s);
-  }
-}
-function* vistSections(root, ignoreRoot = false) {
-  !ignoreRoot && (yield root);
-  for (const child of root.children) {
-    yield* vistSections(child, false);
-  }
-}
-function findSection(section, accept) {
-  for (const s of vistSections(section)) {
-    if (accept(s) === true) return s;
-  }
-  return void 0;
-}
-function isDomElement(node) {
-  return node.nodeType === Node.ELEMENT_NODE;
-}
-function* toDomNodesIterator(root) {
-  yield* root instanceof Node ? visitDom(root) : root;
-}
-function* visitDom(elm) {
-  if (isDomElement(elm) && elm.tagName === "TEMPLATE") {
-    elm = elm.content;
-  }
-  for (let node = elm.firstChild; node; node = node.nextSibling) {
-    if (isDomElement(node)) {
-      if (node.tagName === "DIV" || node.tagName === "TEMPLATE") {
-        yield* visitDom(node);
-      } else {
-        yield node;
-      }
-    } else {
-      yield node;
-    }
-  }
-}
-
-// src/dom/getStatesDescriptions.ts
-function* visitStateDescriptions({
-  element,
-  rootStateKey,
-  removeFromDom = true,
-  splitHeader = (header) => {
-    if (!header) return [void 0, ""];
-    const text = header.innerText.trim();
-    let key;
-    let label = text;
-    text.replace(/^\s*\[(.*)\]\s*(.*)$/, (_, k, l) => {
-      key = k.trim();
-      label = l.trim() || key;
-      return "";
-    });
-    return [key, label];
-  }
-}) {
-  const docSections = buildSections(element);
-  const rootDescription = findSection(docSections, (section) => {
-    if (!section.header) return false;
-    const [key] = splitHeader(section.header);
-    return key === rootStateKey;
-  });
-  if (!rootDescription) return;
-  if (removeFromDom) {
-    for (const node of visitSectionNodes(rootDescription)) {
-      if (node.nodeName[0] === "#") continue;
-      node.parentElement?.removeChild(node);
-    }
-  }
-  for (const section of vistSections(rootDescription, false)) {
-    if (!section.header) continue;
-    const [state, title] = splitHeader(section.header);
-    if (state)
-      yield {
-        state,
-        title,
-        ...section
-      };
-  }
-}
-function getStatesDescriptions(options) {
-  const index = {};
-  for (const description of visitStateDescriptions(options)) {
-    index[description.state] = description;
-  }
-  return index;
-}
-
-// src/dom/description-panels.ts
-function getStateDescriptionRenderer(options) {
-  const descriptionsIndex = getStatesDescriptions(options);
-  return (statesStack) => {
-    const stateKey = [...statesStack].pop();
-    if (!stateKey) return;
-    const section = descriptionsIndex[stateKey];
-    if (!section) return;
-    const elm = renderSections({
-      section,
-      deep: (_section) => false,
-      // section.state !== options.rootStateKey, // ???
-      header: (section2) => {
-        if (section2.state === stateKey) {
-          return section2.title || section2.state;
-        }
-        return;
-      }
-    });
-    const details = elm?.querySelector("details");
-    details && (details.open = true);
-    return elm;
-  };
-}
-function renderSections({
-  section,
-  deep = (_s) => true,
-  header = (section2) => section2.header?.cloneNode(true)
-}) {
-  const container = document.createElement("div");
-  const id = `id-${String(Math.random()).split(".")[1]}-${Date.now()}`;
-  container.setAttribute("id", id);
-  if (!section) return container;
-  const sectionView = renderSection(section);
-  container.append(sectionView);
-  const style = renderSectionStyles(id);
-  container.append(style);
-  return container;
-  function renderSectionStyles(id2) {
-    const prefix = id2 ? `#${id2}` : "";
-    const style2 = document.createElement("style");
-    container.appendChild(style2);
-    style2.innerHTML = `
-      ${prefix} details {
-          border: 1px solid #aaa;
-          border-radius: 4px;
-          padding: 0.5em 0.5em 0;
-          margin-bottom: 0.5em;
-        }
-        
-      ${prefix} details > summary {
-          font-weight: bold;
-          margin: -0.5em -0.5em 0;
-          padding: 0.5em;
-          cursor: pointer;
-        }
-        
-      ${prefix} details[open] {
-          padding: 0.5em;
-        }
-      `;
-    return style2;
-  }
-  function renderSection(section2) {
-    const details = document.createElement("details");
-    const summary = document.createElement("summary");
-    details.appendChild(summary);
-    const content = document.createElement("div");
-    details.appendChild(content);
-    const headerElm = header(section2);
-    headerElm && summary.append(headerElm);
-    for (const node of section2.content) {
-      if (node.nodeName[0] === "#") continue;
-      content.append(node.cloneNode(true));
-    }
-    if (deep(section2)) {
-      for (const child of section2.children) {
-        content.append(renderSection(child));
-      }
-    }
-    return details;
-  }
-}
-
-export { buildSections, findSection, getStateDescriptionRenderer, getStatesDescriptions, isDomElement, newTreeBuilder, renderSections, toDomNodesIterator, visitDom, visitSectionNodes, visitStateDescriptions, vistSections };