From 5cdde09fb533c45582d98fe62be1abd0f23f108a Mon Sep 17 00:00:00 2001
From: lavrton <lavrton@gmail.com>
Date: Mon, 21 Oct 2024 18:11:22 -0500
Subject: [PATCH] fix freeze on ios. close #1843

---
 package.json       |  2 +-
 src/DragAndDrop.ts |  3 +++
 test/sandbox.html  | 27 +++++++++++++--------------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 1bc9a3584..2d07cd09f 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/DragAndDrop.ts b/src/DragAndDrop.ts
index 073577443..4bed333e5 100644
--- a/src/DragAndDrop.ts
+++ b/src/DragAndDrop.ts
@@ -161,10 +161,13 @@ export const DD = {
 if (Konva.isBrowser) {
   window.addEventListener('mouseup', DD._endDragBefore, true);
   window.addEventListener('touchend', DD._endDragBefore, true);
+  // add touchcancel to fix this: https://github.com/konvajs/konva/issues/1843
+  window.addEventListener('touchcancel', DD._endDragBefore, true);
 
   window.addEventListener('mousemove', DD._drag);
   window.addEventListener('touchmove', DD._drag);
 
   window.addEventListener('mouseup', DD._endDragAfter, false);
   window.addEventListener('touchend', DD._endDragAfter, false);
+  window.addEventListener('touchcancel', DD._endDragAfter, false);
 }
diff --git a/test/sandbox.html b/test/sandbox.html
index a1d11e272..2b17ce672 100644
--- a/test/sandbox.html
+++ b/test/sandbox.html
@@ -44,28 +44,27 @@
       var layer = new Konva.Layer();
       stage.add(layer);
 
-      var text = new Konva.Text({
+      var rect = new Konva.Rect({
         x: 10,
         y: 10,
-        text: 'Simple Text',
-        fontSize: 100,
-        fontFamily: 'Calibri',
+        width: 100,
+        height: 100,
         fill: 'green',
-        textDecoration: 'underline line-through',
         draggable: true,
       });
-      layer.add(text);
+      layer.add(rect);
 
-      var tr = new Konva.Transformer({
-        nodes: [text],
+      window.addEventListener('touchend', () => {
+        console.log('touchend');
       });
-      layer.add(tr);
-
-      tr.on('transformstart', () => {
-        console.log('transform start');
+      window.addEventListener('touchcancel', () => {
+        console.log('touchcancel');
+      });
+      window.addEventListener('lostpointercapture', () => {
+        console.log('lostpointercapture');
       });
-      tr.on('transformend', () => {
-        console.log('transform end');
+      window.addEventListener('focusout', () => {
+        console.log('focusout');
       });
     </script>
   </body>