update CHANGELOG with new version

CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### 8.4.1 (2023-01-19)
+
+- Typescript fixes for `container.add()` method. Ability to use empty array as argument. E.g. `container.add(...emptyArray)`
+- Fix underline for justify text
+- Fix gradient display on underline or line-through text
+
 ### 8.4.0 (2023-01-05)
 
 - Add support for `cornerRadius` for Konva.Image

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.4.0
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Thu Jan 05 2023
+   * Date: Thu Jan 19 2023
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -5355,22 +5355,27 @@
        * add a child and children into container
        * @name Konva.Container#add
        * @method
-       * @param {...Konva.Node} child
+       * @param {...Konva.Node} children
        * @returns {Container}
        * @example
        * layer.add(rect);
        * layer.add(shape1, shape2, shape3);
+       * // empty arrays are accepted, though each individual child must be defined
+       * layer.add(...shapes);
        * // remember to redraw layer if you changed something
        * layer.draw();
        */
       add(...children) {
-          if (arguments.length > 1) {
+          if (children.length === 0) {
-              for (var i = 0; i < arguments.length; i++) {
+              return this;
-                  this.add(arguments[i]);
+          }
+          if (children.length > 1) {
+              for (var i = 0; i < children.length; i++) {
+                  this.add(children[i]);
               }
               return this;
           }
-          var child = children[0];
+          const child = children[0];
           if (child.getParent()) {
               child.moveTo(this);
               return this;
@@ -13498,14 +13503,13 @@
                   spacesNumber = text.split(' ').length - 1;
                   oneWord = spacesNumber === 0;
                   lineWidth =
-                      align === JUSTIFY && lastLine && !oneWord
+                      align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
-                          ? totalWidth - padding * 2
-                          : width;
                   context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + Math.round(fontSize / 2));
                   // I have no idea what is real ratio
                   // just /15 looks good enough
                   context.lineWidth = fontSize / 15;
-                  context.strokeStyle = fill;
+                  const gradient = this._getLinearGradient();
+                  context.strokeStyle = gradient || fill;
                   context.stroke();
                   context.restore();
               }
@@ -13521,7 +13525,8 @@
                           : width;
                   context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY);
                   context.lineWidth = fontSize / 15;
-                  context.strokeStyle = fill;
+                  const gradient = this._getLinearGradient();
+                  context.strokeStyle = gradient || fill;
                   context.stroke();
                   context.restore();
               }
@@ -13627,7 +13632,8 @@
               normalizeFontFamily(this.fontFamily()));
       }
       _addTextLine(line) {
-          if (this.align() === JUSTIFY) {
+          const align = this.align();
+          if (align === JUSTIFY) {
               line = line.trim();
           }
           var width = this._getTextWidth(line);

src/Context.ts

@@ -322,13 +322,7 @@ export class Context {
    * @method
    * @name Konva.Context#arcTo
    */
-  arcTo(
+  arcTo(a0: number, a1: number, a2: number, a3: number, a4: number) {
-    a0: number,
-    a1: number,
-    a2: number,
-    a3: number,
-    a4: number
-  ) {
     this._context.arcTo(a0, a1, a2, a3, a4);
   }
   /**
@@ -359,12 +353,7 @@ export class Context {
    * @method
    * @name Konva.Context#clearRect
    */
-  clearRect(
+  clearRect(a0: number, a1: number, a2: number, a3: number) {
-    a0: number,
-    a1: number,
-    a2: number,
-    a3: number
-  ) {
     this._context.clearRect(a0, a1, a2, a3);
   }
   /**
@@ -401,12 +390,7 @@ export class Context {
    * @method
    * @name Konva.Context#createLinearGradient
    */
-  createLinearGradient(
+  createLinearGradient(a0: number, a1: number, a2: number, a3: number) {
-    a0: number,
-    a1: number,
-    a2: number,
-    a3: number
-  ) {
     return this._context.createLinearGradient(a0, a1, a2, a3);
   }
   /**
@@ -762,9 +746,12 @@ export class Context {
 }
 
 // supported context properties
-type CanvasContextProps = Pick<CanvasRenderingContext2D, typeof CONTEXT_PROPERTIES[number]>;
+type CanvasContextProps = Pick<
+  CanvasRenderingContext2D,
+  typeof CONTEXT_PROPERTIES[number]
+>;
 
-export interface Context extends CanvasContextProps { };
+export interface Context extends CanvasContextProps {}
 
 CONTEXT_PROPERTIES.forEach(function (prop) {
   Object.defineProperty(Context.prototype, prop, {

src/shapes/Text.ts

@@ -243,9 +243,7 @@ export class Text extends Shape<TextConfig> {
         spacesNumber = text.split(' ').length - 1;
         oneWord = spacesNumber === 0;
         lineWidth =
-          align === JUSTIFY && lastLine && !oneWord
+          align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
-            ? totalWidth - padding * 2
-            : width;
         context.lineTo(
           lineTranslateX + Math.round(lineWidth),
           translateY + lineTranslateY + Math.round(fontSize / 2)
@@ -254,7 +252,9 @@ export class Text extends Shape<TextConfig> {
         // I have no idea what is real ratio
         // just /15 looks good enough
         context.lineWidth = fontSize / 15;
-        context.strokeStyle = fill;
+
+        const gradient = this._getLinearGradient();
+        context.strokeStyle = gradient || fill;
         context.stroke();
         context.restore();
       }
@@ -273,7 +273,8 @@ export class Text extends Shape<TextConfig> {
           translateY + lineTranslateY
         );
         context.lineWidth = fontSize / 15;
-        context.strokeStyle = fill;
+        const gradient = this._getLinearGradient();
+        context.strokeStyle = gradient || fill;
         context.stroke();
         context.restore();
       }
@@ -390,7 +391,8 @@ export class Text extends Shape<TextConfig> {
     );
   }
   _addTextLine(line) {
-    if (this.align() === JUSTIFY) {
+    const align = this.align();
+    if (align === JUSTIFY) {
       line = line.trim();
     }
     var width = this._getTextWidth(line);

test/unit/Text-test.ts

@@ -719,10 +719,14 @@ describe('Text', function () {
 
     stage.add(layer);
 
-    var trace =
+    if (isNode) {
-      'fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();';
+      return;
+    }
 
-    assert.equal(layer.getContext().getTrace(true), trace);
+    var trace =
+      'fillText(c,69.696,77);fillStyle=#555;fillText(e,81.696,77);fillStyle=#555;fillText(s,94.482,77);fillStyle=#555;fillText(;,106.482,77);fillStyle=#555;fillText( ,117.549,77);fillStyle=#555;fillText(A,126.438,77);fillStyle=#555;fillText(n,140.776,77);fillStyle=#555;fillText(d,153.563,77);fillStyle=#555;fillText( ,168.525,77);fillStyle=#555;fillText(o,177.415,77);fillStyle=#555;fillText(n,190.201,77);fillStyle=#555;fillText(e,202.987,77);fillStyle=#555;fillText( ,217.95,77);fillStyle=#555;fillText(m,226.84,77);fillStyle=#555;fillText(a,243.502,77);fillStyle=#555;fillText(n,256.288,77);fillStyle=#555;fillText( ,271.251,77);fillStyle=#555;fillText(i,280.141,77);fillStyle=#555;fillText(n,288.251,77);fillStyle=#555;fillText( ,303.214,77);fillStyle=#555;fillText(h,312.104,77);fillStyle=#555;fillText(i,324.89,77);fillStyle=#555;fillText(s,333,77);restore();save();save();beginPath();moveTo(0,98);lineTo(245,98);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(), trace);
   });
 
   // ======================================================
@@ -895,6 +899,67 @@ describe('Text', function () {
     assert.equal(layer.getContext().getTrace(true), trace);
   });
 
+  it('text multi line with underline and strike and gradient', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello\nworld',
+      fontSize: 80,
+      // fill: 'red',
+      fillPriority: 'linear-gradient',
+      fillLinearGradientStartPoint: { x: 0, y: 0 },
+      fillLinearGradientEndPoint: { x: 100, y: 0 },
+      fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
+      fillAfterStrokeEnabled: true,
+      textDecoration: 'underline line-through',
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    if (isNode) {
+      return;
+    }
+    var trace =
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(169,80);stroke();restore();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();fillStyle=[object CanvasGradient];fillText(hello,0,40);restore();save();save();beginPath();moveTo(0,160);lineTo(191,160);stroke();restore();save();beginPath();moveTo(0,120);lineTo(191,120);stroke();restore();fillStyle=[object CanvasGradient];fillText(world,0,120);restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(), trace);
+  });
+
+  it('text multi line with underline and strike and gradient vertical', function () {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+
+    var text = new Konva.Text({
+      x: 10,
+      y: 10,
+      text: 'hello\nworld',
+      fontSize: 80,
+      // fill: 'red',
+      fillPriority: 'linear-gradient',
+      fillLinearGradientStartPoint: { x: 0, y: 0 },
+      fillLinearGradientEndPoint: { x: 0, y: 160 },
+      fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
+      fillAfterStrokeEnabled: true,
+      textDecoration: 'underline line-through',
+    });
+
+    layer.add(text);
+    stage.add(layer);
+
+    if (isNode) {
+      return;
+    }
+
+    var trace =
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(169,80);stroke();restore();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();fillStyle=[object CanvasGradient];fillText(hello,0,40);restore();save();save();beginPath();moveTo(0,160);lineTo(191,160);stroke();restore();save();beginPath();moveTo(0,120);lineTo(191,120);stroke();restore();fillStyle=[object CanvasGradient];fillText(world,0,120);restore();restore();';
+
+    assert.equal(layer.getContext().getTrace(), trace);
+  });
+
   // ======================================================
   it('change font size should update text data', function () {
     var stage = addStage();