update CHANGELOG with new version

CHANGELOG.md

@@ -3,11 +3,13 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 8.3.4 (2022-03-13)
+
 - Fix characters positions calculations on `fontFamily` changes in `TextPath`.
 - Remove rounding in `node.getClientRect()` results
 - Fix event object on `transformstart` event.
 
-## 8.3.3 (2022-03-23)
+## 8.3.3 (2022-02-23)
 
 - Fix `justify` align for text with several paragraphs.
 

konva.js

@@ -8,7 +8,7 @@
    * Konva JavaScript Framework v8.3.3
    * http://konvajs.org/
    * Licensed under the MIT
-   * Date: Tue Mar 08 2022
+   * Date: Sun Mar 13 2022
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -2599,15 +2599,26 @@
                   relativeTo: this.getParent(),
               });
           }
-          var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? rect.x : conf.x, y = conf.y === undefined ? rect.y : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
+          var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? Math.floor(rect.x) : conf.x, y = conf.y === undefined ? Math.floor(rect.y) : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
           if (!width || !height) {
               Util.error('Can not cache the node. Width or height of the node equals 0. Caching is skipped.');
               return;
           }
-          width += offset * 2;
+          // let's just add 1 pixel extra,
-          height += offset * 2;
+          // because using Math.floor on x, y position may shift drawing
+          width += offset * 2 + 1;
+          height += offset * 2 + 1;
           x -= offset;
           y -= offset;
+          // if (Math.floor(x) < x) {
+          //   x = Math.floor(x);
+          //   // width += 1;
+          // }
+          // if (Math.floor(y) < y) {
+          //   y = Math.floor(y);
+          //   // height += 1;
+          // }
+          // console.log({ x, y, width, height }, rect);
           var cachedSceneCanvas = new SceneCanvas({
               pixelRatio: pixelRatio,
               width: width,
@@ -6704,14 +6715,17 @@
                   tr.scale(this.fillPatternScaleX(), this.fillPatternScaleY());
                   tr.translate(-1 * this.fillPatternOffsetX(), -1 * this.fillPatternOffsetY());
                   const m = tr.getMatrix();
-                  pattern.setTransform({
+                  const matrix = typeof DOMMatrix === 'undefined'
-                      a: m[0],
+                      ? {
-                      b: m[1],
+                          a: m[0],
-                      c: m[2],
+                          b: m[1],
-                      d: m[3],
+                          c: m[2],
-                      e: m[4],
+                          d: m[3],
-                      f: m[5], // Vertical translation (moving).
+                          e: m[4],
-                  });
+                          f: m[5], // Vertical translation (moving).
+                      }
+                      : new DOMMatrix(m);
+                  pattern.setTransform(matrix);
               }
               return pattern;
           }
@@ -6933,20 +6947,13 @@
           const blurRadius = (applyShadow && this.shadowBlur()) || 0;
           const width = preWidth + blurRadius * 2;
           const height = preHeight + blurRadius * 2;
-          // if stroke, for example = 3
-          // we need to set x to 1.5, but after Math.round it will be 2
-          // as we have additional offset we need to increase width and height by 1 pixel
-          let roundingOffset = 0;
-          if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {
-              roundingOffset = 1;
-          }
           const rect = {
-              width: width + roundingOffset,
+              width: width,
-              height: height + roundingOffset,
+              height: height,
-              x: -Math.round(strokeWidth / 2 + blurRadius) +
+              x: -(strokeWidth / 2 + blurRadius) +
                   Math.min(shadowOffsetX, 0) +
                   fillRect.x,
-              y: -Math.round(strokeWidth / 2 + blurRadius) +
+              y: -(strokeWidth / 2 + blurRadius) +
                   Math.min(shadowOffsetY, 0) +
                   fillRect.y,
           };
@@ -9732,17 +9739,17 @@
           const angle = Konva$2.getAngle(clockwise ? 360 - this.angle() : this.angle());
           const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
           const boundRightRatio = 1;
-          const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), 3 * Math.PI / 2));
+          const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2));
           const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
           const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
           const boundRight = boundRightRatio * (outerRadius );
           const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
           const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
           return {
-              x: Math.round(boundLeft),
+              x: boundLeft,
-              y: Math.round(clockwise ? -1 * boundBottom : boundTop),
+              y: clockwise ? -1 * boundBottom : boundTop,
-              width: Math.round(boundRight - boundLeft),
+              width: boundRight - boundLeft,
-              height: Math.round(boundBottom - boundTop)
+              height: boundBottom - boundTop,
           };
       }
   }
@@ -10341,10 +10348,10 @@
               }
           }
           return {
-              x: Math.round(minX),
+              x: minX,
-              y: Math.round(minY),
+              y: minY,
-              width: Math.round(maxX - minX),
+              width: maxX - minX,
-              height: Math.round(maxY - minY),
+              height: maxY - minY,
           };
       }
       /**
@@ -13964,7 +13971,7 @@
               this._setTextData();
           });
           // update text data for certain attr changes
-          this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva', this._setTextData);
+          this.on('textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva fontFamilyChange.konva', this._setTextData);
           this._setTextData();
       }
       _sceneFunc(context) {
@@ -14386,10 +14393,10 @@
    * @param {Number} letterSpacing
    * @returns {Number}
    * @example
-   * // get line height
+   * // get letter spacing value
    * var letterSpacing = shape.letterSpacing();
    *
-   * // set the line height
+   * // set the letter spacing value
    * shape.letterSpacing(2);
    */
   Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
@@ -14400,10 +14407,10 @@
    * @param {String} textBaseline
    * @returns {String}
    * @example
-   * // get line height
+   * // get current text baseline
    * var textBaseline = shape.textBaseline();
    *
-   * // set the line height
+   * // set new text baseline
    * shape.textBaseline('top');
    */
   Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');

package.json

@@ -89,7 +89,7 @@
     "size-limit": "^7.0.8",
     "ts-mocha": "^9.0.2",
     "ts-node": "^9.1.1",
-    "typescript": "^4.6.2"
+    "typescript": "^4.5.5"
   },
   "keywords": [
     "canvas",

src/Shape.ts

@@ -257,14 +257,19 @@ export class Shape<
 
         const m = tr.getMatrix();
 
-        pattern.setTransform({
+        const matrix =
-          a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
+          typeof DOMMatrix === 'undefined'
-          b: m[1], // Vertical skewing.
+            ? {
-          c: m[2], // Horizontal skewing.
+                a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
-          d: m[3],
+                b: m[1], // Vertical skewing.
-          e: m[4], // Horizontal translation (moving).
+                c: m[2], // Horizontal skewing.
-          f: m[5], // Vertical translation (moving).
+                d: m[3],
-        });
+                e: m[4], // Horizontal translation (moving).
+                f: m[5], // Vertical translation (moving).
+              }
+            : new DOMMatrix(m);
+
+        pattern.setTransform(matrix);
       }
       return pattern;
     }
@@ -535,7 +540,6 @@ export class Shape<
     const width = preWidth + blurRadius * 2;
     const height = preHeight + blurRadius * 2;
 
-
     const rect = {
       width: width,
       height: height,

src/index-node.ts

@@ -4,6 +4,8 @@ import * as Canvas from 'canvas';
 
 const canvas = Canvas['default'] || Canvas;
 
+global.DOMMatrix = canvas.DOMMatrix;
+
 const isNode = typeof global.document === 'undefined';
 
 if (isNode) {

test/unit/Text-test.ts

@@ -1379,16 +1379,19 @@ describe('Text', function () {
       ctx.textBaseline = 'middle';
 
       var grd = ctx.createPattern(imageObj, 'repeat');
-      if (isBrowser) {
+      const matrix =
-        grd.setTransform({
+        typeof DOMMatrix === 'undefined'
-          a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
+          ? {
-          b: 0, // Vertical skewing.
+              a: 0.5, // Horizontal scaling. A value of 1 results in no scaling.
-          c: 0, // Horizontal skewing.
+              b: 0, // Vertical skewing.
-          d: 0.5, // Vertical scaling. A value of 1 results in no scaling.
+              c: 0, // Horizontal skewing.
-          e: 0, // Horizontal translation (moving).
+              d: 0.5,
-          f: 0, // Vertical translation (moving).
+              e: 0, // Horizontal translation (moving).
-        });
+              f: 0, // Vertical translation (moving).
-      }
+            }
+          : new DOMMatrix([0.5, 0, 0, 0.5, 0, 0]);
+
+      grd.setTransform(matrix);
 
       ctx.fillStyle = grd;