diff --git a/src/canvas/Canvas.spec.ts b/src/canvas/Canvas.spec.ts index 57aa3dc72f2..abd4c2da767 100644 --- 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 index f544088e82a..c999665fbf8 100644 --- 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 *