@ax-design/reveal-highlight 0.3.0-alpha.8 → 0.4.2

package/src/CustomElements.ts

@@ -2,19 +2,29 @@ import { RevealStateManager } from './RevealStateManager.js';
 import { RevealBoundaryStore } from './RevealBoundryStore.js';
 import { config } from './config.js';
 
+function closest(dom: Element, selector: string): Element | null {
+    const r = dom.closest(selector);
+    if (r) return r;
+    const host = findParentShadowRoot(dom)?.host;
+    if (!host) return null;
+    return closest(host, selector)
+}
+function findParentShadowRoot(x: Node | undefined | null): ShadowRoot | null {
+    if (!x) return null;
+    if (x.parentNode && x.parentNode.nodeType === document.DOCUMENT_FRAGMENT_NODE) return x.parentNode as ShadowRoot;
+    return findParentShadowRoot(x.parentNode);
+}
 class ServerSideHTMLElement {
     root = {
         innerHTML: '',
         querySelector: (_x: string) => null,
-    }
-    
+    };
+
     attachShadow = () => null;
 }
 
-const PatchedHTMLElement = 
-    typeof globalThis.Window === 'undefined' 
-    ? ServerSideHTMLElement as unknown as typeof HTMLElement
-    : HTMLElement;
+const PatchedHTMLElement =
+    typeof globalThis.Window === 'undefined' ? ((ServerSideHTMLElement as unknown) as typeof HTMLElement) : HTMLElement;
 
 export class AxRevealProvider extends PatchedHTMLElement {
     static readonly ElementName = 'ax-reveal-provider';
@@ -52,9 +62,11 @@ export class AxRevealBoundary extends PatchedHTMLElement {
         }
 
         if (oldStorage && newStorage) {
-            this.dispatchEvent(new CustomEvent(AxRevealBoundary.replaceStorageEvent, {
-                detail: { old: oldStorage, new: newStorage },
-            }));
+            this.dispatchEvent(
+                new CustomEvent(AxRevealBoundary.replaceStorageEvent, {
+                    detail: { old: oldStorage, new: newStorage },
+                })
+            );
         }
     }
 
@@ -71,27 +83,38 @@ export class AxRevealBoundary extends PatchedHTMLElement {
             return;
         }
 
-        const parent = this.closest(AxRevealProvider.ElementName) as AxRevealProvider;
+        const parent = closest(this, AxRevealProvider.ElementName) as AxRevealProvider;
         const stateManager = parent ? parent.stateManager : AxRevealBoundary.stateManager;
 
         this.storage = stateManager.newBoundary(this);
     }
 
-    updatePointerPosition = (ev: MouseEvent) => {
-        this.waitForStorage(storage => {
+    /**
+     * Update the position of your pointer.
+     * @param ev Pointer event from the listener.
+     */
+    updatePointerPosition = (ev: PointerEvent) => {
+        this.waitForStorage((storage) => {
             storage.clientX = ev.clientX;
             storage.clientY = ev.clientY;
         });
     };
 
-    handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
-    handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
-    handlePointerMove = (ev: MouseEvent) => this.updatePointerPosition(ev);
-    handlePointerUp = () => this.waitForStorage(storage => storage.switchAnimation());
-    handlePointerDown = (ev: MouseEvent) => this.waitForStorage(storage => {
-        this.updatePointerPosition(ev);
-        storage.initializeAnimation();
-    });
+    handlePointerEnter = () => this.waitForStorage((storage) => storage.onPointerEnterBoundary());
+    handlePointerLeave = () => this.waitForStorage((storage) => storage.onPointerLeaveBoundary());
+    handlePointerMove = this.updatePointerPosition;
+    handlePointerUp = (ev: PointerEvent) => {
+        if (ev.pointerType === 'mouse') {
+            this.waitForStorage((storage) => storage.switchAnimation());
+        } else {
+            this.waitForStorage((storage) => storage.clearAll(false));
+        }
+    };
+    handlePointerDown = (ev: PointerEvent) =>
+        this.waitForStorage((storage) => {
+            this.updatePointerPosition(ev);
+            storage.initializeAnimation();
+        });
 
     connectedCallback() {
         this.appendStorage(true);
@@ -113,7 +136,7 @@ export class AxRevealBoundary extends PatchedHTMLElement {
         this.root.innerHTML = `
 <div>
     <slot></slot>
-</div>`
+</div>`;
     }
 }
 
@@ -128,27 +151,36 @@ export class AxReveal extends PatchedHTMLElement {
         this.connectedCallback();
     }
 
+    handlePointerDown = (ev: PointerEvent) => {
+        this.setPointerCapture(ev.pointerId);
+    };
+
     disconnectedCallback() {
-        this.boundary && this.boundary.waitForStorage(storage => storage.removeReveal(this.canvas));
+        this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.canvas));
     }
 
     connectedCallback() {
-        this.boundary = this.closest(AxRevealBoundary.ElementName) as AxRevealBoundary;
+        this.boundary = closest(this, AxRevealBoundary.ElementName) as AxRevealBoundary;
         if (!this.boundary)
-            throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of acrylic!');
+            throw new SyntaxError(
+                'You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!'
+            );
 
-        this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas, this), 0));
+        this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.canvas, this), 0));
+        this.addEventListener('pointerdown', this.handlePointerDown);
     }
 
     constructor() {
         super();
         this.root.innerHTML = `
-<div>
-    <slot></slot>
+<div class="ax-reveal">
     <canvas></canvas>
-    </div>
+    <div class="content"><slot></slot></div>
+</div>
 <style>
-    div { display: content; }
+    .ax-reveal { display: content; }
+    .ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
+    .content { position: relative; }
     canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
     :host { display: inline-block; position: relative; }
     :host([block]) { display: block; }
@@ -157,8 +189,84 @@ export class AxReveal extends PatchedHTMLElement {
     :host([inline-flex]) { display: inline-flex; }
     :host([grid]) { display: grid; }
     :host([inline-grid]) { display: inline-grid; }
+    ::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
     ::slotted(button) { outline:none; }
 </style>`;
         this.canvas = this.root.querySelector('canvas')!;
     }
 }
+
+export class AxRevealNg extends PatchedHTMLElement {
+    static readonly ElementName = 'ax-reveal-ng';
+    private root = this.attachShadow({ mode: 'open' });
+    private svg: SVGElement;
+    private boundary!: AxRevealBoundary;
+
+    adoptedCallback() {
+        this.disconnectedCallback();
+        this.connectedCallback();
+    }
+
+    handlePointerDown = (ev: PointerEvent) => {
+        this.setPointerCapture(ev.pointerId);
+    };
+
+    disconnectedCallback() {
+        this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.svg));
+    }
+
+    connectedCallback() {
+        this.boundary = closest(this, AxRevealBoundary.ElementName) as AxRevealBoundary;
+        if (!this.boundary)
+            throw new SyntaxError(
+                'You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!'
+            );
+
+        this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.svg, this), 0));
+        this.addEventListener('pointerdown', this.handlePointerDown);
+    }
+
+    constructor() {
+        super();
+        this.root.innerHTML = `
+<div class="ax-reveal">
+    <svg>
+        <defs>
+            <radialGradient id="borderGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="borderCenter" offset="0%" />
+                <stop id="borderOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="fillGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="fillCenter" offset="0%" />
+                <stop id="fillOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="rippleGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="rippleCenter" offset="0%" />
+                <stop id="rippleMiddle" offset="0%" />
+                <stop id="rippleOut" offset="0%" />
+            </radialGradient>
+        </defs>
+        <path id="borderPath" fill="url(#borderGrad)" />
+        <path id="fillPath" fill="url(#fillGrad)" />
+        <path id="ripplePath" fill="url(#rippleGrad)" />
+    </svg>
+    <div class="content"><slot></slot></div>
+</div>
+<style>
+    .ax-reveal { display: contents; }
+    .ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
+    .content { position: relative; }
+    svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
+    :host { display: inline-block; position: relative; }
+    :host([block]) { display: block; }
+    :host([inline-block]) { display: inline-block; }
+    :host([flex]) { display: flex; }
+    :host([inline-flex]) { display: inline-flex; }
+    :host([grid]) { display: grid; }
+    :host([inline-grid]) { display: inline-grid; }
+    ::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
+    ::slotted(button) { outline:none; }
+</style>`;
+        this.svg = this.root.querySelector('svg')!;
+    }
+}

package/src/RevealBoundryStore.ts

@@ -1,4 +1,7 @@
 import { CanvasConfig } from './CanvasConfig.js';
+import { SvgConfig } from './SvgConfig.js';
+
+type Config = CanvasConfig | SvgConfig;
 
 export class RevealBoundaryStore {
     id: number;
@@ -13,11 +16,10 @@ export class RevealBoundaryStore {
     paintedClientY = -1000;
 
     mouseInBoundary = false;
-    canvasList: CanvasConfig[] = [];
+    canvasList: Config[] = [];
 
-    animationQueue: CanvasConfig[] = [];
+    animationQueue: Config[] = [];
     animationFrame: number | null = null;
-    dirty = false;
 
     mouseUpClientX = null;
     mouseUpClientY = null;
@@ -30,84 +32,131 @@ export class RevealBoundaryStore {
 
     maxRadius = -1;
 
+    requestedAnimationFrame = false;
+
     constructor(id: number, $el: HTMLElement) {
         this.id = id;
         this.container = $el;
     }
 
-    addReveal = ($canvas: HTMLCanvasElement, $container: HTMLElement) => {
-        const canvasConfig = new CanvasConfig(this, $canvas, $container);
+    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.`)
+        }
 
-        canvasConfig.cacheBoundingRect();
-        canvasConfig.cacheCanvasPaintingStyle();
-        canvasConfig.updateCachedBitmap();
+        config.cacheBoundingRect();
+        config.cacheCanvasPaintingStyle();
+        config.updateCachedBitmap();
 
-        this.canvasList.push(canvasConfig);
+        this.canvasList.push(config);
     };
 
-    removeReveal = ($el: HTMLCanvasElement) => {
+    removeReveal = ($el: HTMLCanvasElement | SVGElement) => {
         this.canvasList = this.canvasList.filter((config) => {
-            return config && config.canvas === $el;
+            return config && config.element !== $el;
         });
     };
 
     updateMaxRadius = (x: number) => {
         this.maxRadius = Math.max(x, this.maxRadius);
-    }
+    };
 
-    onPointerMoveOnScreen = (x: number, y: number) => {
-        const boundingBox = this.container.getBoundingClientRect();
+    requestPaintAll = (cleanup?: boolean) => {
+        if (this.requestedAnimationFrame) return;
+        this.requestedAnimationFrame = true;
 
-        if (x < boundingBox.left - this.maxRadius) return false;
-        if (x > boundingBox.right + this.maxRadius) return false;
-        if (y < boundingBox.top - this.maxRadius) return false;
-        if (y > boundingBox.bottom + this.maxRadius) return false;
-        this.mouseInBoundary = 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;
 
-        this.animationFrame = window.requestAnimationFrame(this.paintAll);
-        return true
+        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.animationFrame = window.requestAnimationFrame(this.paintAll);
+            this.requestPaintAll();
         }
     };
 
+    /**
+     * Clear all canvas while user's pointer leave the bounary.
+     */
     onPointerLeaveBoundary = () => {
         this.mouseInBoundary = false;
-        this.paintAll(0, true);
+        this.requestPaintAll(true);
     };
 
-    paintAll = (frame: number, force?: boolean) => {
-        if (!force && !this.mouseInBoundary && this.animationQueue.length === 0) {
+    /**
+     * 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) {
-                return;
+                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;
@@ -115,34 +164,51 @@ export class RevealBoundaryStore {
             config.mouseDownAnimateLogicFrame = unitLogicFrame / speed;
 
             if (config.mouseDownAnimateLogicFrame > 1) {
-                this.cleanUpAnimation(config);
+                // 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;
-            config.paint(force);
+
+            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.dirty = true;
         this.paintedClientX = this.clientX;
         this.paintedClientY = this.clientY;
 
         if (this.mouseInBoundary || this.animationQueue.length !== 0) {
-            this.animationFrame = window.requestAnimationFrame(this.paintAll);
+            this.requestPaintAll();
         } else {
             this.animationFrame = null;
         }
     };
 
-    resetAll = () => {
-        for (let i = 0; i < this.canvasList.length; i++) {
-            const config = this.canvasList[i];
-            config.paint();
-        }
+    /**
+     * 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());
 
@@ -157,18 +223,43 @@ export class RevealBoundaryStore {
         config.mouseReleased = false;
     };
 
+    /**
+     * This is the effect while user released it's pointer, the spreading
+     * ripple animation will start to accelerate.
+     */
     switchAnimation = () => {
-        this.animationQueue.forEach((config) => {
+        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;
             }
-        });
+        }
     };
 
-    cleanUpAnimation = (config: CanvasConfig) => {
+    /**
+     * 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;
@@ -183,7 +274,15 @@ export class RevealBoundaryStore {
             this.animationQueue.splice(configIdx, 1);
         }
 
-        config.paint(true);
+        if (!skipPaint) {
+            if (forceClean) {
+                config.clear(false);
+            } else if (this.mouseInBoundary) {
+                config.paint(true);
+            } else {
+                config.clear(true);
+            }
+        }
     };
 
     getRevealAnimationConfig = () => {

package/src/RevealStateManager.ts

@@ -14,24 +14,62 @@ export class RevealStateManager {
         if (config.borderDetectionMode === 'experimentalAutoFit') {
             if (typeof Window === 'undefined') return;
 
-            window.addEventListener('pointermove', (event) => {
-                this.cachedMouseX = event.clientX;
-                this.cachedMouseY = event.clientY;
-
-                if (!this.requestedTraverseBoundaries) {
-                    window.requestAnimationFrame(this.traverseBoundaries);
-                    this.requestedTraverseBoundaries = true;
-                }
+            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();
             });
         }
     }
 
+    pointerLeaveScheduled = false;
+
+    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;
+        });
+    }
+
+    handlePointerMove = (event: PointerEvent) => {
+        this.cachedMouseX = event.clientX;
+        this.cachedMouseY = event.clientY;
+
+        if (!this.requestedTraverseBoundaries) {
+            window.requestAnimationFrame(this.traverseBoundaries);
+            this.requestedTraverseBoundaries = true;
+        }
+    };
+
     traverseBoundaries = () => {
         this.requestedTraverseBoundaries = false;
         for (let i = 0; i < this._storage.length; i++) {
             this._storage[i].onPointerMoveOnScreen(this.cachedMouseX, this.cachedMouseY);
         }
-    }
+    };
 
     newBoundary = ($el: HTMLElement) => {
         const hashId = this._currentHashId++;
@@ -43,6 +81,6 @@ export class RevealStateManager {
     };
 
     removeBoundary = (store: RevealBoundaryStore) => {
-        this._storage = this._storage.filter(x => x !== store);
+        this._storage = this._storage.filter((x) => x !== store);
     };
 }