@ax-design/reveal-highlight 0.3.0-alpha.7 → 0.4.1

package/src/RevealStateManager.ts

@@ -1,48 +1,78 @@
-import { RevealBoundaryStore } from './RevealBoundryStore.js';
-
-import { config } from './config.js';
-
-export class RevealStateManager {
-    private _currentHashId = 0;
-    private _storage: RevealBoundaryStore[] = [];
-
-    private requestedTraverseBoundaries = false;
-    cachedMouseX = -1;
-    cachedMouseY = -1;
-
-    constructor() {
-        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;
-                }
-            });
-        }
-    }
-
-    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++;
-
-        const store = new RevealBoundaryStore(hashId, $el);
-        this._storage.push(store);
-
-        return store;
-    };
-
-    removeBoundary = (store: RevealBoundaryStore) => {
-        this._storage = this._storage.filter(x => x !== store);
-    };
-}
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+
+import { config } from './config.js';
+
+export class RevealStateManager {
+    private _currentHashId = 0;
+    private _storage: RevealBoundaryStore[] = [];
+
+    private requestedTraverseBoundaries = false;
+    cachedMouseX = -1;
+    cachedMouseY = -1;
+
+    constructor() {
+        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();
+            });
+        }
+    }
+
+    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++;
+
+        const store = new RevealBoundaryStore(hashId, $el);
+        this._storage.push(store);
+
+        return store;
+    };
+
+    removeBoundary = (store: RevealBoundaryStore) => {
+        this._storage = this._storage.filter((x) => x !== store);
+    };
+}

package/src/SvgConfig.ts

@@ -0,0 +1,422 @@
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+
+import type { CachedRevealPath } from './utils/types.js';
+
+import { BaseConfig } from './BaseConfig.js';
+
+export class SvgConfig extends BaseConfig<SVGSVGElement> {
+    protected cachedImg: CachedRevealPath;
+
+    constructor(store: RevealBoundaryStore, $svg: SVGSVGElement, $container: HTMLElement) {
+        super(store, $svg, $container);
+        this._store = store;
+
+        const cachedPath = {
+            borderReveal: $svg.querySelector('#borderPath') as SVGPathElement,
+            fillReveal: $svg.querySelector('#fillPath') as SVGPathElement,
+            rippleReveal: $svg.querySelector('#ripplePath') as SVGPathElement,
+        };
+
+        const cachedGradient = {
+            borderReveal: $svg.querySelector('#borderGrad') as SVGRadialGradientElement,
+            fillReveal: $svg.querySelector('#fillGrad') as SVGRadialGradientElement,
+            rippleReveal: $svg.querySelector('#rippleGrad') as SVGRadialGradientElement,
+        }
+
+        const cachedGradientStop = {
+            borderReveal: [
+                $svg.querySelector('#borderCenter') as SVGStopElement,
+                $svg.querySelector('#borderOut') as SVGStopElement,
+            ] as const,
+            fillReveal: [
+                $svg.querySelector('#fillCenter') as SVGStopElement,
+                $svg.querySelector('#fillOut') as SVGStopElement,
+            ] as const,
+            rippleReveal: [
+                $svg.querySelector('#rippleCenter') as SVGStopElement,
+                $svg.querySelector('#rippleMiddle') as SVGStopElement,
+                $svg.querySelector('#rippleOut') as SVGStopElement,
+            ] as const,
+        }
+
+        this.cachedImg = {
+            cachedReveal: {
+                borderReveal: {
+                    radiusFactor: -1,
+                    radius: -1,
+                    color: 'INVALID',
+                    opacity: 0,
+                    pattern: null,
+                },
+                fillReveal: {
+                    radiusFactor: -1,
+                    radius: -1,
+                    color: 'INVALID',
+                    opacity: 0,
+                    pattern: null,
+                },
+            },
+            cachedPath,
+            cachedGradient,
+            cachedGradientStop,
+        };
+    }
+
+    updateCachedBitmap = () => {
+    }
+
+    updateCachedReveal = () => {
+        const c = this.cachedStyle;
+        const stops = this.cachedImg.cachedGradientStop;
+        stops.borderReveal[0].style.stopColor = c.borderColor;
+        stops.borderReveal[1].style.stopColor = c.borderColor;
+        stops.borderReveal[0].style.stopOpacity = c.opacity.toString();
+        stops.borderReveal[1].style.stopOpacity = '0';
+
+        stops.fillReveal[0].style.stopColor = c.hoverLightColor;
+        stops.fillReveal[1].style.stopColor = c.hoverLightColor;
+        stops.fillReveal[0].style.stopOpacity = (c.opacity * 0.5).toString();
+        stops.fillReveal[1].style.stopOpacity = '0';
+
+        stops.rippleReveal[0].style.stopColor = c.pressAnimationColor;
+        stops.rippleReveal[1].style.stopColor = c.pressAnimationColor;
+        stops.rippleReveal[2].style.stopColor = c.pressAnimationColor;
+
+        const grads = this.cachedImg.cachedGradient;
+        const isAbsoluteFill = c.trueFillRadius[0] === -1;
+        grads.borderReveal.r.baseVal.value = isAbsoluteFill
+            ? c.borderFillRadius
+            : c.borderFillRadius * c.trueFillRadius[1];
+        grads.fillReveal.r.baseVal.value = isAbsoluteFill
+            ? c.hoverLightFillRadius
+            : c.hoverLightFillRadius * c.trueFillRadius[0];
+        
+        this.fillDirty = false;
+    };
+
+    private updateAnimateGrd = (frame: number, x: number, y: number, radius: number) => {
+        const { opacity } = this.cachedStyle;
+
+        const _innerAlpha = opacity * (0.2 - frame);
+        const _outerAlpha = opacity * (0.1 - frame * 0.07);
+        const _outerBorder = 0.1 + frame * 0.8;
+
+        const innerAlpha = _innerAlpha < 0 ? 0 : _innerAlpha;
+        const outerAlpha = _outerAlpha < 0 ? 0 : _outerAlpha;
+        let outerBorder = 0;
+        outerBorder = _outerBorder > 1 ? 1 : _outerBorder;
+        outerBorder = _outerBorder < 0 ? 0 : _outerBorder;
+
+        const stops = this.cachedImg.cachedGradientStop;
+        stops.rippleReveal[0].style.stopOpacity = innerAlpha.toString();
+        stops.rippleReveal[1].style.stopOpacity = outerAlpha.toString();
+        stops.rippleReveal[2].style.stopOpacity = '0';
+
+        stops.rippleReveal[0].offset.baseVal = 0;
+        stops.rippleReveal[1].offset.baseVal = outerBorder * 0.55;
+        stops.rippleReveal[2].offset.baseVal = outerBorder;
+
+        const grads = this.cachedImg.cachedGradient;
+        grads.rippleReveal.r.baseVal.value = radius;
+        grads.rippleReveal.cx.baseVal.value = x;
+        grads.rippleReveal.cy.baseVal.value = y;
+    };
+
+    private updateGradientPosition = (x: number, y: number) => {
+        const grads = this.cachedImg.cachedGradient;
+
+        grads.borderReveal.cx.baseVal.value = x;
+        grads.borderReveal.cy.baseVal.value = y;
+
+        grads.fillReveal.cx.baseVal.value = x;
+        grads.fillReveal.cy.baseVal.value = y;
+    }
+
+    private drawShape = (hollow: boolean, $target: SVGPathElement) => {
+        const b = this.cachedBoundingRect;
+        const w = b.width;
+        const h = b.height;
+
+        const c = this.cachedStyle;
+        const bw = c.borderWidth;
+
+        const tl = c.topLeftBorderDecorationRadius;
+        const tr = c.topRightBorderDecorationRadius;
+        const bl = c.bottomLeftBorderDecorationRadius;
+        const br = c.bottomRightBorderDecorationRadius;
+
+        const wlf = c.withLeftBorderFactor;
+        const wrf = c.withRightBorderFactor;
+        const wtf = c.withTopBorderFactor;
+        const wbf = c.withBottomBorderFactor;
+
+        const rwlf = c.withLeftBorderFactor ? 0 : 1;
+        const rwrf = c.withRightBorderFactor ? 0 : 1;
+        const rwtf = c.withTopBorderFactor ? 0 : 1;
+        const rwbf = c.withBottomBorderFactor ? 0 : 1;
+
+        const ntlc = !c.withTopBorderFactor && !c.withLeftBorderFactor;
+        const ntrc = !c.withTopBorderFactor && !c.withRightBorderFactor;
+        const nblc = !c.withBottomBorderFactor && !c.withLeftBorderFactor;
+        const nbrc = !c.withBottomBorderFactor && !c.withRightBorderFactor;
+
+        const tl2 = bw < tl ? tl - bw : 0;
+        const tr2 = bw < tr ? tr - bw : 0;
+        const bl2 = bw < bl ? bl - bw : 0;
+        const br2 = bw < br ? br - bw : 0;
+
+        let d = '';
+
+        // Step 1: Starting point
+        d += hollow ? `M ${tl}, 0 ` : `M ${bw}, ${tl2 + bw} `;
+
+        switch (c.borderDecorationType) {
+            // Oh... Fuck again...
+            case 'round':
+                // Step 2: Draw shape
+                if (hollow) {
+                    // Step 2-1: This is outer path, drawing clockwise
+                    d += `
+                        h ${w - tl - tr} 
+                        a ${tr}, ${tr} 0 0 1 ${tr}, ${tr} 
+                        v ${h - tr - br} 
+                        a ${br}, ${br} 0 0 1 ${-br}, ${br} 
+                        h ${-w + bl + br} 
+                        a ${bl}, ${bl} 0 0 1 ${-bl}, ${-bl} 
+                        v ${-h + tr + br} 
+                        a ${tl}, ${tl} 0 0 1 ${tl}, ${-tl} 
+                        Z 
+                    `;
+                }
+                // Step 2-2: This is the inner path, drawing anti-clockwise
+                d += `
+                    M ${bw * wlf}, ${tl2 + bw} 
+                    v ${h - tl2 - bl2 - bw * 2 + rwbf * bw} 
+                    a ${bl2}, ${bl2} 0 0 0 ${bl2}, ${bl2} 
+                    h ${w - bl2 - br2 - bw * 2 + rwlf * bw + rwrf * bw} 
+                    a ${br2}, ${br2} 0 0 0 ${br2}, ${-br2} 
+                    v ${-h + tr2 + br2 + bw * 2 - rwtf * bw - rwbf * bw} 
+                    a ${tr2}, ${tr2} 0 0 0 ${-tr2}, ${-tr2} 
+                    h ${-w + bl2 + br2 + bw * 2 - rwlf * bw - rwrf * bw} 
+                    a ${tl2}, ${tl2} 0 0 0 ${-tl2}, ${tl2} 
+                    L ${bw * wlf}, ${tl2 + bw} 
+                `;
+                break;
+            case 'bevel':
+                if (hollow) {
+                    // Step 2-1: This is outer path, drawing clockwise
+                    d += `
+                        h ${w - tl - tr}
+                        l ${tr} ${tr} 
+                        v ${h - tr - br} 
+                        l ${-br} ${br} 
+                        h ${-w + tr + br} 
+                        l ${-bl} ${-bl} 
+                        v ${-h + tr + br} 
+                        l ${tl} ${-tl} 
+                        Z 
+                    `;
+                }
+                // // Step 2-2: This is the inner path, drawing anti-clockwise
+                d += `
+                    M ${bw}, ${tl2 + bw} 
+                    ${rwlf ? `h ${-bw}` : ''} 
+                    v ${h - tl2 - bl2 - bw * 2} 
+                    ${rwlf ? `h ${bw}` : ''} 
+                    ${nblc ? `l ${-bw} 0` : ''} 
+                    l ${bl2} ${bl2} 
+                    ${nblc ? `l ${bw} 0` : ''} 
+                    ${rwbf ? `v ${bw}` : ''} 
+                    h ${w - bl2 - br2 - bw * 2} 
+                    ${rwbf ? `v ${-bw}` : ''} 
+                    ${nbrc ? `l ${bw} 0` : ''} 
+                    l ${br2} ${-br2} 
+                    ${nbrc ? `l ${-bw} 0` : ''} 
+                    ${rwrf ? `h ${bw}` : ''} 
+                    v ${-h + tl2 + bl2 + bw * 2} 
+                    ${rwrf ? `h ${-bw}` : ''} 
+                    ${ntrc ? `l 0 ${-bw}` : ''} 
+                    l ${-tr2} ${-tr2} 
+                    ${ntrc ? `l 0 ${bw}` : ''} 
+                    ${rwtf ? `v ${-bw}` : ''} 
+                    h ${-w + bl2 + br2 + bw * 2}  
+                    ${rwtf ? `v ${bw}` : ''} 
+                    ${ntlc ? `l 0 ${-bw}` : ''} 
+                    l ${-tl2} ${tl2} 
+                    ${ntlc ? `l 0 ${bw}` : ''} 
+                `;
+                break;
+            case 'miter':
+                // Step 2: Draw shape
+                if (hollow) {
+                    // Step 2-1: This is outer path, drawing clockwise
+                    d += `
+                        M 0, 0 
+                        h ${w} 
+                        v ${h} 
+                        h ${0 - w} 
+                        v ${0 - h}
+                        Z
+                    `;
+                }
+                // Step 2-2: This is the inner path, drawing anti-clockwise
+                d += `
+                    M ${bw * wlf}, ${bw * wtf}
+                    v ${h - wtf * bw - wbf * bw}
+                    h ${w - wlf * bw - wrf * bw}
+                    v ${-h + wtf * bw + wbf * bw}
+                    h ${-w + wlf * bw + wrf * bw}
+                `;
+        }
+        // Step 3: Close the path
+        if (c.borderDecorationType === 'miter') {
+            d += hollow ? `L ${bw}, ${bw}` : `z`;
+        } else {
+            d += hollow ? `L ${tl2 + bw}, ${tl2 + bw}` : `z`;
+        }
+
+        $target.setAttribute('d', d);
+    };
+
+    syncSizeToElement = (x: SVGSVGElement) => {
+        const b = this.cachedBoundingRect;
+        const width = x.width.baseVal;
+        const height = x.height.baseVal;
+
+        if (width.value !== b.width || height.value !== b.height) {
+            width.value = b.width;
+            height.value = b.height;
+        }
+    };
+
+    clear = (forAnimation: boolean) => {
+        if (!forAnimation) {
+            this.internalClear();
+        }
+    }
+
+    private internalClear = () => {
+        if (!this.dirty) return false;
+
+        const paths = this.cachedImg.cachedPath;
+
+        paths.borderReveal.style.fill = 'transparent';
+        paths.fillReveal.style.fill = 'transparent';
+        paths.rippleReveal.style.fill = 'transparent';
+
+        this.dirty = false;
+        return true;
+    }
+
+    paint = (skipSamePointerPositionCheck?: boolean): boolean => {
+        const store = this._store;
+
+        const animationPlaying = store.animationQueue.includes(this);
+        const samePosition = store.clientX === store.paintedClientX && store.clientY === store.paintedClientY;
+
+        if (samePosition && !skipSamePointerPositionCheck && !animationPlaying) {
+            return false;
+        }
+
+        if (!store.mouseInBoundary && !animationPlaying) {
+            this.internalClear();
+            return false;
+        }
+
+        this.syncSizeToElement(this.element);
+        this.cacheBoundingRect();
+
+        const b = this.cachedBoundingRect;
+
+        const relativeX = store.clientX - b.left;
+        const relativeY = store.clientY - b.top;
+
+        if (Number.isNaN(relativeX) || Number.isNaN(relativeY)) {
+            return false;
+        }
+
+        const c = this.cachedStyle;
+        this.getTrueFillRadius(c.trueFillRadius);
+
+        this.paintedWidth = b.width;
+        this.paintedHeight = b.height;
+
+        const grads = this.cachedImg.cachedGradient;
+        const maxRadius = Math.max(
+            grads.borderReveal.r.baseVal.value,
+            grads.fillReveal.r.baseVal.value
+        );
+
+        this._store.updateMaxRadius(maxRadius);
+        this.cacheCanvasPaintingStyle();
+
+        if (this.fillDirty) {
+            this.updateCachedReveal();
+        }
+
+        const inLeftBound = relativeX + maxRadius > 0;
+        const inRightBound = relativeX - maxRadius < b.width;
+        const inTopBound = relativeY + maxRadius > 0;
+        const inBottomBound = relativeY - maxRadius < b.height;
+        const mouseInRenderArea = inLeftBound && inRightBound && inTopBound && inBottomBound;
+
+        if (!mouseInRenderArea && !animationPlaying) {
+            this.internalClear();
+            return false;
+        }
+
+        this.dirty = true;
+
+        this.updateGradientPosition(relativeX, relativeY);
+
+        if (this.shapeDirty) {
+            this.drawShape(true, this.cachedImg.cachedPath.borderReveal);
+            this.drawShape(false, this.cachedImg.cachedPath.fillReveal);
+            this.drawShape(false, this.cachedImg.cachedPath.rippleReveal);
+            this.shapeDirty = false;
+        }
+
+        if (store.mouseInBoundary) {
+            const mouseInElement = relativeX > 0 && relativeY > 0 && relativeX < b.width && relativeY < b.height;
+
+            if (c.hoverLight && mouseInElement) {
+                // draw fill.
+                this.cachedImg.cachedPath.fillReveal.style.fill = 'url(#fillGrad)';
+            } else if (this.cachedImg.cachedPath.fillReveal.style.fill !== 'transparent') {
+                this.cachedImg.cachedPath.fillReveal.style.fill = 'transparent';
+            }
+
+            const diffuse = (c.diffuse && mouseInRenderArea) || mouseInElement;
+            if (c.borderWidth !== 0 && diffuse) {
+                // Draw border.
+                this.cachedImg.cachedPath.borderReveal.style.fill = 'url(#borderGrad)';
+            } else if (this.cachedImg.cachedPath.borderReveal.style.fill !== 'transparent') {
+                this.cachedImg.cachedPath.borderReveal.style.fill = 'transparent';
+            }
+        }
+
+        if (c.pressAnimation && this.mousePressed && this.mouseDownAnimateLogicFrame) {
+            const grdRadius =
+                c.pressAnimationFillMode === 'constrained' ? c.trueFillRadius[1] : Math.max(b.width, b.height);
+
+            this.mouseReleased && this.mouseUpClientX && this.mouseUpClientY
+                ? this.updateAnimateGrd(
+                    this.mouseDownAnimateLogicFrame,
+                    this.mouseUpClientX - b.left,
+                    this.mouseUpClientY - b.top,
+                    grdRadius
+                )
+                : this.updateAnimateGrd(
+                    this.mouseDownAnimateLogicFrame,
+                    relativeX,
+                    relativeY,
+                    grdRadius
+                )
+            this.cachedImg.cachedPath.rippleReveal.style.fill = 'url(#rippleGrad)';
+        } else if (this.cachedImg.cachedPath.rippleReveal.style.fill !== 'transparent') {
+            this.cachedImg.cachedPath.rippleReveal.style.fill = 'transparent';
+        }
+
+        return true;
+    };
+}

package/src/config.ts

@@ -1,27 +1,27 @@
-let borderDetectionMode: 'strictEdge' | 'experimentalAutoFit' = 'strictEdge';
-
-let borderDetectionModeInitialized = false;
-
-class InitializedError extends Error {
-    name = 'InitializedError';
-
-    constructor() {
-        super('Border detection mode has already been initialized.')
-    }
-}
-
-export const config = {
-    compat: false,
-
-    get borderDetectionMode() {
-        return borderDetectionMode
-    },
-    set borderDetectionMode(x) {
-        if (borderDetectionModeInitialized) {
-            throw new InitializedError;
-        }
-
-        borderDetectionMode = x;
-        borderDetectionModeInitialized = true;
-    }
+let borderDetectionMode: 'strictEdge' | 'experimentalAutoFit' = 'strictEdge';
+
+let borderDetectionModeInitialized = false;
+
+class InitializedError extends Error {
+    name = 'InitializedError';
+
+    constructor() {
+        super('Border detection mode has already been initialized.')
+    }
+}
+
+export const config = {
+    compat: false,
+
+    get borderDetectionMode() {
+        return borderDetectionMode
+    },
+    set borderDetectionMode(x) {
+        if (borderDetectionModeInitialized) {
+            throw new InitializedError;
+        }
+
+        borderDetectionMode = x;
+        borderDetectionModeInitialized = true;
+    }
 }