Merge branch 'master' into getClientRect-no-rounding

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) {