@statewalker/fsm-charts 0.1.8 → 0.1.9

package/dist/chunk-TZRPE2VD.js

@@ -0,0 +1,207 @@
+// src/dom/index.ts
+function getStateDescriptionRenderer({
+  element,
+  rootStateKey,
+  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 rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
+  const rootDescription = findSection(docSections, rootStateFilter);
+  if (!rootDescription) {
+    return () => {
+    };
+  }
+  for (const node of visitSectionNodes(rootDescription)) {
+    if (node.nodeName[0] === "#") continue;
+    node.parentElement?.removeChild(node);
+  }
+  return (statesStack) => {
+    const stateKey = [...statesStack].pop();
+    const filter = getStateDescriptionFilter(splitHeader, stateKey);
+    const description = findSection(rootDescription, filter);
+    if (!description) return;
+    const elm = renderSections({
+      section: description,
+      deep: (s) => !rootStateFilter(s),
+      header: (header) => {
+        const [key, label] = splitHeader(header);
+        if (key === stateKey) {
+          return label || key;
+        }
+        return;
+      }
+    });
+    const details = elm?.querySelector("details");
+    details && (details.open = true);
+    return elm;
+  };
+  function getStateDescriptionFilter(splitHeader2, stateKey) {
+    if (!stateKey) return () => false;
+    return (section) => {
+      if (!section.header) return false;
+      const [key] = splitHeader2(section.header);
+      return key === stateKey;
+    };
+  }
+}
+function* visitDom(elm) {
+  for (let node = elm.firstChild; node; node = node.nextSibling) {
+    if (isDomElement(node)) {
+      if (node.tagName === "DIV") {
+        yield* visitDom(node);
+      } else {
+        yield node;
+      }
+    } else {
+      yield node;
+    }
+  }
+}
+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;
+  }
+}
+function isDomElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+function newAligner(context) {
+  let level = -1;
+  return (newLevel, ...params) => {
+    while (level >= 0 && level >= newLevel) {
+      context.exit(level--, ...params);
+    }
+    while (level < newLevel) {
+      context.enter(++level, ...params);
+    }
+  };
+}
+function* toDomNodesIterator(root) {
+  yield* root instanceof Node ? visitDom(root) : root;
+}
+function buildSections(root) {
+  const nodes = toDomNodesIterator(root);
+  let top = null;
+  let peek = null;
+  const stack = [];
+  const aligner = newAligner({
+    enter(level, header) {
+      const section = {
+        header,
+        content: [],
+        children: []
+      };
+      top = top || section;
+      peek && peek.children.push(section);
+      peek = section;
+      stack.push(section);
+    },
+    exit() {
+      stack.pop();
+      peek = stack[stack.length - 1];
+    }
+  });
+  aligner(0);
+  let currentHeaderLevel = 0;
+  let currentLevel = 0;
+  for (const node of nodes) {
+    if (isDomElement(node)) {
+      if (/^H[1-6]$/i.test(node.tagName)) {
+        const headerLevel = +node.tagName.replace(/^H/, "");
+        currentLevel = headerLevel > currentHeaderLevel ? currentLevel + 1 : headerLevel < currentHeaderLevel ? currentLevel - 1 : currentLevel;
+        currentHeaderLevel = headerLevel;
+        aligner(currentLevel, 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 renderSections({
+  section,
+  deep = (s) => true,
+  header = (headerElm) => headerElm
+}) {
+  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.header);
+    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, renderSections, visitDom, visitSectionNodes, vistSections };

package/dist/index-dom.d.ts

@@ -0,0 +1,22 @@
+type DomSection = {
+    header?: HTMLElement;
+    content: Node[];
+    children: DomSection[];
+};
+declare function getStateDescriptionRenderer({ element, rootStateKey, splitHeader, }: {
+    element: HTMLElement;
+    rootStateKey: string;
+    splitHeader: (header?: HTMLElement) => [stateKey: undefined | string, label: string];
+}): (() => void) | ((statesStack: string[]) => HTMLDivElement | undefined);
+declare function visitDom(elm: Node): Iterable<Node>;
+declare function visitSectionNodes(section: DomSection): Iterable<Node>;
+declare function vistSections(root: DomSection, ignoreRoot?: boolean): Generator<DomSection>;
+declare function findSection(section: DomSection, accept: (section: DomSection) => boolean): DomSection | undefined;
+declare function buildSections(root: HTMLElement | Iterable<Node>): DomSection;
+declare function renderSections({ section, deep, header, }: {
+    section: DomSection;
+    deep?: (s: DomSection) => boolean;
+    header?: (header: HTMLElement) => undefined | string | HTMLElement;
+}): HTMLDivElement;
+
+export { type DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections };

package/dist/index-dom.js

@@ -0,0 +1 @@
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-TZRPE2VD.js';

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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-DlcWaRml.js';
+export { DomSection, buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './index-dom.js';
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './index-config.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './index-layout.js';
 export { C as CssTree, c as activeStatesStyle, d as activeTransitionsStyle, f as buildStateDetailsStyle, g as buildStateDetailsStyleWithModifier, b as buildStatechartCss, i as buildStatechartStyles, h as buildStatechartStylesWithModifier, j as buildStatechartSvg, a as buildStatechartsPanel, s as selectedStatesStyle, e as selectedTransitionsStyle, k as serializeCss } from './index-html-De8e33ol.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { buildSections, findSection, getStateDescriptionRenderer, renderSections, visitDom, visitSectionNodes, vistSections } from './chunk-TZRPE2VD.js';
 export { concatTransitionsToString, serializeProcessConfig, splitTransitionString, toFsmStateConfig } from './chunk-SLWDNGWK.js';
 export { buildCharts, buildFlatCharts, getGraphParamsProvider, getLabelDimensions } from './chunk-U5LUJ7JS.js';
 export { activeStatesStyle, activeTransitionsStyle, buildStateDetailsStyle, buildStateDetailsStyleWithModifier, buildStatechartCss, buildStatechartStyles, buildStatechartStylesWithModifier, buildStatechartSvg, buildStatechartsPanel, selectedStatesStyle, selectedTransitionsStyle, serializeCss, toKebabCase } from './chunk-2XPO6T2M.js';

package/package.json

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

package/src/dom/index.ts

@@ -0,0 +1,267 @@
+export type DomSection = {
+  header?: HTMLElement;
+  content: Node[];
+  children: DomSection[];
+};
+
+export function getStateDescriptionRenderer({
+  element,
+  rootStateKey,
+  splitHeader = (
+    header?: HTMLElement,
+  ): [stateKey: undefined | string, label: string] => {
+    if (!header) return [undefined, ""];
+    const text = header.innerText.trim();
+    let key: string | undefined;
+    let label: string = text;
+    text.replace(/^\s*\[(.*)\]\s*(.*)$/, (_, k, l) => {
+      key = k.trim();
+      label = l.trim() || key;
+      return "";
+    });
+    return [key, label];
+  },
+}: {
+  element: HTMLElement;
+  rootStateKey: string;
+  splitHeader: (
+    header?: HTMLElement,
+  ) => [stateKey: undefined | string, label: string];
+}) {
+  const docSections = buildSections(element);
+  const rootStateFilter = getStateDescriptionFilter(splitHeader, rootStateKey);
+  const rootDescription = findSection(docSections, rootStateFilter);
+
+  if (!rootDescription) {
+    return () => {};
+  }
+
+  // Remove description nodes from DOM
+  for (const node of visitSectionNodes(rootDescription)) {
+    if (node.nodeName[0] === "#") continue;
+    node.parentElement?.removeChild(node);
+  }
+  //   for (const section of vistSections(rootDescription)) {
+  //     const [key, label] = splitHeader(section.header);
+  //     console.log("??????", section.header?.innerText, key);
+  //     if (!key) continue;
+
+  //     section.header?.remove();
+  //     for (const node of section.content) {
+  //       if (node.nodeName[0] === "#") continue;
+  //       node.parentElement?.removeChild(node);
+  //     }
+  //   }
+
+  return (statesStack: string[]) => {
+    const stateKey = [...statesStack].pop();
+    const filter = getStateDescriptionFilter(splitHeader, stateKey);
+    const description = findSection(rootDescription, filter);
+    if (!description) return;
+    const elm = renderSections({
+      section: description,
+      deep: (s) => !rootStateFilter(s),
+      header: (header) => {
+        const [key, label] = splitHeader(header);
+        if (key === stateKey) {
+          return label || key;
+        }
+        return;
+      },
+    });
+    const details = elm?.querySelector("details");
+    details && (details.open = true);
+    return elm;
+  };
+
+  function getStateDescriptionFilter(
+    splitHeader: (header: HTMLElement) => [stateKey?: string, label?: string],
+    stateKey?: string,
+  ) {
+    if (!stateKey) return () => false;
+    return (section: DomSection) => {
+      if (!section.header) return false;
+      const [key] = splitHeader(section.header);
+      return key === stateKey;
+    };
+  }
+}
+
+export function* visitDom(elm: Node): Iterable<Node> {
+  for (let node = elm.firstChild; node; node = node.nextSibling) {
+    if (isDomElement(node)) {
+      if (node.tagName === "DIV") {
+        yield* visitDom(node);
+      } else {
+        yield node;
+      }
+    } else {
+      yield node;
+    }
+  }
+}
+
+export function* visitSectionNodes(section: DomSection): Iterable<Node> {
+  if (section.header) yield section.header;
+  yield* section.content;
+  for (const s of vistSections(section, true)) {
+    yield* visitSectionNodes(s);
+  }
+}
+
+export function* vistSections(
+  root: DomSection,
+  ignoreRoot: boolean = false,
+): Generator<DomSection> {
+  !ignoreRoot && (yield root);
+  for (const child of root.children) {
+    yield* vistSections(child, false);
+  }
+}
+
+export function findSection(
+  section: DomSection,
+  accept: (section: DomSection) => boolean,
+) {
+  for (const s of vistSections(section)) {
+    if (accept(s) === true) return s;
+  }
+}
+
+function isDomElement(node: Node): node is HTMLElement {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+function newAligner<T extends unknown[] = []>(context: {
+  enter: (level: number, ...params: T) => void;
+  exit: (level: number, ...params: T) => void;
+}) {
+  let level = -1;
+  return (newLevel: number, ...params: T) => {
+    while (level >= 0 && level >= newLevel) {
+      context.exit(level--, ...params);
+    }
+    while (level < newLevel) {
+      context.enter(++level, ...params);
+    }
+  };
+}
+
+function* toDomNodesIterator(root: Node | Iterable<Node>): Iterable<Node> {
+  yield* root instanceof Node ? visitDom(root) : root;
+}
+
+export function buildSections(root: HTMLElement | Iterable<Node>): DomSection {
+  const nodes = toDomNodesIterator(root);
+  let top: DomSection = null!;
+  let peek: DomSection = null!;
+  const stack: DomSection[] = [];
+  const aligner = newAligner<[HTMLElement?]>({
+    enter(level, header) {
+      const section: DomSection = {
+        header,
+        content: [],
+        children: [],
+      };
+      top = top || section;
+      peek && peek.children.push(section);
+      peek = section;
+      stack.push(section);
+    },
+    exit() {
+      stack.pop();
+      peek = stack[stack.length - 1];
+    },
+  });
+  aligner(0);
+  let currentHeaderLevel = 0;
+  let currentLevel = 0;
+  for (const node of nodes) {
+    if (isDomElement(node)) {
+      if (/^H[1-6]$/i.test(node.tagName)) {
+        const headerLevel = +node.tagName.replace(/^H/, "");
+        currentLevel =
+          headerLevel > currentHeaderLevel
+            ? currentLevel + 1
+            : headerLevel < currentHeaderLevel
+              ? currentLevel - 1
+              : currentLevel;
+        currentHeaderLevel = headerLevel;
+        aligner(currentLevel, 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;
+}
+
+export function renderSections({
+  section,
+  deep = (s) => true,
+  header = (headerElm) => headerElm,
+}: {
+  section: DomSection;
+  deep?: (s: DomSection) => boolean;
+  header?: (header: HTMLElement) => undefined | string | HTMLElement;
+}) {
+  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(id?: string) {
+    const prefix = id ? `#${id}` : "";
+    const style = document.createElement("style");
+    container.appendChild(style);
+    style.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 style;
+  }
+  function renderSection(section: DomSection) {
+    const details = document.createElement("details");
+    const summary = document.createElement("summary");
+    details.appendChild(summary);
+    const content = document.createElement("div");
+    details.appendChild(content);
+    const headerElm = header(section.header!);
+    headerElm && summary.append(headerElm);
+    for (const node of section.content) {
+      if (node.nodeName[0] === "#") continue;
+      content.append(node.cloneNode(true));
+    }
+    if (deep(section)) {
+      for (const child of section.children) {
+        content.append(renderSection(child));
+      }
+    }
+    return details;
+  }
+}

package/src/index-dom.ts

@@ -0,0 +1 @@
+export * from "./dom/index.ts";

package/src/index.ts

@@ -1,4 +1,5 @@
 export type * from "./types/index.ts";
+export * from "./dom/index.ts";
 export * from "./config/index.ts";
 export * from "./layout/index.ts";
 export * from "./html/index.ts";