- Added #936, useImageSize for images and circularImages

HISTORY.md

@@ -17,6 +17,7 @@ http://visjs.org
 - Fixed #1111, check if edges exist was not correct on update.
 - Fixed #1112, network now works in firefox on unix again.
 - Added #931, borderRadius in shapeProperties for the box shape.
+- Added #936, useImageSize for images and circularImages
 
 ## 2015-07-20, version 4.5.1
 

dist/vis.js

@@ -27244,7 +27244,8 @@ return /******/ (function(modules) { // webpackBootstrap
         shape: 'ellipse',
         shapeProperties: {
           borderDashes: false,
-          borderRadius: 6
+          borderRadius: 6,
+          useImageSize: false
         },
         size: 25,
         title: undefined,
@@ -28811,19 +28812,25 @@ return /******/ (function(modules) { // webpackBootstrap
             width = 0;
             height = 0;
           }
-          if (this.imageObj.width > this.imageObj.height) {
-            ratio = this.imageObj.width / this.imageObj.height;
-            width = this.options.size * 2 * ratio || this.imageObj.width;
-            height = this.options.size * 2 || this.imageObj.height;
-          } else {
-            if (this.imageObj.width && this.imageObj.height) {
-              // not undefined or 0
-              ratio = this.imageObj.height / this.imageObj.width;
+          if (this.options.shapeProperties.useImageSize === false) {
+            if (this.imageObj.width > this.imageObj.height) {
+              ratio = this.imageObj.width / this.imageObj.height;
+              width = this.options.size * 2 * ratio || this.imageObj.width;
+              height = this.options.size * 2 || this.imageObj.height;
             } else {
-              ratio = 1;
+              if (this.imageObj.width && this.imageObj.height) {
+                // not undefined or 0
+                ratio = this.imageObj.height / this.imageObj.width;
+              } else {
+                ratio = 1;
+              }
+              width = this.options.size * 2;
+              height = this.options.size * 2 * ratio;
             }
-            width = this.options.size * 2 || this.imageObj.width;
-            height = this.options.size * 2 * ratio || this.imageObj.height;
+          } else {
+            // when not using the size property, we use the image size
+            width = this.imageObj.width;
+            height = this.imageObj.height;
           }
           this.width = width;
           this.height = height;
@@ -39907,6 +39914,7 @@ return /******/ (function(modules) { // webpackBootstrap
       shapeProperties: {
         borderDashes: { boolean: boolean, array: array },
         borderRadius: { number: number },
+        useImageSize: { boolean: boolean },
         __type__: { object: object }
       },
       size: { number: number },
@@ -40041,8 +40049,9 @@ return /******/ (function(modules) { // webpackBootstrap
       },
       shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
       shapeProperties: {
-        //borderDashes: false,
-        borderRadius: 6
+        borderDashes: false,
+        borderRadius: 6,
+        useImageSize: false
       },
       size: [25, 0, 200, 1]
     },

docs/network/nodes.html

@@ -631,7 +631,15 @@ mySize = minSize + diff * scale;
             <td class="indent">shapeProperties.borderRadius</td>
             <td>Number</td>
             <td><code>6</code></td>
-            <td>This property is used only for the box shape. It allows you to determine the roundness of the corners of the shape.
+            <td>This property is used only for the <code>box</code> shape. It allows you to determine the roundness of the corners of the shape.
+            </td>
+        </tr>
+        <tr parent="shapeProperties" class="hidden">
+            <td class="indent">shapeProperties.useImageSize</td>
+            <td>Boolean</td>
+            <td><code>false</code></td>
+            <td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When false, the size option is used, when true, the size of the image is used. <br><i><b>Important</b>:
+                if this is set to true, the image cannot be scaled with the value option!</i>
             </td>
         </tr>
         <tr>

lib/network/modules/NodesHandler.js

@@ -94,7 +94,8 @@ class NodesHandler {
       shape: 'ellipse',
       shapeProperties: {
         borderDashes: false,
-        borderRadius: 6
+        borderRadius: 6,
+        useImageSize: false
       },
       size: 25,
       title: undefined,

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -29,20 +29,27 @@ class CircleImageBase extends NodeBase {
         width = 0;
         height = 0;
       }
-      if (this.imageObj.width > this.imageObj.height) {
-        ratio = this.imageObj.width / this.imageObj.height;
-        width = this.options.size * 2 * ratio || this.imageObj.width;
-        height = this.options.size * 2 || this.imageObj.height;
-      }
-      else {
-        if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
-          ratio = this.imageObj.height / this.imageObj.width;
+      if (this.options.shapeProperties.useImageSize === false) {
+        if (this.imageObj.width > this.imageObj.height) {
+          ratio = this.imageObj.width / this.imageObj.height;
+          width = this.options.size * 2 * ratio || this.imageObj.width;
+          height = this.options.size * 2 || this.imageObj.height;
         }
         else {
-          ratio = 1;
+          if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
+            ratio = this.imageObj.height / this.imageObj.width;
+          }
+          else {
+            ratio = 1;
+          }
+          width = this.options.size * 2;
+          height = this.options.size * 2 * ratio;
         }
-        width = this.options.size * 2 || this.imageObj.width;
-        height = this.options.size * 2 * ratio || this.imageObj.height;
+      }
+      else {
+        // when not using the size property, we use the image size
+        width = this.imageObj.width;
+        height = this.imageObj.height;
       }
       this.width = width;
       this.height = height;

lib/network/options.js

@@ -211,6 +211,7 @@ let allOptions = {
     shapeProperties: {
       borderDashes: { boolean, array },
       borderRadius: { number },
+      useImageSize: { boolean },
       __type__: { object }
     },
     size: { number },
@@ -346,8 +347,9 @@ let configureOptions = {
     },
     shape: ['ellipse', 'box', 'circle', 'database', 'diamond', 'dot', 'square', 'star', 'text', 'triangle', 'triangleDown'],
     shapeProperties: {
-      //borderDashes: false,
+      borderDashes: false,
       borderRadius: 6,
+      useImageSize: false
     },
     size: [25, 0, 200, 1]
   },