Merge branch 'master' into getClientRect-no-rounding

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/).
 
+- 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)
 
 - 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: Wed Feb 23 2022
+   * Date: Tue Mar 08 2022
    *
    * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
    * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -15001,9 +15001,9 @@
               x: pos.x - ap.x,
               y: pos.y - ap.y,
           };
-          this._fire('transformstart', { evt: e, target: this.getNode() });
+          this._fire('transformstart', { evt: e.evt, target: this.getNode() });
           this._nodes.forEach((target) => {
-              target._fire('transformstart', { evt: e, target });
+              target._fire('transformstart', { evt: e.evt, target });
           });
       }
       _handleMouseMove(e) {

package.json

@@ -60,11 +60,11 @@
     }
   ],
   "devDependencies": {
-    "@parcel/transformer-image": "2.0.0-beta.2",
-    "@size-limit/preset-big-lib": "^5.0.4",
-    "@types/mocha": "^9.0.0",
-    "canvas": "^2.8.0",
-    "chai": "4.3.4",
+    "@parcel/transformer-image": "2.3.2",
+    "@size-limit/preset-big-lib": "^7.0.8",
+    "@types/mocha": "^9.1.0",
+    "canvas": "^2.9.0",
+    "chai": "4.3.6",
     "filehound": "^1.17.5",
     "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
@@ -77,18 +77,19 @@
     "gulp-uglify": "^3.0.2",
     "gulp-uglify-es": "^3.0.0",
     "gulp-util": "^3.0.8",
-    "mocha": "8.4.0",
-    "mocha-headless-chrome": "^3.1.0",
-    "parcel": "2.0.0-beta.2",
-    "rollup": "^2.57.0",
+    "mocha": "9.2.2",
+    "mocha-headless-chrome": "^4.0.0",
+    "parcel": "2.3.2",
+    "process": "^0.11.10",
+    "rollup": "^2.70.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "size-limit": "^5.0.4",
-    "ts-mocha": "^8.0.0",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "size-limit": "^7.0.8",
+    "ts-mocha": "^9.0.2",
     "ts-node": "^9.1.1",
-    "typescript": "^4.4.3"
+    "typescript": "^4.6.2"
   },
   "keywords": [
     "canvas",

src/Node.ts

@@ -322,8 +322,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     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,
+      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;
@@ -335,12 +335,25 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return;
     }
 
-    width += offset * 2;
-    height += offset * 2;
+    // let's just add 1 pixel extra,
+    // 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,

src/Shape.ts

@@ -535,9 +535,10 @@ export class Shape<
     const width = preWidth + blurRadius * 2;
     const height = preHeight + blurRadius * 2;
 
+
     const rect = {
-      width,
-      height,
+      width: width,
+      height: height,
       x:
         -(strokeWidth / 2 + blurRadius) +
         Math.min(shadowOffsetX, 0) +

src/shapes/Arc.ts

@@ -62,26 +62,32 @@ export class Arc extends Shape<ArcConfig> {
   }
 
   getSelfRect() {
-    const innerRadius = this.innerRadius()
-    const outerRadius = this.outerRadius()
-    const clockwise = this.clockwise()
+    const innerRadius = this.innerRadius();
+    const outerRadius = this.outerRadius();
+    const clockwise = this.clockwise();
     const angle = Konva.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 boundBottomRatio = Math.sin(Math.min(angle,  Math.PI / 2))
-    const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius)
-    const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius)
-    const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius)
-    const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius)
+    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 boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
+    const boundLeft =
+      boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
+    const boundRight =
+      boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
+    const boundTop =
+      boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
+    const boundBottom =
+      boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
 
     return {
-      x: Math.round(boundLeft),
-      y: Math.round(clockwise ? -1 * boundBottom : boundTop),
-      width: Math.round(boundRight - boundLeft),
-      height: Math.round(boundBottom - boundTop)
-    }
+      x: boundLeft,
+      y: clockwise ? -1 * boundBottom : boundTop,
+      width: boundRight - boundLeft,
+      height: boundBottom - boundTop,
+    };
   }
 
   innerRadius: GetSet<number, this>;

src/shapes/Path.ts

@@ -188,10 +188,10 @@ export class Path extends Shape<PathConfig> {
       }
     }
     return {
-      x: Math.round(minX),
-      y: Math.round(minY),
-      width: Math.round(maxX - minX),
-      height: Math.round(maxY - minY),
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY,
     };
   }
   /**

src/shapes/TextPath.ts

@@ -98,7 +98,7 @@ export class TextPath extends Shape<TextPathConfig> {
 
     // update text data for certain attr changes
     this.on(
-      'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva',
+      'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva fontFamilyChange.konva',
       this._setTextData
     );
 
@@ -646,10 +646,10 @@ Factory.addGetterSetter(TextPath, 'align', 'left');
  * @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);
  */
 
@@ -662,10 +662,10 @@ Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
  * @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');

src/shapes/Transformer.ts

@@ -649,9 +649,9 @@ export class Transformer extends Group {
       x: pos.x - ap.x,
       y: pos.y - ap.y,
     };
-    this._fire('transformstart', { evt: e, target: this.getNode() });
+    this._fire('transformstart', { evt: e.evt, target: this.getNode() });
     this._nodes.forEach((target) => {
-      target._fire('transformstart', { evt: e, target });
+      target._fire('transformstart', { evt: e.evt, target });
     });
   }
   _handleMouseMove(e) {

test/unit/Arc-test.ts

@@ -5,6 +5,7 @@ import {
   Konva,
   createCanvas,
   compareLayerAndCanvas,
+  assertAlmostDeepEqual,
 } from './test-utils';
 
 describe('Arc', function () {
@@ -88,7 +89,7 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
-    assert.deepEqual(arc.getSelfRect(), {
+    assertAlmostDeepEqual(arc.getSelfRect(), {
       x: 0,
       y: 0,
       width: 80,
@@ -116,7 +117,7 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
-    assert.deepEqual(arc.getSelfRect(), {
+    assertAlmostDeepEqual(arc.getSelfRect(), {
       x: -80,
       y: -80,
       width: 160,
@@ -140,7 +141,7 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
-    assert.deepEqual(arc.getSelfRect(), {
+    assertAlmostDeepEqual(arc.getSelfRect(), {
       x: 0,
       y: -80,
       width: 80,
@@ -163,11 +164,11 @@ describe('Arc', function () {
     layer.add(arc);
     stage.add(layer);
 
-    assert.deepEqual(arc.getSelfRect(), {
+    assertAlmostDeepEqual(arc.getSelfRect(), {
       x: 25,
       y: 0,
       width: 55,
-      height: 69,
+      height: 69.282032302755,
     });
   });
 

test/unit/Node-cache-test.ts

@@ -70,8 +70,8 @@ describe('Caching', function () {
     context.fillStyle = 'green';
     context.fill();
 
-    compareLayerAndCanvas(layer, canvas, 200);
-    cloneAndCompareLayer(layer, 150);
+    compareLayerAndCanvas(layer, canvas, 200, 100);
+    cloneAndCompareLayer(layer, 150, 100);
   });
 
   it('cache rectangle with fill and stroke', function () {
@@ -831,7 +831,8 @@ describe('Caching', function () {
     group.cache();
 
     const canvas = group._cache.get('canvas').scene;
-    assert.equal(canvas.width, 105 * canvas.pixelRatio);
+    console.log(canvas.width / 2);
+    assert.equal(canvas.width, 106 * canvas.pixelRatio);
   });
 
   it('cache group with rectangle with fill and opacity', function () {
@@ -1468,7 +1469,7 @@ describe('Caching', function () {
     layer.draw();
     assert.equal(
       circle._cache.get('canvas').filter.width,
-      20 * circle._cache.get('canvas').filter.pixelRatio
+      21 * circle._cache.get('canvas').filter.pixelRatio
     );
     circle.filters([]);
     // TODO: should we clear cache canvas?

test/unit/RegularPolygon-test.ts

@@ -203,7 +203,7 @@ describe('RegularPolygon', function () {
 
     var box = poly.getClientRect();
 
-    assertAlmostEqual(box.width, 92.60254037844388);
-    assertAlmostEqual(box.height, 81.00000000000003);
+    assertAlmostEqual(box.width, 91.60254037844388);
+    assertAlmostEqual(box.height, 80.00000000000003);
   });
 });

test/unit/Transformer-test.ts

@@ -2535,6 +2535,7 @@ describe('Transformer', function () {
       callCount += 1;
       assert.equal(e.target, rect);
       assert.equal(tr.getActiveAnchor(), 'top-left');
+      assert.equal(typeof e.evt.clientX === 'number', true);
     });
 
     rect.on('transform', function (e) {

test/unit/test-utils.ts

@@ -384,3 +384,9 @@ export const assertAlmostEqual = function (val1, val2) {
     throw new Error('Expected ' + val1 + ' to be almost equal to ' + val2);
   }
 };
+
+export const assertAlmostDeepEqual = function (obj1, obj2) {
+  for (var key1 in obj1) {
+    assertAlmostEqual(obj1[key1], obj2[key1]);
+  }
+};