Label alignment in ShapeBase

visjs · Jan 29, 2020 · 8863dda · 8863dda
1 parent 1eb1d9e
commit 8863dda
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 76 deletions.
diff --git a/examples/network/exampleApplications/nodeLegend.html b/examples/network/exampleApplications/nodeLegend.html
@@ -97,11 +97,11 @@
       var x = - mynetwork.clientWidth / 2 + 50;
       var y = - mynetwork.clientHeight / 2 + 50;
       var step = 50;
-      nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, labelPosition: 'right', fixed: true, physics:false});
-      nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, labelPosition: 'right', fixed: true,  physics:false});
-      nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, labelPosition: 'right', fixed: true,  physics:false});
-      nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, labelPosition: 'right', fixed: true,  physics:false});
-      nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, labelPosition: 'right', fixed: true,  physics:false});
+      nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, labelPosition:'right', fixed: true, physics:false});
+      nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, labelPosition:'right', fixed: true,  physics:false});
+      nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, labelPosition:'right', fixed: true,  physics:false});
+      nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, labelPosition:'right', fixed: true,  physics:false});
+      nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, labelPosition:'right', fixed: true,  physics:false});
 
       // create a network
       var container = document.getElementById('mynetwork');
@@ -159,4 +159,4 @@
 
 
 
-</body></html>
+</body></html>
diff --git a/examples/network/labels/labelAlignment.html b/examples/network/labels/labelAlignment.html
@@ -35,13 +35,13 @@
   var nodes = [
     {id: 1, label: 'Node 1:\nCenter-Aligned\n(default)'},
     {id: 2, label: 'Node 2:\nLeft-Aligned', font: {align: 'left'}},
-    {id: 3, label: 'Node 3:\nLeft-Aligned Box\n', shape: 'box', font: {align: 'left'}},
-    {id: 4, label: 'Node 4:\nRight-Aligned Box\n', shape: 'box', font: {align: 'right'}},
-    {id: 5, label: 'Node 5:\nBottom Label\n(default)', shape: 'dot', size: 40, color:"blue"},
-    {id: 6, label: 'Node 6:\nTop Label', shape: 'dot', labelPosition:'top', size: 40, color:"blue"},
-    {id: 7, label: 'Node 7:\nInside Label', shape: 'dot', labelPosition:'inside', size: 10, color:"yellow"},
-    {id: 8, label: 'Node 8:\nLeft Label', shape: 'dot', labelPosition:'left', size: 10, color:"green"},
-    {id: 9, label: 'Node 9:\nRight Label', shape: 'dot', labelPosition:'right', size:40, color:"green"},
+    {id: 3, label: 'Node 3:\nLeft-Aligned Box', shape: 'box', font: {align: 'left'}},
+    {id: 4, label: 'Node 4:\nRight-Aligned Box', shape: 'box', font: {align: 'right'}},
+    {id: 5, label: 'Node 5:\nBottom Label\n(default)', shape: 'dot'},
+    {id: 6, label: 'Node 6:\nTop Label', shape: 'dot', labelPosition:'top', color:"yellow"},
+    {id: 7, label: 'Node 7:\nInside Label', shape: 'dot', labelPosition:'inside', color:"yellow"},
+    {id: 8, label: 'Node 8:\nLeft Label', shape: 'dot', labelPosition:'left', color:"orange"},
+    {id: 9, label: 'Node 9:\nRight Label', shape: 'dot', labelPosition:'right', color:"orange"},
   ];
 
   // create an array with edges
@@ -73,4 +73,4 @@
 </script>
 
 </body>
-</html>
+</html>
diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js
@@ -528,16 +528,6 @@ class Node {
   }
 
 
-  /**
-   * Get the current dimensions of the label
-   *
-   * @return {rect}
-   */
-  getLabelSize() {
-    return this.labelModule.size();
-  }
-
-
   /**
    * Adjust the value range of the node. The node will adjust it's size
    * based on its value.

diff --git a/lib/network/modules/components/nodes/util/ShapeBase.js b/lib/network/modules/components/nodes/util/ShapeBase.js
@@ -68,9 +68,33 @@ class ShapeBase extends NodeBase {
 
     if (this.options.label !== undefined) {
       // Need to call following here in order to ensure value for `this.labelModule.size.height`
-      this.labelModule.calculateLabelSize(ctx, selected, hover, x, y, 'hanging')
-      let yLabel = y + 0.5 * this.height + 0.5 * this.labelModule.size.height;
-      this.labelModule.draw(ctx, x, yLabel, selected, hover, 'hanging');
+      this.labelModule.calculateLabelSize(ctx, selected, hover, x, y, 'hanging'); 
+
+      let labelX = x;
+      let labelY = y;
+      let labelBaseline = 'middle';
+      const distance = this.labelModule.distance;
+
+      switch(this.labelModule.position){ 
+        case 'inside': 
+          break; 
+        case 'left': 
+          this.labelModule.fontOptions.align = 'right';
+          labelX -= (this.labelModule.size.width + this.width) * 0.5 + distance; // shift left 
+          break; 
+        case 'right': 
+          this.labelModule.fontOptions.align = 'left';
+          labelX += (this.labelModule.size.width + this.width) * 0.5 + distance; // shift right    
+          break; 
+        case 'top': 
+          labelY -= (this.labelModule.size.height + this.height) * 0.5 + distance; // shift up to above node 
+          break; 
+        default: 
+          labelBaseline = 'top';
+          labelY += (this.labelModule.size.height + this.height + distance) * 0.5; // shift down to below node 
+      } 
+
+      this.labelModule.draw(ctx, labelX, labelY, selected, hover, labelBaseline);
     }
 
     this.updateBoundingBox(x,y);
@@ -82,17 +106,19 @@ class ShapeBase extends NodeBase {
    * @param {number} y
    */
   updateBoundingBox(x, y) {
+    // TODO: Same/similar code is at least 4 places!! 
     this.boundingBox.top = y - this.options.size;
     this.boundingBox.left = x - this.options.size;
     this.boundingBox.right = x + this.options.size;
     this.boundingBox.bottom = y + this.options.size;
 
     if (this.options.label !== undefined && this.labelModule.size.width > 0) {
+      this.boundingBox.top = Math.max(this.boundingBox.top, this.labelModule.size.top);
       this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
       this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
-      this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelModule.size.height);
+      this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.labelModule.size.top + this.labelModule.size.height);
     }
   }
 }
 
-export default ShapeBase;
+export default ShapeBase;
diff --git a/lib/network/modules/components/shared/Label.js b/lib/network/modules/components/shared/Label.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-prototype-builtins */
 import * as util from 'vis-util';
 import ComponentUtil from './ComponentUtil';
 import LabelSplitter from './LabelSplitter';
@@ -29,6 +28,7 @@ class Label {
     this.setOptions(options);
     this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0};
     this.position = undefined;
+    this.distance = 12;
     this.isEdgeLabel = edgelabel;
   }
 
@@ -39,20 +39,14 @@ class Label {
   setOptions(options) {
     this.elementOptions = options;  // Reference to the options of the parent Node-instance 
 
-    this.initFontOptions(options.font);
-
     if (ComponentUtil.isValidLabel(options.label)) {
       this.labelDirty = true;
     } else {
       // Bad label! Change the option value to prevent bad stuff happening
       options.label = undefined
     }
 
-    if(options.labelPosition !== undefined && options.labelPosition !== null) {
-      if(typeof options.labelPosition === 'string'){
-        this.position = options.labelPosition;
-      }
-    }
+    this.initFontOptions(options.font);
 
     if (options.font !== undefined && options.font !== null) { // font options can be deleted at various levels
       if (typeof options.font === 'string') {
@@ -66,6 +60,12 @@ class Label {
         }
       }
     }
+
+    if(options.labelDistance !== undefined && options.labelDistance !== null) {
+      if(typeof options.labelDistance === 'number'){
+        this.distance = options.labelDistance;
+      }
+    }
   }
 
 
@@ -466,12 +466,12 @@ class Label {
 
     ctx.textAlign = 'left';
     x = x - this.size.width / 2; // Shift label 1/2-distance to the left
-    if ((this.fontOptions.valign) && (this.size.height > this.size.labelHeight)) {
+    if ((this.fontOptions.valign) && (this.size.height > this.size.stateHeight)) {
       if (this.fontOptions.valign === 'top') {
-        y -= (this.size.height - this.size.labelHeight) / 2;
+        y -= (this.size.height - this.size.stateHeight) / 2;
       }
       if (this.fontOptions.valign === 'bottom') {
-        y += (this.size.height - this.size.labelHeight) / 2;
+        y += (this.size.height - this.size.stateHeight) / 2;
       }
     }
 
@@ -535,39 +535,8 @@ class Label {
         ctx.textBaseline = 'middle';
       }
     }
-    // check for node label alignment
     else {
       ctx.textBaseline = baseline;
-
-      // this.size = {top, left, width, height, yLine};
-      // what is yLine?
-      // how does it currently get y value to position the label below node?
-      // suggestion: alignment offsets to be based on center/origin of node rather bottom
-      // suggestion: would 'dimensions' be a better name than 'size'?
-
-      let nodeSize = 30;
-      let distance = 5;
-
-      switch(this.position){
-        case 'inside':
-          y -= (this.size.height / 2) + nodeSize + distance; // shift up to middle of node
-          break;
-        case 'left':
-          this.fontOptions.align = 'right'; // set font alignment to right
-          y -= (this.size.height / 2) + nodeSize + distance; // shift up to middle of node
-          x -= (nodeSize + distance) * 2; // shift left
-          break;
-        case 'right':
-          this.fontOptions.align = 'left'; // set font alignment to left
-          y -= (this.size.height / 2) + nodeSize + distance; // shift up to middle of node
-          x += (nodeSize + distance) * 2; // shift right   
-          break;
-        case 'top':
-          y -= this.size.height + (nodeSize + distance) * 2; // shift up to above node
-          break;
-        default:
-          // default: bottom
-      }
     }
     return [x,y];
   }
@@ -665,9 +634,7 @@ class Label {
     this.size.top = y - this.size.height * 0.5;
     this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.fontOptions.size;
     if (baseline === "hanging") {
-      this.size.top += 0.5 * this.fontOptions.size;
-      this.size.top += 4;   // distance from node, required because we use hanging. Hanging has less difference between browsers
-      this.size.yLine += 4; // distance from node
+      this.size.yLine += 4; // used for edge position
     }
   }
 
@@ -772,7 +739,7 @@ class Label {
       state.width = this.fontOptions.minWdt;
     }
 
-    this.size.labelHeight =state.height;
+    this.size.stateHeight = state.height;
     if ((this.fontOptions.minHgt > 0) && (state.height < this.fontOptions.minHgt)) {
       state.height = this.fontOptions.minHgt;
     }
@@ -808,4 +775,4 @@ class Label {
   }
 }
 
-export default Label;
+export default Label;