@ax-design/reveal-highlight 0.4.2 → 0.5.3

package/src/CustomElements.ts

@@ -1,272 +1,344 @@
-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;
-
-export class AxRevealProvider extends PatchedHTMLElement {
-    static readonly ElementName = 'ax-reveal-provider';
-    readonly stateManager = new RevealStateManager();
-}
-
-export class AxRevealBoundary extends PatchedHTMLElement {
-    static readonly ElementName = 'ax-reveal-bound';
-
-    static readonly removeStorageEvent = 'removeStorage';
-    static readonly attachStorageEvent = 'attachStorage';
-    static readonly replaceStorageEvent = 'replaceStorage';
-
-    private root = this.attachShadow({ mode: 'open' });
-
-    static readonly stateManager = new RevealStateManager();
-
-    private _storage!: RevealBoundaryStore | undefined;
-
-    private get storage() {
-        return this._storage;
-    }
-
-    private set storage(newStorage) {
-        const oldStorage = this._storage;
-
-        if (oldStorage) {
-            this.dispatchEvent(new CustomEvent(AxRevealBoundary.removeStorageEvent, { detail: oldStorage }));
-            AxRevealBoundary.stateManager.removeBoundary(oldStorage);
-        }
-
-        if (newStorage) {
-            this._storage = newStorage;
-            this.dispatchEvent(new CustomEvent(AxRevealBoundary.attachStorageEvent, { detail: newStorage }));
-        }
-
-        if (oldStorage && newStorage) {
-            this.dispatchEvent(
-                new CustomEvent(AxRevealBoundary.replaceStorageEvent, {
-                    detail: { old: oldStorage, new: newStorage },
-                })
-            );
-        }
-    }
-
-    public waitForStorage(f: (storage: RevealBoundaryStore) => void) {
-        if (this.storage === undefined) {
-            this.addEventListener(AxRevealBoundary.attachStorageEvent, () => f(this.storage!), { once: true });
-        } else {
-            f(this.storage);
-        }
-    }
-
-    private appendStorage(force = false) {
-        if (!force && this.storage) {
-            return;
-        }
-
-        const parent = closest(this, AxRevealProvider.ElementName) as AxRevealProvider;
-        const stateManager = parent ? parent.stateManager : AxRevealBoundary.stateManager;
-
-        this.storage = stateManager.newBoundary(this);
-    }
-
-    /**
-     * 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 = 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);
-        if (config.borderDetectionMode === 'strictEdge') {
-            this.addEventListener('pointerenter', this.handlePointerEnter);
-            this.addEventListener('pointerleave', this.handlePointerLeave);
-            this.addEventListener('pointermove', this.handlePointerMove);
-        }
-        this.addEventListener('pointerdown', this.handlePointerDown);
-        this.addEventListener('pointerup', this.handlePointerUp);
-    }
-
-    disconnectedCallback() {
-        this.storage = undefined;
-    }
-
-    constructor() {
-        super();
-        this.root.innerHTML = `
-<div>
-    <slot></slot>
-</div>`;
-    }
-}
-
-export class AxReveal extends PatchedHTMLElement {
-    static readonly ElementName = 'ax-reveal';
-    private root = this.attachShadow({ mode: 'open' });
-    private canvas: HTMLCanvasElement;
-    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.canvas));
-    }
-
-    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.canvas, this), 0));
-        this.addEventListener('pointerdown', this.handlePointerDown);
-    }
-
-    constructor() {
-        super();
-        this.root.innerHTML = `
-<div class="ax-reveal">
-    <canvas></canvas>
-    <div class="content"><slot></slot></div>
-</div>
-<style>
-    .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; }
-    :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.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')!;
-    }
-}
+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;
+
+export class AxRevealProvider extends PatchedHTMLElement {
+    static readonly ElementName = 'ax-reveal-provider';
+    readonly stateManager = new RevealStateManager();
+}
+
+export class AxRevealBoundary extends PatchedHTMLElement {
+    static readonly ElementName = 'ax-reveal-bound';
+
+    static readonly removeStorageEvent = 'removeStorage';
+    static readonly attachStorageEvent = 'attachStorage';
+    static readonly replaceStorageEvent = 'replaceStorage';
+
+    private root = this.attachShadow({ mode: 'open' });
+
+    // Created lazily, the border detection mode is not configured until `register` is called.
+    private static _stateManager: RevealStateManager | undefined;
+
+    static get stateManager() {
+        if (!AxRevealBoundary._stateManager) AxRevealBoundary._stateManager = new RevealStateManager();
+        return AxRevealBoundary._stateManager;
+    }
+
+    private _storage!: RevealBoundaryStore | undefined;
+
+    // The state manager that owns current storage, a provider's or the default one.
+    private ownerStateManager: RevealStateManager | undefined;
+
+    private get storage() {
+        return this._storage;
+    }
+
+    private set storage(newStorage) {
+        const oldStorage = this._storage;
+
+        if (oldStorage) {
+            this.dispatchEvent(new CustomEvent(AxRevealBoundary.removeStorageEvent, { detail: oldStorage }));
+            this.ownerStateManager?.removeBoundary(oldStorage);
+        }
+
+        this._storage = newStorage;
+
+        if (newStorage) {
+            this.dispatchEvent(new CustomEvent(AxRevealBoundary.attachStorageEvent, { detail: newStorage }));
+        }
+
+        if (oldStorage && newStorage) {
+            this.dispatchEvent(
+                new CustomEvent(AxRevealBoundary.replaceStorageEvent, {
+                    detail: { old: oldStorage, new: newStorage },
+                })
+            );
+        }
+    }
+
+    public waitForStorage(f: (storage: RevealBoundaryStore) => void) {
+        if (this.storage === undefined) {
+            this.addEventListener(AxRevealBoundary.attachStorageEvent, () => f(this.storage!), { once: true });
+        } else {
+            f(this.storage);
+        }
+    }
+
+    private appendStorage(force = false) {
+        if (!force && this.storage) {
+            return;
+        }
+
+        const parent = closest(this, AxRevealProvider.ElementName) as AxRevealProvider;
+        const stateManager = parent ? parent.stateManager : AxRevealBoundary.stateManager;
+
+        this.storage = stateManager.newBoundary(this);
+        this.ownerStateManager = stateManager;
+    }
+
+    /**
+     * Update the position of your pointer.
+     * @param ev Pointer event or touch point from the listener.
+     */
+    updatePointerPosition = (ev: { clientX: number; clientY: number }) => {
+        this.waitForStorage((storage) => {
+            storage.clientX = ev.clientX;
+            storage.clientY = ev.clientY;
+        });
+    };
+
+    // Once the browser starts scrolling, pointer events stop (`pointercancel`)
+    // but touch events keep coming, so we follow the finger with them instead.
+    private touchScrolling = false;
+
+    handlePointerEnter = () => this.waitForStorage((storage) => storage.onPointerEnterBoundary());
+    handlePointerLeave = () => {
+        if (this.touchScrolling) return;
+        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));
+        }
+    };
+    // Fired when the browser takes over the touch for scrolling or zooming,
+    // `pointerup` will never come, so the pressed ripple must be cleaned here.
+    handlePointerCancel = (ev: PointerEvent) => {
+        this.waitForStorage((storage) => {
+            if (ev.pointerType === 'touch') {
+                this.touchScrolling = true;
+                storage.anchorPointer();
+            }
+            storage.clearAll(false);
+        });
+    };
+    handleTouchMove = (ev: TouchEvent) => {
+        if (!this.touchScrolling || !ev.targetTouches.length) return;
+        this.updatePointerPosition(ev.targetTouches[0]);
+        this.waitForStorage((storage) => storage.anchorPointer());
+    };
+    handleTouchEnd = (ev: TouchEvent) => {
+        if (!this.touchScrolling || ev.targetTouches.length) return;
+        this.touchScrolling = false;
+        this.handlePointerLeave();
+    };
+    handlePointerDown = (ev: PointerEvent) =>
+        this.waitForStorage((storage) => {
+            this.updatePointerPosition(ev);
+            storage.initializeAnimation();
+        });
+
+    connectedCallback() {
+        this.appendStorage(true);
+        if (config.borderDetectionMode === 'strictEdge') {
+            this.addEventListener('pointerenter', this.handlePointerEnter);
+            this.addEventListener('pointerleave', this.handlePointerLeave);
+            this.addEventListener('pointermove', this.handlePointerMove);
+        }
+        this.addEventListener('pointerdown', this.handlePointerDown);
+        this.addEventListener('pointerup', this.handlePointerUp);
+        this.addEventListener('pointercancel', this.handlePointerCancel);
+        if (config.borderDetectionMode === 'strictEdge') {
+            this.addEventListener('touchmove', this.handleTouchMove, { passive: true });
+            this.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+            this.addEventListener('touchcancel', this.handleTouchEnd, { passive: true });
+        }
+    }
+
+    disconnectedCallback() {
+        this.storage = undefined;
+        this.ownerStateManager = undefined;
+    }
+
+    constructor() {
+        super();
+        this.root.innerHTML = `
+<div>
+    <slot></slot>
+</div>`;
+    }
+}
+
+export class AxReveal extends PatchedHTMLElement {
+    static readonly ElementName = 'ax-reveal';
+    private root = this.attachShadow({ mode: 'open' });
+    private canvas: HTMLCanvasElement;
+    private boundary!: AxRevealBoundary;
+    // The storage this element was added to, the boundary may have dropped it already.
+    private storage: RevealBoundaryStore | undefined;
+    private connection = 0;
+
+    adoptedCallback() {
+        this.disconnectedCallback();
+        this.connectedCallback();
+    }
+
+    handlePointerDown = (ev: PointerEvent) => {
+        this.setPointerCapture(ev.pointerId);
+    };
+
+    disconnectedCallback() {
+        this.connection++;
+        this.storage && this.storage.removeReveal(this.canvas);
+        this.storage = undefined;
+    }
+
+    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!'
+            );
+
+        const connection = ++this.connection;
+        this.boundary.waitForStorage((storage) =>
+            setTimeout(() => {
+                // Disconnected or reconnected before the timer fired.
+                if (connection !== this.connection) return;
+                this.storage = storage;
+                storage.addReveal(this.canvas, this);
+            }, 0)
+        );
+        this.addEventListener('pointerdown', this.handlePointerDown);
+    }
+
+    constructor() {
+        super();
+        this.root.innerHTML = `
+<div class="ax-reveal">
+    <canvas></canvas>
+    <div class="content"><slot></slot></div>
+</div>
+<style>
+    .ax-reveal { display: content; }
+    .ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: var(--reveal-touch-action, manipulation); 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; }
+    :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: var(--reveal-touch-action, manipulation); 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;
+    // The storage this element was added to, the boundary may have dropped it already.
+    private storage: RevealBoundaryStore | undefined;
+    private connection = 0;
+
+    adoptedCallback() {
+        this.disconnectedCallback();
+        this.connectedCallback();
+    }
+
+    handlePointerDown = (ev: PointerEvent) => {
+        this.setPointerCapture(ev.pointerId);
+    };
+
+    disconnectedCallback() {
+        this.connection++;
+        this.storage && this.storage.removeReveal(this.svg);
+        this.storage = undefined;
+    }
+
+    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!'
+            );
+
+        const connection = ++this.connection;
+        this.boundary.waitForStorage((storage) =>
+            setTimeout(() => {
+                // Disconnected or reconnected before the timer fired.
+                if (connection !== this.connection) return;
+                this.storage = storage;
+                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: var(--reveal-touch-action, manipulation); 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: var(--reveal-touch-action, manipulation); user-select: none; }
+    ::slotted(button) { outline:none; }
+</style>`;
+        this.svg = this.root.querySelector('svg')!;
+    }
+}