Pausing POC

cypress/platform/cyto.html

@@ -46,9 +46,15 @@
     <div id="cy"></div>
     <pre class="mermaid" style="width: 50%">
 flowchart TD
-id1 --> id2--> id3[Iam number 3]--> id4--> id5 --> id1
+id1 --> id2--> id3[I am number 3 and I<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node<br/>am a gigantic node]--> id4--> id5 --> id1
+id5 --> id4
+id5 --> id4
+    </pre>
+    <pre class="mermaid2" style="width: 50%">
+flowchart TD
+id1 --> id2--> id3
+id2 --> id1
     </pre>
-
     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

package.json

@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
+    "cytoscape": "^3.23.0",
     "d3": "^7.0.0",
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",

src/diagrams/flowchart/flowRenderer-v3.js

@@ -382,6 +382,7 @@ export const getClasses = function (text, diagObj) {
  */
 
 export const draw = function (text, id, _version, diagObj) {
+  return new Promise(function (resolve, reject) {
     const cy = cytoscape({
       // styleEnabled: false,
       // animate: false,
@@ -453,26 +454,6 @@ export const draw = function (text, id, _version, diagObj) {
         : select('body');
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
 
-  const c = cytoscape({
-    // name: 'cose',
-    name: 'cose',
-    container: null,
-    layout: {
-      boundingBox: {
-        x1: 0,
-        y1: 0,
-        w: 200,
-        h: 200,
-      },
-    },
-    headless: true,
-    styleEnabled: false,
-    animate: false,
-    ready: function () {
-      log.info('Ready', this);
-    },
-  });
-
     const svg = root.select(`[id="${id}"]`);
     const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
 
@@ -493,32 +474,38 @@ export const draw = function (text, id, _version, diagObj) {
 
     cy.layout({
       // name: 'grid',
-    name: 'circle',
-    // name: 'cose'
+      // name: 'circle',
+      name: 'cose',
+      // name: 'breadthfirst',
+      headless: true,
+      styleEnabled: false,
+      animate: false,
     }).run();
+    log.info('Positions', cy.nodes().positions());
+    window.cy = cy;
+    cy.ready((e) => {
+      log.info('Ready', e);
+      setTimeout(() => {
         cy.nodes().map((node, id) => {
           const data = node.data();
-    log.info(
-      'Position: (',
-      node.position().x,
-      ', ',
-      node.position().y,
-      ')',
-      node.layoutDimensions()
-    );
+          log.info('Position: (', node.position().x, ', ', node.position().y, ')', data);
           data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
+          // document
+          //   .querySelector(`[id="${data.domId}"]`)
+          //   .setAttribute('transform', `translate(${node.position().x}, ${node.position().y})`);
+          log.info('Id = ', data.domId, svg.select(`[id="${data.domId}"]`), data.el.node());
         });
 
         cy.edges().map((edge, id) => {
           const data = edge.data();
           if (edge[0]._private.bodyBounds) {
-      const bounds = edge[0]._private.bodyBounds;
+            const bounds = edge[0]._private.rscratch;
             log.info(
               id,
               // 'x:',
               // edge.controlPoints(),
               // 'y:',
-        edge[0]._private
+              edge[0]._private.rscratch
               // 'w:',
               // edge.boundingbox().w,
               // 'h:',
@@ -526,17 +513,31 @@ export const draw = function (text, id, _version, diagObj) {
               // edge.midPoint()
             );
             // data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
+            // edgesEl
+            //   .insert('line')
+            //   .attr('x1', bounds.startX)
+            //   .attr('y1', bounds.startY)
+            //   .attr('x2', bounds.endX)
+            //   .attr('y2', bounds.endY)
+            //   .attr('class', 'path');
             edgesEl
-        .insert('line')
-        .attr('x1', bounds.x1)
-        .attr('y1', bounds.y1)
-        .attr('x2', bounds.x2)
-        .attr('y2', bounds.y2)
-        .attr('class', 'path');
+              .insert('path')
+              // Todo use regular line function
+              .attr(
+                'd',
+                `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
+              )
+              .attr('class', 'path')
+              .attr('fill', 'none');
           }
         });
+
         log.info(cy.json());
         setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
+        resolve();
+      }, 500);
+    });
+  });
 };
 
 export default {

src/mermaidAPI.ts

@@ -118,12 +118,12 @@ export const decodeEntities = function (text: string): string {
  *   element will be removed when rendering is completed.
  * @returns {void}
  */
-const render = function (
+const render = async function (
   id: string,
   text: string,
   cb: (svgCode: string, bindFunctions?: (element: Element) => void) => void,
   container?: Element
-): void {
+): Promise<void> {
   configApi.reset();
   text = text.replace(/\r\n?/g, '\n'); // parser problems on CRLF ignore all CR and leave LF;;
   const graphInit = utils.detectInit(text);
@@ -299,7 +299,7 @@ const render = function (
   svg.insertBefore(style1, firstChild);
 
   try {
-    diag.renderer.draw(text, id, pkg.version, diag);
+    await diag.renderer.draw(text, id, pkg.version, diag);
   } catch (e) {
     errorRenderer.draw(id, pkg.version);
     throw e;

yarn.lock

@@ -4750,6 +4750,14 @@ cypress@9.7.0:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+cytoscape@^3.23.0:
+  version "3.23.0"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.23.0.tgz#054ee05a6d0aa3b4f139382bbf2f4e5226df3c6d"
+  integrity sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==
+  dependencies:
+    heap "^0.2.6"
+    lodash "^4.17.21"
+
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.1.1.tgz#7797eb53ead6b9083c75a45a681e93fc41bc468c"
@@ -6828,6 +6836,11 @@ he@^1.1.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+heap@^0.2.6:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
 highlight.js@^10.5.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"