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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 ax-design
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 ax-design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,235 +1,76 @@
-<h1 align="center">
-  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/logo.png" alt="Reveal Hightlight">
-</h1>
-
-<p align="center">
-  React component that implements Reveal Highlight of Axiom Design System.
-</p>
-
-<p align="center">
-  <a href="https://www.npmjs.com/package/@ax-design/reveal-highlight"><img src="https://img.shields.io/npm/v/@ax-design/reveal-highlight.svg" alt="npm version"></a>
-  <a href="https://travis-ci.com/ax-design/reveal-highlight"><img src="https://travis-ci.com/ax-design/reveal-highlight.svg?branch=master" alt="CI status"></a>
-  <a href="https://deepscan.io/dashboard#view=project&tid=4412&pid=6185&bid=50120"><img src="https://deepscan.io/api/teams/4412/projects/6185/branches/50120/badge/grade.svg" alt="DeepScan grade"></a>
-  <a href="https://t.me/axiom_chat"><img src="https://img.shields.io/badge/chat-on%20Telegram-%230088cc.svg" alt="Telegram chat group" /></a>
-  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT Licence" />
-
-</p>
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/screen-record.gif" alt="Screenshot">
-</p>
-
-## Installation
-
-```bash
-// with npm
-npm install @ax-design/reveal-highlight
-
-// with yarn
-yarn add @ax-design/reveal-highlight
-```
-
-and import it:
-
-```javascript
-//CommonJS
-require('@ax-design/reveal-highlight').register();
-
-//ESModule
-import { register } from '@ax-design/reveal-highlight';
-register();
-```
-
-## Usage
-
-To add a reveal effect on your web application, you need to wrap a `ax-reveal` component with `ax-reveal-provider` and `ax-reveal-bound`.
-
-`ax-reveal-provider` will manage the global reveal style, and cache the rendered highlight bitmap for better performance (WIP).
-
-`ax-reveal-bound` will manage the rendering behavior of `ax-reveal` components, while your mouse enters the boundary, the highlight components will get started to rendering, while your mouse leaves the boundary component, all highlight effect will disappear.
-
-Here's an example:
-
-```html
-<ax-reveal-provider>
-  <h1>Welcome to project Axiom!</h1>
-  <ax-reveal-bound>
-    <ax-reveal>
-      <button class="ax-reveal-button">Button 1</button>
-    </ax-reveal>
-    <ax-reveal>
-      <button class="ax-reveal-button">Button 2</button>
-    </ax-reveal>
-  </ax-reveal-bound>
-<ax-reveal-provider>
-```
-
-## Style Controlling
-
-reveal-highlight use custom properties to manage the style of highlights
-
-### 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.
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/logo.png" alt="Reveal Hightlight">
+</h1>
+
+<p align="center">
+  React component that implements Reveal Highlight of Axiom Design System.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@ax-design/reveal-highlight"><img src="https://img.shields.io/npm/v/@ax-design/reveal-highlight.svg" alt="npm version"></a>
+  <a href="https://travis-ci.com/ax-design/reveal-highlight"><img src="https://travis-ci.com/ax-design/reveal-highlight.svg?branch=master" alt="CI status"></a>
+  <a href="https://deepscan.io/dashboard#view=project&tid=4412&pid=6185&bid=50120"><img src="https://deepscan.io/api/teams/4412/projects/6185/branches/50120/badge/grade.svg" alt="DeepScan grade"></a>
+  <a href="https://t.me/axiom_chat"><img src="https://img.shields.io/badge/chat-on%20Telegram-%230088cc.svg" alt="Telegram chat group" /></a>
+  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT Licence" />
+
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/screen-record.gif" alt="Screenshot">
+</p>
+
+## Installation
+
+```bash
+// with npm
+npm install @ax-design/reveal-highlight
+
+// with yarn
+yarn add @ax-design/reveal-highlight
+```
+
+and import it:
+
+```javascript
+//CommonJS
+require('@ax-design/reveal-highlight').register();
+
+//ESModule
+import { register } from '@ax-design/reveal-highlight';
+register({
+  compat: true,
+  borderDetectionMode: 'experimentalAutoFit',
+});
+```
+
+## Usage
+
+To add a reveal effect on your web application, you need to wrap a `ax-reveal` component with `ax-reveal-provider` and `ax-reveal-bound`.
+
+`ax-reveal-provider` will manage the global reveal style, and cache the rendered highlight bitmap for better performance (WIP).
+
+`ax-reveal-bound` will manage the rendering behavior of `ax-reveal` components, while your mouse enters the boundary, the highlight components will get started to rendering, while your mouse leaves the boundary component, all highlight effect will disappear.
+
+Here's an example:
+
+```html
+<ax-reveal-provider>
+  <h1>Welcome to project Axiom!</h1>
+  <ax-reveal-bound>
+    <ax-reveal>
+      <button class="ax-reveal-button">Button 1</button>
+    </ax-reveal>
+    <ax-reveal>
+      <button class="ax-reveal-button">Button 2</button>
+    </ax-reveal>
+  </ax-reveal-bound>
+<ax-reveal-provider>
+```
+
+## Style Controlling
+
+* Checkout this living example for detailed usage:
+https://ax-design.github.io/playground/?path=/story/components-fundamental-elements-reveal-highlight--basic
+
+* 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