- Fixed #1672: Implemented stepped scaling for nice interpolation of images.

- Added interpolation option for interpolation of images, default true.

HISTORY.md

@@ -26,6 +26,8 @@ http://visjs.org
 - Added parentCentralization option for hierarchical layout.
 - Fixed #1575: fixed selection events
 - Fixed #1677: updating groups through manipulation now works as it should.
+- Fixed #1672: Implemented stepped scaling for nice interpolation of images.
+- Added interpolation option for interpolation of images, default true.
 
 ## 2016-02-04, version 4.14.0
 

dist/vis.js

@@ -25592,14 +25592,14 @@ return /******/ (function(modules) { // webpackBootstrap
       left: {
         range: { min: undefined, max: undefined },
         format: function format(value) {
-          return '' + Number.parseFloat(value.toPrecision(3));
+          return '' + parseFloat(value.toPrecision(3));
         },
         title: { text: undefined, style: undefined }
       },
       right: {
         range: { min: undefined, max: undefined },
         format: function format(value) {
-          return '' + Number.parseFloat(value.toPrecision(3));
+          return '' + parseFloat(value.toPrecision(3));
         },
         title: { text: undefined, style: undefined }
       }
@@ -28552,6 +28552,7 @@ return /******/ (function(modules) { // webpackBootstrap
         shapeProperties: {
           borderDashes: false, // only for borders
           borderRadius: 6, // only for box shape
+          interpolation: true, // only for image and circularImage shapes
           useImageSize: false, // only for image and circularImage shapes
           useBorderWithImage: false // only for image shape
         },
@@ -30221,8 +30222,35 @@ return /******/ (function(modules) { // webpackBootstrap
           // draw shadow if enabled
           this.enableShadow(ctx);
 
-          // draw image
-          ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+          var factor = this.imageObj.width / this.width / this.body.view.scale;
+          if (factor > 2 && this.options.shapeProperties.interpolation === true) {
+            var w = this.imageObj.width;
+            var h = this.imageObj.height;
+            var can2 = document.createElement('canvas');
+            can2.width = w;
+            can2.height = w;
+            var ctx2 = can2.getContext('2d');
+
+            factor *= 0.5;
+            w *= 0.5;
+            h *= 0.5;
+            ctx2.drawImage(this.imageObj, 0, 0, w, h);
+
+            var distance = 0;
+            var iterations = 1;
+            while (factor > 2 && iterations < 4) {
+              ctx2.drawImage(can2, distance, 0, w, h, distance + w, 0, w / 2, h / 2);
+              distance += w;
+              factor *= 0.5;
+              w *= 0.5;
+              h *= 0.5;
+              iterations += 1;
+            }
+            ctx.drawImage(can2, distance, 0, w, h, this.left, this.top, this.width, this.height);
+          } else {
+            // draw image
+            ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+          }
 
           // disable shadows for other elements.
           this.disableShadow(ctx);
@@ -42941,6 +42969,7 @@ return /******/ (function(modules) { // webpackBootstrap
       shapeProperties: {
         borderDashes: { boolean: boolean, array: array },
         borderRadius: { number: number },
+        interpolation: { boolean: boolean },
         useImageSize: { boolean: boolean },
         useBorderWithImage: { boolean: boolean },
         __type__: { object: object }
@@ -43081,6 +43110,7 @@ return /******/ (function(modules) { // webpackBootstrap
       shapeProperties: {
         borderDashes: false,
         borderRadius: [6, 0, 20, 1],
+        interpolation: true,
         useImageSize: false
       },
       size: [25, 0, 200, 1]

docs/network/nodes.html

@@ -180,6 +180,7 @@ var options = {
     shapeProperties: {
       borderDashes: false, // only for borders
       borderRadius: 6,     // only for box shape
+      interpolation: false,  // only for image and circularImage shapes
       useImageSize: false,  // only for image and circularImage shapes
       useBorderWithImage: false  // only for image shape
     }
@@ -645,6 +646,13 @@ mySize = minSize + diff * scale;
             <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.interpolation</td>
+            <td>Boolean</td>
+            <td><code>true</code></td>
+            <td>This property only applies to the <code>image</code> and <code>circularImage</code> shapes. When true, the image is resampled when scaled down, resulting in a nicer image at the cost of computional time.</i>
+            </td>
+        </tr>
         <tr parent="shapeProperties" class="hidden">
             <td class="indent">shapeProperties.useImageSize</td>
             <td>Boolean</td>

lib/network/modules/NodesHandler.js

@@ -96,6 +96,7 @@ class NodesHandler {
       shapeProperties: {
         borderDashes: false, // only for borders
         borderRadius: 6,     // only for box shape
+        interpolation: true,  // only for image and circularImage shapes
         useImageSize: false,  // only for image and circularImage shapes
         useBorderWithImage: false  // only for image shape
       },

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

@@ -103,8 +103,37 @@ class CircleImageBase extends NodeBase {
       // draw shadow if enabled
       this.enableShadow(ctx);
 
-      // draw image
-      ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      let factor = (this.imageObj.width / this.width) / this.body.view.scale;
+      if (factor > 2 && this.options.shapeProperties.interpolation === true) {
+        let w = this.imageObj.width;
+        let h = this.imageObj.height;
+        var can2 = document.createElement('canvas');
+        can2.width = w;
+        can2.height = w;
+        var ctx2 = can2.getContext('2d');
+
+        factor *= 0.5;
+        w *= 0.5;
+        h *= 0.5;
+        ctx2.drawImage(this.imageObj, 0, 0, w, h);
+
+        let distance = 0;
+        let iterations = 1;
+        while (factor > 2 && iterations < 4) {
+          ctx2.drawImage(can2, distance, 0, w, h, distance+w, 0, w/2, h/2);
+          distance += w;
+          factor *= 0.5;
+          w *= 0.5;
+          h *= 0.5;
+          iterations += 1;
+        }
+        ctx.drawImage(can2, distance, 0, w, h, this.left, this.top, this.width, this.height);
+      }
+      else {
+        // draw image
+        ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+      }
+
 
       // disable shadows for other elements.
       this.disableShadow(ctx);

lib/network/options.js

@@ -221,6 +221,7 @@ let allOptions = {
     shapeProperties: {
       borderDashes: { boolean, array },
       borderRadius: { number },
+      interpolation: { boolean },
       useImageSize: { boolean },
       useBorderWithImage: { boolean },
       __type__: { object }
@@ -362,6 +363,7 @@ let configureOptions = {
     shapeProperties: {
       borderDashes: false,
       borderRadius: [6, 0, 20, 1],
+      interpolation: true,
       useImageSize: false
     },
     size: [25, 0, 200, 1]