mermaid
Version:
Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.
4 lines • 92.4 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/dagre-wrapper/createLabel.js", "../../../src/dagre-wrapper/shapes/util.js", "../../../src/dagre-wrapper/nodes.js", "../../../src/dagre-wrapper/blockArrowHelper.ts", "../../../src/dagre-wrapper/intersect/intersect-node.js", "../../../src/dagre-wrapper/intersect/intersect-ellipse.js", "../../../src/dagre-wrapper/intersect/intersect-circle.js", "../../../src/dagre-wrapper/intersect/intersect-line.js", "../../../src/dagre-wrapper/intersect/intersect-polygon.js", "../../../src/dagre-wrapper/intersect/intersect-rect.js", "../../../src/dagre-wrapper/intersect/index.js", "../../../src/dagre-wrapper/shapes/note.js"],
"sourcesContent": ["import { select } from 'd3';\nimport { log } from '../logger.js';\nimport { getConfig } from '../diagram-api/diagramAPI.js';\nimport { evaluate } from '../diagrams/common/common.js';\nimport { decodeEntities } from '../utils.js';\nimport { replaceIconSubstring } from '../rendering-util/createText.js';\n\n/**\n * @param dom\n * @param styleFn\n */\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr('style', styleFn);\n }\n}\n\n/**\n * @param {any} node\n * @returns {SVGForeignObjectElement} Node\n */\nfunction addHtmlLabel(node) {\n const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));\n const div = fo.append('xhtml:div');\n\n const label = node.label;\n const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';\n const span = div.append('span');\n span.html(label);\n applyStyle(span, node.labelStyle);\n span.attr('class', labelClass);\n\n applyStyle(div, node.labelStyle);\n div.style('display', 'inline-block');\n // Fix for firefox\n div.style('white-space', 'nowrap');\n div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n return fo.node();\n}\n/**\n * @param _vertexText\n * @param style\n * @param isTitle\n * @param isNode\n * @deprecated svg-util/createText instead\n */\nconst createLabel = (_vertexText, style, isTitle, isNode) => {\n let vertexText = _vertexText || '';\n if (typeof vertexText === 'object') {\n vertexText = vertexText[0];\n }\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n vertexText = vertexText.replace(/\\\\n|\\n/g, '<br />');\n log.debug('vertexText' + vertexText);\n const node = {\n isNode,\n label: replaceIconSubstring(decodeEntities(vertexText)),\n labelStyle: style.replace('fill:', 'color:'),\n };\n let vertexNode = addHtmlLabel(node);\n // vertexNode.parentNode.removeChild(vertexNode);\n return vertexNode;\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', style.replace('color:', 'fill:'));\n let rows = [];\n if (typeof vertexText === 'string') {\n rows = vertexText.split(/\\\\n|\\n|<br\\s*\\/?>/gi);\n } else if (Array.isArray(vertexText)) {\n rows = vertexText;\n } else {\n rows = [];\n }\n\n for (const row of rows) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '0');\n if (isTitle) {\n tspan.setAttribute('class', 'title-row');\n } else {\n tspan.setAttribute('class', 'row');\n }\n tspan.textContent = row.trim();\n svgLabel.appendChild(tspan);\n }\n return svgLabel;\n }\n};\n\nexport default createLabel;\n", "import createLabel from '../createLabel.js';\nimport { createText } from '../../rendering-util/createText.js';\nimport { getConfig } from '../../diagram-api/diagramAPI.js';\nimport { select } from 'd3';\nimport { evaluate, sanitizeText } from '../../diagrams/common/common.js';\nimport { decodeEntities } from '../../utils.js';\n\nexport const labelHelper = async (parent, node, _classes, isNode) => {\n const config = getConfig();\n let classes;\n const useHtmlLabels = node.useHtmlLabels || evaluate(config.flowchart.htmlLabels);\n if (!_classes) {\n classes = 'node default';\n } else {\n classes = _classes;\n }\n\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'label').attr('style', node.labelStyle);\n\n // Replace labelText with default value if undefined\n let labelText;\n if (node.labelText === undefined) {\n labelText = '';\n } else {\n labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];\n }\n\n const textNode = label.node();\n let text;\n if (node.labelType === 'markdown') {\n // text = textNode;\n text = createText(\n label,\n sanitizeText(decodeEntities(labelText), config),\n {\n useHtmlLabels,\n width: node.width || config.flowchart.wrappingWidth,\n classes: 'markdown-node-label',\n },\n config\n );\n } else {\n text = textNode.appendChild(\n createLabel(sanitizeText(decodeEntities(labelText), config), node.labelStyle, false, isNode)\n );\n }\n // Get the size of the label\n let bbox = text.getBBox();\n const halfPadding = node.padding / 2;\n\n if (evaluate(config.flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n\n // if there are images, need to wait for them to load before getting the bounding box\n const images = div.getElementsByTagName('img');\n if (images) {\n const noImgText = labelText.replace(/<img[^>]*>/g, '').trim() === '';\n\n await Promise.all(\n [...images].map(\n (img) =>\n new Promise((res) => {\n /**\n *\n */\n function setupImage() {\n img.style.display = 'flex';\n img.style.flexDirection = 'column';\n\n if (noImgText) {\n // default size if no text\n const bodyFontSize = config.fontSize\n ? config.fontSize\n : window.getComputedStyle(document.body).fontSize;\n const enlargingFactor = 5;\n const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';\n img.style.minWidth = width;\n img.style.maxWidth = width;\n } else {\n img.style.width = '100%';\n }\n res(img);\n }\n setTimeout(() => {\n if (img.complete) {\n setupImage();\n }\n });\n img.addEventListener('error', setupImage);\n img.addEventListener('load', setupImage);\n })\n )\n );\n }\n\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n // Center the label\n if (useHtmlLabels) {\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n } else {\n label.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');\n }\n if (node.centerLabel) {\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n }\n label.insert('rect', ':first-child');\n\n return { shapeSvg, bbox, halfPadding, label };\n};\n\nexport const updateNodeBounds = (node, element) => {\n const bbox = element.node().getBBox();\n node.width = bbox.width;\n node.height = bbox.height;\n};\n\n/**\n * @param parent\n * @param w\n * @param h\n * @param points\n */\nexport function insertPolygonShape(parent, w, h, points) {\n return parent\n .insert('polygon', ':first-child')\n .attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n )\n .attr('class', 'label-container')\n .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');\n}\n", "import { select } from 'd3';\nimport { getConfig } from '../diagram-api/diagramAPI.js';\nimport { evaluate } from '../diagrams/common/common.js';\nimport { log } from '../logger.js';\nimport { getArrowPoints } from './blockArrowHelper.js';\nimport createLabel from './createLabel.js';\nimport intersect from './intersect/index.js';\nimport note from './shapes/note.js';\nimport { insertPolygonShape, labelHelper, updateNodeBounds } from './shapes/util.js';\n\nconst formatClass = (str) => {\n if (str) {\n return ' ' + str;\n }\n return '';\n};\nconst getClassesFromNode = (node, otherClasses) => {\n return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(\n node.class\n )}`;\n};\n\nconst question = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const s = w + h;\n\n const points = [\n { x: s / 2, y: 0 },\n { x: s, y: -s / 2 },\n { x: s / 2, y: -s },\n { x: 0, y: -s / 2 },\n ];\n\n log.info('Question main (Circle)');\n\n const questionElem = insertPolygonShape(shapeSvg, s, s, points);\n questionElem.attr('style', node.style);\n updateNodeBounds(node, questionElem);\n\n node.intersect = function (point) {\n log.warn('Intersect called');\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst choice = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n const s = 28;\n const points = [\n { x: 0, y: s / 2 },\n { x: s / 2, y: 0 },\n { x: 0, y: -s / 2 },\n { x: -s / 2, y: 0 },\n ];\n\n const choice = shapeSvg.insert('polygon', ':first-child').attr(\n 'points',\n points\n .map(function (d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n );\n // center the circle around its coordinate\n choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28);\n node.width = 28;\n node.height = 28;\n\n node.intersect = function (point) {\n return intersect.circle(node, 14, point);\n };\n\n return shapeSvg;\n};\n\nconst hexagon = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const f = 4;\n const h = bbox.height + node.padding;\n const m = h / f;\n const w = bbox.width + 2 * m + node.padding;\n const points = [\n { x: m, y: 0 },\n { x: w - m, y: 0 },\n { x: w, y: -h / 2 },\n { x: w - m, y: -h },\n { x: m, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const hex = insertPolygonShape(shapeSvg, w, h, points);\n hex.attr('style', node.style);\n updateNodeBounds(node, hex);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst block_arrow = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);\n\n const f = 2;\n const h = bbox.height + 2 * node.padding;\n const m = h / f;\n const w = bbox.width + 2 * m + node.padding;\n\n const points = getArrowPoints(node.directions, bbox, node);\n\n const blockArrow = insertPolygonShape(shapeSvg, w, h, points);\n blockArrow.attr('style', node.style);\n updateNodeBounds(node, blockArrow);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_left_inv_arrow = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: -h / 2, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: -h / 2, y: -h },\n { x: 0, y: -h / 2 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n\n node.width = w + h;\n node.height = h;\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_right = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst lean_left = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (2 * h) / 6, y: 0 },\n { x: w + h / 6, y: 0 },\n { x: w - (2 * h) / 6, y: -h },\n { x: -h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst trapezoid = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w + (2 * h) / 6, y: 0 },\n { x: w - h / 6, y: -h },\n { x: h / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst inv_trapezoid = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: h / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: (-2 * h) / 6, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst rect_right_inv_arrow = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w + h / 2, y: 0 },\n { x: w, y: -h / 2 },\n { x: w + h / 2, y: -h },\n { x: 0, y: -h },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst cylinder = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const rx = w / 2;\n const ry = rx / (2.5 + w / 50);\n const h = bbox.height + ry + node.padding;\n\n const shape =\n 'M 0,' +\n ry +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n -w +\n ' 0 l 0,' +\n h +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 l 0,' +\n -h;\n\n const el = shapeSvg\n .attr('label-offset-y', ry)\n .insert('path', ':first-child')\n .attr('style', node.style)\n .attr('d', shape)\n .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');\n\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n const pos = intersect.rect(node, point);\n const x = pos.x - node.x;\n\n if (\n rx != 0 &&\n (Math.abs(x) < node.width / 2 ||\n (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))\n ) {\n // ellipsis equation: x*x / a*a + y*y / b*b = 1\n // solve for y to get adjusted value for pos.y\n let y = ry * ry * (1 - (x * x) / (rx * rx));\n if (y != 0) {\n y = Math.sqrt(y);\n }\n y = ry - y;\n if (point.y - node.y > 0) {\n y = -y;\n }\n\n pos.y += y;\n }\n\n return pos;\n };\n\n return shapeSvg;\n};\n\nconst rect = async (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = await labelHelper(\n parent,\n node,\n 'node ' + node.classes + ' ' + node.class,\n true\n );\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);\n // const totalWidth = bbox.width + node.padding * 2;\n // const totalHeight = bbox.height + node.padding * 2;\n const totalWidth = node.positioned ? node.width : bbox.width + node.padding;\n const totalHeight = node.positioned ? node.height : bbox.height + node.padding;\n const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;\n const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;\n rect\n .attr('class', 'basic label-container')\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', x)\n .attr('y', y)\n .attr('width', totalWidth)\n .attr('height', totalHeight);\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst composite = async (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = await labelHelper(\n parent,\n node,\n 'node ' + node.classes,\n true\n );\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // const totalWidth = bbox.width + node.padding * 2;\n // const totalHeight = bbox.height + node.padding * 2;\n const totalWidth = node.positioned ? node.width : bbox.width + node.padding;\n const totalHeight = node.positioned ? node.height : bbox.height + node.padding;\n const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;\n const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;\n rect\n .attr('class', 'basic cluster composite label-container')\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', x)\n .attr('y', y)\n .attr('width', totalWidth)\n .attr('height', totalHeight);\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst labelRect = async (parent, node) => {\n const { shapeSvg } = await labelHelper(parent, node, 'label', true);\n\n log.trace('Classes = ', node.class);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Hide the rect we are only after the label\n const totalWidth = 0;\n const totalHeight = 0;\n rect.attr('width', totalWidth).attr('height', totalHeight);\n shapeSvg.attr('class', 'label edgeLabel');\n\n if (node.props) {\n const propKeys = new Set(Object.keys(node.props));\n if (node.props.borders) {\n applyNodePropertyBorders(rect, node.props.borders, totalWidth, totalHeight);\n propKeys.delete('borders');\n }\n propKeys.forEach((propKey) => {\n log.warn(`Unknown node property ${propKey}`);\n });\n }\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * @param rect\n * @param borders\n * @param totalWidth\n * @param totalHeight\n */\nfunction applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {\n const strokeDashArray = [];\n const addBorder = (length) => {\n strokeDashArray.push(length, 0);\n };\n const skipBorder = (length) => {\n strokeDashArray.push(0, length);\n };\n if (borders.includes('t')) {\n log.debug('add top border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('r')) {\n log.debug('add right border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n if (borders.includes('b')) {\n log.debug('add bottom border');\n addBorder(totalWidth);\n } else {\n skipBorder(totalWidth);\n }\n if (borders.includes('l')) {\n log.debug('add left border');\n addBorder(totalHeight);\n } else {\n skipBorder(totalHeight);\n }\n rect.attr('stroke-dasharray', strokeDashArray.join(' '));\n}\n\nconst rectWithTitle = (parent, node) => {\n // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n // const innerRect = shapeSvg.insert('rect');\n const innerLine = shapeSvg.insert('line');\n\n const label = shapeSvg.insert('g').attr('class', 'label');\n\n const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;\n // const text2 = typeof text2prim === 'object' ? text2prim[0] : text2prim;\n\n let title = '';\n if (typeof text2 === 'object') {\n title = text2[0];\n } else {\n title = text2;\n }\n log.info('Label text abc79', title, text2, typeof text2 === 'object');\n\n const text = label.node().appendChild(createLabel(title, node.labelStyle, true, true));\n let bbox = { width: 0, height: 0 };\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n log.info('Text 2', text2);\n const textRows = text2.slice(1, text2.length);\n let titleBox = text.getBBox();\n const descr = label\n .node()\n .appendChild(\n createLabel(textRows.join ? textRows.join('<br/>') : textRows, node.labelStyle, true, true)\n );\n\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = descr.children[0];\n const dv = select(descr);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n // bbox = label.getBBox();\n // log.info(descr);\n const halfPadding = node.padding / 2;\n select(descr).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n ', ' +\n (titleBox.height + halfPadding + 5) +\n ')'\n );\n select(text).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n ', ' +\n 0 +\n ')'\n );\n // Get the size of the label\n\n // Bounding box for title and text\n bbox = label.node().getBBox();\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n innerLine\n .attr('class', 'divider')\n .attr('x1', -bbox.width / 2 - halfPadding)\n .attr('x2', bbox.width / 2 + halfPadding)\n .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst stadium = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const h = bbox.height + node.padding;\n const w = bbox.width + h / 4 + node.padding;\n\n // add the rect\n const rect = shapeSvg\n .insert('rect', ':first-child')\n .attr('style', node.style)\n .attr('rx', h / 2)\n .attr('ry', h / 2)\n .attr('x', -w / 2)\n .attr('y', -h / 2)\n .attr('width', w)\n .attr('height', h);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst circle = async (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('Circle main');\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n log.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding, point);\n };\n\n return shapeSvg;\n};\n\nconst doublecircle = async (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n const gap = 5;\n const circleGroup = shapeSvg.insert('g', ':first-child');\n const outerCircle = circleGroup.insert('circle');\n const innerCircle = circleGroup.insert('circle');\n\n circleGroup.attr('class', node.class);\n\n // center the circle around its coordinate\n outerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding + gap)\n .attr('width', bbox.width + node.padding + gap * 2)\n .attr('height', bbox.height + node.padding + gap * 2);\n\n innerCircle\n .attr('style', node.style)\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n log.info('DoubleCircle main');\n\n updateNodeBounds(node, outerCircle);\n\n node.intersect = function (point) {\n log.info('DoubleCircle intersect', node, bbox.width / 2 + halfPadding + gap, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point);\n };\n\n return shapeSvg;\n};\n\nconst subroutine = async (parent, node) => {\n const { shapeSvg, bbox } = await labelHelper(\n parent,\n node,\n getClassesFromNode(node, undefined),\n true\n );\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: 0, y: -h },\n { x: 0, y: 0 },\n { x: -8, y: 0 },\n { x: w + 8, y: 0 },\n { x: w + 8, y: -h },\n { x: -8, y: -h },\n { x: -8, y: 0 },\n ];\n\n const el = insertPolygonShape(shapeSvg, w, h, points);\n el.attr('style', node.style);\n updateNodeBounds(node, el);\n\n node.intersect = function (point) {\n return intersect.polygon(node, points, point);\n };\n\n return shapeSvg;\n};\n\nconst start = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst forkJoin = (parent, node, dir) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n let width = 70;\n let height = 10;\n\n if (dir === 'LR') {\n width = 10;\n height = 70;\n }\n\n const shape = shapeSvg\n .append('rect')\n .attr('x', (-1 * width) / 2)\n .attr('y', (-1 * height) / 2)\n .attr('width', width)\n .attr('height', height)\n .attr('class', 'fork-join');\n\n updateNodeBounds(node, shape);\n node.height = node.height + node.padding / 2;\n node.width = node.width + node.padding / 2;\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst end = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const innerCircle = shapeSvg.insert('circle', ':first-child');\n const circle = shapeSvg.insert('circle', ':first-child');\n\n circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);\n\n innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function (point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst class_box = (parent, node) => {\n const halfPadding = node.padding / 2;\n const rowPadding = 4;\n const lineHeight = 8;\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n const topLine = shapeSvg.insert('line');\n const bottomLine = shapeSvg.insert('line');\n let maxWidth = 0;\n let maxHeight = rowPadding;\n\n const labelContainer = shapeSvg.insert('g').attr('class', 'label');\n let verticalPos = 0;\n const hasInterface = node.classData.annotations?.[0];\n\n // 1. Create the labels\n const interfaceLabelText = node.classData.annotations[0]\n ? '\u00AB' + node.classData.annotations[0] + '\u00BB'\n : '';\n const interfaceLabel = labelContainer\n .node()\n .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));\n let interfaceBBox = interfaceLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = interfaceLabel.children[0];\n const dv = select(interfaceLabel);\n interfaceBBox = div.getBoundingClientRect();\n dv.attr('width', interfaceBBox.width);\n dv.attr('height', interfaceBBox.height);\n }\n if (node.classData.annotations[0]) {\n maxHeight += interfaceBBox.height + rowPadding;\n maxWidth += interfaceBBox.width;\n }\n\n let classTitleString = node.classData.label;\n\n if (node.classData.type !== undefined && node.classData.type !== '') {\n if (getConfig().flowchart.htmlLabels) {\n classTitleString += '<' + node.classData.type + '>';\n } else {\n classTitleString += '<' + node.classData.type + '>';\n }\n }\n const classTitleLabel = labelContainer\n .node()\n .appendChild(createLabel(classTitleString, node.labelStyle, true, true));\n select(classTitleLabel).attr('class', 'classTitle');\n let classTitleBBox = classTitleLabel.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = classTitleLabel.children[0];\n const dv = select(classTitleLabel);\n classTitleBBox = div.getBoundingClientRect();\n dv.attr('width', classTitleBBox.width);\n dv.attr('height', classTitleBBox.height);\n }\n maxHeight += classTitleBBox.height + rowPadding;\n if (classTitleBBox.width > maxWidth) {\n maxWidth = classTitleBBox.width;\n }\n const classAttributes = [];\n node.classData.members.forEach((member) => {\n const parsedInfo = member.getDisplayDetails();\n let parsedText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n parsedText = parsedText.replace(/</g, '<').replace(/>/g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n parsedText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n classAttributes.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n const classMethods = [];\n node.classData.methods.forEach((member) => {\n const parsedInfo = member.getDisplayDetails();\n let displayText = parsedInfo.displayText;\n if (getConfig().flowchart.htmlLabels) {\n displayText = displayText.replace(/</g, '<').replace(/>/g, '>');\n }\n const lbl = labelContainer\n .node()\n .appendChild(\n createLabel(\n displayText,\n parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,\n true,\n true\n )\n );\n let bbox = lbl.getBBox();\n if (evaluate(getConfig().flowchart.htmlLabels)) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n\n classMethods.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n // 2. Position the labels\n\n // position the interface label\n if (hasInterface) {\n let diffX = (maxWidth - interfaceBBox.width) / 2;\n select(interfaceLabel).attr(\n 'transform',\n 'translate( ' + ((-1 * maxWidth) / 2 + diffX) + ', ' + (-1 * maxHeight) / 2 + ')'\n );\n verticalPos = interfaceBBox.height + rowPadding;\n }\n // Position the class title label\n let diffX = (maxWidth - classTitleBBox.width) / 2;\n select(classTitleLabel).attr(\n 'transform',\n 'translate( ' +\n ((-1 * maxWidth) / 2 + diffX) +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n\n topLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classAttributes.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' +\n -maxWidth / 2 +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +\n ')'\n );\n //get the height of the bounding box of each member if exists\n const memberBBox = lbl?.getBBox();\n verticalPos += (memberBBox?.height ?? 0) + rowPadding;\n });\n\n verticalPos += lineHeight;\n bottomLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classMethods.forEach((lbl) => {\n select(lbl).attr(\n 'transform',\n 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'\n );\n const memberBBox = lbl?.getBBox();\n verticalPos += (memberBBox?.height ?? 0) + rowPadding;\n });\n\n rect\n .attr('style', node.style)\n .attr('class', 'outer title-state')\n .attr('x', -maxWidth / 2 - halfPadding)\n .attr('y', -(maxHeight / 2) - halfPadding)\n .attr('width', maxWidth + node.padding)\n .attr('height', maxHeight + node.padding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function (point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = {\n rhombus: question,\n composite,\n question,\n rect,\n labelRect,\n rectWithTitle,\n choice,\n circle,\n doublecircle,\n stadium,\n hexagon,\n block_arrow,\n rect_left_inv_arrow,\n lean_right,\n lean_left,\n trapezoid,\n inv_trapezoid,\n rect_right_inv_arrow,\n cylinder,\n start,\n end,\n note,\n subroutine,\n fork: forkJoin,\n join: forkJoin,\n class_box,\n};\n\nlet nodeElems = {};\n\nexport const insertNode = async (elem, node, dir) => {\n let newEl;\n let el;\n\n // Add link when appropriate\n if (node.link) {\n let target;\n if (getConfig().securityLevel === 'sandbox') {\n target = '_top';\n } else if (node.linkTarget) {\n target = node.linkTarget || '_blank';\n }\n newEl = elem.insert('svg:a').attr('xlink:href', node.link).attr('target', target);\n el = await shapes[node.shape](newEl, node, dir);\n } else {\n el = await shapes[node.shape](elem, node, dir);\n newEl = el;\n }\n if (node.tooltip) {\n el.attr('title', node.tooltip);\n }\n if (node.class) {\n el.attr('class', 'node default ' + node.class);\n }\n\n nodeElems[node.id] = newEl;\n\n if (node.haveCallback) {\n nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable');\n }\n return newEl;\n};\nexport const setNodeElem = (elem, node) => {\n nodeElems[node.id] = elem;\n};\nexport const clear = () => {\n nodeElems = {};\n};\n\nexport const positionNode = (node) => {\n const el = nodeElems[node.id];\n log.trace(\n 'Transforming node',\n node.diff,\n node,\n 'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'\n );\n const padding = 8;\n const diff = node.diff || 0;\n if (node.clusterNode) {\n el.attr(\n 'transform',\n 'translate(' +\n (node.x + diff - node.width / 2) +\n ', ' +\n (node.y - node.height / 2 - padding) +\n ')'\n );\n } else {\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n }\n return diff;\n};\n", "import type { Direction } from '../../src/diagrams/block/blockTypes.js';\n\nconst expandAndDeduplicateDirections = (directions: Direction[]) => {\n const uniqueDirections = new Set();\n\n for (const direction of directions) {\n switch (direction) {\n case 'x':\n uniqueDirections.add('right');\n uniqueDirections.add('left');\n break;\n case 'y':\n uniqueDirections.add('up');\n uniqueDirections.add('down');\n break;\n default:\n uniqueDirections.add(direction);\n break;\n }\n }\n\n return uniqueDirections;\n};\nexport const getArrowPoints = (\n duplicatedDirections: Direction[],\n bbox: { width: number; height: number },\n node: any\n) => {\n // Expand and deduplicate the provided directions.\n // for instance: x, right => right, left\n const directions = expandAndDeduplicateDirections(duplicatedDirections);\n\n // Factor to divide height for some calculations.\n const f = 2;\n\n // Calculated height of the bounding box, accounting for node padding.\n const height = bbox.height + 2 * node.padding;\n // Midpoint calculation based on height.\n const midpoint = height / f;\n // Calculated width of the bounding box, accounting for additional width and node padding.\n const width = bbox.width + 2 * midpoint + node.padding;\n // Padding to use, half of the node padding.\n const padding = node.padding / 2;\n\n if (\n directions.has('right') &&\n directions.has('left') &&\n directions.has('up') &&\n directions.has('down')\n ) {\n // SQUARE\n return [\n // Bottom\n { x: 0, y: 0 },\n { x: midpoint, y: 0 },\n { x: width / 2, y: 2 * padding },\n { x: width - midpoint, y: 0 },\n { x: width, y: 0 },\n\n // Right\n { x: width, y: -height / 3 },\n { x: width + 2 * padding, y: -height / 2 },\n { x: width, y: (-2 * height) / 3 },\n { x: width, y: -height },\n\n // Top\n { x: width - midpoint, y: -height },\n { x: width / 2, y: -height - 2 * padding },\n { x: midpoint, y: -height },\n\n // Left\n { x: 0, y: -height },\n { x: 0, y: (-2 * height) / 3 },\n { x: -2 * padding, y: -height / 2 },\n { x: 0, y: -height / 3 },\n ];\n }\n if (directions.has('right') && directions.has('left') && directions.has('up')) {\n // RECTANGLE_VERTICAL (Top Open)\n return [\n { x: midpoint, y: 0 },\n { x: width - midpoint, y: 0 },\n { x: width, y: -height / 2 },\n { x: width - midpoint, y: -height },\n { x: midpoint, y: -height },\n { x: 0, y: -height / 2 },\n ];\n }\n if (directions.has('right') && directions.has('left') && directions.has('down')) {\n // RECTANGLE_VERTICAL (Bottom Open)\n return [\n { x: 0, y: 0 },\n { x: midpoint, y: -height },\n { x: width - midpoint, y: -height },\n { x: width, y: 0 },\n ];\n }\n if (directions.has('right') && directions.has('up') && directions.has('down')) {\n // RECTANGLE_HORIZONTAL (Right Open)\n return [\n { x: 0, y: 0 },\n { x: width, y: -midpoint },\n { x: width, y: -height + midpoint },\n { x: 0, y: -height },\n ];\n }\n if (directions.has('left') && directions.has('up') && directions.has('down')) {\n // RECTANGLE_HORIZONTAL (Left Open)\n return [\n { x: width, y: 0 },\n { x: 0, y: -midpoint },\n { x: 0, y: -height + midpoint },\n { x: width, y: -height },\n ];\n }\n if (directions.has('right') && directions.has('left')) {\n // HORIZONTAL_LINE\n return [\n { x: midpoint, y: 0 },\n { x: midpoint, y: -padding },\n { x: width - midpoint, y: -padding },\n { x: width - midpoint, y: 0 },\n { x: width, y: -height / 2 },\n { x: width - midpoint, y: -height },\n { x: width - midpoint, y: -height + padding },\n { x: midpoint, y: -height + padding },\n { x: midpoint, y: -height },\n { x: 0, y: -height / 2 },\n ];\n }\n if (directions.has('up') && directions.has('down')) {\n // VERTICAL_LINE\n return [\n // Bottom center\n { x: width / 2, y: 0 },\n // Left pont of bottom arrow\n { x: 0, y: -padding },\n { x: midpoint, y: -padding },\n // Left top over vertical section\n { x: midpoint, y: -height + padding },\n { x: 0, y: -height + padding },\n // Top of arrow\n { x: width / 2, y: -height },\n { x: width, y: -height + padding },\n // Top of right vertical bar\n { x: width - midpoint, y: -height + padding },\n { x: width - midpoint, y: -padding },\n { x: width, y: -padding },\n ];\n }\n if (directions.has('right') && directions.has('up')) {\n // ANGLE_RT\n return [\n { x: 0, y: 0 },\n { x: width, y: -midpoint },\n { x: 0, y: -height },\n ];\n }\n if (directions.has('right') && directions.has('down')) {\n // ANGLE_RB\n return [\n { x: 0, y: 0 },\n { x: width, y: 0 },\n { x: 0, y: -height },\n ];\n }\n if (directions.has('left') && directions.has('up')) {\n // ANGLE_LT\n return [\n { x: width, y: 0 },\n { x: 0, y: -midpoint },\n { x: width, y: -height },\n ];\n }\n if (directions.has('left') && directions.has('down')) {\n // ANGLE_LB\n return [\n { x: width, y: 0 },\n { x: 0, y: 0 },\n { x: width, y: -height },\n ];\n }\n if (directions.has('right')) {\n // ARROW_RIGHT\n return [\n { x: midpoint, y: -padding },\n { x: midpoint, y: -padding },\n { x: width - midpoint, y: -padding },\n { x: width - midpoint, y: 0 },\n { x: width, y: -height / 2 },\n { x: width - midpoint, y: -height },\n { x: width - midpoint, y: -height + padding },\n // top left corner of arrow\n { x: midpoint, y: -height + padding },\n { x: midpoint, y: -height + padding },\n ];\n }\n if (directions.has('left')) {\n // ARROW_LEFT\n return [\n { x: midpoint, y: 0 },\n { x: midpoint, y: -padding },\n // Two points, the right corners\n { x: width - midpoint, y: -padding },\n { x: width - midpoint, y: -height + padding },\n { x: midpoint, y: -height + padding },\n { x: midpoint, y: -height },\n { x: 0, y: -height / 2 },\n ];\n }\n if (directions.has('up')) {\n // ARROW_TOP\n return [\n // Bottom center\n { x: midpoint, y: -padding },\n // Left top over vertical section\n { x: midpoint, y: -height + padding },\n { x: 0, y: -height + padding },\n // Top of arrow\n { x: width / 2, y: -height },\n { x: width, y: -height + padding },\n // Top of right vertical bar\n { x: width - midpoint, y: -height + padding },\n { x: width - midpoint, y: -padding },\n ];\n }\n if (directions.has('down')) {\n // ARROW_BOTTOM\n return [\n // Bottom center\n { x: width / 2, y: 0 },\n // Left pont of bottom arrow\n { x: 0, y: -padding },\n { x: midpoint, y: -padding },\n // Left top over vertical section\n { x: midpoint, y: -height + padding },\n { x: width - midpoint, y: -height + padding },\n { x: width - midpoint, y: -padding },\n { x: width, y: -padding },\n ];\n }\n\n // POINT\n return [{ x: 0, y: 0 }];\n};\n", "/**\n * @param node\n * @param point\n */\nfunction intersectNode(node, point) {\n // console.info('Intersect Node');\n return node.intersect(point);\n}\n\nexport default intersectNode;\n", "/**\n * @param node\n * @param rx\n * @param ry\n * @param point\n */\nfunction intersectEllipse(node, rx, ry, point) {\n // Formulae from: https://mathworld.wolfram.com/Ellipse-LineIntersection.html\n\n var cx = node.x;\n var cy = node.y;\n\n var px = cx - point.x;\n var py = cy - point.y;\n\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\n\n var dx = Math.abs((rx * ry * px) / det);\n if (point.x < cx) {\n dx = -dx;\n }\n var dy = Math.abs((rx * ry * py) / det);\n if (point.y < cy) {\n dy = -dy;\n }\n\n return { x: cx + dx, y: cy + dy };\n}\n\nexport default intersectEllipse;\n", "import intersectEllipse from './intersect-ellipse.js';\n\n/**\n * @param node\n * @param rx\n * @param point\n */\nfunction intersectCircle(node, rx, point) {\n return intersectEllipse(node, rx, rx, point);\n}\n\nexport default intersectCircle;\n", "/**\n * Returns the point at which two lines, p and q, intersect or returns undefined if they do not intersect.\n *\n * @param p1\n * @param p2\n * @param q1\n * @param q2\n */\nfunction intersectLine(p1, p2, q1, q2) {\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n // p7 and p473.\n\n var a1, a2, b1, b2, c1, c2;\n var r1, r2, r3, r4;\n var denom, offset, num;\n var x, y;\n\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\n // b1 y + c1 = 0.\n a1 = p2.y - p1.y;\n b1 = p1.x - p2.x;\n c1 = p2.x * p1.y - p1.x * p2.y;\n\n // Compute r3 and r4.\n r3 = a1 * q1.x + b1 * q1.y + c1;\n r4 = a1 * q2.x + b1 * q2.y + c1;\n\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\n // same side of line 1, the line segments do not intersect.\n if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {\n return /*DON'T_INTERSECT*/;\n }\n\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\n a2 = q2.y - q1.y;\n b2 = q1.x - q2.x;\n c2 = q2.x * q1.y - q1.x * q2.y;\n\n // Compute r1 and r2\n r1 = a2 * p1.x + b2 * p1.y + c2;\n r2 = a2 * p2.x + b2 * p2.y + c2;\n\n // Check signs of r1 and r2. If both point 1 and point 2 lie\n // on same side of second line segment, the line segments do\n // not intersect.\n if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2))