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,161 +382,162 @@ export const getClasses = function (text, diagObj) {
  */
 
 export const draw = function (text, id, _version, diagObj) {
-  const cy = cytoscape({
+  return new Promise(function (resolve, reject) {
-    // styleEnabled: false,
+    const cy = cytoscape({
-    // animate: false,
+      // styleEnabled: false,
-    // ready: function () {
+      // animate: false,
-    //   log.info('Ready', this);
+      // ready: function () {
-    // },
+      //   log.info('Ready', this);
-    container: document.getElementById('cy'), // container to render in
-
-    elements: [
-      // list of graph elements to start with
-      // { // node a
-      //   data: { id: 'a' }
       // },
-      // { // node b
+      container: document.getElementById('cy'), // container to render in
-      //   data: { id: 'b' }
-      // },
-      // { // edge ab
-      //   data: { id: 'ab', source: 'a', target: 'b' }
-      // }
-    ],
 
-    style: [
+      elements: [
-      // the stylesheet for the graph
+        // list of graph elements to start with
-      {
+        // { // node a
-        selector: 'node',
+        //   data: { id: 'a' }
-        style: {
+        // },
-          'background-color': '#666',
+        // { // node b
-          label: 'data(labelText)',
+        //   data: { id: 'b' }
+        // },
+        // { // edge ab
+        //   data: { id: 'ab', source: 'a', target: 'b' }
+        // }
+      ],
+
+      style: [
+        // the stylesheet for the graph
+        {
+          selector: 'node',
+          style: {
+            'background-color': '#666',
+            label: 'data(labelText)',
+          },
         },
-      },
 
-      {
+        {
-        selector: 'edge',
+          selector: 'edge',
-        style: {
+          style: {
-          width: 3,
+            width: 3,
-          'line-color': '#ccc',
+            'line-color': '#ccc',
-          'target-arrow-color': '#ccc',
+            'target-arrow-color': '#ccc',
-          'target-arrow-shape': 'triangle',
+            'target-arrow-shape': 'triangle',
-          'curve-style': 'bezier',
+            'curve-style': 'bezier',
-          label: 'data(id)',
+            label: 'data(id)',
+          },
         },
+      ],
+
+      layout: {
+        name: 'breadthfirst',
+        rows: 1,
       },
-    ],
+    });
-
+    log.info('Drawing flowchart using v3 renderer');
-    layout: {
+    // Fetch the default direction, use TD if none was found
-      name: 'breadthfirst',
+    let dir = diagObj.db.getDirection();
-      rows: 1,
+    if (typeof dir === 'undefined') {
-    },
+      dir = 'TD';
-  });
-  log.info('Drawing flowchart using v3 renderer');
-  // Fetch the default direction, use TD if none was found
-  let dir = diagObj.db.getDirection();
-  if (typeof dir === 'undefined') {
-    dir = 'TD';
-  }
-
-  const { securityLevel, flowchart: conf } = getConfig();
-  // const nodeSpacing = conf.nodeSpacing || 50;
-  // const rankSpacing = conf.rankSpacing || 50;
-
-  // Handle root and document for when rendering in sandbox mode
-  let sandboxElement;
-  if (securityLevel === 'sandbox') {
-    sandboxElement = select('#i' + id);
-  }
-  const root =
-    securityLevel === 'sandbox'
-      ? select(sandboxElement.nodes()[0].contentDocument.body)
-      : 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');
-
-  // Fetch the vertices/nodes and edges/links from the parsed graph definition
-  const vert = diagObj.db.getVertices();
-  addVertices(vert, cy, id, root, doc, diagObj);
-  // c.style();
-  // Make cytoscape care about the dimensisions of the nodes
-  cy.nodes().forEach(function (n) {
-    n.layoutDimensions = () => {
-      const boundingBox = n.data().boundingBox;
-      return { w: boundingBox.width, h: boundingBox.height };
-    };
-  });
-
-  const edges = diagObj.db.getEdges();
-  addEdges(edges, cy, diagObj);
-
-  cy.layout({
-    // name: 'grid',
-    name: 'circle',
-    // name: 'cose'
-  }).run();
-  cy.nodes().map((node, id) => {
-    const data = node.data();
-    log.info(
-      'Position: (',
-      node.position().x,
-      ', ',
-      node.position().y,
-      ')',
-      node.layoutDimensions()
-    );
-    data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
-  });
-
-  cy.edges().map((edge, id) => {
-    const data = edge.data();
-    if (edge[0]._private.bodyBounds) {
-      const bounds = edge[0]._private.bodyBounds;
-      log.info(
-        id,
-        // 'x:',
-        // edge.controlPoints(),
-        // 'y:',
-        edge[0]._private
-        // 'w:',
-        // edge.boundingbox().w,
-        // 'h:',
-        // edge.boundingbox().h,
-        // edge.midPoint()
-      );
-      // data.el.attr('transform', `translate(${node.position().x}, ${node.position().y})`);
-      edgesEl
-        .insert('line')
-        .attr('x1', bounds.x1)
-        .attr('y1', bounds.y1)
-        .attr('x2', bounds.x2)
-        .attr('y2', bounds.y2)
-        .attr('class', 'path');
     }
+
+    const { securityLevel, flowchart: conf } = getConfig();
+    // const nodeSpacing = conf.nodeSpacing || 50;
+    // const rankSpacing = conf.rankSpacing || 50;
+
+    // Handle root and document for when rendering in sandbox mode
+    let sandboxElement;
+    if (securityLevel === 'sandbox') {
+      sandboxElement = select('#i' + id);
+    }
+    const root =
+      securityLevel === 'sandbox'
+        ? select(sandboxElement.nodes()[0].contentDocument.body)
+        : select('body');
+    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+
+    const svg = root.select(`[id="${id}"]`);
+    const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
+
+    // Fetch the vertices/nodes and edges/links from the parsed graph definition
+    const vert = diagObj.db.getVertices();
+    addVertices(vert, cy, id, root, doc, diagObj);
+    // c.style();
+    // Make cytoscape care about the dimensisions of the nodes
+    cy.nodes().forEach(function (n) {
+      n.layoutDimensions = () => {
+        const boundingBox = n.data().boundingBox;
+        return { w: boundingBox.width, h: boundingBox.height };
+      };
+    });
+
+    const edges = diagObj.db.getEdges();
+    addEdges(edges, cy, diagObj);
+
+    cy.layout({
+      // name: 'grid',
+      // 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, ')', 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.rscratch;
+            log.info(
+              id,
+              // 'x:',
+              // edge.controlPoints(),
+              // 'y:',
+              edge[0]._private.rscratch
+              // 'w:',
+              // edge.boundingbox().w,
+              // 'h:',
+              // edge.boundingbox().h,
+              // 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('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);
+    });
   });
-  log.info(cy.json());
-  setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
 };
 
 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"