performance fixes, docs fixes

konva-node/demo.js

@@ -7,58 +7,59 @@ var Konva = require('./');
 // Create stage. Container parameter is not required in NodeJS.
 var stage = new Konva.Stage({
   width: 100,
-  height: 100
+  height: 100,
 });
 
 var layer = new Konva.Layer();
 stage.add(layer);
+
 var rect = new Konva.Rect({
   width: 100,
   height: 100,
   x: 50,
   y: 50,
-  fill: 'white'
+  fill: 'white',
 });
 var text = new Konva.Text({
   text: 'Generated inside node js',
   x: 20,
   y: 20,
-  fill: 'black'
+  fill: 'black',
 });
 layer.add(rect).add(text);
 layer.draw();
 stage.setSize({
   width: 200,
-  height: 200
+  height: 200,
 });
 
 // check tween works
 var tween = new Konva.Tween({
   node: rect,
   duration: 1,
-  x: -50
+  x: -50,
 });
 tween.play();
 
 // After tween we want to convert stage to dataURL
-setTimeout(function() {
+setTimeout(function () {
   stage.toDataURL({
-    callback: function(data) {
+    callback: function (data) {
       // Then add result to stage
       var img = new Konva.window.Image();
-      img.onload = function() {
+      img.onload = function () {
         var image = new Konva.Image({
           image: img,
           x: 10,
-          y: 50
+          y: 50,
         });
         layer.add(image);
         layer.draw();
         // save stage image as file
         stage.toDataURL({
-          callback: function(data) {
+          callback: function (data) {
             var base64Data = data.replace(/^data:image\/png;base64,/, '');
-            fs.writeFile('./out.png', base64Data, 'base64', function(err) {
+            fs.writeFile('./out.png', base64Data, 'base64', function (err) {
               err && console.log(err);
               console.log('See out.png');
             });
@@ -67,10 +68,10 @@ setTimeout(function() {
               console.log('image loaded');
               // shoul'd throw
             });
-          }
+          },
         });
       };
       img.src = data;
-    }
+    },
   });
 }, 1050);

konva-node/index.js

@@ -4,18 +4,18 @@ var canvas = require('canvas');
 // mock window
 Konva.window = {
   Image: canvas.Image,
-  devicePixelRatio: 1
+  devicePixelRatio: 1,
 };
 // mock document
 Konva.document = {
-  createElement: function() {},
+  createElement: function () {},
   documentElement: {
-    addEventListener: function() {}
-  }
+    addEventListener: function () {},
+  },
 };
 
 // make some global injections
-global.requestAnimationFrame = cb => {
+global.requestAnimationFrame = (cb) => {
   setImmediate(cb);
 };
 
@@ -26,7 +26,7 @@ Konva.Util.createCanvasElement = () => {
   return node;
 };
 
-// create canvas in Node env
+// create image in Node env
 Konva.Util.createImageElement = () => {
   const node = new canvas.Image();
   node.style = {};

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.1.4
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Wed Oct 21 2020
+   * Date: Tue Nov 10 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2550,7 +2550,7 @@
               var drawNode = elem.node.getLayer() ||
                   (elem.node instanceof Konva['Stage'] && elem.node);
               if (drawNode) {
-                  drawNode.draw();
+                  drawNode.batchDraw();
               }
           });
       },
@@ -6770,7 +6770,7 @@
       /**
        * batch draw
        * @method
-       * @name Konva.Layer#batchDraw
+       * @name Konva.Stage#batchDraw
        * @return {Konva.Stage} this
        */
       Stage.prototype.batchDraw = function () {
@@ -10765,7 +10765,7 @@
   _registerNode(Circle);
   /**
    * get/set radius
-   * @name Konva.Arrow#radius
+   * @name Konva.Circle#radius
    * @method
    * @param {Number} radius
    * @returns {Number}
@@ -13307,44 +13307,44 @@
   _registerNode(Star);
   /**
    * get/set number of points
-   * @name Konva.Ring#numPoints
+   * @name Konva.Star#numPoints
    * @method
    * @param {Number} numPoints
    * @returns {Number}
    * @example
    * // get inner radius
-   * var numPoints = ring.numPoints();
+   * var numPoints = star.numPoints();
    *
    * // set inner radius
-   * ring.numPoints(20);
+   * star.numPoints(20);
    */
   Factory.addGetterSetter(Star, 'numPoints', 5, getNumberValidator());
   /**
    * get/set innerRadius
-   * @name Konva.Ring#innerRadius
+   * @name Konva.Star#innerRadius
    * @method
    * @param {Number} innerRadius
    * @returns {Number}
    * @example
    * // get inner radius
-   * var innerRadius = ring.innerRadius();
+   * var innerRadius = star.innerRadius();
    *
    * // set inner radius
-   * ring.innerRadius(20);
+   * star.innerRadius(20);
    */
   Factory.addGetterSetter(Star, 'innerRadius', 0, getNumberValidator());
   /**
    * get/set outerRadius
-   * @name Konva.Ring#outerRadius
+   * @name Konva.Star#outerRadius
    * @method
    * @param {Number} outerRadius
    * @returns {Number}
    * @example
    * // get inner radius
-   * var outerRadius = ring.outerRadius();
+   * var outerRadius = star.outerRadius();
    *
    * // set inner radius
-   * ring.outerRadius(20);
+   * star.outerRadius(20);
    */
   Factory.addGetterSetter(Star, 'outerRadius', 0, getNumberValidator());
   Collection.mapMethods(Star);
@@ -14631,7 +14631,7 @@
   Factory.addGetterSetter(TextPath, 'fontStyle', NORMAL$1);
   /**
    * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
-   * @name Konva.Text#align
+   * @name Konva.TextPath#align
    * @method
    * @param {String} align
    * @returns {String}
@@ -14968,7 +14968,7 @@
                       _this.rotation(_this.nodes()[0].rotation());
                   }
                   _this._resetTransformCache();
-                  if (!_this._transforming) {
+                  if (!_this._transforming && !_this.isDragging()) {
                       _this.update();
                   }
               };

src/DragAndDrop.ts

@@ -121,9 +121,9 @@ export const DD = {
 
       const drawNode =
         elem.node.getLayer() ||
-        (elem.node instanceof Konva['Stage'] && elem.node);
+        ((elem.node instanceof Konva['Stage'] && elem.node) as any);
       if (drawNode) {
-        drawNode.draw();
+        drawNode.batchDraw();
       }
     });
   },

src/Stage.ts

@@ -1063,7 +1063,7 @@ export class Stage extends Container<Layer> {
   /**
    * batch draw
    * @method
-   * @name Konva.Layer#batchDraw
+   * @name Konva.Stage#batchDraw
    * @return {Konva.Stage} this
    */
   batchDraw() {

src/shapes/Circle.ts

@@ -61,7 +61,7 @@ _registerNode(Circle);
 
 /**
  * get/set radius
- * @name Konva.Arrow#radius
+ * @name Konva.Circle#radius
  * @method
  * @param {Number} radius
  * @returns {Number}

src/shapes/Star.ts

@@ -79,46 +79,46 @@ _registerNode(Star);
 
 /**
  * get/set number of points
- * @name Konva.Ring#numPoints
+ * @name Konva.Star#numPoints
  * @method
  * @param {Number} numPoints
  * @returns {Number}
  * @example
  * // get inner radius
- * var numPoints = ring.numPoints();
+ * var numPoints = star.numPoints();
  *
  * // set inner radius
- * ring.numPoints(20);
+ * star.numPoints(20);
  */
 Factory.addGetterSetter(Star, 'numPoints', 5, getNumberValidator());
 
 /**
  * get/set innerRadius
- * @name Konva.Ring#innerRadius
+ * @name Konva.Star#innerRadius
  * @method
  * @param {Number} innerRadius
  * @returns {Number}
  * @example
  * // get inner radius
- * var innerRadius = ring.innerRadius();
+ * var innerRadius = star.innerRadius();
  *
  * // set inner radius
- * ring.innerRadius(20);
+ * star.innerRadius(20);
  */
 Factory.addGetterSetter(Star, 'innerRadius', 0, getNumberValidator());
 
 /**
  * get/set outerRadius
- * @name Konva.Ring#outerRadius
+ * @name Konva.Star#outerRadius
  * @method
  * @param {Number} outerRadius
  * @returns {Number}
  * @example
  * // get inner radius
- * var outerRadius = ring.outerRadius();
+ * var outerRadius = star.outerRadius();
  *
  * // set inner radius
- * ring.outerRadius(20);
+ * star.outerRadius(20);
  */
 
 Factory.addGetterSetter(Star, 'outerRadius', 0, getNumberValidator());

src/shapes/TextPath.ts

@@ -627,7 +627,7 @@ Factory.addGetterSetter(TextPath, 'fontStyle', NORMAL);
 
 /**
  * get/set horizontal align of text.  Can be 'left', 'center', 'right' or 'justify'
- * @name Konva.Text#align
+ * @name Konva.TextPath#align
  * @method
  * @param {String} align
  * @returns {String}

src/shapes/Transformer.ts

@@ -298,7 +298,7 @@ export class Transformer extends Group {
         }
 
         this._resetTransformCache();
-        if (!this._transforming) {
+        if (!this._transforming && !this.isDragging()) {
           this.update();
         }
       };

test/functional/DragAndDropEvents-test.js

@@ -73,7 +73,7 @@ suite('DragAndDropEvents', function () {
 
     setTimeout(function () {
       stage.simulateMouseMove({
-        x: 100,
+        x: 385,
         y: 98,
       });
 
@@ -85,7 +85,7 @@ suite('DragAndDropEvents', function () {
       assert(!dragEnd, 'dragend event should not have been triggered 10');
 
       stage.simulateMouseUp({
-        x: 100,
+        x: 385,
         y: 98,
       });
 
@@ -107,7 +107,7 @@ suite('DragAndDropEvents', function () {
 
       assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
       assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
-      assert.equal(circle.getX(), 100, 'circle x should be 100');
+      assert.equal(circle.getX(), 385, 'circle x should be 100');
       assert.equal(circle.getY(), 100, 'circle y should be 100');
 
       showHit(layer);

test/unit/DragAndDrop-test.js

@@ -402,19 +402,19 @@ suite('DragAndDrop', function () {
 
     setTimeout(function () {
       assert.equal(stage.isDragging(), true);
-
       stage.simulateMouseUp({
         x: stage.width() / 2 - 50,
         y: stage.height() / 2,
       });
+      setTimeout(function () {
+        var shape = layer.getIntersection({
+          x: stage.width() / 2 + 5,
+          y: stage.height() / 2,
+        });
 
-      var shape = layer.getIntersection({
-        x: stage.width() / 2 + 5,
-        y: stage.height() / 2,
-      });
-
-      assert.equal(shape, circle);
-      done();
+        assert.equal(shape, circle);
+        done();
+      }, 100);
     }, 50);
   });
 

test/unit/shapes/Text-test.js

@@ -1214,6 +1214,37 @@ suite('Text', function () {
     layer.draw();
   });
 
+  test.skip('we should be able to clip underline by group', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group({
+      clipX: 10,
+      clipY: 10,
+      clipWidth: 100,
+      clipHeight: 27,
+    });
+    layer.add(group);
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      width: 100,
+      text: 'Hello World',
+      textDecoration: ['underline'],
+      fontSize: 40,
+    });
+    group.add(text);
+
+    layer.draw();
+
+    console.log(layer.getContext().getTrace());
+
+    // assert.equal(layer.getContext().getTrace(), trace);
+    throw 1;
+  });
+
   test('image gradient for text', function (done) {
     Konva.pixelRatio = 1;
     var imageObj = new Image();

test/unit/shapes/Transformer-test.js

@@ -4396,4 +4396,28 @@ suite('Transformer', function () {
     });
     assert.equal(callCount, 1);
   });
+
+  // TODO: what can we test here?
+  test('performance check - drag several nodes', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    for (var i = 0; i < 500; i++) {
+      var shape = new Konva.Circle({
+        x: 100,
+        y: 100,
+        radius: 50,
+        fill: 'red',
+        draggable: true,
+      });
+      layer.add(shape);
+    }
+    var shapes = layer.find('Circle').toArray();
+    var tr = new Konva.Transformer({
+      nodes: shapes,
+    });
+    layer.add(tr);
+    layer.draw();
+  });
 });