fix dragend bug, revert back text fill pattern fix

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.7
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Sep 03 2019
+   * Date: Thu Sep 05 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2035,13 +2035,16 @@
           shape._fillFunc(this);
       };
       SceneContext.prototype._fillPattern = function (shape) {
-          var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetY = shape.getFillPatternOffsetY();
+          var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()), fillPatternOffsetX = shape.getFillPatternOffsetX(), fillPatternOffsetY = shape.getFillPatternOffsetY(), fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleY = shape.getFillPatternScaleY();
           if (fillPatternX || fillPatternY) {
               this.translate(fillPatternX || 0, fillPatternY || 0);
           }
           if (fillPatternRotation) {
               this.rotate(fillPatternRotation);
           }
+          if (fillPatternScaleX || fillPatternScaleY) {
+              this.scale(fillPatternScaleX, fillPatternScaleY);
+          }
           if (fillPatternOffsetX || fillPatternOffsetY) {
               this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
           }
@@ -2421,8 +2424,8 @@
               if (elem.dragStatus === 'dragging') {
                   DD.justDragged = true;
                   Konva.listenClickTap = false;
+                  elem.dragStatus = 'stopped';
               }
-              elem.dragStatus = 'stopped';
               var drawNode = elem.node.getLayer() ||
                   (elem.node instanceof Konva['Stage'] && elem.node);
               if (drawNode) {
@@ -2438,6 +2441,8 @@
                       target: elem.node,
                       evt: evt
                   }, true);
+              }
+              if (elem.dragStatus !== 'dragging') {
                   DD._dragElements.delete(key);
               }
           });
@@ -7052,15 +7057,15 @@
           if (this.fillPatternImage()) {
               var ctx = getDummyContext();
               var pattern = ctx.createPattern(this.fillPatternImage(), this.fillPatternRepeat() || 'repeat');
-              pattern.setTransform({
+              // TODO: how to enable it? It doesn't work in FF...
-                  a: this.fillPatternScaleX(),
+              // pattern.setTransform({
-                  b: 0,
+              //   a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
-                  c: 0,
+              //   b: 0, // Vertical skewing.
-                  d: this.fillPatternScaleY(),
+              //   c: 0, // Horizontal skewing.
-                  e: 0,
+              //   d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
-                  f: 0 // Vertical translation (moving).
+              //   e: 0, // Horizontal translation (moving).
-              });
+              //   f: 0 // Vertical translation (moving).
-              // pattern.setTransform
+              // });
               return pattern;
           }
       };

src/Context.ts

@@ -666,7 +666,9 @@ export class SceneContext extends Context {
       fillPatternY = shape.getFillPatternY(),
       fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
       fillPatternOffsetX = shape.getFillPatternOffsetX(),
-      fillPatternOffsetY = shape.getFillPatternOffsetY();
+      fillPatternOffsetY = shape.getFillPatternOffsetY(),
+      fillPatternScaleX = shape.getFillPatternScaleX(),
+      fillPatternScaleY = shape.getFillPatternScaleY();
 
     if (fillPatternX || fillPatternY) {
       this.translate(fillPatternX || 0, fillPatternY || 0);
@@ -676,6 +678,10 @@ export class SceneContext extends Context {
       this.rotate(fillPatternRotation);
     }
 
+    if (fillPatternScaleX || fillPatternScaleY) {
+      this.scale(fillPatternScaleX, fillPatternScaleY);
+    }
+
     if (fillPatternOffsetX || fillPatternOffsetY) {
       this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
     }

src/DragAndDrop.ts

@@ -110,10 +110,9 @@ export const DD = {
       if (elem.dragStatus === 'dragging') {
         DD.justDragged = true;
         Konva.listenClickTap = false;
+        elem.dragStatus = 'stopped';
       }
 
-      elem.dragStatus = 'stopped';
-
       const drawNode =
         elem.node.getLayer() ||
         (elem.node instanceof Konva['Stage'] && elem.node);
@@ -134,6 +133,8 @@ export const DD = {
           },
           true
         );
+      }
+      if (elem.dragStatus !== 'dragging') {
         DD._dragElements.delete(key);
       }
     });

src/Shape.ts

@@ -265,15 +265,15 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
         this.fillPatternImage(),
         this.fillPatternRepeat() || 'repeat'
       );
-      pattern.setTransform({
+      // TODO: how to enable it? It doesn't work in FF...
-        a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
+      // pattern.setTransform({
-        b: 0, // Vertical skewing.
+      //   a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
-        c: 0, // Horizontal skewing.
+      //   b: 0, // Vertical skewing.
-        d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
+      //   c: 0, // Horizontal skewing.
-        e: 0, // Horizontal translation (moving).
+      //   d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
-        f: 0 // Vertical translation (moving).
+      //   e: 0, // Horizontal translation (moving).
-      });
+      //   f: 0 // Vertical translation (moving).
-      // pattern.setTransform
+      // });
       return pattern;
     }
   }

test/functional/DragAndDropEvents-test.js

@@ -474,4 +474,52 @@ suite('DragAndDropEvents', function() {
       done();
     }, 20);
   });
+
+  test('drag events should not trigger on a click', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer({
+      draggable: true
+    });
+
+    var circle = new Konva.Circle({
+      x: 70,
+      y: 70,
+      radius: 70,
+      fill: 'green',
+      stroke: 'black',
+      strokeWidth: 4,
+      name: 'myCircle',
+      draggable: true
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    var dragstart = 0;
+    circle.on('dragstart', function() {
+      dragstart += 1;
+    });
+
+    var dragmove = 0;
+    circle.on('dragmove', function() {
+      dragmove += 1;
+    });
+
+    var dragend = 0;
+    circle.on('dragend', function() {
+      dragend += 1;
+    });
+
+    var click = 0;
+    circle.on('click', function() {
+      click += 1;
+    });
+    stage.simulateMouseDown({ x: 70, y: 70 });
+    stage.simulateMouseUp({ x: 70, y: 70 });
+
+    assert.equal(click, 1, 'click triggered');
+    assert.equal(dragstart, 0, 'dragstart not triggered');
+    assert.equal(dragmove, 0, 'dragmove not triggered');
+    assert.equal(dragend, 0, 'dragend not triggered');
+  });
 });

test/unit/shapes/Text-test.js

@@ -1007,7 +1007,7 @@ suite('Text', function() {
     imageObj.src = 'assets/darth-vader.jpg';
   });
 
-  test('image gradient for text with scale', function(done) {
+  test.skip('image gradient for text with scale', function(done) {
     Konva.pixelRatio = 1;
     var imageObj = new Image();
     imageObj.onload = function() {