ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
342 lines (341 loc) • 12.6 kB
JavaScript
import { n as w } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as c } from "./src-DtRLxcYO.js";
import { x as k } from "./chunk-WYO6CB5R-DDHkKowO.js";
import "./chunk-ICXQ74PX-DR8rL-xF.js";
import "./chunk-HOUHSVGY-DRQcQeMT.js";
import "./chunk-Q4XR5HBZ-3BHjjc9u.js";
import "./chunk-7BUUIJ7U-9hiBbc7O.js";
import { n as B } from "./chunk-OGEWGWER-BV51ll2w.js";
import { t as O } from "./graphlib-CCKThIKP.js";
import { t as J } from "./dagre-D8GLTwuf.js";
import { a as T, i as I, n as A, o as L, r as S, t as v } from "./chunk-RYQCIY6F-BER2T9t0.js";
import "./chunk-C7G6YPKG-CA-DNpvI.js";
import { a as D, c as M, i as H, l as Y, n as _, t as W, u as $ } from "./chunk-ZGVPDNZ5-6uMbTJXy.js";
import { a as j, i as P, o as F, r as q, t as z } from "./chunk-52WLFC77-wpL7en7e.js";
var R = /* @__PURE__ */ w((o, t, g) => Math.max(t, Math.min(g, o)), "clamp"), C = /* @__PURE__ */ w((o = "TB") => {
switch (o) {
case "BT":
return "bottom";
case "LR":
return "right";
case "RL":
return "left";
default:
return "top";
}
}, "getDefaultSelfLoopSide"), K = /* @__PURE__ */ w((o) => o === "flowchart" || o === "flowchart-v2" || o === "stateDiagram", "shouldMergeSelfLoopSegments"), Q = /* @__PURE__ */ w((o, t, g, m, l) => {
const i = [], r = /* @__PURE__ */ new Set();
if (g.forEach(({ start: s, end: n }) => {
s !== m && r.add(s), n !== m && r.add(n);
}), r.forEach((s) => {
const n = o.node(s);
typeof n?.x == "number" && typeof n?.y == "number" && i.push(n);
}), i.length === 0 && g.forEach(({ edge: s }) => {
(s.points ?? []).forEach((n) => {
typeof n?.x == "number" && typeof n?.y == "number" && i.push(n);
});
}), i.length === 0) return C(l);
const f = i.reduce((s, n) => ({
x: s.x + n.x / i.length,
y: s.y + n.y / i.length
}), {
x: 0,
y: 0
}), h = f.x - t.x, a = f.y - t.y;
return Math.abs(h) > Math.abs(a) ? h > 0 ? "right" : "left" : Math.abs(a) > 0 ? a > 0 ? "bottom" : "top" : C(l);
}, "getSelfLoopSide"), U = /* @__PURE__ */ w((o, t = "top", g = 0, m = 0) => {
const l = o.x, i = o.y - g, r = o.width / 2, f = o.height / 2, h = Math.max(36, Math.min(100, o.width * 0.8)), a = R(Math.max(m, o.width * 0.35), 36, h), s = R(Math.min(o.width, o.height) * 0.45, 24, 48);
switch (t) {
case "bottom": {
const n = i + f;
return [
{
x: l - a / 2,
y: n
},
{
x: l - a / 2,
y: n + s
},
{
x: l + a / 2,
y: n + s
},
{
x: l + a / 2,
y: n
}
];
}
case "right": {
const n = l + r;
return [
{
x: n,
y: i - a / 2
},
{
x: n + s,
y: i - a / 2
},
{
x: n + s,
y: i + a / 2
},
{
x: n,
y: i + a / 2
}
];
}
case "left": {
const n = l - r;
return [
{
x: n,
y: i - a / 2
},
{
x: n - s,
y: i - a / 2
},
{
x: n - s,
y: i + a / 2
},
{
x: n,
y: i + a / 2
}
];
}
default: {
const n = i - f;
return [
{
x: l - a / 2,
y: n
},
{
x: l - a / 2,
y: n - s
},
{
x: l + a / 2,
y: n - s
},
{
x: l + a / 2,
y: n
}
];
}
}
}, "getSelfLoopPoints"), V = /* @__PURE__ */ w((o, t, g = "top", m = 0, l = {}) => {
const r = o.x, f = o.y - m, h = l.width ?? 0, a = l.height ?? 0;
switch (g) {
case "bottom":
return {
x: r,
y: Math.max(...t.map((s) => s.y)) + a / 2 + 4
};
case "right":
return {
x: Math.max(...t.map((s) => s.x)) + h / 2 + 4,
y: f
};
case "left":
return {
x: Math.min(...t.map((s) => s.x)) - h / 2 - 4,
y: f
};
default:
return {
x: r,
y: Math.min(...t.map((s) => s.y)) - a / 2 - 4
};
}
}, "getSelfLoopLabelPosition"), Z = /* @__PURE__ */ w((o, t = 0, { mergeSelfLoops: g = !0 } = {}) => {
const m = /* @__PURE__ */ new Map(), l = [], i = o.graph()?.rankdir;
return o.edges().forEach((r) => {
const f = o.edge(r);
if (g && f.selfLoop) {
const h = f.selfLoop.id;
m.has(h) || m.set(h, []), m.get(h).push({
edge: f,
start: r.v,
end: r.w
});
} else l.push({
edge: f,
start: r.v,
end: r.w
});
}), m.forEach((r) => {
if (r.length !== 3) {
r.forEach((e) => l.push(e));
return;
}
r.sort((e, u) => e.edge.selfLoop.order - u.edge.selfLoop.order);
const [f, h, a] = r, s = f.edge.originalEdge ?? h.edge.originalEdge ?? a.edge.originalEdge ?? h.edge, n = o.node(s.start);
if (!n) {
r.forEach((e) => l.push(e));
return;
}
const p = {
width: h.edge.width,
height: h.edge.height
}, y = Q(o, n, r, s.start, i), x = U(n, y, t, p.width ?? 0), X = V(n, x, y, t, p), d = {
...h.edge,
...s,
id: s.id,
points: x,
start: s.start,
end: s.end,
x: X.x,
y: X.y,
width: p.width,
height: p.height,
labelStyle: h.edge.labelStyle,
fromCluster: f.edge.fromCluster ?? h.edge.fromCluster ?? a.edge.fromCluster,
toCluster: f.edge.toCluster ?? h.edge.toCluster ?? a.edge.toCluster
};
delete d.selfLoop, delete d.originalEdge, l.push({
edge: d,
start: d.start,
end: d.end
});
}), l;
}, "getEdgesToRender"), G = /* @__PURE__ */ w(async (o, t, g, m, l, i) => {
c.warn("Graph in recursive render:XAX", L(t), l);
const r = t.graph().rankdir;
c.trace("Dir in recursive render - dir:", r);
const f = o.insert("g").attr("class", "root");
t.nodes() ? c.info("Recursive render XXX", t.nodes()) : c.info("No nodes found for", t), t.edges().length > 0 && c.info("Recursive edges", t.edge(t.edges()[0]));
const h = f.insert("g").attr("class", "clusters"), a = f.insert("g").attr("class", "edgePaths"), s = f.insert("g").attr("class", "edgeLabels"), n = f.insert("g").attr("class", "nodes"), p = K(g);
await Promise.all(t.nodes().map(async function(d) {
const e = t.node(d);
if (l !== void 0) {
const u = JSON.parse(JSON.stringify(l.clusterData));
c.trace(`Setting data for parent cluster XXX
Node.id = `, d, `
data=`, u.height, `
Parent cluster`, l.height), t.setNode(l.id, u), t.parent(d) || (c.trace("Setting parent", d, l.id), t.setParent(d, l.id, u));
}
if (c.info("(Insert) Node XXX" + d + ": " + JSON.stringify(t.node(d))), e?.clusterNode) {
c.info("Cluster identified XBX", d, e.width, t.node(d));
const { ranksep: u, nodesep: b } = t.graph();
e.graph.setGraph({
...e.graph.graph(),
ranksep: u + 25,
nodesep: b
});
const E = await G(n, e.graph, g, m, t.node(d), i), N = E.elem;
$(e, N), e.diff = E.diff || 0, c.info("New compound node after recursive render XAX", d, "width", e.width, "height", e.height), Y(N, e);
} else t.children(d).length > 0 ? (c.trace("Cluster - the non recursive path XBX", d, e.id, e, e.width, "Graph:", t), c.trace(I(e.id, t)), S.set(e.id, {
id: I(e.id, t),
node: e
})) : (c.trace("Node - the non recursive path XAX", d, n, t.node(d), r), await D(n, t.node(d), {
config: i,
dir: r
}));
})), await (/* @__PURE__ */ w(async () => {
const d = t.edges().map(async function(e) {
const u = t.edge(e.v, e.w, e.name);
if (c.info("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(e)), c.info("Edge " + e.v + " -> " + e.w + ": ", e, " ", JSON.stringify(t.edge(e))), c.info("Fix", S, "ids:", e.v, e.w, "Translating: ", S.get(e.v), S.get(e.w)), p && u.selfLoop) {
if (u.selfLoop.order !== 1) return;
const b = u.id;
u.id = u.selfLoop.id, await P(s, u), u.id = b;
return;
}
await P(s, u);
});
await Promise.all(d);
}, "processEdges"))(), c.info("Graph before layout:", JSON.stringify(L(t))), c.info("############################################# XXX"), c.info("### Layout ### XXX"), c.info("############################################# XXX"), J(t), c.info("Graph after layout:", JSON.stringify(L(t)));
let y = 0, { subGraphTitleTotalMargin: x } = B(i);
await Promise.all(T(t).map(async function(d) {
const e = t.node(d);
if (c.info("Position XBX => " + d + ": (" + e.x, "," + e.y, ") width: ", e.width, " height: ", e.height), e?.clusterNode)
e.y += x, c.info("A tainted cluster node XBX1", d, e.id, e.width, e.height, e.x, e.y, t.parent(d)), S.get(e.id).node = e, M(e);
else if (t.children(d).length > 0) {
c.info("A pure cluster node XBX1", d, e.id, e.x, e.y, e.width, e.height, t.parent(d)), e.height += x, t.node(e.parentId);
const u = e?.padding / 2 || 0, b = e?.labelBBox?.height || 0, E = b - u || 0;
c.debug("OffsetY", E, "labelHeight", b, "halfPadding", u), await H(h, e), S.get(e.id).node = e;
} else {
const u = t.node(e.parentId);
e.y += x / 2, c.info("A regular node XBX1 - using the padding", e.id, "parent", e.parentId, e.width, e.height, e.x, e.y, "offsetY", e.offsetY, "parent", u, u?.offsetY, e), M(e);
}
}));
const X = x / 2;
return Z(t, X, { mergeSelfLoops: p }).forEach(function({ edge: d, start: e, end: u }) {
c.info("Edge " + e + " -> " + u + ": " + JSON.stringify(d), d), d.points.forEach((N) => N.y += X);
const b = t.node(e), E = t.node(u);
F(d, q(a, d, S, g, b, E, m));
}), t.nodes().forEach(function(d) {
const e = t.node(d);
c.info(d, e.type, e.diff), e.isGroup && (y = e.diff);
}), c.warn("Returning from recursive render XAX", f, y), {
elem: f,
diff: y
};
}, "recursiveRender"), ue = /* @__PURE__ */ w(async (o, t) => {
const g = new O({
multigraph: !0,
compound: !0
}).setGraph({
rankdir: o.direction,
nodesep: o.config?.nodeSpacing || o.config?.flowchart?.nodeSpacing || o.nodeSpacing,
ranksep: o.config?.rankSpacing || o.config?.flowchart?.rankSpacing || o.rankSpacing,
marginx: 8,
marginy: 8
}).setDefaultEdgeLabel(function() {
return {};
}), m = t.select("g");
j(m, o.markers, o.type, o.diagramId), _(), z(), W(), A(), o.nodes.forEach((i) => {
g.setNode(i.id, { ...i }), i.parentId && g.setParent(i.id, i.parentId);
}), c.debug("Edges:", o.edges), o.edges.forEach((i) => {
if (i.start === i.end) {
const r = i.start, f = r + "---" + r + "---1", h = r + "---" + r + "---2", a = g.node(r);
g.setNode(f, {
domId: f,
id: f,
parentId: a.parentId,
labelStyle: "",
label: "",
padding: 0,
shape: "labelRect",
style: "",
width: 10,
height: 10
}), g.setParent(f, a.parentId), g.setNode(h, {
domId: h,
id: h,
parentId: a.parentId,
labelStyle: "",
padding: 0,
shape: "labelRect",
label: "",
style: "",
width: 10,
height: 10
}), g.setParent(h, a.parentId);
const s = structuredClone(i), n = structuredClone(i), p = structuredClone(i), y = structuredClone(i);
n.originalEdge = s, n.selfLoop = {
id: s.id,
order: 0
}, p.originalEdge = s, p.selfLoop = {
id: s.id,
order: 1
}, y.originalEdge = s, y.selfLoop = {
id: s.id,
order: 2
}, n.label = "", n.arrowTypeEnd = "none", n.endLabelLeft = "", n.endLabelRight = "", n.startLabelLeft = "", n.id = r + "-cyclic-special-1", p.startLabelRight = "", p.startLabelLeft = "", p.endLabelLeft = "", p.endLabelRight = "", p.arrowTypeStart = "none", p.arrowTypeEnd = "none", p.id = r + "-cyclic-special-mid", y.label = "", y.startLabelRight = "", y.startLabelLeft = "", y.arrowTypeStart = "none", a.isGroup && (n.fromCluster = r, y.toCluster = r), y.id = r + "-cyclic-special-2", y.arrowTypeStart = "none", g.setEdge(r, f, n, r + "-cyclic-special-0"), g.setEdge(f, h, p, r + "-cyclic-special-1"), g.setEdge(h, r, y, r + "-cyclic-special-2");
} else g.setEdge(i.start, i.end, { ...i }, i.id);
}), c.warn("Graph at first:", JSON.stringify(L(g))), v(g), c.warn("Graph after XAX:", JSON.stringify(L(g)));
const l = k();
await G(m, g, o.type, o.diagramId, void 0, l);
}, "render");
export {
Z as getEdgesToRender,
ue as render
};