run prettier

.esbuild/server.ts

@@ -36,7 +36,9 @@ const rebuildAll = async () => {
   console.time(timeLabel);
   await Promise.all(
     contexts.map(async ({ config, context }) => {
-      const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
+      const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${
+        config.format
+      })`;
       console.time(buildVariant);
       await context.rebuild();
       console.timeEnd(buildVariant);

cypress/integration/rendering/iconShape.spec.ts

@@ -14,7 +14,11 @@ looks.forEach((look) => {
   directions.forEach((direction) => {
     forms.forEach((form) => {
       labelPos.forEach((pos) => {
-        describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
+        describe(`Test iconShape in ${
+          form ? `${form} form,` : ''
+        } ${look} look and dir ${direction} with label position ${
+          pos ? pos : 'not defined'
+        }`, () => {
           it(`without label`, () => {
             let flowchartCode = `flowchart ${direction}\n`;
             flowchartCode += `  nA --> nAA@{ icon: 'fa:bell'`;

cypress/integration/rendering/imageShape.spec.ts

@@ -12,7 +12,9 @@ const labelPos = [undefined, 't', 'b'] as const;
 looks.forEach((look) => {
   directions.forEach((direction) => {
     labelPos.forEach((pos) => {
-      describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
+      describe(`Test imageShape in ${look} look and dir ${direction} with label position ${
+        pos ? pos : 'not defined'
+      }`, () => {
         it(`without label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;

packages/mermaid/src/diagrams/architecture/svgDraw.ts

@@ -212,7 +212,11 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor
         if (data.icon) {
           const bkgElem = groupLabelContainer.append('g');
           bkgElem.html(
-            `<g>${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+            `<g>${await getIconSVG(data.icon, {
+              height: groupIconSize,
+              width: groupIconSize,
+              fallbackPrefix: architectureIcons.prefix,
+            })}</g>`
           );
           bkgElem.attr(
             'transform',
@@ -297,11 +301,19 @@ export const drawServices = async function (
       //   throw new Error(`Invalid SVG Icon name: "${service.icon}"`);
       // }
       bkgElem.html(
-        `<g>${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+        `<g>${await getIconSVG(service.icon, {
+          height: iconSize,
+          width: iconSize,
+          fallbackPrefix: architectureIcons.prefix,
+        })}</g>`
       );
     } else if (service.iconText) {
       bkgElem.html(
-        `<g>${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}</g>`
+        `<g>${await getIconSVG('blank', {
+          height: iconSize,
+          width: iconSize,
+          fallbackPrefix: architectureIcons.prefix,
+        })}</g>`
       );
       const textElemContainer = bkgElem.append('g');
       const fo = textElemContainer

packages/mermaid/src/diagrams/block/layout.ts

@@ -105,7 +105,9 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
     for (const child of block.children) {
       if (child.size) {
         log.debug(
-          `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}`
+          `abc95 Setting size of children of ${block.id} id=${
+            child.id
+          } ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}`
         );
         child.size.width =
           maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1);

packages/mermaid/src/diagrams/git/gitGraphRenderer.ts

@@ -276,7 +276,11 @@ const drawCommitBullet = (
       cross
         .attr(
           'd',
-          `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${commitPosition.y + 5}M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${commitPosition.y - 5}`
+          `M ${commitPosition.x - 5},${commitPosition.y - 5}L${commitPosition.x + 5},${
+            commitPosition.y + 5
+          }M${commitPosition.x - 5},${commitPosition.y + 5}L${commitPosition.x + 5},${
+            commitPosition.y - 5
+          }`
         )
         .attr('class', `commit ${typeClass} ${commit.id} commit${branchIndex % THEME_COLOR_LIMIT}`);
     }
@@ -652,21 +656,27 @@ const drawArrow = (
 
         colorClassNum = branchPos.get(commitA.branch)?.index;
 
-        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${p1.y + offset} L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc} ${lineX} ${
+          p1.y + offset
+        } L ${lineX} ${p2.y - radius} ${arc2} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
     } else if (dir === 'BT') {
       if (p1.x < p2.x) {
         // Source commit is on branch position left of destination commit
         // so render arrow rightward with colour of destination branch
 
-        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc} ${lineX} ${
+          p1.y - offset
+        } L ${lineX} ${p2.y + radius} ${arc2} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
       } else {
         // Source commit is on branch position right of destination commit
         // so render arrow leftward with colour of source branch
 
         colorClassNum = branchPos.get(commitA.branch)?.index;
 
-        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${p1.y - offset} L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
+        lineDef = `M ${p1.x} ${p1.y} L ${lineX + radius} ${p1.y} ${arc2} ${lineX} ${
+          p1.y - offset
+        } L ${lineX} ${p2.y + radius} ${arc} ${lineX - offset} ${p2.y} L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {

packages/mermaid/src/diagrams/state/dataFetcher.js

@@ -258,7 +258,9 @@ export const dataFetcher = (
       newNode.isGroup = true;
       newNode.dir = getDir(parsedItem);
       newNode.shape = parsedItem.type === DIVIDER_TYPE ? SHAPE_DIVIDER : SHAPE_GROUP;
-      newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''}`;
+      newNode.cssClasses = `${newNode.cssClasses} ${CSS_DIAGRAM_CLUSTER} ${
+        altFlag ? CSS_DIAGRAM_CLUSTER_ALT : ''
+      }`;
     }
 
     // This is what will be added to the graph

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -264,7 +264,9 @@ const roundedWithTitle = async (parent, node) => {
 
   label.attr(
     'transform',
-    `translate(${node.x - bbox.width / 2}, ${y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)})`
+    `translate(${node.x - bbox.width / 2}, ${
+      y + 1 - (evaluate(siteConfig.flowchart.htmlLabels) ? 0 : 3)
+    })`
   );
 
   const rectBox = rect.node().getBBox();

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts

@@ -95,7 +95,9 @@ export const curlyBraceLeft = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, curlyBraceLeftShape);

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts

@@ -95,7 +95,9 @@ export const curlyBraceRight = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, curlyBraceRightShape);

packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts

@@ -114,7 +114,9 @@ export const curlyBraces = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, curlyBracesShape);

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -90,7 +90,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts

@@ -52,7 +52,9 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${x + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))}, ${
+      y + rectOffset + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, polygon);

packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts

@@ -51,7 +51,9 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${
+      -h / 2 + (node.padding ?? 0) / 2 + (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts

@@ -29,7 +29,9 @@ export const labelRect = async (parent: SVGElement, node: Node) => {
   shapeSvg.attr('class', 'label edgeLabel');
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   // if (node.props) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts

@@ -101,7 +101,9 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) + ry - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts

@@ -65,7 +65,9 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
   waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${
+      -w / 2 + (node.padding ?? 0) + ((w / 2) * 0.1) / 2 - (bbox.x - (bbox.left ?? 0))
+    },${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
   );
 
   updateNodeBounds(node, waveEdgeRect);

packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts

@@ -67,7 +67,9 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) + rectOffset - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, multiRect);

packages/mermaid/src/rendering-util/rendering-elements/shapes/multiWaveEdgedRectangle.ts

@@ -89,7 +89,9 @@ export const multiWaveEdgedRectangle = async (parent: SVGAElement, node: Node) =
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - rectOffset - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) + rectOffset - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, shape);

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts

@@ -54,7 +54,9 @@ export const rect_left_inv_arrow = async (
 
   label.attr(
     'transform',
-    `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))
+    })`
   );
   updateNodeBounds(node, polygon);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts

@@ -52,7 +52,9 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + 4 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, rect);

packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts

@@ -47,7 +47,9 @@ export const slopedRect = async (parent: SVGAElement, node: Node) => {
   polygon.attr('transform', `translate(0, ${h / 4})`);
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${
+      -h / 4 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, polygon);

packages/mermaid/src/rendering-util/rendering-elements/shapes/taggedWaveEdgedRectangle.ts

@@ -87,7 +87,9 @@ export const taggedWaveEdgedRectangle = async (parent: SVGAElement, node: Node)
   waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) - waveAmplitude / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, waveEdgeRect);

packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts

@@ -102,7 +102,9 @@ export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - rx - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, cylinder);

packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts

@@ -54,7 +54,10 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - (bbox.height + (node.padding ?? 0) / (useHtmlLabels ? 2 : 1) - (bbox.y - (bbox.top ?? 0)))})`
+    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${
+      h / 2 -
+      (bbox.height + (node.padding ?? 0) / (useHtmlLabels ? 2 : 1) - (bbox.y - (bbox.top ?? 0)))
+    })`
   );
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts

@@ -65,7 +65,9 @@ export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
   waveEdgeRect.attr('transform', `translate(0,${-waveAmplitude / 2})`);
   label.attr(
     'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))},${
+      -h / 2 + (node.padding ?? 0) - waveAmplitude - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, waveEdgeRect);

packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts

@@ -25,7 +25,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
     { x: x + w, y: y - rectOffset },
   ];
 
-  const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset}
+  const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${
+    y + h
+  } L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset}
                 M${x - rectOffset},${y} L${x + w},${y}
                 M${x},${y - rectOffset} L${x},${y + h}`;
 
@@ -51,7 +53,9 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) + rectOffset / 2 - (bbox.x - (bbox.left ?? 0))}, ${
+      -(bbox.height / 2) + rectOffset / 2 - (bbox.y - (bbox.top ?? 0))
+    })`
   );
 
   updateNodeBounds(node, windowPane);