@ax-design/reveal-highlight 0.4.2 → 0.5.3

package/src/RevealBoundryStore.ts

@@ -1,291 +1,315 @@
-import { CanvasConfig } from './CanvasConfig.js';
-import { SvgConfig } from './SvgConfig.js';
-
-type Config = CanvasConfig | SvgConfig;
-
-export class RevealBoundaryStore {
-    id: number;
-    container: HTMLElement;
-
-    // The current cursor position relative to window.
-    clientX = -1000;
-    clientY = -1000;
-
-    // The cursor position of painted reveal effect.
-    paintedClientX = -1000;
-    paintedClientY = -1000;
-
-    mouseInBoundary = false;
-    canvasList: Config[] = [];
-
-    animationQueue: Config[] = [];
-    animationFrame: number | null = null;
-
-    mouseUpClientX = null;
-    mouseUpClientY = null;
-    mouseDownAnimateStartFrame = null;
-    mouseDownAnimateCurrentFrame = null;
-    mouseDownAnimateReleasedFrame = null;
-    mouseDownAnimateLogicFrame = null;
-    mousePressed = false;
-    mouseReleased = false;
-
-    maxRadius = -1;
-
-    requestedAnimationFrame = false;
-
-    constructor(id: number, $el: HTMLElement) {
-        this.id = id;
-        this.container = $el;
-    }
-
-    addReveal = ($element: HTMLCanvasElement | SVGElement, $container: HTMLElement) => {
-        let config: Config;
-        const elementType = Object.prototype.toString.call($element);
-
-        if (elementType === '[object HTMLCanvasElement]') {
-            config = new CanvasConfig(this, $element as HTMLCanvasElement, $container);
-        } else if (elementType === '[object SVGSVGElement]') {
-            config = new SvgConfig(this, $element as SVGSVGElement, $container);
-        } else {
-            throw new TypeError(`Unknown element type, got: ${elementType}, Canvas or SVG element expected.`)
-        }
-
-        config.cacheBoundingRect();
-        config.cacheCanvasPaintingStyle();
-        config.updateCachedBitmap();
-
-        this.canvasList.push(config);
-    };
-
-    removeReveal = ($el: HTMLCanvasElement | SVGElement) => {
-        this.canvasList = this.canvasList.filter((config) => {
-            return config && config.element !== $el;
-        });
-    };
-
-    updateMaxRadius = (x: number) => {
-        this.maxRadius = Math.max(x, this.maxRadius);
-    };
-
-    requestPaintAll = (cleanup?: boolean) => {
-        if (this.requestedAnimationFrame) return;
-        this.requestedAnimationFrame = true;
-
-        this.animationFrame = window.requestAnimationFrame((frame) => {
-            this.requestedAnimationFrame = false;
-            this.paintAll(cleanup ? -1 : frame, true);
-        });
-    };
-
-    updatePointerPosition = (x: number, y: number) => {
-        this.clientX = x;
-        this.clientY = y;
-
-        const boundingBox = this.container.getBoundingClientRect();
-
-        let mouseInBoundary = true;
-
-        if (x < boundingBox.left - this.maxRadius) mouseInBoundary = false;
-        if (x > boundingBox.right + this.maxRadius) mouseInBoundary = false;
-        if (y < boundingBox.top - this.maxRadius) mouseInBoundary = false;
-        if (y > boundingBox.bottom + this.maxRadius) mouseInBoundary = false;
-
-        this.mouseInBoundary = mouseInBoundary;
-    }
-
-    onPointerMoveOnScreen = (x: number, y: number) => {
-        this.updatePointerPosition(x, y);
-        if (!this.mouseInBoundary) return;
-        this.requestPaintAll();
-        return true;
-    };
-
-    /**
-     * Repaint all canvas while user's pointer has entered the boundary.
-     */
-    onPointerEnterBoundary = () => {
-        this.mouseInBoundary = true;
-
-        if (!this.animationFrame) {
-            this.requestPaintAll();
-        }
-    };
-
-    /**
-     * Clear all canvas while user's pointer leave the bounary.
-     */
-    onPointerLeaveBoundary = () => {
-        this.mouseInBoundary = false;
-        this.requestPaintAll(true);
-    };
-
-    /**
-     * The painting method that draw everything on your screen.
-     * @param frame current frame index, if this value is 0, it means all canvas
-     *  should be cleaned.
-     * @param skipSamePointerPositionCheck Literally. 
-     */
-    private paintAll = (frame: number, skipSamePointerPositionCheck?: boolean) => {
-        if (!skipSamePointerPositionCheck && !this.mouseInBoundary && this.animationQueue.length === 0) {
-            return;
-        }
-
-        // Animation duration checkup
-        for (let i = 0; i < this.animationQueue.length; i++) {
-            const config = this.animationQueue[i];
-
-            if (!frame || config.currentFrameId === frame) {
-                continue;
-            }
-
-            config.currentFrameId = frame;
-
-            // Initialize the animation parameter
-            if (config.mouseDownAnimateStartFrame === null) {
-                config.mouseDownAnimateStartFrame = frame;
-            }
-
-            // Calculate how long the animation has been playing
-            const relativeFrame = frame - config.mouseDownAnimateStartFrame;
-            config.mouseDownAnimateCurrentFrame = relativeFrame;
-
-            const speed = config.cachedStyle.pressAnimationSpeed;
-            const accelerateRate = config.cachedStyle.releaseAnimationAccelerateRate;
-
-            // We assume that Ripple is a one-way linear process from
-            // no diffusion to fully diffused, 
-            // and Logic Frame represents the progress of the animation
-            // in this process.
-            let unitLogicFrame = relativeFrame;
-            if (config.mouseReleased && config.mouseDownAnimateReleasedFrame) {
-                unitLogicFrame += (relativeFrame - config.mouseDownAnimateReleasedFrame) * accelerateRate;
-            }
-            config.mouseDownAnimateLogicFrame = unitLogicFrame / speed;
-
-            if (config.mouseDownAnimateLogicFrame > 1) {
-                // It will be cleaned later
-                config.cleanedUpForAnimation = true;
-            }
-        }
-
-        // Paint the canvas one by one
-        for (let i = 0; i < this.canvasList.length; i++) {
-            const config = this.canvasList[i];
-            config.currentFrameId = frame;
-
-            if (config.cleanedUpForAnimation) {
-                this.cleanUpAnimationUnit(config, false);
-                config.cleanedUpForAnimation = false;
-            } else {
-                const isPlayingAnimation = this.animationQueue.indexOf(config) === -1;
-
-                if (this.mouseInBoundary || isPlayingAnimation) {
-                    config.paint(skipSamePointerPositionCheck);
-                } else {
-                    config.clear(false);
-                }
-            }
-        }
-
-        this.paintedClientX = this.clientX;
-        this.paintedClientY = this.clientY;
-
-        if (this.mouseInBoundary || this.animationQueue.length !== 0) {
-            this.requestPaintAll();
-        } else {
-            this.animationFrame = null;
-        }
-    };
-
-    /**
-     * Clear all canvas.
-     */
-    clearAll = (forAnimation: boolean) => {
-        this.cleanupAnimation(forAnimation, true);
-    };
-
-    /**
-     * This is the effect while user pressed on the reveal highlight,
-     * the ripple start to spread slowly.
-     */
-    initializeAnimation = () => {
-        const config = this.canvasList.find((x) => x.mouseInCanvas());
-
-        if (!config) return;
-
-        if (!this.animationQueue.includes(config)) {
-            this.animationQueue.push(config);
-        }
-
-        config.mouseDownAnimateStartFrame = null;
-        config.mousePressed = true;
-        config.mouseReleased = false;
-    };
-
-    /**
-     * This is the effect while user released it's pointer, the spreading
-     * ripple animation will start to accelerate.
-     */
-    switchAnimation = () => {
-        for (let i = 0; i < this.animationQueue.length; i++) {
-            const config = this.animationQueue[i];
-
-            if (!config.mouseReleased) {
-                config.mouseReleased = true;
-                config.mouseDownAnimateReleasedFrame = config.mouseDownAnimateCurrentFrame;
-                config.mouseUpClientX = this.clientX;
-                config.mouseUpClientY = this.clientY;
-            }
-        }
-    };
-
-    /**
-     * Cleanup all animations.
-     * @param skipPaint Only cleanup data or also clean up the canvas
-     * @param forceClean Clean the canvas or not
-     */
-    cleanupAnimation = (skipPaint?: boolean, forceClean?: boolean) => {
-        for (let i = 0; i < this.animationQueue.length; i++) {
-            const config = this.animationQueue[i];
-
-            this.cleanUpAnimationUnit(config, skipPaint, forceClean);
-        }
-    }
-
-    /**
-     * Clean up the config of an animation, but the canvas won't cleaned up.
-     * @param config The config to be cleaned up.
-     * @param skipPaint Skip painting.
-     * @param forceClean Force clear the painting.
-     */
-    cleanUpAnimationUnit = (config: Config, skipPaint?: boolean, forceClean?: boolean) => {
-        config.mouseUpClientX = null;
-        config.mouseUpClientY = null;
-        config.mouseDownAnimateStartFrame = null;
-        config.mouseDownAnimateCurrentFrame = null;
-        config.mouseDownAnimateReleasedFrame = null;
-        config.mouseDownAnimateLogicFrame = null;
-        config.mousePressed = false;
-        config.mouseReleased = false;
-
-        const configIdx = this.animationQueue.indexOf(config);
-        if (configIdx > -1) {
-            this.animationQueue.splice(configIdx, 1);
-        }
-
-        if (!skipPaint) {
-            if (forceClean) {
-                config.clear(false);
-            } else if (this.mouseInBoundary) {
-                config.paint(true);
-            } else {
-                config.clear(true);
-            }
-        }
-    };
-
-    getRevealAnimationConfig = () => {
-        return this.canvasList.find((x) => x.mouseInCanvas()) || null;
-    };
-}
+import { CanvasConfig } from './CanvasConfig.js';
+import { SvgConfig } from './SvgConfig.js';
+
+type Config = CanvasConfig | SvgConfig;
+
+export class RevealBoundaryStore {
+    id: number;
+    container: HTMLElement;
+
+    // The current cursor position relative to window.
+    clientX = -1000;
+    clientY = -1000;
+
+    // The cursor position of painted reveal effect.
+    paintedClientX = -1000;
+    paintedClientY = -1000;
+
+    mouseInBoundary = false;
+    canvasList: Config[] = [];
+
+    animationQueue: Config[] = [];
+    animationFrame: number | null = null;
+
+    mouseUpClientX = null;
+    mouseUpClientY = null;
+    mouseDownAnimateStartFrame = null;
+    mouseDownAnimateCurrentFrame = null;
+    mouseDownAnimateReleasedFrame = null;
+    mouseDownAnimateLogicFrame = null;
+    mousePressed = false;
+    mouseReleased = false;
+
+    maxRadius = -1;
+
+    requestedAnimationFrame = false;
+
+    constructor(id: number, $el: HTMLElement) {
+        this.id = id;
+        this.container = $el;
+    }
+
+    addReveal = ($element: HTMLCanvasElement | SVGElement, $container: HTMLElement) => {
+        let config: Config;
+        const elementType = Object.prototype.toString.call($element);
+
+        if (elementType === '[object HTMLCanvasElement]') {
+            config = new CanvasConfig(this, $element as HTMLCanvasElement, $container);
+        } else if (elementType === '[object SVGSVGElement]') {
+            config = new SvgConfig(this, $element as SVGSVGElement, $container);
+        } else {
+            throw new TypeError(`Unknown element type, got: ${elementType}, Canvas or SVG element expected.`)
+        }
+
+        config.cacheBoundingRect();
+        config.cacheCanvasPaintingStyle();
+        config.updateCachedBitmap();
+
+        this.canvasList.push(config);
+    };
+
+    removeReveal = ($el: HTMLCanvasElement | SVGElement) => {
+        this.canvasList = this.canvasList.filter((config) => {
+            return config && config.element !== $el;
+        });
+    };
+
+    updateMaxRadius = (x: number) => {
+        this.maxRadius = Math.max(x, this.maxRadius);
+    };
+
+    requestPaintAll = (cleanup?: boolean) => {
+        if (this.requestedAnimationFrame) return;
+        this.requestedAnimationFrame = true;
+
+        this.animationFrame = window.requestAnimationFrame((frame) => {
+            this.requestedAnimationFrame = false;
+            this.paintAll(cleanup ? -1 : frame, true);
+        });
+    };
+
+    updatePointerPosition = (x: number, y: number) => {
+        this.clientX = x;
+        this.clientY = y;
+
+        const boundingBox = this.container.getBoundingClientRect();
+
+        let mouseInBoundary = true;
+
+        if (x < boundingBox.left - this.maxRadius) mouseInBoundary = false;
+        if (x > boundingBox.right + this.maxRadius) mouseInBoundary = false;
+        if (y < boundingBox.top - this.maxRadius) mouseInBoundary = false;
+        if (y > boundingBox.bottom + this.maxRadius) mouseInBoundary = false;
+
+        this.mouseInBoundary = mouseInBoundary;
+    }
+
+    // While the browser scrolls under a finger, the finger stays on the same
+    // spot of the content, but touch events are throttled (~200ms in Chromium).
+    // The pointer is kept relative to the container and re-derived on every
+    // frame, otherwise it stays still on the screen while the content moves.
+    private anchorOffsetX: number | null = null;
+    private anchorOffsetY: number | null = null;
+
+    anchorPointer = () => {
+        const boundingBox = this.container.getBoundingClientRect();
+        this.anchorOffsetX = this.clientX - boundingBox.left;
+        this.anchorOffsetY = this.clientY - boundingBox.top;
+    };
+
+    private followAnchor = () => {
+        if (this.anchorOffsetX === null || this.anchorOffsetY === null) return;
+        const boundingBox = this.container.getBoundingClientRect();
+        this.clientX = boundingBox.left + this.anchorOffsetX;
+        this.clientY = boundingBox.top + this.anchorOffsetY;
+    };
+
+    onPointerMoveOnScreen = (x: number, y: number) => {
+        this.updatePointerPosition(x, y);
+        if (!this.mouseInBoundary) return;
+        this.requestPaintAll();
+        return true;
+    };
+
+    /**
+     * Repaint all canvas while user's pointer has entered the boundary.
+     */
+    onPointerEnterBoundary = () => {
+        this.mouseInBoundary = true;
+
+        if (!this.animationFrame) {
+            this.requestPaintAll();
+        }
+    };
+
+    /**
+     * Clear all canvas while user's pointer leave the bounary.
+     */
+    onPointerLeaveBoundary = () => {
+        this.anchorOffsetX = null;
+        this.anchorOffsetY = null;
+        this.mouseInBoundary = false;
+        this.requestPaintAll(true);
+    };
+
+    /**
+     * The painting method that draw everything on your screen.
+     * @param frame current frame index, if this value is 0, it means all canvas
+     *  should be cleaned.
+     * @param skipSamePointerPositionCheck Literally. 
+     */
+    private paintAll = (frame: number, skipSamePointerPositionCheck?: boolean) => {
+        if (!skipSamePointerPositionCheck && !this.mouseInBoundary && this.animationQueue.length === 0) {
+            return;
+        }
+
+        this.followAnchor();
+
+        // Animation duration checkup
+        for (let i = 0; i < this.animationQueue.length; i++) {
+            const config = this.animationQueue[i];
+
+            if (!frame || config.currentFrameId === frame) {
+                continue;
+            }
+
+            config.currentFrameId = frame;
+
+            // Initialize the animation parameter
+            if (config.mouseDownAnimateStartFrame === null) {
+                config.mouseDownAnimateStartFrame = frame;
+            }
+
+            // Calculate how long the animation has been playing
+            const relativeFrame = frame - config.mouseDownAnimateStartFrame;
+            config.mouseDownAnimateCurrentFrame = relativeFrame;
+
+            const speed = config.cachedStyle.pressAnimationSpeed;
+            const accelerateRate = config.cachedStyle.releaseAnimationAccelerateRate;
+
+            // We assume that Ripple is a one-way linear process from
+            // no diffusion to fully diffused, 
+            // and Logic Frame represents the progress of the animation
+            // in this process.
+            let unitLogicFrame = relativeFrame;
+            if (config.mouseReleased && config.mouseDownAnimateReleasedFrame) {
+                unitLogicFrame += (relativeFrame - config.mouseDownAnimateReleasedFrame) * accelerateRate;
+            }
+            config.mouseDownAnimateLogicFrame = unitLogicFrame / speed;
+
+            if (config.mouseDownAnimateLogicFrame > 1) {
+                // It will be cleaned later
+                config.cleanedUpForAnimation = true;
+            }
+        }
+
+        // Paint the canvas one by one
+        for (let i = 0; i < this.canvasList.length; i++) {
+            const config = this.canvasList[i];
+            config.currentFrameId = frame;
+
+            if (config.cleanedUpForAnimation) {
+                this.cleanUpAnimationUnit(config, false);
+                config.cleanedUpForAnimation = false;
+            } else {
+                const isPlayingAnimation = this.animationQueue.indexOf(config) === -1;
+
+                if (this.mouseInBoundary || isPlayingAnimation) {
+                    config.paint(skipSamePointerPositionCheck);
+                } else {
+                    config.clear(false);
+                }
+            }
+        }
+
+        this.paintedClientX = this.clientX;
+        this.paintedClientY = this.clientY;
+
+        if (this.mouseInBoundary || this.animationQueue.length !== 0) {
+            this.requestPaintAll();
+        } else {
+            this.animationFrame = null;
+        }
+    };
+
+    /**
+     * Clear all canvas.
+     */
+    clearAll = (forAnimation: boolean) => {
+        this.cleanupAnimation(forAnimation, true);
+    };
+
+    /**
+     * This is the effect while user pressed on the reveal highlight,
+     * the ripple start to spread slowly.
+     */
+    initializeAnimation = () => {
+        const config = this.canvasList.find((x) => x.mouseInCanvas());
+
+        if (!config) return;
+
+        if (!this.animationQueue.includes(config)) {
+            this.animationQueue.push(config);
+        }
+
+        config.mouseDownAnimateStartFrame = null;
+        config.mousePressed = true;
+        config.mouseReleased = false;
+    };
+
+    /**
+     * This is the effect while user released it's pointer, the spreading
+     * ripple animation will start to accelerate.
+     */
+    switchAnimation = () => {
+        for (let i = 0; i < this.animationQueue.length; i++) {
+            const config = this.animationQueue[i];
+
+            if (!config.mouseReleased) {
+                config.mouseReleased = true;
+                config.mouseDownAnimateReleasedFrame = config.mouseDownAnimateCurrentFrame;
+                config.mouseUpClientX = this.clientX;
+                config.mouseUpClientY = this.clientY;
+            }
+        }
+    };
+
+    /**
+     * Cleanup all animations.
+     * @param skipPaint Only cleanup data or also clean up the canvas
+     * @param forceClean Clean the canvas or not
+     */
+    cleanupAnimation = (skipPaint?: boolean, forceClean?: boolean) => {
+        for (let i = 0; i < this.animationQueue.length; i++) {
+            const config = this.animationQueue[i];
+
+            this.cleanUpAnimationUnit(config, skipPaint, forceClean);
+        }
+    }
+
+    /**
+     * Clean up the config of an animation, but the canvas won't cleaned up.
+     * @param config The config to be cleaned up.
+     * @param skipPaint Skip painting.
+     * @param forceClean Force clear the painting.
+     */
+    cleanUpAnimationUnit = (config: Config, skipPaint?: boolean, forceClean?: boolean) => {
+        config.mouseUpClientX = null;
+        config.mouseUpClientY = null;
+        config.mouseDownAnimateStartFrame = null;
+        config.mouseDownAnimateCurrentFrame = null;
+        config.mouseDownAnimateReleasedFrame = null;
+        config.mouseDownAnimateLogicFrame = null;
+        config.mousePressed = false;
+        config.mouseReleased = false;
+
+        const configIdx = this.animationQueue.indexOf(config);
+        if (configIdx > -1) {
+            this.animationQueue.splice(configIdx, 1);
+        }
+
+        if (!skipPaint) {
+            if (forceClean) {
+                config.clear(false);
+            } else if (this.mouseInBoundary) {
+                config.paint(true);
+            } else {
+                config.clear(true);
+            }
+        }
+    };
+
+    getRevealAnimationConfig = () => {
+        return this.canvasList.find((x) => x.mouseInCanvas()) || null;
+    };
+}