@ax-design/reveal-highlight 0.4.2 → 0.5.3

package/es/RevealStateManager.js

@@ -1,74 +1,100 @@
-import { RevealBoundaryStore } from './RevealBoundryStore.js';
-import { config } from './config.js';
-export class RevealStateManager {
-    constructor() {
-        this._currentHashId = 0;
-        this._storage = [];
-        this.requestedTraverseBoundaries = false;
-        this.cachedMouseX = -1;
-        this.cachedMouseY = -1;
-        this.pointerLeaveScheduled = false;
-        this.handlePointerLeave = () => {
-            if (this.pointerLeaveScheduled)
-                return;
-            this.pointerLeaveScheduled = true;
-            window.requestAnimationFrame(() => {
-                for (let i = 0; i < this._storage.length; i++) {
-                    this._storage[i].onPointerLeaveBoundary();
-                }
-                this.pointerLeaveScheduled = false;
-            });
-        };
-        this.handlePointerMove = (event) => {
-            this.cachedMouseX = event.clientX;
-            this.cachedMouseY = event.clientY;
-            if (!this.requestedTraverseBoundaries) {
-                window.requestAnimationFrame(this.traverseBoundaries);
-                this.requestedTraverseBoundaries = true;
-            }
-        };
-        this.traverseBoundaries = () => {
-            this.requestedTraverseBoundaries = false;
-            for (let i = 0; i < this._storage.length; i++) {
-                this._storage[i].onPointerMoveOnScreen(this.cachedMouseX, this.cachedMouseY);
-            }
-        };
-        this.newBoundary = ($el) => {
-            const hashId = this._currentHashId++;
-            const store = new RevealBoundaryStore(hashId, $el);
-            this._storage.push(store);
-            return store;
-        };
-        this.removeBoundary = (store) => {
-            this._storage = this._storage.filter((x) => x !== store);
-        };
-        if (config.borderDetectionMode === 'experimentalAutoFit') {
-            if (typeof Window === 'undefined')
-                return;
-            window.addEventListener('pointermove', this.handlePointerMove);
-            // This is for touch screen
-            // Window.pointerleave won't be triggered if the finger
-            // leave the screen, so we use pointer up here.
-            window.addEventListener('pointerup', (ev) => {
-                if (ev.pointerType !== 'mouse')
-                    this.handlePointerLeave();
-            });
-            // This is for desktop
-            // If the mouse leave the window, we need to terminate
-            // all animations and clean up the canvas.
-            window.addEventListener('pointerleave', (ev) => {
-                if (ev.pointerType === 'mouse')
-                    this.handlePointerLeave();
-            });
-            // Handles boundary conditions such as the user scrolling
-            // the page, dragging the image, which can cause mouse events
-            // to fail, when Reveal should disappear to prevent the 
-            // image from getting stuck.
-            window.addEventListener('pointercancel', (ev) => {
-                console.log('pointer cancel');
-                this.handlePointerLeave();
-            });
-        }
-    }
-}
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+import { config } from './config.js';
+export class RevealStateManager {
+    constructor() {
+        this._currentHashId = 0;
+        this._storage = [];
+        this.requestedTraverseBoundaries = false;
+        this.cachedMouseX = -1;
+        this.cachedMouseY = -1;
+        this.touchScrolling = false;
+        this.pointerLeaveScheduled = false;
+        this.handlePointerLeave = () => {
+            if (this.pointerLeaveScheduled)
+                return;
+            this.pointerLeaveScheduled = true;
+            window.requestAnimationFrame(() => {
+                for (let i = 0; i < this._storage.length; i++) {
+                    this._storage[i].onPointerLeaveBoundary();
+                }
+                this.pointerLeaveScheduled = false;
+            });
+        };
+        this.handlePointerMove = (event) => {
+            this.cachedMouseX = event.clientX;
+            this.cachedMouseY = event.clientY;
+            if (!this.requestedTraverseBoundaries) {
+                window.requestAnimationFrame(this.traverseBoundaries);
+                this.requestedTraverseBoundaries = true;
+            }
+        };
+        this.traverseBoundaries = () => {
+            this.requestedTraverseBoundaries = false;
+            for (let i = 0; i < this._storage.length; i++) {
+                this._storage[i].onPointerMoveOnScreen(this.cachedMouseX, this.cachedMouseY);
+                if (this.touchScrolling)
+                    this._storage[i].anchorPointer();
+            }
+        };
+        this.newBoundary = ($el) => {
+            const hashId = this._currentHashId++;
+            const store = new RevealBoundaryStore(hashId, $el);
+            this._storage.push(store);
+            return store;
+        };
+        this.removeBoundary = (store) => {
+            this._storage = this._storage.filter((x) => x !== store);
+        };
+        if (config.borderDetectionMode === 'experimentalAutoFit') {
+            if (typeof Window === 'undefined')
+                return;
+            window.addEventListener('pointermove', this.handlePointerMove);
+            // A finger landing on the screen without moving fires no `pointermove`.
+            window.addEventListener('pointerdown', this.handlePointerMove);
+            // This is for touch screen
+            // Window.pointerleave won't be triggered if the finger
+            // leave the screen, so we use pointer up here.
+            window.addEventListener('pointerup', (ev) => {
+                if (ev.pointerType !== 'mouse')
+                    this.handlePointerLeave();
+            });
+            // This is for desktop
+            // If the mouse leave the window, we need to terminate
+            // all animations and clean up the canvas.
+            window.addEventListener('pointerleave', (ev) => {
+                if (ev.pointerType === 'mouse')
+                    this.handlePointerLeave();
+            });
+            // Handles boundary conditions such as the user scrolling
+            // the page, dragging the image, which can cause mouse events
+            // to fail, when Reveal should disappear to prevent the 
+            // image from getting stuck.
+            window.addEventListener('pointercancel', (ev) => {
+                // The browser took over the touch for scrolling, keep following
+                // the finger with touch events until it leaves the screen.
+                if (ev.pointerType === 'touch') {
+                    this.touchScrolling = true;
+                    for (let i = 0; i < this._storage.length; i++) {
+                        this._storage[i].anchorPointer();
+                    }
+                }
+                else {
+                    this.handlePointerLeave();
+                }
+            });
+            window.addEventListener('touchmove', (ev) => {
+                if (this.touchScrolling && ev.touches.length)
+                    this.handlePointerMove(ev.touches[0]);
+            }, { passive: true });
+            const handleTouchEnd = (ev) => {
+                if (!this.touchScrolling || ev.touches.length)
+                    return;
+                this.touchScrolling = false;
+                this.handlePointerLeave();
+            };
+            window.addEventListener('touchend', handleTouchEnd, { passive: true });
+            window.addEventListener('touchcancel', handleTouchEnd, { passive: true });
+        }
+    }
+}
 //# sourceMappingURL=RevealStateManager.js.map

package/es/RevealStateManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"RevealStateManager.js","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RevealStateManager.js","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"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"}

package/es/SvgConfig.d.ts

@@ -1,17 +1,17 @@
-import { RevealBoundaryStore } from './RevealBoundryStore.js';
-import type { CachedRevealPath } from './utils/types.js';
-import { BaseConfig } from './BaseConfig.js';
-export declare class SvgConfig extends BaseConfig<SVGSVGElement> {
-    protected cachedImg: CachedRevealPath;
-    constructor(store: RevealBoundaryStore, $svg: SVGSVGElement, $container: HTMLElement);
-    updateCachedBitmap: () => void;
-    updateCachedReveal: () => void;
-    private updateAnimateGrd;
-    private updateGradientPosition;
-    private drawShape;
-    syncSizeToElement: (x: SVGSVGElement) => void;
-    clear: (forAnimation: boolean) => void;
-    private internalClear;
-    paint: (skipSamePointerPositionCheck?: boolean | undefined) => boolean;
-}
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+import type { CachedRevealPath } from './utils/types.js';
+import { BaseConfig } from './BaseConfig.js';
+export declare class SvgConfig extends BaseConfig<SVGSVGElement> {
+    protected cachedImg: CachedRevealPath;
+    constructor(store: RevealBoundaryStore, $svg: SVGSVGElement, $container: HTMLElement);
+    updateCachedBitmap: () => void;
+    updateCachedReveal: () => void;
+    private updateAnimateGrd;
+    private updateGradientPosition;
+    private drawShape;
+    syncSizeToElement: (x: SVGSVGElement) => void;
+    clear: (forAnimation: boolean) => void;
+    private internalClear;
+    paint: (skipSamePointerPositionCheck?: boolean | undefined) => boolean;
+}
 //# sourceMappingURL=SvgConfig.d.ts.map