fix freeze on ios. close #1843

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",

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);
 }

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>