fix cache with float dimensions. fix #798

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+* Fix caching on float dimensions
+
+## 4.0.18 - 2019-11-20
+
 * Fix `path.getClientRect()` calculations for `Konva.Path`
 * Fix wrong fire of `click` and `tap` events on stopped drag events.
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.18
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Mon Nov 25 2019
+   * Date: Thu Nov 28 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2703,7 +2703,7 @@
                   relativeTo: this.getParent()
               });
           }
-          var width = conf.width || rect.width, height = conf.height || rect.height, pixelRatio = conf.pixelRatio, x = conf.x === undefined ? rect.x : conf.x, y = conf.y === undefined ? rect.y : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false;
+          var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? rect.x : conf.x, y = conf.y === undefined ? rect.y : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false;
           if (!width || !height) {
               Util.error('Can not cache the node. Width or height of the node equals 0. Caching is skipped.');
               return;

src/Node.ts

@@ -363,8 +363,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
         relativeTo: this.getParent()
       });
     }
-    var width = conf.width || rect.width,
+    var width = Math.ceil(conf.width || rect.width),
-      height = conf.height || rect.height,
+      height = Math.ceil(conf.height || rect.height),
       pixelRatio = conf.pixelRatio,
       x = conf.x === undefined ? rect.x : conf.x,
       y = conf.y === undefined ? rect.y : conf.y,

test/unit/Node-cache-test.js

@@ -751,6 +751,29 @@ suite('Caching', function() {
     cloneAndCompareLayer(layer, 210);
   });
 
+  test('test rect with float dimensions', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      x: 10,
+      y: 10,
+      draggable: true
+    });
+    layer.add(group);
+
+    var circle = new Konva.Circle({
+      radius: 52.2,
+      fill: 'red',
+    });
+    group.add(circle);
+    group.cache();
+    stage.draw();
+
+    cloneAndCompareLayer(layer, 210);
+  });
+
   test('cache group with rectangle with fill and opacity', function() {
     var stage = addStage();