import { getSubGraphTitleMargins } from "./chunk-EUUYHBKV.js"; import { compileStyles, solidStateFill, styles2String, userNodeOverrides } from "./chunk-FTTOYZOY.js"; import { createText, getIconSVG } from "./chunk-XIFRTXJX.js"; import { calculateTextWidth, decodeEntities, handleUndefinedAttr, parseFontSize } from "./chunk-SHNTMSU6.js"; import { common_default, defaultConfig_default, evaluate, getConfig, getConfig2, hasKatex, parseGenericTypes, renderKatexSanitized, sanitizeText, sanitizeText3 } from "./chunk-BFCVI5XI.js"; import { __name, log, select_default } from "./chunk-I65GBZ6F.js"; import { __spreadProps, __spreadValues } from "./chunk-TKSB4YUA.js"; // node_modules/roughjs/bundled/rough.esm.js function t(t2, e2, s2) { if (t2 && t2.length) { const [n2, o2] = e2, a2 = Math.PI / 180 * s2, h2 = Math.cos(a2), r2 = Math.sin(a2); for (const e3 of t2) { const [t3, s3] = e3; e3[0] = (t3 - n2) * h2 - (s3 - o2) * r2 + n2, e3[1] = (t3 - n2) * r2 + (s3 - o2) * h2 + o2; } } } function e(t2, e2) { return t2[0] === e2[0] && t2[1] === e2[1]; } function s(s2, n2, o2, a2 = 1) { const h2 = o2, r2 = Math.max(n2, 0.1), i2 = s2[0] && s2[0][0] && "number" == typeof s2[0][0] ? [s2] : s2, c2 = [0, 0]; if (h2) for (const e2 of i2) t(e2, c2, h2); const l2 = (function(t2, s3, n3) { const o3 = []; for (const s4 of t2) { const t3 = [...s4]; e(t3[0], t3[t3.length - 1]) || t3.push([t3[0][0], t3[0][1]]), t3.length > 2 && o3.push(t3); } const a3 = []; s3 = Math.max(s3, 0.1); const h3 = []; for (const t3 of o3) for (let e2 = 0; e2 < t3.length - 1; e2++) { const s4 = t3[e2], n4 = t3[e2 + 1]; if (s4[1] !== n4[1]) { const t4 = Math.min(s4[1], n4[1]); h3.push({ ymin: t4, ymax: Math.max(s4[1], n4[1]), x: t4 === s4[1] ? s4[0] : n4[0], islope: (n4[0] - s4[0]) / (n4[1] - s4[1]) }); } } if (h3.sort(((t3, e2) => t3.ymin < e2.ymin ? -1 : t3.ymin > e2.ymin ? 1 : t3.x < e2.x ? -1 : t3.x > e2.x ? 1 : t3.ymax === e2.ymax ? 0 : (t3.ymax - e2.ymax) / Math.abs(t3.ymax - e2.ymax))), !h3.length) return a3; let r3 = [], i3 = h3[0].ymin, c3 = 0; for (; r3.length || h3.length; ) { if (h3.length) { let t3 = -1; for (let e2 = 0; e2 < h3.length && !(h3[e2].ymin > i3); e2++) t3 = e2; h3.splice(0, t3 + 1).forEach(((t4) => { r3.push({ s: i3, edge: t4 }); })); } if (r3 = r3.filter(((t3) => !(t3.edge.ymax <= i3))), r3.sort(((t3, e2) => t3.edge.x === e2.edge.x ? 0 : (t3.edge.x - e2.edge.x) / Math.abs(t3.edge.x - e2.edge.x))), (1 !== n3 || c3 % s3 == 0) && r3.length > 1) for (let t3 = 0; t3 < r3.length; t3 += 2) { const e2 = t3 + 1; if (e2 >= r3.length) break; const s4 = r3[t3].edge, n4 = r3[e2].edge; a3.push([[Math.round(s4.x), i3], [Math.round(n4.x), i3]]); } i3 += n3, r3.forEach(((t3) => { t3.edge.x = t3.edge.x + n3 * t3.edge.islope; })), c3++; } return a3; })(i2, r2, a2); if (h2) { for (const e2 of i2) t(e2, c2, -h2); !(function(e2, s3, n3) { const o3 = []; e2.forEach(((t2) => o3.push(...t2))), t(o3, s3, n3); })(l2, c2, -h2); } return l2; } function n(t2, e2) { var n2; const o2 = e2.hachureAngle + 90; let a2 = e2.hachureGap; a2 < 0 && (a2 = 4 * e2.strokeWidth), a2 = Math.round(Math.max(a2, 0.1)); let h2 = 1; return e2.roughness >= 1 && ((null === (n2 = e2.randomizer) || void 0 === n2 ? void 0 : n2.next()) || Math.random()) > 0.7 && (h2 = a2), s(t2, a2, o2, h2 || 1); } var o = class { constructor(t2) { this.helper = t2; } fillPolygons(t2, e2) { return this._fillPolygons(t2, e2); } _fillPolygons(t2, e2) { const s2 = n(t2, e2); return { type: "fillSketch", ops: this.renderLines(s2, e2) }; } renderLines(t2, e2) { const s2 = []; for (const n2 of t2) s2.push(...this.helper.doubleLineOps(n2[0][0], n2[0][1], n2[1][0], n2[1][1], e2)); return s2; } }; function a(t2) { const e2 = t2[0], s2 = t2[1]; return Math.sqrt(Math.pow(e2[0] - s2[0], 2) + Math.pow(e2[1] - s2[1], 2)); } var h = class extends o { fillPolygons(t2, e2) { let s2 = e2.hachureGap; s2 < 0 && (s2 = 4 * e2.strokeWidth), s2 = Math.max(s2, 0.1); const o2 = n(t2, Object.assign({}, e2, { hachureGap: s2 })), h2 = Math.PI / 180 * e2.hachureAngle, r2 = [], i2 = 0.5 * s2 * Math.cos(h2), c2 = 0.5 * s2 * Math.sin(h2); for (const [t3, e3] of o2) a([t3, e3]) && r2.push([[t3[0] - i2, t3[1] + c2], [...e3]], [[t3[0] + i2, t3[1] - c2], [...e3]]); return { type: "fillSketch", ops: this.renderLines(r2, e2) }; } }; var r = class extends o { fillPolygons(t2, e2) { const s2 = this._fillPolygons(t2, e2), n2 = Object.assign({}, e2, { hachureAngle: e2.hachureAngle + 90 }), o2 = this._fillPolygons(t2, n2); return s2.ops = s2.ops.concat(o2.ops), s2; } }; var i = class { constructor(t2) { this.helper = t2; } fillPolygons(t2, e2) { const s2 = n(t2, e2 = Object.assign({}, e2, { hachureAngle: 0 })); return this.dotsOnLines(s2, e2); } dotsOnLines(t2, e2) { const s2 = []; let n2 = e2.hachureGap; n2 < 0 && (n2 = 4 * e2.strokeWidth), n2 = Math.max(n2, 0.1); let o2 = e2.fillWeight; o2 < 0 && (o2 = e2.strokeWidth / 2); const h2 = n2 / 4; for (const r2 of t2) { const t3 = a(r2), i2 = t3 / n2, c2 = Math.ceil(i2) - 1, l2 = t3 - c2 * n2, u2 = (r2[0][0] + r2[1][0]) / 2 - n2 / 4, p2 = Math.min(r2[0][1], r2[1][1]); for (let t4 = 0; t4 < c2; t4++) { const a2 = p2 + l2 + t4 * n2, r3 = u2 - h2 + 2 * Math.random() * h2, i3 = a2 - h2 + 2 * Math.random() * h2, c3 = this.helper.ellipse(r3, i3, o2, o2, e2); s2.push(...c3.ops); } } return { type: "fillSketch", ops: s2 }; } }; var c = class { constructor(t2) { this.helper = t2; } fillPolygons(t2, e2) { const s2 = n(t2, e2); return { type: "fillSketch", ops: this.dashedLine(s2, e2) }; } dashedLine(t2, e2) { const s2 = e2.dashOffset < 0 ? e2.hachureGap < 0 ? 4 * e2.strokeWidth : e2.hachureGap : e2.dashOffset, n2 = e2.dashGap < 0 ? e2.hachureGap < 0 ? 4 * e2.strokeWidth : e2.hachureGap : e2.dashGap, o2 = []; return t2.forEach(((t3) => { const h2 = a(t3), r2 = Math.floor(h2 / (s2 + n2)), i2 = (h2 + n2 - r2 * (s2 + n2)) / 2; let c2 = t3[0], l2 = t3[1]; c2[0] > l2[0] && (c2 = t3[1], l2 = t3[0]); const u2 = Math.atan((l2[1] - c2[1]) / (l2[0] - c2[0])); for (let t4 = 0; t4 < r2; t4++) { const a2 = t4 * (s2 + n2), h3 = a2 + s2, r3 = [c2[0] + a2 * Math.cos(u2) + i2 * Math.cos(u2), c2[1] + a2 * Math.sin(u2) + i2 * Math.sin(u2)], l3 = [c2[0] + h3 * Math.cos(u2) + i2 * Math.cos(u2), c2[1] + h3 * Math.sin(u2) + i2 * Math.sin(u2)]; o2.push(...this.helper.doubleLineOps(r3[0], r3[1], l3[0], l3[1], e2)); } })), o2; } }; var l = class { constructor(t2) { this.helper = t2; } fillPolygons(t2, e2) { const s2 = e2.hachureGap < 0 ? 4 * e2.strokeWidth : e2.hachureGap, o2 = e2.zigzagOffset < 0 ? s2 : e2.zigzagOffset, a2 = n(t2, e2 = Object.assign({}, e2, { hachureGap: s2 + o2 })); return { type: "fillSketch", ops: this.zigzagLines(a2, o2, e2) }; } zigzagLines(t2, e2, s2) { const n2 = []; return t2.forEach(((t3) => { const o2 = a(t3), h2 = Math.round(o2 / (2 * e2)); let r2 = t3[0], i2 = t3[1]; r2[0] > i2[0] && (r2 = t3[1], i2 = t3[0]); const c2 = Math.atan((i2[1] - r2[1]) / (i2[0] - r2[0])); for (let t4 = 0; t4 < h2; t4++) { const o3 = 2 * t4 * e2, a2 = 2 * (t4 + 1) * e2, h3 = Math.sqrt(2 * Math.pow(e2, 2)), i3 = [r2[0] + o3 * Math.cos(c2), r2[1] + o3 * Math.sin(c2)], l2 = [r2[0] + a2 * Math.cos(c2), r2[1] + a2 * Math.sin(c2)], u2 = [i3[0] + h3 * Math.cos(c2 + Math.PI / 4), i3[1] + h3 * Math.sin(c2 + Math.PI / 4)]; n2.push(...this.helper.doubleLineOps(i3[0], i3[1], u2[0], u2[1], s2), ...this.helper.doubleLineOps(u2[0], u2[1], l2[0], l2[1], s2)); } })), n2; } }; var u = {}; var p = class { constructor(t2) { this.seed = t2; } next() { return this.seed ? (2 ** 31 - 1 & (this.seed = Math.imul(48271, this.seed))) / 2 ** 31 : Math.random(); } }; var f = 0; var d = 1; var g = 2; var M = { A: 7, a: 7, C: 6, c: 6, H: 1, h: 1, L: 2, l: 2, M: 2, m: 2, Q: 4, q: 4, S: 4, s: 4, T: 2, t: 2, V: 1, v: 1, Z: 0, z: 0 }; function k(t2, e2) { return t2.type === e2; } function b(t2) { const e2 = [], s2 = (function(t3) { const e3 = new Array(); for (; "" !== t3; ) if (t3.match(/^([ \t\r\n,]+)/)) t3 = t3.substr(RegExp.$1.length); else if (t3.match(/^([aAcChHlLmMqQsStTvVzZ])/)) e3[e3.length] = { type: f, text: RegExp.$1 }, t3 = t3.substr(RegExp.$1.length); else { if (!t3.match(/^(([-+]?[0-9]+(\.[0-9]*)?|[-+]?\.[0-9]+)([eE][-+]?[0-9]+)?)/)) return []; e3[e3.length] = { type: d, text: `${parseFloat(RegExp.$1)}` }, t3 = t3.substr(RegExp.$1.length); } return e3[e3.length] = { type: g, text: "" }, e3; })(t2); let n2 = "BOD", o2 = 0, a2 = s2[o2]; for (; !k(a2, g); ) { let h2 = 0; const r2 = []; if ("BOD" === n2) { if ("M" !== a2.text && "m" !== a2.text) return b("M0,0" + t2); o2++, h2 = M[a2.text], n2 = a2.text; } else k(a2, d) ? h2 = M[n2] : (o2++, h2 = M[a2.text], n2 = a2.text); if (!(o2 + h2 < s2.length)) throw new Error("Path data ended short"); for (let t3 = o2; t3 < o2 + h2; t3++) { const e3 = s2[t3]; if (!k(e3, d)) throw new Error("Param not a number: " + n2 + "," + e3.text); r2[r2.length] = +e3.text; } if ("number" != typeof M[n2]) throw new Error("Bad segment: " + n2); { const t3 = { key: n2, data: r2 }; e2.push(t3), o2 += h2, a2 = s2[o2], "M" === n2 && (n2 = "L"), "m" === n2 && (n2 = "l"); } } return e2; } function y(t2) { let e2 = 0, s2 = 0, n2 = 0, o2 = 0; const a2 = []; for (const { key: h2, data: r2 } of t2) switch (h2) { case "M": a2.push({ key: "M", data: [...r2] }), [e2, s2] = r2, [n2, o2] = r2; break; case "m": e2 += r2[0], s2 += r2[1], a2.push({ key: "M", data: [e2, s2] }), n2 = e2, o2 = s2; break; case "L": a2.push({ key: "L", data: [...r2] }), [e2, s2] = r2; break; case "l": e2 += r2[0], s2 += r2[1], a2.push({ key: "L", data: [e2, s2] }); break; case "C": a2.push({ key: "C", data: [...r2] }), e2 = r2[4], s2 = r2[5]; break; case "c": { const t3 = r2.map(((t4, n3) => n3 % 2 ? t4 + s2 : t4 + e2)); a2.push({ key: "C", data: t3 }), e2 = t3[4], s2 = t3[5]; break; } case "Q": a2.push({ key: "Q", data: [...r2] }), e2 = r2[2], s2 = r2[3]; break; case "q": { const t3 = r2.map(((t4, n3) => n3 % 2 ? t4 + s2 : t4 + e2)); a2.push({ key: "Q", data: t3 }), e2 = t3[2], s2 = t3[3]; break; } case "A": a2.push({ key: "A", data: [...r2] }), e2 = r2[5], s2 = r2[6]; break; case "a": e2 += r2[5], s2 += r2[6], a2.push({ key: "A", data: [r2[0], r2[1], r2[2], r2[3], r2[4], e2, s2] }); break; case "H": a2.push({ key: "H", data: [...r2] }), e2 = r2[0]; break; case "h": e2 += r2[0], a2.push({ key: "H", data: [e2] }); break; case "V": a2.push({ key: "V", data: [...r2] }), s2 = r2[0]; break; case "v": s2 += r2[0], a2.push({ key: "V", data: [s2] }); break; case "S": a2.push({ key: "S", data: [...r2] }), e2 = r2[2], s2 = r2[3]; break; case "s": { const t3 = r2.map(((t4, n3) => n3 % 2 ? t4 + s2 : t4 + e2)); a2.push({ key: "S", data: t3 }), e2 = t3[2], s2 = t3[3]; break; } case "T": a2.push({ key: "T", data: [...r2] }), e2 = r2[0], s2 = r2[1]; break; case "t": e2 += r2[0], s2 += r2[1], a2.push({ key: "T", data: [e2, s2] }); break; case "Z": case "z": a2.push({ key: "Z", data: [] }), e2 = n2, s2 = o2; } return a2; } function m(t2) { const e2 = []; let s2 = "", n2 = 0, o2 = 0, a2 = 0, h2 = 0, r2 = 0, i2 = 0; for (const { key: c2, data: l2 } of t2) { switch (c2) { case "M": e2.push({ key: "M", data: [...l2] }), [n2, o2] = l2, [a2, h2] = l2; break; case "C": e2.push({ key: "C", data: [...l2] }), n2 = l2[4], o2 = l2[5], r2 = l2[2], i2 = l2[3]; break; case "L": e2.push({ key: "L", data: [...l2] }), [n2, o2] = l2; break; case "H": n2 = l2[0], e2.push({ key: "L", data: [n2, o2] }); break; case "V": o2 = l2[0], e2.push({ key: "L", data: [n2, o2] }); break; case "S": { let t3 = 0, a3 = 0; "C" === s2 || "S" === s2 ? (t3 = n2 + (n2 - r2), a3 = o2 + (o2 - i2)) : (t3 = n2, a3 = o2), e2.push({ key: "C", data: [t3, a3, ...l2] }), r2 = l2[0], i2 = l2[1], n2 = l2[2], o2 = l2[3]; break; } case "T": { const [t3, a3] = l2; let h3 = 0, c3 = 0; "Q" === s2 || "T" === s2 ? (h3 = n2 + (n2 - r2), c3 = o2 + (o2 - i2)) : (h3 = n2, c3 = o2); const u2 = n2 + 2 * (h3 - n2) / 3, p2 = o2 + 2 * (c3 - o2) / 3, f2 = t3 + 2 * (h3 - t3) / 3, d2 = a3 + 2 * (c3 - a3) / 3; e2.push({ key: "C", data: [u2, p2, f2, d2, t3, a3] }), r2 = h3, i2 = c3, n2 = t3, o2 = a3; break; } case "Q": { const [t3, s3, a3, h3] = l2, c3 = n2 + 2 * (t3 - n2) / 3, u2 = o2 + 2 * (s3 - o2) / 3, p2 = a3 + 2 * (t3 - a3) / 3, f2 = h3 + 2 * (s3 - h3) / 3; e2.push({ key: "C", data: [c3, u2, p2, f2, a3, h3] }), r2 = t3, i2 = s3, n2 = a3, o2 = h3; break; } case "A": { const t3 = Math.abs(l2[0]), s3 = Math.abs(l2[1]), a3 = l2[2], h3 = l2[3], r3 = l2[4], i3 = l2[5], c3 = l2[6]; if (0 === t3 || 0 === s3) e2.push({ key: "C", data: [n2, o2, i3, c3, i3, c3] }), n2 = i3, o2 = c3; else if (n2 !== i3 || o2 !== c3) { x(n2, o2, i3, c3, t3, s3, a3, h3, r3).forEach((function(t4) { e2.push({ key: "C", data: t4 }); })), n2 = i3, o2 = c3; } break; } case "Z": e2.push({ key: "Z", data: [] }), n2 = a2, o2 = h2; } s2 = c2; } return e2; } function w(t2, e2, s2) { return [t2 * Math.cos(s2) - e2 * Math.sin(s2), t2 * Math.sin(s2) + e2 * Math.cos(s2)]; } function x(t2, e2, s2, n2, o2, a2, h2, r2, i2, c2) { const l2 = (u2 = h2, Math.PI * u2 / 180); var u2; let p2 = [], f2 = 0, d2 = 0, g2 = 0, M2 = 0; if (c2) [f2, d2, g2, M2] = c2; else { [t2, e2] = w(t2, e2, -l2), [s2, n2] = w(s2, n2, -l2); const h3 = (t2 - s2) / 2, c3 = (e2 - n2) / 2; let u3 = h3 * h3 / (o2 * o2) + c3 * c3 / (a2 * a2); u3 > 1 && (u3 = Math.sqrt(u3), o2 *= u3, a2 *= u3); const p3 = o2 * o2, k3 = a2 * a2, b3 = p3 * k3 - p3 * c3 * c3 - k3 * h3 * h3, y3 = p3 * c3 * c3 + k3 * h3 * h3, m3 = (r2 === i2 ? -1 : 1) * Math.sqrt(Math.abs(b3 / y3)); g2 = m3 * o2 * c3 / a2 + (t2 + s2) / 2, M2 = m3 * -a2 * h3 / o2 + (e2 + n2) / 2, f2 = Math.asin(parseFloat(((e2 - M2) / a2).toFixed(9))), d2 = Math.asin(parseFloat(((n2 - M2) / a2).toFixed(9))), t2 < g2 && (f2 = Math.PI - f2), s2 < g2 && (d2 = Math.PI - d2), f2 < 0 && (f2 = 2 * Math.PI + f2), d2 < 0 && (d2 = 2 * Math.PI + d2), i2 && f2 > d2 && (f2 -= 2 * Math.PI), !i2 && d2 > f2 && (d2 -= 2 * Math.PI); } let k2 = d2 - f2; if (Math.abs(k2) > 120 * Math.PI / 180) { const t3 = d2, e3 = s2, r3 = n2; d2 = i2 && d2 > f2 ? f2 + 120 * Math.PI / 180 * 1 : f2 + 120 * Math.PI / 180 * -1, p2 = x(s2 = g2 + o2 * Math.cos(d2), n2 = M2 + a2 * Math.sin(d2), e3, r3, o2, a2, h2, 0, i2, [d2, t3, g2, M2]); } k2 = d2 - f2; const b2 = Math.cos(f2), y2 = Math.sin(f2), m2 = Math.cos(d2), P2 = Math.sin(d2), v2 = Math.tan(k2 / 4), S2 = 4 / 3 * o2 * v2, O2 = 4 / 3 * a2 * v2, L2 = [t2, e2], T2 = [t2 + S2 * y2, e2 - O2 * b2], D2 = [s2 + S2 * P2, n2 - O2 * m2], A2 = [s2, n2]; if (T2[0] = 2 * L2[0] - T2[0], T2[1] = 2 * L2[1] - T2[1], c2) return [T2, D2, A2].concat(p2); { p2 = [T2, D2, A2].concat(p2); const t3 = []; for (let e3 = 0; e3 < p2.length; e3 += 3) { const s3 = w(p2[e3][0], p2[e3][1], l2), n3 = w(p2[e3 + 1][0], p2[e3 + 1][1], l2), o3 = w(p2[e3 + 2][0], p2[e3 + 2][1], l2); t3.push([s3[0], s3[1], n3[0], n3[1], o3[0], o3[1]]); } return t3; } } var P = { randOffset: function(t2, e2) { return G(t2, e2); }, randOffsetWithRange: function(t2, e2, s2) { return E(t2, e2, s2); }, ellipse: function(t2, e2, s2, n2, o2) { const a2 = T(s2, n2, o2); return D(t2, e2, o2, a2).opset; }, doubleLineOps: function(t2, e2, s2, n2, o2) { return $(t2, e2, s2, n2, o2, true); } }; function v(t2, e2, s2, n2, o2) { return { type: "path", ops: $(t2, e2, s2, n2, o2) }; } function S(t2, e2, s2) { const n2 = (t2 || []).length; if (n2 > 2) { const o2 = []; for (let e3 = 0; e3 < n2 - 1; e3++) o2.push(...$(t2[e3][0], t2[e3][1], t2[e3 + 1][0], t2[e3 + 1][1], s2)); return e2 && o2.push(...$(t2[n2 - 1][0], t2[n2 - 1][1], t2[0][0], t2[0][1], s2)), { type: "path", ops: o2 }; } return 2 === n2 ? v(t2[0][0], t2[0][1], t2[1][0], t2[1][1], s2) : { type: "path", ops: [] }; } function O(t2, e2, s2, n2, o2) { return (function(t3, e3) { return S(t3, true, e3); })([[t2, e2], [t2 + s2, e2], [t2 + s2, e2 + n2], [t2, e2 + n2]], o2); } function L(t2, e2) { if (t2.length) { const s2 = "number" == typeof t2[0][0] ? [t2] : t2, n2 = j(s2[0], 1 * (1 + 0.2 * e2.roughness), e2), o2 = e2.disableMultiStroke ? [] : j(s2[0], 1.5 * (1 + 0.22 * e2.roughness), z(e2)); for (let t3 = 1; t3 < s2.length; t3++) { const a2 = s2[t3]; if (a2.length) { const t4 = j(a2, 1 * (1 + 0.2 * e2.roughness), e2), s3 = e2.disableMultiStroke ? [] : j(a2, 1.5 * (1 + 0.22 * e2.roughness), z(e2)); for (const e3 of t4) "move" !== e3.op && n2.push(e3); for (const t5 of s3) "move" !== t5.op && o2.push(t5); } } return { type: "path", ops: n2.concat(o2) }; } return { type: "path", ops: [] }; } function T(t2, e2, s2) { const n2 = Math.sqrt(2 * Math.PI * Math.sqrt((Math.pow(t2 / 2, 2) + Math.pow(e2 / 2, 2)) / 2)), o2 = Math.ceil(Math.max(s2.curveStepCount, s2.curveStepCount / Math.sqrt(200) * n2)), a2 = 2 * Math.PI / o2; let h2 = Math.abs(t2 / 2), r2 = Math.abs(e2 / 2); const i2 = 1 - s2.curveFitting; return h2 += G(h2 * i2, s2), r2 += G(r2 * i2, s2), { increment: a2, rx: h2, ry: r2 }; } function D(t2, e2, s2, n2) { const [o2, a2] = F(n2.increment, t2, e2, n2.rx, n2.ry, 1, n2.increment * E(0.1, E(0.4, 1, s2), s2), s2); let h2 = q(o2, null, s2); if (!s2.disableMultiStroke && 0 !== s2.roughness) { const [o3] = F(n2.increment, t2, e2, n2.rx, n2.ry, 1.5, 0, s2), a3 = q(o3, null, s2); h2 = h2.concat(a3); } return { estimatedPoints: a2, opset: { type: "path", ops: h2 } }; } function A(t2, e2, s2, n2, o2, a2, h2, r2, i2) { const c2 = t2, l2 = e2; let u2 = Math.abs(s2 / 2), p2 = Math.abs(n2 / 2); u2 += G(0.01 * u2, i2), p2 += G(0.01 * p2, i2); let f2 = o2, d2 = a2; for (; f2 < 0; ) f2 += 2 * Math.PI, d2 += 2 * Math.PI; d2 - f2 > 2 * Math.PI && (f2 = 0, d2 = 2 * Math.PI); const g2 = 2 * Math.PI / i2.curveStepCount, M2 = Math.min(g2 / 2, (d2 - f2) / 2), k2 = V(M2, c2, l2, u2, p2, f2, d2, 1, i2); if (!i2.disableMultiStroke) { const t3 = V(M2, c2, l2, u2, p2, f2, d2, 1.5, i2); k2.push(...t3); } return h2 && (r2 ? k2.push(...$(c2, l2, c2 + u2 * Math.cos(f2), l2 + p2 * Math.sin(f2), i2), ...$(c2, l2, c2 + u2 * Math.cos(d2), l2 + p2 * Math.sin(d2), i2)) : k2.push({ op: "lineTo", data: [c2, l2] }, { op: "lineTo", data: [c2 + u2 * Math.cos(f2), l2 + p2 * Math.sin(f2)] })), { type: "path", ops: k2 }; } function _(t2, e2) { const s2 = m(y(b(t2))), n2 = []; let o2 = [0, 0], a2 = [0, 0]; for (const { key: t3, data: h2 } of s2) switch (t3) { case "M": a2 = [h2[0], h2[1]], o2 = [h2[0], h2[1]]; break; case "L": n2.push(...$(a2[0], a2[1], h2[0], h2[1], e2)), a2 = [h2[0], h2[1]]; break; case "C": { const [t4, s3, o3, r2, i2, c2] = h2; n2.push(...Z(t4, s3, o3, r2, i2, c2, a2, e2)), a2 = [i2, c2]; break; } case "Z": n2.push(...$(a2[0], a2[1], o2[0], o2[1], e2)), a2 = [o2[0], o2[1]]; } return { type: "path", ops: n2 }; } function I(t2, e2) { const s2 = []; for (const n2 of t2) if (n2.length) { const t3 = e2.maxRandomnessOffset || 0, o2 = n2.length; if (o2 > 2) { s2.push({ op: "move", data: [n2[0][0] + G(t3, e2), n2[0][1] + G(t3, e2)] }); for (let a2 = 1; a2 < o2; a2++) s2.push({ op: "lineTo", data: [n2[a2][0] + G(t3, e2), n2[a2][1] + G(t3, e2)] }); } } return { type: "fillPath", ops: s2 }; } function C(t2, e2) { return (function(t3, e3) { let s2 = t3.fillStyle || "hachure"; if (!u[s2]) switch (s2) { case "zigzag": u[s2] || (u[s2] = new h(e3)); break; case "cross-hatch": u[s2] || (u[s2] = new r(e3)); break; case "dots": u[s2] || (u[s2] = new i(e3)); break; case "dashed": u[s2] || (u[s2] = new c(e3)); break; case "zigzag-line": u[s2] || (u[s2] = new l(e3)); break; default: s2 = "hachure", u[s2] || (u[s2] = new o(e3)); } return u[s2]; })(e2, P).fillPolygons(t2, e2); } function z(t2) { const e2 = Object.assign({}, t2); return e2.randomizer = void 0, t2.seed && (e2.seed = t2.seed + 1), e2; } function W(t2) { return t2.randomizer || (t2.randomizer = new p(t2.seed || 0)), t2.randomizer.next(); } function E(t2, e2, s2, n2 = 1) { return s2.roughness * n2 * (W(s2) * (e2 - t2) + t2); } function G(t2, e2, s2 = 1) { return E(-t2, t2, e2, s2); } function $(t2, e2, s2, n2, o2, a2 = false) { const h2 = a2 ? o2.disableMultiStrokeFill : o2.disableMultiStroke, r2 = R(t2, e2, s2, n2, o2, true, false); if (h2) return r2; const i2 = R(t2, e2, s2, n2, o2, true, true); return r2.concat(i2); } function R(t2, e2, s2, n2, o2, a2, h2) { const r2 = Math.pow(t2 - s2, 2) + Math.pow(e2 - n2, 2), i2 = Math.sqrt(r2); let c2 = 1; c2 = i2 < 200 ? 1 : i2 > 500 ? 0.4 : -16668e-7 * i2 + 1.233334; let l2 = o2.maxRandomnessOffset || 0; l2 * l2 * 100 > r2 && (l2 = i2 / 10); const u2 = l2 / 2, p2 = 0.2 + 0.2 * W(o2); let f2 = o2.bowing * o2.maxRandomnessOffset * (n2 - e2) / 200, d2 = o2.bowing * o2.maxRandomnessOffset * (t2 - s2) / 200; f2 = G(f2, o2, c2), d2 = G(d2, o2, c2); const g2 = [], M2 = () => G(u2, o2, c2), k2 = () => G(l2, o2, c2), b2 = o2.preserveVertices; return a2 && (h2 ? g2.push({ op: "move", data: [t2 + (b2 ? 0 : M2()), e2 + (b2 ? 0 : M2())] }) : g2.push({ op: "move", data: [t2 + (b2 ? 0 : G(l2, o2, c2)), e2 + (b2 ? 0 : G(l2, o2, c2))] })), h2 ? g2.push({ op: "bcurveTo", data: [f2 + t2 + (s2 - t2) * p2 + M2(), d2 + e2 + (n2 - e2) * p2 + M2(), f2 + t2 + 2 * (s2 - t2) * p2 + M2(), d2 + e2 + 2 * (n2 - e2) * p2 + M2(), s2 + (b2 ? 0 : M2()), n2 + (b2 ? 0 : M2())] }) : g2.push({ op: "bcurveTo", data: [f2 + t2 + (s2 - t2) * p2 + k2(), d2 + e2 + (n2 - e2) * p2 + k2(), f2 + t2 + 2 * (s2 - t2) * p2 + k2(), d2 + e2 + 2 * (n2 - e2) * p2 + k2(), s2 + (b2 ? 0 : k2()), n2 + (b2 ? 0 : k2())] }), g2; } function j(t2, e2, s2) { if (!t2.length) return []; const n2 = []; n2.push([t2[0][0] + G(e2, s2), t2[0][1] + G(e2, s2)]), n2.push([t2[0][0] + G(e2, s2), t2[0][1] + G(e2, s2)]); for (let o2 = 1; o2 < t2.length; o2++) n2.push([t2[o2][0] + G(e2, s2), t2[o2][1] + G(e2, s2)]), o2 === t2.length - 1 && n2.push([t2[o2][0] + G(e2, s2), t2[o2][1] + G(e2, s2)]); return q(n2, null, s2); } function q(t2, e2, s2) { const n2 = t2.length, o2 = []; if (n2 > 3) { const a2 = [], h2 = 1 - s2.curveTightness; o2.push({ op: "move", data: [t2[1][0], t2[1][1]] }); for (let e3 = 1; e3 + 2 < n2; e3++) { const s3 = t2[e3]; a2[0] = [s3[0], s3[1]], a2[1] = [s3[0] + (h2 * t2[e3 + 1][0] - h2 * t2[e3 - 1][0]) / 6, s3[1] + (h2 * t2[e3 + 1][1] - h2 * t2[e3 - 1][1]) / 6], a2[2] = [t2[e3 + 1][0] + (h2 * t2[e3][0] - h2 * t2[e3 + 2][0]) / 6, t2[e3 + 1][1] + (h2 * t2[e3][1] - h2 * t2[e3 + 2][1]) / 6], a2[3] = [t2[e3 + 1][0], t2[e3 + 1][1]], o2.push({ op: "bcurveTo", data: [a2[1][0], a2[1][1], a2[2][0], a2[2][1], a2[3][0], a2[3][1]] }); } if (e2 && 2 === e2.length) { const t3 = s2.maxRandomnessOffset; o2.push({ op: "lineTo", data: [e2[0] + G(t3, s2), e2[1] + G(t3, s2)] }); } } else 3 === n2 ? (o2.push({ op: "move", data: [t2[1][0], t2[1][1]] }), o2.push({ op: "bcurveTo", data: [t2[1][0], t2[1][1], t2[2][0], t2[2][1], t2[2][0], t2[2][1]] })) : 2 === n2 && o2.push(...R(t2[0][0], t2[0][1], t2[1][0], t2[1][1], s2, true, true)); return o2; } function F(t2, e2, s2, n2, o2, a2, h2, r2) { const i2 = [], c2 = []; if (0 === r2.roughness) { t2 /= 4, c2.push([e2 + n2 * Math.cos(-t2), s2 + o2 * Math.sin(-t2)]); for (let a3 = 0; a3 <= 2 * Math.PI; a3 += t2) { const t3 = [e2 + n2 * Math.cos(a3), s2 + o2 * Math.sin(a3)]; i2.push(t3), c2.push(t3); } c2.push([e2 + n2 * Math.cos(0), s2 + o2 * Math.sin(0)]), c2.push([e2 + n2 * Math.cos(t2), s2 + o2 * Math.sin(t2)]); } else { const l2 = G(0.5, r2) - Math.PI / 2; c2.push([G(a2, r2) + e2 + 0.9 * n2 * Math.cos(l2 - t2), G(a2, r2) + s2 + 0.9 * o2 * Math.sin(l2 - t2)]); const u2 = 2 * Math.PI + l2 - 0.01; for (let h3 = l2; h3 < u2; h3 += t2) { const t3 = [G(a2, r2) + e2 + n2 * Math.cos(h3), G(a2, r2) + s2 + o2 * Math.sin(h3)]; i2.push(t3), c2.push(t3); } c2.push([G(a2, r2) + e2 + n2 * Math.cos(l2 + 2 * Math.PI + 0.5 * h2), G(a2, r2) + s2 + o2 * Math.sin(l2 + 2 * Math.PI + 0.5 * h2)]), c2.push([G(a2, r2) + e2 + 0.98 * n2 * Math.cos(l2 + h2), G(a2, r2) + s2 + 0.98 * o2 * Math.sin(l2 + h2)]), c2.push([G(a2, r2) + e2 + 0.9 * n2 * Math.cos(l2 + 0.5 * h2), G(a2, r2) + s2 + 0.9 * o2 * Math.sin(l2 + 0.5 * h2)]); } return [c2, i2]; } function V(t2, e2, s2, n2, o2, a2, h2, r2, i2) { const c2 = a2 + G(0.1, i2), l2 = []; l2.push([G(r2, i2) + e2 + 0.9 * n2 * Math.cos(c2 - t2), G(r2, i2) + s2 + 0.9 * o2 * Math.sin(c2 - t2)]); for (let a3 = c2; a3 <= h2; a3 += t2) l2.push([G(r2, i2) + e2 + n2 * Math.cos(a3), G(r2, i2) + s2 + o2 * Math.sin(a3)]); return l2.push([e2 + n2 * Math.cos(h2), s2 + o2 * Math.sin(h2)]), l2.push([e2 + n2 * Math.cos(h2), s2 + o2 * Math.sin(h2)]), q(l2, null, i2); } function Z(t2, e2, s2, n2, o2, a2, h2, r2) { const i2 = [], c2 = [r2.maxRandomnessOffset || 1, (r2.maxRandomnessOffset || 1) + 0.3]; let l2 = [0, 0]; const u2 = r2.disableMultiStroke ? 1 : 2, p2 = r2.preserveVertices; for (let f2 = 0; f2 < u2; f2++) 0 === f2 ? i2.push({ op: "move", data: [h2[0], h2[1]] }) : i2.push({ op: "move", data: [h2[0] + (p2 ? 0 : G(c2[0], r2)), h2[1] + (p2 ? 0 : G(c2[0], r2))] }), l2 = p2 ? [o2, a2] : [o2 + G(c2[f2], r2), a2 + G(c2[f2], r2)], i2.push({ op: "bcurveTo", data: [t2 + G(c2[f2], r2), e2 + G(c2[f2], r2), s2 + G(c2[f2], r2), n2 + G(c2[f2], r2), l2[0], l2[1]] }); return i2; } function Q(t2) { return [...t2]; } function H(t2, e2 = 0) { const s2 = t2.length; if (s2 < 3) throw new Error("A curve must have at least three points."); const n2 = []; if (3 === s2) n2.push(Q(t2[0]), Q(t2[1]), Q(t2[2]), Q(t2[2])); else { const s3 = []; s3.push(t2[0], t2[0]); for (let e3 = 1; e3 < t2.length; e3++) s3.push(t2[e3]), e3 === t2.length - 1 && s3.push(t2[e3]); const o2 = [], a2 = 1 - e2; n2.push(Q(s3[0])); for (let t3 = 1; t3 + 2 < s3.length; t3++) { const e3 = s3[t3]; o2[0] = [e3[0], e3[1]], o2[1] = [e3[0] + (a2 * s3[t3 + 1][0] - a2 * s3[t3 - 1][0]) / 6, e3[1] + (a2 * s3[t3 + 1][1] - a2 * s3[t3 - 1][1]) / 6], o2[2] = [s3[t3 + 1][0] + (a2 * s3[t3][0] - a2 * s3[t3 + 2][0]) / 6, s3[t3 + 1][1] + (a2 * s3[t3][1] - a2 * s3[t3 + 2][1]) / 6], o2[3] = [s3[t3 + 1][0], s3[t3 + 1][1]], n2.push(o2[1], o2[2], o2[3]); } } return n2; } function N(t2, e2) { return Math.pow(t2[0] - e2[0], 2) + Math.pow(t2[1] - e2[1], 2); } function B(t2, e2, s2) { const n2 = N(e2, s2); if (0 === n2) return N(t2, e2); let o2 = ((t2[0] - e2[0]) * (s2[0] - e2[0]) + (t2[1] - e2[1]) * (s2[1] - e2[1])) / n2; return o2 = Math.max(0, Math.min(1, o2)), N(t2, J(e2, s2, o2)); } function J(t2, e2, s2) { return [t2[0] + (e2[0] - t2[0]) * s2, t2[1] + (e2[1] - t2[1]) * s2]; } function K(t2, e2, s2, n2) { const o2 = n2 || []; if ((function(t3, e3) { const s3 = t3[e3 + 0], n3 = t3[e3 + 1], o3 = t3[e3 + 2], a3 = t3[e3 + 3]; let h3 = 3 * n3[0] - 2 * s3[0] - a3[0]; h3 *= h3; let r2 = 3 * n3[1] - 2 * s3[1] - a3[1]; r2 *= r2; let i2 = 3 * o3[0] - 2 * a3[0] - s3[0]; i2 *= i2; let c2 = 3 * o3[1] - 2 * a3[1] - s3[1]; return c2 *= c2, h3 < i2 && (h3 = i2), r2 < c2 && (r2 = c2), h3 + r2; })(t2, e2) < s2) { const s3 = t2[e2 + 0]; if (o2.length) { (a2 = o2[o2.length - 1], h2 = s3, Math.sqrt(N(a2, h2))) > 1 && o2.push(s3); } else o2.push(s3); o2.push(t2[e2 + 3]); } else { const n3 = 0.5, a3 = t2[e2 + 0], h3 = t2[e2 + 1], r2 = t2[e2 + 2], i2 = t2[e2 + 3], c2 = J(a3, h3, n3), l2 = J(h3, r2, n3), u2 = J(r2, i2, n3), p2 = J(c2, l2, n3), f2 = J(l2, u2, n3), d2 = J(p2, f2, n3); K([a3, c2, p2, d2], 0, s2, o2), K([d2, f2, u2, i2], 0, s2, o2); } var a2, h2; return o2; } function U(t2, e2) { return X(t2, 0, t2.length, e2); } function X(t2, e2, s2, n2, o2) { const a2 = o2 || [], h2 = t2[e2], r2 = t2[s2 - 1]; let i2 = 0, c2 = 1; for (let n3 = e2 + 1; n3 < s2 - 1; ++n3) { const e3 = B(t2[n3], h2, r2); e3 > i2 && (i2 = e3, c2 = n3); } return Math.sqrt(i2) > n2 ? (X(t2, e2, c2 + 1, n2, a2), X(t2, c2, s2, n2, a2)) : (a2.length || a2.push(h2), a2.push(r2)), a2; } function Y(t2, e2 = 0.15, s2) { const n2 = [], o2 = (t2.length - 1) / 3; for (let s3 = 0; s3 < o2; s3++) { K(t2, 3 * s3, e2, n2); } return s2 && s2 > 0 ? X(n2, 0, n2.length, s2) : n2; } var tt = "none"; var et = class { constructor(t2) { this.defaultOptions = { maxRandomnessOffset: 2, roughness: 1, bowing: 1, stroke: "#000", strokeWidth: 1, curveTightness: 0, curveFitting: 0.95, curveStepCount: 9, fillStyle: "hachure", fillWeight: -1, hachureAngle: -41, hachureGap: -1, dashOffset: -1, dashGap: -1, zigzagOffset: -1, seed: 0, disableMultiStroke: false, disableMultiStrokeFill: false, preserveVertices: false, fillShapeRoughnessGain: 0.8 }, this.config = t2 || {}, this.config.options && (this.defaultOptions = this._o(this.config.options)); } static newSeed() { return Math.floor(Math.random() * 2 ** 31); } _o(t2) { return t2 ? Object.assign({}, this.defaultOptions, t2) : this.defaultOptions; } _d(t2, e2, s2) { return { shape: t2, sets: e2 || [], options: s2 || this.defaultOptions }; } line(t2, e2, s2, n2, o2) { const a2 = this._o(o2); return this._d("line", [v(t2, e2, s2, n2, a2)], a2); } rectangle(t2, e2, s2, n2, o2) { const a2 = this._o(o2), h2 = [], r2 = O(t2, e2, s2, n2, a2); if (a2.fill) { const o3 = [[t2, e2], [t2 + s2, e2], [t2 + s2, e2 + n2], [t2, e2 + n2]]; "solid" === a2.fillStyle ? h2.push(I([o3], a2)) : h2.push(C([o3], a2)); } return a2.stroke !== tt && h2.push(r2), this._d("rectangle", h2, a2); } ellipse(t2, e2, s2, n2, o2) { const a2 = this._o(o2), h2 = [], r2 = T(s2, n2, a2), i2 = D(t2, e2, a2, r2); if (a2.fill) if ("solid" === a2.fillStyle) { const s3 = D(t2, e2, a2, r2).opset; s3.type = "fillPath", h2.push(s3); } else h2.push(C([i2.estimatedPoints], a2)); return a2.stroke !== tt && h2.push(i2.opset), this._d("ellipse", h2, a2); } circle(t2, e2, s2, n2) { const o2 = this.ellipse(t2, e2, s2, s2, n2); return o2.shape = "circle", o2; } linearPath(t2, e2) { const s2 = this._o(e2); return this._d("linearPath", [S(t2, false, s2)], s2); } arc(t2, e2, s2, n2, o2, a2, h2 = false, r2) { const i2 = this._o(r2), c2 = [], l2 = A(t2, e2, s2, n2, o2, a2, h2, true, i2); if (h2 && i2.fill) if ("solid" === i2.fillStyle) { const h3 = Object.assign({}, i2); h3.disableMultiStroke = true; const r3 = A(t2, e2, s2, n2, o2, a2, true, false, h3); r3.type = "fillPath", c2.push(r3); } else c2.push((function(t3, e3, s3, n3, o3, a3, h3) { const r3 = t3, i3 = e3; let c3 = Math.abs(s3 / 2), l3 = Math.abs(n3 / 2); c3 += G(0.01 * c3, h3), l3 += G(0.01 * l3, h3); let u2 = o3, p2 = a3; for (; u2 < 0; ) u2 += 2 * Math.PI, p2 += 2 * Math.PI; p2 - u2 > 2 * Math.PI && (u2 = 0, p2 = 2 * Math.PI); const f2 = (p2 - u2) / h3.curveStepCount, d2 = []; for (let t4 = u2; t4 <= p2; t4 += f2) d2.push([r3 + c3 * Math.cos(t4), i3 + l3 * Math.sin(t4)]); return d2.push([r3 + c3 * Math.cos(p2), i3 + l3 * Math.sin(p2)]), d2.push([r3, i3]), C([d2], h3); })(t2, e2, s2, n2, o2, a2, i2)); return i2.stroke !== tt && c2.push(l2), this._d("arc", c2, i2); } curve(t2, e2) { const s2 = this._o(e2), n2 = [], o2 = L(t2, s2); if (s2.fill && s2.fill !== tt) if ("solid" === s2.fillStyle) { const e3 = L(t2, Object.assign(Object.assign({}, s2), { disableMultiStroke: true, roughness: s2.roughness ? s2.roughness + s2.fillShapeRoughnessGain : 0 })); n2.push({ type: "fillPath", ops: this._mergedShape(e3.ops) }); } else { const e3 = [], o3 = t2; if (o3.length) { const t3 = "number" == typeof o3[0][0] ? [o3] : o3; for (const n3 of t3) n3.length < 3 ? e3.push(...n3) : 3 === n3.length ? e3.push(...Y(H([n3[0], n3[0], n3[1], n3[2]]), 10, (1 + s2.roughness) / 2)) : e3.push(...Y(H(n3), 10, (1 + s2.roughness) / 2)); } e3.length && n2.push(C([e3], s2)); } return s2.stroke !== tt && n2.push(o2), this._d("curve", n2, s2); } polygon(t2, e2) { const s2 = this._o(e2), n2 = [], o2 = S(t2, true, s2); return s2.fill && ("solid" === s2.fillStyle ? n2.push(I([t2], s2)) : n2.push(C([t2], s2))), s2.stroke !== tt && n2.push(o2), this._d("polygon", n2, s2); } path(t2, e2) { const s2 = this._o(e2), n2 = []; if (!t2) return this._d("path", n2, s2); t2 = (t2 || "").replace(/\n/g, " ").replace(/(-\s)/g, "-").replace("/(ss)/g", " "); const o2 = s2.fill && "transparent" !== s2.fill && s2.fill !== tt, a2 = s2.stroke !== tt, h2 = !!(s2.simplification && s2.simplification < 1), r2 = (function(t3, e3, s3) { const n3 = m(y(b(t3))), o3 = []; let a3 = [], h3 = [0, 0], r3 = []; const i3 = () => { r3.length >= 4 && a3.push(...Y(r3, e3)), r3 = []; }, c2 = () => { i3(), a3.length && (o3.push(a3), a3 = []); }; for (const { key: t4, data: e4 } of n3) switch (t4) { case "M": c2(), h3 = [e4[0], e4[1]], a3.push(h3); break; case "L": i3(), a3.push([e4[0], e4[1]]); break; case "C": if (!r3.length) { const t5 = a3.length ? a3[a3.length - 1] : h3; r3.push([t5[0], t5[1]]); } r3.push([e4[0], e4[1]]), r3.push([e4[2], e4[3]]), r3.push([e4[4], e4[5]]); break; case "Z": i3(), a3.push([h3[0], h3[1]]); } if (c2(), !s3) return o3; const l2 = []; for (const t4 of o3) { const e4 = U(t4, s3); e4.length && l2.push(e4); } return l2; })(t2, 1, h2 ? 4 - 4 * (s2.simplification || 1) : (1 + s2.roughness) / 2), i2 = _(t2, s2); if (o2) if ("solid" === s2.fillStyle) if (1 === r2.length) { const e3 = _(t2, Object.assign(Object.assign({}, s2), { disableMultiStroke: true, roughness: s2.roughness ? s2.roughness + s2.fillShapeRoughnessGain : 0 })); n2.push({ type: "fillPath", ops: this._mergedShape(e3.ops) }); } else n2.push(I(r2, s2)); else n2.push(C(r2, s2)); return a2 && (h2 ? r2.forEach(((t3) => { n2.push(S(t3, false, s2)); })) : n2.push(i2)), this._d("path", n2, s2); } opsToPath(t2, e2) { let s2 = ""; for (const n2 of t2.ops) { const t3 = "number" == typeof e2 && e2 >= 0 ? n2.data.map(((t4) => +t4.toFixed(e2))) : n2.data; switch (n2.op) { case "move": s2 += `M${t3[0]} ${t3[1]} `; break; case "bcurveTo": s2 += `C${t3[0]} ${t3[1]}, ${t3[2]} ${t3[3]}, ${t3[4]} ${t3[5]} `; break; case "lineTo": s2 += `L${t3[0]} ${t3[1]} `; } } return s2.trim(); } toPaths(t2) { const e2 = t2.sets || [], s2 = t2.options || this.defaultOptions, n2 = []; for (const t3 of e2) { let e3 = null; switch (t3.type) { case "path": e3 = { d: this.opsToPath(t3), stroke: s2.stroke, strokeWidth: s2.strokeWidth, fill: tt }; break; case "fillPath": e3 = { d: this.opsToPath(t3), stroke: tt, strokeWidth: 0, fill: s2.fill || tt }; break; case "fillSketch": e3 = this.fillSketch(t3, s2); } e3 && n2.push(e3); } return n2; } fillSketch(t2, e2) { let s2 = e2.fillWeight; return s2 < 0 && (s2 = e2.strokeWidth / 2), { d: this.opsToPath(t2), stroke: e2.fill || tt, strokeWidth: s2, fill: tt }; } _mergedShape(t2) { return t2.filter(((t3, e2) => 0 === e2 || "move" !== t3.op)); } }; var st = class { constructor(t2, e2) { this.canvas = t2, this.ctx = this.canvas.getContext("2d"), this.gen = new et(e2); } draw(t2) { const e2 = t2.sets || [], s2 = t2.options || this.getDefaultOptions(), n2 = this.ctx, o2 = t2.options.fixedDecimalPlaceDigits; for (const a2 of e2) switch (a2.type) { case "path": n2.save(), n2.strokeStyle = "none" === s2.stroke ? "transparent" : s2.stroke, n2.lineWidth = s2.strokeWidth, s2.strokeLineDash && n2.setLineDash(s2.strokeLineDash), s2.strokeLineDashOffset && (n2.lineDashOffset = s2.strokeLineDashOffset), this._drawToContext(n2, a2, o2), n2.restore(); break; case "fillPath": { n2.save(), n2.fillStyle = s2.fill || ""; const e3 = "curve" === t2.shape || "polygon" === t2.shape || "path" === t2.shape ? "evenodd" : "nonzero"; this._drawToContext(n2, a2, o2, e3), n2.restore(); break; } case "fillSketch": this.fillSketch(n2, a2, s2); } } fillSketch(t2, e2, s2) { let n2 = s2.fillWeight; n2 < 0 && (n2 = s2.strokeWidth / 2), t2.save(), s2.fillLineDash && t2.setLineDash(s2.fillLineDash), s2.fillLineDashOffset && (t2.lineDashOffset = s2.fillLineDashOffset), t2.strokeStyle = s2.fill || "", t2.lineWidth = n2, this._drawToContext(t2, e2, s2.fixedDecimalPlaceDigits), t2.restore(); } _drawToContext(t2, e2, s2, n2 = "nonzero") { t2.beginPath(); for (const n3 of e2.ops) { const e3 = "number" == typeof s2 && s2 >= 0 ? n3.data.map(((t3) => +t3.toFixed(s2))) : n3.data; switch (n3.op) { case "move": t2.moveTo(e3[0], e3[1]); break; case "bcurveTo": t2.bezierCurveTo(e3[0], e3[1], e3[2], e3[3], e3[4], e3[5]); break; case "lineTo": t2.lineTo(e3[0], e3[1]); } } "fillPath" === e2.type ? t2.fill(n2) : t2.stroke(); } get generator() { return this.gen; } getDefaultOptions() { return this.gen.defaultOptions; } line(t2, e2, s2, n2, o2) { const a2 = this.gen.line(t2, e2, s2, n2, o2); return this.draw(a2), a2; } rectangle(t2, e2, s2, n2, o2) { const a2 = this.gen.rectangle(t2, e2, s2, n2, o2); return this.draw(a2), a2; } ellipse(t2, e2, s2, n2, o2) { const a2 = this.gen.ellipse(t2, e2, s2, n2, o2); return this.draw(a2), a2; } circle(t2, e2, s2, n2) { const o2 = this.gen.circle(t2, e2, s2, n2); return this.draw(o2), o2; } linearPath(t2, e2) { const s2 = this.gen.linearPath(t2, e2); return this.draw(s2), s2; } polygon(t2, e2) { const s2 = this.gen.polygon(t2, e2); return this.draw(s2), s2; } arc(t2, e2, s2, n2, o2, a2, h2 = false, r2) { const i2 = this.gen.arc(t2, e2, s2, n2, o2, a2, h2, r2); return this.draw(i2), i2; } curve(t2, e2) { const s2 = this.gen.curve(t2, e2); return this.draw(s2), s2; } path(t2, e2) { const s2 = this.gen.path(t2, e2); return this.draw(s2), s2; } }; var nt = "http://www.w3.org/2000/svg"; var ot = class { constructor(t2, e2) { this.svg = t2, this.gen = new et(e2); } draw(t2) { const e2 = t2.sets || [], s2 = t2.options || this.getDefaultOptions(), n2 = this.svg.ownerDocument || window.document, o2 = n2.createElementNS(nt, "g"), a2 = t2.options.fixedDecimalPlaceDigits; for (const h2 of e2) { let e3 = null; switch (h2.type) { case "path": e3 = n2.createElementNS(nt, "path"), e3.setAttribute("d", this.opsToPath(h2, a2)), e3.setAttribute("stroke", s2.stroke), e3.setAttribute("stroke-width", s2.strokeWidth + ""), e3.setAttribute("fill", "none"), s2.strokeLineDash && e3.setAttribute("stroke-dasharray", s2.strokeLineDash.join(" ").trim()), s2.strokeLineDashOffset && e3.setAttribute("stroke-dashoffset", `${s2.strokeLineDashOffset}`); break; case "fillPath": e3 = n2.createElementNS(nt, "path"), e3.setAttribute("d", this.opsToPath(h2, a2)), e3.setAttribute("stroke", "none"), e3.setAttribute("stroke-width", "0"), e3.setAttribute("fill", s2.fill || ""), "curve" !== t2.shape && "polygon" !== t2.shape || e3.setAttribute("fill-rule", "evenodd"); break; case "fillSketch": e3 = this.fillSketch(n2, h2, s2); } e3 && o2.appendChild(e3); } return o2; } fillSketch(t2, e2, s2) { let n2 = s2.fillWeight; n2 < 0 && (n2 = s2.strokeWidth / 2); const o2 = t2.createElementNS(nt, "path"); return o2.setAttribute("d", this.opsToPath(e2, s2.fixedDecimalPlaceDigits)), o2.setAttribute("stroke", s2.fill || ""), o2.setAttribute("stroke-width", n2 + ""), o2.setAttribute("fill", "none"), s2.fillLineDash && o2.setAttribute("stroke-dasharray", s2.fillLineDash.join(" ").trim()), s2.fillLineDashOffset && o2.setAttribute("stroke-dashoffset", `${s2.fillLineDashOffset}`), o2; } get generator() { return this.gen; } getDefaultOptions() { return this.gen.defaultOptions; } opsToPath(t2, e2) { return this.gen.opsToPath(t2, e2); } line(t2, e2, s2, n2, o2) { const a2 = this.gen.line(t2, e2, s2, n2, o2); return this.draw(a2); } rectangle(t2, e2, s2, n2, o2) { const a2 = this.gen.rectangle(t2, e2, s2, n2, o2); return this.draw(a2); } ellipse(t2, e2, s2, n2, o2) { const a2 = this.gen.ellipse(t2, e2, s2, n2, o2); return this.draw(a2); } circle(t2, e2, s2, n2) { const o2 = this.gen.circle(t2, e2, s2, n2); return this.draw(o2); } linearPath(t2, e2) { const s2 = this.gen.linearPath(t2, e2); return this.draw(s2); } polygon(t2, e2) { const s2 = this.gen.polygon(t2, e2); return this.draw(s2); } arc(t2, e2, s2, n2, o2, a2, h2 = false, r2) { const i2 = this.gen.arc(t2, e2, s2, n2, o2, a2, h2, r2); return this.draw(i2); } curve(t2, e2) { const s2 = this.gen.curve(t2, e2); return this.draw(s2); } path(t2, e2) { const s2 = this.gen.path(t2, e2); return this.draw(s2); } }; var at = { canvas: (t2, e2) => new st(t2, e2), svg: (t2, e2) => new ot(t2, e2), generator: (t2) => new et(t2), newSeed: () => et.newSeed() }; // node_modules/mermaid/dist/chunks/mermaid.core/chunk-JZLCHNYA.mjs var labelHelper = __name(async (parent, node, _classes) => { let cssClasses; const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig2()?.htmlLabels); if (!_classes) { cssClasses = "node default"; } else { cssClasses = _classes; } const shapeSvg = parent.insert("g").attr("class", cssClasses).attr("id", node.domId || node.id); const labelEl = shapeSvg.insert("g").attr("class", "label").attr("style", handleUndefinedAttr(node.labelStyle)); let label; if (node.label === void 0) { label = ""; } else { label = typeof node.label === "string" ? node.label : node.label[0]; } const text2 = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig2()), { useHtmlLabels, width: node.width || getConfig2().flowchart?.wrappingWidth, // @ts-expect-error -- This is currently not used. Should this be `classes` instead? cssClasses: "markdown-node-label", style: node.labelStyle, addSvgBackground: !!node.icon || !!node.img }); let bbox = text2.getBBox(); const halfPadding = (node?.padding ?? 0) / 2; if (useHtmlLabels) { const div = text2.children[0]; const dv = select_default(text2); const images = div.getElementsByTagName("img"); if (images) { const noImgText = label.replace(/]*>/g, "").trim() === ""; await Promise.all( [...images].map( (img) => new Promise((res) => { function setupImage() { img.style.display = "flex"; img.style.flexDirection = "column"; if (noImgText) { const bodyFontSize = getConfig2().fontSize ? getConfig2().fontSize : window.getComputedStyle(document.body).fontSize; const enlargingFactor = 5; const [parsedBodyFontSize = defaultConfig_default.fontSize] = parseFontSize(bodyFontSize); const width = parsedBodyFontSize * enlargingFactor + "px"; img.style.minWidth = width; img.style.maxWidth = width; } else { img.style.width = "100%"; } res(img); } __name(setupImage, "setupImage"); setTimeout(() => { if (img.complete) { setupImage(); } }); img.addEventListener("error", setupImage); img.addEventListener("load", setupImage); }) ) ); } bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } if (useHtmlLabels) { labelEl.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")"); } else { labelEl.attr("transform", "translate(0, " + -bbox.height / 2 + ")"); } if (node.centerLabel) { labelEl.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")"); } labelEl.insert("rect", ":first-child"); return { shapeSvg, bbox, halfPadding, label: labelEl }; }, "labelHelper"); var insertLabel = __name(async (parent, label, options) => { const useHtmlLabels = options.useHtmlLabels || evaluate(getConfig2()?.flowchart?.htmlLabels); const labelEl = parent.insert("g").attr("class", "label").attr("style", options.labelStyle || ""); const text2 = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig2()), { useHtmlLabels, width: options.width || getConfig2()?.flowchart?.wrappingWidth, style: options.labelStyle, addSvgBackground: !!options.icon || !!options.img }); let bbox = text2.getBBox(); const halfPadding = options.padding / 2; if (evaluate(getConfig2()?.flowchart?.htmlLabels)) { const div = text2.children[0]; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } if (useHtmlLabels) { labelEl.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")"); } else { labelEl.attr("transform", "translate(0, " + -bbox.height / 2 + ")"); } if (options.centerLabel) { labelEl.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")"); } labelEl.insert("rect", ":first-child"); return { shapeSvg: parent, bbox, halfPadding, label: labelEl }; }, "insertLabel"); var updateNodeBounds = __name((node, element) => { const bbox = element.node().getBBox(); node.width = bbox.width; node.height = bbox.height; }, "updateNodeBounds"); var getNodeClasses = __name((node, extra) => (node.look === "handDrawn" ? "rough-node" : "node") + " " + node.cssClasses + " " + (extra || ""), "getNodeClasses"); function createPathFromPoints(points) { const pointStrings = points.map((p2, i2) => `${i2 === 0 ? "M" : "L"}${p2.x},${p2.y}`); pointStrings.push("Z"); return pointStrings.join(" "); } __name(createPathFromPoints, "createPathFromPoints"); function generateFullSineWavePoints(x1, y1, x2, y2, amplitude, numCycles) { const points = []; const steps = 50; const deltaX = x2 - x1; const deltaY = y2 - y1; const cycleLength = deltaX / numCycles; const frequency = 2 * Math.PI / cycleLength; const midY = y1 + deltaY / 2; for (let i2 = 0; i2 <= steps; i2++) { const t2 = i2 / steps; const x3 = x1 + t2 * deltaX; const y3 = midY + amplitude * Math.sin(frequency * (x3 - x1)); points.push({ x: x3, y: y3 }); } return points; } __name(generateFullSineWavePoints, "generateFullSineWavePoints"); function generateCirclePoints(centerX, centerY, radius, numPoints, startAngle, endAngle) { const points = []; const startAngleRad = startAngle * Math.PI / 180; const endAngleRad = endAngle * Math.PI / 180; const angleRange = endAngleRad - startAngleRad; const angleStep = angleRange / (numPoints - 1); for (let i2 = 0; i2 < numPoints; i2++) { const angle = startAngleRad + i2 * angleStep; const x2 = centerX + radius * Math.cos(angle); const y2 = centerY + radius * Math.sin(angle); points.push({ x: -x2, y: -y2 }); } return points; } __name(generateCirclePoints, "generateCirclePoints"); var intersectRect = __name((node, point) => { var x2 = node.x; var y2 = node.y; var dx = point.x - x2; var dy = point.y - y2; var w2 = node.width / 2; var h2 = node.height / 2; var sx, sy; if (Math.abs(dy) * w2 > Math.abs(dx) * h2) { if (dy < 0) { h2 = -h2; } sx = dy === 0 ? 0 : h2 * dx / dy; sy = h2; } else { if (dx < 0) { w2 = -w2; } sx = w2; sy = dx === 0 ? 0 : w2 * dy / dx; } return { x: x2 + sx, y: y2 + sy }; }, "intersectRect"); var intersect_rect_default = intersectRect; function applyStyle(dom, styleFn) { if (styleFn) { dom.attr("style", styleFn); } } __name(applyStyle, "applyStyle"); async function addHtmlLabel(node) { const fo = select_default(document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")); const div = fo.append("xhtml:div"); const config = getConfig2(); let label = node.label; if (node.label && hasKatex(node.label)) { label = await renderKatexSanitized(node.label.replace(common_default.lineBreakRegex, "\n"), config); } const labelClass = node.isNode ? "nodeLabel" : "edgeLabel"; const labelSpan = '" + label + ""; div.html(sanitizeText(labelSpan, config)); applyStyle(div, node.labelStyle); div.style("display", "inline-block"); div.style("padding-right", "1px"); div.style("white-space", "nowrap"); div.attr("xmlns", "http://www.w3.org/1999/xhtml"); return fo.node(); } __name(addHtmlLabel, "addHtmlLabel"); var createLabel = __name(async (_vertexText, style, isTitle, isNode) => { let vertexText = _vertexText || ""; if (typeof vertexText === "object") { vertexText = vertexText[0]; } if (evaluate(getConfig2().flowchart.htmlLabels)) { vertexText = vertexText.replace(/\\n|\n/g, "
"); log.info("vertexText" + vertexText); const node = { isNode, label: decodeEntities(vertexText).replace( /fa[blrs]?:fa-[\w-]+/g, (s2) => `` ), labelStyle: style ? style.replace("fill:", "color:") : style }; let vertexNode = await addHtmlLabel(node); return vertexNode; } else { const svgLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); svgLabel.setAttribute("style", style.replace("color:", "fill:")); let rows = []; if (typeof vertexText === "string") { rows = vertexText.split(/\\n|\n|/gi); } else if (Array.isArray(vertexText)) { rows = vertexText; } else { rows = []; } for (const row of rows) { const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve"); tspan.setAttribute("dy", "1em"); tspan.setAttribute("x", "0"); if (isTitle) { tspan.setAttribute("class", "title-row"); } else { tspan.setAttribute("class", "row"); } tspan.textContent = row.trim(); svgLabel.appendChild(tspan); } return svgLabel; } }, "createLabel"); var createLabel_default = createLabel; var createRoundedRectPathD = __name((x2, y2, totalWidth, totalHeight, radius) => [ "M", x2 + radius, y2, // Move to the first point "H", x2 + totalWidth - radius, // Draw horizontal line to the beginning of the right corner "A", radius, radius, 0, 0, 1, x2 + totalWidth, y2 + radius, // Draw arc to the right top corner "V", y2 + totalHeight - radius, // Draw vertical line down to the beginning of the right bottom corner "A", radius, radius, 0, 0, 1, x2 + totalWidth - radius, y2 + totalHeight, // Draw arc to the right bottom corner "H", x2 + radius, // Draw horizontal line to the beginning of the left bottom corner "A", radius, radius, 0, 0, 1, x2, y2 + totalHeight - radius, // Draw arc to the left bottom corner "V", y2 + radius, // Draw vertical line up to the beginning of the left top corner "A", radius, radius, 0, 0, 1, x2 + radius, y2, // Draw arc to the left top corner "Z" // Close the path ].join(" "), "createRoundedRectPathD"); var rect = __name(async (parent, node) => { log.info("Creating subgraph rect for ", node.id, node); const siteConfig = getConfig2(); const { themeVariables, handDrawnSeed } = siteConfig; const { clusterBkg, clusterBorder } = themeVariables; const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node); const shapeSvg = parent.insert("g").attr("class", "cluster " + node.cssClasses).attr("id", node.id).attr("data-look", node.look); const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels); const labelEl = shapeSvg.insert("g").attr("class", "cluster-label "); const text2 = await createText(labelEl, node.label, { style: node.labelStyle, useHtmlLabels, isNode: true }); let bbox = text2.getBBox(); if (evaluate(siteConfig.flowchart.htmlLabels)) { const div = text2.children[0]; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width; if (node.width <= bbox.width + node.padding) { node.diff = (width - node.width) / 2 - node.padding; } else { node.diff = -node.padding; } const height = node.height; const x2 = node.x - width / 2; const y2 = node.y - height / 2; log.trace("Data ", node, JSON.stringify(node)); let rect2; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { roughness: 0.7, fill: clusterBkg, // fill: 'red', stroke: clusterBorder, fillWeight: 3, seed: handDrawnSeed }); const roughNode = rc.path(createRoundedRectPathD(x2, y2, width, height, 0), options); rect2 = shapeSvg.insert(() => { log.debug("Rough node insert CXC", roughNode); return roughNode; }, ":first-child"); rect2.select("path:nth-child(2)").attr("style", borderStyles.join(";")); rect2.select("path").attr("style", backgroundStyles.join(";").replace("fill", "stroke")); } else { rect2 = shapeSvg.insert("rect", ":first-child"); rect2.attr("style", nodeStyles).attr("rx", node.rx).attr("ry", node.ry).attr("x", x2).attr("y", y2).attr("width", width).attr("height", height); } const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig); labelEl.attr( "transform", // This puts the label on top of the box instead of inside it `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})` ); if (labelStyles) { const span = labelEl.select("span"); if (span) { span.attr("style", labelStyles); } } const rectBox = rect2.node().getBBox(); node.offsetX = 0; node.width = rectBox.width; node.height = rectBox.height; node.offsetY = bbox.height - node.padding / 2; node.intersect = function(point) { return intersect_rect_default(node, point); }; return { cluster: shapeSvg, labelBBox: bbox }; }, "rect"); var noteGroup = __name((parent, node) => { const shapeSvg = parent.insert("g").attr("class", "note-cluster").attr("id", node.id); const rect2 = shapeSvg.insert("rect", ":first-child"); const padding = 0 * node.padding; const halfPadding = padding / 2; rect2.attr("rx", node.rx).attr("ry", node.ry).attr("x", node.x - node.width / 2 - halfPadding).attr("y", node.y - node.height / 2 - halfPadding).attr("width", node.width + padding).attr("height", node.height + padding).attr("fill", "none"); const rectBox = rect2.node().getBBox(); node.width = rectBox.width; node.height = rectBox.height; node.intersect = function(point) { return intersect_rect_default(node, point); }; return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } }; }, "noteGroup"); var roundedWithTitle = __name(async (parent, node) => { const siteConfig = getConfig2(); const { themeVariables, handDrawnSeed } = siteConfig; const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } = themeVariables; const shapeSvg = parent.insert("g").attr("class", node.cssClasses).attr("id", node.id).attr("data-id", node.id).attr("data-look", node.look); const outerRectG = shapeSvg.insert("g", ":first-child"); const label = shapeSvg.insert("g").attr("class", "cluster-label"); let innerRect = shapeSvg.append("rect"); const text2 = label.node().appendChild(await createLabel_default(node.label, node.labelStyle, void 0, true)); let bbox = text2.getBBox(); if (evaluate(siteConfig.flowchart.htmlLabels)) { const div = text2.children[0]; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } const padding = 0 * node.padding; const halfPadding = padding / 2; const width = (node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width) + padding; if (node.width <= bbox.width + node.padding) { node.diff = (width - node.width) / 2 - node.padding; } else { node.diff = -node.padding; } const height = node.height + padding; const innerHeight = node.height + padding - bbox.height - 6; const x2 = node.x - width / 2; const y2 = node.y - height / 2; node.width = width; const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2; let rect2; if (node.look === "handDrawn") { const isAlt = node.cssClasses.includes("statediagram-cluster-alt"); const rc = at.svg(shapeSvg); const roughOuterNode = node.rx || node.ry ? rc.path(createRoundedRectPathD(x2, y2, width, height, 10), { roughness: 0.7, fill: compositeTitleBackground, fillStyle: "solid", stroke: nodeBorder, seed: handDrawnSeed }) : rc.rectangle(x2, y2, width, height, { seed: handDrawnSeed }); rect2 = shapeSvg.insert(() => roughOuterNode, ":first-child"); const roughInnerNode = rc.rectangle(x2, innerY, width, innerHeight, { fill: isAlt ? altBackground : compositeBackground, fillStyle: isAlt ? "hachure" : "solid", stroke: nodeBorder, seed: handDrawnSeed }); rect2 = shapeSvg.insert(() => roughOuterNode, ":first-child"); innerRect = shapeSvg.insert(() => roughInnerNode); } else { rect2 = outerRectG.insert("rect", ":first-child"); const outerRectClass = "outer"; rect2.attr("class", outerRectClass).attr("x", x2).attr("y", y2).attr("width", width).attr("height", height).attr("data-look", node.look); innerRect.attr("class", "inner").attr("x", x2).attr("y", innerY).attr("width", width).attr("height", innerHeight); } label.attr( "transform", `translate(${node.x - bbox.width / 2}, ${y2 + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})` ); const rectBox = rect2.node().getBBox(); node.height = rectBox.height; node.offsetX = 0; node.offsetY = bbox.height - node.padding / 2; node.labelBBox = bbox; node.intersect = function(point) { return intersect_rect_default(node, point); }; return { cluster: shapeSvg, labelBBox: bbox }; }, "roundedWithTitle"); var kanbanSection = __name(async (parent, node) => { log.info("Creating subgraph rect for ", node.id, node); const siteConfig = getConfig2(); const { themeVariables, handDrawnSeed } = siteConfig; const { clusterBkg, clusterBorder } = themeVariables; const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node); const shapeSvg = parent.insert("g").attr("class", "cluster " + node.cssClasses).attr("id", node.id).attr("data-look", node.look); const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels); const labelEl = shapeSvg.insert("g").attr("class", "cluster-label "); const text2 = await createText(labelEl, node.label, { style: node.labelStyle, useHtmlLabels, isNode: true, width: node.width }); let bbox = text2.getBBox(); if (evaluate(siteConfig.flowchart.htmlLabels)) { const div = text2.children[0]; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width; if (node.width <= bbox.width + node.padding) { node.diff = (width - node.width) / 2 - node.padding; } else { node.diff = -node.padding; } const height = node.height; const x2 = node.x - width / 2; const y2 = node.y - height / 2; log.trace("Data ", node, JSON.stringify(node)); let rect2; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { roughness: 0.7, fill: clusterBkg, // fill: 'red', stroke: clusterBorder, fillWeight: 4, seed: handDrawnSeed }); const roughNode = rc.path(createRoundedRectPathD(x2, y2, width, height, node.rx), options); rect2 = shapeSvg.insert(() => { log.debug("Rough node insert CXC", roughNode); return roughNode; }, ":first-child"); rect2.select("path:nth-child(2)").attr("style", borderStyles.join(";")); rect2.select("path").attr("style", backgroundStyles.join(";").replace("fill", "stroke")); } else { rect2 = shapeSvg.insert("rect", ":first-child"); rect2.attr("style", nodeStyles).attr("rx", node.rx).attr("ry", node.ry).attr("x", x2).attr("y", y2).attr("width", width).attr("height", height); } const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig); labelEl.attr( "transform", // This puts the label on top of the box instead of inside it `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})` ); if (labelStyles) { const span = labelEl.select("span"); if (span) { span.attr("style", labelStyles); } } const rectBox = rect2.node().getBBox(); node.offsetX = 0; node.width = rectBox.width; node.height = rectBox.height; node.offsetY = bbox.height - node.padding / 2; node.intersect = function(point) { return intersect_rect_default(node, point); }; return { cluster: shapeSvg, labelBBox: bbox }; }, "kanbanSection"); var divider = __name((parent, node) => { const siteConfig = getConfig2(); const { themeVariables, handDrawnSeed } = siteConfig; const { nodeBorder } = themeVariables; const shapeSvg = parent.insert("g").attr("class", node.cssClasses).attr("id", node.id).attr("data-look", node.look); const outerRectG = shapeSvg.insert("g", ":first-child"); const padding = 0 * node.padding; const width = node.width + padding; node.diff = -node.padding; const height = node.height + padding; const x2 = node.x - width / 2; const y2 = node.y - height / 2; node.width = width; let rect2; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const roughOuterNode = rc.rectangle(x2, y2, width, height, { fill: "lightgrey", roughness: 0.5, strokeLineDash: [5], stroke: nodeBorder, seed: handDrawnSeed }); rect2 = shapeSvg.insert(() => roughOuterNode, ":first-child"); } else { rect2 = outerRectG.insert("rect", ":first-child"); const outerRectClass = "divider"; rect2.attr("class", outerRectClass).attr("x", x2).attr("y", y2).attr("width", width).attr("height", height).attr("data-look", node.look); } const rectBox = rect2.node().getBBox(); node.height = rectBox.height; node.offsetX = 0; node.offsetY = 0; node.intersect = function(point) { return intersect_rect_default(node, point); }; return { cluster: shapeSvg, labelBBox: {} }; }, "divider"); var squareRect = rect; var shapes = { rect, squareRect, roundedWithTitle, noteGroup, divider, kanbanSection }; var clusterElems = /* @__PURE__ */ new Map(); var insertCluster = __name(async (elem, node) => { const shape = node.shape || "rect"; const cluster = await shapes[shape](elem, node); clusterElems.set(node.id, cluster); return cluster; }, "insertCluster"); var clear = __name(() => { clusterElems = /* @__PURE__ */ new Map(); }, "clear"); function intersectNode(node, point) { return node.intersect(point); } __name(intersectNode, "intersectNode"); var intersect_node_default = intersectNode; function intersectEllipse(node, rx, ry, point) { var cx = node.x; var cy = node.y; var px = cx - point.x; var py = cy - point.y; var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px); var dx = Math.abs(rx * ry * px / det); if (point.x < cx) { dx = -dx; } var dy = Math.abs(rx * ry * py / det); if (point.y < cy) { dy = -dy; } return { x: cx + dx, y: cy + dy }; } __name(intersectEllipse, "intersectEllipse"); var intersect_ellipse_default = intersectEllipse; function intersectCircle(node, rx, point) { return intersect_ellipse_default(node, rx, rx, point); } __name(intersectCircle, "intersectCircle"); var intersect_circle_default = intersectCircle; function intersectLine(p1, p2, q1, q2) { { const a1 = p2.y - p1.y; const b1 = p1.x - p2.x; const c1 = p2.x * p1.y - p1.x * p2.y; const r3 = a1 * q1.x + b1 * q1.y + c1; const r4 = a1 * q2.x + b1 * q2.y + c1; const epsilon = 1e-6; if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) { return; } const a2 = q2.y - q1.y; const b2 = q1.x - q2.x; const c2 = q2.x * q1.y - q1.x * q2.y; const r1 = a2 * p1.x + b2 * p1.y + c2; const r2 = a2 * p2.x + b2 * p2.y + c2; if (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) { return; } const denom = a1 * b2 - a2 * b1; if (denom === 0) { return; } const offset = Math.abs(denom / 2); let num = b1 * c2 - b2 * c1; const x2 = num < 0 ? (num - offset) / denom : (num + offset) / denom; num = a2 * c1 - a1 * c2; const y2 = num < 0 ? (num - offset) / denom : (num + offset) / denom; return { x: x2, y: y2 }; } } __name(intersectLine, "intersectLine"); function sameSign(r1, r2) { return r1 * r2 > 0; } __name(sameSign, "sameSign"); var intersect_line_default = intersectLine; function intersectPolygon(node, polyPoints, point) { let x1 = node.x; let y1 = node.y; let intersections = []; let minX = Number.POSITIVE_INFINITY; let minY = Number.POSITIVE_INFINITY; if (typeof polyPoints.forEach === "function") { polyPoints.forEach(function(entry) { minX = Math.min(minX, entry.x); minY = Math.min(minY, entry.y); }); } else { minX = Math.min(minX, polyPoints.x); minY = Math.min(minY, polyPoints.y); } let left = x1 - node.width / 2 - minX; let top = y1 - node.height / 2 - minY; for (let i2 = 0; i2 < polyPoints.length; i2++) { let p1 = polyPoints[i2]; let p2 = polyPoints[i2 < polyPoints.length - 1 ? i2 + 1 : 0]; let intersect = intersect_line_default( node, point, { x: left + p1.x, y: top + p1.y }, { x: left + p2.x, y: top + p2.y } ); if (intersect) { intersections.push(intersect); } } if (!intersections.length) { return node; } if (intersections.length > 1) { intersections.sort(function(p2, q2) { let pdx = p2.x - point.x; let pdy = p2.y - point.y; let distp = Math.sqrt(pdx * pdx + pdy * pdy); let qdx = q2.x - point.x; let qdy = q2.y - point.y; let distq = Math.sqrt(qdx * qdx + qdy * qdy); return distp < distq ? -1 : distp === distq ? 0 : 1; }); } return intersections[0]; } __name(intersectPolygon, "intersectPolygon"); var intersect_polygon_default = intersectPolygon; var intersect_default = { node: intersect_node_default, circle: intersect_circle_default, ellipse: intersect_ellipse_default, polygon: intersect_polygon_default, rect: intersect_rect_default }; function anchor(parent, node) { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const classes = getNodeClasses(node); let cssClasses = classes; if (!classes) { cssClasses = "anchor"; } const shapeSvg = parent.insert("g").attr("class", cssClasses).attr("id", node.domId || node.id); const radius = 1; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { fill: "black", stroke: "none", fillStyle: "solid" }); if (node.look !== "handDrawn") { options.roughness = 0; } const roughNode = rc.circle(0, 0, radius * 2, options); const circleElem = shapeSvg.insert(() => roughNode, ":first-child"); circleElem.attr("class", "anchor").attr("style", handleUndefinedAttr(cssStyles)); updateNodeBounds(node, circleElem); node.intersect = function(point) { log.info("Circle intersect", node, radius, point); return intersect_default.circle(node, radius, point); }; return shapeSvg; } __name(anchor, "anchor"); function generateArcPoints(x1, y1, x2, y2, rx, ry, clockwise) { const numPoints = 20; const midX = (x1 + x2) / 2; const midY = (y1 + y2) / 2; const angle = Math.atan2(y2 - y1, x2 - x1); const dx = (x2 - x1) / 2; const dy = (y2 - y1) / 2; const transformedX = dx / rx; const transformedY = dy / ry; const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2); if (distance > 1) { throw new Error("The given radii are too small to create an arc between the points."); } const scaledCenterDistance = Math.sqrt(1 - distance ** 2); const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1); const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1); const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx); const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx); let angleRange = endAngle - startAngle; if (clockwise && angleRange < 0) { angleRange += 2 * Math.PI; } if (!clockwise && angleRange > 0) { angleRange -= 2 * Math.PI; } const points = []; for (let i2 = 0; i2 < numPoints; i2++) { const t2 = i2 / (numPoints - 1); const angle2 = startAngle + t2 * angleRange; const x3 = centerX + rx * Math.cos(angle2); const y3 = centerY + ry * Math.sin(angle2); points.push({ x: x3, y: y3 }); } return points; } __name(generateArcPoints, "generateArcPoints"); async function bowTieRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + node.padding + 20; const h2 = bbox.height + node.padding; const ry = h2 / 2; const rx = ry / (2.5 + h2 / 50); const { cssStyles } = node; const points = [ { x: w2 / 2, y: -h2 / 2 }, { x: -w2 / 2, y: -h2 / 2 }, ...generateArcPoints(-w2 / 2, -h2 / 2, -w2 / 2, h2 / 2, rx, ry, false), { x: w2 / 2, y: h2 / 2 }, ...generateArcPoints(w2 / 2, h2 / 2, w2 / 2, -h2 / 2, rx, ry, true) ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const bowTieRectPath = createPathFromPoints(points); const bowTieRectShapePath = rc.path(bowTieRectPath, options); const bowTieRectShape = shapeSvg.insert(() => bowTieRectShapePath, ":first-child"); bowTieRectShape.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { bowTieRectShape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { bowTieRectShape.selectAll("path").attr("style", nodeStyles); } bowTieRectShape.attr("transform", `translate(${rx / 2}, 0)`); updateNodeBounds(node, bowTieRectShape); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(bowTieRect, "bowTieRect"); function insertPolygonShape(parent, w2, h2, points) { return parent.insert("polygon", ":first-child").attr( "points", points.map(function(d2) { return d2.x + "," + d2.y; }).join(" ") ).attr("class", "label-container").attr("transform", "translate(" + -w2 / 2 + "," + h2 / 2 + ")"); } __name(insertPolygonShape, "insertPolygonShape"); async function card(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const h2 = bbox.height + node.padding; const padding = 12; const w2 = bbox.width + node.padding + padding; const left = 0; const right = w2; const top = -h2; const bottom = 0; const points = [ { x: left + padding, y: top }, { x: right, y: top }, { x: right, y: bottom }, { x: left, y: bottom }, { x: left, y: top + padding }, { x: left + padding, y: top } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-w2 / 2}, ${h2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w2, h2, points); } if (nodeStyles) { polygon.attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(card, "card"); function choice(parent, node) { const { nodeStyles } = styles2String(node); node.label = ""; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId ?? node.id); const { cssStyles } = node; const s2 = Math.max(28, node.width ?? 0); const points = [ { x: 0, y: s2 / 2 }, { x: s2 / 2, y: 0 }, { x: 0, y: -s2 / 2 }, { x: -s2 / 2, y: 0 } ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const choicePath = createPathFromPoints(points); const roughNode = rc.path(choicePath, options); const choiceShape = shapeSvg.insert(() => roughNode, ":first-child"); if (cssStyles && node.look !== "handDrawn") { choiceShape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { choiceShape.selectAll("path").attr("style", nodeStyles); } node.width = 28; node.height = 28; node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(choice, "choice"); async function circle(parent, node, options) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node)); const padding = options?.padding ?? halfPadding; const radius = bbox.width / 2 + padding; let circleElem; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options2 = userNodeOverrides(node, {}); const roughNode = rc.circle(0, 0, radius * 2, options2); circleElem = shapeSvg.insert(() => roughNode, ":first-child"); circleElem.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); } else { circleElem = shapeSvg.insert("circle", ":first-child").attr("class", "basic label-container").attr("style", nodeStyles).attr("r", radius).attr("cx", 0).attr("cy", 0); } updateNodeBounds(node, circleElem); node.calcIntersect = function(bounds, point) { const radius2 = bounds.width / 2; return intersect_default.circle(bounds, radius2, point); }; node.intersect = function(point) { log.info("Circle intersect", node, radius, point); return intersect_default.circle(node, radius, point); }; return shapeSvg; } __name(circle, "circle"); function createLine(r2) { const xAxis45 = Math.cos(Math.PI / 4); const yAxis45 = Math.sin(Math.PI / 4); const lineLength = r2 * 2; const pointQ1 = { x: lineLength / 2 * xAxis45, y: lineLength / 2 * yAxis45 }; const pointQ2 = { x: -(lineLength / 2) * xAxis45, y: lineLength / 2 * yAxis45 }; const pointQ3 = { x: -(lineLength / 2) * xAxis45, y: -(lineLength / 2) * yAxis45 }; const pointQ4 = { x: lineLength / 2 * xAxis45, y: -(lineLength / 2) * yAxis45 }; return `M ${pointQ2.x},${pointQ2.y} L ${pointQ4.x},${pointQ4.y} M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`; } __name(createLine, "createLine"); function crossedCircle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; node.label = ""; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId ?? node.id); const radius = Math.max(30, node?.width ?? 0); const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const circleNode = rc.circle(0, 0, radius * 2, options); const linePath = createLine(radius); const lineNode = rc.path(linePath, options); const crossedCircle2 = shapeSvg.insert(() => circleNode, ":first-child"); crossedCircle2.insert(() => lineNode); if (cssStyles && node.look !== "handDrawn") { crossedCircle2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { crossedCircle2.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, crossedCircle2); node.intersect = function(point) { log.info("crossedCircle intersect", node, { radius, point }); const pos = intersect_default.circle(node, radius, point); return pos; }; return shapeSvg; } __name(crossedCircle, "crossedCircle"); function generateCirclePoints2(centerX, centerY, radius, numPoints = 100, startAngle = 0, endAngle = 180) { const points = []; const startAngleRad = startAngle * Math.PI / 180; const endAngleRad = endAngle * Math.PI / 180; const angleRange = endAngleRad - startAngleRad; const angleStep = angleRange / (numPoints - 1); for (let i2 = 0; i2 < numPoints; i2++) { const angle = startAngleRad + i2 * angleStep; const x2 = centerX + radius * Math.cos(angle); const y2 = centerY + radius * Math.sin(angle); points.push({ x: -x2, y: -y2 }); } return points; } __name(generateCirclePoints2, "generateCirclePoints"); async function curlyBraceLeft(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + (node.padding ?? 0); const h2 = bbox.height + (node.padding ?? 0); const radius = Math.max(5, h2 * 0.1); const { cssStyles } = node; const points = [ ...generateCirclePoints2(w2 / 2, -h2 / 2, radius, 30, -90, 0), { x: -w2 / 2 - radius, y: radius }, ...generateCirclePoints2(w2 / 2 + radius * 2, -radius, radius, 20, -180, -270), ...generateCirclePoints2(w2 / 2 + radius * 2, radius, radius, 20, -90, -180), { x: -w2 / 2 - radius, y: -h2 / 2 }, ...generateCirclePoints2(w2 / 2, h2 / 2, radius, 20, 0, 90) ]; const rectPoints = [ { x: w2 / 2, y: -h2 / 2 - radius }, { x: -w2 / 2, y: -h2 / 2 - radius }, ...generateCirclePoints2(w2 / 2, -h2 / 2, radius, 20, -90, 0), { x: -w2 / 2 - radius, y: -radius }, ...generateCirclePoints2(w2 / 2 + w2 * 0.1, -radius, radius, 20, -180, -270), ...generateCirclePoints2(w2 / 2 + w2 * 0.1, radius, radius, 20, -90, -180), { x: -w2 / 2 - radius, y: h2 / 2 }, ...generateCirclePoints2(w2 / 2, h2 / 2, radius, 20, 0, 90), { x: -w2 / 2, y: h2 / 2 + radius }, { x: w2 / 2, y: h2 / 2 + radius } ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { fill: "none" }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const curlyBraceLeftPath = createPathFromPoints(points); const newCurlyBracePath = curlyBraceLeftPath.replace("Z", ""); const curlyBraceLeftNode = rc.path(newCurlyBracePath, options); const rectPath = createPathFromPoints(rectPoints); const rectShape = rc.path(rectPath, __spreadValues({}, options)); const curlyBraceLeftShape = shapeSvg.insert("g", ":first-child"); curlyBraceLeftShape.insert(() => rectShape, ":first-child").attr("stroke-opacity", 0); curlyBraceLeftShape.insert(() => curlyBraceLeftNode, ":first-child"); curlyBraceLeftShape.attr("class", "text"); if (cssStyles && node.look !== "handDrawn") { curlyBraceLeftShape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { curlyBraceLeftShape.selectAll("path").attr("style", nodeStyles); } curlyBraceLeftShape.attr("transform", `translate(${radius}, 0)`); label.attr( "transform", `translate(${-w2 / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceLeftShape); node.intersect = function(point) { const pos = intersect_default.polygon(node, rectPoints, point); return pos; }; return shapeSvg; } __name(curlyBraceLeft, "curlyBraceLeft"); function generateCirclePoints3(centerX, centerY, radius, numPoints = 100, startAngle = 0, endAngle = 180) { const points = []; const startAngleRad = startAngle * Math.PI / 180; const endAngleRad = endAngle * Math.PI / 180; const angleRange = endAngleRad - startAngleRad; const angleStep = angleRange / (numPoints - 1); for (let i2 = 0; i2 < numPoints; i2++) { const angle = startAngleRad + i2 * angleStep; const x2 = centerX + radius * Math.cos(angle); const y2 = centerY + radius * Math.sin(angle); points.push({ x: x2, y: y2 }); } return points; } __name(generateCirclePoints3, "generateCirclePoints"); async function curlyBraceRight(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + (node.padding ?? 0); const h2 = bbox.height + (node.padding ?? 0); const radius = Math.max(5, h2 * 0.1); const { cssStyles } = node; const points = [ ...generateCirclePoints3(w2 / 2, -h2 / 2, radius, 20, -90, 0), { x: w2 / 2 + radius, y: -radius }, ...generateCirclePoints3(w2 / 2 + radius * 2, -radius, radius, 20, -180, -270), ...generateCirclePoints3(w2 / 2 + radius * 2, radius, radius, 20, -90, -180), { x: w2 / 2 + radius, y: h2 / 2 }, ...generateCirclePoints3(w2 / 2, h2 / 2, radius, 20, 0, 90) ]; const rectPoints = [ { x: -w2 / 2, y: -h2 / 2 - radius }, { x: w2 / 2, y: -h2 / 2 - radius }, ...generateCirclePoints3(w2 / 2, -h2 / 2, radius, 20, -90, 0), { x: w2 / 2 + radius, y: -radius }, ...generateCirclePoints3(w2 / 2 + radius * 2, -radius, radius, 20, -180, -270), ...generateCirclePoints3(w2 / 2 + radius * 2, radius, radius, 20, -90, -180), { x: w2 / 2 + radius, y: h2 / 2 }, ...generateCirclePoints3(w2 / 2, h2 / 2, radius, 20, 0, 90), { x: w2 / 2, y: h2 / 2 + radius }, { x: -w2 / 2, y: h2 / 2 + radius } ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { fill: "none" }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const curlyBraceRightPath = createPathFromPoints(points); const newCurlyBracePath = curlyBraceRightPath.replace("Z", ""); const curlyBraceRightNode = rc.path(newCurlyBracePath, options); const rectPath = createPathFromPoints(rectPoints); const rectShape = rc.path(rectPath, __spreadValues({}, options)); const curlyBraceRightShape = shapeSvg.insert("g", ":first-child"); curlyBraceRightShape.insert(() => rectShape, ":first-child").attr("stroke-opacity", 0); curlyBraceRightShape.insert(() => curlyBraceRightNode, ":first-child"); curlyBraceRightShape.attr("class", "text"); if (cssStyles && node.look !== "handDrawn") { curlyBraceRightShape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { curlyBraceRightShape.selectAll("path").attr("style", nodeStyles); } curlyBraceRightShape.attr("transform", `translate(${-radius}, 0)`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBraceRightShape); node.intersect = function(point) { const pos = intersect_default.polygon(node, rectPoints, point); return pos; }; return shapeSvg; } __name(curlyBraceRight, "curlyBraceRight"); function generateCirclePoints4(centerX, centerY, radius, numPoints = 100, startAngle = 0, endAngle = 180) { const points = []; const startAngleRad = startAngle * Math.PI / 180; const endAngleRad = endAngle * Math.PI / 180; const angleRange = endAngleRad - startAngleRad; const angleStep = angleRange / (numPoints - 1); for (let i2 = 0; i2 < numPoints; i2++) { const angle = startAngleRad + i2 * angleStep; const x2 = centerX + radius * Math.cos(angle); const y2 = centerY + radius * Math.sin(angle); points.push({ x: -x2, y: -y2 }); } return points; } __name(generateCirclePoints4, "generateCirclePoints"); async function curlyBraces(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + (node.padding ?? 0); const h2 = bbox.height + (node.padding ?? 0); const radius = Math.max(5, h2 * 0.1); const { cssStyles } = node; const leftCurlyBracePoints = [ ...generateCirclePoints4(w2 / 2, -h2 / 2, radius, 30, -90, 0), { x: -w2 / 2 - radius, y: radius }, ...generateCirclePoints4(w2 / 2 + radius * 2, -radius, radius, 20, -180, -270), ...generateCirclePoints4(w2 / 2 + radius * 2, radius, radius, 20, -90, -180), { x: -w2 / 2 - radius, y: -h2 / 2 }, ...generateCirclePoints4(w2 / 2, h2 / 2, radius, 20, 0, 90) ]; const rightCurlyBracePoints = [ ...generateCirclePoints4(-w2 / 2 + radius + radius / 2, -h2 / 2, radius, 20, -90, -180), { x: w2 / 2 - radius / 2, y: radius }, ...generateCirclePoints4(-w2 / 2 - radius / 2, -radius, radius, 20, 0, 90), ...generateCirclePoints4(-w2 / 2 - radius / 2, radius, radius, 20, -90, 0), { x: w2 / 2 - radius / 2, y: -radius }, ...generateCirclePoints4(-w2 / 2 + radius + radius / 2, h2 / 2, radius, 30, -180, -270) ]; const rectPoints = [ { x: w2 / 2, y: -h2 / 2 - radius }, { x: -w2 / 2, y: -h2 / 2 - radius }, ...generateCirclePoints4(w2 / 2, -h2 / 2, radius, 20, -90, 0), { x: -w2 / 2 - radius, y: -radius }, ...generateCirclePoints4(w2 / 2 + radius * 2, -radius, radius, 20, -180, -270), ...generateCirclePoints4(w2 / 2 + radius * 2, radius, radius, 20, -90, -180), { x: -w2 / 2 - radius, y: h2 / 2 }, ...generateCirclePoints4(w2 / 2, h2 / 2, radius, 20, 0, 90), { x: -w2 / 2, y: h2 / 2 + radius }, { x: w2 / 2 - radius - radius / 2, y: h2 / 2 + radius }, ...generateCirclePoints4(-w2 / 2 + radius + radius / 2, -h2 / 2, radius, 20, -90, -180), { x: w2 / 2 - radius / 2, y: radius }, ...generateCirclePoints4(-w2 / 2 - radius / 2, -radius, radius, 20, 0, 90), ...generateCirclePoints4(-w2 / 2 - radius / 2, radius, radius, 20, -90, 0), { x: w2 / 2 - radius / 2, y: -radius }, ...generateCirclePoints4(-w2 / 2 + radius + radius / 2, h2 / 2, radius, 30, -180, -270) ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { fill: "none" }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const leftCurlyBracePath = createPathFromPoints(leftCurlyBracePoints); const newLeftCurlyBracePath = leftCurlyBracePath.replace("Z", ""); const leftCurlyBraceNode = rc.path(newLeftCurlyBracePath, options); const rightCurlyBracePath = createPathFromPoints(rightCurlyBracePoints); const newRightCurlyBracePath = rightCurlyBracePath.replace("Z", ""); const rightCurlyBraceNode = rc.path(newRightCurlyBracePath, options); const rectPath = createPathFromPoints(rectPoints); const rectShape = rc.path(rectPath, __spreadValues({}, options)); const curlyBracesShape = shapeSvg.insert("g", ":first-child"); curlyBracesShape.insert(() => rectShape, ":first-child").attr("stroke-opacity", 0); curlyBracesShape.insert(() => leftCurlyBraceNode, ":first-child"); curlyBracesShape.insert(() => rightCurlyBraceNode, ":first-child"); curlyBracesShape.attr("class", "text"); if (cssStyles && node.look !== "handDrawn") { curlyBracesShape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { curlyBracesShape.selectAll("path").attr("style", nodeStyles); } curlyBracesShape.attr("transform", `translate(${radius - radius / 4}, 0)`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, curlyBracesShape); node.intersect = function(point) { const pos = intersect_default.polygon(node, rectPoints, point); return pos; }; return shapeSvg; } __name(curlyBraces, "curlyBraces"); async function curvedTrapezoid(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const minWidth = 80, minHeight = 20; const w2 = Math.max(minWidth, (bbox.width + (node.padding ?? 0) * 2) * 1.25, node?.width ?? 0); const h2 = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const radius = h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const totalWidth = w2, totalHeight = h2; const rw = totalWidth - radius; const tw = totalHeight / 4; const points = [ { x: rw, y: 0 }, { x: tw, y: 0 }, { x: 0, y: totalHeight / 2 }, { x: tw, y: totalHeight }, { x: rw, y: totalHeight }, ...generateCirclePoints(-rw, -totalHeight / 2, radius, 50, 270, 90) ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } polygon.attr("transform", `translate(${-w2 / 2}, ${-h2 / 2})`); updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(curvedTrapezoid, "curvedTrapezoid"); var createCylinderPathD = __name((x2, y2, width, height, rx, ry) => { return [ `M${x2},${y2 + ry}`, `a${rx},${ry} 0,0,0 ${width},0`, `a${rx},${ry} 0,0,0 ${-width},0`, `l0,${height}`, `a${rx},${ry} 0,0,0 ${width},0`, `l0,${-height}` ].join(" "); }, "createCylinderPathD"); var createOuterCylinderPathD = __name((x2, y2, width, height, rx, ry) => { return [ `M${x2},${y2 + ry}`, `M${x2 + width},${y2 + ry}`, `a${rx},${ry} 0,0,0 ${-width},0`, `l0,${height}`, `a${rx},${ry} 0,0,0 ${width},0`, `l0,${-height}` ].join(" "); }, "createOuterCylinderPathD"); var createInnerCylinderPathD = __name((x2, y2, width, height, rx, ry) => { return [`M${x2 - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(" "); }, "createInnerCylinderPathD"); async function cylinder(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + node.padding, node.width ?? 0); const rx = w2 / 2; const ry = rx / (2.5 + w2 / 50); const h2 = Math.max(bbox.height + ry + node.padding, node.height ?? 0); let cylinder2; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const outerPathData = createOuterCylinderPathD(0, 0, w2, h2, rx, ry); const innerPathData = createInnerCylinderPathD(0, ry, w2, h2, rx, ry); const outerNode = rc.path(outerPathData, userNodeOverrides(node, {})); const innerLine = rc.path(innerPathData, userNodeOverrides(node, { fill: "none" })); cylinder2 = shapeSvg.insert(() => innerLine, ":first-child"); cylinder2 = shapeSvg.insert(() => outerNode, ":first-child"); cylinder2.attr("class", "basic label-container"); if (cssStyles) { cylinder2.attr("style", cssStyles); } } else { const pathData = createCylinderPathD(0, 0, w2, h2, rx, ry); cylinder2 = shapeSvg.insert("path", ":first-child").attr("d", pathData).attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)).attr("style", nodeStyles); } cylinder2.attr("label-offset-y", ry); cylinder2.attr("transform", `translate(${-w2 / 2}, ${-(h2 / 2 + ry)})`); updateNodeBounds(node, cylinder2); label.attr( "transform", `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function(point) { const pos = intersect_default.rect(node, point); const x2 = pos.x - (node.x ?? 0); if (rx != 0 && (Math.abs(x2) < (node.width ?? 0) / 2 || Math.abs(x2) == (node.width ?? 0) / 2 && Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry)) { let y2 = ry * ry * (1 - x2 * x2 / (rx * rx)); if (y2 > 0) { y2 = Math.sqrt(y2); } y2 = ry - y2; if (point.y - (node.y ?? 0) > 0) { y2 = -y2; } pos.y += y2; } return pos; }; return shapeSvg; } __name(cylinder, "cylinder"); async function dividedRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + node.padding; const h2 = bbox.height + node.padding; const rectOffset = h2 * 0.2; const x2 = -w2 / 2; const y2 = -h2 / 2 - rectOffset / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const pts = [ { x: x2, y: y2 + rectOffset }, { x: -x2, y: y2 + rectOffset }, { x: -x2, y: -y2 }, { x: x2, y: -y2 }, { x: x2, y: y2 }, { x: -x2, y: y2 }, { x: -x2, y: y2 + rectOffset } ]; const poly = rc.polygon( pts.map((p2) => [p2.x, p2.y]), options ); const polygon = shapeSvg.insert(() => poly, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectAll("path").attr("style", nodeStyles); } label.attr( "transform", `translate(${x2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y2 + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.rect(node, point); return pos; }; return shapeSvg; } __name(dividedRectangle, "dividedRectangle"); async function doublecircle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node)); const gap = 5; const outerRadius = bbox.width / 2 + halfPadding + gap; const innerRadius = bbox.width / 2 + halfPadding; let circleGroup; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 }); const innerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 1.5 }); const outerRoughNode = rc.circle(0, 0, outerRadius * 2, outerOptions); const innerRoughNode = rc.circle(0, 0, innerRadius * 2, innerOptions); circleGroup = shapeSvg.insert("g", ":first-child"); circleGroup.attr("class", handleUndefinedAttr(node.cssClasses)).attr("style", handleUndefinedAttr(cssStyles)); circleGroup.node()?.appendChild(outerRoughNode); circleGroup.node()?.appendChild(innerRoughNode); } else { circleGroup = shapeSvg.insert("g", ":first-child"); const outerCircle = circleGroup.insert("circle", ":first-child"); const innerCircle = circleGroup.insert("circle"); circleGroup.attr("class", "basic label-container").attr("style", nodeStyles); outerCircle.attr("class", "outer-circle").attr("style", nodeStyles).attr("r", outerRadius).attr("cx", 0).attr("cy", 0); innerCircle.attr("class", "inner-circle").attr("style", nodeStyles).attr("r", innerRadius).attr("cx", 0).attr("cy", 0); } updateNodeBounds(node, circleGroup); node.intersect = function(point) { log.info("DoubleCircle intersect", node, outerRadius, point); return intersect_default.circle(node, outerRadius, point); }; return shapeSvg; } __name(doublecircle, "doublecircle"); function filledCircle(parent, node, { config: { themeVariables } }) { const { labelStyles, nodeStyles } = styles2String(node); node.label = ""; node.labelStyle = labelStyles; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId ?? node.id); const radius = 7; const { cssStyles } = node; const rc = at.svg(shapeSvg); const { nodeBorder } = themeVariables; const options = userNodeOverrides(node, { fillStyle: "solid" }); if (node.look !== "handDrawn") { options.roughness = 0; } const circleNode = rc.circle(0, 0, radius * 2, options); const filledCircle2 = shapeSvg.insert(() => circleNode, ":first-child"); filledCircle2.selectAll("path").attr("style", `fill: ${nodeBorder} !important;`); if (cssStyles && cssStyles.length > 0 && node.look !== "handDrawn") { filledCircle2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { filledCircle2.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, filledCircle2); node.intersect = function(point) { log.info("filledCircle intersect", node, { radius, point }); const pos = intersect_default.circle(node, radius, point); return pos; }; return shapeSvg; } __name(filledCircle, "filledCircle"); async function flippedTriangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + (node.padding ?? 0); const h2 = w2 + bbox.height; const tw = w2 + bbox.height; const points = [ { x: 0, y: -h2 }, { x: tw, y: -h2 }, { x: tw / 2, y: 0 } ]; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); const flippedTriangle2 = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-h2 / 2}, ${h2 / 2})`); if (cssStyles && node.look !== "handDrawn") { flippedTriangle2.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { flippedTriangle2.selectChildren("path").attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, flippedTriangle2); label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h2 / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function(point) { log.info("Triangle intersect", node, points, point); return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(flippedTriangle, "flippedTriangle"); function forkJoin(parent, node, { dir, config: { state: state2, themeVariables } }) { const { nodeStyles } = styles2String(node); node.label = ""; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId ?? node.id); const { cssStyles } = node; let width = Math.max(70, node?.width ?? 0); let height = Math.max(10, node?.height ?? 0); if (dir === "LR") { width = Math.max(10, node?.width ?? 0); height = Math.max(70, node?.height ?? 0); } const x2 = -1 * width / 2; const y2 = -1 * height / 2; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { stroke: themeVariables.lineColor, fill: themeVariables.lineColor }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const roughNode = rc.rectangle(x2, y2, width, height, options); const shape = shapeSvg.insert(() => roughNode, ":first-child"); if (cssStyles && node.look !== "handDrawn") { shape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { shape.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, shape); const padding = state2?.padding ?? 0; if (node.width && node.height) { node.width += padding / 2 || 0; node.height += padding / 2 || 0; } node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(forkJoin, "forkJoin"); async function halfRoundedRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const minWidth = 80, minHeight = 50; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(minWidth, bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const radius = h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2, y: -h2 / 2 }, { x: w2 / 2 - radius, y: -h2 / 2 }, ...generateCirclePoints(-w2 / 2 + radius, 0, radius, 50, 90, 270), { x: w2 / 2 - radius, y: h2 / 2 }, { x: -w2 / 2, y: h2 / 2 } ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.intersect = function(point) { log.info("Pill intersect", node, { radius, point }); const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(halfRoundedRectangle, "halfRoundedRectangle"); async function hexagon(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const h2 = bbox.height + (node.padding ?? 0); const w2 = bbox.width + (node.padding ?? 0) * 2.5; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } let halfWidth = w2 / 2; const m2 = halfWidth / 6; halfWidth = halfWidth + m2; const halfHeight = h2 / 2; const fixedLength = halfHeight / 2; const deducedWidth = halfWidth - fixedLength; const points = [ { x: -deducedWidth, y: -halfHeight }, { x: 0, y: -halfHeight }, { x: deducedWidth, y: -halfHeight }, { x: halfWidth, y: 0 }, { x: deducedWidth, y: halfHeight }, { x: 0, y: halfHeight }, { x: -deducedWidth, y: halfHeight }, { x: -halfWidth, y: 0 } ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(hexagon, "hexagon"); async function hourglass(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.label = ""; node.labelStyle = labelStyles; const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(30, node?.width ?? 0); const h2 = Math.max(30, node?.height ?? 0); const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: 0, y: 0 }, { x: w2, y: 0 }, { x: 0, y: h2 }, { x: w2, y: h2 } ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } polygon.attr("transform", `translate(${-w2 / 2}, ${-h2 / 2})`); updateNodeBounds(node, polygon); node.intersect = function(point) { log.info("Pill intersect", node, { points }); const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(hourglass, "hourglass"); async function icon(parent, node, { config: { themeVariables, flowchart } }) { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const assetHeight = node.assetHeight ?? 48; const assetWidth = node.assetWidth ?? 48; const iconSize = Math.max(assetHeight, assetWidth); const defaultWidth = flowchart?.wrappingWidth; node.width = Math.max(iconSize, defaultWidth ?? 0); const { shapeSvg, bbox, label } = await labelHelper(parent, node, "icon-shape default"); const topLabel = node.pos === "t"; const height = iconSize; const width = iconSize; const { nodeBorder } = themeVariables; const { stylesMap } = compileStyles(node); const x2 = -width / 2; const y2 = -height / 2; const labelPadding = node.label ? 8 : 0; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { stroke: "none", fill: "none" }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const iconNode = rc.rectangle(x2, y2, width, height, options); const outerWidth = Math.max(width, bbox.width); const outerHeight = height + bbox.height + labelPadding; const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, __spreadProps(__spreadValues({}, options), { fill: "transparent", stroke: "none" })); const iconShape = shapeSvg.insert(() => iconNode, ":first-child"); const outerShape = shapeSvg.insert(() => outerNode); if (node.icon) { const iconElem = shapeSvg.append("g"); iconElem.html( `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: "" })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; const iconHeight = iconBBox.height; const iconX = iconBBox.x; const iconY = iconBBox.y; iconElem.attr( "transform", `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` ); iconElem.attr("style", `color: ${stylesMap.get("stroke") ?? nodeBorder};`); } label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` ); iconShape.attr( "transform", `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` ); updateNodeBounds(node, outerShape); node.intersect = function(point) { log.info("iconSquare intersect", node, point); if (!node.label) { return intersect_default.rect(node, point); } const dx = node.x ?? 0; const dy = node.y ?? 0; const nodeHeight = node.height ?? 0; let points = []; if (topLabel) { points = [ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding } ]; } else { points = [ { x: dx - width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height } ]; } const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(icon, "icon"); async function iconCircle(parent, node, { config: { themeVariables, flowchart } }) { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const assetHeight = node.assetHeight ?? 48; const assetWidth = node.assetWidth ?? 48; const iconSize = Math.max(assetHeight, assetWidth); const defaultWidth = flowchart?.wrappingWidth; node.width = Math.max(iconSize, defaultWidth ?? 0); const { shapeSvg, bbox, label } = await labelHelper(parent, node, "icon-shape default"); const padding = 20; const labelPadding = node.label ? 8 : 0; const topLabel = node.pos === "t"; const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const fill = stylesMap.get("fill"); options.stroke = fill ?? mainBkg; const iconElem = shapeSvg.append("g"); if (node.icon) { iconElem.html( `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: "" })}` ); } const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; const iconHeight = iconBBox.height; const iconX = iconBBox.x; const iconY = iconBBox.y; const diameter = Math.max(iconWidth, iconHeight) * Math.SQRT2 + padding * 2; const iconNode = rc.circle(0, 0, diameter, options); const outerWidth = Math.max(diameter, bbox.width); const outerHeight = diameter + bbox.height + labelPadding; const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, __spreadProps(__spreadValues({}, options), { fill: "transparent", stroke: "none" })); const iconShape = shapeSvg.insert(() => iconNode, ":first-child"); const outerShape = shapeSvg.insert(() => outerNode); iconElem.attr( "transform", `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` ); iconElem.attr("style", `color: ${stylesMap.get("stroke") ?? nodeBorder};`); label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` ); iconShape.attr( "transform", `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` ); updateNodeBounds(node, outerShape); node.intersect = function(point) { log.info("iconSquare intersect", node, point); const pos = intersect_default.rect(node, point); return pos; }; return shapeSvg; } __name(iconCircle, "iconCircle"); async function iconRounded(parent, node, { config: { themeVariables, flowchart } }) { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const assetHeight = node.assetHeight ?? 48; const assetWidth = node.assetWidth ?? 48; const iconSize = Math.max(assetHeight, assetWidth); const defaultWidth = flowchart?.wrappingWidth; node.width = Math.max(iconSize, defaultWidth ?? 0); const { shapeSvg, bbox, halfPadding, label } = await labelHelper( parent, node, "icon-shape default" ); const topLabel = node.pos === "t"; const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); const x2 = -width / 2; const y2 = -height / 2; const labelPadding = node.label ? 8 : 0; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const fill = stylesMap.get("fill"); options.stroke = fill ?? mainBkg; const iconNode = rc.path(createRoundedRectPathD(x2, y2, width, height, 5), options); const outerWidth = Math.max(width, bbox.width); const outerHeight = height + bbox.height + labelPadding; const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, __spreadProps(__spreadValues({}, options), { fill: "transparent", stroke: "none" })); const iconShape = shapeSvg.insert(() => iconNode, ":first-child").attr("class", "icon-shape2"); const outerShape = shapeSvg.insert(() => outerNode); if (node.icon) { const iconElem = shapeSvg.append("g"); iconElem.html( `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: "" })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; const iconHeight = iconBBox.height; const iconX = iconBBox.x; const iconY = iconBBox.y; iconElem.attr( "transform", `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` ); iconElem.attr("style", `color: ${stylesMap.get("stroke") ?? nodeBorder};`); } label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` ); iconShape.attr( "transform", `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` ); updateNodeBounds(node, outerShape); node.intersect = function(point) { log.info("iconSquare intersect", node, point); if (!node.label) { return intersect_default.rect(node, point); } const dx = node.x ?? 0; const dy = node.y ?? 0; const nodeHeight = node.height ?? 0; let points = []; if (topLabel) { points = [ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding } ]; } else { points = [ { x: dx - width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height } ]; } const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(iconRounded, "iconRounded"); async function iconSquare(parent, node, { config: { themeVariables, flowchart } }) { const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const assetHeight = node.assetHeight ?? 48; const assetWidth = node.assetWidth ?? 48; const iconSize = Math.max(assetHeight, assetWidth); const defaultWidth = flowchart?.wrappingWidth; node.width = Math.max(iconSize, defaultWidth ?? 0); const { shapeSvg, bbox, halfPadding, label } = await labelHelper( parent, node, "icon-shape default" ); const topLabel = node.pos === "t"; const height = iconSize + halfPadding * 2; const width = iconSize + halfPadding * 2; const { nodeBorder, mainBkg } = themeVariables; const { stylesMap } = compileStyles(node); const x2 = -width / 2; const y2 = -height / 2; const labelPadding = node.label ? 8 : 0; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const fill = stylesMap.get("fill"); options.stroke = fill ?? mainBkg; const iconNode = rc.path(createRoundedRectPathD(x2, y2, width, height, 0.1), options); const outerWidth = Math.max(width, bbox.width); const outerHeight = height + bbox.height + labelPadding; const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, __spreadProps(__spreadValues({}, options), { fill: "transparent", stroke: "none" })); const iconShape = shapeSvg.insert(() => iconNode, ":first-child"); const outerShape = shapeSvg.insert(() => outerNode); if (node.icon) { const iconElem = shapeSvg.append("g"); iconElem.html( `${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: "" })}` ); const iconBBox = iconElem.node().getBBox(); const iconWidth = iconBBox.width; const iconHeight = iconBBox.height; const iconX = iconBBox.x; const iconY = iconBBox.y; iconElem.attr( "transform", `translate(${-iconWidth / 2 - iconX},${topLabel ? bbox.height / 2 + labelPadding / 2 - iconHeight / 2 - iconY : -bbox.height / 2 - labelPadding / 2 - iconHeight / 2 - iconY})` ); iconElem.attr("style", `color: ${stylesMap.get("stroke") ?? nodeBorder};`); } label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -outerHeight / 2 : outerHeight / 2 - bbox.height})` ); iconShape.attr( "transform", `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` ); updateNodeBounds(node, outerShape); node.intersect = function(point) { log.info("iconSquare intersect", node, point); if (!node.label) { return intersect_default.rect(node, point); } const dx = node.x ?? 0; const dy = node.y ?? 0; const nodeHeight = node.height ?? 0; let points = []; if (topLabel) { points = [ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy + nodeHeight / 2 }, { x: dx - width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding } ]; } else { points = [ { x: dx - width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 }, { x: dx + width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + height }, { x: dx - width / 2, y: dy - nodeHeight / 2 + height } ]; } const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(iconSquare, "iconSquare"); async function imageSquare(parent, node, { config: { flowchart } }) { const img = new Image(); img.src = node?.img ?? ""; await img.decode(); const imageNaturalWidth = Number(img.naturalWidth.toString().replace("px", "")); const imageNaturalHeight = Number(img.naturalHeight.toString().replace("px", "")); node.imageAspectRatio = imageNaturalWidth / imageNaturalHeight; const { labelStyles } = styles2String(node); node.labelStyle = labelStyles; const defaultWidth = flowchart?.wrappingWidth; node.defaultWidth = flowchart?.wrappingWidth; const imageRawWidth = Math.max( node.label ? defaultWidth ?? 0 : 0, node?.assetWidth ?? imageNaturalWidth ); const imageWidth = node.constraint === "on" ? node?.assetHeight ? node.assetHeight * node.imageAspectRatio : imageRawWidth : imageRawWidth; const imageHeight = node.constraint === "on" ? imageWidth / node.imageAspectRatio : node?.assetHeight ?? imageNaturalHeight; node.width = Math.max(imageWidth, defaultWidth ?? 0); const { shapeSvg, bbox, label } = await labelHelper(parent, node, "image-shape default"); const topLabel = node.pos === "t"; const x2 = -imageWidth / 2; const y2 = -imageHeight / 2; const labelPadding = node.label ? 8 : 0; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const imageNode = rc.rectangle(x2, y2, imageWidth, imageHeight, options); const outerWidth = Math.max(imageWidth, bbox.width); const outerHeight = imageHeight + bbox.height + labelPadding; const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, __spreadProps(__spreadValues({}, options), { fill: "none", stroke: "none" })); const iconShape = shapeSvg.insert(() => imageNode, ":first-child"); const outerShape = shapeSvg.insert(() => outerNode); if (node.img) { const image = shapeSvg.append("image"); image.attr("href", node.img); image.attr("width", imageWidth); image.attr("height", imageHeight); image.attr("preserveAspectRatio", "none"); image.attr( "transform", `translate(${-imageWidth / 2},${topLabel ? outerHeight / 2 - imageHeight : -outerHeight / 2})` ); } label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))},${topLabel ? -imageHeight / 2 - bbox.height / 2 - labelPadding / 2 : imageHeight / 2 - bbox.height / 2 + labelPadding / 2})` ); iconShape.attr( "transform", `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})` ); updateNodeBounds(node, outerShape); node.intersect = function(point) { log.info("iconSquare intersect", node, point); if (!node.label) { return intersect_default.rect(node, point); } const dx = node.x ?? 0; const dy = node.y ?? 0; const nodeHeight = node.height ?? 0; let points = []; if (topLabel) { points = [ { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + imageWidth / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx + imageWidth / 2, y: dy + nodeHeight / 2 }, { x: dx - imageWidth / 2, y: dy + nodeHeight / 2 }, { x: dx - imageWidth / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + bbox.height + labelPadding } ]; } else { points = [ { x: dx - imageWidth / 2, y: dy - nodeHeight / 2 }, { x: dx + imageWidth / 2, y: dy - nodeHeight / 2 }, { x: dx + imageWidth / 2, y: dy - nodeHeight / 2 + imageHeight }, { x: dx + bbox.width / 2, y: dy - nodeHeight / 2 + imageHeight }, { x: dx + bbox.width / 2 / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy + nodeHeight / 2 }, { x: dx - bbox.width / 2, y: dy - nodeHeight / 2 + imageHeight }, { x: dx - imageWidth / 2, y: dy - nodeHeight / 2 + imageHeight } ]; } const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(imageSquare, "imageSquare"); async function inv_trapezoid(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const points = [ { x: 0, y: 0 }, { x: w2, y: 0 }, { x: w2 + 3 * h2 / 6, y: -h2 }, { x: -3 * h2 / 6, y: -h2 } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-w2 / 2}, ${h2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w2, h2, points); } if (nodeStyles) { polygon.attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(inv_trapezoid, "inv_trapezoid"); async function drawRect(parent, node, options) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0); const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0); const x2 = -totalWidth / 2; const y2 = -totalHeight / 2; let rect2; let { rx, ry } = node; const { cssStyles } = node; if (options?.rx && options.ry) { rx = options.rx; ry = options.ry; } if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options2 = userNodeOverrides(node, {}); const roughNode = rx || ry ? rc.path(createRoundedRectPathD(x2, y2, totalWidth, totalHeight, rx || 0), options2) : rc.rectangle(x2, y2, totalWidth, totalHeight, options2); rect2 = shapeSvg.insert(() => roughNode, ":first-child"); rect2.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); } else { rect2 = shapeSvg.insert("rect", ":first-child"); rect2.attr("class", "basic label-container").attr("style", nodeStyles).attr("rx", handleUndefinedAttr(rx)).attr("ry", handleUndefinedAttr(ry)).attr("x", x2).attr("y", y2).attr("width", totalWidth).attr("height", totalHeight); } updateNodeBounds(node, rect2); node.calcIntersect = function(bounds, point) { return intersect_default.rect(bounds, point); }; node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(drawRect, "drawRect"); async function labelRect(parent, node) { const { shapeSvg, bbox, label } = await labelHelper(parent, node, "label"); const rect2 = shapeSvg.insert("rect", ":first-child"); const totalWidth = 0.1; const totalHeight = 0.1; rect2.attr("width", totalWidth).attr("height", totalHeight); shapeSvg.attr("class", "label edgeLabel"); label.attr( "transform", `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(labelRect, "labelRect"); async function lean_left(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0); const points = [ { x: 0, y: 0 }, { x: w2 + 3 * h2 / 6, y: 0 }, { x: w2, y: -h2 }, { x: -(3 * h2) / 6, y: -h2 } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-w2 / 2}, ${h2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w2, h2, points); } if (nodeStyles) { polygon.attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(lean_left, "lean_left"); async function lean_right(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0); const points = [ { x: -3 * h2 / 6, y: 0 }, { x: w2, y: 0 }, { x: w2 + 3 * h2 / 6, y: -h2 }, { x: 0, y: -h2 } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-w2 / 2}, ${h2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w2, h2, points); } if (nodeStyles) { polygon.attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(lean_right, "lean_right"); function lightningBolt(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.label = ""; node.labelStyle = labelStyles; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId ?? node.id); const { cssStyles } = node; const width = Math.max(35, node?.width ?? 0); const height = Math.max(35, node?.height ?? 0); const gap = 7; const points = [ { x: width, y: 0 }, { x: 0, y: height + gap / 2 }, { x: width - 2 * gap, y: height + gap / 2 }, { x: 0, y: 2 * height }, { x: width, y: height - gap / 2 }, { x: 2 * gap, y: height - gap / 2 } ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const linePath = createPathFromPoints(points); const lineNode = rc.path(linePath, options); const lightningBolt2 = shapeSvg.insert(() => lineNode, ":first-child"); if (cssStyles && node.look !== "handDrawn") { lightningBolt2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { lightningBolt2.selectAll("path").attr("style", nodeStyles); } lightningBolt2.attr("transform", `translate(-${width / 2},${-height})`); updateNodeBounds(node, lightningBolt2); node.intersect = function(point) { log.info("lightningBolt intersect", node, point); const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(lightningBolt, "lightningBolt"); var createCylinderPathD2 = __name((x2, y2, width, height, rx, ry, outerOffset) => { return [ `M${x2},${y2 + ry}`, `a${rx},${ry} 0,0,0 ${width},0`, `a${rx},${ry} 0,0,0 ${-width},0`, `l0,${height}`, `a${rx},${ry} 0,0,0 ${width},0`, `l0,${-height}`, `M${x2},${y2 + ry + outerOffset}`, `a${rx},${ry} 0,0,0 ${width},0` ].join(" "); }, "createCylinderPathD"); var createOuterCylinderPathD2 = __name((x2, y2, width, height, rx, ry, outerOffset) => { return [ `M${x2},${y2 + ry}`, `M${x2 + width},${y2 + ry}`, `a${rx},${ry} 0,0,0 ${-width},0`, `l0,${height}`, `a${rx},${ry} 0,0,0 ${width},0`, `l0,${-height}`, `M${x2},${y2 + ry + outerOffset}`, `a${rx},${ry} 0,0,0 ${width},0` ].join(" "); }, "createOuterCylinderPathD"); var createInnerCylinderPathD2 = __name((x2, y2, width, height, rx, ry) => { return [`M${x2 - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(" "); }, "createInnerCylinderPathD"); async function linedCylinder(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0), node.width ?? 0); const rx = w2 / 2; const ry = rx / (2.5 + w2 / 50); const h2 = Math.max(bbox.height + ry + (node.padding ?? 0), node.height ?? 0); const outerOffset = h2 * 0.1; let cylinder2; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const outerPathData = createOuterCylinderPathD2(0, 0, w2, h2, rx, ry, outerOffset); const innerPathData = createInnerCylinderPathD2(0, ry, w2, h2, rx, ry); const options = userNodeOverrides(node, {}); const outerNode = rc.path(outerPathData, options); const innerLine = rc.path(innerPathData, options); const innerLineEl = shapeSvg.insert(() => innerLine, ":first-child"); innerLineEl.attr("class", "line"); cylinder2 = shapeSvg.insert(() => outerNode, ":first-child"); cylinder2.attr("class", "basic label-container"); if (cssStyles) { cylinder2.attr("style", cssStyles); } } else { const pathData = createCylinderPathD2(0, 0, w2, h2, rx, ry, outerOffset); cylinder2 = shapeSvg.insert("path", ":first-child").attr("d", pathData).attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)).attr("style", nodeStyles); } cylinder2.attr("label-offset-y", ry); cylinder2.attr("transform", `translate(${-w2 / 2}, ${-(h2 / 2 + ry)})`); updateNodeBounds(node, cylinder2); label.attr( "transform", `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})` ); node.intersect = function(point) { const pos = intersect_default.rect(node, point); const x2 = pos.x - (node.x ?? 0); if (rx != 0 && (Math.abs(x2) < (node.width ?? 0) / 2 || Math.abs(x2) == (node.width ?? 0) / 2 && Math.abs(pos.y - (node.y ?? 0)) > (node.height ?? 0) / 2 - ry)) { let y2 = ry * ry * (1 - x2 * x2 / (rx * rx)); if (y2 > 0) { y2 = Math.sqrt(y2); } y2 = ry - y2; if (point.y - (node.y ?? 0) > 0) { y2 = -y2; } pos.y += y2; } return pos; }; return shapeSvg; } __name(linedCylinder, "linedCylinder"); async function linedWaveEdgedRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const waveAmplitude = h2 / 4; const finalH = h2 + waveAmplitude; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2 - w2 / 2 * 0.1, y: -finalH / 2 }, { x: -w2 / 2 - w2 / 2 * 0.1, y: finalH / 2 }, ...generateFullSineWavePoints( -w2 / 2 - w2 / 2 * 0.1, finalH / 2, w2 / 2 + w2 / 2 * 0.1, finalH / 2, waveAmplitude, 0.8 ), { x: w2 / 2 + w2 / 2 * 0.1, y: -finalH / 2 }, { x: -w2 / 2 - w2 / 2 * 0.1, y: -finalH / 2 }, { x: -w2 / 2, y: -finalH / 2 }, { x: -w2 / 2, y: finalH / 2 * 1.1 }, { x: -w2 / 2, y: -finalH / 2 } ]; const poly = rc.polygon( points.map((p2) => [p2.x, p2.y]), options ); const waveEdgeRect = shapeSvg.insert(() => poly, ":first-child"); waveEdgeRect.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", nodeStyles); } waveEdgeRect.attr("transform", `translate(0,${-waveAmplitude / 2})`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) + w2 / 2 * 0.1 / 2 - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(linedWaveEdgedRect, "linedWaveEdgedRect"); async function multiRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const rectOffset = 5; const x2 = -w2 / 2; const y2 = -h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const outerPathPoints = [ { x: x2 - rectOffset, y: y2 + rectOffset }, { x: x2 - rectOffset, y: y2 + h2 + rectOffset }, { x: x2 + w2 - rectOffset, y: y2 + h2 + rectOffset }, { x: x2 + w2 - rectOffset, y: y2 + h2 }, { x: x2 + w2, y: y2 + h2 }, { x: x2 + w2, y: y2 + h2 - rectOffset }, { x: x2 + w2 + rectOffset, y: y2 + h2 - rectOffset }, { x: x2 + w2 + rectOffset, y: y2 - rectOffset }, { x: x2 + rectOffset, y: y2 - rectOffset }, { x: x2 + rectOffset, y: y2 }, { x: x2, y: y2 }, { x: x2, y: y2 + rectOffset } ]; const innerPathPoints = [ { x: x2, y: y2 + rectOffset }, { x: x2 + w2 - rectOffset, y: y2 + rectOffset }, { x: x2 + w2 - rectOffset, y: y2 + h2 }, { x: x2 + w2, y: y2 + h2 }, { x: x2 + w2, y: y2 }, { x: x2, y: y2 } ]; if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const outerPath = createPathFromPoints(outerPathPoints); const outerNode = rc.path(outerPath, options); const innerPath = createPathFromPoints(innerPathPoints); const innerNode = rc.path(innerPath, __spreadProps(__spreadValues({}, options), { fill: "none" })); const multiRect2 = shapeSvg.insert(() => innerNode, ":first-child"); multiRect2.insert(() => outerNode, ":first-child"); multiRect2.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { multiRect2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { multiRect2.selectAll("path").attr("style", nodeStyles); } label.attr( "transform", `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, multiRect2); node.intersect = function(point) { const pos = intersect_default.polygon(node, outerPathPoints, point); return pos; }; return shapeSvg; } __name(multiRect, "multiRect"); async function multiWaveEdgedRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const waveAmplitude = h2 / 4; const finalH = h2 + waveAmplitude; const x2 = -w2 / 2; const y2 = -finalH / 2; const rectOffset = 5; const { cssStyles } = node; const wavePoints = generateFullSineWavePoints( x2 - rectOffset, y2 + finalH + rectOffset, x2 + w2 - rectOffset, y2 + finalH + rectOffset, waveAmplitude, 0.8 ); const lastWavePoint = wavePoints?.[wavePoints.length - 1]; const outerPathPoints = [ { x: x2 - rectOffset, y: y2 + rectOffset }, { x: x2 - rectOffset, y: y2 + finalH + rectOffset }, ...wavePoints, { x: x2 + w2 - rectOffset, y: lastWavePoint.y - rectOffset }, { x: x2 + w2, y: lastWavePoint.y - rectOffset }, { x: x2 + w2, y: lastWavePoint.y - 2 * rectOffset }, { x: x2 + w2 + rectOffset, y: lastWavePoint.y - 2 * rectOffset }, { x: x2 + w2 + rectOffset, y: y2 - rectOffset }, { x: x2 + rectOffset, y: y2 - rectOffset }, { x: x2 + rectOffset, y: y2 }, { x: x2, y: y2 }, { x: x2, y: y2 + rectOffset } ]; const innerPathPoints = [ { x: x2, y: y2 + rectOffset }, { x: x2 + w2 - rectOffset, y: y2 + rectOffset }, { x: x2 + w2 - rectOffset, y: lastWavePoint.y - rectOffset }, { x: x2 + w2, y: lastWavePoint.y - rectOffset }, { x: x2 + w2, y: y2 }, { x: x2, y: y2 } ]; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const outerPath = createPathFromPoints(outerPathPoints); const outerNode = rc.path(outerPath, options); const innerPath = createPathFromPoints(innerPathPoints); const innerNode = rc.path(innerPath, options); const shape = shapeSvg.insert(() => outerNode, ":first-child"); shape.insert(() => innerNode); shape.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { shape.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { shape.selectAll("path").attr("style", nodeStyles); } shape.attr("transform", `translate(0,${-waveAmplitude / 2})`); label.attr( "transform", `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, shape); node.intersect = function(point) { const pos = intersect_default.polygon(node, outerPathPoints, point); return pos; }; return shapeSvg; } __name(multiWaveEdgedRectangle, "multiWaveEdgedRectangle"); async function note(parent, node, { config: { themeVariables } }) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart?.htmlLabels !== false; if (!useHtmlLabels) { node.centerLabel = true; } const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const x2 = -totalWidth / 2; const y2 = -totalHeight / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, { fill: themeVariables.noteBkgColor, stroke: themeVariables.noteBorderColor }); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const noteShapeNode = rc.rectangle(x2, y2, totalWidth, totalHeight, options); const rect2 = shapeSvg.insert(() => noteShapeNode, ":first-child"); rect2.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { rect2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { rect2.selectAll("path").attr("style", nodeStyles); } label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(note, "note"); var createDecisionBoxPathD = __name((x2, y2, size) => { return [ `M${x2 + size / 2},${y2}`, `L${x2 + size},${y2 - size / 2}`, `L${x2 + size / 2},${y2 - size}`, `L${x2},${y2 - size / 2}`, "Z" ].join(" "); }, "createDecisionBoxPathD"); async function question(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + node.padding; const h2 = bbox.height + node.padding; const s2 = w2 + h2; const adjustment = 0.5; const points = [ { x: s2 / 2, y: 0 }, { x: s2, y: -s2 / 2 }, { x: s2 / 2, y: -s2 }, { x: 0, y: -s2 / 2 } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createDecisionBoxPathD(0, 0, s2); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-s2 / 2 + adjustment}, ${s2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, s2, s2, points); polygon.attr("transform", `translate(${-s2 / 2 + adjustment}, ${s2 / 2})`); } if (nodeStyles) { polygon.attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.calcIntersect = function(bounds, point) { const s22 = bounds.width; const points2 = [ { x: s22 / 2, y: 0 }, { x: s22, y: -s22 / 2 }, { x: s22 / 2, y: -s22 }, { x: 0, y: -s22 / 2 } ]; const res = intersect_default.polygon(bounds, points2, point); return { x: res.x - 0.5, y: res.y - 0.5 }; }; node.intersect = function(point) { return this.calcIntersect(node, point); }; return shapeSvg; } __name(question, "question"); async function rect_left_inv_arrow(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0), node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0), node?.height ?? 0); const x2 = -w2 / 2; const y2 = -h2 / 2; const notch = y2 / 2; const points = [ { x: x2 + notch, y: y2 }, { x: x2, y: 0 }, { x: x2 + notch, y: -y2 }, { x: -x2, y: -y2 }, { x: -x2, y: y2 } ]; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => roughNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectAll("path").attr("style", nodeStyles); } polygon.attr("transform", `translate(${-notch / 2},0)`); label.attr( "transform", `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(rect_left_inv_arrow, "rect_left_inv_arrow"); async function rectWithTitle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; let classes; if (!node.cssClasses) { classes = "node default"; } else { classes = "node " + node.cssClasses; } const shapeSvg = parent.insert("g").attr("class", classes).attr("id", node.domId || node.id); const g2 = shapeSvg.insert("g"); const label = shapeSvg.insert("g").attr("class", "label").attr("style", nodeStyles); const description = node.description; const title = node.label; const text2 = label.node().appendChild(await createLabel_default(title, node.labelStyle, true, true)); let bbox = { width: 0, height: 0 }; if (evaluate(getConfig2()?.flowchart?.htmlLabels)) { const div2 = text2.children[0]; const dv2 = select_default(text2); bbox = div2.getBoundingClientRect(); dv2.attr("width", bbox.width); dv2.attr("height", bbox.height); } log.info("Text 2", description); const textRows = description || []; const titleBox = text2.getBBox(); const descr = label.node().appendChild( await createLabel_default( textRows.join ? textRows.join("
") : textRows, node.labelStyle, true, true ) ); const div = descr.children[0]; const dv = select_default(descr); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); const halfPadding = (node.padding || 0) / 2; select_default(descr).attr( "transform", "translate( " + (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) + ", " + (titleBox.height + halfPadding + 5) + ")" ); select_default(text2).attr( "transform", "translate( " + (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) + ", 0)" ); bbox = label.node().getBBox(); label.attr( "transform", "translate(" + -bbox.width / 2 + ", " + (-bbox.height / 2 - halfPadding + 3) + ")" ); const totalWidth = bbox.width + (node.padding || 0); const totalHeight = bbox.height + (node.padding || 0); const x2 = -bbox.width / 2 - halfPadding; const y2 = -bbox.height / 2 - halfPadding; let rect2; let innerLine; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const roughNode = rc.path( createRoundedRectPathD(x2, y2, totalWidth, totalHeight, node.rx || 0), options ); const roughLine = rc.line( -bbox.width / 2 - halfPadding, -bbox.height / 2 - halfPadding + titleBox.height + halfPadding, bbox.width / 2 + halfPadding, -bbox.height / 2 - halfPadding + titleBox.height + halfPadding, options ); innerLine = shapeSvg.insert(() => { log.debug("Rough node insert CXC", roughNode); return roughLine; }, ":first-child"); rect2 = shapeSvg.insert(() => { log.debug("Rough node insert CXC", roughNode); return roughNode; }, ":first-child"); } else { rect2 = g2.insert("rect", ":first-child"); innerLine = g2.insert("line"); rect2.attr("class", "outer title-state").attr("style", nodeStyles).attr("x", -bbox.width / 2 - halfPadding).attr("y", -bbox.height / 2 - halfPadding).attr("width", bbox.width + (node.padding || 0)).attr("height", bbox.height + (node.padding || 0)); innerLine.attr("class", "divider").attr("x1", -bbox.width / 2 - halfPadding).attr("x2", bbox.width / 2 + halfPadding).attr("y1", -bbox.height / 2 - halfPadding + titleBox.height + halfPadding).attr("y2", -bbox.height / 2 - halfPadding + titleBox.height + halfPadding); } updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(rectWithTitle, "rectWithTitle"); function generateArcPoints2(x1, y1, x2, y2, rx, ry, clockwise) { const numPoints = 20; const midX = (x1 + x2) / 2; const midY = (y1 + y2) / 2; const angle = Math.atan2(y2 - y1, x2 - x1); const dx = (x2 - x1) / 2; const dy = (y2 - y1) / 2; const transformedX = dx / rx; const transformedY = dy / ry; const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2); if (distance > 1) { throw new Error("The given radii are too small to create an arc between the points."); } const scaledCenterDistance = Math.sqrt(1 - distance ** 2); const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1); const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1); const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx); const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx); let angleRange = endAngle - startAngle; if (clockwise && angleRange < 0) { angleRange += 2 * Math.PI; } if (!clockwise && angleRange > 0) { angleRange -= 2 * Math.PI; } const points = []; for (let i2 = 0; i2 < numPoints; i2++) { const t2 = i2 / (numPoints - 1); const angle2 = startAngle + t2 * angleRange; const x3 = centerX + rx * Math.cos(angle2); const y3 = centerY + ry * Math.sin(angle2); points.push({ x: x3, y: y3 }); } return points; } __name(generateArcPoints2, "generateArcPoints"); async function roundedRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const labelPaddingX = node?.padding ?? 0; const labelPaddingY = node?.padding ?? 0; const w2 = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2; const h2 = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2; const radius = node.radius || 5; const taper = node.taper || 5; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.stroke) { options.stroke = node.stroke; } if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ // Top edge (left to right) { x: -w2 / 2 + taper, y: -h2 / 2 }, // Top-left corner start (1) { x: w2 / 2 - taper, y: -h2 / 2 }, // Top-right corner start (2) ...generateArcPoints2(w2 / 2 - taper, -h2 / 2, w2 / 2, -h2 / 2 + taper, radius, radius, true), // Top-left arc (2 to 3) // Right edge (top to bottom) { x: w2 / 2, y: -h2 / 2 + taper }, // Top-right taper point (3) { x: w2 / 2, y: h2 / 2 - taper }, // Bottom-right taper point (4) ...generateArcPoints2(w2 / 2, h2 / 2 - taper, w2 / 2 - taper, h2 / 2, radius, radius, true), // Top-left arc (4 to 5) // Bottom edge (right to left) { x: w2 / 2 - taper, y: h2 / 2 }, // Bottom-right corner start (5) { x: -w2 / 2 + taper, y: h2 / 2 }, // Bottom-left corner start (6) ...generateArcPoints2(-w2 / 2 + taper, h2 / 2, -w2 / 2, h2 / 2 - taper, radius, radius, true), // Top-left arc (4 to 5) // Left edge (bottom to top) { x: -w2 / 2, y: h2 / 2 - taper }, // Bottom-left taper point (7) { x: -w2 / 2, y: -h2 / 2 + taper }, // Top-left taper point (8) ...generateArcPoints2(-w2 / 2, -h2 / 2 + taper, -w2 / 2 + taper, -h2 / 2, radius, radius, true) // Top-left arc (4 to 5) ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container outer-path"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(roundedRect, "roundedRect"); async function shadedProcess(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const halfPadding = node?.padding ?? 0; const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const x2 = -bbox.width / 2 - halfPadding; const y2 = -bbox.height / 2 - halfPadding; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: x2, y: y2 }, { x: x2 + w2 + 8, y: y2 }, { x: x2 + w2 + 8, y: y2 + h2 }, { x: x2 - 8, y: y2 + h2 }, { x: x2 - 8, y: y2 }, { x: x2, y: y2 }, { x: x2, y: y2 + h2 } ]; const roughNode = rc.polygon( points.map((p2) => [p2.x, p2.y]), options ); const rect2 = shapeSvg.insert(() => roughNode, ":first-child"); rect2.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); if (nodeStyles && node.look !== "handDrawn") { rect2.selectAll("path").attr("style", nodeStyles); } if (cssStyles && node.look !== "handDrawn") { rect2.selectAll("path").attr("style", nodeStyles); } label.attr( "transform", `translate(${-w2 / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(shadedProcess, "shadedProcess"); async function slopedRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const x2 = -w2 / 2; const y2 = -h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: x2, y: y2 }, { x: x2, y: y2 + h2 }, { x: x2 + w2, y: y2 + h2 }, { x: x2 + w2, y: y2 - h2 / 2 } ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } polygon.attr("transform", `translate(0, ${h2 / 4})`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h2 / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(slopedRect, "slopedRect"); async function squareRect2(parent, node) { const options = { rx: 0, ry: 0, classes: "", labelPaddingX: node.labelPaddingX ?? (node?.padding || 0) * 2, labelPaddingY: (node?.padding || 0) * 1 }; return drawRect(parent, node, options); } __name(squareRect2, "squareRect"); async function stadium(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const h2 = bbox.height + node.padding; const w2 = bbox.width + h2 / 4 + node.padding; const radius = h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2 + radius, y: -h2 / 2 }, { x: w2 / 2 - radius, y: -h2 / 2 }, ...generateCirclePoints(-w2 / 2 + radius, 0, radius, 50, 90, 270), { x: w2 / 2 - radius, y: h2 / 2 }, ...generateCirclePoints(w2 / 2 - radius, 0, radius, 50, 270, 450) ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container outer-path"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(stadium, "stadium"); async function state(parent, node) { const options = { rx: 5, ry: 5, classes: "flowchart-node" }; return drawRect(parent, node, options); } __name(state, "state"); function stateEnd(parent, node, { config: { themeVariables } }) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { cssStyles } = node; const { lineColor, stateBorder, nodeBorder } = themeVariables; const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id); const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const roughNode = rc.circle(0, 0, 14, __spreadProps(__spreadValues({}, options), { stroke: lineColor, strokeWidth: 2 })); const innerFill = stateBorder ?? nodeBorder; const roughInnerNode = rc.circle(0, 0, 5, __spreadProps(__spreadValues({}, options), { fill: innerFill, stroke: innerFill, strokeWidth: 2, fillStyle: "solid" })); const circle2 = shapeSvg.insert(() => roughNode, ":first-child"); circle2.insert(() => roughInnerNode); if (cssStyles) { circle2.selectAll("path").attr("style", cssStyles); } if (nodeStyles) { circle2.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, circle2); node.intersect = function(point) { return intersect_default.circle(node, 7, point); }; return shapeSvg; } __name(stateEnd, "stateEnd"); function stateStart(parent, node, { config: { themeVariables } }) { const { lineColor } = themeVariables; const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id); let circle2; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor)); circle2 = shapeSvg.insert(() => roughNode); circle2.attr("class", "state-start").attr("r", 7).attr("width", 14).attr("height", 14); } else { circle2 = shapeSvg.insert("circle", ":first-child"); circle2.attr("class", "state-start").attr("r", 7).attr("width", 14).attr("height", 14); } updateNodeBounds(node, circle2); node.intersect = function(point) { return intersect_default.circle(node, 7, point); }; return shapeSvg; } __name(stateStart, "stateStart"); async function subroutine(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const halfPadding = (node?.padding || 0) / 2; const w2 = bbox.width + node.padding; const h2 = bbox.height + node.padding; const x2 = -bbox.width / 2 - halfPadding; const y2 = -bbox.height / 2 - halfPadding; const points = [ { x: 0, y: 0 }, { x: w2, y: 0 }, { x: w2, y: -h2 }, { x: 0, y: -h2 }, { x: 0, y: 0 }, { x: -8, y: 0 }, { x: w2 + 8, y: 0 }, { x: w2 + 8, y: -h2 }, { x: -8, y: -h2 }, { x: -8, y: 0 } ]; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const roughNode = rc.rectangle(x2 - 8, y2, w2 + 16, h2, options); const l1 = rc.line(x2, y2, x2, y2 + h2, options); const l2 = rc.line(x2 + w2, y2, x2 + w2, y2 + h2, options); shapeSvg.insert(() => l1, ":first-child"); shapeSvg.insert(() => l2, ":first-child"); const rect2 = shapeSvg.insert(() => roughNode, ":first-child"); const { cssStyles } = node; rect2.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); updateNodeBounds(node, rect2); } else { const el = insertPolygonShape(shapeSvg, w2, h2, points); if (nodeStyles) { el.attr("style", nodeStyles); } updateNodeBounds(node, el); } node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(subroutine, "subroutine"); async function taggedRect(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const x2 = -w2 / 2; const y2 = -h2 / 2; const tagWidth = 0.2 * h2; const tagHeight = 0.2 * h2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const rectPoints = [ { x: x2 - tagWidth / 2, y: y2 }, { x: x2 + w2 + tagWidth / 2, y: y2 }, { x: x2 + w2 + tagWidth / 2, y: y2 + h2 }, { x: x2 - tagWidth / 2, y: y2 + h2 } ]; const tagPoints = [ { x: x2 + w2 - tagWidth / 2, y: y2 + h2 }, { x: x2 + w2 + tagWidth / 2, y: y2 + h2 }, { x: x2 + w2 + tagWidth / 2, y: y2 + h2 - tagHeight } ]; if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const rectPath = createPathFromPoints(rectPoints); const rectNode = rc.path(rectPath, options); const tagPath = createPathFromPoints(tagPoints); const tagNode = rc.path(tagPath, __spreadProps(__spreadValues({}, options), { fillStyle: "solid" })); const taggedRect2 = shapeSvg.insert(() => tagNode, ":first-child"); taggedRect2.insert(() => rectNode, ":first-child"); taggedRect2.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { taggedRect2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { taggedRect2.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, taggedRect2); node.intersect = function(point) { const pos = intersect_default.polygon(node, rectPoints, point); return pos; }; return shapeSvg; } __name(taggedRect, "taggedRect"); async function taggedWaveEdgedRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const waveAmplitude = h2 / 4; const tagWidth = 0.2 * w2; const tagHeight = 0.2 * h2; const finalH = h2 + waveAmplitude; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2 - w2 / 2 * 0.1, y: finalH / 2 }, ...generateFullSineWavePoints( -w2 / 2 - w2 / 2 * 0.1, finalH / 2, w2 / 2 + w2 / 2 * 0.1, finalH / 2, waveAmplitude, 0.8 ), { x: w2 / 2 + w2 / 2 * 0.1, y: -finalH / 2 }, { x: -w2 / 2 - w2 / 2 * 0.1, y: -finalH / 2 } ]; const x2 = -w2 / 2 + w2 / 2 * 0.1; const y2 = -finalH / 2 - tagHeight * 0.4; const tagPoints = [ { x: x2 + w2 - tagWidth, y: (y2 + h2) * 1.4 }, { x: x2 + w2, y: y2 + h2 - tagHeight }, { x: x2 + w2, y: (y2 + h2) * 0.9 }, ...generateFullSineWavePoints( x2 + w2, (y2 + h2) * 1.3, x2 + w2 - tagWidth, (y2 + h2) * 1.5, -h2 * 0.03, 0.5 ) ]; const waveEdgeRectPath = createPathFromPoints(points); const waveEdgeRectNode = rc.path(waveEdgeRectPath, options); const taggedWaveEdgeRectPath = createPathFromPoints(tagPoints); const taggedWaveEdgeRectNode = rc.path(taggedWaveEdgeRectPath, __spreadProps(__spreadValues({}, options), { fillStyle: "solid" })); const waveEdgeRect = shapeSvg.insert(() => taggedWaveEdgeRectNode, ":first-child"); waveEdgeRect.insert(() => waveEdgeRectNode, ":first-child"); waveEdgeRect.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", nodeStyles); } waveEdgeRect.attr("transform", `translate(0,${-waveAmplitude / 2})`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(taggedWaveEdgedRectangle, "taggedWaveEdgedRectangle"); async function text(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const totalWidth = Math.max(bbox.width + node.padding, node?.width || 0); const totalHeight = Math.max(bbox.height + node.padding, node?.height || 0); const x2 = -totalWidth / 2; const y2 = -totalHeight / 2; const rect2 = shapeSvg.insert("rect", ":first-child"); rect2.attr("class", "text").attr("style", nodeStyles).attr("rx", 0).attr("ry", 0).attr("x", x2).attr("y", y2).attr("width", totalWidth).attr("height", totalHeight); updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(text, "text"); var createCylinderPathD3 = __name((x2, y2, width, height, rx, ry) => { return `M${x2},${y2} a${rx},${ry} 0,0,1 ${0},${-height} l${width},${0} a${rx},${ry} 0,0,1 ${0},${height} M${width},${-height} a${rx},${ry} 0,0,0 ${0},${height} l${-width},${0}`; }, "createCylinderPathD"); var createOuterCylinderPathD3 = __name((x2, y2, width, height, rx, ry) => { return [ `M${x2},${y2}`, `M${x2 + width},${y2}`, `a${rx},${ry} 0,0,0 ${0},${-height}`, `l${-width},0`, `a${rx},${ry} 0,0,0 ${0},${height}`, `l${width},0` ].join(" "); }, "createOuterCylinderPathD"); var createInnerCylinderPathD3 = __name((x2, y2, width, height, rx, ry) => { return [`M${x2 + width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 0,${height}`].join(" "); }, "createInnerCylinderPathD"); async function tiltedCylinder(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label, halfPadding } = await labelHelper( parent, node, getNodeClasses(node) ); const labelPadding = node.look === "neo" ? halfPadding * 2 : halfPadding; const h2 = bbox.height + labelPadding; const ry = h2 / 2; const rx = ry / (2.5 + h2 / 50); const w2 = bbox.width + rx + labelPadding; const { cssStyles } = node; let cylinder2; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const outerPathData = createOuterCylinderPathD3(0, 0, w2, h2, rx, ry); const innerPathData = createInnerCylinderPathD3(0, 0, w2, h2, rx, ry); const outerNode = rc.path(outerPathData, userNodeOverrides(node, {})); const innerLine = rc.path(innerPathData, userNodeOverrides(node, { fill: "none" })); cylinder2 = shapeSvg.insert(() => innerLine, ":first-child"); cylinder2 = shapeSvg.insert(() => outerNode, ":first-child"); cylinder2.attr("class", "basic label-container"); if (cssStyles) { cylinder2.attr("style", cssStyles); } } else { const pathData = createCylinderPathD3(0, 0, w2, h2, rx, ry); cylinder2 = shapeSvg.insert("path", ":first-child").attr("d", pathData).attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)).attr("style", nodeStyles); cylinder2.attr("class", "basic label-container"); if (cssStyles) { cylinder2.selectAll("path").attr("style", cssStyles); } if (nodeStyles) { cylinder2.selectAll("path").attr("style", nodeStyles); } } cylinder2.attr("label-offset-x", rx); cylinder2.attr("transform", `translate(${-w2 / 2}, ${h2 / 2} )`); label.attr( "transform", `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, cylinder2); node.intersect = function(point) { const pos = intersect_default.rect(node, point); const y2 = pos.y - (node.y ?? 0); if (ry != 0 && (Math.abs(y2) < (node.height ?? 0) / 2 || Math.abs(y2) == (node.height ?? 0) / 2 && Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx)) { let x2 = rx * rx * (1 - y2 * y2 / (ry * ry)); if (x2 != 0) { x2 = Math.sqrt(Math.abs(x2)); } x2 = rx - x2; if (point.x - (node.x ?? 0) > 0) { x2 = -x2; } pos.x += x2; } return pos; }; return shapeSvg; } __name(tiltedCylinder, "tiltedCylinder"); async function trapezoid(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = bbox.width + node.padding; const h2 = bbox.height + node.padding; const points = [ { x: -3 * h2 / 6, y: 0 }, { x: w2 + 3 * h2 / 6, y: 0 }, { x: w2, y: -h2 }, { x: 0, y: -h2 } ]; let polygon; const { cssStyles } = node; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-w2 / 2}, ${h2 / 2})`); if (cssStyles) { polygon.attr("style", cssStyles); } } else { polygon = insertPolygonShape(shapeSvg, w2, h2, points); } if (nodeStyles) { polygon.attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); node.intersect = function(point) { return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(trapezoid, "trapezoid"); async function trapezoidalPentagon(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const minWidth = 60, minHeight = 20; const w2 = Math.max(minWidth, bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2 * 0.8, y: -h2 / 2 }, { x: w2 / 2 * 0.8, y: -h2 / 2 }, { x: w2 / 2, y: -h2 / 2 * 0.6 }, { x: w2 / 2, y: h2 / 2 }, { x: -w2 / 2, y: h2 / 2 }, { x: -w2 / 2, y: -h2 / 2 * 0.6 } ]; const pathData = createPathFromPoints(points); const shapeNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => shapeNode, ":first-child"); polygon.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } updateNodeBounds(node, polygon); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(trapezoidalPentagon, "trapezoidalPentagon"); async function triangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const useHtmlLabels = evaluate(getConfig2().flowchart?.htmlLabels); const w2 = bbox.width + (node.padding ?? 0); const h2 = w2 + bbox.height; const tw = w2 + bbox.height; const points = [ { x: 0, y: 0 }, { x: tw, y: 0 }, { x: tw / 2, y: -h2 } ]; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const pathData = createPathFromPoints(points); const roughNode = rc.path(pathData, options); const polygon = shapeSvg.insert(() => roughNode, ":first-child").attr("transform", `translate(${-h2 / 2}, ${h2 / 2})`); if (cssStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { polygon.selectChildren("path").attr("style", nodeStyles); } node.width = w2; node.height = h2; updateNodeBounds(node, polygon); label.attr( "transform", `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h2 / 2 - (bbox.height + (node.padding ?? 0) / (useHtmlLabels ? 2 : 1) - (bbox.y - (bbox.top ?? 0)))})` ); node.intersect = function(point) { log.info("Triangle intersect", node, points, point); return intersect_default.polygon(node, points, point); }; return shapeSvg; } __name(triangle, "triangle"); async function waveEdgedRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const waveAmplitude = h2 / 8; const finalH = h2 + waveAmplitude; const { cssStyles } = node; const minWidth = 70; const widthDif = minWidth - w2; const extraW = widthDif > 0 ? widthDif / 2 : 0; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2 - extraW, y: finalH / 2 }, ...generateFullSineWavePoints( -w2 / 2 - extraW, finalH / 2, w2 / 2 + extraW, finalH / 2, waveAmplitude, 0.8 ), { x: w2 / 2 + extraW, y: -finalH / 2 }, { x: -w2 / 2 - extraW, y: -finalH / 2 } ]; const waveEdgeRectPath = createPathFromPoints(points); const waveEdgeRectNode = rc.path(waveEdgeRectPath, options); const waveEdgeRect = shapeSvg.insert(() => waveEdgeRectNode, ":first-child"); waveEdgeRect.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { waveEdgeRect.selectAll("path").attr("style", nodeStyles); } waveEdgeRect.attr("transform", `translate(0,${-waveAmplitude / 2})`); label.attr( "transform", `translate(${-w2 / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h2 / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, waveEdgeRect); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(waveEdgedRectangle, "waveEdgedRectangle"); async function waveRectangle(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const minWidth = 100; const minHeight = 50; const baseWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const baseHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const aspectRatio = baseWidth / baseHeight; let w2 = baseWidth; let h2 = baseHeight; if (w2 > h2 * aspectRatio) { h2 = w2 / aspectRatio; } else { w2 = h2 * aspectRatio; } w2 = Math.max(w2, minWidth); h2 = Math.max(h2, minHeight); const waveAmplitude = Math.min(h2 * 0.2, h2 / 4); const finalH = h2 + waveAmplitude * 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const points = [ { x: -w2 / 2, y: finalH / 2 }, ...generateFullSineWavePoints(-w2 / 2, finalH / 2, w2 / 2, finalH / 2, waveAmplitude, 1), { x: w2 / 2, y: -finalH / 2 }, ...generateFullSineWavePoints(w2 / 2, -finalH / 2, -w2 / 2, -finalH / 2, waveAmplitude, -1) ]; const waveRectPath = createPathFromPoints(points); const waveRectNode = rc.path(waveRectPath, options); const waveRect = shapeSvg.insert(() => waveRectNode, ":first-child"); waveRect.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { waveRect.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { waveRect.selectAll("path").attr("style", nodeStyles); } updateNodeBounds(node, waveRect); node.intersect = function(point) { const pos = intersect_default.polygon(node, points, point); return pos; }; return shapeSvg; } __name(waveRectangle, "waveRectangle"); async function windowPane(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const w2 = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const h2 = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const rectOffset = 5; const x2 = -w2 / 2; const y2 = -h2 / 2; const { cssStyles } = node; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const outerPathPoints = [ { x: x2 - rectOffset, y: y2 - rectOffset }, { x: x2 - rectOffset, y: y2 + h2 }, { x: x2 + w2, y: y2 + h2 }, { x: x2 + w2, y: y2 - rectOffset } ]; const path = `M${x2 - rectOffset},${y2 - rectOffset} L${x2 + w2},${y2 - rectOffset} L${x2 + w2},${y2 + h2} L${x2 - rectOffset},${y2 + h2} L${x2 - rectOffset},${y2 - rectOffset} M${x2 - rectOffset},${y2} L${x2 + w2},${y2} M${x2},${y2 - rectOffset} L${x2},${y2 + h2}`; if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const no = rc.path(path, options); const windowPane2 = shapeSvg.insert(() => no, ":first-child"); windowPane2.attr("transform", `translate(${rectOffset / 2}, ${rectOffset / 2})`); windowPane2.attr("class", "basic label-container"); if (cssStyles && node.look !== "handDrawn") { windowPane2.selectAll("path").attr("style", cssStyles); } if (nodeStyles && node.look !== "handDrawn") { windowPane2.selectAll("path").attr("style", nodeStyles); } label.attr( "transform", `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})` ); updateNodeBounds(node, windowPane2); node.intersect = function(point) { const pos = intersect_default.polygon(node, outerPathPoints, point); return pos; }; return shapeSvg; } __name(windowPane, "windowPane"); async function erBox(parent, node) { const entityNode = node; if (entityNode.alias) { node.label = entityNode.alias; } if (node.look === "handDrawn") { const { themeVariables: themeVariables2 } = getConfig(); const { background } = themeVariables2; const backgroundNode = __spreadProps(__spreadValues({}, node), { id: node.id + "-background", look: "default", cssStyles: ["stroke: none", `fill: ${background}`] }); await erBox(parent, backgroundNode); } const config = getConfig(); node.useHtmlLabels = config.htmlLabels; let PADDING = config.er?.diagramPadding ?? 10; let TEXT_PADDING = config.er?.entityPadding ?? 6; const { cssStyles } = node; const { labelStyles, nodeStyles } = styles2String(node); if (entityNode.attributes.length === 0 && node.label) { const options2 = { rx: 0, ry: 0, labelPaddingX: PADDING, labelPaddingY: PADDING * 1.5, classes: "" }; if (calculateTextWidth(node.label, config) + options2.labelPaddingX * 2 < config.er.minEntityWidth) { node.width = config.er.minEntityWidth; } const shapeSvg2 = await drawRect(parent, node, options2); if (!evaluate(config.htmlLabels)) { const textElement = shapeSvg2.select("text"); const bbox = textElement.node()?.getBBox(); textElement.attr("transform", `translate(${-bbox.width / 2}, 0)`); } return shapeSvg2; } if (!config.htmlLabels) { PADDING *= 1.25; TEXT_PADDING *= 1.25; } let cssClasses = getNodeClasses(node); if (!cssClasses) { cssClasses = "node default"; } const shapeSvg = parent.insert("g").attr("class", cssClasses).attr("id", node.domId || node.id); const nameBBox = await addText(shapeSvg, node.label ?? "", config, 0, 0, ["name"], labelStyles); nameBBox.height += TEXT_PADDING; let yOffset = 0; const yOffsets = []; const rows = []; let maxTypeWidth = 0; let maxNameWidth = 0; let maxKeysWidth = 0; let maxCommentWidth = 0; let keysPresent = true; let commentPresent = true; for (const attribute of entityNode.attributes) { const typeBBox = await addText( shapeSvg, attribute.type, config, 0, yOffset, ["attribute-type"], labelStyles ); maxTypeWidth = Math.max(maxTypeWidth, typeBBox.width + PADDING); const nameBBox2 = await addText( shapeSvg, attribute.name, config, 0, yOffset, ["attribute-name"], labelStyles ); maxNameWidth = Math.max(maxNameWidth, nameBBox2.width + PADDING); const keysBBox = await addText( shapeSvg, attribute.keys.join(), config, 0, yOffset, ["attribute-keys"], labelStyles ); maxKeysWidth = Math.max(maxKeysWidth, keysBBox.width + PADDING); const commentBBox = await addText( shapeSvg, attribute.comment, config, 0, yOffset, ["attribute-comment"], labelStyles ); maxCommentWidth = Math.max(maxCommentWidth, commentBBox.width + PADDING); const rowHeight = Math.max(typeBBox.height, nameBBox2.height, keysBBox.height, commentBBox.height) + TEXT_PADDING; rows.push({ yOffset, rowHeight }); yOffset += rowHeight; } let totalWidthSections = 4; if (maxKeysWidth <= PADDING) { keysPresent = false; maxKeysWidth = 0; totalWidthSections--; } if (maxCommentWidth <= PADDING) { commentPresent = false; maxCommentWidth = 0; totalWidthSections--; } const shapeBBox = shapeSvg.node().getBBox(); if (nameBBox.width + PADDING * 2 - (maxTypeWidth + maxNameWidth + maxKeysWidth + maxCommentWidth) > 0) { const difference = nameBBox.width + PADDING * 2 - (maxTypeWidth + maxNameWidth + maxKeysWidth + maxCommentWidth); maxTypeWidth += difference / totalWidthSections; maxNameWidth += difference / totalWidthSections; if (maxKeysWidth > 0) { maxKeysWidth += difference / totalWidthSections; } if (maxCommentWidth > 0) { maxCommentWidth += difference / totalWidthSections; } } const maxWidth = maxTypeWidth + maxNameWidth + maxKeysWidth + maxCommentWidth; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } let totalShapeBBoxHeight = 0; if (rows.length > 0) { totalShapeBBoxHeight = rows.reduce((sum, row) => sum + (row?.rowHeight ?? 0), 0); } const w2 = Math.max(shapeBBox.width + PADDING * 2, node?.width || 0, maxWidth); const h2 = Math.max((totalShapeBBoxHeight ?? 0) + nameBBox.height, node?.height || 0); const x2 = -w2 / 2; const y2 = -h2 / 2; shapeSvg.selectAll("g:not(:first-child)").each((_2, i2, nodes) => { const text2 = select_default(nodes[i2]); const transform = text2.attr("transform"); let translateX = 0; let translateY = 0; if (transform) { const regex = RegExp(/translate\(([^,]+),([^)]+)\)/); const translate = regex.exec(transform); if (translate) { translateX = parseFloat(translate[1]); translateY = parseFloat(translate[2]); if (text2.attr("class").includes("attribute-name")) { translateX += maxTypeWidth; } else if (text2.attr("class").includes("attribute-keys")) { translateX += maxTypeWidth + maxNameWidth; } else if (text2.attr("class").includes("attribute-comment")) { translateX += maxTypeWidth + maxNameWidth + maxKeysWidth; } } } text2.attr( "transform", `translate(${x2 + PADDING / 2 + translateX}, ${translateY + y2 + nameBBox.height + TEXT_PADDING / 2})` ); }); shapeSvg.select(".name").attr("transform", "translate(" + -nameBBox.width / 2 + ", " + (y2 + TEXT_PADDING / 2) + ")"); const roughRect = rc.rectangle(x2, y2, w2, h2, options); const rect2 = shapeSvg.insert(() => roughRect, ":first-child").attr("style", cssStyles.join("")); const { themeVariables } = getConfig(); const { rowEven, rowOdd, nodeBorder } = themeVariables; yOffsets.push(0); for (const [i2, row] of rows.entries()) { const contentRowIndex = i2 + 1; const isEven = contentRowIndex % 2 === 0 && row.yOffset !== 0; const roughRect2 = rc.rectangle(x2, nameBBox.height + y2 + row?.yOffset, w2, row?.rowHeight, __spreadProps(__spreadValues({}, options), { fill: isEven ? rowEven : rowOdd, stroke: nodeBorder })); shapeSvg.insert(() => roughRect2, "g.label").attr("style", cssStyles.join("")).attr("class", `row-rect-${isEven ? "even" : "odd"}`); } let roughLine = rc.line(x2, nameBBox.height + y2, w2 + x2, nameBBox.height + y2, options); shapeSvg.insert(() => roughLine).attr("class", "divider"); roughLine = rc.line(maxTypeWidth + x2, nameBBox.height + y2, maxTypeWidth + x2, h2 + y2, options); shapeSvg.insert(() => roughLine).attr("class", "divider"); if (keysPresent) { roughLine = rc.line( maxTypeWidth + maxNameWidth + x2, nameBBox.height + y2, maxTypeWidth + maxNameWidth + x2, h2 + y2, options ); shapeSvg.insert(() => roughLine).attr("class", "divider"); } if (commentPresent) { roughLine = rc.line( maxTypeWidth + maxNameWidth + maxKeysWidth + x2, nameBBox.height + y2, maxTypeWidth + maxNameWidth + maxKeysWidth + x2, h2 + y2, options ); shapeSvg.insert(() => roughLine).attr("class", "divider"); } for (const yOffset2 of yOffsets) { roughLine = rc.line( x2, nameBBox.height + y2 + yOffset2, w2 + x2, nameBBox.height + y2 + yOffset2, options ); shapeSvg.insert(() => roughLine).attr("class", "divider"); } updateNodeBounds(node, rect2); if (nodeStyles && node.look !== "handDrawn") { const allStyle = nodeStyles.split(";"); const strokeStyles = allStyle?.filter((e2) => { return e2.includes("stroke"); })?.map((s2) => `${s2}`).join("; "); shapeSvg.selectAll("path").attr("style", strokeStyles ?? ""); shapeSvg.selectAll(".row-rect-even path").attr("style", nodeStyles); } node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(erBox, "erBox"); async function addText(shapeSvg, labelText, config, translateX = 0, translateY = 0, classes = [], style = "") { const label = shapeSvg.insert("g").attr("class", `label ${classes.join(" ")}`).attr("transform", `translate(${translateX}, ${translateY})`).attr("style", style); if (labelText !== parseGenericTypes(labelText)) { labelText = parseGenericTypes(labelText); labelText = labelText.replaceAll("<", "<").replaceAll(">", ">"); } const text2 = label.node().appendChild( await createText( label, labelText, { width: calculateTextWidth(labelText, config) + 100, style, useHtmlLabels: config.htmlLabels }, config ) ); if (labelText.includes("<") || labelText.includes(">")) { let child = text2.children[0]; child.textContent = child.textContent.replaceAll("<", "<").replaceAll(">", ">"); while (child.childNodes[0]) { child = child.childNodes[0]; child.textContent = child.textContent.replaceAll("<", "<").replaceAll(">", ">"); } } let bbox = text2.getBBox(); if (evaluate(config.htmlLabels)) { const div = text2.children[0]; div.style.textAlign = "start"; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } return bbox; } __name(addText, "addText"); async function textHelper(parent, node, config, useHtmlLabels, GAP = config.class.padding ?? 12) { const TEXT_PADDING = !useHtmlLabels ? 3 : 0; const shapeSvg = parent.insert("g").attr("class", getNodeClasses(node)).attr("id", node.domId || node.id); let annotationGroup = null; let labelGroup = null; let membersGroup = null; let methodsGroup = null; let annotationGroupHeight = 0; let labelGroupHeight = 0; let membersGroupHeight = 0; annotationGroup = shapeSvg.insert("g").attr("class", "annotation-group text"); if (node.annotations.length > 0) { const annotation = node.annotations[0]; await addText2(annotationGroup, { text: `«${annotation}»` }, 0); const annotationGroupBBox = annotationGroup.node().getBBox(); annotationGroupHeight = annotationGroupBBox.height; } labelGroup = shapeSvg.insert("g").attr("class", "label-group text"); await addText2(labelGroup, node, 0, ["font-weight: bolder"]); const labelGroupBBox = labelGroup.node().getBBox(); labelGroupHeight = labelGroupBBox.height; membersGroup = shapeSvg.insert("g").attr("class", "members-group text"); let yOffset = 0; for (const member of node.members) { const height = await addText2(membersGroup, member, yOffset, [member.parseClassifier()]); yOffset += height + TEXT_PADDING; } membersGroupHeight = membersGroup.node().getBBox().height; if (membersGroupHeight <= 0) { membersGroupHeight = GAP / 2; } methodsGroup = shapeSvg.insert("g").attr("class", "methods-group text"); let methodsYOffset = 0; for (const method of node.methods) { const height = await addText2(methodsGroup, method, methodsYOffset, [method.parseClassifier()]); methodsYOffset += height + TEXT_PADDING; } let bbox = shapeSvg.node().getBBox(); if (annotationGroup !== null) { const annotationGroupBBox = annotationGroup.node().getBBox(); annotationGroup.attr("transform", `translate(${-annotationGroupBBox.width / 2})`); } labelGroup.attr("transform", `translate(${-labelGroupBBox.width / 2}, ${annotationGroupHeight})`); bbox = shapeSvg.node().getBBox(); membersGroup.attr( "transform", `translate(${0}, ${annotationGroupHeight + labelGroupHeight + GAP * 2})` ); bbox = shapeSvg.node().getBBox(); methodsGroup.attr( "transform", `translate(${0}, ${annotationGroupHeight + labelGroupHeight + (membersGroupHeight ? membersGroupHeight + GAP * 4 : GAP * 2)})` ); bbox = shapeSvg.node().getBBox(); return { shapeSvg, bbox }; } __name(textHelper, "textHelper"); async function addText2(parentGroup, node, yOffset, styles = []) { const textEl = parentGroup.insert("g").attr("class", "label").attr("style", styles.join("; ")); const config = getConfig(); let useHtmlLabels = "useHtmlLabels" in node ? node.useHtmlLabels : evaluate(config.htmlLabels) ?? true; let textContent = ""; if ("text" in node) { textContent = node.text; } else { textContent = node.label; } if (!useHtmlLabels && textContent.startsWith("\\")) { textContent = textContent.substring(1); } if (hasKatex(textContent)) { useHtmlLabels = true; } const text2 = await createText( textEl, sanitizeText3(decodeEntities(textContent)), { width: calculateTextWidth(textContent, config) + 50, // Add room for error when splitting text into multiple lines classes: "markdown-node-label", useHtmlLabels }, config ); let bbox; let numberOfLines = 1; if (!useHtmlLabels) { if (styles.includes("font-weight: bolder")) { select_default(text2).selectAll("tspan").attr("font-weight", ""); } numberOfLines = text2.children.length; const textChild = text2.children[0]; if (text2.textContent === "" || text2.textContent.includes(">")) { textChild.textContent = textContent[0] + textContent.substring(1).replaceAll(">", ">").replaceAll("<", "<").trim(); const preserveSpace = textContent[1] === " "; if (preserveSpace) { textChild.textContent = textChild.textContent[0] + " " + textChild.textContent.substring(1); } } if (textChild.textContent === "undefined") { textChild.textContent = ""; } bbox = text2.getBBox(); } else { const div = text2.children[0]; const dv = select_default(text2); numberOfLines = div.innerHTML.split("
").length; if (div.innerHTML.includes("")) { numberOfLines += div.innerHTML.split("").length - 1; } const images = div.getElementsByTagName("img"); if (images) { const noImgText = textContent.replace(/]*>/g, "").trim() === ""; await Promise.all( [...images].map( (img) => new Promise((res) => { function setupImage() { img.style.display = "flex"; img.style.flexDirection = "column"; if (noImgText) { const bodyFontSize = config.fontSize?.toString() ?? window.getComputedStyle(document.body).fontSize; const enlargingFactor = 5; const width = parseInt(bodyFontSize, 10) * enlargingFactor + "px"; img.style.minWidth = width; img.style.maxWidth = width; } else { img.style.width = "100%"; } res(img); } __name(setupImage, "setupImage"); setTimeout(() => { if (img.complete) { setupImage(); } }); img.addEventListener("error", setupImage); img.addEventListener("load", setupImage); }) ) ); } bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } textEl.attr("transform", "translate(0," + (-bbox.height / (2 * numberOfLines) + yOffset) + ")"); return bbox.height; } __name(addText2, "addText"); async function classBox(parent, node) { const config = getConfig2(); const PADDING = config.class.padding ?? 12; const GAP = PADDING; const useHtmlLabels = node.useHtmlLabels ?? evaluate(config.htmlLabels) ?? true; const classNode = node; classNode.annotations = classNode.annotations ?? []; classNode.members = classNode.members ?? []; classNode.methods = classNode.methods ?? []; const { shapeSvg, bbox } = await textHelper(parent, node, config, useHtmlLabels, GAP); const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; node.cssStyles = classNode.styles || ""; const styles = classNode.styles?.join(";") || nodeStyles || ""; if (!node.cssStyles) { node.cssStyles = styles.replaceAll("!important", "").split(";"); } const renderExtraBox = classNode.members.length === 0 && classNode.methods.length === 0 && !config.class?.hideEmptyMembersBox; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const w2 = bbox.width; let h2 = bbox.height; if (classNode.members.length === 0 && classNode.methods.length === 0) { h2 += GAP; } else if (classNode.members.length > 0 && classNode.methods.length === 0) { h2 += GAP * 2; } const x2 = -w2 / 2; const y2 = -h2 / 2; const roughRect = rc.rectangle( x2 - PADDING, y2 - PADDING - (renderExtraBox ? PADDING : classNode.members.length === 0 && classNode.methods.length === 0 ? -PADDING / 2 : 0), w2 + 2 * PADDING, h2 + 2 * PADDING + (renderExtraBox ? PADDING * 2 : classNode.members.length === 0 && classNode.methods.length === 0 ? -PADDING : 0), options ); const rect2 = shapeSvg.insert(() => roughRect, ":first-child"); rect2.attr("class", "basic label-container"); const rectBBox = rect2.node().getBBox(); shapeSvg.selectAll(".text").each((_2, i2, nodes) => { const text2 = select_default(nodes[i2]); const transform = text2.attr("transform"); let translateY = 0; if (transform) { const regex = RegExp(/translate\(([^,]+),([^)]+)\)/); const translate = regex.exec(transform); if (translate) { translateY = parseFloat(translate[2]); } } let newTranslateY = translateY + y2 + PADDING - (renderExtraBox ? PADDING : classNode.members.length === 0 && classNode.methods.length === 0 ? -PADDING / 2 : 0); if (!useHtmlLabels) { newTranslateY -= 4; } let newTranslateX = x2; if (text2.attr("class").includes("label-group") || text2.attr("class").includes("annotation-group")) { newTranslateX = -text2.node()?.getBBox().width / 2 || 0; shapeSvg.selectAll("text").each(function(_22, i22, nodes2) { if (window.getComputedStyle(nodes2[i22]).textAnchor === "middle") { newTranslateX = 0; } }); } text2.attr("transform", `translate(${newTranslateX}, ${newTranslateY})`); }); const annotationGroupHeight = shapeSvg.select(".annotation-group").node().getBBox().height - (renderExtraBox ? PADDING / 2 : 0) || 0; const labelGroupHeight = shapeSvg.select(".label-group").node().getBBox().height - (renderExtraBox ? PADDING / 2 : 0) || 0; const membersGroupHeight = shapeSvg.select(".members-group").node().getBBox().height - (renderExtraBox ? PADDING / 2 : 0) || 0; if (classNode.members.length > 0 || classNode.methods.length > 0 || renderExtraBox) { const roughLine = rc.line( rectBBox.x, annotationGroupHeight + labelGroupHeight + y2 + PADDING, rectBBox.x + rectBBox.width, annotationGroupHeight + labelGroupHeight + y2 + PADDING, options ); const line = shapeSvg.insert(() => roughLine); line.attr("class", "divider").attr("style", styles); } if (renderExtraBox || classNode.members.length > 0 || classNode.methods.length > 0) { const roughLine = rc.line( rectBBox.x, annotationGroupHeight + labelGroupHeight + membersGroupHeight + y2 + GAP * 2 + PADDING, rectBBox.x + rectBBox.width, annotationGroupHeight + labelGroupHeight + membersGroupHeight + y2 + PADDING + GAP * 2, options ); const line = shapeSvg.insert(() => roughLine); line.attr("class", "divider").attr("style", styles); } if (classNode.look !== "handDrawn") { shapeSvg.selectAll("path").attr("style", styles); } rect2.select(":nth-child(2)").attr("style", styles); shapeSvg.selectAll(".divider").select("path").attr("style", styles); if (node.labelStyle) { shapeSvg.selectAll("span").attr("style", node.labelStyle); } else { shapeSvg.selectAll("span").attr("style", styles); } if (!useHtmlLabels) { const colorRegex = RegExp(/color\s*:\s*([^;]*)/); const match = colorRegex.exec(styles); if (match) { const colorStyle = match[0].replace("color", "fill"); shapeSvg.selectAll("tspan").attr("style", colorStyle); } else if (labelStyles) { const match2 = colorRegex.exec(labelStyles); if (match2) { const colorStyle = match2[0].replace("color", "fill"); shapeSvg.selectAll("tspan").attr("style", colorStyle); } } } updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(classBox, "classBox"); async function requirementBox(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const requirementNode = node; const elementNode = node; const padding = 20; const gap = 20; const isRequirementNode = "verifyMethod" in node; const classes = getNodeClasses(node); const shapeSvg = parent.insert("g").attr("class", classes).attr("id", node.domId ?? node.id); let typeHeight; if (isRequirementNode) { typeHeight = await addText3( shapeSvg, `<<${requirementNode.type}>>`, 0, node.labelStyle ); } else { typeHeight = await addText3(shapeSvg, "<<Element>>", 0, node.labelStyle); } let accumulativeHeight = typeHeight; const nameHeight = await addText3( shapeSvg, requirementNode.name, accumulativeHeight, node.labelStyle + "; font-weight: bold;" ); accumulativeHeight += nameHeight + gap; if (isRequirementNode) { const idHeight = await addText3( shapeSvg, `${requirementNode.requirementId ? `ID: ${requirementNode.requirementId}` : ""}`, accumulativeHeight, node.labelStyle ); accumulativeHeight += idHeight; const textHeight = await addText3( shapeSvg, `${requirementNode.text ? `Text: ${requirementNode.text}` : ""}`, accumulativeHeight, node.labelStyle ); accumulativeHeight += textHeight; const riskHeight = await addText3( shapeSvg, `${requirementNode.risk ? `Risk: ${requirementNode.risk}` : ""}`, accumulativeHeight, node.labelStyle ); accumulativeHeight += riskHeight; await addText3( shapeSvg, `${requirementNode.verifyMethod ? `Verification: ${requirementNode.verifyMethod}` : ""}`, accumulativeHeight, node.labelStyle ); } else { const typeHeight2 = await addText3( shapeSvg, `${elementNode.type ? `Type: ${elementNode.type}` : ""}`, accumulativeHeight, node.labelStyle ); accumulativeHeight += typeHeight2; await addText3( shapeSvg, `${elementNode.docRef ? `Doc Ref: ${elementNode.docRef}` : ""}`, accumulativeHeight, node.labelStyle ); } const totalWidth = (shapeSvg.node()?.getBBox().width ?? 200) + padding; const totalHeight = (shapeSvg.node()?.getBBox().height ?? 200) + padding; const x2 = -totalWidth / 2; const y2 = -totalHeight / 2; const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); if (node.look !== "handDrawn") { options.roughness = 0; options.fillStyle = "solid"; } const roughRect = rc.rectangle(x2, y2, totalWidth, totalHeight, options); const rect2 = shapeSvg.insert(() => roughRect, ":first-child"); rect2.attr("class", "basic label-container").attr("style", nodeStyles); shapeSvg.selectAll(".label").each((_2, i2, nodes) => { const text2 = select_default(nodes[i2]); const transform = text2.attr("transform"); let translateX = 0; let translateY = 0; if (transform) { const regex = RegExp(/translate\(([^,]+),([^)]+)\)/); const translate = regex.exec(transform); if (translate) { translateX = parseFloat(translate[1]); translateY = parseFloat(translate[2]); } } const newTranslateY = translateY - totalHeight / 2; let newTranslateX = x2 + padding / 2; if (i2 === 0 || i2 === 1) { newTranslateX = translateX; } text2.attr("transform", `translate(${newTranslateX}, ${newTranslateY + padding})`); }); if (accumulativeHeight > typeHeight + nameHeight + gap) { const roughLine = rc.line( x2, y2 + typeHeight + nameHeight + gap, x2 + totalWidth, y2 + typeHeight + nameHeight + gap, options ); const dividerLine = shapeSvg.insert(() => roughLine); dividerLine.attr("style", nodeStyles); } updateNodeBounds(node, rect2); node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(requirementBox, "requirementBox"); async function addText3(parentGroup, inputText, yOffset, style = "") { if (inputText === "") { return 0; } const textEl = parentGroup.insert("g").attr("class", "label").attr("style", style); const config = getConfig2(); const useHtmlLabels = config.htmlLabels ?? true; const text2 = await createText( textEl, sanitizeText3(decodeEntities(inputText)), { width: calculateTextWidth(inputText, config) + 50, // Add room for error when splitting text into multiple lines classes: "markdown-node-label", useHtmlLabels, style }, config ); let bbox; if (!useHtmlLabels) { const textChild = text2.children[0]; for (const child of textChild.children) { child.textContent = child.textContent.replaceAll(">", ">").replaceAll("<", "<"); if (style) { child.setAttribute("style", style); } } bbox = text2.getBBox(); bbox.height += 6; } else { const div = text2.children[0]; const dv = select_default(text2); bbox = div.getBoundingClientRect(); dv.attr("width", bbox.width); dv.attr("height", bbox.height); } textEl.attr("transform", `translate(${-bbox.width / 2},${-bbox.height / 2 + yOffset})`); return bbox.height; } __name(addText3, "addText"); var colorFromPriority = __name((priority) => { switch (priority) { case "Very High": return "red"; case "High": return "orange"; case "Medium": return null; // no stroke case "Low": return "blue"; case "Very Low": return "lightblue"; } }, "colorFromPriority"); async function kanbanItem(parent, kanbanNode, { config }) { const { labelStyles, nodeStyles } = styles2String(kanbanNode); kanbanNode.labelStyle = labelStyles || ""; const labelPaddingX = 10; const orgWidth = kanbanNode.width; kanbanNode.width = (kanbanNode.width ?? 200) - 10; const { shapeSvg, bbox, label: labelElTitle } = await labelHelper(parent, kanbanNode, getNodeClasses(kanbanNode)); const padding = kanbanNode.padding || 10; let ticketUrl = ""; let link; if ("ticket" in kanbanNode && kanbanNode.ticket && config?.kanban?.ticketBaseUrl) { ticketUrl = config?.kanban?.ticketBaseUrl.replace("#TICKET#", kanbanNode.ticket); link = shapeSvg.insert("svg:a", ":first-child").attr("class", "kanban-ticket-link").attr("xlink:href", ticketUrl).attr("target", "_blank"); } const options = { useHtmlLabels: kanbanNode.useHtmlLabels, labelStyle: kanbanNode.labelStyle || "", width: kanbanNode.width, img: kanbanNode.img, padding: kanbanNode.padding || 8, centerLabel: false }; let labelEl, bbox2; if (link) { ({ label: labelEl, bbox: bbox2 } = await insertLabel( link, "ticket" in kanbanNode && kanbanNode.ticket || "", options )); } else { ({ label: labelEl, bbox: bbox2 } = await insertLabel( shapeSvg, "ticket" in kanbanNode && kanbanNode.ticket || "", options )); } const { label: labelElAssigned, bbox: bboxAssigned } = await insertLabel( shapeSvg, "assigned" in kanbanNode && kanbanNode.assigned || "", options ); kanbanNode.width = orgWidth; const labelPaddingY = 10; const totalWidth = kanbanNode?.width || 0; const heightAdj = Math.max(bbox2.height, bboxAssigned.height) / 2; const totalHeight = Math.max(bbox.height + labelPaddingY * 2, kanbanNode?.height || 0) + heightAdj; const x2 = -totalWidth / 2; const y2 = -totalHeight / 2; labelElTitle.attr( "transform", "translate(" + (padding - totalWidth / 2) + ", " + (-heightAdj - bbox.height / 2) + ")" ); labelEl.attr( "transform", "translate(" + (padding - totalWidth / 2) + ", " + (-heightAdj + bbox.height / 2) + ")" ); labelElAssigned.attr( "transform", "translate(" + (padding + totalWidth / 2 - bboxAssigned.width - 2 * labelPaddingX) + ", " + (-heightAdj + bbox.height / 2) + ")" ); let rect2; const { rx, ry } = kanbanNode; const { cssStyles } = kanbanNode; if (kanbanNode.look === "handDrawn") { const rc = at.svg(shapeSvg); const options2 = userNodeOverrides(kanbanNode, {}); const roughNode = rx || ry ? rc.path(createRoundedRectPathD(x2, y2, totalWidth, totalHeight, rx || 0), options2) : rc.rectangle(x2, y2, totalWidth, totalHeight, options2); rect2 = shapeSvg.insert(() => roughNode, ":first-child"); rect2.attr("class", "basic label-container").attr("style", cssStyles ? cssStyles : null); } else { rect2 = shapeSvg.insert("rect", ":first-child"); rect2.attr("class", "basic label-container __APA__").attr("style", nodeStyles).attr("rx", rx ?? 5).attr("ry", ry ?? 5).attr("x", x2).attr("y", y2).attr("width", totalWidth).attr("height", totalHeight); const priority = "priority" in kanbanNode && kanbanNode.priority; if (priority) { const line = shapeSvg.append("line"); const lineX = x2 + 2; const y1 = y2 + Math.floor((rx ?? 0) / 2); const y22 = y2 + totalHeight - Math.floor((rx ?? 0) / 2); line.attr("x1", lineX).attr("y1", y1).attr("x2", lineX).attr("y2", y22).attr("stroke-width", "4").attr("stroke", colorFromPriority(priority)); } } updateNodeBounds(kanbanNode, rect2); kanbanNode.height = totalHeight; kanbanNode.intersect = function(point) { return intersect_default.rect(kanbanNode, point); }; return shapeSvg; } __name(kanbanItem, "kanbanItem"); async function bang(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, halfPadding, label } = await labelHelper( parent, node, getNodeClasses(node) ); const w2 = bbox.width + 10 * halfPadding; const h2 = bbox.height + 8 * halfPadding; const r2 = 0.15 * w2; const { cssStyles } = node; const minWidth = bbox.width + 20; const minHeight = bbox.height + 20; const effectiveWidth = Math.max(w2, minWidth); const effectiveHeight = Math.max(h2, minHeight); label.attr("transform", `translate(${-bbox.width / 2}, ${-bbox.height / 2})`); let bangElem; const path = `M0 0 a${r2},${r2} 1 0,0 ${effectiveWidth * 0.25},${-1 * effectiveHeight * 0.1} a${r2},${r2} 1 0,0 ${effectiveWidth * 0.25},${0} a${r2},${r2} 1 0,0 ${effectiveWidth * 0.25},${0} a${r2},${r2} 1 0,0 ${effectiveWidth * 0.25},${effectiveHeight * 0.1} a${r2},${r2} 1 0,0 ${effectiveWidth * 0.15},${effectiveHeight * 0.33} a${r2 * 0.8},${r2 * 0.8} 1 0,0 0,${effectiveHeight * 0.34} a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.15},${effectiveHeight * 0.33} a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.25},${effectiveHeight * 0.15} a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.25},0 a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.25},0 a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.25},${-1 * effectiveHeight * 0.15} a${r2},${r2} 1 0,0 ${-1 * effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33} a${r2 * 0.8},${r2 * 0.8} 1 0,0 0,${-1 * effectiveHeight * 0.34} a${r2},${r2} 1 0,0 ${effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33} H0 V0 Z`; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const roughNode = rc.path(path, options); bangElem = shapeSvg.insert(() => roughNode, ":first-child"); bangElem.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); } else { bangElem = shapeSvg.insert("path", ":first-child").attr("class", "basic label-container").attr("style", nodeStyles).attr("d", path); } bangElem.attr("transform", `translate(${-effectiveWidth / 2}, ${-effectiveHeight / 2})`); updateNodeBounds(node, bangElem); node.calcIntersect = function(bounds, point) { return intersect_default.rect(bounds, point); }; node.intersect = function(point) { log.info("Bang intersect", node, point); return intersect_default.rect(node, point); }; return shapeSvg; } __name(bang, "bang"); async function cloud(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, halfPadding, label } = await labelHelper( parent, node, getNodeClasses(node) ); const w2 = bbox.width + 2 * halfPadding; const h2 = bbox.height + 2 * halfPadding; const r1 = 0.15 * w2; const r2 = 0.25 * w2; const r3 = 0.35 * w2; const r4 = 0.2 * w2; const { cssStyles } = node; let cloudElem; const path = `M0 0 a${r1},${r1} 0 0,1 ${w2 * 0.25},${-1 * w2 * 0.1} a${r3},${r3} 1 0,1 ${w2 * 0.4},${-1 * w2 * 0.1} a${r2},${r2} 1 0,1 ${w2 * 0.35},${w2 * 0.2} a${r1},${r1} 1 0,1 ${w2 * 0.15},${h2 * 0.35} a${r4},${r4} 1 0,1 ${-1 * w2 * 0.15},${h2 * 0.65} a${r2},${r1} 1 0,1 ${-1 * w2 * 0.25},${w2 * 0.15} a${r3},${r3} 1 0,1 ${-1 * w2 * 0.5},0 a${r1},${r1} 1 0,1 ${-1 * w2 * 0.25},${-1 * w2 * 0.15} a${r1},${r1} 1 0,1 ${-1 * w2 * 0.1},${-1 * h2 * 0.35} a${r4},${r4} 1 0,1 ${w2 * 0.1},${-1 * h2 * 0.65} H0 V0 Z`; if (node.look === "handDrawn") { const rc = at.svg(shapeSvg); const options = userNodeOverrides(node, {}); const roughNode = rc.path(path, options); cloudElem = shapeSvg.insert(() => roughNode, ":first-child"); cloudElem.attr("class", "basic label-container").attr("style", handleUndefinedAttr(cssStyles)); } else { cloudElem = shapeSvg.insert("path", ":first-child").attr("class", "basic label-container").attr("style", nodeStyles).attr("d", path); } label.attr("transform", `translate(${-bbox.width / 2}, ${-bbox.height / 2})`); cloudElem.attr("transform", `translate(${-w2 / 2}, ${-h2 / 2})`); updateNodeBounds(node, cloudElem); node.calcIntersect = function(bounds, point) { return intersect_default.rect(bounds, point); }; node.intersect = function(point) { log.info("Cloud intersect", node, point); return intersect_default.rect(node, point); }; return shapeSvg; } __name(cloud, "cloud"); async function defaultMindmapNode(parent, node) { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox, halfPadding, label } = await labelHelper( parent, node, getNodeClasses(node) ); const w2 = bbox.width + 8 * halfPadding; const h2 = bbox.height + 2 * halfPadding; const rd = 5; const rectPath = ` M${-w2 / 2} ${h2 / 2 - rd} v${-h2 + 2 * rd} q0,-${rd} ${rd},-${rd} h${w2 - 2 * rd} q${rd},0 ${rd},${rd} v${h2 - 2 * rd} q0,${rd} -${rd},${rd} h${-w2 + 2 * rd} q-${rd},0 -${rd},-${rd} Z `; const bg = shapeSvg.append("path").attr("id", "node-" + node.id).attr("class", "node-bkg node-" + node.type).attr("style", nodeStyles).attr("d", rectPath); shapeSvg.append("line").attr("class", "node-line-").attr("x1", -w2 / 2).attr("y1", h2 / 2).attr("x2", w2 / 2).attr("y2", h2 / 2); label.attr("transform", `translate(${-bbox.width / 2}, ${-bbox.height / 2})`); shapeSvg.append(() => label.node()); updateNodeBounds(node, bg); node.calcIntersect = function(bounds, point) { return intersect_default.rect(bounds, point); }; node.intersect = function(point) { return intersect_default.rect(node, point); }; return shapeSvg; } __name(defaultMindmapNode, "defaultMindmapNode"); async function mindmapCircle(parent, node) { const options = { padding: node.padding ?? 0 }; return circle(parent, node, options); } __name(mindmapCircle, "mindmapCircle"); var shapesDefs = [ { semanticName: "Process", name: "Rectangle", shortName: "rect", description: "Standard process shape", aliases: ["proc", "process", "rectangle"], internalAliases: ["squareRect"], handler: squareRect2 }, { semanticName: "Event", name: "Rounded Rectangle", shortName: "rounded", description: "Represents an event", aliases: ["event"], internalAliases: ["roundedRect"], handler: roundedRect }, { semanticName: "Terminal Point", name: "Stadium", shortName: "stadium", description: "Terminal point", aliases: ["terminal", "pill"], handler: stadium }, { semanticName: "Subprocess", name: "Framed Rectangle", shortName: "fr-rect", description: "Subprocess", aliases: ["subprocess", "subproc", "framed-rectangle", "subroutine"], handler: subroutine }, { semanticName: "Database", name: "Cylinder", shortName: "cyl", description: "Database storage", aliases: ["db", "database", "cylinder"], handler: cylinder }, { semanticName: "Start", name: "Circle", shortName: "circle", description: "Starting point", aliases: ["circ"], handler: circle }, { semanticName: "Bang", name: "Bang", shortName: "bang", description: "Bang", aliases: ["bang"], handler: bang }, { semanticName: "Cloud", name: "Cloud", shortName: "cloud", description: "cloud", aliases: ["cloud"], handler: cloud }, { semanticName: "Decision", name: "Diamond", shortName: "diam", description: "Decision-making step", aliases: ["decision", "diamond", "question"], handler: question }, { semanticName: "Prepare Conditional", name: "Hexagon", shortName: "hex", description: "Preparation or condition step", aliases: ["hexagon", "prepare"], handler: hexagon }, { semanticName: "Data Input/Output", name: "Lean Right", shortName: "lean-r", description: "Represents input or output", aliases: ["lean-right", "in-out"], internalAliases: ["lean_right"], handler: lean_right }, { semanticName: "Data Input/Output", name: "Lean Left", shortName: "lean-l", description: "Represents output or input", aliases: ["lean-left", "out-in"], internalAliases: ["lean_left"], handler: lean_left }, { semanticName: "Priority Action", name: "Trapezoid Base Bottom", shortName: "trap-b", description: "Priority action", aliases: ["priority", "trapezoid-bottom", "trapezoid"], handler: trapezoid }, { semanticName: "Manual Operation", name: "Trapezoid Base Top", shortName: "trap-t", description: "Represents a manual task", aliases: ["manual", "trapezoid-top", "inv-trapezoid"], internalAliases: ["inv_trapezoid"], handler: inv_trapezoid }, { semanticName: "Stop", name: "Double Circle", shortName: "dbl-circ", description: "Represents a stop point", aliases: ["double-circle"], internalAliases: ["doublecircle"], handler: doublecircle }, { semanticName: "Text Block", name: "Text Block", shortName: "text", description: "Text block", handler: text }, { semanticName: "Card", name: "Notched Rectangle", shortName: "notch-rect", description: "Represents a card", aliases: ["card", "notched-rectangle"], handler: card }, { semanticName: "Lined/Shaded Process", name: "Lined Rectangle", shortName: "lin-rect", description: "Lined process shape", aliases: ["lined-rectangle", "lined-process", "lin-proc", "shaded-process"], handler: shadedProcess }, { semanticName: "Start", name: "Small Circle", shortName: "sm-circ", description: "Small starting point", aliases: ["start", "small-circle"], internalAliases: ["stateStart"], handler: stateStart }, { semanticName: "Stop", name: "Framed Circle", shortName: "fr-circ", description: "Stop point", aliases: ["stop", "framed-circle"], internalAliases: ["stateEnd"], handler: stateEnd }, { semanticName: "Fork/Join", name: "Filled Rectangle", shortName: "fork", description: "Fork or join in process flow", aliases: ["join"], internalAliases: ["forkJoin"], handler: forkJoin }, { semanticName: "Collate", name: "Hourglass", shortName: "hourglass", description: "Represents a collate operation", aliases: ["hourglass", "collate"], handler: hourglass }, { semanticName: "Comment", name: "Curly Brace", shortName: "brace", description: "Adds a comment", aliases: ["comment", "brace-l"], handler: curlyBraceLeft }, { semanticName: "Comment Right", name: "Curly Brace", shortName: "brace-r", description: "Adds a comment", handler: curlyBraceRight }, { semanticName: "Comment with braces on both sides", name: "Curly Braces", shortName: "braces", description: "Adds a comment", handler: curlyBraces }, { semanticName: "Com Link", name: "Lightning Bolt", shortName: "bolt", description: "Communication link", aliases: ["com-link", "lightning-bolt"], handler: lightningBolt }, { semanticName: "Document", name: "Document", shortName: "doc", description: "Represents a document", aliases: ["doc", "document"], handler: waveEdgedRectangle }, { semanticName: "Delay", name: "Half-Rounded Rectangle", shortName: "delay", description: "Represents a delay", aliases: ["half-rounded-rectangle"], handler: halfRoundedRectangle }, { semanticName: "Direct Access Storage", name: "Horizontal Cylinder", shortName: "h-cyl", description: "Direct access storage", aliases: ["das", "horizontal-cylinder"], handler: tiltedCylinder }, { semanticName: "Disk Storage", name: "Lined Cylinder", shortName: "lin-cyl", description: "Disk storage", aliases: ["disk", "lined-cylinder"], handler: linedCylinder }, { semanticName: "Display", name: "Curved Trapezoid", shortName: "curv-trap", description: "Represents a display", aliases: ["curved-trapezoid", "display"], handler: curvedTrapezoid }, { semanticName: "Divided Process", name: "Divided Rectangle", shortName: "div-rect", description: "Divided process shape", aliases: ["div-proc", "divided-rectangle", "divided-process"], handler: dividedRectangle }, { semanticName: "Extract", name: "Triangle", shortName: "tri", description: "Extraction process", aliases: ["extract", "triangle"], handler: triangle }, { semanticName: "Internal Storage", name: "Window Pane", shortName: "win-pane", description: "Internal storage", aliases: ["internal-storage", "window-pane"], handler: windowPane }, { semanticName: "Junction", name: "Filled Circle", shortName: "f-circ", description: "Junction point", aliases: ["junction", "filled-circle"], handler: filledCircle }, { semanticName: "Loop Limit", name: "Trapezoidal Pentagon", shortName: "notch-pent", description: "Loop limit step", aliases: ["loop-limit", "notched-pentagon"], handler: trapezoidalPentagon }, { semanticName: "Manual File", name: "Flipped Triangle", shortName: "flip-tri", description: "Manual file operation", aliases: ["manual-file", "flipped-triangle"], handler: flippedTriangle }, { semanticName: "Manual Input", name: "Sloped Rectangle", shortName: "sl-rect", description: "Manual input step", aliases: ["manual-input", "sloped-rectangle"], handler: slopedRect }, { semanticName: "Multi-Document", name: "Stacked Document", shortName: "docs", description: "Multiple documents", aliases: ["documents", "st-doc", "stacked-document"], handler: multiWaveEdgedRectangle }, { semanticName: "Multi-Process", name: "Stacked Rectangle", shortName: "st-rect", description: "Multiple processes", aliases: ["procs", "processes", "stacked-rectangle"], handler: multiRect }, { semanticName: "Stored Data", name: "Bow Tie Rectangle", shortName: "bow-rect", description: "Stored data", aliases: ["stored-data", "bow-tie-rectangle"], handler: bowTieRect }, { semanticName: "Summary", name: "Crossed Circle", shortName: "cross-circ", description: "Summary", aliases: ["summary", "crossed-circle"], handler: crossedCircle }, { semanticName: "Tagged Document", name: "Tagged Document", shortName: "tag-doc", description: "Tagged document", aliases: ["tag-doc", "tagged-document"], handler: taggedWaveEdgedRectangle }, { semanticName: "Tagged Process", name: "Tagged Rectangle", shortName: "tag-rect", description: "Tagged process", aliases: ["tagged-rectangle", "tag-proc", "tagged-process"], handler: taggedRect }, { semanticName: "Paper Tape", name: "Flag", shortName: "flag", description: "Paper tape", aliases: ["paper-tape"], handler: waveRectangle }, { semanticName: "Odd", name: "Odd", shortName: "odd", description: "Odd shape", internalAliases: ["rect_left_inv_arrow"], handler: rect_left_inv_arrow }, { semanticName: "Lined Document", name: "Lined Document", shortName: "lin-doc", description: "Lined document", aliases: ["lined-document"], handler: linedWaveEdgedRect } ]; var generateShapeMap = __name(() => { const undocumentedShapes = { // States state, choice, note, // Rectangles rectWithTitle, labelRect, // Icons iconSquare, iconCircle, icon, iconRounded, imageSquare, anchor, // Kanban diagram kanbanItem, //Mindmap diagram mindmapCircle, defaultMindmapNode, // class diagram classBox, // er diagram erBox, // Requirement diagram requirementBox }; const entries = [ ...Object.entries(undocumentedShapes), ...shapesDefs.flatMap((shape) => { const aliases = [ shape.shortName, ..."aliases" in shape ? shape.aliases : [], ..."internalAliases" in shape ? shape.internalAliases : [] ]; return aliases.map((alias) => [alias, shape.handler]); }) ]; return Object.fromEntries(entries); }, "generateShapeMap"); var shapes2 = generateShapeMap(); function isValidShape(shape) { return shape in shapes2; } __name(isValidShape, "isValidShape"); var nodeElems = /* @__PURE__ */ new Map(); async function insertNode(elem, node, renderOptions) { let newEl; let el; if (node.shape === "rect") { if (node.rx && node.ry) { node.shape = "roundedRect"; } else { node.shape = "squareRect"; } } const shapeHandler = node.shape ? shapes2[node.shape] : void 0; if (!shapeHandler) { throw new Error(`No such shape: ${node.shape}. Please check your syntax.`); } if (node.link) { let target; if (renderOptions.config.securityLevel === "sandbox") { target = "_top"; } else if (node.linkTarget) { target = node.linkTarget || "_blank"; } newEl = elem.insert("svg:a").attr("xlink:href", node.link).attr("target", target ?? null); el = await shapeHandler(newEl, node, renderOptions); } else { el = await shapeHandler(elem, node, renderOptions); newEl = el; } if (node.tooltip) { el.attr("title", node.tooltip); } nodeElems.set(node.id, newEl); if (node.haveCallback) { newEl.attr("class", newEl.attr("class") + " clickable"); } return newEl; } __name(insertNode, "insertNode"); var setNodeElem = __name((elem, node) => { nodeElems.set(node.id, elem); }, "setNodeElem"); var clear2 = __name(() => { nodeElems.clear(); }, "clear"); var positionNode = __name((node) => { const el = nodeElems.get(node.id); log.trace( "Transforming node", node.diff, node, "translate(" + (node.x - node.width / 2 - 5) + ", " + node.width / 2 + ")" ); const padding = 8; const diff = node.diff || 0; if (node.clusterNode) { el.attr( "transform", "translate(" + (node.x + diff - node.width / 2) + ", " + (node.y - node.height / 2 - padding) + ")" ); } else { el.attr("transform", "translate(" + node.x + ", " + node.y + ")"); } return diff; }, "positionNode"); export { at, labelHelper, updateNodeBounds, createLabel_default, insertCluster, clear, isValidShape, insertNode, setNodeElem, clear2, positionNode }; //# sourceMappingURL=chunk-2WFBHHKP.js.map