ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
653 lines (652 loc) • 31.9 kB
JavaScript
import { n as Ct } from "./mermaid-parser.core-uIDZYuBu.js";
import { n as y } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as J } from "./src-DtRLxcYO.js";
import { D as Mt, H as Nt, K as zt, U as Lt, a as Tt, b as At, c as Et, v as Xt, w as Yt, x as j, y as It } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { i as Z } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as Bt } from "./chunk-VAUOI2AC-izt0o4id.js";
import { t as Ft } from "./chunk-JWPE2WC7-CGEmUMMZ.js";
var D = /* @__PURE__ */ y((e, a) => {
const r = e <= 1 ? e * 100 : e;
if (r < 0 || r > 100) throw new Error(`${a} must be between 0-1 (decimal) or 0-100 (percentage). Received: ${e}`);
return r;
}, "toPercent"), T = /* @__PURE__ */ y((e, a, r) => ({
x: D(a, `${r} evolution`),
y: D(e, `${r} visibility`)
}), "toCoordinates"), K = /* @__PURE__ */ y((e) => {
if (e) {
if (e === "+<>") return "bidirectional";
if (e === "+<") return "backward";
if (e === "+>") return "forward";
}
}, "getFlowFromPort"), Ot = /* @__PURE__ */ y((e) => {
if (!e?.startsWith("+")) return {};
const a = /^\+'([^']*)'/.exec(e)?.[1];
return e.includes("<>") ? {
flow: "bidirectional",
label: a
} : e.includes("<") ? {
flow: "backward",
label: a
} : e.includes(">") ? {
flow: "forward",
label: a
} : { label: a };
}, "extractFlowFromArrow"), Rt = /* @__PURE__ */ y((e, a) => {
if (Ft(e, a), e.size && a.setSize(e.size.width, e.size.height), e.evolution) {
const r = e.evolution.stages.map((n) => n.secondName ? `${n.name.trim()} / ${n.secondName.trim()}` : n.name.trim()), f = e.evolution.stages.filter((n) => n.boundary !== void 0).map((n) => n.boundary);
a.updateAxes({
stages: r,
stageBoundaries: f
});
}
if (e.anchors.forEach((r) => {
const f = T(r.visibility, r.evolution, `Anchor "${r.name}"`);
a.addNode(r.name, r.name, f.x, f.y, "anchor");
}), e.components.forEach((r) => {
const f = T(r.visibility, r.evolution, `Component "${r.name}"`), n = r.label ? (r.label.negX ? -1 : 1) * r.label.offsetX : void 0, l = r.label ? (r.label.negY ? -1 : 1) * r.label.offsetY : void 0, u = r.decorator?.strategy;
a.addNode(r.name, r.name, f.x, f.y, "component", n, l, r.inertia, u);
}), e.notes.forEach((r) => {
const f = T(r.visibility, r.evolution, `Note "${r.text}"`);
a.addNote(r.text, f.x, f.y);
}), e.pipelines.forEach((r) => {
const f = a.getNode(r.parent);
if (!f || typeof f.y != "number") throw new Error(`Pipeline "${r.parent}" must reference an existing component with coordinates.`);
const n = f.y;
a.startPipeline(r.parent), r.components.forEach((l) => {
const u = `${r.parent}_${l.name}`, S = l.label ? (l.label.negX ? -1 : 1) * l.label.offsetX : void 0, g = l.label ? (l.label.negY ? -1 : 1) * l.label.offsetY : void 0, F = D(l.evolution, `Pipeline component "${l.name}" evolution`);
a.addNode(u, l.name, F, n, "pipeline-component", S, g), a.addPipelineComponent(r.parent, u);
});
}), e.links.forEach((r) => {
const f = !!r.arrow && (r.arrow.includes("-.->") || r.arrow.includes(".-."));
let n = K(r.fromPort) ?? K(r.toPort);
const { flow: l, label: u } = Ot(r.arrow);
!n && l && (n = l);
const S = r.linkLabel, g = u ?? S;
a.addLink(a.resolveNodeId(r.from), a.resolveNodeId(r.to), f, g, n);
}), e.evolves.forEach((r) => {
const f = a.getNode(r.component);
if (f?.y !== void 0) {
const n = D(r.target, `Evolve target for "${r.component}"`);
a.addTrend(r.component, n, f.y);
}
}), e.annotations.length > 0) {
const r = e.annotations[0], f = T(r.x, r.y, "Annotations box");
a.setAnnotationsBox(f.x, f.y);
}
e.annotation.forEach((r) => {
const f = T(r.x, r.y, `Annotation ${r.number}`);
a.addAnnotation(r.number, [{
x: f.x,
y: f.y
}], r.text);
}), e.accelerators.forEach((r) => {
const f = T(r.x, r.y, `Accelerator "${r.name}"`);
a.addAccelerator(r.name, f.x, f.y);
}), e.deaccelerators.forEach((r) => {
const f = T(r.x, r.y, `Deaccelerator "${r.name}"`);
a.addDeaccelerator(r.name, f.x, f.y);
});
}, "populateDb"), Q = {
parser: { yy: void 0 },
parse: /* @__PURE__ */ y(async (e) => {
const a = await Ct("wardley", e);
J.debug(a);
const r = Q.parser?.yy;
if (!r || typeof r.addNode != "function") throw new Error("parser.parser?.yy was not a WardleyDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.");
Rt(a, r);
}, "parse")
}, Wt = class {
constructor() {
this.nodes = /* @__PURE__ */ new Map(), this.links = [], this.trends = /* @__PURE__ */ new Map(), this.pipelines = /* @__PURE__ */ new Map(), this.annotations = [], this.notes = [], this.accelerators = [], this.deaccelerators = [], this.axes = {};
}
static {
y(this, "WardleyBuilder");
}
addNode(e) {
const a = this.nodes.get(e.id) ?? {
id: e.id,
label: e.label
}, r = {
...a,
...e,
className: e.className ?? a.className,
labelOffsetX: e.labelOffsetX ?? a.labelOffsetX,
labelOffsetY: e.labelOffsetY ?? a.labelOffsetY
};
this.nodes.set(e.id, r);
}
addLink(e) {
this.links.push(e);
}
addTrend(e) {
this.trends.set(e.nodeId, e);
}
startPipeline(e) {
this.pipelines.set(e, {
nodeId: e,
componentIds: []
});
const a = this.nodes.get(e);
a && (a.isPipelineParent = !0);
}
addPipelineComponent(e, a) {
const r = this.pipelines.get(e);
r && r.componentIds.push(a);
const f = this.nodes.get(a);
f && (f.inPipeline = !0);
}
addAnnotation(e) {
this.annotations.push(e);
}
addNote(e) {
this.notes.push(e);
}
addAccelerator(e) {
this.accelerators.push(e);
}
addDeaccelerator(e) {
this.deaccelerators.push(e);
}
setAnnotationsBox(e, a) {
this.annotationsBox = {
x: e,
y: a
};
}
setAxes(e) {
this.axes = {
...this.axes,
...e
};
}
setSize(e, a) {
this.size = {
width: e,
height: a
};
}
getNode(e) {
return this.nodes.get(e);
}
resolveNodeId(e) {
if (this.nodes.has(e)) return e;
for (const [a, r] of this.nodes) if (r.label === e) return a;
return e;
}
build() {
const e = [];
for (const a of this.nodes.values()) {
if (typeof a.x != "number" || typeof a.y != "number") throw new Error(`Node "${a.label}" is missing coordinates`);
e.push(a);
}
return {
nodes: e,
links: [...this.links],
trends: [...this.trends.values()],
pipelines: [...this.pipelines.values()],
annotations: [...this.annotations],
notes: [...this.notes],
accelerators: [...this.accelerators],
deaccelerators: [...this.deaccelerators],
annotationsBox: this.annotationsBox,
axes: { ...this.axes },
size: this.size
};
}
clear() {
this.nodes.clear(), this.links = [], this.trends.clear(), this.pipelines.clear(), this.annotations = [], this.notes = [], this.accelerators = [], this.deaccelerators = [], this.annotationsBox = void 0, this.axes = {}, this.size = void 0;
}
}, k = new Wt();
function tt() {
return j()["wardley-beta"];
}
y(tt, "getConfig");
function et(e, a, r, f, n, l, u, S, g) {
k.addNode({
id: e,
label: a,
x: r,
y: f,
className: n,
labelOffsetX: l,
labelOffsetY: u,
inertia: S,
sourceStrategy: g
});
}
y(et, "addNode");
function at(e, a, r = !1, f, n) {
k.addLink({
source: e,
target: a,
dashed: r,
label: f,
flow: n
});
}
y(at, "addLink");
function rt(e, a, r) {
k.addTrend({
nodeId: e,
targetX: a,
targetY: r
});
}
y(rt, "addTrend");
function ot(e, a, r) {
k.addAnnotation({
number: e,
coordinates: a,
text: r
});
}
y(ot, "addAnnotation");
function nt(e, a, r) {
k.addNote({
text: e,
x: a,
y: r
});
}
y(nt, "addNote");
function st(e, a, r) {
k.addAccelerator({
name: e,
x: a,
y: r
});
}
y(st, "addAccelerator");
function it(e, a, r) {
k.addDeaccelerator({
name: e,
x: a,
y: r
});
}
y(it, "addDeaccelerator");
function lt(e, a) {
k.setAnnotationsBox(e, a);
}
y(lt, "setAnnotationsBox");
function dt(e, a) {
k.setSize(e, a);
}
y(dt, "setSize");
function ct(e) {
k.startPipeline(e);
}
y(ct, "startPipeline");
function pt(e, a) {
k.addPipelineComponent(e, a);
}
y(pt, "addPipelineComponent");
function xt(e) {
k.setAxes(e);
}
y(xt, "updateAxes");
function ft(e) {
return k.getNode(e);
}
y(ft, "getNode");
function ht(e) {
return k.resolveNodeId(e);
}
y(ht, "resolveNodeId");
function gt() {
return k.build();
}
y(gt, "getWardleyData");
function yt() {
k.clear(), Tt();
}
y(yt, "clear");
var Dt = {
getConfig: tt,
addNode: et,
addLink: at,
addTrend: rt,
addAnnotation: ot,
addNote: nt,
addAccelerator: st,
addDeaccelerator: it,
setAnnotationsBox: lt,
setSize: dt,
startPipeline: ct,
addPipelineComponent: pt,
updateAxes: xt,
getNode: ft,
resolveNodeId: ht,
getWardleyData: gt,
clear: yt,
setAccTitle: Lt,
getAccTitle: It,
setDiagramTitle: zt,
getDiagramTitle: Yt,
getAccDescription: Xt,
setAccDescription: Nt
}, Gt = [
"Genesis",
"Custom Built",
"Product",
"Commodity"
], Ht = /* @__PURE__ */ y(() => {
const { themeVariables: e } = j();
return {
backgroundColor: e.wardley?.backgroundColor ?? e.background ?? "#fff",
axisColor: e.wardley?.axisColor ?? "#000",
axisTextColor: e.wardley?.axisTextColor ?? e.primaryTextColor ?? "#222",
gridColor: e.wardley?.gridColor ?? "rgba(100, 100, 100, 0.2)",
componentFill: e.wardley?.componentFill ?? "#fff",
componentStroke: e.wardley?.componentStroke ?? "#000",
componentLabelColor: e.wardley?.componentLabelColor ?? e.primaryTextColor ?? "#222",
linkStroke: e.wardley?.linkStroke ?? "#000",
evolutionStroke: e.wardley?.evolutionStroke ?? "#dc3545",
annotationStroke: e.wardley?.annotationStroke ?? "#000",
annotationTextColor: e.wardley?.annotationTextColor ?? e.primaryTextColor ?? "#222",
annotationFill: e.wardley?.annotationFill ?? e.background ?? "#fff"
};
}, "getTheme"), qt = /* @__PURE__ */ y(() => {
const e = j()["wardley-beta"];
return {
width: e?.width ?? 900,
height: e?.height ?? 600,
padding: e?.padding ?? 48,
nodeRadius: e?.nodeRadius ?? 6,
nodeLabelOffset: e?.nodeLabelOffset ?? 8,
axisFontSize: e?.axisFontSize ?? 12,
labelFontSize: e?.labelFontSize ?? 10,
showGrid: e?.showGrid ?? !1,
useMaxWidth: e?.useMaxWidth ?? !0
};
}, "getConfigValues"), Qt = {
parser: Q,
db: Dt,
renderer: { draw: /* @__PURE__ */ y((e, a, r, f) => {
J.debug(`Rendering Wardley map
` + e);
const n = qt(), l = Ht(), u = n.nodeRadius * 1.6, S = f.db, g = S.getWardleyData(), F = S.getDiagramTitle(), C = g.size?.width ?? n.width, b = g.size?.height ?? n.height, X = Bt(a);
X.selectAll("*").remove(), Et(X, b, C, n.useMaxWidth), X.attr("viewBox", `0 0 ${C} ${b}`);
const P = X.append("g").attr("class", "wardley-map"), G = X.append("defs");
G.append("marker").attr("id", `arrow-${a}`).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerWidth", 6).attr("markerHeight", 6).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").attr("fill", l.evolutionStroke).attr("stroke", "none"), G.append("marker").attr("id", `link-arrow-end-${a}`).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerWidth", 5).attr("markerHeight", 5).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").attr("fill", l.linkStroke).attr("stroke", "none"), G.append("marker").attr("id", `link-arrow-start-${a}`).attr("viewBox", "0 0 10 10").attr("refX", 1).attr("refY", 5).attr("markerWidth", 5).attr("markerHeight", 5).attr("orient", "auto").append("path").attr("d", "M 10 0 L 0 5 L 10 10 z").attr("fill", l.linkStroke).attr("stroke", "none"), P.append("rect").attr("class", "wardley-background").attr("width", C).attr("height", b).attr("fill", l.backgroundColor);
const Y = C - n.padding * 2, I = b - n.padding * 2;
F && P.append("text").attr("class", "wardley-title").attr("x", C / 2).attr("y", n.padding / 2).attr("fill", l.axisTextColor).attr("font-size", n.axisFontSize * 1.05).attr("font-weight", "bold").attr("text-anchor", "middle").attr("dominant-baseline", "middle").text(F);
const N = /* @__PURE__ */ y((t) => n.padding + t / 100 * Y, "projectX"), z = /* @__PURE__ */ y((t) => b - n.padding - t / 100 * I, "projectY"), O = P.append("g").attr("class", "wardley-axes");
O.append("line").attr("x1", n.padding).attr("x2", C - n.padding).attr("y1", b - n.padding).attr("y2", b - n.padding).attr("stroke", l.axisColor).attr("stroke-width", 1), O.append("line").attr("x1", n.padding).attr("x2", n.padding).attr("y1", n.padding).attr("y2", b - n.padding).attr("stroke", l.axisColor).attr("stroke-width", 1);
const ut = g.axes.xLabel ?? "Evolution", wt = g.axes.yLabel ?? "Visibility";
O.append("text").attr("class", "wardley-axis-label wardley-axis-label-x").attr("x", n.padding + Y / 2).attr("y", b - n.padding / 4).attr("fill", l.axisTextColor).attr("font-size", n.axisFontSize).attr("font-weight", "bold").attr("text-anchor", "middle").text(ut), O.append("text").attr("class", "wardley-axis-label wardley-axis-label-y").attr("x", n.padding / 3).attr("y", n.padding + I / 2).attr("fill", l.axisTextColor).attr("font-size", n.axisFontSize).attr("font-weight", "bold").attr("text-anchor", "middle").attr("transform", `rotate(-90 ${n.padding / 3} ${n.padding + I / 2})`).text(wt);
const B = g.axes.stages && g.axes.stages.length > 0 ? g.axes.stages : Gt;
if (B.length > 0) {
const t = P.append("g").attr("class", "wardley-stages"), i = g.axes.stageBoundaries, o = [];
if (i && i.length === B.length) {
let s = 0;
i.forEach((d) => {
o.push({
start: s,
end: d
}), s = d;
});
} else {
const s = 1 / B.length;
B.forEach((d, c) => {
o.push({
start: c * s,
end: (c + 1) * s
});
});
}
B.forEach((s, d) => {
const c = o[d], h = n.padding + c.start * Y, x = (h + (n.padding + c.end * Y)) / 2;
d > 0 && t.append("line").attr("x1", h).attr("x2", h).attr("y1", n.padding).attr("y2", b - n.padding).attr("stroke", "#000").attr("stroke-width", 1).attr("stroke-dasharray", "5 5").attr("opacity", 0.8), t.append("text").attr("class", "wardley-stage-label").attr("x", x).attr("y", b - n.padding / 1.5).attr("fill", l.axisTextColor).attr("font-size", n.axisFontSize - 2).attr("text-anchor", "middle").text(s);
});
}
if (n.showGrid) {
const t = P.append("g").attr("class", "wardley-grid");
for (let i = 1; i < 4; i++) {
const o = i / 4, s = n.padding + Y * o;
t.append("line").attr("x1", s).attr("x2", s).attr("y1", n.padding).attr("y2", b - n.padding).attr("stroke", l.gridColor).attr("stroke-dasharray", "2 6"), t.append("line").attr("x1", n.padding).attr("x2", C - n.padding).attr("y1", b - n.padding - I * o).attr("y2", b - n.padding - I * o).attr("stroke", l.gridColor).attr("stroke-dasharray", "2 6");
}
}
const p = /* @__PURE__ */ new Map();
if (g.nodes.forEach((t) => {
p.set(t.id, {
x: N(t.x),
y: z(t.y),
node: t
});
}), g.pipelines.length > 0) {
const t = P.append("g").attr("class", "wardley-pipelines"), i = P.append("g").attr("class", "wardley-pipeline-links");
g.pipelines.forEach((o) => {
if (o.componentIds.length === 0) return;
const s = o.componentIds.map((x) => ({
id: x,
pos: p.get(x),
node: g.nodes.find((w) => w.id === x)
})).filter((x) => x.pos && x.node).sort((x, w) => x.node.x - w.node.x);
for (let x = 0; x < s.length - 1; x++) {
const w = s[x], m = s[x + 1];
i.append("line").attr("class", "wardley-pipeline-evolution-link").attr("x1", w.pos.x).attr("y1", w.pos.y).attr("x2", m.pos.x).attr("y2", m.pos.y).attr("stroke", l.linkStroke).attr("stroke-width", 1).attr("stroke-dasharray", "4 4");
}
let d = 1 / 0, c = -1 / 0, h = 0;
if (o.componentIds.forEach((x) => {
const w = p.get(x);
w && (d = Math.min(d, w.x), c = Math.max(c, w.x), h = w.y);
}), d !== 1 / 0 && c !== -1 / 0) {
const w = n.nodeRadius * 4, m = h - w / 2, v = p.get(o.nodeId);
v && (v.x = (d + c) / 2, v.y = m - u / 6), t.append("rect").attr("class", "wardley-pipeline-box").attr("x", d - 15).attr("y", m).attr("width", c - d + 30).attr("height", w).attr("fill", "none").attr("stroke", l.axisColor).attr("stroke-width", 1.5).attr("rx", 4).attr("ry", 4);
}
});
}
const V = P.append("g").attr("class", "wardley-links"), _ = /* @__PURE__ */ new Map();
g.pipelines.forEach((t) => {
_.set(t.nodeId, new Set(t.componentIds));
});
const U = g.links.filter((t) => !(!p.has(t.source) || !p.has(t.target) || _.get(t.target)?.has(t.source)));
V.selectAll("line").data(U).enter().append("line").attr("class", (t) => `wardley-link${t.dashed ? " wardley-link--dashed" : ""}`).attr("x1", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = g.nodes.find((x) => x.id === t.source).isPipelineParent ? u / Math.sqrt(2) : n.nodeRadius, d = o.x - i.x, c = o.y - i.y, h = Math.sqrt(d * d + c * c);
return i.x + d / h * s;
}).attr("y1", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = g.nodes.find((x) => x.id === t.source).isPipelineParent ? u / Math.sqrt(2) : n.nodeRadius, d = o.x - i.x, c = o.y - i.y, h = Math.sqrt(d * d + c * c);
return i.y + c / h * s;
}).attr("x2", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = g.nodes.find((x) => x.id === t.target).isPipelineParent ? u / Math.sqrt(2) : n.nodeRadius, d = i.x - o.x, c = i.y - o.y, h = Math.sqrt(d * d + c * c);
return o.x + d / h * s;
}).attr("y2", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = g.nodes.find((x) => x.id === t.target).isPipelineParent ? u / Math.sqrt(2) : n.nodeRadius, d = i.x - o.x, c = i.y - o.y, h = Math.sqrt(d * d + c * c);
return o.y + c / h * s;
}).attr("stroke", l.linkStroke).attr("stroke-width", 1).attr("stroke-dasharray", (t) => t.dashed ? "6 6" : null).attr("marker-end", (t) => t.flow === "forward" || t.flow === "bidirectional" ? `url(#link-arrow-end-${a})` : null).attr("marker-start", (t) => t.flow === "backward" || t.flow === "bidirectional" ? `url(#link-arrow-start-${a})` : null), V.selectAll("text").data(U.filter((t) => t.label)).enter().append("text").attr("class", "wardley-link-label").attr("x", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = (i.x + o.x) / 2, d = o.y - i.y, c = o.x - i.x;
return s + d / Math.sqrt(c * c + d * d) * 8;
}).attr("y", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = (i.y + o.y) / 2, d = o.x - i.x, c = o.y - i.y, h = Math.sqrt(d * d + c * c);
return s + -d / h * 8;
}).attr("fill", l.axisTextColor).attr("font-size", n.labelFontSize).attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("transform", (t) => {
const i = p.get(t.source), o = p.get(t.target), s = (i.x + o.x) / 2, d = (i.y + o.y) / 2, c = o.x - i.x, h = o.y - i.y, x = Math.sqrt(c * c + h * h), w = 8, m = h / x, v = -c / x, A = s + m * w, R = d + v * w;
let E = Math.atan2(h, c) * 180 / Math.PI;
return (E > 90 || E < -90) && (E += 180), `rotate(${E} ${A} ${R})`;
}).text((t) => t.label);
const mt = P.append("g").attr("class", "wardley-trends"), kt = g.trends.map((t) => {
const i = p.get(t.nodeId);
if (!i) return null;
const o = N(t.targetX), s = z(t.targetY), d = o - i.x, c = s - i.y, h = Math.sqrt(d * d + c * c), x = n.nodeRadius + 2;
return {
origin: i,
targetX: o,
targetY: s,
adjustedX2: h > x ? o - d / h * x : o,
adjustedY2: h > x ? s - c / h * x : s
};
}).filter((t) => t !== null);
mt.selectAll("line").data(kt).enter().append("line").attr("class", "wardley-trend").attr("x1", (t) => t.origin.x).attr("y1", (t) => t.origin.y).attr("x2", (t) => t.adjustedX2).attr("y2", (t) => t.adjustedY2).attr("stroke", l.evolutionStroke).attr("stroke-width", 1).attr("stroke-dasharray", "4 4").attr("marker-end", `url(#arrow-${a})`);
const M = P.append("g").attr("class", "wardley-nodes").selectAll("g").data(g.nodes).enter().append("g").attr("class", (t) => ["wardley-node", t.className ? `wardley-node--${t.className}` : ""].filter(Boolean).join(" "));
M.filter((t) => t.sourceStrategy === "outsource").append("circle").attr("class", "wardley-outsource-overlay").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y).attr("r", n.nodeRadius * 2).attr("fill", "#666").attr("stroke", l.componentStroke).attr("stroke-width", 1), M.filter((t) => t.sourceStrategy === "buy").append("circle").attr("class", "wardley-buy-overlay").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y).attr("r", n.nodeRadius * 2).attr("fill", "#ccc").attr("stroke", l.componentStroke).attr("stroke-width", 1), M.filter((t) => t.sourceStrategy === "build").append("circle").attr("class", "wardley-build-overlay").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y).attr("r", n.nodeRadius * 2).attr("fill", "#eee").attr("stroke", "#000").attr("stroke-width", 1);
const L = M.filter((t) => t.sourceStrategy === "market");
L.append("circle").attr("class", "wardley-market-overlay").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y).attr("r", n.nodeRadius * 2).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 1), M.filter((t) => !t.isPipelineParent && t.sourceStrategy !== "market" && t.className !== "anchor").append("circle").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y).attr("r", n.nodeRadius).attr("fill", l.componentFill).attr("stroke", l.componentStroke).attr("stroke-width", 1);
const H = n.nodeRadius * 0.7, $ = n.nodeRadius * 1.2;
if (L.append("line").attr("class", "wardley-market-line").attr("x1", (t) => p.get(t.id).x).attr("y1", (t) => p.get(t.id).y - $).attr("x2", (t) => p.get(t.id).x - $ * Math.cos(Math.PI / 6)).attr("y2", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("stroke", l.componentStroke).attr("stroke-width", 1), L.append("line").attr("class", "wardley-market-line").attr("x1", (t) => p.get(t.id).x - $ * Math.cos(Math.PI / 6)).attr("y1", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("x2", (t) => p.get(t.id).x + $ * Math.cos(Math.PI / 6)).attr("y2", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("stroke", l.componentStroke).attr("stroke-width", 1), L.append("line").attr("class", "wardley-market-line").attr("x1", (t) => p.get(t.id).x + $ * Math.cos(Math.PI / 6)).attr("y1", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("x2", (t) => p.get(t.id).x).attr("y2", (t) => p.get(t.id).y - $).attr("stroke", l.componentStroke).attr("stroke-width", 1), L.append("circle").attr("class", "wardley-market-dot").attr("cx", (t) => p.get(t.id).x).attr("cy", (t) => p.get(t.id).y - $).attr("r", H).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 2), L.append("circle").attr("class", "wardley-market-dot").attr("cx", (t) => p.get(t.id).x - $ * Math.cos(Math.PI / 6)).attr("cy", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("r", H).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 2), L.append("circle").attr("class", "wardley-market-dot").attr("cx", (t) => p.get(t.id).x + $ * Math.cos(Math.PI / 6)).attr("cy", (t) => p.get(t.id).y + $ * Math.sin(Math.PI / 6)).attr("r", H).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 2), M.filter((t) => t.isPipelineParent === !0).append("rect").attr("x", (t) => p.get(t.id).x - u / 2).attr("y", (t) => p.get(t.id).y - u / 2).attr("width", u).attr("height", u).attr("fill", l.componentFill).attr("stroke", l.componentStroke).attr("stroke-width", 1), M.filter((t) => t.inertia === !0).append("line").attr("class", "wardley-inertia").attr("x1", (t) => {
const i = p.get(t.id);
let o = t.isPipelineParent ? u / 2 + 15 : n.nodeRadius + 15;
return t.sourceStrategy && (o += n.nodeRadius + 10), i.x + o;
}).attr("y1", (t) => {
const i = p.get(t.id), o = t.isPipelineParent ? u : n.nodeRadius * 2;
return i.y - o / 2;
}).attr("x2", (t) => {
const i = p.get(t.id);
let o = t.isPipelineParent ? u / 2 + 15 : n.nodeRadius + 15;
return t.sourceStrategy && (o += n.nodeRadius + 10), i.x + o;
}).attr("y2", (t) => {
const i = p.get(t.id), o = t.isPipelineParent ? u : n.nodeRadius * 2;
return i.y + o / 2;
}).attr("stroke", l.componentStroke).attr("stroke-width", 6), M.append("text").attr("x", (t) => {
const i = p.get(t.id);
if (t.className === "anchor") return t.labelOffsetX !== void 0 ? i.x + t.labelOffsetX : i.x;
let o = n.nodeLabelOffset;
t.sourceStrategy && t.labelOffsetX === void 0 && (o += 10);
const s = t.labelOffsetX ?? o;
return i.x + s;
}).attr("y", (t) => {
const i = p.get(t.id);
if (t.className === "anchor") return t.labelOffsetY !== void 0 ? i.y + t.labelOffsetY : i.y - 3;
let o = -n.nodeLabelOffset;
t.sourceStrategy && t.labelOffsetY === void 0 && (o -= 10);
const s = t.labelOffsetY ?? o;
return i.y + s;
}).attr("class", "wardley-node-label").attr("fill", (t) => t.className === "evolved" ? l.evolutionStroke : t.className === "anchor" ? "#000" : l.componentLabelColor).attr("font-size", n.labelFontSize).attr("font-weight", (t) => t.className === "anchor" ? "bold" : "normal").attr("text-anchor", (t) => t.className === "anchor" ? "middle" : "start").attr("dominant-baseline", (t) => t.className === "anchor" ? "middle" : "auto").text((t) => t.label), g.annotations.length > 0) {
const t = P.append("g").attr("class", "wardley-annotations");
if (g.annotations.forEach((i) => {
const o = i.coordinates.map((s) => ({
x: N(s.x),
y: z(s.y)
}));
if (o.length > 1) for (let s = 0; s < o.length - 1; s++) t.append("line").attr("class", "wardley-annotation-line").attr("x1", o[s].x).attr("y1", o[s].y).attr("x2", o[s + 1].x).attr("y2", o[s + 1].y).attr("stroke", l.axisColor).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4");
o.forEach((s) => {
const d = t.append("g").attr("class", "wardley-annotation");
d.append("circle").attr("cx", s.x).attr("cy", s.y).attr("r", 10).attr("fill", "white").attr("stroke", l.axisColor).attr("stroke-width", 1.5), d.append("text").attr("x", s.x).attr("y", s.y).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", 10).attr("fill", l.axisTextColor).attr("font-weight", "bold").text(i.number);
});
}), g.annotationsBox) {
let i = N(g.annotationsBox.x), o = z(g.annotationsBox.y);
const s = 10, d = 16, c = 11, h = t.append("g").attr("class", "wardley-annotations-box"), x = [...g.annotations].filter((m) => m.text).sort((m, v) => m.number - v.number), w = [];
if (x.forEach((m, v) => {
const A = h.append("text").attr("x", i + s).attr("y", o + s + (v + 1) * d).attr("font-size", c).attr("fill", l.axisTextColor).attr("text-anchor", "start").attr("dominant-baseline", "middle").text(`${m.number}. ${m.text}`);
w.push(A);
}), w.length > 0) {
let m = 0, v = 0;
w.forEach((q) => {
const W = q.node(), vt = W.getComputedTextLength();
m = Math.max(m, vt);
const St = W.getBBox();
v = Math.max(v, St.height);
});
const A = m + s * 2 + 105, R = x.length * d + s * 2 + v / 2, E = n.padding, bt = C - n.padding - A, $t = n.padding, Pt = b - n.padding - R;
i = Math.max(E, Math.min(i, bt)), o = Math.max($t, Math.min(o, Pt)), w.forEach((q, W) => {
q.attr("x", i + s).attr("y", o + s + (W + 1) * d);
}), h.insert("rect", "text").attr("x", i).attr("y", o).attr("width", A).attr("height", R).attr("fill", "white").attr("stroke", l.axisColor).attr("stroke-width", 1.5).attr("rx", 4).attr("ry", 4);
}
}
}
if (g.notes.length > 0) {
const t = P.append("g").attr("class", "wardley-notes");
g.notes.forEach((i) => {
const o = N(i.x), s = z(i.y);
t.append("text").attr("x", o).attr("y", s).attr("text-anchor", "start").attr("font-size", 11).attr("fill", l.axisTextColor).attr("font-weight", "bold").text(i.text);
});
}
if (g.accelerators.length > 0) {
const t = P.append("g").attr("class", "wardley-accelerators");
g.accelerators.forEach((i) => {
const o = N(i.x), s = z(i.y), d = 60, c = 30, h = 20, x = `
M ${o} ${s - c / 2}
L ${o + d - h} ${s - c / 2}
L ${o + d - h} ${s - c / 2 - 8}
L ${o + d} ${s}
L ${o + d - h} ${s + c / 2 + 8}
L ${o + d - h} ${s + c / 2}
L ${o} ${s + c / 2}
Z
`;
t.append("path").attr("d", x).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 1), t.append("text").attr("x", o + d / 2).attr("y", s + c / 2 + 15).attr("text-anchor", "middle").attr("font-size", 10).attr("fill", l.axisTextColor).attr("font-weight", "bold").text(i.name);
});
}
if (g.deaccelerators.length > 0) {
const t = P.append("g").attr("class", "wardley-deaccelerators");
g.deaccelerators.forEach((i) => {
const o = N(i.x), s = z(i.y), d = 60, c = 30, h = 20, x = `
M ${o + d} ${s - c / 2}
L ${o + h} ${s - c / 2}
L ${o + h} ${s - c / 2 - 8}
L ${o} ${s}
L ${o + h} ${s + c / 2 + 8}
L ${o + h} ${s + c / 2}
L ${o + d} ${s + c / 2}
Z
`;
t.append("path").attr("d", x).attr("fill", "white").attr("stroke", l.componentStroke).attr("stroke-width", 1), t.append("text").attr("x", o + d / 2).attr("y", s + c / 2 + 15).attr("text-anchor", "middle").attr("font-size", 10).attr("fill", l.axisTextColor).attr("font-weight", "bold").text(i.name);
});
}
}, "draw") },
styles: /* @__PURE__ */ y(({ wardley: e } = {}) => {
const a = Z(Z(Mt(), At().themeVariables).wardley, e);
return `
.wardley-background {
fill: ${a.backgroundColor};
}
.wardley-axes line, .wardley-axes path {
stroke: ${a.axisColor};
}
.wardley-axis-label {
fill: ${a.axisTextColor};
}
.wardley-stage-label {
fill: ${a.axisTextColor};
}
.wardley-grid line {
stroke: ${a.gridColor};
}
.wardley-node circle {
fill: ${a.componentFill};
stroke: ${a.componentStroke};
}
.wardley-node-label {
fill: ${a.componentLabelColor};
}
.wardley-link {
stroke: ${a.linkStroke};
}
.wardley-link--dashed {
stroke-dasharray: 4 4;
}
.wardley-link-label {
fill: ${a.axisTextColor};
}
.wardley-trend line {
stroke: ${a.evolutionStroke};
}
.wardley-annotation-line {
stroke: ${a.annotationStroke};
}
.wardley-annotation circle {
fill: ${a.annotationFill};
stroke: ${a.annotationStroke};
}
.wardley-annotation text {
fill: ${a.annotationTextColor};
}
.wardley-annotations-box rect {
fill: ${a.annotationFill};
stroke: ${a.annotationStroke};
}
.wardley-annotations-box text {
fill: ${a.annotationTextColor};
}
.wardley-pipeline-box {
stroke: ${a.componentStroke};
}
.wardley-notes text {
fill: ${a.axisTextColor};
}
`;
}, "styles")
};
export {
Qt as diagram
};