better stage drag performance

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 7.0.6
+
+* Better performance for stage dragging
+
 ## 7.0.5
 
 * Fixes for `node.cache()` function.

gulpfile.js

@@ -1,6 +1,6 @@
 var gulp = require('gulp');
 var rename = require('gulp-rename');
-var uglify = require('gulp-uglify');
+var uglify = require('gulp-uglify-es').default;
 var replace = require('gulp-replace');
 var jsdoc = require('gulp-jsdoc3');
 var connect = require('gulp-connect');

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v7.0.5
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Sat Aug 08 2020
+   * Date: Fri Aug 21 2020
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3373,7 +3373,13 @@
           var layer = this.getLayer();
           var layerUnderDrag = false;
           DD._dragElements.forEach(function (elem) {
-              if (elem.dragStatus === 'dragging' && elem.node.getLayer() === layer) {
+              if (elem.dragStatus !== 'dragging') {
+                  return;
+              }
+              else if (elem.node.nodeType === 'Stage') {
+                  layerUnderDrag = true;
+              }
+              else if (elem.node.getLayer() === layer) {
                   layerUnderDrag = true;
               }
           });

package.json

@@ -34,6 +34,9 @@
     },
     {
       "path": "./lib/Core.js"
+    },
+    {
+      "path": "./konva.min.js"
     }
   ],
   "devDependencies": {

src/Node.ts

@@ -1050,9 +1050,14 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return this._isVisible(top) && this._isListening(top);
     }
     var layer = this.getLayer();
+
     var layerUnderDrag = false;
     DD._dragElements.forEach((elem) => {
-      if (elem.dragStatus === 'dragging' && elem.node.getLayer() === layer) {
+      if (elem.dragStatus !== 'dragging') {
+        return;
+      } else if (elem.node.nodeType === 'Stage') {
+        layerUnderDrag = true;
+      } else if (elem.node.getLayer() === layer) {
         layerUnderDrag = true;
       }
     });

test/unit/Layer-test.js

@@ -378,6 +378,42 @@ suite('Layer', function () {
     assert.equal(layer.shouldDrawHit(), true);
   });
 
+  // ======================================================
+  test('should not draw hit on stage drag', function () {
+    var stage = addStage();
+    stage.draggable(true);
+    var layer = new Konva.Layer();
+
+    var circle = new Konva.Circle({
+      x: stage.getWidth() / 2,
+      y: stage.getHeight() / 2,
+      radius: 70,
+      fill: 'red',
+      stroke: 'black',
+      strokeWidth: 4,
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    stage.simulateMouseDown({
+      x: circle.x(),
+      y: circle.y(),
+    });
+
+    stage.simulateMouseMove({
+      x: circle.x() + 10,
+      y: circle.y() + 10,
+    });
+    assert.equal(stage.isDragging(), true, 'dragging of stage is ok');
+    assert.equal(layer.shouldDrawHit(), false);
+
+    stage.simulateMouseUp({
+      x: 291,
+      y: 112,
+    });
+  });
+
   test('get/set layer size', function () {
     var stage = addStage();
     var layer = new Konva.Layer();

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "outDir": "lib",
-    "module": "es2015",
-    "target": "es5",
+    "module": "ES2015",
+    "target": "ES5",
     "noEmitOnError": true,
     "lib": ["es2015", "dom"]
     // "noImplicitAny": true