Merge branch 'konvajs:master' into master

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 9.3.16 (2024-10-21)
+
+- Fix freeze on ios on touch cancel event
+- Typescript fixes
+
 ## 9.3.15 (2024-09-09)
 
 - fix letter spacing for Hindi text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "konva",
-  "version": "9.3.15",
+  "version": "9.3.16",
   "author": "Anton Lavrenov",
   "files": [
     "README.md",
@@ -20,7 +20,7 @@
     "test": "npm run test:browser && npm run test:node",
     "test:build": "parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
     "test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
-    "test:watch": "rm -rf ./.parcel-cache && parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/text-paths.html ./test/bunnies.html",
+    "test:watch": "rm -rf ./.parcel-cache && PARCEL_WORKERS=0  parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/text-paths.html ./test/bunnies.html",
     "test:node": "ts-mocha -r ./test/node-global-setup.mjs -p ./test/tsconfig.json test/unit/**/*.ts --exit && npm run test:import",
     "tsc": "tsc --removeComments",
     "rollup": "rollup -c --bundleConfigAsCjs",
@@ -81,9 +81,6 @@
     "parcel": "2.10.1",
     "process": "^0.11.10",
     "rollup": "^4.9.1",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-typescript2": "^0.36.0",
     "size-limit": "^11.0.1",
     "ts-mocha": "^10.0.0",

rollup.config.cjs

@@ -1,5 +1,4 @@
 // import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
 import typescript from 'rollup-plugin-typescript2';
 
 const pkg = require('./package.json');

src/Animation.ts

@@ -212,7 +212,7 @@ export class Animation {
       }
     }
 
-    for (let key in layerHash) {
+    for (const key in layerHash) {
       if (!layerHash.hasOwnProperty(key)) {
         continue;
       }

src/BezierFunctions.ts

@@ -692,7 +692,6 @@ export const cValues = [
 export const binomialCoefficients = [[1], [1, 1], [1, 2, 1], [1, 3, 3, 1]];
 
 export const getCubicArcLength = (xs: number[], ys: number[], t: number) => {
-  let z: number;
   let sum: number;
   let correctedT: number;
 
@@ -702,7 +701,7 @@ export const getCubicArcLength = (xs: number[], ys: number[], t: number) => {
 
   const n = 20;
 
-  z = t / 2;
+  const z = t / 2;
   sum = 0;
   for (let i = 0; i < n; i++) {
     correctedT = z * tValues[n][i] + z;

src/Canvas.ts

@@ -5,15 +5,15 @@ import { Factory } from './Factory';
 import { getNumberValidator } from './Validators';
 
 // calculate pixel ratio
-var _pixelRatio;
+let _pixelRatio;
 function getDevicePixelRatio() {
   if (_pixelRatio) {
     return _pixelRatio;
   }
-  var canvas = Util.createCanvasElement();
-  var context = canvas.getContext('2d') as any;
+  const canvas = Util.createCanvasElement();
+  const context = canvas.getContext('2d') as any;
   _pixelRatio = (function () {
-    var devicePixelRatio = Konva._global.devicePixelRatio || 1,
+    const devicePixelRatio = Konva._global.devicePixelRatio || 1,
       backingStoreRatio =
         context.webkitBackingStorePixelRatio ||
         context.mozBackingStorePixelRatio ||
@@ -55,9 +55,9 @@ export class Canvas {
   isCache = false;
 
   constructor(config: ICanvasConfig) {
-    var conf = config || {};
+    const conf = config || {};
 
-    var pixelRatio =
+    const pixelRatio =
       conf.pixelRatio || Konva.pixelRatio || getDevicePixelRatio();
 
     this.pixelRatio = pixelRatio;
@@ -86,7 +86,7 @@ export class Canvas {
     return this.pixelRatio;
   }
   setPixelRatio(pixelRatio) {
-    var previousRatio = this.pixelRatio;
+    const previousRatio = this.pixelRatio;
     this.pixelRatio = pixelRatio;
     this.setSize(
       this.getWidth() / previousRatio,
@@ -98,15 +98,15 @@ export class Canvas {
     this.width = this._canvas.width = width * this.pixelRatio;
     this._canvas.style.width = width + 'px';
 
-    var pixelRatio = this.pixelRatio,
+    const pixelRatio = this.pixelRatio,
       _context = this.getContext()._context;
     _context.scale(pixelRatio, pixelRatio);
   }
   setHeight(height) {
     // take into account pixel ratio
     this.height = this._canvas.height = height * this.pixelRatio;
     this._canvas.style.height = height + 'px';
-    var pixelRatio = this.pixelRatio,
+    const pixelRatio = this.pixelRatio,
       _context = this.getContext()._context;
     _context.scale(pixelRatio, pixelRatio);
   }

src/Container.ts

@@ -56,7 +56,7 @@ export abstract class Container<
     }
 
     const children = this.children || [];
-    var results: Array<ChildType> = [];
+    const results: Array<ChildType> = [];
     children.forEach(function (child) {
       if (filterFunc(child)) {
         results.push(child);
@@ -128,7 +128,7 @@ export abstract class Container<
       return this;
     }
     if (children.length > 1) {
-      for (var i = 0; i < children.length; i++) {
+      for (let i = 0; i < children.length; i++) {
         this.add(children[i]);
       }
       return this;
@@ -223,14 +223,14 @@ export abstract class Container<
   findOne<ChildNode extends Node = Node>(
     selector: string | Function
   ): ChildNode | undefined {
-    var result = this._generalFind<ChildNode>(selector, true);
+    const result = this._generalFind<ChildNode>(selector, true);
     return result.length > 0 ? result[0] : undefined;
   }
   _generalFind<ChildNode extends Node>(
     selector: string | Function,
     findOne: boolean
   ) {
-    var retArr: Array<ChildNode> = [];
+    const retArr: Array<ChildNode> = [];
 
     this._descendants((node) => {
       const valid = node._isMatch(selector);
@@ -265,7 +265,7 @@ export abstract class Container<
   }
   // extenders
   toObject() {
-    var obj = Node.prototype.toObject.call(this);
+    const obj = Node.prototype.toObject.call(this);
 
     obj.children = [];
 
@@ -283,7 +283,7 @@ export abstract class Container<
    * @param {Konva.Node} node
    */
   isAncestorOf(node: Node) {
-    var parent = node.getParent();
+    let parent = node.getParent();
     while (parent) {
       if (parent._id === this._id) {
         return true;
@@ -295,7 +295,7 @@ export abstract class Container<
   }
   clone(obj?: any) {
     // call super method
-    var node = Node.prototype.clone.call(this, obj);
+    const node = Node.prototype.clone.call(this, obj);
 
     this.getChildren().forEach(function (no) {
       node.add(no.clone());
@@ -316,7 +316,7 @@ export abstract class Container<
    * @returns {Array} array of shapes
    */
   getAllIntersections(pos) {
-    var arr: Shape[] = [];
+    const arr: Shape[] = [];
 
     this.find<Shape>('Shape').forEach((shape) => {
       if (shape.isVisible() && shape.intersects(pos)) {
@@ -344,20 +344,20 @@ export abstract class Container<
     this._requestDraw();
   }
   drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
-    var layer = this.getLayer()!,
+    const layer = this.getLayer()!,
       canvas = can || (layer && layer.getCanvas()),
       context = canvas && canvas.getContext(),
       cachedCanvas = this._getCanvasCache(),
       cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;
 
-    var caching = canvas && canvas.isCache;
+    const caching = canvas && canvas.isCache;
     if (!this.isVisible() && !caching) {
       return this;
     }
 
     if (cachedSceneCanvas) {
       context.save();
-      var m = this.getAbsoluteTransform(top).getMatrix();
+      const m = this.getAbsoluteTransform(top).getMatrix();
       context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
       this._drawCachedSceneCanvas(context);
       context.restore();
@@ -371,15 +371,15 @@ export abstract class Container<
       return this;
     }
 
-    var layer = this.getLayer()!,
+    const layer = this.getLayer()!,
       canvas = can || (layer && layer.hitCanvas),
       context = canvas && canvas.getContext(),
       cachedCanvas = this._getCanvasCache(),
       cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
 
     if (cachedHitCanvas) {
       context.save();
-      var m = this.getAbsoluteTransform(top).getMatrix();
+      const m = this.getAbsoluteTransform(top).getMatrix();
       context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
       this._drawCachedHitCanvas(context);
       context.restore();
@@ -389,7 +389,7 @@ export abstract class Container<
     return this;
   }
   _drawChildren(drawMethod, canvas, top, bufferCanvas?) {
-    var context = canvas && canvas.getContext(),
+    const context = canvas && canvas.getContext(),
       clipWidth = this.clipWidth(),
       clipHeight = this.clipHeight(),
       clipFunc = this.clipFunc(),
@@ -401,24 +401,24 @@ export abstract class Container<
 
     if (hasClip) {
       context.save();
-      var transform = this.getAbsoluteTransform(top);
-      var m = transform.getMatrix();
+      const transform = this.getAbsoluteTransform(top);
+      let m = transform.getMatrix();
       context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
       context.beginPath();
       let clipArgs;
       if (clipFunc) {
         clipArgs = clipFunc.call(this, context, this);
       } else {
-        var clipX = this.clipX();
-        var clipY = this.clipY();
+        const clipX = this.clipX();
+        const clipY = this.clipY();
         context.rect(clipX || 0, clipY || 0, clipWidth, clipHeight);
       }
       context.clip.apply(context, clipArgs);
       m = transform.copy().invert().getMatrix();
       context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
     }
 
-    var hasComposition =
+    const hasComposition =
       !selfCache &&
       this.globalCompositeOperation() !== 'source-over' &&
       drawMethod === 'drawScene';
@@ -448,24 +448,24 @@ export abstract class Container<
       relativeTo?: Container<Node>;
     } = {}
   ): IRect {
-    var skipTransform = config.skipTransform;
-    var relativeTo = config.relativeTo;
+    const skipTransform = config.skipTransform;
+    const relativeTo = config.relativeTo;
 
-    var minX, minY, maxX, maxY;
-    var selfRect = {
+    let minX, minY, maxX, maxY;
+    let selfRect = {
       x: Infinity,
       y: Infinity,
       width: 0,
       height: 0,
     };
-    var that = this;
+    const that = this;
     this.children?.forEach(function (child) {
       // skip invisible children
       if (!child.visible()) {
         return;
       }
 
-      var rect = child.getClientRect({
+      const rect = child.getClientRect({
         relativeTo: that,
         skipShadow: config.skipShadow,
         skipStroke: config.skipStroke,
@@ -491,10 +491,10 @@ export abstract class Container<
     });
 
     // if child is group we need to make sure it has visible shapes inside
-    var shapes = this.find('Shape');
-    var hasVisible = false;
-    for (var i = 0; i < shapes.length; i++) {
-      var shape = shapes[i];
+    const shapes = this.find('Shape');
+    let hasVisible = false;
+    for (let i = 0; i < shapes.length; i++) {
+      const shape = shapes[i];
       if (shape._isVisible(this)) {
         hasVisible = true;
         break;