ranui/dist/diagram-FQU43EPY-BvQ5jmVn.js

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

import { T as re } from "./chunk-KEIR6QF5-B2Op7cFH.js";
import { n as oe } from "./mermaid-parser.core-uIDZYuBu.js";
import { n as o } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as g, p as se } from "./src-DtRLxcYO.js";
import { H as le, K as de, U as ce, Y as me, a as ue, b as F, f as xe, v as fe, w as ge, x as R, y as he, z as w } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { _ as y, i as pe, t as be } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as ve } from "./chunk-JWPE2WC7-CGEmUMMZ.js";
var T = "position frame", $ = "frame positioned", P = "position relation", D = "relation positioned", we = /* @__PURE__ */ o(function(e) {
  g.debug("options str", e);
}, "setOptions"), ye = /* @__PURE__ */ o(function() {
  return {};
}, "getOptions"), Pe = /* @__PURE__ */ o(function() {
  C(), ue();
}, "clear");
function C() {
  S = {};
}
o(C, "reset");
var Me = xe.eventmodeling, ke = /* @__PURE__ */ o(() => pe({
  ...Me,
  ...F().eventmodeling
}), "getConfig"), S = {};
function N() {
  let e = Fe;
  const { ast: n } = S, t = B();
  if (!n) throw new Error("No data for EventModel");
  return n.frames.forEach((i, a) => {
    const r = L(i, n.dataEntities, t);
    e = v(e, {
      $kind: T,
      index: a,
      frame: i,
      textProps: r
    });
    let d;
    z(i) ? (g.debug("source frame", i.sourceFrames), d = n.frames.filter((l) => i.sourceFrames.some((c) => c.$refText === l.name)), d.forEach((l) => {
      e = v(e, {
        $kind: P,
        index: a,
        frame: i,
        sourceFrame: l
      });
    })) : e = v(e, {
      $kind: P,
      index: a,
      frame: i
    });
  }), e = {
    ...e,
    sortedSwimlanesArray: E(e.swimlanes)
  }, e;
}
o(N, "getState");
function O(e) {
  S.ast = e;
}
o(O, "setAst");
var s = {
  swimlaneMinHeight: 70,
  swimlanePadding: 15,
  swimlaneGap: 10,
  boxPadding: 10,
  boxOverlap: 90,
  boxDefaultY: 0,
  boxMinWidth: 80,
  boxMaxWidth: 450,
  boxMinHeight: 80,
  boxMaxHeight: 750,
  contentStartX: 250,
  textMaxWidth: 430,
  boxTextFontWeight: "bold",
  boxTextPadding: 10,
  swimlaneTextFontWeight: "bold",
  labelUiAutomation: "UI/Automation",
  labelUiAutomationPrefix: "UI/A: ",
  labelCommandReadModel: "Command/Read Model",
  labelCommandReadModelPrefix: "C/RM: ",
  labelEvents: "Events",
  labelEventsPrefix: "Stream: "
};
function B() {
  return s;
}
o(B, "getDiagramProps");
var Fe = {
  boxes: [],
  swimlanes: {},
  relations: [],
  maxR: 0,
  sortedSwimlanesArray: []
};
function W(e) {
  const n = e.split(".");
  if (n.length === 2) return n[0];
}
o(W, "extractNamespace");
function I(e) {
  const n = e.split(".");
  return n.length === 2 ? n[1] : e;
}
o(I, "extractName");
function H(e, n) {
  if (!(!n || n.length === 0))
    return Object.values(e).find((t) => t.namespace === n);
}
o(H, "findSwimlaneByNamespace");
function b(e, n, t) {
  return Math.max(n, ...Object.keys(e).filter((i) => {
    const a = Number.parseInt(i);
    return a > n && a < t;
  }).map((i) => Number.parseInt(i))) + 1;
}
o(b, "findNextAvailableIndex");
function U(e, n) {
  const t = W(e.entityIdentifier), i = H(n, t);
  switch (e.modelEntityType) {
    case "ui":
    case "pcr":
    case "processor":
      return i ? {
        index: i.index,
        label: i.namespace || s.labelUiAutomation
      } : t ? {
        index: b(n, 0, 100),
        label: s.labelUiAutomationPrefix + t
      } : {
        index: 0,
        label: s.labelUiAutomation
      };
    case "rmo":
    case "readmodel":
    case "cmd":
    case "command":
      return i ? {
        index: i.index,
        label: i.namespace || s.labelCommandReadModel
      } : t ? {
        index: b(n, 100, 200),
        label: s.labelCommandReadModelPrefix + t
      } : {
        index: 100,
        label: s.labelCommandReadModel
      };
    default:
      return i ? {
        index: i.index,
        label: i.namespace || s.labelEvents
      } : t ? {
        index: b(n, 200, 300),
        label: s.labelEventsPrefix + t
      } : {
        index: 200,
        label: s.labelEvents
      };
  }
}
o(U, "calculateSwimlaneProps");
function _(e) {
  const { themeVariables: n } = F();
  switch (e.modelEntityType) {
    case "ui":
      return {
        fill: n.emUiFill ?? "white",
        stroke: n.emUiStroke ?? "#dbdada"
      };
    case "pcr":
    case "processor":
      return {
        fill: n.emProcessorFill ?? "#edb3f6",
        stroke: n.emProcessorStroke ?? "#b88cbf"
      };
    case "rmo":
    case "readmodel":
      return {
        fill: n.emReadModelFill ?? "#d3f1a2",
        stroke: n.emReadModelStroke ?? "#a3b732"
      };
    case "cmd":
    case "command":
      return {
        fill: n.emCommandFill ?? "#bcd6fe",
        stroke: n.emCommandStroke ?? "#679ac3"
      };
    case "evt":
    case "event":
      return {
        fill: n.emEventFill ?? "#ffb778",
        stroke: n.emEventStroke ?? "#c19a0f"
      };
    default:
      return {
        fill: "red",
        stroke: "black"
      };
  }
}
o(_, "calculateEntityVisualProps");
function L(e, n, t) {
  const i = F(), a = w(I(e.entityIdentifier) ?? "", i);
  let r;
  const d = {
    fontSize: 16,
    fontWeight: 700,
    fontFamily: '"trebuchet ms", verdana, arial, sans-serif',
    joinWith: "<br/>"
  };
  let l = `<b>${y(a, t.textMaxWidth, d)}</b>`;
  if (e.dataInlineValue && (r = e.dataInlineValue, r = r.substring(r.indexOf("{") + 1), r = r.substring(0, r.lastIndexOf("}") - 1), r = w(r, i), r = y(r, t.textMaxWidth, d), r = r.replaceAll(" ", "&nbsp;")), e.dataReference) {
    const f = n.find((p) => p.name === e.dataReference?.$refText);
    f && (r = f.dataBlockValue, r = r.substring(r.indexOf(`{
`) + 2), r = r.substring(0, r.lastIndexOf("}") - 1), r = w(r, i), r = y(r, t.textMaxWidth, d), r = r.replaceAll(" ", "&nbsp;"), r += "<br/>");
  }
  const c = r !== void 0;
  c && (l += `<br/><br/><code style="text-align: left; display: block;max-width:${t.textMaxWidth}px">${r}</code>`);
  const u = {
    fontSize: d.fontSize,
    fontWeight: d.fontWeight,
    fontFamily: d.fontFamily
  }, m = be(l, u), x = c ? m.width / 3 : m.width, h = {
    content: l,
    width: x,
    height: m.height
  };
  return g.debug(`[${e.name}] ${e.entityIdentifier} text`, h), h;
}
o(L, "calculateTextProps");
function V(e, n) {
  const t = n, i = _(t.frame), a = {
    width: t.textProps.width + 2 * s.boxTextPadding,
    height: t.textProps.height + 2 * s.boxTextPadding
  };
  return [{
    $kind: $,
    frame: t.frame,
    index: t.index,
    visual: i,
    dimension: a,
    textProps: t.textProps
  }];
}
o(V, "decidePositionFrame");
function G(e, n, t) {
  return n === void 0 ? s.contentStartX : n.index === e.index && e.r ? e.r + s.boxPadding : t === void 0 ? s.contentStartX : t.r - s.boxOverlap + s.boxPadding;
}
o(G, "calculateX");
function X(e, n) {
  const t = [...e.map((i) => i.r), n];
  return Math.max(...t);
}
o(X, "calculateMaxRight");
function E(e) {
  return Object.values(e).sort((n, t) => n.index - t.index);
}
o(E, "sortedSwimlanesArray");
function Y(e, n) {
  const t = n, i = U(t.frame, e.swimlanes);
  let a;
  i.index in e.swimlanes ? a = e.swimlanes[i.index] : a = {
    index: i.index,
    label: i.label,
    r: 0,
    y: i.index * s.swimlaneMinHeight + s.swimlaneGap,
    height: s.swimlaneMinHeight,
    maxHeight: s.swimlaneMinHeight
  };
  const r = e.boxes.length > 0 ? e.boxes[e.boxes.length - 1] : void 0, d = e.previousSwimlaneNumber !== void 0 ? e.swimlanes[e.previousSwimlaneNumber] : void 0, l = {
    width: Math.max(s.boxMinWidth, Math.min(s.boxMaxWidth, t.dimension.width)) + 2 * s.boxPadding,
    height: Math.max(s.boxMinHeight, Math.min(s.boxMaxHeight, t.dimension.height)) + 2 * s.boxPadding
  }, c = G(a, d, r), u = c + l.width + s.boxPadding, m = X(Object.values(e.swimlanes), u);
  a.r = c + l.width, a.maxHeight = Math.max(a.maxHeight, l.height), a.height = Math.max(s.swimlaneMinHeight, a.maxHeight) + 2 * s.swimlanePadding;
  const x = {
    x: c,
    y: s.swimlanePadding + a.y,
    r: u,
    dimension: l,
    leftSibling: !1,
    swimlane: a,
    visual: t.visual,
    text: t.textProps.content,
    frame: t.frame,
    index: t.index
  }, h = {
    ...e,
    boxes: [...e.boxes, x],
    swimlanes: {
      ...e.swimlanes,
      [`${a.index}`]: a
    },
    previousSwimlaneNumber: i.index,
    previousFrame: t.frame,
    maxR: m
  }, f = E(h.swimlanes);
  f.length > 0 && (f[0].y = 0);
  for (let p = 1; p < f.length; p++) {
    const ae = f[p], A = f[p - 1];
    ae.y = A.y + A.height + s.swimlaneGap;
  }
  return h;
}
o(Y, "evolveFramePositioned");
function j(e, n) {
  return e === 0 && n.sourceFrames.length === 0;
}
o(j, "isFirstFrame");
function z(e) {
  return e.sourceFrames !== void 0 && e.sourceFrames !== null && e.sourceFrames.length > 0;
}
o(z, "hasSourceFrame");
function M(e, n) {
  if (n != null)
    return e.find((t) => t.frame.name === n.name);
}
o(M, "findBoxByFrame");
function K(e, n, t) {
  if (!(t < 0))
    for (let i = t; i >= 0; i--) {
      const a = e[i];
      if (a.swimlane.index !== n) return a;
    }
}
o(K, "findBoxByLineIndex");
function q(e, n) {
  const t = n;
  if (re(t.frame) || j(t.index, t.frame)) return [];
  const i = M(e.boxes, t.frame);
  if (i === void 0) throw new Error(`Target box not found for frame ${t.frame.name}`);
  let a;
  return t.sourceFrame ? a = M(e.boxes, t.sourceFrame) : a = K(e.boxes, i.swimlane.index, t.index - 1), a === void 0 ? [] : [{
    $kind: D,
    frame: t.frame,
    index: t.index,
    sourceBox: a,
    targetBox: i
  }];
}
o(q, "decidePositionRelation");
function J(e, n) {
  const t = n, i = {
    visual: {
      fill: "none",
      stroke: "#000"
    },
    source: {
      x: t.sourceBox.x,
      y: t.sourceBox.y
    },
    target: {
      x: t.targetBox.x,
      y: t.targetBox.y
    },
    sourceBox: t.sourceBox,
    targetBox: t.targetBox
  };
  return {
    ...e,
    relations: [...e.relations, i]
  };
}
o(J, "evolveRelationPositioned");
var Se = {
  [T]: V,
  [P]: q
}, Be = {
  [$]: Y,
  [D]: J
};
function Q(e, n) {
  const t = Se[n.$kind];
  if (t == null) return [];
  const i = t(e, n);
  return g.debug("decided events", i), i;
}
o(Q, "decide");
function Z(e, n) {
  const t = n.reduce((i, a) => {
    const r = Be[a.$kind];
    return r == null ? i : r(i, a);
  }, e);
  return g.debug("evolve events", {
    state: e,
    newState: t,
    events: n
  }), t;
}
o(Z, "evolve");
function v(e, n) {
  return Z(e, Q(e, n));
}
o(v, "dispatch");
var k = {
  getConfig: ke,
  setOptions: we,
  getOptions: ye,
  clear: Pe,
  setAccTitle: ce,
  getAccTitle: he,
  getAccDescription: fe,
  setAccDescription: le,
  setDiagramTitle: de,
  getDiagramTitle: ge,
  setAst: O,
  getDiagramProps: B,
  getState: N
}, Ee = { parse: /* @__PURE__ */ o(async (e) => {
  const n = await oe("eventmodeling", e);
  g.debug(n), k.setAst(n), ve(n, k);
}, "parse") }, Ae = R()?.eventmodeling;
function ee(e, n) {
  return (t) => {
    const i = t.swimlane.y + n.swimlanePadding, a = e.append("g").attr("class", "em-box");
    a.append("rect").attr("x", t.x).attr("y", i).attr("rx", "3").attr("width", t.dimension.width).attr("height", t.dimension.height).attr("stroke", t.visual.stroke).attr("fill", t.visual.fill), a.append("foreignObject").attr("x", t.x + n.boxPadding).attr("y", i + 10).attr("width", t.dimension.width - 2 * n.boxPadding).attr("height", t.dimension.height - 2 * n.boxPadding).append("xhtml:div").style("display", "table").style("height", "100%").style("width", "100%").append("span").style("display", "table-cell").style("text-align", "center").style("vertical-align", "middle").html(t.text);
  };
}
o(ee, "renderD3Box");
function te(e, n) {
  return e > n;
}
o(te, "dirUpwards");
function ne(e, n, t, i) {
  return (a) => {
    const r = a.sourceBox.swimlane.y + n.swimlanePadding, d = a.targetBox.swimlane.y + n.swimlanePadding, l = te(r, d), c = a.sourceBox.x + a.sourceBox.dimension.width * 2 / 3, u = a.targetBox.x + a.targetBox.dimension.width / 3;
    let m, x;
    g.debug(`rendering relation up=${l} for `, {
      sourceBox: a.sourceBox,
      targetBox: a.targetBox
    }), l ? (m = r, x = d + a.targetBox.dimension.height) : (m = r + a.sourceBox.dimension.height, x = d);
    const h = i.emRelationStroke ?? a.visual.stroke;
    e.append("path").attr("class", "em-relation").attr("fill", a.visual.fill).attr("stroke", h).attr("stroke-width", "1").attr("marker-end", `url(#${t})`).attr("d", `M${c} ${m} L${u} ${x}`);
  };
}
o(ne, "renderD3Relation");
function ie(e, n, t, i) {
  return (a) => {
    const r = e.append("g").attr("class", "em-swimlane"), d = i.emSwimlaneBackgroundOdd ?? "rgb(250,250,250)", l = i.emSwimlaneBackgroundStroke ?? "rgb(240,240,240)";
    r.append("rect").attr("x", 0).attr("y", a.y).attr("rx", "3").attr("width", n + t.swimlanePadding).attr("height", a.height).attr("fill", d).attr("stroke", l), r.append("text").attr("font-weight", t.swimlaneTextFontWeight).attr("x", 30).attr("y", a.y + 30).text(a.label);
  };
}
o(ie, "renderD3Swimlane");
var We = {
  parser: Ee,
  db: k,
  renderer: { draw: /* @__PURE__ */ o(function(e, n, t, i) {
    if (g.debug("in eventmodeling renderer", e + `
`, "id:", n, t), !Ae) throw new Error("EventModeling config not found");
    const a = i.db, { themeVariables: r, eventmodeling: d } = R(), l = se(`[id="${n}"]`), c = a.getDiagramProps(), u = a.getState(), m = `em-arrowhead-${n}`, x = r.emArrowhead ?? "#000000";
    u.sortedSwimlanesArray.forEach(ie(l, u.maxR, c, r)), u.boxes.forEach(ee(l, c)), u.relations.forEach(ne(l, c, m, r)), l.append("defs").append("marker").attr("id", m).attr("markerWidth", "10").attr("markerHeight", "7").attr("refX", "10").attr("refY", "3.5").attr("orient", "auto").append("polygon").attr("points", "0 0, 10 3.5, 0 7").attr("fill", x), me(void 0, l, d?.padding ?? 30, d?.useMaxWidth);
  }, "draw") },
  styles: /* @__PURE__ */ o((e) => "", "getStyles")
};
export {
  We as diagram
};