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

package/README.md

@@ -37,7 +37,10 @@ require('@ax-design/reveal-highlight').register();
 
 //ESModule
 import { register } from '@ax-design/reveal-highlight';
-register();
+register({
+  compat: true,
+  borderDetectionMode: 'experimentalAutoFit',
+});
 ```
 
 ## Usage
@@ -66,170 +69,8 @@ Here's an example:
 
 ## Style Controlling
 
-reveal-highlight use custom properties to manage the style of highlights
+* Checkout this living example for detailed usage:
+https://ax-design.github.io/playground/?path=/story/components-fundamental-elements-reveal-highlight--basic
 
-### Overall control
-
-#### --reveal-color
-
-**Type:** `<color>`
-
-**Default:** `rgb(0, 0, 0)`
-
-**Description:** The color of the reveal highlight, could RGB value or hex value.
-
-#### --reveal-diffuse
-
-**Type:** `<boolean>`
-
-**Default:** `true`
-
-**Description:** Control the behavior while pointer not in the reveal highlight element, if setted to `false`, nothing will be rendered; if setted to `true`, border will be rendered.
-
-### Border
-
-#### --reveal-border-color
-
-**Type:** `<color>`
-
-**Default:** `rgb(-1, -1, -1)`
-
-**Description:** The color of the hover light.
-
-**Magic Number:** If the value equals to `rgb(-1, -1, -1)`, the value of `--reveal-color`. It looks weired, but it is constrained by the CSS Typed OM specification.
-
-#### --reveal-border-fill-radius
-
-**Type:** `<number>`
-
-**Default:** `1.5`
-
-**Description:** Radius of the border gradient, please notice that this value is a number but not length.
-
-#### --reveal-border-width
-
-**Type:** `<number>`
-
-**Default:** `1`
-
-**Description:** Border width in `px`.
-
-#### --reveal-border-decoration-type
-
-**Type:** `'miter' | 'round' | bevel`
-
-**Default:** `miter`
-
-**Description:** The shape of border radius, the same as possible values of `lineJoin`, checkout [this document](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
-
-#### --reveal-border-decoration-radius
-
-**Type:** `<length>`
-
-**Default:** `4px`
-
-**Description:** The radius of border radius, if `--reveal-border-decoration-type` is `miter`, nothing would happen.
-
-**Note:** To control each corner, use `--reveal-border-decoration-top-left-radius`, `--reveal-border-decoration-top-right-radius`, `--reveal-border-decoration-bottom-left-radius`, `--reveal-border-decoration-bottom-right-radius`, if the value of these values are negative, `--reveal-border-decoration-radius` would be used.
-
-#### --reveal-border-style
-
-**Type:** `'full' | 'half'`
-
-**Default:** `'full'`
-
-**Description:** If `full` provided, there'll be four sides of the element will have a light effect, if `half` provided, only the top and bottom side will have a light effect.
-
-### Hover light
-
-Hover light is the light effect shown up when you hover on the reveal element, it will fill the whole element.
-
-#### --reveal-hover-light
-
-**Type:** `<boolean>`
-
-**Default:** `true`
-
-**Description:** Enable the hover light or not.
-
-#### --reveal-hover-light-color
-
-**Type:** `<color>`
-
-**Default:** `rgb(-1, -1, -1)`
-
-**Description:** The color of the hover light.
-
-**Magic Number:** If the value equals to `rgb(-1, -1, -1)`, the value of `--reveal-color`.
-
-#### --reveal-hover-light-fill-radius
-
-**Type:** `<number>`
-
-**Default:** `1.5`
-
-**Description:** Radius of the highlight gradient, please notice that this value is a number but not length.
-
-#### --reveal-hover-light-fill-radius-mode
-
-**Type:** `'relative' | 'absolute'`
-
-**Default:** `relative`
-
-**Description:** How the program calculating the radius of gradient, if `relative` provided, gradient radius will be:
-
--   `r(border) = min(width, height) * fillRadius`
--   `r(fill) = max(width, height) * fillRadius`
-
-If `absolute` provided, gradient will be:
-
--   `r(border) = fillRadius`
--   `r(fill) = fillRadius`
-
-the unit is pixel.
-
-### Animation
-
-When you pressed on the reveal highlight element, a ripple will show up.
-
-#### --reveal-press-animation
-
-**Type:** `<boolean>`
-
-**Default:** `true`
-
-**Description:** Enable the pressed animation or not.
-
-#### --reveal-press-animation-color
-
-**Type:** `<color>`
-
-**Default:** `rgb(-1, -1, -1)`
-
-**Description:** The color of the hover light, could be rgb value or hex.
-
-**Magic Number:** If the value equals to `rgb(-1, -1, -1)`, the value of `--reveal-color`.
-
-#### --reveal-press-animation-fill-mode
-
-**Type:** `'cover' | 'constrained'`
-
-**Default:** `cover`
-
-**Description:** The filling mode of pressed animation, when using `cover`, the radius of pressed animation would be `max(width, height)`, when using `constrained`, it would be the radius of the hover light.
-
-#### --reveal-press-animation-speed
-
-**Type:** `<number>`
-
-**Default:** `2000`
-
-**Description:** The duration of the animation being played when the mouse is held down by the element.
-
-#### --reveal-release-animation-accelerate-rate
-
-**Type:** `<number>`
-
-**Default:** `6`
-
-**Description:** The acceleration rate of the animation when the mouse is released.
+* And here're the source code:
+https://github.com/ax-design/ax-design.github.io/blob/master/stories/templates/RevealHighlight.ts

package/build/BaseConfig.d.ts

@@ -0,0 +1,43 @@
+import { ComputedStyleStorage } from './ComputedStyleStorage.js';
+import { RevealBoundaryStore } from './RevealBoundryStore.js';
+import type { CachedBoundingRect, CachedStyle } from './utils/types.js';
+export declare class BaseConfig<T extends Element> {
+    protected _store: RevealBoundaryStore;
+    pxRatio: number;
+    readonly container: HTMLElement;
+    readonly element: T;
+    protected readonly computedStyle: ComputedStyleStorage;
+    paintedWidth: number;
+    paintedHeight: number;
+    currentFrameId: number;
+    cachedBoundingRectFrameId: number;
+    cachedBoundingRect: CachedBoundingRect;
+    cachedStyleFrameId: number;
+    cachedStyle: CachedStyle;
+    dirty: boolean;
+    shapeDirty: boolean;
+    fillDirty: boolean;
+    animationDirty: boolean;
+    /**
+     * If is cleaned up by `RevealBoundaryStore` during animation
+     * duration checkup.
+     */
+    cleanedUpForAnimation: boolean;
+    mouseUpClientX: number | null;
+    mouseUpClientY: number | null;
+    mouseDownAnimateStartFrame: number | null;
+    mouseDownAnimateCurrentFrame: number | null;
+    mouseDownAnimateReleasedFrame: number | null;
+    mouseDownAnimateLogicFrame: number | null;
+    mousePressed: boolean;
+    mouseReleased: boolean;
+    constructor(store: RevealBoundaryStore, $canvas: T, $container: HTMLElement);
+    cacheBoundingRect: () => void;
+    getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string) => [number, number];
+    getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string;
+    getNumberPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => number;
+    cacheCanvasPaintingStyle: () => void;
+    mouseInCanvas: () => boolean;
+    syncSizeToRevealRadius: (x: HTMLCanvasElement, factor: number) => void;
+}
+//# sourceMappingURL=BaseConfig.d.ts.map

package/build/BaseConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseConfig.d.ts","sourceRoot":"","sources":["../src/BaseConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE1F,qBAAa,UAAU,CAAC,CAAC,SAAS,OAAO;IACrC,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAEtC,OAAO,SAAgC;IAEvC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAEpB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,oBAAoB,CAAC;IAEvD,YAAY,SAAK;IACjB,aAAa,SAAK;IAElB,cAAc,EAAE,MAAM,CAAM;IAE5B,yBAAyB,EAAE,MAAM,CAAM;IAEvC,kBAAkB,EAAE,kBAAkB,CAKpC;IAEF,kBAAkB,EAAE,MAAM,CAAM;IAEhC,WAAW,EAAE,WAAW,CA2BtB;IAEF,KAAK,EAAE,OAAO,CAAS;IAEvB,UAAU,EAAE,OAAO,CAAQ;IAC3B,SAAS,EAAE,OAAO,CAAQ;IAC1B,cAAc,EAAE,OAAO,CAAQ;IAE/B;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,4BAA4B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnD,6BAA6B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpD,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,YAAY,UAAS;IAErB,aAAa,UAAS;gBAEV,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,WAAW;IAS3E,iBAAiB,aAaf;IAEF,iBAAiB,6EAsBf;IAEF,yBAAyB,iBAAkB,MAAM,gBAAgB,MAAM,YAKrE;IAEF,+BAA+B,iBAAkB,MAAM,gBAAgB,MAAM,YAK3E;IAEF,wBAAwB,aA8ItB;IAEF,aAAa,gBAOX;IAEF,sBAAsB,MAAO,iBAAiB,UAAU,MAAM,UAU5D;CACL"}

package/build/CanvasConfig.d.ts

@@ -1,101 +1,16 @@
 import { RevealBoundaryStore } from './RevealBoundryStore.js';
-declare type BorderDecoration = 'round' | 'bevel' | 'miter';
-export interface CachedBoundingRect {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}
-export interface CachedStyle {
-    color: string;
-    opacity: number;
-    trueFillRadius: [number, number];
-    borderStyle: string;
-    borderColor: string;
-    borderFillRadius: number;
-    borderDecorationType: BorderDecoration;
-    borderDecorationRadius: number;
-    topLeftBorderDecorationRadius: number;
-    topRightBorderDecorationRadius: number;
-    bottomLeftBorderDecorationRadius: number;
-    bottomRightBorderDecorationRadius: number;
-    withLeftBorderFactor: number;
-    withRightBorderFactor: number;
-    withTopBorderFactor: number;
-    withBottomBorderFactor: number;
-    borderWidth: number;
-    hoverLight: boolean;
-    hoverLightColor: string;
-    hoverLightFillMode: string;
-    hoverLightFillRadius: number;
-    diffuse: boolean;
-    pressAnimation: boolean;
-    pressAnimationFillMode: string;
-    pressAnimationColor: string;
-    pressAnimationSpeed: number;
-    releaseAnimationAccelerateRate: number;
-}
-interface CachedReveal {
-    radius: number;
-    radiusFactor: number;
-    color: string;
-    opacity: number;
-    pattern: CanvasPattern | null;
-}
-/**
- * Cached border and body pattern, for faster painting on the canvas.
- * @interface CachedRevealBitmap
- */
-export interface CachedRevealBitmap {
-    cachedReveal: {
-        borderReveal: CachedReveal;
-        fillReveal: CachedReveal;
-    };
-    cachedCanvas: {
-        borderReveal: HTMLCanvasElement;
-        fillReveal: HTMLCanvasElement;
-    };
-    cachedCtx: {
-        borderReveal: CanvasRenderingContext2D | null;
-        fillReveal: CanvasRenderingContext2D | null;
-    };
-}
-export declare class CanvasConfig {
-    protected _store: RevealBoundaryStore;
-    pxRatio: number;
-    readonly container: HTMLElement;
-    readonly canvas: HTMLCanvasElement;
+import type { CachedRevealBitmap } from './utils/types.js';
+import { BaseConfig } from './BaseConfig.js';
+export declare class CanvasConfig extends BaseConfig<HTMLCanvasElement> {
     ctx: CanvasRenderingContext2D | null;
-    private readonly computedStyle;
-    paintedWidth: number;
-    paintedHeight: number;
     protected cachedImg: CachedRevealBitmap;
-    currentFrameId: number;
-    cachedBoundingRectFrameId: number;
-    cachedBoundingRect: CachedBoundingRect;
-    cachedStyleFrameId: number;
-    cachedStyle: CachedStyle;
-    mouseUpClientX: number | null;
-    mouseUpClientY: number | null;
-    mouseDownAnimateStartFrame: number | null;
-    mouseDownAnimateCurrentFrame: number | null;
-    mouseDownAnimateReleasedFrame: number | null;
-    mouseDownAnimateLogicFrame: number | null;
-    mousePressed: boolean;
-    mouseReleased: boolean;
     constructor(store: RevealBoundaryStore, $canvas: HTMLCanvasElement, $container: HTMLElement);
-    cacheBoundingRect: () => void;
-    getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string) => [number, number];
-    getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string;
-    cacheCanvasPaintingStyle: () => void;
     updateCachedReveal: () => void;
     updateCachedBitmap: () => void;
-    mouseInCanvas: () => boolean;
-    syncSizeToElement: (x: HTMLCanvasElement) => void;
-    syncSizeToRevealRadius: (x: HTMLCanvasElement, factor: number) => void;
-    updateAnimateGrd: (frame: number, grd: CanvasGradient) => void;
+    private updateAnimateGrd;
     private drawShape;
-    paint: (force?: boolean | undefined, debug?: boolean | undefined) => boolean;
+    syncSizeToElement: (x: HTMLCanvasElement) => void;
+    clear: () => boolean;
+    paint: (skipSamePointerPositionCheck?: boolean | undefined) => boolean;
 }
-export {};
 //# sourceMappingURL=CanvasConfig.d.ts.map

package/build/CanvasConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasConfig.d.ts","sourceRoot":"","sources":["../src/CanvasConfig.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"CanvasConfig.d.ts","sourceRoot":"","sources":["../src/CanvasConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,qBAAa,YAAa,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IAC3D,GAAG,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAErC,SAAS,CAAC,SAAS,EAAE,kBAAkB,CAAC;gBAE5B,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW;IAqC3F,kBAAkB,aA0DhB;IAEF,kBAAkB,aAGhB;IAEF,OAAO,CAAC,gBAAgB,CAgBtB;IAEF,OAAO,CAAC,SAAS,CA8Hf;IAEF,iBAAiB,MAAO,iBAAiB,UASvC;IAEF,KAAK,gBAeJ;IAED,KAAK,0DAA6C,OAAO,CA4HvD;CACL"}

package/build/CustomElements.d.ts

@@ -20,12 +20,16 @@ export declare class AxRevealBoundary extends PatchedHTMLElement {
     private set storage(value);
     waitForStorage(f: (storage: RevealBoundaryStore) => void): void;
     private appendStorage;
-    updatePointerPosition: (ev: MouseEvent) => void;
+    /**
+     * Update the position of your pointer.
+     * @param ev Pointer event from the listener.
+     */
+    updatePointerPosition: (ev: PointerEvent) => void;
     handlePointerEnter: () => void;
     handlePointerLeave: () => void;
-    handlePointerMove: (ev: MouseEvent) => void;
-    handlePointerUp: () => void;
-    handlePointerDown: (ev: MouseEvent) => void;
+    handlePointerMove: (ev: PointerEvent) => void;
+    handlePointerUp: (ev: PointerEvent) => void;
+    handlePointerDown: (ev: PointerEvent) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     constructor();
@@ -36,6 +40,18 @@ export declare class AxReveal extends PatchedHTMLElement {
     private canvas;
     private boundary;
     adoptedCallback(): void;
+    handlePointerDown: (ev: PointerEvent) => void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    constructor();
+}
+export declare class AxRevealNg extends PatchedHTMLElement {
+    static readonly ElementName = "ax-reveal-ng";
+    private root;
+    private svg;
+    private boundary;
+    adoptedCallback(): void;
+    handlePointerDown: (ev: PointerEvent) => void;
     disconnectedCallback(): void;
     connectedCallback(): void;
     constructor();

package/build/CustomElements.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAY9D,QAAA,MAAM,kBAAkB;;;CAGP,CAAC;AAElB,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,wBAAwB;IACnD,QAAQ,CAAC,YAAY,qBAA4B;CACpD;AAED,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAqB;IAEhD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,mBAAmB,oBAAoB;IAEvD,OAAO,CAAC,IAAI,CAAuC;IAEnD,MAAM,CAAC,QAAQ,CAAC,YAAY,qBAA4B;IAExD,OAAO,CAAC,QAAQ,CAAmC;IAEnD,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,OAAO,QAkBlB;IAEM,cAAc,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI;IAQ/D,OAAO,CAAC,aAAa;IAWrB,qBAAqB,OAAQ,UAAU,UAKrC;IAEF,kBAAkB,aAA0E;IAC5F,kBAAkB,aAA0E;IAC5F,iBAAiB,OAAQ,UAAU,UAAoC;IACvE,eAAe,aAAmE;IAClF,iBAAiB,OAAQ,UAAU,UAGhC;IAEH,iBAAiB;IAWjB,oBAAoB;;CAWvB;AAED,qBAAa,QAAS,SAAQ,kBAAkB;IAC5C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAe;IAC1C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,oBAAoB;IAIpB,iBAAiB;;CA6BpB"}
+{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAwB9D,QAAA,MAAM,kBAAkB;;;CAC+F,CAAC;AAExH,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,wBAAwB;IACnD,QAAQ,CAAC,YAAY,qBAA4B;CACpD;AAED,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAqB;IAEhD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,mBAAmB,oBAAoB;IAEvD,OAAO,CAAC,IAAI,CAAuC;IAEnD,MAAM,CAAC,QAAQ,CAAC,YAAY,qBAA4B;IAExD,OAAO,CAAC,QAAQ,CAAmC;IAEnD,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,OAAO,QAoBlB;IAEM,cAAc,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI;IAQ/D,OAAO,CAAC,aAAa;IAWrB;;;OAGG;IACH,qBAAqB,OAAQ,YAAY,UAKvC;IAEF,kBAAkB,aAA4E;IAC9F,kBAAkB,aAA4E;IAC9F,iBAAiB,OATY,YAAY,UASM;IAC/C,eAAe,OAAQ,YAAY,UAMjC;IACF,iBAAiB,OAAQ,YAAY,UAI9B;IAEP,iBAAiB;IAWjB,oBAAoB;;CAWvB;AAED,qBAAa,QAAS,SAAQ,kBAAkB;IAC5C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAe;IAC1C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,iBAAiB,OAAQ,YAAY,UAEnC;IAEF,oBAAoB;IAIpB,iBAAiB;;CAmCpB;AAED,qBAAa,UAAW,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAkB;IAC7C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,iBAAiB,OAAQ,YAAY,UAEnC;IAEF,oBAAoB;IAIpB,iBAAiB;;CAsDpB"}

package/build/RevealBoundryStore.d.ts

@@ -1,4 +1,6 @@
 import { CanvasConfig } from './CanvasConfig.js';
+import { SvgConfig } from './SvgConfig.js';
+declare type Config = CanvasConfig | SvgConfig;
 export declare class RevealBoundaryStore {
     id: number;
     container: HTMLElement;
@@ -7,10 +9,9 @@ export declare class RevealBoundaryStore {
     paintedClientX: number;
     paintedClientY: number;
     mouseInBoundary: boolean;
-    canvasList: CanvasConfig[];
-    animationQueue: CanvasConfig[];
+    canvasList: Config[];
+    animationQueue: Config[];
     animationFrame: number | null;
-    dirty: boolean;
     mouseUpClientX: null;
     mouseUpClientY: null;
     mouseDownAnimateStartFrame: null;
@@ -20,18 +21,57 @@ export declare class RevealBoundaryStore {
     mousePressed: boolean;
     mouseReleased: boolean;
     maxRadius: number;
+    requestedAnimationFrame: boolean;
     constructor(id: number, $el: HTMLElement);
-    addReveal: ($canvas: HTMLCanvasElement, $container: HTMLElement) => void;
-    removeReveal: ($el: HTMLCanvasElement) => void;
+    addReveal: ($element: HTMLCanvasElement | SVGElement, $container: HTMLElement) => void;
+    removeReveal: ($el: HTMLCanvasElement | SVGElement) => void;
     updateMaxRadius: (x: number) => void;
-    onPointerMoveOnScreen: (x: number, y: number) => boolean;
+    requestPaintAll: (cleanup?: boolean | undefined) => void;
+    updatePointerPosition: (x: number, y: number) => void;
+    onPointerMoveOnScreen: (x: number, y: number) => true | undefined;
+    /**
+     * Repaint all canvas while user's pointer has entered the boundary.
+     */
     onPointerEnterBoundary: () => void;
+    /**
+     * Clear all canvas while user's pointer leave the bounary.
+     */
     onPointerLeaveBoundary: () => void;
-    paintAll: (frame: number, force?: boolean | undefined) => void;
-    resetAll: () => void;
+    /**
+     * 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;
+    /**
+     * Clear all canvas.
+     */
+    clearAll: (forAnimation: boolean) => void;
+    /**
+     * This is the effect while user pressed on the reveal highlight,
+     * the ripple start to spread slowly.
+     */
     initializeAnimation: () => void;
+    /**
+     * This is the effect while user released it's pointer, the spreading
+     * ripple animation will start to accelerate.
+     */
     switchAnimation: () => void;
-    cleanUpAnimation: (config: CanvasConfig) => void;
-    getRevealAnimationConfig: () => CanvasConfig | null;
+    /**
+     * Cleanup all animations.
+     * @param skipPaint Only cleanup data or also clean up the canvas
+     * @param forceClean Clean the canvas or not
+     */
+    cleanupAnimation: (skipPaint?: boolean | undefined, forceClean?: boolean | undefined) => void;
+    /**
+     * 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 | undefined, forceClean?: boolean | undefined) => void;
+    getRevealAnimationConfig: () => Config | null;
 }
+export {};
 //# sourceMappingURL=RevealBoundryStore.d.ts.map

package/build/RevealBoundryStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RevealBoundryStore.d.ts","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,qBAAa,mBAAmB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IAGvB,OAAO,SAAS;IAChB,OAAO,SAAS;IAGhB,cAAc,SAAS;IACvB,cAAc,SAAS;IAEvB,eAAe,UAAS;IACxB,UAAU,EAAE,YAAY,EAAE,CAAM;IAEhC,cAAc,EAAE,YAAY,EAAE,CAAM;IACpC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,KAAK,UAAS;IAEd,cAAc,OAAQ;IACtB,cAAc,OAAQ;IACtB,0BAA0B,OAAQ;IAClC,4BAA4B,OAAQ;IACpC,6BAA6B,OAAQ;IACrC,0BAA0B,OAAQ;IAClC,YAAY,UAAS;IACrB,aAAa,UAAS;IAEtB,SAAS,SAAM;gBAEH,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW;IAKxC,SAAS,YAAa,iBAAiB,cAAc,WAAW,UAQ9D;IAEF,YAAY,QAAS,iBAAiB,UAIpC;IAEF,eAAe,MAAO,MAAM,UAE3B;IAED,qBAAqB,MAAO,MAAM,KAAK,MAAM,aAc5C;IAED,sBAAsB,aAMpB;IAEF,sBAAsB,aAGpB;IAEF,QAAQ,UAAW,MAAM,uCAkDvB;IAEF,QAAQ,aAKN;IAEF,mBAAmB,aAYjB;IAEF,eAAe,aASb;IAEF,gBAAgB,WAAY,YAAY,UAgBtC;IAEF,wBAAwB,4BAEtB;CACL"}
+{"version":3,"file":"RevealBoundryStore.d.ts","sourceRoot":"","sources":["../src/RevealBoundryStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,aAAK,MAAM,GAAG,YAAY,GAAG,SAAS,CAAC;AAEvC,qBAAa,mBAAmB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IAGvB,OAAO,SAAS;IAChB,OAAO,SAAS;IAGhB,cAAc,SAAS;IACvB,cAAc,SAAS;IAEvB,eAAe,UAAS;IACxB,UAAU,EAAE,MAAM,EAAE,CAAM;IAE1B,cAAc,EAAE,MAAM,EAAE,CAAM;IAC9B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErC,cAAc,OAAQ;IACtB,cAAc,OAAQ;IACtB,0BAA0B,OAAQ;IAClC,4BAA4B,OAAQ;IACpC,6BAA6B,OAAQ;IACrC,0BAA0B,OAAQ;IAClC,YAAY,UAAS;IACrB,aAAa,UAAS;IAEtB,SAAS,SAAM;IAEf,uBAAuB,UAAS;gBAEpB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW;IAKxC,SAAS,aAAc,iBAAiB,GAAG,UAAU,cAAc,WAAW,UAiB5E;IAEF,YAAY,QAAS,iBAAiB,GAAG,UAAU,UAIjD;IAEF,eAAe,MAAO,MAAM,UAE1B;IAEF,eAAe,0CAQb;IAEF,qBAAqB,MAAO,MAAM,KAAK,MAAM,UAc5C;IAED,qBAAqB,MAAO,MAAM,KAAK,MAAM,sBAK3C;IAEF;;OAEG;IACH,sBAAsB,aAMpB;IAEF;;OAEG;IACH,sBAAsB,aAGpB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,CAsEd;IAEF;;OAEG;IACH,QAAQ,iBAAkB,OAAO,UAE/B;IAEF;;;OAGG;IACH,mBAAmB,aAYjB;IAEF;;;OAGG;IACH,eAAe,aAWb;IAEF;;;;OAIG;IACH,gBAAgB,8EAMf;IAED;;;;;OAKG;IACH,oBAAoB,WAAY,MAAM,6EAwBpC;IAEF,wBAAwB,sBAEtB;CACL"}

package/build/RevealStateManager.d.ts

@@ -6,6 +6,9 @@ export declare class RevealStateManager {
     cachedMouseX: number;
     cachedMouseY: number;
     constructor();
+    pointerLeaveScheduled: boolean;
+    handlePointerLeave: () => void;
+    handlePointerMove: (event: PointerEvent) => void;
     traverseBoundaries: () => void;
     newBoundary: ($el: HTMLElement) => RevealBoundaryStore;
     removeBoundary: (store: RevealBoundaryStore) => void;

package/build/RevealStateManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RevealStateManager.d.ts","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAA6B;IAE7C,OAAO,CAAC,2BAA2B,CAAS;IAC5C,YAAY,SAAM;IAClB,YAAY,SAAM;;IAkBlB,kBAAkB,aAKjB;IAED,WAAW,QAAS,WAAW,yBAO7B;IAEF,cAAc,UAAW,mBAAmB,UAE1C;CACL"}
+{"version":3,"file":"RevealStateManager.d.ts","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,qBAAa,kBAAkB;IAC3B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,QAAQ,CAA6B;IAE7C,OAAO,CAAC,2BAA2B,CAAS;IAC5C,YAAY,SAAM;IAClB,YAAY,SAAM;;IA8BlB,qBAAqB,UAAS;IAE9B,kBAAkB,aAYjB;IAED,iBAAiB,UAAW,YAAY,UAQtC;IAEF,kBAAkB,aAKhB;IAEF,WAAW,QAAS,WAAW,yBAO7B;IAEF,cAAc,UAAW,mBAAmB,UAE1C;CACL"}

package/build/SvgConfig.d.ts

@@ -0,0 +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;
+}
+//# sourceMappingURL=SvgConfig.d.ts.map

package/build/SvgConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgConfig.d.ts","sourceRoot":"","sources":["../src/SvgConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,qBAAa,SAAU,SAAQ,UAAU,CAAC,aAAa,CAAC;IACpD,SAAS,CAAC,SAAS,EAAE,gBAAgB,CAAC;gBAE1B,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IAuDpF,kBAAkB,aACjB;IAED,kBAAkB,aA2BhB;IAEF,OAAO,CAAC,gBAAgB,CA0BtB;IAEF,OAAO,CAAC,sBAAsB,CAQ7B;IAED,OAAO,CAAC,SAAS,CAgJf;IAEF,iBAAiB,MAAO,aAAa,UASnC;IAEF,KAAK,iBAAkB,OAAO,UAI7B;IAED,OAAO,CAAC,aAAa,CAWpB;IAED,KAAK,0DAA6C,OAAO,CA8GvD;CACL"}

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,gCAAgC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,YAAY,GAAG,qBAAqB,CAAC;CAC7D;AAID,wBAAgB,QAAQ,CAAC,EACrB,MAAc,EACd,mBAAkC,GACrC,EAAE,gCAAgC,QA4MlC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,MAAM,WAAW,gCAAgC;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,YAAY,GAAG,qBAAqB,CAAC;CAC7D;AAID,wBAAgB,QAAQ,CAAC,EACrB,MAAc,EACd,mBAAkC,GACrC,EAAE,gCAAgC,QAqMlC"}