Merge branch 'konvajs:master' into master

CHANGELOG.md

@@ -3,6 +3,63 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+- ts fixes
+
+### 9.3.14 (2024-07-16)
+
+- Fix shadow + corner radius for images
+- Support `fillRule` for `Konva.Shape` on hit graph
+
+### 9.3.13 (2024-07-05)
+
+- Fallback for `Konva.Text.measureSize()` when 2d context doesn't return full data
+
+### 9.3.12 (2024-06-20)
+
+- Fix stopped transforming when it was triggered by multi-touch
+- Fix svg `path.getPointAtLength()` calculations in some cases
+- Fix `shape.getClientRect()` when any of parents is cached
+
+### 9.3.11 (2024-05-23)
+
+- Fix chrome clear canvas issue
+- Typescript fixes
+
+### 9.3.9 (2024-05-20)
+
+- Fix underline and line-through for `Konva.Text` when `Konva._fixTextRendering = true`
+
+### 9.3.8 (2024-05-15)
+
+- Fix click events fires on stage
+- Temporary `Konva._fixTextRendering = true` flag to fix inconsistent text
+
+### 9.3.6 (2024-03-04)
+
+- Fix transformer bug to enable hit graph back
+
+### 9.3.5 (2024-03-04)
+
+- `tranformer` event will be triggered AFTER all data of transformer is updated
+- Improve performance of transformer
+
+### 9.3.4 (2024-03-03)
+
+- Fix clipping with zero size
+
+### 9.3.3 (2024-02-09)
+
+- Another fix for exporting buffered shapes
+
+### 9.3.2 (2024-01-26)
+
+- Fix large memory usage on node export
+
+### 9.3.1 (2024-01-17)
+
+- Fix Pixelate filter work/fix caching size
+- Fix node export when large buffer canvas is used
+
 ### 9.3.0 (2023-12-20)
 
 - New attribute `rotateLineVisible` for `Konva.Transformer` to show/hide rotate line

README.md

@@ -64,6 +64,10 @@ Konva works in all modern mobile and desktop browsers. A browser need to be capa
 
 At the current moment `Konva` doesn't work in IE11 directly. To make it work you just need to provide some polyfills such as `Array.prototype.find`, `String.prototype.trimLeft`, `String.prototype.trimRight`, `Array.from`.
 
+# Debugging
+
+The Chrome inspector simply shows the canvas element.  To see the Konva objects and their details, install the konva-dev extension at https://github.com/konvajs/konva-devtool.
+
 # Loading and installing Konva
 
 Konva supports UMD loading. So you can use all possible variants to load the framework into your project:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "9.3.0",
+  "version": "9.3.14",
   "author": "Anton Lavrenov",
   "files": [
     "README.md",

src/Container.ts

@@ -307,6 +307,7 @@ export abstract class Container<
    * canvas and redraw every shape inside the container, it should only be used for special situations
    * because it performs very poorly.  Please use the {@link Konva.Stage#getIntersection} method if at all possible
    * because it performs much better
+   * nodes with listening set to false will not be detected
    * @method
    * @name Konva.Container#getAllIntersections
    * @param {Object} pos
@@ -342,7 +343,7 @@ export abstract class Container<
     });
     this._requestDraw();
   }
-  drawScene(can?: SceneCanvas, top?: Node) {
+  drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
     var layer = this.getLayer()!,
       canvas = can || (layer && layer.getCanvas()),
       context = canvas && canvas.getContext(),
@@ -361,7 +362,7 @@ export abstract class Container<
       this._drawCachedSceneCanvas(context);
       context.restore();
     } else {
-      this._drawChildren('drawScene', canvas, top);
+      this._drawChildren('drawScene', canvas, top, bufferCanvas);
     }
     return this;
   }
@@ -387,12 +388,14 @@ export abstract class Container<
     }
     return this;
   }
-  _drawChildren(drawMethod, canvas, top) {
+  _drawChildren(drawMethod, canvas, top, bufferCanvas?) {
     var context = canvas && canvas.getContext(),
       clipWidth = this.clipWidth(),
       clipHeight = this.clipHeight(),
       clipFunc = this.clipFunc(),
-      hasClip = (clipWidth && clipHeight) || clipFunc;
+      hasClip =
+        (typeof clipWidth === 'number' && typeof clipHeight === 'number') ||
+        clipFunc;
 
     const selfCache = top === this;
 
@@ -408,7 +411,7 @@ export abstract class Container<
       } else {
         var clipX = this.clipX();
         var clipY = this.clipY();
-        context.rect(clipX, clipY, clipWidth, clipHeight);
+        context.rect(clipX || 0, clipY || 0, clipWidth, clipHeight);
       }
       context.clip.apply(context, clipArgs);
       m = transform.copy().invert().getMatrix();
@@ -426,7 +429,7 @@ export abstract class Container<
     }
 
     this.children?.forEach(function (child) {
-      child[drawMethod](canvas, top);
+      child[drawMethod](canvas, top, bufferCanvas);
     });
     if (hasComposition) {
       context.restore();

src/Context.ts

@@ -58,6 +58,7 @@ var COMMA = ',',
     'putImageData',
     'quadraticCurveTo',
     'rect',
+    'roundRect',
     'restore',
     'rotate',
     'save',
@@ -586,6 +587,20 @@ export class Context {
   rect(x: number, y: number, width: number, height: number) {
     this._context.rect(x, y, width, height);
   }
+  /**
+   * roundRect function.
+   * @method
+   * @name Konva.Context#roundRect
+   */
+  roundRect(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radii: number | DOMPointInit | (number | DOMPointInit)[]
+  ) {
+    this._context.roundRect(x, y, width, height, radii);
+  }
   /**
    * putImageData function.
    * @method

src/Global.ts

@@ -90,6 +90,7 @@ export const Konva = {
   _mouseDblClickPointerId: null,
   _touchDblClickPointerId: null,
   _pointerDblClickPointerId: null,
+  _fixTextRendering: false,
 
   /**
    * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
@@ -155,6 +156,9 @@ export const Konva = {
   isDragging() {
     return Konva['DD'].isDragging;
   },
+  isTransforming() {
+    return Konva['Transformer']?.isTransforming();
+  },
   /**
    * returns whether or not a drag and drop operation is ready, but may
    *  not necessarily have started

src/Layer.ts

@@ -309,6 +309,7 @@ export class Layer extends Container<Group | Shape> {
    * get visible intersection shape. This is the preferred
    * method for determining if a point intersects a shape or not
    * also you may pass optional selector parameter to return ancestor of intersected shape
+   * nodes with listening set to false will not be detected
    * @method
    * @name Konva.Layer#getIntersection
    * @param {Object} pos
@@ -469,7 +470,10 @@ export class Layer extends Container<Group | Shape> {
   }
 
   destroy(): this {
-    Util.releaseCanvas(this.getNativeCanvasElement(), this.getHitCanvas()._canvas);
+    Util.releaseCanvas(
+      this.getNativeCanvasElement(),
+      this.getHitCanvas()._canvas
+    );
     return super.destroy();
   }
 

src/Node.ts

@@ -116,19 +116,19 @@ type NodeEventMap = GlobalEventHandlersEventMap & {
   [index: string]: any;
 };
 
-export interface KonvaEventObject<EventType> {
+export interface KonvaEventObject<EventType, This = Node> {
   type: string;
   target: Shape | Stage;
   evt: EventType;
   pointerId: number;
-  currentTarget: Node;
+  currentTarget: This;
   cancelBubble: boolean;
   child?: Node;
 }
 
 export type KonvaEventListener<This, EventType> = (
   this: This,
-  ev: KonvaEventObject<EventType>
+  ev: KonvaEventObject<EventType, This>
 ) => void;
 
 /**
@@ -343,10 +343,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       return;
     }
 
-    // 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;
+    // to avoid shift we need to increase size
+    // but we better to avoid it, for better filters flows
+    const extraPaddingX = Math.abs(Math.round(rect.x) - x) > 0.5 ? 1 : 0;
+    const extraPaddingY = Math.abs(Math.round(rect.y) - y) > 0.5 ? 1 : 0;
+    width += offset * 2 + extraPaddingX;
+    height += offset * 2 + extraPaddingY;
 
     x -= offset;
     y -= offset;
@@ -446,7 +449,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
     return this._cache.has(CANVAS);
   }
 
-  abstract drawScene(canvas?: Canvas, top?: Node): void;
+  abstract drawScene(canvas?: Canvas, top?: Node, bufferCanvas?: Canvas): void;
   abstract drawHit(canvas?: Canvas, top?: Node): void;
   /**
    * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
@@ -811,7 +814,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       var targets = evt.target.findAncestors(selector, true, stopNode);
       for (var i = 0; i < targets.length; i++) {
         evt = Util.cloneObject(evt);
-        evt.currentTarget = targets[i];
+        evt.currentTarget = targets[i] as any;
         handler.call(targets[i], evt as any);
       }
     });
@@ -1026,7 +1029,10 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }
     });
 
-    var dragSkip = !skipDragCheck && !Konva.hitOnDragEnabled && layerUnderDrag;
+    var dragSkip =
+      !skipDragCheck &&
+      !Konva.hitOnDragEnabled &&
+      (layerUnderDrag || Konva.isTransforming());
     return this.isListening() && this.isVisible() && !dragSkip;
   }
 
@@ -1929,6 +1935,15 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       }),
       context = canvas.getContext();
 
+    const bufferCanvas = new SceneCanvas({
+      // width and height already multiplied by pixelRatio
+      // so we need to revert that
+      // also increase size by x nd y offset to make sure content fits canvas
+      width: canvas.width / canvas.pixelRatio + Math.abs(x),
+      height: canvas.height / canvas.pixelRatio + Math.abs(y),
+      pixelRatio: canvas.pixelRatio,
+    });
+
     if (config.imageSmoothingEnabled === false) {
       context._context.imageSmoothingEnabled = false;
     }
@@ -1938,7 +1953,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
       context.translate(-1 * x, -1 * y);
     }
 
-    this.drawScene(canvas);
+    this.drawScene(canvas, undefined, bufferCanvas);
     context.restore();
 
     return canvas;
@@ -3140,6 +3155,8 @@ addGetterSetter(Node, 'listening', true, getBooleanValidator());
 /**
  * get/set listening attr.  If you need to determine if a node is listening or not
  *   by taking into account its parents, use the isListening() method
+ *   nodes with listening set to false will not be detected in hit graph
+ *   so they will be ignored in container.getIntersection() method
  * @name Konva.Node#listening
  * @method
  * @param {Boolean} listening Can be true, or false.  The default is true.