@bpmn-ld/bpmn-ld 0.0.0-stage → 0.2.0

package/dist/render/renderer.js

@@ -0,0 +1,369 @@
+import { geometryDiagrams } from "./geometry.js";
+import { escapeXml, wrapText } from "./text.js";
+import { eventCircle, taskRect, gatewayDiamond, doubleRect, thickRect, poolRect, laneRect, dataObject, dataStore, } from "./symbols.js";
+const unwarn = (shape, message, warnings) => {
+    warnings.push({ kind: "unsupported", code: "undrawable-element", construct: String(shape.element?.type ?? "unknown"), location: `/${shape.id}`, node: shape.bpmnElement, message });
+};
+const shapeType = (shape) => String(shape.element?.type ?? "");
+const isCatchEvent = (t) => t === "StartEvent" || t === "BoundaryEvent" || t === "IntermediateCatchEvent" || t === "IntermediateEvent";
+const isThrowEvent = (t) => t === "IntermediateThrowEvent" || t === "EndEvent";
+const eventMarker = (element, cx, cy, r, isCatch) => {
+    const defs = Array.isArray(element?.eventDefinitions) ? element.eventDefinitions : [];
+    const def = defs.length > 0 ? String(defs[0]?.type ?? "") : "";
+    const fill = isCatch ? "none" : "black";
+    const parts = [];
+    const mr = r * 0.45;
+    switch (def) {
+        case "TimerEventDefinition": {
+            parts.push(`<circle cx="${cx}" cy="${cy}" r="${mr}" fill="none" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${cx}" y1="${cy}" x2="${cx}" y2="${cy - mr + 3}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${cx}" y1="${cy}" x2="${cx + mr - 3}" y2="${cy}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "MessageEventDefinition": {
+            const w = mr * 1.6;
+            const h = mr * 1.1;
+            parts.push(`<rect x="${cx - w / 2}" y="${cy - h / 2}" width="${w}" height="${h}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            if (isCatch) {
+                parts.push(`<polyline points="${cx - w / 2},${cy - h / 2} ${cx},${cy + h / 4} ${cx + w / 2},${cy - h / 2}" fill="none" stroke="black" stroke-width="1.2"/>`);
+            }
+            break;
+        }
+        case "ErrorEventDefinition": {
+            const size = mr;
+            parts.push(`<polygon points="${cx},${cy - size} ${cx + size * 0.6},${cy + size * 0.4} ${cx - size * 0.6},${cy + size * 0.4}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "EscalationEventDefinition": {
+            const size = mr;
+            parts.push(`<polygon points="${cx},${cy - size} ${cx + size * 0.7},${cy + size} ${cx - size * 0.7},${cy + size}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "SignalEventDefinition": {
+            const size = mr;
+            parts.push(`<polygon points="${cx},${cy - size} ${cx + size},${cy + size * 0.6} ${cx - size},${cy + size * 0.6}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "ConditionalEventDefinition": {
+            parts.push(`<rect x="${cx - mr}" y="${cy - mr}" width="${mr * 2}" height="${mr * 2}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "LinkEventDefinition": {
+            parts.push(`<circle cx="${cx}" cy="${cy}" r="${mr}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<polygon points="${cx + mr * 0.2},${cy - mr * 0.5} ${cx + mr * 0.8},${cy} ${cx + mr * 0.2},${cy + mr * 0.5}" fill="${isCatch ? "black" : "white"}" stroke="black" stroke-width="1"/>`);
+            break;
+        }
+        case "CompensateEventDefinition": {
+            parts.push(`<polygon points="${cx - mr},${cy - mr * 0.6} ${cx},${cy - mr * 0.6} ${cx - mr * 0.5},${cy + mr * 0.6} ${cx + mr * 0.5},${cy + mr * 0.6}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "CancelEventDefinition": {
+            parts.push(`<line x1="${cx - mr}" y1="${cy - mr}" x2="${cx + mr}" y2="${cy + mr}" stroke="black" stroke-width="1.5"/>`);
+            parts.push(`<line x1="${cx + mr}" y1="${cy - mr}" x2="${cx - mr}" y2="${cy + mr}" stroke="black" stroke-width="1.5"/>`);
+            break;
+        }
+        case "TerminateEventDefinition": {
+            parts.push(`<circle cx="${cx}" cy="${cy}" r="${mr}" fill="black" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "MultipleEventDefinition": {
+            parts.push(`<polygon points="${cx},${cy - mr} ${cx + mr * 0.95},${cy - mr * 0.3} ${cx + mr * 0.6},${cy + mr * 0.8} ${cx - mr * 0.6},${cy + mr * 0.8} ${cx - mr * 0.95},${cy - mr * 0.3}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        case "ParallelMultipleEventDefinition": {
+            parts.push(`<line x1="${cx - mr}" y1="${cy}" x2="${cx + mr}" y2="${cy}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${cx}" y1="${cy - mr}" x2="${cx}" y2="${cy + mr}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<circle cx="${cx}" cy="${cy}" r="${mr * 0.35}" fill="${fill}" stroke="black" stroke-width="1.2"/>`);
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return parts.join("");
+};
+const drawEvent = (shape, b, warnings, isThrowOverride) => {
+    const t = shapeType(shape);
+    const el = shape.element;
+    const r = Math.min(b.width, b.height) / 2;
+    const cx = b.x + r;
+    const cy = b.y + r;
+    const isInterrupting = el?.cancelActivity !== false;
+    const dashed = (t === "BoundaryEvent" || t === "StartEvent" || t === "IntermediateCatchEvent") && el?.cancelActivity === false;
+    const isCatch = isCatchEvent(t) && !isThrowOverride;
+    const stroke = (t === "EndEvent") ? 3 : 1.5;
+    const parts = [eventCircle(cx, cy, r - (t === "IntermediateCatchEvent" || t === "IntermediateThrowEvent" ? 2 : 0), stroke, dashed)];
+    if (t === "IntermediateCatchEvent" || t === "IntermediateThrowEvent") {
+        parts.push(eventCircle(cx, cy, r - (t === "IntermediateThrowEvent" ? 6 : 6), 1.2, false));
+    }
+    parts.push(eventMarker(el, cx, cy, r - 6, isCatch));
+    return parts.join("");
+};
+const taskIcon = (type, x, y) => {
+    const s = 14;
+    switch (type) {
+        case "UserTask": return `<circle cx="${x + s / 2}" cy="${y + s / 2}" r="${s / 3}" fill="none" stroke="black" stroke-width="1.2"/><line x1="${x + s / 2}" y1="${y + s * 0.83}" x2="${x + s / 2}" y2="${y + s}" stroke="black" stroke-width="1.2"/>`;
+        case "ServiceTask": return `<path d="M ${x + s / 2} ${y} l 3 4 4 1 -4 1 -3 4 -3 -4 -4 -1 4 -1 z" fill="none" stroke="black" stroke-width="1.2"/>`;
+        case "ScriptTask": return `<rect x="${x}" y="${y + 2}" width="${s}" height="${s - 4}" fill="none" stroke="black" stroke-width="1.2"/><line x1="${x + 2}" y1="${y + 5}" x2="${x + s - 2}" y2="${y + 5}" stroke="black" stroke-width="1"/><line x1="${x + 2}" y1="${y + 8}" x2="${x + s - 2}" y2="${y + 8}" stroke="black" stroke-width="1"/>`;
+        case "SendTask": return `<polygon points="${x},${y + s / 2} ${x + s},${y} ${x + s},${y + s}" fill="none" stroke="black" stroke-width="1.2"/>`;
+        case "ReceiveTask": return `<polygon points="${x},${y} ${x + s},${y + s / 2} ${x},${y + s}" fill="none" stroke="black" stroke-width="1.2"/>`;
+        case "ManualTask": return `<path d="M ${x + 2} ${y + s} V ${y + s / 2} M ${x + 6} ${y + s} V ${y + s / 3} M ${x + 10} ${y + s} V ${y + s / 3}" stroke="black" stroke-width="1.2" fill="none"/>`;
+        case "BusinessRuleTask": return `<rect x="${x + 2}" y="${y + 2}" width="${s - 4}" height="${s - 4}" fill="none" stroke="black" stroke-width="1.2"/><line x1="${x + 2}" y1="${y + s / 2}" x2="${x + s - 2}" y2="${y + s / 2}" stroke="black" stroke-width="1"/><line x1="${x + s / 2}" y1="${y + 2}" x2="${x + s / 2}" y2="${y + s - 2}" stroke="black" stroke-width="1"/>`;
+        default: return "";
+    }
+};
+const activityMarkers = (el, x, y) => {
+    const parts = [];
+    if (el?.standardLoopCharacteristics) {
+        parts.push(`<path d="M ${x + 18} ${y} a 6 6 0 1 1 -6 6" fill="none" stroke="black" stroke-width="1.2"/>`);
+    }
+    if (el?.multiInstanceLoopCharacteristics) {
+        const seq = el.multiInstanceLoopCharacteristics.isSequential === true;
+        if (seq) {
+            parts.push(`<line x1="${x + 10}" y1="${y - 4}" x2="${x + 10}" y2="${y + 4}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${x + 14}" y1="${y - 4}" x2="${x + 14}" y2="${y + 4}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${x + 18}" y1="${y - 4}" x2="${x + 18}" y2="${y + 4}" stroke="black" stroke-width="1.2"/>`);
+        }
+        else {
+            parts.push(`<line x1="${x + 10}" y1="${y}" x2="${x + 18}" y2="${y - 6}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${x + 10}" y1="${y}" x2="${x + 18}" y2="${y}" stroke="black" stroke-width="1.2"/>`);
+            parts.push(`<line x1="${x + 10}" y1="${y}" x2="${x + 18}" y2="${y + 6}" stroke="black" stroke-width="1.2"/>`);
+        }
+    }
+    if (el?.isForCompensation === true) {
+        parts.push(`<polygon points="${x + 6},${y} ${x + 2},${y + 4} ${x + 6},${y + 8}" fill="black" stroke="black" stroke-width="1"/>`);
+        parts.push(`<polygon points="${x + 12},${y} ${x + 8},${y + 4} ${x + 12},${y + 8}" fill="black" stroke="black" stroke-width="1"/>`);
+    }
+    return parts.join("");
+};
+const drawShape = (shape, warnings) => {
+    const t = shapeType(shape);
+    const b = shape.bounds;
+    const el = shape.element;
+    if (t.endsWith("Event")) {
+        return drawEvent(shape, b, warnings);
+    }
+    if (t.endsWith("Gateway")) {
+        const cx = b.x + b.width / 2;
+        const cy = b.y + b.height / 2;
+        const size = Math.min(b.width, b.height) / 2;
+        const core = gatewayDiamond(cx, cy, size);
+        const r = size * 0.35;
+        let marker = "";
+        if (t === "ExclusiveGateway")
+            marker = `<line x1="${cx - r}" y1="${cy - r}" x2="${cx + r}" y2="${cy + r}" stroke="black" stroke-width="1.5"/><line x1="${cx + r}" y1="${cy - r}" x2="${cx - r}" y2="${cy + r}" stroke="black" stroke-width="1.5"/>`;
+        else if (t === "InclusiveGateway")
+            marker = `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="black" stroke-width="1.5"/>`;
+        else if (t === "ParallelGateway")
+            marker = `<line x1="${cx - r}" y1="${cy}" x2="${cx + r}" y2="${cy}" stroke="black" stroke-width="1.5"/><line x1="${cx}" y1="${cy - r}" x2="${cx}" y2="${cy + r}" stroke="black" stroke-width="1.5"/>`;
+        else if (t === "EventBasedGateway")
+            marker = `<polygon points="${cx},${cy - r} ${cx + r},${cy} ${cx},${cy + r} ${cx - r},${cy}" fill="none" stroke="black" stroke-width="1.5"/>`;
+        else if (t === "ComplexGateway")
+            marker = `<text x="${cx}" y="${cy + 4}" text-anchor="middle" font-family="sans-serif" font-size="12" fill="black">*</text>`;
+        return core + marker;
+    }
+    if (t === "Participant") {
+        const process = !!el?.processRef;
+        const horizontal = shape.isHorizontal !== false;
+        return poolRect(b.x, b.y, b.width, b.height, horizontal, process);
+    }
+    if (t === "Lane") {
+        const horizontal = shape.isHorizontal !== false;
+        return laneRect(b.x, b.y, b.width, b.height, horizontal);
+    }
+    if (t === "DataObjectReference")
+        return dataObject(b.x, b.y, b.width, b.height);
+    if (t === "DataStoreReference")
+        return dataStore(b.x, b.y, b.width, b.height);
+    if (t === "Transaction" || t === "SubProcess" || t === "AdHocSubProcess" || t === "CallActivity") {
+        let core;
+        if (t === "Transaction")
+            core = doubleRect(b.x, b.y, b.width, b.height);
+        else if (t === "CallActivity")
+            core = thickRect(b.x, b.y, b.width, b.height);
+        else
+            core = taskRect(b.x, b.y, b.width, b.height);
+        const parts = [core];
+        if (t === "AdHocSubProcess")
+            parts.push(`<text x="${b.x + 10}" y="${b.y + 14}" font-family="sans-serif" font-size="14" fill="black">~</text>`);
+        if (shape.isExpanded !== true && t !== "CallActivity" && t !== "Transaction") {
+            const cx = b.x + b.width / 2;
+            const cy = b.y + b.height / 2;
+            parts.push(`<line x1="${cx - 8}" y1="${cy}" x2="${cx + 8}" y2="${cy}" stroke="black" stroke-width="1.5"/>`);
+            parts.push(`<line x1="${cx}" y1="${cy - 8}" x2="${cx}" y2="${cy + 8}" stroke="black" stroke-width="1.5"/>`);
+        }
+        const markers = activityMarkers(el, b.x + 12, b.y + b.height - 10);
+        if (markers)
+            parts.push(markers);
+        const icon = taskIcon(t === "SubProcess" ? "" : "", b.x + 8, b.y + 8);
+        if (icon)
+            parts.push(icon);
+        return parts.join("");
+    }
+    if (t.endsWith("Task")) {
+        const parts = [taskRect(b.x, b.y, b.width, b.height)];
+        const icon = taskIcon(t, b.x + 8, b.y + 8);
+        if (icon)
+            parts.push(icon);
+        const markers = activityMarkers(el, b.x + b.width / 2, b.y + b.height - 10);
+        if (markers)
+            parts.push(markers);
+        const comp = el?.isForCompensation === true ? activityMarkers({ isForCompensation: true }, b.x + b.width - 20, b.y + 8) : "";
+        if (comp)
+            parts.push(comp);
+        return parts.join("");
+    }
+    if (t === "TextAnnotation" || t === "Group") {
+        return `<rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" fill="none" stroke="black" stroke-width="1" stroke-dasharray="4 3"/>`;
+    }
+    unwarn(shape, "element type not specifically supported", warnings);
+    return taskRect(b.x, b.y, b.width, b.height);
+};
+const drawLabel = (text, bounds) => {
+    const lines = wrapText(text, bounds.width || 80);
+    const x = bounds.x + (bounds.width || 0) / 2;
+    let y = bounds.y + 12;
+    return lines.map((line, index) => `<text x="${x}" y="${y + index * 12}" text-anchor="middle" font-family="sans-serif" font-size="11" fill="black">${escapeXml(line)}</text>`).join("");
+};
+const edgeStyle = (type) => {
+    if (type === "MessageFlow")
+        return { dashed: true, dotted: false, marker: "openarrow", startMarker: "circle" };
+    if (type === "Association" || type === "DataAssociation")
+        return { dashed: false, dotted: true, marker: (type === "Association" && false) ? "arrow" : "none" };
+    return { dashed: false, dotted: false, marker: "arrow" };
+};
+export const renderDiagramSvg = (diagram) => {
+    const warnings = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const touch = (x, y) => {
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
+    };
+    for (const shape of diagram.shapes) {
+        touch(shape.bounds.x, shape.bounds.y);
+        touch(shape.bounds.x + shape.bounds.width, shape.bounds.y + shape.bounds.height);
+        if (shape.label?.bounds) {
+            const lb = shape.label.bounds;
+            touch(lb.x, lb.y);
+            touch(lb.x + lb.width, lb.y + lb.height);
+        }
+        else {
+            touch(shape.bounds.x - 20, shape.bounds.y + shape.bounds.height + 2);
+            touch(shape.bounds.x + shape.bounds.width + 20, shape.bounds.y + shape.bounds.height + 14);
+        }
+    }
+    for (const edge of diagram.edges)
+        for (const point of edge.waypoints)
+            touch(point.x, point.y);
+    const hasDrawable = diagram.shapes.length > 0 || diagram.edges.length > 0;
+    const margin = 20;
+    if (!hasDrawable) {
+        minX = 0;
+        minY = 0;
+        maxX = 100;
+        maxY = 100;
+    }
+    const width = Math.ceil((maxX - minX + margin * 2));
+    const height = Math.ceil((maxY - minY + margin * 2));
+    const offX = -minX + margin;
+    const offY = -minY + margin;
+    const parts = [];
+    const shifted = (x, y) => `${x + offX},${y + offY}`;
+    parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`);
+    parts.push(`<defs><marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="black"/></marker><marker id="openarrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polyline points="0 0, 10 3.5, 0 7" fill="none" stroke="black" stroke-width="1.2"/></marker></defs>`);
+    for (const edge of diagram.edges) {
+        const el = edge.element;
+        const t = String(el?.type ?? "SequenceFlow");
+        const style = edgeStyle(t);
+        const pts = edge.waypoints.map((p) => shifted(p.x, p.y)).join(" ");
+        const dash = style.dashed ? ' stroke-dasharray="6 4"' : style.dotted ? ' stroke-dasharray="2 2"' : "";
+        const markerEnd = style.marker === "arrow" ? ' marker-end="url(#arrow)"' : style.marker === "openarrow" ? ' marker-end="url(#openarrow)"' : "";
+        let edgeSvg = `<polyline points="${pts}" fill="none" stroke="black" stroke-width="1.5"${dash}${markerEnd}/>`;
+        if (style.startMarker === "circle") {
+            const sp = edge.waypoints[0];
+            edgeSvg = `<circle cx="${sp.x + offX}" cy="${sp.y + offY}" r="4" fill="white" stroke="black" stroke-width="1.2"/>` + edgeSvg;
+        }
+        if (t === "SequenceFlow" && el?.isDefault === true) {
+            const sp = edge.waypoints[0];
+            edgeSvg += `<line x1="${sp.x + offX - 6}" y1="${sp.y + offY + 6}" x2="${sp.x + offX + 6}" y2="${sp.y + offY - 6}" stroke="black" stroke-width="1.2"/>`;
+        }
+        if (t === "SequenceFlow" && el?.conditionExpression) {
+            const sp = edge.waypoints[0];
+            const d = 4;
+            edgeSvg += `<polygon points="${sp.x + offX},${sp.y + offY - d} ${sp.x + offX + d},${sp.y + offY} ${sp.x + offX},${sp.y + offY + d} ${sp.x + offX - d},${sp.y + offY}" fill="white" stroke="black" stroke-width="1.2"/>`;
+        }
+        parts.push(edgeSvg);
+        const name = String(el?.name ?? "");
+        if (name !== "" && edge.label?.bounds) {
+            const lb = edge.label.bounds;
+            const bnds = { x: lb.x + offX, y: lb.y + offY, width: lb.width, height: lb.height };
+            parts.push(drawLabel(name, bnds));
+        }
+    }
+    const renderShape = (shape) => {
+        const b = shape.bounds;
+        const sx = b.x + offX;
+        const sy = b.y + offY;
+        const shiftedBounds = { x: sx, y: sy, width: b.width, height: b.height };
+        const drawn = drawShape({ ...shape, bounds: shiftedBounds }, warnings);
+        const res = [drawn];
+        const el = shape.element;
+        const t = shapeType(shape);
+        let labelBounds;
+        if (shape.label?.bounds) {
+            const lb = shape.label.bounds;
+            labelBounds = { x: lb.x + offX, y: lb.y + offY, width: lb.width, height: lb.height };
+        }
+        else if (t.endsWith("Task") || t === "SubProcess" || t === "Transaction" || t === "AdHocSubProcess" || t === "CallActivity" || t === "Participant" || t === "Lane" || t === "DataObjectReference" || t === "DataStoreReference") {
+            labelBounds = { x: shiftedBounds.x + 4, y: shiftedBounds.y + shiftedBounds.height / 2 - 6, width: shiftedBounds.width - 8, height: 12 };
+        }
+        else {
+            labelBounds = { x: shiftedBounds.x - 20, y: shiftedBounds.y + shiftedBounds.height + 2, width: shiftedBounds.width + 40, height: 12 };
+        }
+        const name = String(el?.name ?? el?.id ?? "");
+        if (name !== "") {
+            if (t === "Participant" || t === "Lane") {
+                const horizontal = shape.isHorizontal !== false;
+                const headerBounds = horizontal
+                    ? { x: shiftedBounds.x, y: shiftedBounds.y, width: 30, height: shiftedBounds.height }
+                    : { x: shiftedBounds.x, y: shiftedBounds.y, width: shiftedBounds.width, height: 30 };
+                const nameBounds = shape.label?.bounds ? labelBounds : { x: headerBounds.x, y: headerBounds.y, width: headerBounds.width, height: headerBounds.height };
+                res.push(drawLabel(name, nameBounds));
+            }
+            else {
+                res.push(drawLabel(name, labelBounds));
+            }
+        }
+        return res.join("");
+    };
+    for (const shape of diagram.shapes) {
+        parts.push(renderShape(shape));
+    }
+    parts.push(`</svg>`);
+    return { svg: parts.join(""), warnings };
+};
+export const renderDocument = (document) => {
+    const diagrams = geometryDiagrams(document);
+    const rendered = [];
+    const warnings = [];
+    const errors = [];
+    const drawables = diagrams.flatMap((diagram) => (diagram.shapes.length > 0 || diagram.edges.length > 0 ? [diagram] : []));
+    for (const diagram of diagrams) {
+        const out = renderDiagramSvg(diagram);
+        rendered.push({ id: diagram.id, name: diagram.name, svg: out.svg, warnings: out.warnings, errors: [] });
+        warnings.push(...out.warnings.map((w) => ({ ...w, location: `/${diagram.id}${w.location}` })));
+        if (diagram.shapes.length === 0 && diagram.edges.length === 0) {
+            const warning = { kind: "unsupported", code: "undrawable-element", construct: "diagram", location: `/${diagram.id}`, node: diagram.bpmnElement, message: "diagram has nothing drawable" };
+            warnings.push(warning);
+            rendered[rendered.length - 1].warnings.push(warning);
+        }
+    }
+    if (drawables.length === 0)
+        errors.push({ code: "nothing-drawable", message: "model has nothing drawable" });
+    return { diagrams: rendered, warnings, errors };
+};

package/dist/render/symbols.d.ts

@@ -0,0 +1,10 @@
+export declare const eventCircle: (cx: number, cy: number, r: number, strokeWidth?: number, dashed?: boolean) => string;
+export declare const taskRect: (x: number, y: number, width: number, height: number, strokeWidth?: number) => string;
+export declare const gatewayDiamond: (cx: number, cy: number, size: number) => string;
+export declare const doubleRect: (x: number, y: number, width: number, height: number) => string;
+export declare const thickRect: (x: number, y: number, width: number, height: number) => string;
+export declare const poolRect: (x: number, y: number, width: number, height: number, horizontal: boolean, process: boolean) => string;
+export declare const laneRect: (x: number, y: number, width: number, height: number, horizontal: boolean) => string;
+export declare const dataObject: (x: number, y: number, width: number, height: number) => string;
+export declare const dataStore: (x: number, y: number, width: number, height: number) => string;
+export declare const modelName: (element: any) => string;

package/dist/render/symbols.js

@@ -0,0 +1,26 @@
+import { escapeXml } from "./text.js";
+export const eventCircle = (cx, cy, r, strokeWidth = 1.5, dashed = false) => `<circle cx="${cx}" cy="${cy}" r="${r}" fill="white" stroke="black" stroke-width="${strokeWidth}"${dashed ? ' stroke-dasharray="4 3"' : ""}/>`;
+export const taskRect = (x, y, width, height, strokeWidth = 1.5) => `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="10" ry="10" fill="white" stroke="black" stroke-width="${strokeWidth}"/>`;
+export const gatewayDiamond = (cx, cy, size) => `<polygon points="${cx},${cy - size} ${cx + size},${cy} ${cx},${cy + size} ${cx - size},${cy}" fill="white" stroke="black" stroke-width="1.5"/>`;
+export const doubleRect = (x, y, width, height) => `${taskRect(x, y, width, height)}<rect x="${x + 4}" y="${y + 4}" width="${width - 8}" height="${height - 8}" rx="8" ry="8" fill="none" stroke="black" stroke-width="1.5"/>`;
+export const thickRect = (x, y, width, height) => taskRect(x, y, width, height, 3);
+export const poolRect = (x, y, width, height, horizontal, process) => {
+    if (!process)
+        return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="black" stroke="black" stroke-width="1.5"/>`;
+    if (horizontal) {
+        return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white" stroke="black" stroke-width="1.5"/><rect x="${x}" y="${y}" width="30" height="${height}" fill="white" stroke="black" stroke-width="1.5"/>`;
+    }
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white" stroke="black" stroke-width="1.5"/><rect x="${x}" y="${y}" width="${width}" height="30" fill="white" stroke="black" stroke-width="1.5"/>`;
+};
+export const laneRect = (x, y, width, height, horizontal) => {
+    if (horizontal) {
+        return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white" stroke="black" stroke-width="1.5"/><rect x="${x}" y="${y}" width="30" height="${height}" fill="white" stroke="black" stroke-width="1.5"/>`;
+    }
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white" stroke="black" stroke-width="1.5"/><rect x="${x}" y="${y}" width="${width}" height="30" fill="white" stroke="black" stroke-width="1.5"/>`;
+};
+export const dataObject = (x, y, width, height) => `<path d="M ${x + 6} ${y} L ${x + width - 6} ${y} L ${x + width} ${y + 6} L ${x + width} ${y + height} L ${x} ${y + height} L ${x} ${y} Z M ${x + width - 6} ${y} L ${x + width - 6} ${y + 6} L ${x + width} ${y + 6}" fill="white" stroke="black" stroke-width="1.5"/>`;
+export const dataStore = (x, y, width, height) => `<ellipse cx="${x + width / 2}" cy="${y + 6}" rx="${width / 2}" ry="6" fill="white" stroke="black" stroke-width="1.5"/><rect x="${x}" y="${y + 6}" width="${width}" height="${height - 12}" fill="white" stroke="none"/><line x1="${x}" y1="${y + 6}" x2="${x}" y2="${y + height - 6}" stroke="black" stroke-width="1.5"/><line x1="${x + width}" y1="${y + 6}" x2="${x + width}" y2="${y + height - 6}" stroke="black" stroke-width="1.5"/><ellipse cx="${x + width / 2}" cy="${y + height - 6}" rx="${width / 2}" ry="6" fill="white" stroke="black" stroke-width="1.5"/>`;
+export const modelName = (element) => {
+    const raw = element?.name ?? element?.id ?? "";
+    return escapeXml(raw);
+};

package/dist/render/text.d.ts

@@ -0,0 +1,20 @@
+export declare const escapeXml: (value: unknown) => string;
+export declare const wrapText: (value: unknown, maxWidth: number) => string[];
+export declare const labelPosition: (label: {
+    bounds?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+} | undefined, fallback: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/dist/render/text.js

@@ -0,0 +1,28 @@
+const ESCAPE = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+export const escapeXml = (value) => String(value).replace(/[&<>"']/g, (char) => ESCAPE[char]);
+export const wrapText = (value, maxWidth) => {
+    const text = String(value ?? "");
+    if (text === "")
+        return [];
+    const words = text.split(/\s+/);
+    const lines = [];
+    let current = "";
+    for (const word of words) {
+        const candidate = current === "" ? word : `${current} ${word}`;
+        if (current !== "" && candidate.length * 7 > maxWidth) {
+            lines.push(current);
+            current = word;
+        }
+        else {
+            current = candidate;
+        }
+    }
+    if (current !== "")
+        lines.push(current);
+    return lines;
+};
+export const labelPosition = (label, fallback) => {
+    if (label?.bounds)
+        return label.bounds;
+    return { x: fallback.x, y: fallback.y + fallback.height + 2, width: fallback.width, height: 12 };
+};

package/dist/render-cli.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/render-cli.js

@@ -0,0 +1,7 @@
+import { runRender } from "./render-run.js";
+const result = runRender(process.argv.slice(2));
+if (result.stdout)
+    process.stdout.write(result.stdout);
+if (result.stderr)
+    process.stderr.write(result.stderr);
+process.exitCode = result.exitCode;

package/dist/render-run.d.ts

@@ -0,0 +1,9 @@
+export declare const EXIT_OK = 0;
+export declare const EXIT_BAD_INPUT = 2;
+export interface CliResult {
+    exitCode: number;
+    stdout: string;
+    stderr: string;
+}
+export declare const USAGE = "Usage: render <input> [options]\n\nRenders a BPMN-LD document or BPMN XML file to SVG.\n\nOptions:\n  -o, --output <file>  Write SVG to <file> (one per diagram)\n      --force          Recompute all diagram layout\n      --json           Print { warnings, errors }\n  -h, --help           Show this help\n\nExit codes:\n  0  Rendered successfully\n  2  Usage error or unusable input\n";
+export declare const runRender: (argv: string[]) => CliResult;

package/dist/render-run.js

@@ -0,0 +1,161 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+import { resolve } from "node:path";
+import { layoutDocument, LayoutInputError } from "./layout/layout.js";
+import { convert } from "./convert/convert.js";
+import { ConversionError } from "./convert/errors.js";
+import { renderDocument } from "./render/renderer.js";
+export const EXIT_OK = 0;
+export const EXIT_BAD_INPUT = 2;
+export const USAGE = `Usage: render <input> [options]
+
+Renders a BPMN-LD document or BPMN XML file to SVG.
+
+Options:
+  -o, --output <file>  Write SVG to <file> (one per diagram)
+      --force          Recompute all diagram layout
+      --json           Print { warnings, errors }
+  -h, --help           Show this help
+
+Exit codes:
+  0  Rendered successfully
+  2  Usage error or unusable input
+`;
+class UsageError extends Error {
+}
+const parseArgs = (argv) => {
+    let input;
+    const options = { input: "", force: false, json: false };
+    for (let i = 0; i < argv.length; i++) {
+        const arg = argv[i];
+        if (arg === "-h" || arg === "--help")
+            return "help";
+        else if (arg === "-o" || arg === "--output") {
+            const value = argv[++i];
+            if (value === undefined || value.startsWith("-"))
+                throw new UsageError(`${arg} requires a value`);
+            options.output = value;
+        }
+        else if (arg === "--force")
+            options.force = true;
+        else if (arg === "--json")
+            options.json = true;
+        else if (arg.startsWith("-"))
+            throw new UsageError(`unknown option ${arg}`);
+        else if (input !== undefined)
+            throw new UsageError(`unexpected extra argument ${arg}`);
+        else
+            input = arg;
+    }
+    if (input === undefined)
+        throw new UsageError("missing input file");
+    options.input = input;
+    return options;
+};
+const failure = (stderr) => ({ exitCode: EXIT_BAD_INPUT, stdout: "", stderr });
+const readText = (path) => {
+    try {
+        return readFileSync(path, "utf8");
+    }
+    catch (error) {
+        const reason = error.code === "ENOENT" ? "no such file" : (error.message ?? "cannot read");
+        throw new UsageError(`cannot read ${path}: ${reason}`);
+    }
+};
+const fileName = (path) => path.split(/[\\/]/).pop() ?? path;
+const suffixPath = (output, index) => {
+    if (index === 0)
+        return output;
+    const dot = output.lastIndexOf(".");
+    if (dot > output.lastIndexOf("/") && dot > output.lastIndexOf("\\") && dot > 0) {
+        return `${output.slice(0, dot)}-${index + 1}${output.slice(dot)}`;
+    }
+    return `${output}-${index + 1}`;
+};
+export const runRender = (argv) => {
+    let options;
+    try {
+        options = parseArgs(argv);
+    }
+    catch (error) {
+        if (error instanceof UsageError)
+            return failure(`error: ${error.message}\n\n${USAGE}`);
+        throw error;
+    }
+    if (options === "help")
+        return { exitCode: EXIT_OK, stdout: USAGE, stderr: "" };
+    let document;
+    try {
+        const text = readText(options.input);
+        let parsed;
+        let isJson = false;
+        try {
+            parsed = JSON.parse(text);
+            isJson = true;
+        }
+        catch {
+            isJson = false;
+        }
+        if (isJson) {
+            document = parsed;
+        }
+        else {
+            const result = convert(text, { fileName: options.input });
+            document = result.document;
+        }
+    }
+    catch (error) {
+        if (error instanceof UsageError || error instanceof ConversionError) {
+            const message = error instanceof UsageError ? error.message : `${options.input}: ${error.message}`;
+            if (options.json)
+                return { exitCode: EXIT_BAD_INPUT, stdout: `${JSON.stringify({ warnings: [], errors: [{ code: "bad-input", message }] }, null, 2)}\n`, stderr: "" };
+            return failure(`error: ${message}\n`);
+        }
+        throw error;
+    }
+    let rendered;
+    try {
+        rendered = renderDocument(layoutDocument(document, { force: options.force }).document);
+    }
+    catch (error) {
+        if (!(error instanceof LayoutInputError))
+            throw error;
+        const errors = error.errors.map((message) => ({ code: "invalid-input", message }));
+        if (options.json)
+            return { exitCode: EXIT_BAD_INPUT, stdout: `${JSON.stringify({ warnings: [], errors }, null, 2)}\n`, stderr: "" };
+        return failure(error.errors.map((message) => `error: ${options.input}: invalid BPMN-LD: ${message}`).join("\n") + "\n");
+    }
+    const warnings = rendered.warnings;
+    const errors = rendered.errors;
+    const aggregateErrors = errors;
+    if (options.output !== undefined) {
+        if (aggregateErrors.length > 0) {
+            if (options.json)
+                return { exitCode: EXIT_BAD_INPUT, stdout: `${JSON.stringify({ warnings, errors: aggregateErrors }, null, 2)}\n`, stderr: "" };
+            return failure([...warnings.map((w) => `warning: ${w.message ?? w.code}`), ...aggregateErrors.map((e) => `error: ${e.message}`)].join("\n") + "\n");
+        }
+        try {
+            rendered.diagrams.forEach((diagram, index) => {
+                writeFileSync(suffixPath(options.output, index), diagram.svg);
+            });
+        }
+        catch (error) {
+            const message = `cannot write ${options.output}: ${error.message}`;
+            if (options.json)
+                return { exitCode: EXIT_BAD_INPUT, stdout: `${JSON.stringify({ warnings, errors: [...aggregateErrors, { code: "cannot-write", message }] }, null, 2)}\n`, stderr: "" };
+            return failure(`error: ${message}\n`);
+        }
+        if (options.json)
+            return { exitCode: EXIT_OK, stdout: `${JSON.stringify({ warnings, errors: [] }, null, 2)}\n`, stderr: "" };
+        return { exitCode: EXIT_OK, stdout: "", stderr: warnings.length ? `${warnings.map((w) => `warning: ${w.message ?? w.code}`).join("\n")}\n` : "" };
+    }
+    if (aggregateErrors.length > 0) {
+        if (options.json)
+            return { exitCode: EXIT_BAD_INPUT, stdout: `${JSON.stringify({ warnings, errors: aggregateErrors }, null, 2)}\n`, stderr: "" };
+        return failure([...warnings.map((w) => `warning: ${w.message ?? w.code}`), ...aggregateErrors.map((e) => `error: ${e.message}`)].join("\n") + "\n");
+    }
+    const stdout = rendered.diagrams.length === 1 ? `${rendered.diagrams[0].svg}\n` : `${rendered.diagrams.map((d) => d.svg).join("\n")}\n`;
+    if (options.json)
+        return { exitCode: EXIT_OK, stdout: `${JSON.stringify({ warnings, errors: [] }, null, 2)}\n`, stderr: "" };
+    return { exitCode: EXIT_OK, stdout, stderr: warnings.length ? `${warnings.map((w) => `warning: ${w.message ?? w.code}`).join("\n")}\n` : "" };
+};