mermaid/dist/chunks/mermaid.esm/chunk-65BZPYT2.mjs.map

Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.

{
  "version": 3,
  "sources": ["../../../src/rendering-util/rendering-elements/shapes/util.ts", "../../../src/rendering-util/rendering-elements/intersect/intersect-rect.js", "../../../src/rendering-util/rendering-elements/createLabel.js", "../../../src/rendering-util/rendering-elements/shapes/roundedRectPath.ts", "../../../src/rendering-util/rendering-elements/clusters/swimlane.js", "../../../src/rendering-util/rendering-elements/clusters.js", "../../../src/rendering-util/rendering-elements/intersect/intersect-node.js", "../../../src/rendering-util/rendering-elements/intersect/intersect-ellipse.js", "../../../src/rendering-util/rendering-elements/intersect/intersect-circle.js", "../../../src/rendering-util/rendering-elements/intersect/intersect-line.js", "../../../src/rendering-util/rendering-elements/intersect/intersect-polygon.js", "../../../src/rendering-util/rendering-elements/intersect/index.js", "../../../src/rendering-util/rendering-elements/shapes/anchor.ts", "../../../src/rendering-util/rendering-elements/shapes/bowTieRect.ts", "../../../src/rendering-util/rendering-elements/shapes/insertPolygonShape.ts", "../../../src/rendering-util/rendering-elements/shapes/card.ts", "../../../src/rendering-util/rendering-elements/shapes/choice.ts", "../../../src/rendering-util/rendering-elements/shapes/circle.ts", "../../../src/rendering-util/rendering-elements/shapes/crossedCircle.ts", "../../../src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts", "../../../src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts", "../../../src/rendering-util/rendering-elements/shapes/curlyBraces.ts", "../../../src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts", "../../../src/rendering-util/rendering-elements/shapes/cylinder.ts", "../../../src/rendering-util/rendering-elements/shapes/drawRect.ts", "../../../src/rendering-util/rendering-elements/shapes/datastore.ts", "../../../src/rendering-util/rendering-elements/shapes/dividedRect.ts", "../../../src/rendering-util/rendering-elements/shapes/doubleCircle.ts", "../../../src/rendering-util/rendering-elements/shapes/filledCircle.ts", "../../../src/rendering-util/rendering-elements/shapes/flippedTriangle.ts", "../../../src/rendering-util/rendering-elements/shapes/forkJoin.ts", "../../../src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts", "../../../src/rendering-util/rendering-elements/shapes/hexagon.ts", "../../../src/rendering-util/rendering-elements/shapes/hourglass.ts", "../../../src/rendering-util/rendering-elements/shapes/icon.ts", "../../../src/rendering-util/rendering-elements/shapes/iconCircle.ts", "../../../src/rendering-util/rendering-elements/shapes/iconRounded.ts", "../../../src/rendering-util/rendering-elements/shapes/iconSquare.ts", "../../../src/rendering-util/rendering-elements/shapes/imageSquare.ts", "../../../src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts", "../../../src/rendering-util/rendering-elements/shapes/labelRect.ts", "../../../src/rendering-util/rendering-elements/shapes/leanLeft.ts", "../../../src/rendering-util/rendering-elements/shapes/leanRight.ts", "../../../src/rendering-util/rendering-elements/shapes/lightningBolt.ts", "../../../src/rendering-util/rendering-elements/shapes/linedCylinder.ts", "../../../src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts", "../../../src/rendering-util/rendering-elements/shapes/multiRect.ts", "../../../src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts", "../../../src/rendering-util/rendering-elements/shapes/note.ts", "../../../src/rendering-util/rendering-elements/shapes/question.ts", "../../../src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts", "../../../src/rendering-util/rendering-elements/shapes/rectWithTitle.ts", "../../../src/rendering-util/rendering-elements/shapes/roundedRect.ts", "../../../src/rendering-util/rendering-elements/shapes/shadedProcess.ts", "../../../src/rendering-util/rendering-elements/shapes/slopedRect.ts", "../../../src/rendering-util/rendering-elements/shapes/squareRect.ts", "../../../src/rendering-util/rendering-elements/shapes/stadium.ts", "../../../src/rendering-util/rendering-elements/shapes/state.ts", "../../../src/rendering-util/rendering-elements/shapes/stateEnd.ts", "../../../src/rendering-util/rendering-elements/shapes/stateStart.ts", "../../../src/rendering-util/rendering-elements/shapes/subroutine.ts", "../../../src/rendering-util/rendering-elements/shapes/taggedRect.ts", "../../../src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts", "../../../src/rendering-util/rendering-elements/shapes/text.ts", "../../../src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts", "../../../src/rendering-util/rendering-elements/shapes/trapezoid.ts", "../../../src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts", "../../../src/rendering-util/rendering-elements/shapes/triangle.ts", "../../../src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts", "../../../src/rendering-util/rendering-elements/shapes/waveRectangle.ts", "../../../src/rendering-util/rendering-elements/shapes/windowPane.ts", "../../../src/rendering-util/rendering-elements/shapes/erBox.ts", "../../../src/diagrams/class/shapeUtil.ts", "../../../src/rendering-util/rendering-elements/shapes/classBox.ts", "../../../src/rendering-util/rendering-elements/shapes/requirementBox.ts", "../../../src/rendering-util/rendering-elements/shapes/kanbanItem.ts", "../../../src/rendering-util/rendering-elements/shapes/bang.ts", "../../../src/rendering-util/rendering-elements/shapes/cloud.ts", "../../../src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts", "../../../src/rendering-util/rendering-elements/shapes/mindmapCircle.ts", "../../../src/rendering-util/rendering-elements/shapes.ts", "../../../src/rendering-util/rendering-elements/nodes.ts"],
  "sourcesContent": ["import { createText } from '../../createText.js';\nimport type { Node } from '../../types.js';\nimport { getConfig } from '../../../diagram-api/diagramAPI.js';\nimport { evaluate, getEffectiveHtmlLabels } from '../../../config.js';\nimport { select } from 'd3';\nimport { sanitizeText } from '../../../diagrams/common/common.js';\nimport { decodeEntities, handleUndefinedAttr } from '../../../utils.js';\nimport type { D3Selection, Point } from '../../../types.js';\nimport { configureLabelImages } from './labelImageUtils.js';\n\nexport const labelHelper = async <T extends SVGGraphicsElement>(\n  parent: D3Selection<T>,\n  node: Node,\n  _classes?: string\n) => {\n  let cssClasses;\n  const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);\n  if (!_classes) {\n    cssClasses = 'node default';\n  } else {\n    cssClasses = _classes;\n  }\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', cssClasses)\n    .attr('id', node.domId || node.id);\n\n  // Create the label and insert it after the rect\n  const labelEl = shapeSvg\n    .insert('g')\n    .attr('class', 'label')\n    .attr('style', handleUndefinedAttr(node.labelStyle));\n\n  // Replace label with default value if undefined\n  let label;\n  if (node.label === undefined) {\n    label = '';\n  } else {\n    label = typeof node.label === 'string' ? node.label : node.label[0];\n  }\n\n  const addBackground = !!node.icon || !!node.img;\n  const isMarkdown = node.labelType === 'markdown';\n  const text = await createText(\n    labelEl,\n    sanitizeText(decodeEntities(label), getConfig()),\n    {\n      useHtmlLabels,\n      width: node.width || getConfig().flowchart?.wrappingWidth,\n      classes: isMarkdown ? 'markdown-node-label' : '',\n      style: node.labelStyle,\n      addSvgBackground: addBackground,\n      markdown: isMarkdown,\n    },\n    getConfig()\n  );\n\n  // Get the size of the label\n  let bbox = text.getBBox();\n  const halfPadding = (node?.padding ?? 0) / 2;\n\n  if (useHtmlLabels) {\n    const div = text.children[0] as HTMLDivElement;\n    const dv = select(text);\n\n    // if there are images, need to wait for them to load before getting the bounding box\n    await configureLabelImages(div, label);\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    labelEl.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n  } else {\n    labelEl.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');\n  }\n  if (node.centerLabel) {\n    labelEl.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n  }\n  labelEl.insert('rect', ':first-child');\n  return { shapeSvg, bbox, halfPadding, label: labelEl };\n};\nexport const insertLabel = async <T extends SVGGraphicsElement>(\n  parent: D3Selection<T>,\n  label: string,\n  options: {\n    labelStyle?: string | undefined;\n    icon?: boolean | undefined;\n    img?: string | undefined;\n    useHtmlLabels?: boolean | undefined;\n    padding: number;\n    width?: number | undefined;\n    centerLabel?: boolean | undefined;\n    addSvgBackground?: boolean | undefined;\n  }\n) => {\n  const useHtmlLabels = options.useHtmlLabels ?? getEffectiveHtmlLabels(getConfig());\n\n  // Create the label and insert it after the rect\n  const labelEl = parent\n    .insert('g')\n    .attr('class', 'label')\n    .attr('style', options.labelStyle || '');\n\n  const text = await createText(labelEl, sanitizeText(decodeEntities(label), getConfig()), {\n    useHtmlLabels,\n    width: options.width || getConfig()?.flowchart?.wrappingWidth,\n    style: options.labelStyle,\n    addSvgBackground: !!options.icon || !!options.img,\n  });\n  // Get the size of the label\n  let bbox = text.getBBox();\n  const halfPadding = options.padding / 2;\n\n  if (getEffectiveHtmlLabels(getConfig())) {\n    const div = text.children[0];\n    const dv = select(text);\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    labelEl.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n  } else {\n    labelEl.attr('transform', 'translate(' + 0 + ', ' + -bbox.height / 2 + ')');\n  }\n  if (options.centerLabel) {\n    labelEl.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n  }\n  labelEl.insert('rect', ':first-child');\n  return { shapeSvg: parent, bbox, halfPadding, label: labelEl };\n};\nexport const updateNodeBounds = <T extends SVGGraphicsElement>(\n  node: Node,\n  // D3Selection<SVGGElement> is for the roughjs case, D3Selection<T> is for the non-roughjs case\n  element: D3Selection<SVGGElement> | D3Selection<T>\n) => {\n  const bbox = element.node()!.getBBox();\n  node.width = bbox.width;\n  node.height = bbox.height;\n};\n\n/**\n * @param parent - Parent element to append the polygon to\n * @param w - Width of the polygon\n * @param h - Height of the polygon\n * @param points - Array of points to create the polygon\n */\nexport function insertPolygonShape(\n  parent: D3Selection<SVGGElement>,\n  w: number,\n  h: number,\n  points: Point[]\n) {\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\nexport const getNodeClasses = (node: Node, extra?: string) =>\n  (node.look === 'handDrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');\n\nexport function createPathFromPoints(points: Point[]) {\n  const pointStrings = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`);\n  pointStrings.push('Z');\n  return pointStrings.join(' ');\n}\n\nexport function generateFullSineWavePoints(\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n  amplitude: number,\n  numCycles: number\n) {\n  const points = [];\n  const steps = 50; // Number of segments to create a smooth curve\n  const deltaX = x2 - x1;\n  const deltaY = y2 - y1;\n  const cycleLength = deltaX / numCycles;\n\n  // Calculate frequency and phase shift\n  const frequency = (2 * Math.PI) / cycleLength;\n  const midY = y1 + deltaY / 2;\n\n  for (let i = 0; i <= steps; i++) {\n    const t = i / steps;\n    const x = x1 + t * deltaX;\n    const y = midY + amplitude * Math.sin(frequency * (x - x1));\n\n    points.push({ x, y });\n  }\n\n  return points;\n}\n\n/**\n * @param centerX - x-coordinate of center of circle\n * @param centerY - y-coordinate of center of circle\n * @param radius - radius of circle\n * @param numPoints - total points required\n * @param startAngle - angle where arc will start\n * @param endAngle - angle where arc will end\n */\nexport function generateCirclePoints(\n  centerX: number,\n  centerY: number,\n  radius: number,\n  numPoints: number,\n  startAngle: number,\n  endAngle: number\n) {\n  const points = [];\n\n  // Convert angles to radians\n  const startAngleRad = (startAngle * Math.PI) / 180;\n  const endAngleRad = (endAngle * Math.PI) / 180;\n\n  // Calculate the angle range in radians\n  const angleRange = endAngleRad - startAngleRad;\n\n  // Calculate the angle step\n  const angleStep = angleRange / (numPoints - 1);\n\n  for (let i = 0; i < numPoints; i++) {\n    const angle = startAngleRad + i * angleStep;\n    const x = centerX + radius * Math.cos(angle);\n    const y = centerY + radius * Math.sin(angle);\n    points.push({ x: -x, y: -y });\n  }\n\n  return points;\n}\n\nexport function mergePaths(roughElement: SVGElement) {\n  // Get all paths generated by RoughJS\n  // eslint-disable-next-line unicorn/prefer-spread\n  const paths: SVGPathElement[] = Array.from(roughElement.childNodes).filter(\n    (node): node is SVGPathElement => (node as Element).tagName === 'path'\n  );\n\n  // Create a new path element\n  const mergedPath: SVGPathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n\n  // Combine all path data\n  const combinedPathData: string = paths\n    .map((path) => path.getAttribute('d'))\n    .filter((d): d is string => d !== null)\n    .join(' ');\n\n  mergedPath.setAttribute('d', combinedPathData);\n\n  // Find the fill path (usually the second path)\n  const fillPath = paths.find((path) => path.getAttribute('fill') !== 'none');\n\n  // Find the stroke path (usually the first path)\n  const strokePath = paths.find((path) => path.getAttribute('stroke') !== 'none');\n\n  // Helper function to safely get attribute\n  const getAttr = (element: SVGPathElement | undefined, attr: string): string | undefined => {\n    return element?.getAttribute(attr) ?? undefined;\n  };\n\n  // Apply the correct styles from respective paths\n  if (fillPath) {\n    const fillAttrs = {\n      fill: getAttr(fillPath, 'fill'),\n      'fill-opacity': getAttr(fillPath, 'fill-opacity') ?? '1',\n    };\n\n    Object.entries(fillAttrs).forEach(([attr, value]) => {\n      if (value) {\n        mergedPath.setAttribute(attr, value);\n      }\n    });\n  }\n\n  if (strokePath) {\n    const strokeAttrs = {\n      stroke: getAttr(strokePath, 'stroke'),\n      'stroke-width': getAttr(strokePath, 'stroke-width') ?? '1',\n      'stroke-opacity': getAttr(strokePath, 'stroke-opacity') ?? '1',\n    };\n\n    Object.entries(strokeAttrs).forEach(([attr, value]) => {\n      if (value) {\n        mergedPath.setAttribute(attr, value);\n      }\n    });\n  }\n\n  // Create a group to hold our merged path\n  const group: SVGGElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n  group.appendChild(mergedPath);\n\n  return group;\n}\n", "const intersectRect = (node, point) => {\n  var x = node.x;\n  var y = node.y;\n\n  // Rectangle intersection algorithm from:\n  // https://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\n  var dx = point.x - x;\n  var dy = point.y - y;\n  var w = node.width / 2;\n  var h = node.height / 2;\n\n  var sx, sy;\n  if (Math.abs(dy) * w > Math.abs(dx) * h) {\n    // Intersection is top or bottom of rect.\n    if (dy < 0) {\n      h = -h;\n    }\n    sx = dy === 0 ? 0 : (h * dx) / dy;\n    sy = h;\n  } else {\n    // Intersection is left or right of rect.\n    if (dx < 0) {\n      w = -w;\n    }\n    sx = w;\n    sy = dx === 0 ? 0 : (w * dy) / dx;\n  }\n\n  return { x: x + sx, y: y + sy };\n};\n\nexport default intersectRect;\n", "import { getEffectiveHtmlLabels } from '../../config.js';\nimport { getConfig } from '../../diagram-api/diagramAPI.js';\nimport { createText } from '../createText.js';\n\n/**\n * @param {import('../../types.js').D3Selection<SVGGElement>} element - The parent element to which the label will be appended.\n * @param {string | [string] | undefined} _vertexText - The text content of the label.\n * @param {string} style\n * @param {boolean} [isTitle] - If `true`, style this as a title label, else as a normal label.\n * @param {boolean} [isNode] - If `true`, style this as a node label, else as an edge label.\n * @deprecated svg-util/createText instead\n *\n * @example\n *\n * If `getEffectiveHtmlLabels(getConfig())` is `true`, you must reset the width\n * and height of the created label after creation, like this:\n *\n * ```js\n * const labelElement = await createLabel(parent, ... );\n * let slBox = labelElement.getBBox();\n * if (useHtmlLabels) {\n *   const div = labelElement.children[0];\n *   const dv = select(labelElement);\n *   slBox = div.getBoundingClientRect();\n *   dv.attr('width', slBox.width);\n *   dv.attr('height', slBox.height);\n * }\n * parent.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n * ```\n */\nconst createLabel = async (element, _vertexText, style, isTitle = false, isNode = false) => {\n  let vertexText = _vertexText || '';\n  if (typeof vertexText === 'object') {\n    vertexText = vertexText[0];\n  }\n\n  const config = getConfig();\n  const useHtmlLabels = getEffectiveHtmlLabels(config);\n\n  return await createText(\n    element,\n    vertexText,\n    {\n      style,\n      isTitle,\n      useHtmlLabels,\n      markdown: false,\n      isNode,\n      width: Number.POSITIVE_INFINITY,\n    },\n    config\n  );\n};\n\nexport default createLabel;\n", "export const createRoundedRectPathD = (\n  x: number,\n  y: number,\n  totalWidth: number,\n  totalHeight: number,\n  radius: number\n) =>\n  [\n    'M',\n    x + radius,\n    y, // Move to the first point\n    'H',\n    x + totalWidth - radius, // Draw horizontal line to the beginning of the right corner\n    'A',\n    radius,\n    radius,\n    0,\n    0,\n    1,\n    x + totalWidth,\n    y + radius, // Draw arc to the right top corner\n    'V',\n    y + totalHeight - radius, // Draw vertical line down to the beginning of the right bottom corner\n    'A',\n    radius,\n    radius,\n    0,\n    0,\n    1,\n    x + totalWidth - radius,\n    y + totalHeight, // Draw arc to the right bottom corner\n    'H',\n    x + radius, // Draw horizontal line to the beginning of the left bottom corner\n    'A',\n    radius,\n    radius,\n    0,\n    0,\n    1,\n    x,\n    y + totalHeight - radius, // Draw arc to the left bottom corner\n    'V',\n    y + radius, // Draw vertical line up to the beginning of the left top corner\n    'A',\n    radius,\n    radius,\n    0,\n    0,\n    1,\n    x + radius,\n    y, // Draw arc to the left top corner\n    'Z', // Close the path\n  ].join(' ');\n", "import { getConfig } from '../../../diagram-api/diagramAPI.js';\nimport { evaluate } from '../../../config.js';\nimport { log } from '../../../logger.js';\nimport { select } from 'd3';\nimport rough from 'roughjs';\nimport { createText } from '../../createText.ts';\nimport intersectRect from '../intersect/intersect-rect.js';\nimport { styles2String, userNodeOverrides } from '../shapes/handDrawnShapeStyles.js';\n\n/**\n * Swimlane cluster shape (lane). Extracted from the shared clusters.js so the\n * swimlane-specific rendering lives on its own; registered in the clusters.js\n * shape dispatch table. Supports LR/TB and the handdrawn (rough) look.\n */\nexport const swimlane = async (parent, node) => {\n  const siteConfig = getConfig();\n  const { themeVariables, handDrawnSeed } = siteConfig;\n  const { clusterBkg, clusterBorder } = themeVariables;\n  const laneStroke = clusterBorder;\n\n  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', 'cluster swimlane ' + (node.cssClasses || ''))\n    .attr('id', node.id)\n    .attr('data-id', node.id)\n    .attr('data-et', 'cluster')\n    .attr('data-look', node.look);\n\n  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);\n\n  // Determine if this is a left-to-right layout (title on left, rotated)\n  const isLR = node.direction === 'LR';\n\n  // Create the label and insert it after the rects\n  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label swimlane-label');\n\n  const text = await createText(labelEl, node.label, {\n    style: node.labelStyle,\n    useHtmlLabels,\n    isNode: true,\n    width: node.width,\n  });\n\n  // Get the size of the label\n  let bbox = text.getBBox();\n\n  if (useHtmlLabels) {\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\n  const padding = node.padding ?? 0;\n  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;\n  if (node.width <= bbox.width + padding) {\n    node.diff = (width - node.width) / 2 - padding;\n  } else {\n    node.diff = -padding;\n  }\n\n  const height = node.height;\n  const laneTop = node.y - height / 2;\n  const laneBottom = node.y + height / 2;\n  const laneLeft = node.x - width / 2;\n\n  // Top of the content area across all lanes, computed in the swimlanes\n  // layout write-back. This is the Y of the highest node in the pool.\n  const contentTop =\n    node.swimlaneContentTop !== undefined ? node.swimlaneContentTop : laneTop + height / 3;\n\n  // Title band sizing - for LR, the title is on the left; for TB, on top.\n  //\n  // NOTE: For TB we intentionally use a smaller internal padding so that\n  // the visible gap between the title band and the first row of nodes is\n  // larger. In LR, the original padding works well visually and is kept.\n  const titlePaddingY = isLR ? 4 : 0;\n  const desiredTitleSize = bbox.height + 2 * titlePaddingY;\n\n  let titleRect;\n  let bodyRect;\n\n  if (isLR) {\n    // LR layout: title band is a vertical strip on the left\n    // For rotated text, title width is based on label height (rotated)\n    const titleWidth = Math.max(desiredTitleSize, bbox.height + 2 * titlePaddingY);\n    const bodyX = laneLeft + titleWidth;\n    const bodyWidth = Math.max(0, width - titleWidth);\n\n    if (node.look === 'handDrawn') {\n      // @ts-ignore TODO: Fix rough typings\n      const rc = rough.svg(shapeSvg);\n      const titleOptions = userNodeOverrides(node, {\n        roughness: 0.7,\n        fill: clusterBkg,\n        stroke: laneStroke,\n        fillWeight: 3,\n        seed: handDrawnSeed,\n      });\n      const bodyOptions = userNodeOverrides(node, {\n        roughness: 0.7,\n        fill: 'none',\n        stroke: laneStroke,\n        seed: handDrawnSeed,\n      });\n\n      const roughTitle = rc.rectangle(laneLeft, laneTop, titleWidth, height, titleOptions);\n      titleRect = shapeSvg.insert(() => roughTitle, ':first-child');\n      const roughBody = rc.rectangle(bodyX, laneTop, bodyWidth, height, bodyOptions);\n      bodyRect = shapeSvg.insert(() => roughBody, ':first-child');\n\n      titleRect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));\n      titleRect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));\n    } else {\n      titleRect = shapeSvg.insert('rect', ':first-child');\n      bodyRect = shapeSvg.insert('rect', ':first-child');\n\n      titleRect\n        .attr('class', 'swimlane-title')\n        .attr('style', nodeStyles)\n        .attr('x', laneLeft)\n        .attr('y', laneTop)\n        .attr('width', titleWidth)\n        .attr('height', height)\n        .attr('fill', clusterBkg)\n        .attr('stroke', laneStroke);\n\n      bodyRect\n        .attr('class', 'swimlane-body')\n        .attr('style', nodeStyles)\n        .attr('x', bodyX)\n        .attr('y', laneTop)\n        .attr('width', bodyWidth)\n        .attr('height', height)\n        .attr('fill', 'none')\n        .attr('stroke', laneStroke);\n    }\n\n    // Position the label: center it within the title band and rotate -90 degrees\n    // After rotation, the label reads bottom-to-top\n    const labelCenterX = laneLeft + titleWidth / 2;\n    const labelCenterY = node.y;\n    labelEl.attr(\n      'transform',\n      `translate(${labelCenterX}, ${labelCenterY}) rotate(-90) translate(${-bbox.width / 2}, ${-bbox.height / 2})`\n    );\n  } else {\n    // TB layout (default): title band is a horizontal strip on top\n    const headerMaxHeight = Math.max(0, contentTop - laneTop);\n    const titleHeight = Math.min(desiredTitleSize, headerMaxHeight);\n\n    // The lane body should visually start exactly where the title band ends\n    // so that their borders touch. The vertical gap between the title text\n    // and the first row of nodes is then controlled purely by the\n    // headerMaxHeight/titleHeight relationship (and thus by titlePaddingY).\n    const bodyY = laneTop + titleHeight;\n    const contentHeight = Math.max(0, laneBottom - bodyY);\n\n    const x = node.x - width / 2;\n\n    if (node.look === 'handDrawn') {\n      // @ts-ignore TODO: Fix rough typings\n      const rc = rough.svg(shapeSvg);\n      const titleOptions = userNodeOverrides(node, {\n        roughness: 0.7,\n        fill: clusterBkg,\n        stroke: laneStroke,\n        fillWeight: 3,\n        seed: handDrawnSeed,\n      });\n      const bodyOptions = userNodeOverrides(node, {\n        roughness: 0.7,\n        fill: 'none',\n        stroke: laneStroke,\n        seed: handDrawnSeed,\n      });\n\n      const roughTitle = rc.rectangle(x, laneTop, width, titleHeight, titleOptions);\n      titleRect = shapeSvg.insert(() => roughTitle, ':first-child');\n      const roughBody = rc.rectangle(x, bodyY, width, contentHeight, bodyOptions);\n      bodyRect = shapeSvg.insert(() => roughBody, ':first-child');\n\n      titleRect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));\n      titleRect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));\n    } else {\n      titleRect = shapeSvg.insert('rect', ':first-child');\n      bodyRect = shapeSvg.insert('rect', ':first-child');\n\n      titleRect\n        .attr('class', 'swimlane-title')\n        .attr('style', nodeStyles)\n        .attr('x', x)\n        .attr('y', laneTop)\n        .attr('width', width)\n        .attr('height', titleHeight)\n        .attr('fill', clusterBkg)\n        .attr('stroke', laneStroke);\n\n      bodyRect\n        .attr('class', 'swimlane-body')\n        .attr('style', nodeStyles)\n        .attr('x', x)\n        .attr('y', bodyY)\n        .attr('width', width)\n        .attr('height', contentHeight)\n        .attr('fill', 'none')\n        .attr('stroke', laneStroke);\n    }\n\n    // Place the label centered within the title band\n    const labelX = node.x - bbox.width / 2;\n    const labelY = laneTop + (titleHeight - bbox.height) / 2;\n    labelEl.attr('transform', `translate(${labelX}, ${labelY})`);\n  }\n\n  log.trace('Swimlane data ', node, JSON.stringify(node));\n\n  if (labelStyles) {\n    const span = labelEl.select('span');\n    if (span) {\n      span.attr('style', labelStyles);\n    }\n  }\n\n  node.offsetX = 0;\n  node.width = width;\n  node.height = height;\n  // Used by layout engine to position subgraph in parent\n  node.offsetY = bbox.height - padding / 2;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: bbox };\n};\n", "import { getConfig } from '../../diagram-api/diagramAPI.js';\nimport { getEffectiveHtmlLabels } from '../../config.js';\nimport { log } from '../../logger.js';\nimport { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';\nimport { select } from 'd3';\nimport rough from 'roughjs';\nimport { createText } from '../createText.ts';\nimport intersectRect from '../rendering-elements/intersect/intersect-rect.js';\nimport createLabel from './createLabel.js';\nimport { createRoundedRectPathD } from './shapes/roundedRectPath.ts';\nimport { styles2String, userNodeOverrides } from './shapes/handDrawnShapeStyles.js';\nimport { swimlane } from './clusters/swimlane.js';\n\nconst rect = async (parent, node) => {\n  log.info('Creating subgraph rect for ', node.id, node);\n  const siteConfig = getConfig();\n  const { themeVariables, handDrawnSeed } = siteConfig;\n  const { clusterBkg, clusterBorder } = themeVariables;\n\n  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', 'cluster ' + node.cssClasses)\n    .attr('id', node.domId)\n    .attr('data-look', node.look);\n\n  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);\n\n  // Create the label and insert it after the rect\n  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');\n\n  let text;\n  if (node.labelType === 'markdown') {\n    text = await createText(labelEl, node.label, {\n      style: node.labelStyle,\n      useHtmlLabels,\n      isNode: true,\n      width: node.width,\n    });\n  } else {\n    text = await createLabel(labelEl, node.label, node.labelStyle || '', false, true);\n  }\n\n  // Get the size of the label\n  let bbox = text.getBBox();\n\n  if (getEffectiveHtmlLabels(siteConfig)) {\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\n  const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;\n  if (node.width <= bbox.width + node.padding) {\n    node.diff = (width - node.width) / 2 - node.padding;\n  } else {\n    node.diff = -node.padding;\n  }\n\n  const height = node.height;\n  const x = node.x - width / 2;\n  const y = node.y - height / 2;\n\n  log.trace('Data ', node, JSON.stringify(node));\n  let rect;\n  if (node.look === 'handDrawn') {\n    // @ts-ignore TODO: Fix rough typings\n    const rc = rough.svg(shapeSvg);\n    const options = userNodeOverrides(node, {\n      roughness: 0.7,\n      fill: clusterBkg,\n      // fill: 'red',\n      stroke: clusterBorder,\n      fillWeight: 3,\n      seed: handDrawnSeed,\n    });\n    const roughNode = rc.path(createRoundedRectPathD(x, y, width, height, 0), options);\n    rect = shapeSvg.insert(() => {\n      log.debug('Rough node insert CXC', roughNode);\n      return roughNode;\n    }, ':first-child');\n    // Should we affect the options instead of doing this?\n    rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));\n    rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));\n  } else {\n    // add the rect\n    rect = shapeSvg.insert('rect', ':first-child');\n    // center the rect around its coordinate\n    rect\n      .attr('style', nodeStyles)\n      .attr('rx', node.rx)\n      .attr('ry', node.ry)\n      .attr('x', x)\n      .attr('y', y)\n      .attr('width', width)\n      .attr('height', height);\n  }\n  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);\n  labelEl.attr(\n    'transform',\n    // This puts the label on top of the box instead of inside it\n    `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`\n  );\n\n  if (labelStyles) {\n    const span = labelEl.select('span');\n    if (span) {\n      span.attr('style', labelStyles);\n    }\n  }\n  // Center the label\n\n  const rectBox = rect.node().getBBox();\n  node.offsetX = 0;\n  node.width = rectBox.width;\n  node.height = rectBox.height;\n  // Used by layout engine to position subgraph in parent\n  node.offsetY = bbox.height - node.padding / 2;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: bbox };\n};\n\n/**\n * Non visible cluster where the note is group with its\n *\n * @param {any} parent\n * @param {any} node\n * @returns {any} ShapeSvg\n */\nconst noteGroup = (parent, node) => {\n  // Add outer g element\n  const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.domId);\n\n  // add the rect\n  const rect = shapeSvg.insert('rect', ':first-child');\n\n  const padding = 0 * node.padding;\n  const halfPadding = padding / 2;\n\n  // center the rect around its coordinate\n  rect\n    .attr('rx', node.rx)\n    .attr('ry', node.ry)\n    .attr('x', node.x - node.width / 2 - halfPadding)\n    .attr('y', node.y - node.height / 2 - halfPadding)\n    .attr('width', node.width + padding)\n    .attr('height', node.height + padding)\n    .attr('fill', 'none');\n\n  const rectBox = rect.node().getBBox();\n  node.width = rectBox.width;\n  node.height = rectBox.height;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };\n};\n\nconst roundedWithTitle = async (parent, node) => {\n  const siteConfig = getConfig();\n\n  const { themeVariables, handDrawnSeed } = siteConfig;\n  const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =\n    themeVariables;\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', node.cssClasses)\n    .attr('id', node.domId)\n    .attr('data-id', node.id)\n    .attr('data-look', node.look);\n\n  // add the rect\n  const outerRectG = shapeSvg.insert('g', ':first-child');\n\n  // Create the label and insert it after the rect\n  const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n  let innerRect = shapeSvg.append('rect');\n\n  const text = await createLabel(label, node.label, node.labelStyle, undefined, true);\n\n  // Get the size of the label\n  let bbox = text.getBBox();\n\n  if (getEffectiveHtmlLabels(siteConfig)) {\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\n  // Rounded With Title\n  const padding = 0 * node.padding;\n  const halfPadding = padding / 2;\n\n  const width =\n    (node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width) + padding;\n  if (node.width <= bbox.width + node.padding) {\n    node.diff = (width - node.width) / 2 - node.padding;\n  } else {\n    node.diff = -node.padding;\n  }\n\n  const height = node.height + padding;\n  // const height = node.height + padding;\n  const innerHeight = node.height + padding - bbox.height - 6;\n  const x = node.x - width / 2;\n  const y = node.y - height / 2;\n  node.width = width;\n  const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;\n\n  // add the rect\n  let rect;\n  if (node.look === 'handDrawn') {\n    const isAlt = node.cssClasses.includes('statediagram-cluster-alt');\n    const rc = rough.svg(shapeSvg);\n    const roughOuterNode =\n      node.rx || node.ry\n        ? rc.path(createRoundedRectPathD(x, y, width, height, 10), {\n            roughness: 0.7,\n            fill: compositeTitleBackground,\n            fillStyle: 'solid',\n            stroke: nodeBorder,\n            seed: handDrawnSeed,\n          })\n        : rc.rectangle(x, y, width, height, { seed: handDrawnSeed });\n\n    rect = shapeSvg.insert(() => roughOuterNode, ':first-child');\n    const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {\n      fill: isAlt ? altBackground : compositeBackground,\n      fillStyle: isAlt ? 'hachure' : 'solid',\n      stroke: nodeBorder,\n      seed: handDrawnSeed,\n    });\n\n    rect = shapeSvg.insert(() => roughOuterNode, ':first-child');\n    innerRect = shapeSvg.insert(() => roughInnerNode);\n  } else {\n    rect = outerRectG.insert('rect', ':first-child');\n    const outerRectClass = 'outer';\n\n    // center the rect around its coordinate\n    rect\n      .attr('class', outerRectClass)\n      .attr('x', x)\n      .attr('y', y)\n      .attr('width', width)\n      .attr('height', height)\n      .attr('data-look', node.look);\n    innerRect\n      .attr('class', 'inner')\n      .attr('x', x)\n      .attr('y', innerY)\n      .attr('width', width)\n      .attr('height', innerHeight);\n  }\n\n  label.attr(\n    'transform',\n    `translate(${node.x - bbox.width / 2}, ${y + 1 - (getEffectiveHtmlLabels(siteConfig) ? 0 : 3)})`\n  );\n\n  const rectBox = rect.node().getBBox();\n  node.height = rectBox.height;\n  node.offsetX = 0;\n  // Used by layout engine to position subgraph in parent\n  node.offsetY = bbox.height - node.padding / 2;\n  node.labelBBox = bbox;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: bbox };\n};\nconst kanbanSection = async (parent, node) => {\n  log.info('Creating subgraph rect for ', node.id, node);\n  const siteConfig = getConfig();\n  const { themeVariables, handDrawnSeed } = siteConfig;\n  const { clusterBkg, clusterBorder } = themeVariables;\n\n  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', 'cluster ' + node.cssClasses)\n    .attr('id', node.domId)\n    .attr('data-look', node.look);\n\n  const useHtmlLabels = getEffectiveHtmlLabels(siteConfig);\n\n  // Create the label and insert it after the rect\n  const labelEl = shapeSvg.insert('g').attr('class', 'cluster-label ');\n\n  const text = await createText(labelEl, node.label, {\n    style: node.labelStyle,\n    useHtmlLabels,\n    isNode: true,\n    width: node.width,\n  });\n\n  // Get the size of the label\n  let bbox = text.getBBox();\n\n  if (getEffectiveHtmlLabels(siteConfig)) {\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\n  const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;\n  if (node.width <= bbox.width + node.padding) {\n    node.diff = (width - node.width) / 2 - node.padding;\n  } else {\n    node.diff = -node.padding;\n  }\n\n  const height = node.height;\n  const x = node.x - width / 2;\n  const y = node.y - height / 2;\n\n  log.trace('Data ', node, JSON.stringify(node));\n  let rect;\n  if (node.look === 'handDrawn') {\n    // @ts-ignore TODO: Fix rough typings\n    const rc = rough.svg(shapeSvg);\n    const options = userNodeOverrides(node, {\n      roughness: 0.7,\n      fill: clusterBkg,\n      // fill: 'red',\n      stroke: clusterBorder,\n      fillWeight: 4,\n      seed: handDrawnSeed,\n    });\n    const roughNode = rc.path(createRoundedRectPathD(x, y, width, height, node.rx), options);\n    rect = shapeSvg.insert(() => {\n      log.debug('Rough node insert CXC', roughNode);\n      return roughNode;\n    }, ':first-child');\n    // Should we affect the options instead of doing this?\n    rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));\n    rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));\n  } else {\n    // add the rect\n    rect = shapeSvg.insert('rect', ':first-child');\n    // center the rect around its coordinate\n    rect\n      .attr('style', nodeStyles)\n      .attr('rx', node.rx)\n      .attr('ry', node.ry)\n      .attr('x', x)\n      .attr('y', y)\n      .attr('width', width)\n      .attr('height', height);\n  }\n  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);\n  labelEl.attr(\n    'transform',\n    // This puts the label on top of the box instead of inside it\n    `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`\n  );\n\n  if (labelStyles) {\n    const span = labelEl.select('span');\n    if (span) {\n      span.attr('style', labelStyles);\n    }\n  }\n  // Center the label\n\n  const rectBox = rect.node().getBBox();\n  node.offsetX = 0;\n  node.width = rectBox.width;\n  node.height = rectBox.height;\n  // Used by layout engine to position subgraph in parent\n  node.offsetY = bbox.height - node.padding / 2;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: bbox };\n};\nconst divider = (parent, node) => {\n  const siteConfig = getConfig();\n\n  const { themeVariables, handDrawnSeed } = siteConfig;\n  const { nodeBorder } = themeVariables;\n\n  // Add outer g element\n  const shapeSvg = parent\n    .insert('g')\n    .attr('class', node.cssClasses)\n    .attr('id', node.domId)\n    .attr('data-look', node.look);\n\n  // add the rect\n  const outerRectG = shapeSvg.insert('g', ':first-child');\n\n  const padding = 0 * node.padding;\n\n  const width = node.width + padding;\n\n  node.diff = -node.padding;\n\n  const height = node.height + padding;\n  // const height = node.height + padding;\n  const x = node.x - width / 2;\n  const y = node.y - height / 2;\n  node.width = width;\n\n  // add the rect\n  let rect;\n  if (node.look === 'handDrawn') {\n    const rc = rough.svg(shapeSvg);\n    const roughOuterNode = rc.rectangle(x, y, width, height, {\n      fill: 'lightgrey',\n      roughness: 0.5,\n      strokeLineDash: [5],\n      stroke: nodeBorder,\n      seed: handDrawnSeed,\n    });\n\n    rect = shapeSvg.insert(() => roughOuterNode, ':first-child');\n  } else {\n    rect = outerRectG.insert('rect', ':first-child');\n    let outerRectClass = 'outer';\n    if (node.look === 'neo') {\n      outerRectClass = 'divider';\n    } else {\n      outerRectClass = 'divider';\n    }\n\n    // center the rect around its coordinate\n    rect\n      .attr('class', outerRectClass)\n      .attr('x', x)\n      .attr('y', y)\n      .attr('width', width)\n      .attr('height', height)\n      .attr('data-look', node.look);\n  }\n\n  const rectBox = rect.node().getBBox();\n  node.height = rectBox.height;\n  node.offsetX = 0;\n  // Used by layout engine to position subgraph in parent\n  node.offsetY = 0;\n\n  node.intersect = function (point) {\n    return intersectRect(node, point);\n  };\n\n  return { cluster: shapeSvg, labelBBox: {} };\n};\n\nconst squareRect = rect;\nconst shapes = {\n  rect,\n  squareRect,\n  roundedWithTitle,\n  noteGroup,\n  divider,\n  kanbanSection,\n  swimlane,\n};\n\nlet clusterElems = new Map();\n\n/**\n * @typedef {keyof typeof shapes} ClusterShapeID\n */\n\n/**\n * @param {import('../types.js').ClusterNode} node - Shape defaults to 'rect'\n */\nexport const insertCluster = async (elem, node) => {\n  const shape = node.shape || 'rect';\n  const cluster = await shapes[shape](elem, node);\n  clusterElems.set(node.id, cluster);\n  return cluster;\n};\n\nexport const getClusterTitleWidth = (elem, node) => {\n  // TODO: Doesn't this need an `await`?\n  const label = createLabel(elem, node.label, node.labelStyle, undefined, true);\n  const width = label.getBBox().width;\n  elem.node().removeChild(label);\n  return width;\n};\n\nexport const clear = () => {\n  clusterElems = new Map();\n};\n\nexport const positionCluster = (node) => {\n  log.info(\n    'Position cluster (' +\n      node.id +\n      ', ' +\n      node.x +\n      ', ' +\n      node.y +\n      ') (' +\n      node?.width +\n      ', ' +\n      node?.height +\n      ')',\n    clusterElems.get(node.id)\n  );\n  const el = clusterElems.get(node.id);\n  el.cluster.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n};\n", "function intersectNode(node, point) {\n  return node.intersect(point);\n}\n\nexport default intersectNode;\n", "function 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\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 */\nfunction intersectLine(p1, p2, q1, q2) {\n  {\n    // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n    // p7 and p473.\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    const a1 = p2.y - p1.y;\n    const b1 = p1.x - p2.x;\n    const c1 = p2.x * p1.y - p1.x * p2.y;\n\n    // Compute r3 and r4.\n    const r3 = a1 * q1.x + b1 * q1.y + c1;\n    const r4 = a1 * q2.x + b1 * q2.y + c1;\n\n    const epsilon = 1e-6;\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    const a2 = q2.y - q1.y;\n    const b2 = q1.x - q2.x;\n    const c2 = q2.x * q1.y - q1.x * q2.y;\n\n    // Compute r1 and r2\n    const r1 = a2 * p1.x + b2 * p1.y + c2;\n    const 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 (Math.abs(r1) < epsilon && Math.abs(r2) < epsilon && sameSign(r1, r2)) {\n      return /*DON'T_INTERSECT*/;\n    }\n\n    // Line segments intersect: compute intersection point.\n    const denom = a1 * b2 - a2 * b1;\n    if (denom === 0) {\n      return /*COLLINEAR*/;\n    }\n\n    const offset = Math.abs(denom / 2);\n\n    // The denom/2 is to get rounding instead of truncating. It\n    // is added or subtracted to the numerator, depending upon the\n    // sign of the numerator.\n    let num = b1 * c2 - b2 * c1;\n    const x = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n    num = a2 * c1 - a1 * c2;\n    const y = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n    return { x: x, y: y };\n  }\n}\n\nfunction sameSign(r1, r2) {\n  return r1 * r2 > 0;\n}\n\nexport default intersectLine;\n", "import intersectLine from './intersect-line.js';\n\n/**\n * Returns the point ({x, y}) at which the point argument intersects with the node argument assuming\n * that it has the shape specified by polygon.\n */\nfunction intersectPolygon(node, polyPoints, point) {\n  let x1 = node.x;\n  let y1 = node.y;\n\n  let intersections = [];\n\n  let minX = Number.POSITIVE_INFINITY;\n  let minY = Number.POSITIVE_INFINITY;\n  if (typeof polyPoints.forEach === 'function') {\n    polyPoints.forEach(function (entry) {\n      minX = Math.min(minX, entry.x);\n      minY = Math.min(minY, entry.y);\n    });\n  } else {\n    minX = Math.min(minX, polyPoints.x);\n    minY = Math.min(minY, polyPoints.y);\n  }\n\n  let left = x1 - node.width / 2 - minX;\n  let top = y1 - node.height / 2 - minY;\n\n  for (let i = 0; i < polyPoints.length; i++) {\n    let p1 = polyPoints[i];\n    let p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];\n    let intersect = intersectLine(\n      node,\n      point,\n      { x: left + p1.x, y: top + p1.y },\n      { x: left + p2.x, y: top + p2.y }\n    );\n    if (intersect) {\n      intersections.push(intersect);\n    }\n  }\n\n  if (!intersections.length) {\n    return node;\n  }\n\n  if (intersections.length > 1) {\n    // More intersections, find the one nearest to edge end point\n    intersections.sort(function (p, q) {\n      let pdx = p.x - point.x;\n      let pdy = p.y - point.y;\n      let distp = Math.sqrt(pdx * pdx + pdy * pdy);\n\n      let qdx = q.x - point.x;\n      let qdy = q.y - point.y;\n      let distq = Math.sqrt(qdx * qdx + qdy * qdy);\n\n      return distp < distq ? -1 : distp === distq ? 0 : 1;\n    });\n  }\n  return intersections[0];\n}\n\nexport default intersectPolygon;\n", "/*\n * Borrowed with love from dagre-d3. Many thanks to cpettitt!\n */\n\nimport node from './intersect-node.js';\nimport circle from './intersect-circle.js';\nimport ellipse from './intersect-ellipse.js';\nimport polygon from './intersect-polygon.js';\nimport rect from './intersect-rect.js';\n\nexport default {\n  node,\n  circle,\n  ellipse,\n  polygon,\n  rect,\n};\n", "import { log } from '../../../logger.js';\nimport { updateNodeBounds, getNodeClasses } from './util.js';\nimport intersect from '../intersect/index.js';\nimport type { Node } from '../../types.js';\nimport { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';\nimport rough from 'roughjs';\nimport { handleUndefinedAttr } from '../../../utils.js';\nimport type { D3Selection } from '../../../types.js';\n\nexport function anchor<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {\n  const { labelStyles } =