#5237 Edge labels for ELK - mergwe

cypress/platform/knsv2.html

@@ -4,7 +4,7 @@
     <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/6.5.2/css/font-awesome.min.css"
+      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"
@@ -32,30 +32,25 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
       h1 {
         color: grey;
       }
-      .mermaid {
-        border: 1px solid #ddd;
-        margin: 10px;
-      }
       .mermaid2 {
         display: none;
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-        /* background-color: #efefef; */
-        /* background-color: #333; */
-        /* background-image: radial-gradient(#333 51%, transparent 91%), */
-          radial-gradient(#333 51%, transparent 91%);
+
+        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;
-        border: 2px solid rgb(131, 142, 205);
       }
       .malware {
         position: fixed;
@@ -166,7 +161,8 @@ flowchart
     <pre id="diagram" class="mermaid2">
 flowchart RL
     subgraph "`one`"
-    id
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
     end
     </pre>
     <pre id="diagram" class="mermaid2">

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

@@ -45,6 +45,7 @@ import {
   PARENT_ID,
   NOTE,
   PARENT,
+  CSS_EDGE_NOTE_EDGE,
 } from './stateCommon.js';
 import { node } from 'stylis';
 
@@ -704,7 +705,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
       //add parent id to groupData
       groupData.id = parentNodeId;
       //add parent id to noteData
-      noteData.parentId = parentId;
+      noteData.parentId = parentNodeId;
 
       //insert groupData
       insertOrUpdateNode(nodes, groupData);
@@ -754,6 +755,9 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
  * @param nodeData
  */
 function insertOrUpdateNode(nodes, nodeData) {
+  if (!nodeData.id || nodeData.id === '</join></fork>') {
+    return;
+  }
   const existingNodeData = nodes.find((node) => node.id === nodeData.id);
   if (existingNodeData) {
     //update the existing nodeData

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

@@ -4,6 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
 import { stateEnd } from './shapes/stateEnd.ts';
 import { forkJoin } from './shapes/forkJoin.ts';
 import { choice } from './shapes/choice.ts';
+import {note} from './shapes/note.ts';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 const formatClass = (str) => {
@@ -20,6 +21,7 @@ const shapes = {
   fork: forkJoin,
   join: forkJoin,
   choice,
+  note,
 };
 
 let nodeElems = {};

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

@@ -0,0 +1,37 @@
+import { log } from '$root/logger.js';
+import { labelHelper, updateNodeBounds } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+
+export const note = async (parent: SVGAElement, node: Node) => {
+    const useHtmlLabels = node.useHtmlLabels ;
+  if (!useHtmlLabels) {
+    node.centerLabel = true;
+  }
+  const { shapeSvg, bbox, halfPadding } = await labelHelper(
+    parent,
+    node,
+    'node ' + node.classes,
+    true
+  );
+
+  log.info('Classes = ', node.classes);
+  // add the rect
+  const rect = shapeSvg.insert('rect', ':first-child');
+
+  rect
+    .attr('rx', node.rx)
+    .attr('ry', node.ry)
+    .attr('x', -bbox.width / 2 - halfPadding)
+    .attr('y', -bbox.height / 2 - halfPadding)
+    .attr('width', bbox.width + node.padding)
+    .attr('height', bbox.height + node.padding);
+
+  updateNodeBounds(node, rect);
+
+  node.intersect = function (point) {
+    return intersect.rect(node, point);
+  };
+
+  return shapeSvg;
+};

packages/mermaid/src/rendering-util/types.d.ts

@@ -13,13 +13,15 @@ interface Node {
   label?: string;
   parentId?: string;
   position?: string;
-  styles?: string;
-  classes?: string;
+  styles?: string; // Pick one, don't need both `styles` & `style`, or have (nodeStyle + labelStyle)
+  style?: string;
+  classes?: string; // Pick one `classes` vs `class`
+  class?: string;
   // Flowchart specific properties
-  labelType?: string;
+  labelType?: string; // Always use markdown string?
   domId: string;
   // Rendering specific properties for both Flowchart and State Diagram nodes
-  dir?: string;
+  dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state.
   haveCallback?: boolean;
   labelStyle?: string;
   labelText?: string;
@@ -31,16 +33,17 @@ interface Node {
   ry?: number;
   shape?: string;
   tooltip?: string;
-  type: string;
+  type: string; // replace with isGroup: boolean, default false
   width?: number;
   height?: number;
 
   // Specific properties for State Diagram nodes TODO remove and use generic properties
   intersect?: (point: any) => any;
-  style?: string;
-  class?: string;
-  borders?: string;
+
+  borders?: string; //Maybe have it similar to nodeStyle, labelStyle, have it as borderStyle (check the usage)
   useRough?: boolean;
+  useHtmlLabels?: boolean;
+  centerLabel?: boolean;
 }
 
 // Common properties for any edge in the system