44:["$","title",null,{"children":"BPMN rendering PoC | Steve Thomson | Observable"}] 4c:Tbcd,canvas = { const ctx = DOM.context2d(largestX + graphMargin, largestY + graphMargin); const findNode = id => nodes.filter(node => node.meta.id === id)[0]; const drawLine = (color, points) => { const [head, ...tail] = points; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(head.x, head.y); tail.forEach(point => ctx.lineTo(point.x, point.y)); ctx.stroke(); } const drawArc = (color, points) => { if (points.length !== 3) return drawLine(color, points); const [head, cp1, cp2] = points; ctx.strokeStyle = color; ctx.beginPath(); ctx.bezierCurveTo(head.x, head.y, cp1.x, cp1.y, cp2.x, cp2.y); // ctx.moveTo(head.x, head.y); // ctx.arcTo(cp1.x, cp1.y, cp2.x, cp2.y, edgeArc); // ctx.lineTo(cp2.x, cp2.y) ctx.stroke(); } const text = (str) => str.length > maxLabelLength ? `${[...str].slice(0, (maxLabelLength - 3)).join('')}...` : str; const drawNode = (color, node) => { const box = nodeBoundingBox(node); // const { width, height, x, y } = box.outer; const isSquare = box.size.height === box.size.width; ctx.strokeStyle = color; ctx.rect(box.points.topLeft.x, box.points.topLeft.y, box.size.width, box.size.height); ctx.stroke(); Object.keys(box.points).forEach(point => { drawPip('orange', box.points[point]); }) if (isSquare) return; ctx.font = `${fontSize}px sans-serif`; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillText(text(node.meta.label), box.points.center.x, box.points.center.y); } const drawPip = (color, point) => { ctx.strokeStyle = color; ctx.beginPath(); ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI); ctx.stroke(); } const nodeBoundingBox = node => { const { width, height, x: centerX, y: centerY } = node.position; const halfHeight = (height / 2); const halfWidth = (width / 2); const topY = (centerY - halfHeight); const bottomY = (centerY + halfHeight); const leftX = (centerX - halfWidth); const rightX = (centerX + halfWidth); return { size: { width, height }, points: { topLeft: { x: leftX, y: topY }, top: { x: centerX, y: topY }, topRight: { x: rightX, y: topY }, left: { x: leftX, y: centerY }, center: { x: centerX, y: centerY }, right: { x: rightX, y: centerY }, bottomLeft: { x: leftX, y: bottomY }, bottom: { x: centerX, y: bottomY }, bottomRight: { x: rightX, y: bottomY }, } } } const drawEdge = (color, edge) => { const fromNode = findNode(edge.meta.from); const toNode = findNode(edge.meta.to); const fromNodeBox = nodeBoundingBox(fromNode); const toNodeBox = nodeBoundingBox(toNode); return drawArc(color, edge.position.points); } nodes.forEach(node => drawNode('red', node)); edges.forEach(edge => drawEdge('blue', edge)); return ctx.canvas; }4d:T992,graph = { const g = new dagre.graphlib.Graph(); const bpmnProcess = bpmnJSON['bpmn:definitions']['bpmn:process'][0]; const startEvents = bpmnProcess['bpmn:startEvent'] || []; const endEvents = bpmnProcess['bpmn:endEvent'] || []; const serviceTasks = bpmnProcess['bpmn:serviceTask'] || []; const sequenceFlows = bpmnProcess['bpmn:sequenceFlow'] || []; const intermediateCatchEvents = bpmnProcess['bpmn:intermediateCatchEvent'] || []; const parallelGateways = bpmnProcess['bpmn:parallelGateway'] || []; const eventBasedGateways = bpmnProcess['bpmn:eventBasedGateway'] || []; const tasks = bpmnProcess['bpmn:task'] || []; g.setGraph({ rankdir: rankDir, align: align || undefined, // ['UL', 'UR', 'DL', 'DR'] nodesep: nodeGap, edgesep: edgeGap, ranksep: rankGap, marginx: graphMargin, marginy: graphMargin, acyclicer: greedy ? 'greedy' : undefined, // [undefined, 'greedy'] ranker: ranker // ['network-simplex', 'longest-path', 'tight-tree'] }); // Default to assigning a new object as a label for each new edge. g.setDefaultEdgeLabel(function() { return {}; }); startEvents.forEach(node => { g.setNode(node.$.id, { label: 'Start Event', width: nodeHeight, height: nodeHeight }); }); endEvents.forEach(node => { g.setNode(node.$.id, { label: 'End Event', width: nodeHeight, height: nodeHeight }); }); serviceTasks.forEach(node => { g.setNode(node.$.id, { label: `Service Task: ${node.$.name}`, width: nodeWidth, height: nodeHeight }); }); intermediateCatchEvents.forEach(node => { const label = node['bpmn:timerEventDefinition'] ? node['bpmn:timerEventDefinition'][0]['bpmn:timeDuration'][0]._ : node['bpmn:messageEventDefinition'][0].$.messageRef; g.setNode(node.$.id, { label: `Intermediate Catch Event: ${label}`, width: nodeHeight, height: nodeHeight }); }); parallelGateways.forEach(node => { g.setNode(node.$.id, { label: 'Parallel Gateway', width: nodeHeight, height: nodeHeight }); }); eventBasedGateways.forEach(node => { g.setNode(node.$.id, { label: 'Event Based Gateway', width: nodeHeight, height: nodeHeight }); }); tasks.forEach(task => { g.setNode(task.$.id, { label: 'Task', width: nodeWidth, height: nodeHeight }); }); sequenceFlows.forEach(flow => { g.setEdge(flow.$.sourceRef, flow.$.targetRef); }); dagre.layout(g); return g; }4e:T3f28,defaultXML = ` SequenceFlow_0ausapn SequenceFlow_0dxkp9f SequenceFlow_0jv2v3j SequenceFlow_1jrcr9s SequenceFlow_0ufe6fy SequenceFlow_0jv2v3j SequenceFlow_02h38ck P3D SequenceFlow_1ff7icc SequenceFlow_0mjlfrb SequenceFlow_0nl3xht SequenceFlow_03jvy7f SequenceFlow_1n11k44 SequenceFlow_0zhjtd8 SequenceFlow_0ausapn SequenceFlow_1jrcr9s SequenceFlow_0dxkp9f SequenceFlow_08finpt SequenceFlow_0ufe6fy SequenceFlow_1qttusx P3D SequenceFlow_02h38ck SequenceFlow_03jvy7f SequenceFlow_1ff7icc SequenceFlow_1qttusx SequenceFlow_1n11k44 SequenceFlow_0s49f26 SequenceFlow_0s49f26 SequenceFlow_0zhjtd8 SequenceFlow_08finpt SequenceFlow_0mjlfrb SequenceFlow_161g1v4 SequenceFlow_0nl3xht SequenceFlow_0huwxzf SequenceFlow_0huwxzf SequenceFlow_161g1v4 `4f:[] 48:{"id":"12cd4840fdc9a75b","slug":"bpmn-rendering-poc","title":"BPMN rendering PoC","thumbnail":"87ca5f5c2d638b6c5d1ac8948dddb90e8fd80deef9ead0f788422f5b353d1f91","access_level":"public","create_time":"$D2018-02-06T12:35:46.402Z","update_time":"$D2023-12-20T16:29:05.186Z","view_time":null,"first_public_time":"$D2018-02-06T14:26:21.854Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e9f4366f113b041e","login":"organicpanda","name":"Steve Thomson","avatar_url":"https://avatars-next.observableusercontent.com/65e87c747b5410609d6db9affba9e27b2d061be70672c3171addfdc942c23bcf","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":285,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c2d94852cf47931","login":"organicpanda","name":"Steve Thomson","avatar_url":"https://avatars-next.observableusercontent.com/65e87c747b5410609d6db9affba9e27b2d061be70672c3171addfdc942c23bcf","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0c2d94852cf47931","login":"organicpanda","name":"Steve Thomson","avatar_url":"https://avatars-next.observableusercontent.com/65e87c747b5410609d6db9affba9e27b2d061be70672c3171addfdc942c23bcf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"BPMN rendering PoC","cells":[{"id":0,"value":"md`# BPMN rendering PoC`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof nodeWidth = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 150\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"viewof nodeHeight = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof nodeGap = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"viewof edgeGap = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof rankGap = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof graphMargin = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof rankDir = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof align = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof greedy = DOM.input(\"checkbox\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof ranker = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof fontSize = slider({\n min: 0, \n max: 50, \n step: 1, \n value: 12\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"viewof maxLabelLength = slider({\n min: 0, \n max: 300, \n step: 1, \n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"viewof edgeArc = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"viewof bpmnXML = textarea({ placeholder: 'Paste BPMN XML here to override the defaults' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"md`First we import some libraries to help`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"xml2js = require('https://cdn.jsdelivr.net/npm/xml2js@0.6.2/lib/xml2js.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"foo = require('https://cdn.jsdelivr.net/npm/xml2js@0.6.2/lib/xml2js.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {slider, textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"dagre = require('https://dagrejs.github.io/project/dagre/latest/dagre.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`Input BPMN XML here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"bpmnJSON = {\n return new Promise((resolve, reject) => { \n xml2js.parseString(bpmnXML || defaultXML, (err, result) => err ? reject(err) : resolve(result));\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"nodes = graph.nodes().map(id => {\n const { label, width, height, x, y } = graph.node(id);\n \n return {\n meta: { id, label },\n position: { width, height, x, y }\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"edges = graph.edges().map(edge => ({\n meta: { from: edge.v, to: edge.w },\n position: graph.edge(edge)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"largestX = nodes.map(node => node.position.x + node.position.width).sort((a, b) => b - a)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"largestY = nodes.map(node => node.position.y + node.position.height).sort((a, b) => b - a)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null