update CHANGELOG with new version

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Not released:
 
+## 4.0.6  - 2019-08-31
+
+* Fix fillPatternScale for text
+
 ## 4.0.5  - 2019-08-17
 
 * Fix `dragstart` flow when `node.startDrag()` is called.

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v4.0.5
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Aug 22 2019
+   * Date: Sat Aug 31 2019
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2035,16 +2035,13 @@
           shape._fillFunc(this);
       };
       SceneContext.prototype._fillPattern = function (shape) {
-          var fillPatternX = shape.getFillPatternX(), fillPatternY = shape.getFillPatternY(), fillPatternScaleX = shape.getFillPatternScaleX(), fillPatternScaleY = shape.getFillPatternScaleY(), 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();
           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);
           }
@@ -5943,7 +5940,7 @@
           setPointerCapture(pointerId, this);
       };
       Stage.prototype.releaseCapture = function (pointerId) {
-          releaseCapture(pointerId);
+          releaseCapture(pointerId, this);
       };
       /**
        * returns a {@link Konva.Collection} of layers
@@ -7002,7 +6999,7 @@
           shapes[key] = _this;
           _this.on('shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearHasShadowCache);
           _this.on('shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva', _clearGetShadowRGBACache);
-          _this.on('fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva', _clearFillPatternCache);
+          _this.on('fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva', _clearFillPatternCache);
           _this.on('fillPriorityChange.konva fillLinearGradientColorStopsChange.konva fillLinearGradientStartPointXChange.konva fillLinearGradientStartPointYChange.konva fillLinearGradientEndPointXChange.konva fillLinearGradientEndPointYChange.konva', _clearLinearGradientCache);
           _this.on('fillPriorityChange.konva fillRadialGradientColorStopsChange.konva fillRadialGradientStartPointXChange.konva fillRadialGradientStartPointYChange.konva fillRadialGradientEndPointXChange.konva fillRadialGradientEndPointYChange.konva fillRadialGradientStartRadiusChange.konva fillRadialGradientEndRadiusChange.konva', _clearRadialGradientCache);
           return _this;
@@ -7054,7 +7051,17 @@
       Shape.prototype.__getFillPattern = function () {
           if (this.fillPatternImage()) {
               var ctx = getDummyContext();
-              return ctx.createPattern(this.fillPatternImage(), this.fillPatternRepeat() || 'repeat');
+              var pattern = ctx.createPattern(this.fillPatternImage(), this.fillPatternRepeat() || 'repeat');
+              pattern.setTransform({
+                  a: this.fillPatternScaleX(),
+                  b: 0,
+                  c: 0,
+                  d: this.fillPatternScaleY(),
+                  e: 0,
+                  f: 0 // Vertical translation (moving).
+              });
+              // pattern.setTransform
+              return pattern;
           }
       };
       Shape.prototype._getLinearGradient = function () {
@@ -7430,7 +7437,7 @@
           setPointerCapture(pointerId, this);
       };
       Shape.prototype.releaseCapture = function (pointerId) {
-          releaseCapture(pointerId);
+          releaseCapture(pointerId, this);
       };
       return Shape;
   }(Node));

src/Context.ts

@@ -664,8 +664,6 @@ export class SceneContext extends Context {
   _fillPattern(shape) {
     var fillPatternX = shape.getFillPatternX(),
       fillPatternY = shape.getFillPatternY(),
-      fillPatternScaleX = shape.getFillPatternScaleX(),
-      fillPatternScaleY = shape.getFillPatternScaleY(),
       fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),
       fillPatternOffsetX = shape.getFillPatternOffsetX(),
       fillPatternOffsetY = shape.getFillPatternOffsetY();
@@ -678,9 +676,6 @@ 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/Shape.ts

@@ -81,7 +81,7 @@ var linearGradient = 'linearGradient';
 var radialGradient = 'radialGradient';
 
 var dummyContext;
-function getDummyContext() {
+function getDummyContext(): CanvasRenderingContext2D {
   if (dummyContext) {
     return dummyContext;
   }
@@ -193,7 +193,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
     );
 
     this.on(
-      'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva',
+      'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva',
       _clearFillPatternCache
     );
 
@@ -261,10 +261,20 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
   __getFillPattern() {
     if (this.fillPatternImage()) {
       var ctx = getDummyContext();
-      return ctx.createPattern(
+      const pattern = ctx.createPattern(
         this.fillPatternImage(),
         this.fillPatternRepeat() || 'repeat'
       );
+      pattern.setTransform({
+        a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
+        b: 0, // Vertical skewing.
+        c: 0, // Horizontal skewing.
+        d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
+        e: 0, // Horizontal translation (moving).
+        f: 0 // Vertical translation (moving).
+      });
+      // pattern.setTransform
+      return pattern;
     }
   }
   _getLinearGradient() {
@@ -281,7 +291,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
 
       // build color stops
       for (var n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
       }
       return grd;
     }
@@ -308,7 +318,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
 
       // build color stops
       for (var n = 0; n < colorStops.length; n += 2) {
-        grd.addColorStop(colorStops[n], colorStops[n + 1]);
+        grd.addColorStop(colorStops[n] as number, colorStops[n + 1] as string);
       }
       return grd;
     }

test/unit/shapes/Text-test.js

@@ -1006,4 +1006,48 @@ suite('Text', function() {
     };
     imageObj.src = 'assets/darth-vader.jpg';
   });
+
+  test('image gradient for text with scale', function(done) {
+    Konva.pixelRatio = 1;
+    var imageObj = new Image();
+    imageObj.onload = function() {
+      var stage = addStage();
+      var layer = new Konva.Layer();
+
+      var text = new Konva.Text({
+        text: 'Hello, this is some good text',
+        fontSize: 30,
+        fillPatternImage: imageObj,
+        fillPatternScaleX: 0.5,
+        fillPatternScaleY: 0.5
+      });
+      layer.add(text);
+      stage.add(layer);
+
+      var canvas = createCanvas();
+      var ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = 'green';
+      ctx.font = 'normal normal 30px Arial';
+      ctx.textBaseline = 'middle';
+
+      var grd = ctx.createPattern(imageObj, 'repeat');
+      grd.setTransform({
+        a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
+        b: 0, // Vertical skewing.
+        c: 0, // Horizontal skewing.
+        d: 0.5, // Vertical scaling. A value of 1 results in no scaling.
+        e: 0, // Horizontal translation (moving).
+        f: 0 // Vertical translation (moving).
+      });
+      ctx.fillStyle = grd;
+
+      ctx.fillText(text.text(), 0, 15);
+
+      compareLayerAndCanvas(layer, canvas, 200);
+      delete Konva.pixelRatio;
+      done();
+    };
+    imageObj.src = 'assets/darth-vader.jpg';
+  });
 });