ranui/dist/stateDiagram-2N3HPSRC-DxH4BMSh.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { n as m } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as B, p as M } from "./src-DtRLxcYO.js";
import { O as _, c as G, s as T, x as t } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { et as P, g as R } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as W } from "./line-BIPmUVxO.js";
import "./chunk-HOUHSVGY-DRQcQeMT.js";
import "./chunk-Q4XR5HBZ-3BHjjc9u.js";
import "./chunk-7BUUIJ7U-9hiBbc7O.js";
import "./chunk-OGEWGWER-BV51ll2w.js";
import { t as U } from "./graphlib-CCKThIKP.js";
import { t as C } from "./dagre-D8GLTwuf.js";
import "./chunk-32BRIVSS-jAuAwMVV.js";
import "./chunk-XXDRQBXY-BB1i_53q.js";
import "./chunk-VR4S4FIN-CJi5okl4.js";
import "./chunk-C7G6YPKG-CA-DNpvI.js";
import "./chunk-ZGVPDNZ5-6uMbTJXy.js";
import "./chunk-52WLFC77-wpL7en7e.js";
import "./chunk-FWX5IMBZ-DZ5VYvm5.js";
import { i as F, n as O, t as v } from "./chunk-EX3LRPZG-BCmf0iDq.js";
var J = /* @__PURE__ */ m((e) => e.append("circle").attr("class", "start-state").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit).attr("cy", t().state.padding + t().state.sizeUnit), "drawStartState"), X = /* @__PURE__ */ m((e) => e.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", t().state.textHeight).attr("class", "divider").attr("x2", t().state.textHeight * 2).attr("y1", 0).attr("y2", 0), "drawDivider"), Y = /* @__PURE__ */ m((e, i) => {
  const d = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 2 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), o = d.node().getBBox();
  return e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", o.width + 2 * t().state.padding).attr("height", o.height + 2 * t().state.padding).attr("rx", t().state.radius), d;
}, "drawSimpleState"), I = /* @__PURE__ */ m((e, i) => {
  const d = /* @__PURE__ */ m(function(p, u, S) {
    const b = p.append("tspan").attr("x", 2 * t().state.padding).text(u);
    S || b.attr("dy", t().state.textHeight);
  }, "addTspan"), o = e.append("text").attr("x", 2 * t().state.padding).attr("y", t().state.textHeight + 1.3 * t().state.padding).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.descriptions[0]).node().getBBox(), n = o.height, x = e.append("text").attr("x", t().state.padding).attr("y", n + t().state.padding * 0.4 + t().state.dividerMargin + t().state.textHeight).attr("class", "state-description");
  let h = !0, a = !0;
  i.descriptions.forEach(function(p) {
    h || (d(x, p, a), a = !1), h = !1;
  });
  const s = e.append("line").attr("x1", t().state.padding).attr("y1", t().state.padding + n + t().state.dividerMargin / 2).attr("y2", t().state.padding + n + t().state.dividerMargin / 2).attr("class", "descr-divider"), l = x.node().getBBox(), g = Math.max(l.width, o.width);
  return s.attr("x2", g + 3 * t().state.padding), e.insert("rect", ":first-child").attr("x", t().state.padding).attr("y", t().state.padding).attr("width", g + 2 * t().state.padding).attr("height", l.height + n + 2 * t().state.padding).attr("rx", t().state.radius), e;
}, "drawDescrState"), $ = /* @__PURE__ */ m((e, i, d) => {
  const o = t().state.padding, n = 2 * t().state.padding, x = e.node().getBBox(), h = x.width, a = x.x, s = e.append("text").attr("x", 0).attr("y", t().state.titleShift).attr("font-size", t().state.fontSize).attr("class", "state-title").text(i.id), l = s.node().getBBox().width + n;
  let g = Math.max(l, h);
  g === h && (g = g + n);
  let p;
  const u = e.node().getBBox();
  i.doc, p = a - o, l > h && (p = (h - g) / 2 + o), Math.abs(a - u.x) < o && l > h && (p = a - (l - h) / 2);
  const S = 1 - t().state.textHeight;
  return e.insert("rect", ":first-child").attr("x", p).attr("y", S).attr("class", d ? "alt-composit" : "composit").attr("width", g).attr("height", u.height + t().state.textHeight + t().state.titleShift + 1).attr("rx", "0"), s.attr("x", p + o), l <= h && s.attr("x", a + (g - n) / 2 - l / 2 + o), e.insert("rect", ":first-child").attr("x", p).attr("y", t().state.titleShift - t().state.textHeight - t().state.padding).attr("width", g).attr("height", t().state.textHeight * 3).attr("rx", t().state.radius), e.insert("rect", ":first-child").attr("x", p).attr("y", t().state.titleShift - t().state.textHeight - t().state.padding).attr("width", g).attr("height", u.height + 3 + 2 * t().state.textHeight).attr("rx", t().state.radius), e;
}, "addTitleAndBox"), D = /* @__PURE__ */ m((e) => (e.append("circle").attr("class", "end-state-outer").attr("r", t().state.sizeUnit + t().state.miniPadding).attr("cx", t().state.padding + t().state.sizeUnit + t().state.miniPadding).attr("cy", t().state.padding + t().state.sizeUnit + t().state.miniPadding), e.append("circle").attr("class", "end-state-inner").attr("r", t().state.sizeUnit).attr("cx", t().state.padding + t().state.sizeUnit + 2).attr("cy", t().state.padding + t().state.sizeUnit + 2)), "drawEndState"), q = /* @__PURE__ */ m((e, i) => {
  let d = t().state.forkWidth, o = t().state.forkHeight;
  if (i.parentId) {
    let n = d;
    d = o, o = n;
  }
  return e.append("rect").style("stroke", "black").style("fill", "black").attr("width", d).attr("height", o).attr("x", t().state.padding).attr("y", t().state.padding);
}, "drawForkJoinState"), Z = /* @__PURE__ */ m((e, i, d, o) => {
  let n = 0;
  const x = o.append("text");
  x.style("text-anchor", "start"), x.attr("class", "noteText");
  let h = e.replace(/\r\n/g, "<br/>");
  h = h.replace(/\n/g, "<br/>");
  const a = h.split(T.lineBreakRegex);
  let s = 1.25 * t().state.noteMargin;
  for (const l of a) {
    const g = l.trim();
    if (g.length > 0) {
      const p = x.append("tspan");
      if (p.text(g), s === 0) {
        const u = p.node().getBBox();
        s += u.height;
      }
      n += s, p.attr("x", i + t().state.noteMargin), p.attr("y", d + n + 1.25 * t().state.noteMargin);
    }
  }
  return {
    textWidth: x.node().getBBox().width,
    textHeight: n
  };
}, "_drawLongText"), j = /* @__PURE__ */ m((e, i) => {
  i.attr("class", "state-note");
  const d = i.append("rect").attr("x", 0).attr("y", t().state.padding), { textWidth: o, textHeight: n } = Z(e, 0, 0, i.append("g"));
  return d.attr("height", n + 2 * t().state.noteMargin), d.attr("width", o + t().state.noteMargin * 2), d;
}, "drawNote"), z = /* @__PURE__ */ m(function(e, i) {
  const d = i.id, o = {
    id: d,
    label: i.id,
    width: 0,
    height: 0
  }, n = e.append("g").attr("id", d).attr("class", "stateGroup");
  i.type === "start" && J(n), i.type === "end" && D(n), (i.type === "fork" || i.type === "join") && q(n, i), i.type === "note" && j(i.note.text, n), i.type === "divider" && X(n), i.type === "default" && i.descriptions.length === 0 && Y(n, i), i.type === "default" && i.descriptions.length > 0 && I(n, i);
  const x = n.node().getBBox();
  return o.width = x.width + 2 * t().state.padding, o.height = x.height + 2 * t().state.padding, o;
}, "drawState"), L = 0, K = /* @__PURE__ */ m(function(e, i, d) {
  const o = /* @__PURE__ */ m(function(s) {
    switch (s) {
      case v.relationType.AGGREGATION:
        return "aggregation";
      case v.relationType.EXTENSION:
        return "extension";
      case v.relationType.COMPOSITION:
        return "composition";
      case v.relationType.DEPENDENCY:
        return "dependency";
    }
  }, "getRelationType");
  i.points = i.points.filter((s) => !Number.isNaN(s.y));
  const n = i.points, x = W().x(function(s) {
    return s.x;
  }).y(function(s) {
    return s.y;
  }).curve(P), h = e.append("path").attr("d", x(n)).attr("id", "edge" + L).attr("class", "transition");
  let a = "";
  if (t().state.arrowMarkerAbsolute && (a = _(!0)), h.attr("marker-end", "url(" + a + "#" + o(v.relationType.DEPENDENCY) + "End)"), d.title !== void 0) {
    const s = e.append("g").attr("class", "stateLabel"), { x: l, y: g } = R.calcLabelPosition(i.points), p = T.getRows(d.title);
    let u = 0;
    const S = [];
    let b = 0, N = 0;
    for (let f = 0; f <= p.length; f++) {
      const c = s.append("text").attr("text-anchor", "middle").text(p[f]).attr("x", l).attr("y", g + u), y = c.node().getBBox();
      b = Math.max(b, y.width), N = Math.min(N, y.x), B.info(y.x, l, g + u), u === 0 && (u = c.node().getBBox().height, B.info("Title height", u, g)), S.push(c);
    }
    let E = u * p.length;
    if (p.length > 1) {
      const f = (p.length - 1) * u * 0.5;
      S.forEach((c, y) => c.attr("y", g + y * u - f)), E = u * p.length;
    }
    const r = s.node().getBBox();
    s.insert("rect", ":first-child").attr("class", "box").attr("x", l - b / 2 - t().state.padding / 2).attr("y", g - E / 2 - t().state.padding / 2 - 3.5).attr("width", b + t().state.padding).attr("height", E + t().state.padding), B.info(r);
  }
  L++;
}, "drawEdge"), w, H = {}, Q = /* @__PURE__ */ m(function() {
}, "setConf"), V = /* @__PURE__ */ m(function(e) {
  e.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
}, "insertMarkers"), tt = /* @__PURE__ */ m(function(e, i, d, o) {
  w = t().state;
  const n = t().securityLevel;
  let x;
  n === "sandbox" && (x = M("#i" + i));
  const h = n === "sandbox" ? M(x.nodes()[0].contentDocument.body) : M("body"), a = n === "sandbox" ? x.nodes()[0].contentDocument : document;
  B.debug("Rendering diagram " + e);
  const s = h.select(`[id='${i}']`);
  V(s), A(o.db.getRootDoc(), s.append("g").attr("id", i + "-root"), void 0, !1, h, a, o);
  const l = w.padding, g = s.node().getBBox(), p = g.width + l * 2, u = g.height + l * 2;
  G(s, u, p * 1.75, w.useMaxWidth), s.attr("viewBox", `${g.x - w.padding}  ${g.y - w.padding} ` + p + " " + u);
}, "draw"), et = /* @__PURE__ */ m((e) => e ? e.length * w.fontSizeFactor : 1, "getLabelWidth"), A = /* @__PURE__ */ m((e, i, d, o, n, x, h) => {
  const a = new U({
    compound: !0,
    multigraph: !0
  });
  let s, l = !0;
  for (s = 0; s < e.length; s++) if (e[s].stmt === "relation") {
    l = !1;
    break;
  }
  d ? a.setGraph({
    rankdir: "LR",
    multigraph: !0,
    compound: !0,
    ranker: "tight-tree",
    ranksep: l ? 1 : w.edgeLengthFactor,
    nodeSep: l ? 1 : 50,
    isMultiGraph: !0
  }) : a.setGraph({
    rankdir: "TB",
    multigraph: !0,
    compound: !0,
    ranksep: l ? 1 : w.edgeLengthFactor,
    nodeSep: l ? 1 : 50,
    ranker: "tight-tree",
    isMultiGraph: !0
  }), a.setDefaultEdgeLabel(function() {
    return {};
  });
  const g = h.db.getStates(), p = h.db.getRelations(), u = Object.keys(g);
  for (const r of u) {
    const f = g[r];
    d && (f.parentId = d);
    let c;
    if (f.doc) {
      let y = i.append("g").attr("id", f.id).attr("class", "stateGroup");
      c = A(f.doc, y, f.id, !o, n, x, h);
      {
        y = $(y, f, o);
        let k = y.node().getBBox();
        c.width = k.width, c.height = k.height + w.padding / 2, H[f.id] = { y: w.compositTitleSize };
      }
    } else c = z(i, f, a);
    if (f.note) {
      const y = z(i, {
        descriptions: [],
        id: f.id + "-note",
        note: f.note,
        type: "note"
      }, a);
      f.note.position === "left of" ? (a.setNode(c.id + "-note", y), a.setNode(c.id, c)) : (a.setNode(c.id, c), a.setNode(c.id + "-note", y)), a.setParent(c.id, c.id + "-group"), a.setParent(c.id + "-note", c.id + "-group");
    } else a.setNode(c.id, c);
  }
  B.debug("Count=", a.nodeCount(), a);
  let S = 0;
  p.forEach(function(r) {
    S++, B.debug("Setting edge", r), a.setEdge(r.id1, r.id2, {
      relation: r,
      width: et(r.title),
      height: w.labelHeight * T.getRows(r.title).length,
      labelpos: "c"
    }, "id" + S);
  }), C(a), B.debug("Graph after layout", a.nodes());
  const b = i.node();
  a.nodes().forEach(function(r) {
    r !== void 0 && a.node(r) !== void 0 ? (B.warn("Node " + r + ": " + JSON.stringify(a.node(r))), n.select("#" + b.id + " #" + r).attr("transform", "translate(" + (a.node(r).x - a.node(r).width / 2) + "," + (a.node(r).y + (H[r] ? H[r].y : 0) - a.node(r).height / 2) + " )"), n.select("#" + b.id + " #" + r).attr("data-x-shift", a.node(r).x - a.node(r).width / 2), x.querySelectorAll("#" + b.id + " #" + r + " .divider").forEach((f) => {
      const c = f.parentElement;
      let y = 0, k = 0;
      c && (c.parentElement && (y = c.parentElement.getBBox().width), k = parseInt(c.getAttribute("data-x-shift"), 10), Number.isNaN(k) && (k = 0)), f.setAttribute("x1", 0 - k + 8), f.setAttribute("x2", y - k - 8);
    })) : B.debug("No Node " + r + ": " + JSON.stringify(a.node(r)));
  });
  let N = b.getBBox();
  a.edges().forEach(function(r) {
    r !== void 0 && a.edge(r) !== void 0 && (B.debug("Edge " + r.v + " -> " + r.w + ": " + JSON.stringify(a.edge(r))), K(i, a.edge(r), a.edge(r).relation));
  }), N = b.getBBox();
  const E = {
    id: d || "root",
    label: d || "root",
    width: 0,
    height: 0
  };
  return E.width = N.width + 2 * w.padding, E.height = N.height + 2 * w.padding, B.debug("Doc rendered", E, a), E;
}, "renderDoc"), Bt = {
  parser: O,
  get db() {
    return new v(1);
  },
  renderer: {
    setConf: Q,
    draw: tt
  },
  styles: F,
  init: /* @__PURE__ */ m((e) => {
    e.state || (e.state = {}), e.state.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
  }, "init")
};
export {
  Bt as diagram
};