@statewalker/fsm-charts 0.0.2 → 0.0.3

package/package.json

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

package/src/index.ts

@@ -1,2 +1,4 @@
 export * from "./index-layout.ts";
 export * from "./index-svg.ts";
+export * from "./utils/toKebabCase.ts";
+export * from "./utils/serializeCss.ts";

package/src/layout/buildCharts.ts

@@ -41,7 +41,7 @@ export function buildCharts({
 } & GraphParamsProvider): StateChart {
   return buildChart(config);
 
-  function buildChart(config: FsmStateConfig, id: string = newId("state")) {
+  function buildChart(config: FsmStateConfig, id: string = newId("s")) {
     const graph = buildFlatCharts({
       lodash,
       transitions: config.transitions,

package/src/svg/buildStatechartCss.ts

@@ -1,120 +1,7 @@
-export function buildStatechartCss({ prefix = "" } = {}): string {
-  return `
-    --state--fill: white;
-    --state--stroke-color: silver;
-    --state--stroke-width: 1px;
-
-    --state-initial--fill: var(--state--stroke-color, silver);
-    --state-initial--stroke-color: var(--state--stroke-color, none);
-    --state-initial--stroke-width: var(--state--stroke-width, 0);
-
-    --state-final--fill: var(--state--fill, white);
-    --state-final--stroke-color: var(--state--stroke-color, silver);
-    --state-final--stroke-width: var(--state--stroke-width, 1px);
-
-    --state-label--color: gray;
-    --state-label--font-size: 14px;
-    --state-label--font-family: sans-serif;
-
-    --transition--fill: rgba(255,255,255,0.7);
-    --transition--stroke-color: none;
-    --transition--stroke-width: 1;
-
-    --transition-line--stroke-color: silver;
-    --transition-line--stroke-width: 1px;
-
-    --transition-label--color: gray;
-    --transition-label--font-size: 12px;
-    --transition-label--font-family: sans-serif;
-
-    --transition-marker--fill: var(--transition-line--stroke-color, gray);
-    
-  .state-details {
-    
-  }
-  
-  .state-details  {
-    background-color: var(--state--fill, white);
-    border: var(--state--stroke-width, 1px) solid var(--state--stroke-color, silver);
-    border-radius: 0.5em;
-    padding: 0.5em;
-  }
-
-  .state-details .state-label {
-    cursor: pointer;
-    color: var(--transition-label--color, gray);
-    font-family: var(--state-label--font-family, sans-serif);
-    font-size: var(--state-label--font-size, 14px);
-  }
-  .state-details .state-description {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-  }
-  .state-details .state-chart-container {
-    max-width: 100%;
-    overflow: auto;
-    scrollbar-width: thin;
-  }
+import { serializeCss } from "../utils/serializeCss";
+import { buildStatechartStyles } from "./buildStatechartStyles";
 
-  .state-details  .statechart {
-
-  }
-
-  .state-details  .statechart .transition-marker {
-    fill : var(--transition-marker--fill, silver);
-  }
-
-  .state-details  .statechart .transitions {
-  }
-
-  .state-details  .statechart .transitions .transition .transition-line {
-    stroke: var(--transition-line--stroke-color, silver);
-    stroke-width: var(--transition-line--stroke-width, 1px);
-  }
-
-  .state-details  .statechart .transitions .transition .transition-box {
-    fill: var(--transition--fill, rgba(255,255,255,0.7));
-    stroke: var(--transition--stroke-color, none);
-    stroke-width: var(--transition--stroke-width, 1);
-    border-radius: 0.5em;
-  }
-
-  .state-details  .statechart .transitions .transition .transition-label {
-    fill: var(--transition-label--color, gray);
-    font-size: var(--transition-label--font-size, 12px);
-    font-family: var(--transition-label--font-family, sans-serif);
-  }
-
-  /* ------------------------------------------ */
-  .state-details  .statechart .states .state {
-  }
-  .state-details  .statechart .states .state .state-box {
-    fill: var(--state--fill, white);
-    stroke: var(--state--stroke-color, silver);
-    stroke-width: var(--state--stroke-width, 1px);
-    border-radius: 0.5em;
-  }
-  .state-details  .statechart .states .state .state-initial {
-    fill: var(--state-initial--fill, gray);
-    stroke: var(--state-initial--stroke-color, none); 
-    stroke-width: var(--state-initial--stroke-width, 0);
-  }
-  .state-details  .statechart .states .state .state-final {
-    fill: var(--state-final--fill, white);
-    stroke: var(--state-final--stroke-color, silver);
-    stroke-width: var(--state-final--stroke-width, 2);
-  }
-  .state-details  .statechart .states .state .state-final.inner {
-    fill: var(--state-final--stroke-color, silver);
-    stroke: none;
-    stroke-width: 0;
-  }
-  .state-details  .statechart .states .state .state-label {
-    fill: var(--state-label--color, gray);
-    font-size: var(--state-label--font-size, 14px);
-    font-family: var(--state-label--font-family, sans-serif);
-  }
-
-  `;
+export function buildStatechartCss({ prefix = "" } = {}): string {
+  const cssObject = buildStatechartStyles({ root: prefix || ":root" });
+  return serializeCss(cssObject);
 }

package/src/svg/buildStatechartStyles.ts

@@ -0,0 +1,176 @@
+import { CssTree } from "../utils/serializeCss";
+
+function buildStateDetailsStyle() {
+  return {
+    ".state-details": {
+      backgroundColor: "var(--state-background-color, white)",
+      border:
+        "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+      borderRadius: "0.5em",
+      padding: "0.5em",
+    },
+    ".state-details__label": {
+      cursor: "pointer",
+      color: "var(--transition-label-color, currentColor)",
+      fontFamily: "var(--state-label-font-family, sans-serif)",
+      fontSize: "var(--state-label-font-size, 14px)",
+    },
+    ".state-details__description": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5em",
+    },
+    ".state-details__chart": {
+      maxWidth: "100%",
+      overflow: "auto",
+      scrollbarWidth: "thin",
+    },
+    //
+    ".state-details--selected": {
+      backgroundColor: "var(--state-selected-background-color, white)",
+      border:
+        "var(--state-selected-border-width, 1px) solid var(--state-selected-border-color, currentColor)",
+    },
+    ".state-details__label--selected": {
+      color: "var(--state-selected-label-color)",
+    },
+  };
+}
+export function buildStatechartStyles({
+  root = ":root",
+}: { root?: string } = {}): CssTree {
+  return {
+    [root]: {
+      // --------------------------------------
+      // Normal states
+      "--state-background-color": "white",
+      "--state-border-color": "silver",
+      "--state-border-width": "1px",
+      "--state-label-color": "gray",
+      "--state-label-font-size": "14px",
+      "--state-label-font-family": "sans-serif",
+
+      // Selected states
+      "--state-selected-background-color": "#eee",
+      "--state-selected-border-color": "red",
+      "--state-selected-border-width": "2px",
+      "--state-selected-label-color": "red",
+
+      // --------------------------------------
+      // Normal transitions
+      "--transition-background-color": "rgba(255,255,255,0.7)",
+      "--transition-border-color": "none",
+      "--transition-border-width": "1px",
+      "--transition-line-color": "silver",
+      "--transition-line-width": "1px",
+      "--transition-label-color": "gray",
+      "--transition-label-font-size": "12px",
+      "--transition-label-font-family": "sans-serif",
+
+      // --------------------------------------
+      // Selected transitions
+      "--transition-selected-background-color": "#eee",
+      "--transition-selected-border-color": "none",
+      "--transition-selected-border-width": "0",
+      "--transition-selected-line-color": "red",
+      "--transition-selected-line-width": "1px",
+      "--transition-selected-label-color": "red",
+
+      // --------------------------------------
+      // --------------------------------------
+      ...buildStateDetailsStyle(),
+      ".transition": {},
+      ".transition--selected": {
+        "--transition-background-color":
+          "var(--transition-selected-background-color)",
+        "--transition-border-color": "var(--transition-selected-border-color)",
+        "--transition-border-width": "var(--transition-selected-border-width)",
+        "--transition-line-color": "var(--transition-selected-line-color)",
+        "--transition-line-width": "var(--transition-selected-line-width)",
+        "--transition-label-color": "var(--transition-selected-label-color)",
+      },
+      ".transition__marker": {
+        fill: "var(--transition-line-color, currentColor)",
+        stroke: "none",
+      },
+      ".transition__line": {
+        stroke: "var(--transition-line-color, currentColor)",
+        strokeWidth: "var(--transition-line-width, 1px)",
+      },
+      ".transition__box": {
+        fill: "var(--transition-background-color, rgba(255,255,255,0.7))",
+        stroke: "var(--transition-border-color, none)",
+        strokeWidth: "var(--transition-border-width, 1px)",
+        borderRadius: "0.5em",
+      },
+      ".transition__label": {
+        fill: "var(--transition-label-color, currentColor)",
+        fontSize: "var(--transition-label-font-size, 12px)",
+        fontFamily: "var(--transition-label-font-family, sans-serif)",
+      },
+
+      // ----------------------------------------------
+      // States
+
+      ".state": {},
+      ".state--selected": {
+        "--state-background-color": "var(--state-selected-background-color)",
+        "--state-border-color": "var(--state-selected-border-color)",
+        "--state-border-width": "var(--state-selected-border-width)",
+        "--state-label-color": "var(--state-selected-label-color)",
+      },
+
+      // --------------------------
+      // Panels
+      ".state__details": {
+        backgroundColor: "var(--state-background-color, white)",
+        border:
+          "var(--state-border-width, 1px) solid var(--state-border-color, currentColor)",
+        borderRadius: "0.5em",
+        padding: "0.5em",
+      },
+      ".state__description": {
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5em",
+      },
+      ".state__chart-container": {
+        maxWidth: "100%",
+        overflow: "auto",
+        scrollbarWidth: "thin",
+      },
+
+      // --------------------------
+      // Statecharts
+      ".state__box": {
+        fill: "var(--state-background-color, white)",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 1px)",
+        borderRadius: "0.5em",
+      },
+      ".state__label": {
+        color: "var(--state-label-color, currentColor)",
+        fill: "var(--state-label-color, currentColor)",
+        fontSize: "var(--state-label-font-size, 14px)",
+        fontFamily: "var(--state-label-font-family, sans-serif)",
+        cursor: "pointer",
+      },
+      ".state__initial": {
+        fill: "var(--state-border-color, currentColor)",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 2px)",
+      },
+      ".state__final": {
+        fill: "white",
+        stroke: "var(--state-border-color, currentColor)",
+        strokeWidth: "var(--state-border-width, 2px)",
+        // ---------------------------
+        "&.state__final--inner": {
+          fill: "var(--state-border-color, currentColor)",
+          stroke: "none",
+          strokeWidth: "0",
+        },
+      },
+    },
+  };
+}

package/src/svg/buildStatechartSvg.ts

@@ -65,7 +65,7 @@ export function buildStatechartSvg({
   .transitions .transition .transition-label
    --------------------------------------------------- 
   */
-  println(`<g class="transitions">`);
+  println(`<g class="statechart__transitions">`);
 
   const markerAttrs = serializeAttrs({
     refX: 19,
@@ -73,7 +73,7 @@ export function buildStatechartSvg({
     markerWidth: 20,
     markerHeight: 14,
     orient: "auto",
-    class: "transition-marker",
+    class: "transition__marker",
     stroke: "none",
     fill: "currentColor",
   });
@@ -119,7 +119,7 @@ export function buildStatechartSvg({
     base.lineEnd();
 
     const serializedAttrs = serializeAttrs({
-      class: "transition-line",
+      class: "transition__line",
       fill: "none",
       stroke: "currentColor",
       strokeWidth: "1px",
@@ -144,12 +144,12 @@ export function buildStatechartSvg({
         fill: "rgba(255,255,255,0.7)",
         stroke: "none",
         strokeWidth: "1",
-        class: "transition-box",
+        class: "transition__box",
       });
       println(`    <rect ${rectAttrs} />`);
 
       const textAttrs = serializeAttrs({
-        class: "transition-label",
+        class: "transition__label",
         "text-anchor": "middle",
         fill: "currentColor",
         x: Math.round(x + width / 2),
@@ -179,7 +179,7 @@ export function buildStatechartSvg({
   const initialStateRadius = 6;
   const finalStateRadius = initialStateRadius / 2;
 
-  println(`<g class="states">`);
+  println(`<g class="statechart__states">`);
   for (const node of nodes) {
     const { key, id, state: text } = node;
     const { x, y, width, height } = getBoxParams({ ...node, padding: shift });
@@ -190,7 +190,7 @@ export function buildStatechartSvg({
       const cy = Math.round(y + height / 2);
       if (key === initialStateKey) {
         const serializedAttrs = serializeAttrs({
-          class: "state-initial",
+          class: "state__initial",
           cx,
           cy,
           r: initialStateRadius,
@@ -201,7 +201,7 @@ export function buildStatechartSvg({
         println(`    <circle ${serializedAttrs} />`);
       } else {
         let serializedAttrs = serializeAttrs({
-          class: "state-final",
+          class: "state__final",
           cx,
           cy,
           r: initialStateRadius,
@@ -212,7 +212,7 @@ export function buildStatechartSvg({
         println(`    <circle ${serializedAttrs} />`);
 
         serializedAttrs = serializeAttrs({
-          class: "state-final inner",
+          class: "state__final state__final--inner",
           cx,
           cy,
           r: finalStateRadius,
@@ -233,12 +233,12 @@ export function buildStatechartSvg({
         fill: "none",
         stroke: "currentColor",
         strokeWidth: "2",
-        class: "state-box",
+        class: "state__box",
       });
       println(`    <rect ${rectAttrs} />`);
 
       const textAttrs = serializeAttrs({
-        class: "state-label",
+        class: "state__label",
         "text-anchor": "middle",
         fill: "currentColor",
         x: Math.round(x + width / 2),

package/src/svg/buildStatechartsPanel.ts

@@ -17,9 +17,9 @@ export function buildStatechartsPanel({
   render(statechart, println);
 
   function render(statechart: StateChart, println: (str: string) => void) {
-    println(`<details class="state-details" data-state-id="${statechart.id}">`);
-    println(`  <summary class="state-label">${statechart.key}</summary>`);
-    println(`  <div class="state-description"><div class="state-chart-container">`);
+    println(`  <details class="state-details" data-state-id="${statechart.id}">`);
+    println(`    <summary class="state-details__label">${statechart.key}</summary>`);
+    println(`    <div class="state-details__description"><div class="state-details__chart">`);
     const printChildren = (str: string) => println(`    ${str}`);
     buildStatechartSvg({
       graph: statechart.graph,
@@ -28,11 +28,11 @@ export function buildStatechartsPanel({
       initialStateKey,
       finalStateKey,
     });
-    println(`  </div>`);
+    println(`    </div>`);
     for (const child of statechart.children || []) {
       render(child, printChildren);
     }
-    println(`  </div>`);
-    println(`</details>`);
+    println(`    </div>`);
+    println(`  </details>`);
   }
 }

package/src/svg/index.ts

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

package/src/utils/serializeCss.ts

@@ -0,0 +1,42 @@
+import { toKebabCase } from "./toKebabCase.ts";
+
+export interface CssTree extends Record<string, string | number | CssTree> {}
+
+export function serializeCss(obj: CssTree) {
+  return visitStyle(obj).join("\n");
+
+  function visitStyle(
+    obj: CssTree,
+    lines: string[] = [],
+    prefixes: string[] = [""]
+  ) {
+    for (const [key, style] of Object.entries(obj)) {
+      const selectors = [];
+      for (const sel of key.split(",").map((_) => _.trim())) {
+        for (const prefix of prefixes) {
+          const selector = sel.replace(/^(.)/, (_, ch) =>
+            ch === "&" ? prefix : prefix.length > 0 ? prefix + " " + ch : ch
+          );
+          selectors.push(selector);
+        }
+      }
+      const selectorRules = [];
+      const extensions: string[] = [];
+      for (let [key, value] of Object.entries(style)) {
+        if (typeof value === "object") {
+          visitStyle({ [key]: value }, extensions, selectors);
+        } else {
+          key = toKebabCase(key);
+          selectorRules.push(`  ${key}: ${value};`);
+        }
+      }
+      if (selectorRules.length) {
+        lines.push(`${selectors.join(",\n")} {`);
+        lines.push(...selectorRules);
+        lines.push(`}`);
+      }
+      lines.push(...extensions);
+    }
+    return lines;
+  }
+}