Add assignVertexProperties/assignEdgeProperties to allow user to modify some dot layout attributes

Author: jonchardy

gojs-dotlayout/src/DotLayout.js

@@ -29,9 +29,11 @@ export class DotLayout extends go.Layout {
     if (!graphviz) throw new Error(`no Graphviz instance was provided to DotLayout`);
     const proto = Object.getPrototypeOf(graphviz);
     if (!(proto && typeof proto.dot === 'function')) throw new Error(`provided Graphviz instance must include dot layout function`);
+
     super();
     this.isRouting = true;
-    this.graphviz = graphviz;
+
+    this._graphviz = graphviz;
 
     this._direction = 'TB';
     this._layerSpacing = 25;
@@ -45,7 +47,7 @@ export class DotLayout extends go.Layout {
    * 
    * Valid values are "LR", "TB", "RL", "BT". Defaults to "TB".
    * 
-   * This corresponds with the dot layout rankdir attribute: https://graphviz.org/docs/attrs/rankdir/.
+   * This corresponds to the dot layout rankdir attribute: https://graphviz.org/docs/attrs/rankdir/.
    */
   get direction() { return this._direction; }
   set direction(value) {
@@ -61,7 +63,7 @@ export class DotLayout extends go.Layout {
    * 
    * This value must be greater than 1.92 (to correspond to dot's minimum). Defaults to 25.
    * 
-   * This corresponds with the dot layout ranksep attribute: https://graphviz.org/docs/attrs/ranksep/.
+   * This corresponds to the dot layout ranksep attribute: https://graphviz.org/docs/attrs/ranksep/.
    */
   get layerSpacing() { return this._layerSpacing; }
   set layerSpacing(value) {
@@ -79,7 +81,7 @@ export class DotLayout extends go.Layout {
    * 
    * This value must be greater than 1.92 (to correspond to dot's minimum). Defaults to 25.
    * 
-   * This corresponds with the dot layout nodesep attribute: https://graphviz.org/docs/attrs/nodesep/.
+   * This corresponds to the dot layout nodesep attribute: https://graphviz.org/docs/attrs/nodesep/.
    */
   get nodeSpacing() { return this._nodeSpacing; }
   set nodeSpacing(value) {
@@ -92,11 +94,11 @@ export class DotLayout extends go.Layout {
 
   /**
    * Gets or sets whether the fromSpot and toSpot of each link should be used by the layout when routing links.
-   * Link routes is typically more readable when this is left as false.
+   * Link routes are typically more readable when this is left as false.
    * 
    * Defaults to false.
    * 
-   * This corresponds with the Graphviz edge headport/tailport attributes:
+   * This corresponds to the Graphviz edge headport/tailport attributes:
    * https://graphviz.org/docs/attrs/headport/
    * https://graphviz.org/docs/attrs/tailport/
    */
@@ -114,7 +116,7 @@ export class DotLayout extends go.Layout {
    * 
    * This value must be positive. Defaults to NaN, meaning no limit.
    * 
-   * This corresponds with the dot layout nslimit attribute: https://graphviz.org/docs/attrs/nslimit/.
+   * This corresponds to the dot layout nslimit attribute: https://graphviz.org/docs/attrs/nslimit/.
    */
   get iterations() { return this._iterations; }
   set iterations(value) {
@@ -125,11 +127,35 @@ export class DotLayout extends go.Layout {
     }
   }
 
+  /**
+   * Creates a copy of this Layout and returns it.
+   * @returns A copied DotLayout
+   */
+  copy() {
+    const copy = new (this.constructor)(this._graphviz);
+    this.cloneProtected(copy);
+    return copy;
+  }
+
+  /**
+   * Copies properties to a cloned Layout.
+   */
+  cloneProtected(copy) {
+    super.cloneProtected(copy);
+    // don't copy .root
+    copy._direction = this._direction;
+    copy._layerSpacing = this._layerSpacing;
+    copy._nodeSpacing = this._nodeSpacing;
+    copy._usesLinkSpots = this._usesLinkSpots;
+    copy._iterations = this._iterations;
+  }
+
   /**
    * Use a LayoutNetwork that always creates DotEdges.
    */
   createNetwork() {
     const net = new go.LayoutNetwork(this);
+    net.createVertex = () => new DotVertex(net);
     net.createEdge = () => new DotEdge(net);
     return net;
   }
@@ -156,7 +182,7 @@ export class DotLayout extends go.Layout {
     const dot = this.generateDot();
 
     // perform Graphviz dot layout via Graphviz WASM
-    const jsonStr = this.graphviz.dot(dot, 'json0');
+    const jsonStr = this._graphviz.dot(dot, 'json0');
     const json = JSON.parse(jsonStr);
 
     const h = parseFloat(json.bb.substring(json.bb.lastIndexOf(',') + 1));  // save height so we can convert y values
@@ -179,7 +205,7 @@ export class DotLayout extends go.Layout {
           const {x, y} = this.parsePos(ptStr, h);
           ptList.add(new go.Point(x, y));
         }
-        edge.pts = ptList;
+        edge._pts = ptList;
       }
     }
 
@@ -206,16 +232,21 @@ export class DotLayout extends go.Layout {
   ranksep=${ranksep}
   nodesep=${nodesep}
   ${nslimit}
-  node [shape="box" fixedsize=true fontname="arial"]
+  node [shape="box" fixedsize=true]
   edge [arrowhead="none"]\n`;
     const vit = this.network.vertexes.iterator;
     while (vit.next()) {
         const v = vit.value;
         const node = v.node;
         if (!node) continue;
         if (node instanceof go.Group) throw new Error('DotLayout does not currently support Groups.');
+        this.assignVertexProperties(v);
+        // prepare DOT language attributes for non-default vertex properties
+        const width = !isNaN(v.width) ? `width=${v.width / 96}` : '';
+        const height = !isNaN(v.height) ? ` height=${v.height / 96}` : '';
+        const shape = v.shape !== 'box' ? ` shape="${v.shape}"` : '';
         // divide size by 96 since Graphviz expects inches
-        dot += `  ${node.key} [width=${node.actualBounds.width / 96} height=${node.actualBounds.height / 96}]\n`;
+        dot += `  ${node.key} [${width}${height}${shape}]\n`;
     }
     const eit = this.network.edges.iterator;
     while (eit.next()) {
@@ -225,31 +256,38 @@ export class DotLayout extends go.Layout {
         const fromNode = link.fromNode;
         const toNode = link.toNode;
         if (!(fromNode && toNode)) continue;
+        this.assignEdgeProperties(e);
+        // prepare DOT language attributes for non-default edge properties
         const constraint = !e.isConstraint ? ' constraint=false' : '';
-        let tailport = '';
-        let headport = '';
-        if (this.usesLinkSpots) {
-          tailport = this.getPortAttr(link.fromSpot, true);
-          headport = this.getPortAttr(link.toSpot, false);
-        }
+        const tailport = e.tailport !== 'c' ? ` tailport=${e.tailport}` : '';
+        const headport = e.headport !== 'c' ? ` headport=${e.headport}` : '';
+        const weight = e.weight !== 1 ? ` weight=${e.weight}` : '';
         // include the Link key as an ID for quick lookup from the output
-        dot += `  ${fromNode.key} -> ${toNode.key} [id=${link.key}${constraint}${tailport}${headport}]\n`;
+        dot += `  ${fromNode.key} -> ${toNode.key} [id=${link.key}${constraint}${tailport}${headport}${weight}]\n`;
     }
     dot += '}';
     return dot;
   }
 
   /**
-   * Parse a pos string into an x-y pair, normalizing to a top-left origin and pixels.
-   * @param {*} str A Graphviz "pos" property string
-   * @param {*} h The height, in points, of the Graphviz output graph
-   * @returns An x, y pair representing a point
+   * Override this method in order to set vertex properties prior to the dot layout being performed.
+   * 
+   * By default, this method does nothing.
+   * @param {*} v The vertex for which properties can be assigned
    */
-  parsePos(str, h) {
-    const idx = str.indexOf(',');
-    const x = parseFloat(str.substring(0, idx)) * 96 / 72;
-    const y = (h - parseFloat(str.substring(idx + 1)) + 1) * 96 / 72;
-    return { x, y };
+  assignVertexProperties(v) { }
+
+  /**
+   * Override this method in order to set edge properties prior to the dot layout being performed.
+   * 
+   * By default, this method sets the headport and tailport properties if usesLinkSpots is true.
+   * @param {*} e The edge for which properties can be assigned
+   */
+  assignEdgeProperties(e) {
+    if (this.usesLinkSpots) {
+      e.tailport = this.getPortAttr(e.link.fromSpot, true);
+      e.headport = this.getPortAttr(e.link.toSpot, false);
+    }
   }
 
   /**
@@ -283,27 +321,78 @@ export class DotLayout extends go.Layout {
       case go.Spot.Default: port = 'c'; break;
       default: port = '_'; break;
     }
+    return port;
+  }
+
+  /**
+   * Parse a pos string into an x-y pair, normalizing to a top-left origin and pixels.
+   * @param {*} str A Graphviz "pos" property string
+   * @param {*} h The height, in points, of the Graphviz output graph
+   * @returns An x, y pair representing a point
+   */
+  parsePos(str, h) {
+    const idx = str.indexOf(',');
+    const x = parseFloat(str.substring(0, idx)) * 96 / 72;
+    const y = (h - parseFloat(str.substring(idx + 1)) + 1) * 96 / 72;
+    return { x, y };
+  }
+}
 
-    return isfrom ? ` tailport=${port}` : ` headport=${port}`;
+/**
+ * DotVertex, a LayoutVertex that holds additional info specific to dot layouts.
+ */
+class DotVertex extends go.LayoutVertex {
+  constructor(network) {
+    super(network);
+
+    // default to NaN so we can ensure they're set
+    this.width = NaN;
+    this.height = NaN;
+
+    this._shape = 'box';
+  }
+
+  /**
+   * Gets or sets the shape of this vertex.
+   * 
+   * Valid values can be found here: https://graphviz.org/doc/info/shapes.html#polygon. Defaults to "box".
+   * 
+   * This property can be set during assignVertexProperties.
+   * 
+   * This corresponds to the Graphviz node shape attribute: https://graphviz.org/docs/attrs/shape/.
+   */
+  get shape() { return this._shape; }
+  set shape(value) {
+    if (this._shape !== value) {
+      this._shape = value;
+    }
   }
 }
 
 /**
- * DotEdge, a LayoutEdge that holds additional info about link points.
+ * DotEdge, a LayoutEdge that holds additional info specific to dot layouts.
  */
 class DotEdge extends go.LayoutEdge {
+  static validPorts = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw', 'c', '_'];
+
   constructor(network) {
     super(network);
-    this.pts = null;
+    this._pts = null;  // internal
+
     this._isConstraint = true;
+    this._headport = 'c';
+    this._tailport = 'c';
+    this._weight = 1;
   }
 
   /**
    * Gets or sets whether this edge is used in determining node layers.
    * 
    * Defaults to true.
    * 
-   * This corresponds with the Graphviz edge constraint attribute: https://www.graphviz.org/docs/attrs/constraint/.
+   * This property can be set during assignEdgeProperties.
+   * 
+   * This corresponds to the Graphviz edge constraint attribute: https://www.graphviz.org/docs/attrs/constraint/.
    */
   get isConstraint() { return this._isConstraint; }
   set isConstraint(value) {
@@ -313,7 +402,58 @@ class DotEdge extends go.LayoutEdge {
     }
   }
 
+  /**
+   * Gets or sets the "compass point" where this edge connects to its to vertex.
+   * 
+   * Valid values are "n", "ne", "e", "se", "s", "sw", "w", "nw", "c", "_". Defaults to "c".
+   * 
+   * This property can be set during assignEdgeProperties.
+   * 
+   * This corresponds to the Graphviz edge headport attribute: https://graphviz.org/docs/attrs/headport/.
+   */
+  get headport() { return this._headport; }
+  set headport(value) {
+    if (!DotEdge.validPorts.includes(value)) throw new Error(`invalid value for DotEdge.headport: ${value}`);
+    if (this._headport !== value) {
+      this._headport = value;
+    }
+  }
+
+  /**
+   * Gets or sets the "compass point" where this edge connects to its from vertex.
+   * 
+   * Valid values are "n", "ne", "e", "se", "s", "sw", "w", "nw", "c", "_". Defaults to "c".
+   * 
+   * This property can be set during assignEdgeProperties.
+   * 
+   * This corresponds to the Graphviz edge tailport attribute: https://graphviz.org/docs/attrs/tailport/.
+   */
+  get tailport() { return this._tailport; }
+  set tailport(value) {
+    if (!DotEdge.validPorts.includes(value)) throw new Error(`invalid value for DotEdge.tailport: ${value}`);
+    if (this._tailport !== value) {
+      this._tailport = value;
+    }
+  }
+
+  /**
+   * Gets or sets the weight of this edge.
+   * 
+   * This value must be an integer >= 0. Defaults to 1.
+   * 
+   * This property can be set during assignEdgeProperties.
+   * 
+   * This corresponds to the Graphviz edge constraint attribute: https://graphviz.org/docs/attrs/weight/.
+   */
+  get weight() { return this._weight; }
+  set weight(value) {
+    if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) throw new Error(`new value for DotEdge.weight must be an integer >= 0, not: ${value}`);
+    if (this._weight !== value) {
+      this._weight = value;
+    }
+  }
+
   commit() {
-    if (this.network.layout.isRouting) this.link.points = this.pts;
+    if (this.network.layout.isRouting) this.link.points = this._pts;
   }
 }