Change aux graph nodes size (updates #9)

1. Dagre resizes nodes with embeds and fitEmbeds, that follows the layout, makes nodes overlap.
2. Layout algorithm does not take into account port captions. Thus, thay may overlap after sorting too.
Therefore, we assign the bbox size to our aux graph nodes. These changes required additional constants
tweaks.

src/visual/VisualStep.js

@@ -3,7 +3,8 @@ import joint from 'jointjs';
 
 const cDefaultWidth = 100;
 const cMinHeight = 100;
-const cPixelPerSymbol = 15;
+const cPixelPerSymbol = 10;
+const cLabelMargin = 20;
 const cHeightPerPort = 50;
 
 function findMaxLen(strList) {
@@ -50,7 +51,7 @@ export default class VisualStep extends joint.shapes.devs.Model {
     const outNames = Object.keys(step.o);
     const height = Math.max(cMinHeight, cHeightPerPort * Math.max(inNames.length, outNames.length));
     const label = this._getLabel();
-    const width = Math.max(cDefaultWidth, label.length * cPixelPerSymbol);
+    const width = Math.max(cDefaultWidth, label.length * cPixelPerSymbol + 2 * cLabelMargin);
     this.set({
       inPorts: inNames,
       outPorts: outNames,

src/visual/Visualizer.js

@@ -68,6 +68,12 @@ function createSubstituteCells(graph) {
       const target = newCellsMap[getHighestDescendant(protoDst).id];
       newCell.get('source').id = source.id;
       newCell.get('target').id = target.id;
+    } else {
+      const bbox = cellProto.getBBox();
+      newCell.set('size', {
+        width: bbox.width,
+        height: bbox.height,
+      });
     }
     newCells[cellIdx] = newCell;
     cellIdx += 1;
@@ -204,7 +210,7 @@ export default class Visualizer {
     const settings = {
       marginX: 100,
       marginY: 10,
-      rankSep: 230,
+      rankSep: 100,
       nodeSep: 80,
       rankDir: 'LR',
       setLinkVertices: false,
@@ -213,10 +219,6 @@ export default class Visualizer {
         element.proto.set('position', {
           x: glNode.x - glNode.width / 2,
           y: glNode.y - glNode.height / 2 });
-        element.proto.set('size', {
-          width: glNode.width,
-          height: glNode.height,
-        });
       }, // setVertices is ignored
     };
     joint.layout.DirectedGraph.layout(newCells, settings);
@@ -317,6 +319,7 @@ export default class Visualizer {
           this._graph.addCell(visChild);
           if (parent) {
             parent.embed(visChild);
+            parent.update();
           }
         } else {
           // it is essential to update links before the step!