mermaid
Version:
Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.
4 lines • 109 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/rendering-util/rendering-elements/edges.js", "../../../src/rendering-util/rendering-elements/edgeMarker.ts", "../../../src/rendering-util/rendering-elements/markers.js"],
"sourcesContent": ["import { getConfig } from '../../diagram-api/diagramAPI.js';\nimport { getEffectiveHtmlLabels } from '../../config.js';\nimport { log } from '../../logger.js';\nimport { createText } from '../createText.js';\nimport { computeLabelTransform } from '../labelTransform.js';\nimport utils, { handleUndefinedAttr } from '../../utils.js';\nimport {\n getLineFunctionsWithOffset,\n markerOffsets,\n markerOffsets2,\n} from '../../utils/lineWithOffset.js';\nimport { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';\n\nimport {\n curveBasis,\n curveLinear,\n curveCardinal,\n curveBumpX,\n curveBumpY,\n curveCatmullRom,\n curveMonotoneX,\n curveMonotoneY,\n curveNatural,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n line,\n select,\n} from 'd3';\nimport rough from 'roughjs';\nimport createLabel from './createLabel.js';\nimport { addEdgeMarkers } from './edgeMarker.ts';\nimport { isLabelStyle, styles2String } from './shapes/handDrawnShapeStyles.js';\n\n/**\n * Resolve the effective curve type for an edge.\n * If edge.curve is a string (e.g. 'rounded', 'linear'), use it directly.\n * Otherwise (undefined, null, or a D3 CurveFactory function), fall back to config.\n * @param {*} edgeCurve - The edge.curve value (string, function, or undefined/null)\n * @returns {string|undefined} - The resolved curve type string\n */\nexport const resolveEdgeCurveType = (edgeCurve) => {\n return typeof edgeCurve === 'string' ? edgeCurve : getConfig()?.flowchart?.curve;\n};\n\nexport const edgeLabels = new Map();\nexport const terminalLabels = new Map();\n\nexport const clear = () => {\n edgeLabels.clear();\n terminalLabels.clear();\n};\n\nexport const getLabelStyles = (styleArray) => {\n if (!styleArray) {\n return '';\n }\n if (typeof styleArray === 'string') {\n return styleArray;\n }\n return styleArray.reduce((acc, style) => acc + ';' + style, '');\n};\n\nexport const insertEdgeLabel = async (elem, edge) => {\n const config = getConfig();\n let useHtmlLabels = getEffectiveHtmlLabels(config);\n const { labelStyles } = styles2String(edge);\n edge.labelStyle = labelStyles;\n\n // Create outer g, edgeLabel, this will be positioned after graph layout\n const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');\n\n // Create inner g, label, this will be positioned now for centering the text\n const label = edgeLabel.insert('g').attr('class', 'label').attr('data-id', edge.id);\n\n const isMarkdown = edge.labelType === 'markdown';\n const markdownWidth = undefined; // Use default width for markdown labels\n const labelElement = await createText(\n elem,\n edge.label,\n {\n style: getLabelStyles(edge.labelStyle),\n useHtmlLabels,\n addSvgBackground: true,\n isNode: false,\n markdown: isMarkdown,\n // Plain text edge labels should auto-wrap, markdown edge labels respect markdownAutoWrap config\n width: isMarkdown ? markdownWidth : undefined,\n },\n config\n );\n\n label.node().appendChild(labelElement);\n log.info('abc82', edge, edge.labelType);\n\n // Center the label\n let bbox = labelElement.getBBox();\n let transformBbox = bbox;\n if (useHtmlLabels) {\n const div = labelElement.children[0];\n const dv = select(labelElement);\n bbox = div.getBoundingClientRect();\n transformBbox = bbox;\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n } else {\n // For SVG labels, use text element's bbox so the text is centered on the edge\n const textEl = select(labelElement).select('text').node();\n if (textEl && typeof textEl.getBBox === 'function') {\n transformBbox = textEl.getBBox();\n }\n }\n label.attr('transform', computeLabelTransform(transformBbox, useHtmlLabels));\n\n // Make element accessible by id for positioning\n edgeLabels.set(edge.id, edgeLabel);\n\n // Update the abstract data of the edge with the new information about its width and height\n edge.width = bbox.width;\n edge.height = bbox.height;\n\n let fo;\n if (edge.startLabelLeft) {\n // Create the actual text element\n const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');\n const startLabelElement = await createLabel(\n inner,\n edge.startLabelLeft,\n getLabelStyles(edge.labelStyle) || '',\n false,\n false\n );\n fo = startLabelElement;\n let slBox = startLabelElement.getBBox();\n if (useHtmlLabels) {\n const div = startLabelElement.children[0];\n const dv = select(startLabelElement);\n slBox = div.getBoundingClientRect();\n dv.attr('width', slBox.width);\n dv.attr('height', slBox.height);\n }\n inner.attr('transform', computeLabelTransform(slBox, useHtmlLabels));\n if (!terminalLabels.get(edge.id)) {\n terminalLabels.set(edge.id, {});\n }\n terminalLabels.get(edge.id).startLeft = startEdgeLabelLeft;\n setTerminalWidth(fo, edge.startLabelLeft);\n }\n if (edge.startLabelRight) {\n const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');\n const startLabelElement = await createLabel(\n inner,\n edge.startLabelRight,\n getLabelStyles(edge.labelStyle) || '',\n false,\n false\n );\n fo = startLabelElement;\n let slBox = startLabelElement.getBBox();\n if (useHtmlLabels) {\n const div = startLabelElement.children[0];\n const dv = select(startLabelElement);\n slBox = div.getBoundingClientRect();\n dv.attr('width', slBox.width);\n dv.attr('height', slBox.height);\n }\n inner.attr('transform', computeLabelTransform(slBox, useHtmlLabels));\n\n if (!terminalLabels.get(edge.id)) {\n terminalLabels.set(edge.id, {});\n }\n terminalLabels.get(edge.id).startRight = startEdgeLabelRight;\n setTerminalWidth(fo, edge.startLabelRight);\n }\n if (edge.endLabelLeft) {\n const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n // TODO: Remove? `inner` is not used\n const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');\n const endLabelElement = await createLabel(\n endEdgeLabelLeft,\n edge.endLabelLeft,\n getLabelStyles(edge.labelStyle) || '',\n false,\n false\n );\n fo = endLabelElement;\n let slBox = endLabelElement.getBBox();\n if (useHtmlLabels) {\n const div = endLabelElement.children[0];\n const dv = select(endLabelElement);\n slBox = div.getBoundingClientRect();\n dv.attr('width', slBox.width);\n dv.attr('height', slBox.height);\n }\n inner.attr('transform', computeLabelTransform(slBox, useHtmlLabels));\n\n if (!terminalLabels.get(edge.id)) {\n terminalLabels.set(edge.id, {});\n }\n terminalLabels.get(edge.id).endLeft = endEdgeLabelLeft;\n setTerminalWidth(fo, edge.endLabelLeft);\n }\n if (edge.endLabelRight) {\n const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n // TODO: Remove? `inner` is not used\n const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');\n\n const endLabelElement = await createLabel(\n endEdgeLabelRight,\n edge.endLabelRight,\n getLabelStyles(edge.labelStyle) || '',\n false,\n false\n );\n fo = endLabelElement;\n let slBox = endLabelElement.getBBox();\n if (useHtmlLabels) {\n const div = endLabelElement.children[0];\n const dv = select(endLabelElement);\n slBox = div.getBoundingClientRect();\n dv.attr('width', slBox.width);\n dv.attr('height', slBox.height);\n }\n inner.attr('transform', computeLabelTransform(slBox, useHtmlLabels));\n\n if (!terminalLabels.get(edge.id)) {\n terminalLabels.set(edge.id, {});\n }\n terminalLabels.get(edge.id).endRight = endEdgeLabelRight;\n setTerminalWidth(fo, edge.endLabelRight);\n }\n return labelElement;\n};\n\n/**\n * @param {any} fo\n * @param {any} value\n */\nfunction setTerminalWidth(fo, value) {\n if (getEffectiveHtmlLabels(getConfig()) && fo) {\n fo.style.width = value.length * 9 + 'px';\n fo.style.height = '12px';\n }\n}\n\nexport const positionEdgeLabel = (edge, paths) => {\n log.debug('Moving label abc88 ', edge.id, edge.label, edgeLabels.get(edge.id), paths);\n let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n const siteConfig = getConfig();\n const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);\n if (edge.label) {\n const el = edgeLabels.get(edge.id);\n let x = edge.x;\n let y = edge.y;\n if (path) {\n const pos = utils.calcLabelPosition(path);\n log.debug(\n 'Moving label ' + edge.label + ' from (',\n x,\n ',',\n y,\n ') to (',\n pos.x,\n ',',\n pos.y,\n ') abc88'\n );\n if (paths.updatedPath) {\n x = pos.x;\n y = pos.y;\n }\n }\n el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);\n }\n\n if (edge.startLabelLeft) {\n const el = terminalLabels.get(edge.id).startLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, 'start_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', `translate(${x}, ${y})`);\n }\n if (edge.startLabelRight) {\n const el = terminalLabels.get(edge.id).startRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n const pos = utils.calcTerminalLabelPosition(\n edge.arrowTypeStart ? 10 : 0,\n 'start_right',\n path\n );\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', `translate(${x}, ${y})`);\n }\n if (edge.endLabelLeft) {\n const el = terminalLabels.get(edge.id).endLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', `translate(${x}, ${y})`);\n }\n if (edge.endLabelRight) {\n const el = terminalLabels.get(edge.id).endRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, 'end_right', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', `translate(${x}, ${y})`);\n }\n};\n\n// Swimlanes-only helper, kept module-private: it self-gates to `-to-label` edges\n// (the swimlanes edge-label waypoint mechanism) and is called only from insertEdge's\n// `layout === 'swimlane'` branch, so it is a no-op for every other layout.\nconst orthogonalizeToLabelClippedPoints = (edge, points) => {\n if (!edge?.isLabelEdge || !edge?.id?.endsWith('-to-label') || !Array.isArray(points)) {\n return points;\n }\n\n if (points.length !== 2) {\n return points;\n }\n\n const [start, end] = points;\n const dx = Math.abs(end.x - start.x);\n const dy = Math.abs(end.y - start.y);\n\n if (dx < 1e-3 || dy < 1e-3) {\n return points;\n }\n\n if (dy >= dx) {\n return [start, { x: start.x, y: end.y }, end];\n }\n\n return [start, { x: end.x, y: start.y }, end];\n};\n\nconst outsideNode = (node, point) => {\n const x = node.x;\n const y = node.y;\n const dx = Math.abs(point.x - x);\n const dy = Math.abs(point.y - y);\n const w = node.width / 2;\n const h = node.height / 2;\n return dx >= w || dy >= h;\n};\n\nexport const intersection = (node, outsidePoint, insidePoint) => {\n log.debug(`intersection calc abc89:\n outsidePoint: ${JSON.stringify(outsidePoint)}\n insidePoint : ${JSON.stringify(insidePoint)}\n node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);\n const x = node.x;\n const y = node.y;\n\n const dx = Math.abs(x - insidePoint.x);\n const w = node.width / 2;\n let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;\n const h = node.height / 2;\n\n const Q = Math.abs(outsidePoint.y - insidePoint.y);\n const R = Math.abs(outsidePoint.x - insidePoint.x);\n\n if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {\n // Intersection is top or bottom of rect.\n let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n r = (R * q) / Q;\n const res = {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q,\n };\n\n if (r === 0) {\n res.x = outsidePoint.x;\n res.y = outsidePoint.y;\n }\n if (R === 0) {\n res.x = outsidePoint.x;\n }\n if (Q === 0) {\n res.y = outsidePoint.y;\n }\n\n log.debug(`abc89 top/bottom calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);\n\n return res;\n } else {\n // Intersection on sides of rect\n if (insidePoint.x < outsidePoint.x) {\n r = outsidePoint.x - w - x;\n } else {\n r = x - w - outsidePoint.x;\n }\n let q = (Q * r) / R;\n let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;\n let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;\n log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });\n if (r === 0) {\n _x = outsidePoint.x;\n _y = outsidePoint.y;\n }\n if (R === 0) {\n _x = outsidePoint.x;\n }\n if (Q === 0) {\n _y = outsidePoint.y;\n }\n\n return { x: _x, y: _y };\n }\n};\n\nconst cutPathAtIntersect = (_points, boundaryNode) => {\n log.warn('abc88 cutPathAtIntersect', _points, boundaryNode);\n let points = [];\n let lastPointOutside = _points[0];\n let isInside = false;\n _points.forEach((point) => {\n log.info('abc88 checking point', point, boundaryNode);\n\n if (!outsideNode(boundaryNode, point) && !isInside) {\n const inter = intersection(boundaryNode, lastPointOutside, point);\n log.debug('abc88 inside', point, lastPointOutside, inter);\n log.debug('abc88 intersection', inter, boundaryNode);\n\n let pointPresent = false;\n points.forEach((p) => {\n pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n });\n\n if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {\n points.push(inter);\n } else {\n log.warn('abc88 no intersect', inter, points);\n }\n isInside = true;\n } else {\n log.warn('abc88 outside', point, lastPointOutside);\n lastPointOutside = point;\n if (!isInside) {\n points.push(point);\n }\n }\n });\n log.debug('returning points', points);\n return points;\n};\n\nfunction extractCornerPoints(points) {\n const cornerPoints = [];\n const cornerPointPositions = [];\n for (let i = 1; i < points.length - 1; i++) {\n const prev = points[i - 1];\n const curr = points[i];\n const next = points[i + 1];\n if (\n prev.x === curr.x &&\n curr.y === next.y &&\n Math.abs(curr.x - next.x) > 5 &&\n Math.abs(curr.y - prev.y) > 5\n ) {\n cornerPoints.push(curr);\n cornerPointPositions.push(i);\n } else if (\n prev.y === curr.y &&\n curr.x === next.x &&\n Math.abs(curr.x - prev.x) > 5 &&\n Math.abs(curr.y - next.y) > 5\n ) {\n cornerPoints.push(curr);\n cornerPointPositions.push(i);\n }\n }\n return { cornerPoints, cornerPointPositions };\n}\n\nconst findAdjacentPoint = function (pointA, pointB, distance) {\n const xDiff = pointB.x - pointA.x;\n const yDiff = pointB.y - pointA.y;\n const length = Math.sqrt(xDiff * xDiff + yDiff * yDiff);\n const ratio = distance / length;\n return { x: pointB.x - ratio * xDiff, y: pointB.y - ratio * yDiff };\n};\n\nconst fixCorners = function (lineData) {\n const { cornerPointPositions } = extractCornerPoints(lineData);\n const newLineData = [];\n for (let i = 0; i < lineData.length; i++) {\n if (cornerPointPositions.includes(i)) {\n const prevPoint = lineData[i - 1];\n const nextPoint = lineData[i + 1];\n const cornerPoint = lineData[i];\n\n const newPrevPoint = findAdjacentPoint(prevPoint, cornerPoint, 5);\n const newNextPoint = findAdjacentPoint(nextPoint, cornerPoint, 5);\n\n const xDiff = newNextPoint.x - newPrevPoint.x;\n const yDiff = newNextPoint.y - newPrevPoint.y;\n newLineData.push(newPrevPoint);\n\n const a = Math.sqrt(2) * 2;\n let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };\n if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {\n log.debug(\n 'Corner point fixing',\n Math.abs(nextPoint.x - prevPoint.x),\n Math.abs(nextPoint.y - prevPoint.y)\n );\n const r = 5;\n if (cornerPoint.x === newPrevPoint.x) {\n newCornerPoint = {\n x: xDiff < 0 ? newPrevPoint.x - r + a : newPrevPoint.x + r - a,\n y: yDiff < 0 ? newPrevPoint.y - a : newPrevPoint.y + a,\n };\n } else {\n newCornerPoint = {\n x: xDiff < 0 ? newPrevPoint.x - a : newPrevPoint.x + a,\n y: yDiff < 0 ? newPrevPoint.y - r + a : newPrevPoint.y + r - a,\n };\n }\n } else {\n log.debug(\n 'Corner point skipping fixing',\n Math.abs(nextPoint.x - prevPoint.x),\n Math.abs(nextPoint.y - prevPoint.y)\n );\n }\n newLineData.push(newCornerPoint, newNextPoint);\n } else {\n newLineData.push(lineData[i]);\n }\n }\n return newLineData;\n};\n\nconst generateDashArray = (len, oValueS, oValueE) => {\n const middleLength = len - oValueS - oValueE;\n const dashLength = 2; // Length of each dash\n const gapLength = 2; // Length of each gap\n const dashGapPairLength = dashLength + gapLength;\n\n // Calculate number of complete dash-gap pairs that can fit\n const numberOfPairs = Math.floor(middleLength / dashGapPairLength);\n\n // Generate the middle pattern array\n const middlePattern = Array(numberOfPairs).fill(`${dashLength} ${gapLength}`).join(' ');\n\n // Combine all parts\n const dashArray = `0 ${oValueS} ${middlePattern} ${oValueE}`;\n\n return dashArray;\n};\n\nexport const insertEdge = function (\n elem,\n edge,\n clusterDb,\n diagramType,\n startNode,\n endNode,\n diagramId,\n skipIntersect = false\n) {\n if (!diagramId) {\n throw new Error(\n `insertEdge: missing diagramId for edge \"${edge.id}\" \u2014 edge IDs require a diagram prefix for uniqueness`\n );\n }\n const { handDrawnSeed, layout } = getConfig();\n let points = edge.points;\n let pointsHasChanged = false;\n const tail = startNode;\n var head = endNode;\n const edgeClassStyles = [];\n for (const key in edge.cssCompiledStyles) {\n if (isLabelStyle(key)) {\n continue;\n }\n edgeClassStyles.push(edge.cssCompiledStyles[key]);\n }\n\n // Edge endpoint clipping. The swimlanes layout produces orthogonal edges whose\n // axis-aligned entry/exit segments must be preserved, so it uses a dedicated\n // boundary-clipping path. Every other layout (dagre, ELK, \u2026) keeps the original\n // clipping below, so their edge ports are unaffected by swimlanes.\n if (layout === 'swimlane') {\n if (head.intersect && tail.intersect && Array.isArray(points) && points.length >= 2) {\n if (points.length === 2) {\n // Simple straight edge: just clip the two endpoints to the node boundaries.\n points = [tail.intersect(points[0]), head.intersect(points[1])];\n } else {\n // For multi-segment paths, keep the inner bend points and just adjust the entry/exit\n // segments near the nodes.\n const innerPoints = points.slice(1, -1);\n const firstInner = innerPoints[0];\n const lastInner = innerPoints[innerPoints.length - 1];\n const TOLERANCE = 0.5;\n const lastIsPinned =\n Math.abs(points[points.length - 1].x - lastInner.x) < TOLERANCE &&\n Math.abs(points[points.length - 1].y - lastInner.y) < TOLERANCE;\n\n const newFirst = tail.intersect(firstInner);\n const newLast = lastIsPinned ? lastInner : head.intersect(lastInner);\n\n // When the boundary intersection lands ~on the inner point, skip it to\n // avoid a zero-length final segment (keeps the entry/exit segment orthogonal).\n const lastIsDuplicate =\n Math.abs(newLast.x - lastInner.x) < TOLERANCE &&\n Math.abs(newLast.y - lastInner.y) < TOLERANCE;\n const firstIsDuplicate =\n Math.abs(newFirst.x - firstInner.x) < TOLERANCE &&\n Math.abs(newFirst.y - firstInner.y) < TOLERANCE;\n\n const startPoints = firstIsDuplicate ? [] : [newFirst];\n const endPoints = lastIsDuplicate ? [] : [newLast];\n\n points = [...startPoints, ...innerPoints, ...endPoints];\n }\n }\n points = orthogonalizeToLabelClippedPoints(edge, points);\n } else if (head.intersect && tail.intersect && !skipIntersect) {\n // Original clipping \u2014 unchanged for dagre / ELK / every non-swimlanes layout.\n points = points.slice(1, edge.points.length - 1);\n points.unshift(tail.intersect(points[0]));\n points.push(head.intersect(points[points.length - 1]));\n }\n const pointsStr = btoa(JSON.stringify(points));\n if (edge.toCluster) {\n log.info('to cluster abc88', clusterDb.get(edge.toCluster));\n points = cutPathAtIntersect(edge.points, clusterDb.get(edge.toCluster).node);\n\n pointsHasChanged = true;\n }\n\n if (edge.fromCluster) {\n log.debug(\n 'from cluster abc88',\n clusterDb.get(edge.fromCluster),\n JSON.stringify(points, null, 2)\n );\n points = cutPathAtIntersect(points.reverse(), clusterDb.get(edge.fromCluster).node).reverse();\n\n pointsHasChanged = true;\n }\n\n let lineData = points.filter((p) => !Number.isNaN(p.y));\n // Resolve curve type: use edge.curve if it's a string, otherwise fall back to config default\n const edgeCurveType = resolveEdgeCurveType(edge.curve);\n // Apply fixCorners for non-rounded curves to pre-round right-angle corners\n // (rounded curve type uses generateRoundedPath instead)\n if (edgeCurveType !== 'rounded') {\n lineData = fixCorners(lineData);\n }\n let curve = curveLinear;\n switch (edgeCurveType) {\n case 'linear':\n curve = curveLinear;\n break;\n case 'basis':\n curve = curveBasis;\n break;\n case 'cardinal':\n curve = curveCardinal;\n break;\n case 'bumpX':\n curve = curveBumpX;\n break;\n case 'bumpY':\n curve = curveBumpY;\n break;\n case 'catmullRom':\n curve = curveCatmullRom;\n break;\n case 'monotoneX':\n curve = curveMonotoneX;\n break;\n case 'monotoneY':\n curve = curveMonotoneY;\n break;\n case 'natural':\n curve = curveNatural;\n break;\n case 'step':\n curve = curveStep;\n break;\n case 'stepAfter':\n curve = curveStepAfter;\n break;\n case 'stepBefore':\n curve = curveStepBefore;\n break;\n case 'rounded':\n curve = curveLinear;\n break;\n default:\n curve = curveBasis;\n }\n\n const { x, y } = getLineFunctionsWithOffset(edge);\n const lineFunction = line().x(x).y(y).curve(curve);\n\n let strokeClasses;\n switch (edge.thickness) {\n case 'normal':\n strokeClasses = 'edge-thickness-normal';\n break;\n case 'thick':\n strokeClasses = 'edge-thickness-thick';\n break;\n case 'invisible':\n strokeClasses = 'edge-thickness-invisible';\n break;\n default:\n strokeClasses = 'edge-thickness-normal';\n }\n switch (edge.pattern) {\n case 'solid':\n strokeClasses += ' edge-pattern-solid';\n break;\n case 'dotted':\n strokeClasses += ' edge-pattern-dotted';\n break;\n case 'dashed':\n strokeClasses += ' edge-pattern-dashed';\n break;\n default:\n strokeClasses += ' edge-pattern-solid';\n }\n let svgPath;\n let linePath =\n edgeCurveType === 'rounded'\n ? generateRoundedPath(applyMarkerOffsetsToPoints(lineData, edge), 5)\n : lineFunction(lineData);\n const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];\n let strokeColor = edgeStyles.find((style) => style?.startsWith('stroke:'));\n\n let animationClass = '';\n if (edge.animate) {\n animationClass = 'edge-animation-fast';\n }\n if (edge.animation) {\n animationClass = 'edge-animation-' + edge.animation;\n }\n\n let animatedEdge = false;\n if (edge.look === 'handDrawn') {\n const rc = rough.svg(elem);\n Object.assign([], lineData);\n\n const svgPathNode = rc.path(linePath, {\n roughness: 0.3,\n seed: handDrawnSeed,\n });\n\n strokeClasses += ' transition';\n\n svgPath = select(svgPathNode)\n .select('path')\n .attr('id', `${diagramId}-${edge.id}`)\n .attr(\n 'class',\n ' ' +\n strokeClasses +\n (edge.classes ? ' ' + edge.classes : '') +\n (animationClass ? ' ' + animationClass : '')\n )\n .attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');\n let d = svgPath.attr('d');\n svgPath.attr('d', d);\n elem.node().appendChild(svgPath.node());\n } else {\n const stylesFromClasses = edgeClassStyles.join(';');\n const styles = edgeStyles ? edgeStyles.reduce((acc, style) => acc + style + ';', '') : '';\n\n const pathStyle =\n (stylesFromClasses ? stylesFromClasses + ';' + styles + ';' : styles) +\n ';' +\n (edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');\n svgPath = elem\n .append('path')\n .attr('d', linePath)\n .attr('id', `${diagramId}-${edge.id}`)\n .attr(\n 'class',\n ' ' +\n strokeClasses +\n (edge.classes ? ' ' + edge.classes : '') +\n (animationClass ? ' ' + animationClass : '')\n )\n .attr('style', pathStyle);\n\n //eslint-disable-next-line @typescript-eslint/prefer-regexp-exec\n strokeColor = pathStyle.match(/stroke:([^;]+)/)?.[1];\n\n // Possible fix to remove eslint-disable-next-line\n //strokeColor = /stroke:([^;]+)/.exec(pathStyle)?.[1];\n\n animatedEdge =\n edge.animate === true || !!edge.animation || stylesFromClasses.includes('animation');\n const pathNode = svgPath.node();\n const len = typeof pathNode.getTotalLength === 'function' ? pathNode.getTotalLength() : 0;\n const oValueS = markerOffsets2[edge.arrowTypeStart] || 0;\n const oValueE = markerOffsets2[edge.arrowTypeEnd] || 0;\n\n if (edge.look === 'neo' && !animatedEdge) {\n const dashArray =\n edge.pattern === 'dotted' || edge.pattern === 'dashed'\n ? generateDashArray(len, oValueS, oValueE)\n : `0 ${oValueS} ${len - oValueS - oValueE} ${oValueE}`;\n\n // No offset needed because we already start with a zero-length dash that effectively sets us up for a gap at the start.\n const mOffset = `stroke-dasharray: ${dashArray}; stroke-dashoffset: 0;`;\n svgPath.attr('style', mOffset + svgPath.attr('style'));\n }\n }\n\n // MC Special\n svgPath.attr('data-edge', true);\n svgPath.attr('data-et', 'edge');\n svgPath.attr('data-id', edge.id);\n svgPath.attr('data-points', pointsStr);\n // Add data attributes for neo look support\n svgPath.attr('data-look', handleUndefinedAttr(edge.look));\n // DEBUG code, adds a red circle at each edge coordinate\n // cornerPoints.forEach((point) => {\n // elem\n // .append('circle')\n // .style('stroke', 'blue')\n // .style('fill', 'blue')\n // .attr('r', 3)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n if (edge.showPoints) {\n lineData.forEach((point) => {\n elem\n .append('circle')\n .style('stroke', 'red')\n .style('fill', 'red')\n .attr('r', 1)\n .attr('cx', point.x)\n .attr('cy', point.y);\n });\n }\n // lineData.forEach((point) => {\n // elem\n // .append('circle')\n // .style('stroke', 'red')\n // .style('fill', 'red')\n // .attr('r', 1)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n\n let url = '';\n if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(').replace(/\\)/g, '\\\\)');\n }\n log.info('arrowTypeStart', edge.arrowTypeStart);\n log.info('arrowTypeEnd', edge.arrowTypeEnd);\n\n const useMargin = !animatedEdge && edge?.look === 'neo';\n addEdgeMarkers(svgPath, edge, url, diagramId, diagramType, useMargin, strokeColor);\n const midIndex = Math.floor(points.length / 2);\n const point = points[midIndex];\n if (!utils.isLabelCoordinateInPath(point, svgPath.attr('d'))) {\n pointsHasChanged = true;\n }\n\n let paths = {};\n if (pointsHasChanged) {\n paths.updatedPath = points;\n }\n paths.originalPath = edge.points;\n return paths;\n};\n\n/**\n * Generates SVG path data with rounded corners from an array of points.\n * @param {Array} points - Array of points in the format [{x: Number, y: Number}, ...]\n * @param {Number} radius - The radius of the rounded corners\n * @returns {String} - SVG path data string\n */\nexport function generateRoundedPath(points, radius) {\n if (points.length < 2) {\n return '';\n }\n\n let path = '';\n const size = points.length;\n const epsilon = 1e-5;\n\n for (let i = 0; i < size; i++) {\n const currPoint = points[i];\n const prevPoint = points[i - 1];\n const nextPoint = points[i + 1];\n\n if (i === 0) {\n // Move to the first point\n path += `M${currPoint.x},${currPoint.y}`;\n } else if (i === size - 1) {\n // Last point, draw a straight line to the final point\n path += `L${currPoint.x},${currPoint.y}`;\n } else {\n // Calculate vectors for incoming and outgoing segments\n const dx1 = currPoint.x - prevPoint.x;\n const dy1 = currPoint.y - prevPoint.y;\n const dx2 = nextPoint.x - currPoint.x;\n const dy2 = nextPoint.y - currPoint.y;\n\n const len1 = Math.hypot(dx1, dy1);\n const len2 = Math.hypot(dx2, dy2);\n\n // Prevent division by zero\n if (len1 < epsilon || len2 < epsilon) {\n path += `L${currPoint.x},${currPoint.y}`;\n continue;\n }\n\n // Normalize the vectors\n const nx1 = dx1 / len1;\n const ny1 = dy1 / len1;\n const nx2 = dx2 / len2;\n const ny2 = dy2 / len2;\n\n // Calculate the angle between the vectors\n const dot = nx1 * nx2 + ny1 * ny2;\n // Clamp the dot product to avoid numerical issues with acos\n const clampedDot = Math.max(-1, Math.min(1, dot));\n const angle = Math.acos(clampedDot);\n\n // Skip rounding if the angle is too small or too close to 180 degrees\n if (angle < epsilon || Math.abs(Math.PI - angle) < epsilon) {\n path += `L${currPoint.x},${currPoint.y}`;\n continue;\n }\n\n // Calculate the distance to offset the control point\n const cutLen = Math.min(radius / Math.sin(angle / 2), len1 / 2, len2 / 2);\n\n // Calculate the start and end points of the curve\n const startX = currPoint.x - nx1 * cutLen;\n const startY = currPoint.y - ny1 * cutLen;\n const endX = currPoint.x + nx2 * cutLen;\n const endY = currPoint.y + ny2 * cutLen;\n\n // Draw the line to the start of the curve\n path += `L${startX},${startY}`;\n\n // Draw the quadratic Bezier curve\n path += `Q${currPoint.x},${currPoint.y} ${endX},${endY}`;\n }\n }\n\n return path;\n}\n// Helper function to calculate delta and angle between two points\nfunction calculateDeltaAndAngle(point1, point2) {\n if (!point1 || !point2) {\n return { angle: 0, deltaX: 0, deltaY: 0 };\n }\n const deltaX = point2.x - point1.x;\n const deltaY = point2.y - point1.y;\n const angle = Math.atan2(deltaY, deltaX);\n return { angle, deltaX, deltaY };\n}\n\n// Function to adjust the first and last points of the points array\nexport function applyMarkerOffsetsToPoints(points, edge) {\n // Copy the points array to avoid mutating the original data\n const newPoints = points.map((point) => ({ ...point }));\n\n // Handle the first point (start of the edge)\n if (points.length >= 2 && markerOffsets[edge.arrowTypeStart]) {\n const offsetValue = markerOffsets[edge.arrowTypeStart];\n\n const point1 = points[0];\n const point2 = points[1];\n\n const { angle } = calculateDeltaAndAngle(point1, point2);\n\n const offsetX = offsetValue * Math.cos(angle);\n const offsetY = offsetValue * Math.sin(angle);\n\n newPoints[0].x = point1.x + offsetX;\n newPoints[0].y = point1.y + offsetY;\n }\n\n // Handle the last point (end of the edge)\n const n = points.length;\n if (n >= 2 && markerOffsets[edge.arrowTypeEnd]) {\n const offsetValue = markerOffsets[edge.arrowTypeEnd];\n\n const point1 = points[n - 1];\n const point2 = points[n - 2];\n\n const { angle } = calculateDeltaAndAngle(point2, point1);\n\n const offsetX = offsetValue * Math.cos(angle);\n const offsetY = offsetValue * Math.sin(angle);\n\n newPoints[n - 1].x = point1.x - offsetX;\n newPoints[n - 1].y = point1.y - offsetY;\n }\n\n return newPoints;\n}\n", "import type { SVG } from '../../diagram-api/types.js';\nimport { log } from '../../logger.js';\nimport type { EdgeData } from '../../types.js';\n/**\n * Adds SVG markers to a path element based on the arrow types specified in the edge.\n *\n * @param svgPath - The SVG path element to add markers to.\n * @param edge - The edge data object containing the arrow types.\n * @param url - The URL of the SVG marker definitions.\n * @param id - The ID prefix for the SVG marker definitions.\n * @param diagramType - The type of diagram being rendered.\n */\nexport const addEdgeMarkers = (\n svgPath: SVG,\n edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,\n url: string,\n id: string,\n diagramType: string,\n useMargin = false,\n strokeColor?: string\n) => {\n if (edge.arrowTypeStart) {\n addEdgeMarker(\n svgPath,\n 'start',\n edge.arrowTypeStart,\n url,\n id,\n diagramType,\n useMargin,\n strokeColor\n );\n }\n if (edge.arrowTypeEnd) {\n addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType, useMargin, strokeColor);\n }\n};\n\nconst arrowTypesMap = {\n arrow_cross: { type: 'cross', fill: false },\n arrow_point: { type: 'point', fill: true },\n arrow_barb: { type: 'barb', fill: true },\n arrow_barb_neo: { type: 'barb', fill: true },\n arrow_circle: { type: 'circle', fill: false },\n aggregation: { type: 'aggregation', fill: false },\n extension: { type: 'extension', fill: false },\n composition: { type: 'composition', fill: true },\n dependency: { type: 'dependency', fill: true },\n lollipop: { type: 'lollipop', fill: false },\n only_one: { type: 'onlyOne', fill: false },\n zero_or_one: { type: 'zeroOrOne', fill: false },\n one_or_more: { type: 'oneOrMore', fill: false },\n zero_or_more: { type: 'zeroOrMore', fill: false },\n requirement_arrow: { type: 'requirement_arrow', fill: false },\n requirement_contains: { type: 'requirement_contains', fill: false },\n} as const;\n\nconst arrowTypesWithMarginSupport = [\n 'cross',\n 'point',\n 'circle',\n 'lollipop',\n 'aggregation',\n 'extension',\n 'composition',\n 'dependency',\n 'barb',\n];\n\nconst addEdgeMarker = (\n svgPath: SVG,\n position: 'start' | 'end',\n arrowType: string,\n url: string,\n id: string,\n diagramType: string,\n useMargin = false,\n strokeColor?: string\n) => {\n const arrowTypeInfo = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];\n const marginSupport = arrowTypeInfo && arrowTypesWithMarginSupport.includes(arrowTypeInfo.type);\n\n if (!arrowTypeInfo) {\n log.warn(`Unknown arrow type: ${arrowType}`);\n return; // unknown arrow type, ignore\n }\n\n const endMarkerType = arrowTypeInfo.type;\n const suffix = position === 'start' ? 'Start' : 'End';\n\n const offset = useMargin && marginSupport ? '-margin' : '';\n const originalMarkerId = `${id}_${diagramType}-${endMarkerType}${suffix}${offset}`;\n\n // If stroke color is specified and non-empty, create or use a colored variant of the marker\n if (strokeColor && strokeColor.trim() !== '') {\n // Create a sanitized color value for use in IDs\n const colorId = strokeColor.replace(/[^\\dA-Za-z]/g, '_');\n const coloredMarkerId = `${originalMarkerId}_${colorId}`;\n\n // Check if the colored marker already exists\n if (!document.getElementById(coloredMarkerId)) {\n // Get the original marker\n const originalMarker = document.getElementById(originalMarkerId);\n if (originalMarker) {\n // Clone the marker and create colored version\n const coloredMarker = originalMarker.cloneNode(true) as Element;\n coloredMarker.id = coloredMarkerId;\n\n // Apply colors to the paths inside the marker\n const paths = coloredMarker.querySelectorAll('path, circle, line');\n paths.forEach((path) => {\n path.setAttribute('stroke', strokeColor);\n\n // Apply fill only to markers that should be filled\n if (arrowTypeInfo.fill) {\n path.setAttribute('fill', strokeColor);\n }\n });\n\n // Add the new colored marker to the defs section\n originalMarker.parentNode?.appendChild(coloredMarker);\n }\n }\n\n // Use the colored marker\n svgPath.attr(`marker-${position}`, `url(${url}#${coloredMarkerId})`);\n } else {\n // Always use the original marker for unstyled edges\n svgPath.attr(`marker-${position}`, `url(${url}#${originalMarkerId})`);\n }\n};\n", "/** Setup arrow head and define the marker. The result is appended to the svg. */\nimport { log } from '../../logger.js';\nimport * as configApi from '../../config.js';\n\n// Only add the number of markers that the diagram needs\nconst insertMarkers = (elem, markerArray, type, id) => {\n markerArray.forEach((markerName) => {\n markers[markerName](elem, type, id);\n });\n};\n\nconst extension = (elem, type, id) => {\n log.trace('Making markers for ', id);\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-extensionStart')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 18)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .attr('d', 'M 1,7 L18,13 V 1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-extensionEnd')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead\n\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-extensionStart-margin')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 18)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('viewBox', '0 0 20 14')\n .append('polygon')\n .attr('points', '10,7 18,13 18,1')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '0');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-extensionEnd-margin')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 9)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('viewBox', '0 0 20 14')\n .append('polygon')\n .attr('points', '10,1 10,13 18,7')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '0');\n};\n\nconst composition = (elem, type, id) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-compositionStart')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 18)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-compositionEnd')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-compositionStart-margin')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 15)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 0)\n .attr('viewBox', '0 0 15 15')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-compositionEnd-margin')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 3.5)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 0)\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst aggregation = (elem, type, id) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-aggregationStart')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 18)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-aggregationEnd')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-aggregationStart-margin')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 15)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 2)\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-aggregationEnd-margin')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 2)\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst dependency = (elem, type, id) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-dependencyStart')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 6)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-dependencyEnd')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 13)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-dependencyStart-margin')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 4)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 0)\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-dependencyEnd-margin')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 16)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('path')\n .style('stroke-width', 0)\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n};\nconst lollipop = (elem, type, id) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-lollipopStart')\n .attr('class', 'marker lollipop ' + type)\n .attr('refX', 13)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('circle')\n .attr('fill', 'transparent')\n .attr('cx', 7)\n .attr('cy', 7)\n .attr('r', 6);\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-lollipopEnd')\n .attr('class', 'marker lollipop ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('circle')\n .attr('fill', 'transparent')\n .attr('cx', 7)\n .attr('cy', 7)\n .attr('r', 6);\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-lollipopStart-margin')\n .attr('class', 'marker lollipop ' + type)\n .attr('refX', 13)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('circle')\n .attr('fill', 'transparent')\n .attr('cx', 7)\n .attr('cy', 7)\n .attr('r', 6)\n .attr('stroke-width', 2);\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', id + '_' + type + '-lollipopEnd-margin')\n .attr('class', 'marker lollipop ' + type)\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .attr('markerUnits', 'userSpaceOnUse')\n .append('circle')\n .attr('fill', 'transparent')\n .attr('cx', 7)\n .attr('cy', 7)\n .attr('r', 6)\n .attr('stroke-width', 2);\n};\nconst point = (elem, type, id) => {\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-pointEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 5)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 8)\n .attr('markerHeight', 8)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 0 L 10 5 L 0 10 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-pointStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 4.5)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 8)\n .attr('markerHeight', 8)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 5 L 10 10 L 10 0 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-pointEnd-margin') //arrows with gap(offset)\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 11.5 14')\n .attr('refX', 11.5) // Adjust to position the arrowhead relative to the line\n .attr('refY', 7) // Half of 14 for vertical center\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 10.5)\n .attr('markerHeight', 14)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 0 L 11.5 7 L 0 14 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 0)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-pointStart-margin')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 11.5 14')\n .attr('refX', 1)\n .attr('refY', 7)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11.5)\n .attr('markerHeight', 14)\n .attr('orient', 'auto')\n .append('polygon')\n .attr('points', '0,7 11.5,14 11.5,0')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 0)\n .style('stroke-dasharray', '1,0');\n};\nconst circle = (elem, type, id) => {\n elem\n .append('marker')\n .attr('id', id + '_' + type + '-circleEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 11)\n .attr('refY', 5)\n .attr('marker