added crossed circle

mermaid-js · Aug 7, 2024 · 04b15e7 · 04b15e7
1 parent 575c39e
commit 04b15e7
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
@@ -0,0 +1,123 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        /* font-size: 18px !important; */
+
+        /* background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
+        background-size: 20px 20px;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
+      }
+    </style>
+  </head>
+
+  <body>
+    <pre id="diagram4" class="mermaid">
+flowchart
+
+      A@{ shape: stateStart }@
+      B@{ shape: crossedCircle, label: "This is crossed circle"  }@
+      C
+      D
+      A ---> B
+      C --> B
+      B --> D
+
+
+  </pre
+    >
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
+      };
+      mermaid.initialize({
+        // theme: 'base',
+        // handdrawnSeed: 12,
+        look: 'classic',
+        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+        'elk.nodePlacement.strategy': 'SIMPLE',
+        // 'elk.nodePlacement.strategy': 'LAYERED',
+        // 'elk.mergeEdges': true,
+        // layout: 'dagre',
+        // layout: 'elk',
+        // layout: 'fixed',
+        // htmlLabels: false,
+        flowchart: { titleTopMargin: 100, padding: 50 },
+        // fontFamily: 'Caveat',
+        fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        fontSize: 12,
+        logLevel: 0,
+        securityLevel: 'loose',
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -32,6 +32,7 @@ import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
 import { slopedRect } from './shapes/slopedRect.js';
 import { bowTieRect } from './shapes/bowTieRect.js';
 import { dividedRect } from './shapes/dividedRect.js';
+import { crossedCircle } from './shapes/crossedCircle.js';
 
 const shapes = {
   state,
@@ -67,6 +68,7 @@ const shapes = {
   slopedRect,
   bowTieRect,
   dividedRect,
+  crossedCircle,
 };
 
 const nodeElems = new Map();

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts
@@ -0,0 +1,70 @@
+import { log } from '$root/logger.js';
+import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import rough from 'roughjs';
+import intersect from '../intersect/index.js';
+
+function createLine(cx: number, cy: number, r: number) {
+  const xAxis45 = Math.cos(Math.PI / 4); // cosine of 45 degrees
+  const yAxis45 = Math.sin(Math.PI / 4); // sine of 45 degrees
+  const lineLength = r * 2;
+
+  const pointQ1 = { x: cx + (lineLength / 2) * xAxis45, y: cy + (lineLength / 2) * yAxis45 }; // Quadrant I
+  const pointQ2 = { x: cx - (lineLength / 2) * xAxis45, y: cy + (lineLength / 2) * yAxis45 }; // Quadrant II
+  const pointQ3 = { x: cx - (lineLength / 2) * xAxis45, y: cy - (lineLength / 2) * yAxis45 }; // Quadrant III
+  const pointQ4 = { x: cx + (lineLength / 2) * xAxis45, y: cy - (lineLength / 2) * yAxis45 }; // Quadrant IV
+
+  return `M ${pointQ2.x},${pointQ2.y} L ${pointQ4.x},${pointQ4.y}
+                   M ${pointQ1.x},${pointQ1.y} L ${pointQ3.x},${pointQ3.y}`;
+}
+
+export const crossedCircle = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
+  const cy = 0;
+  const cx = 0;
+  const radius = Math.max(bbox.width, bbox.height) / 2 + halfPadding;
+  const { cssStyles } = node;
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handdrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+
+  const circleNode = rc.circle(cx, cy, radius * 2, options);
+  const linePath = createLine(cx, -cy, radius);
+  const lineNode = rc.path(linePath, options);
+
+  const crossedCircle = shapeSvg.insert('g', ':first-child');
+  crossedCircle.insert(() => circleNode, ':first-child');
+  crossedCircle.insert(() => lineNode);
+
+  crossedCircle.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    crossedCircle.attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    crossedCircle.attr('style', nodeStyles);
+  }
+
+  updateNodeBounds(node, crossedCircle);
+
+  node.intersect = function (point) {
+    log.info('crossedCircle intersect', node, { radius, point });
+    const pos = intersect.circle(node, radius, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};