more tests

fabricjs · Oct 12, 2024 · 61b78e6 · 61b78e6
1 parent 1f78cd8
commit 61b78e6
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/src/canvas/Canvas.spec.ts b/src/canvas/Canvas.spec.ts
@@ -1,8 +1,9 @@
 import { Canvas } from './Canvas';
+import { Rect } from '../shapes/Rect';
 
 describe('Canvas', () => {
   describe('touchStart', () => {
-    test('will prevent default to allow touch scrolling', () => {
+    test('will prevent default to not allow dom scrolling on canvas touch drag', () => {
       const canvas = new Canvas(undefined, {
         allowTouchScrolling: false,
       });
@@ -20,7 +21,7 @@ describe('Canvas', () => {
       canvas._onTouchStart(evt);
       expect(evt.preventDefault).toHaveBeenCalled();
     });
-    test('will not prevent default if allow touch scrolling is true', () => {
+    test('will not prevent default when allowTouchScrolling is true and there is no action', () => {
       const canvas = new Canvas(undefined, {
         allowTouchScrolling: true,
       });
@@ -38,5 +39,76 @@ describe('Canvas', () => {
       canvas._onTouchStart(evt);
       expect(evt.preventDefault).not.toHaveBeenCalled();
     });
+    test('will prevent default when allowTouchScrolling is true but we are drawing', () => {
+      const canvas = new Canvas(undefined, {
+        allowTouchScrolling: true,
+        isDrawingMode: true,
+      });
+      const touch = {
+        clientX: 10,
+        clientY: 0,
+        identifier: 1,
+        target: canvas.upperCanvasEl,
+      };
+      const evt = new TouchEvent('touchstart', {
+        touches: [touch],
+        changedTouches: [touch],
+      });
+      evt.preventDefault = jest.fn();
+      canvas._onTouchStart(evt);
+      expect(evt.preventDefault).toHaveBeenCalled();
+    });
+    test('will prevent default when allowTouchScrolling is true and we are dragging an object', () => {
+      const canvas = new Canvas(undefined, {
+        allowTouchScrolling: true,
+      });
+      const rect = new Rect({
+        width: 2000,
+        height: 2000,
+        left: -500,
+        top: -500,
+      });
+      canvas.add(rect);
+      canvas.setActiveObject(rect);
+      const touch = {
+        clientX: 10,
+        clientY: 0,
+        identifier: 1,
+        target: canvas.upperCanvasEl,
+      };
+      const evt = new TouchEvent('touchstart', {
+        touches: [touch],
+        changedTouches: [touch],
+      });
+      evt.preventDefault = jest.fn();
+      canvas._onTouchStart(evt);
+      expect(evt.preventDefault).toHaveBeenCalled();
+    });
+    test('will NOT prevent default when allowTouchScrolling is true and we just lost selection', () => {
+      const canvas = new Canvas(undefined, {
+        allowTouchScrolling: true,
+      });
+      const rect = new Rect({
+        width: 200,
+        height: 200,
+        left: 1000,
+        top: 1000,
+      });
+      canvas.add(rect);
+      canvas.setActiveObject(rect);
+      const touch = {
+        clientX: 10,
+        clientY: 0,
+        identifier: 1,
+        target: canvas.upperCanvasEl,
+      };
+      const evt = new TouchEvent('touchstart', {
+        touches: [touch],
+        changedTouches: [touch],
+      });
+      evt.preventDefault = jest.fn();
+      canvas._onTouchStart(evt);
+      expect(evt.preventDefault).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/canvas/StaticCanvasOptions.ts b/src/canvas/StaticCanvasOptions.ts
@@ -152,6 +152,9 @@ export interface StaticCanvasOptions
 
   /**
    * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas
+   * It gives PRIORITY to DOM scrolling, it doesn't make it always possible.
+   * If is true, when using a touch event on the canvas, the canvas will scroll if scroll is possible.
+   * If we are in drawing mode or if we are selecting an object the canvas preventDefault and so it won't scroll
    * @type Boolean
    * @default
    *