@ax-design/reveal-highlight 0.4.1 → 0.4.2

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,76 +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({
-  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:
+<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/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;;IAsBlB,qBAAqB,UAAS;IAE9B,kBAAkB,aAYjB;IAED,iBAAiB,UAAW,YAAY,UAQtC;IAEF,kBAAkB,aAKhB;IAEF,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/main.js

@@ -121,7 +121,7 @@ const a=e-r.mouseDownAnimateStartFrame;r.mouseDownAnimateCurrentFrame=a;const i=
 // and Logic Frame represents the progress of the animation
 // in this process.
 let n=a;r.mouseReleased&&r.mouseDownAnimateReleasedFrame&&(n+=(a-r.mouseDownAnimateReleasedFrame)*o),r.mouseDownAnimateLogicFrame=n/i,1<r.mouseDownAnimateLogicFrame&&(r.cleanedUpForAnimation=!0)}// Paint the canvas one by one
-for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.currentFrameId=e,a.cleanedUpForAnimation)this.cleanUpAnimationUnit(a,!1),a.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(a);this.mouseInBoundary||e?a.paint(t):a.clear(!1)}}this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.mouseInBoundary||0!==this.animationQueue.length?this.requestPaintAll():this.animationFrame=null}},this.clearAll=e=>{this.cleanupAnimation(e,!0)},this.initializeAnimation=()=>{const e=this.canvasList.find(e=>e.mouseInCanvas());e&&(!this.animationQueue.includes(e)&&this.animationQueue.push(e),e.mouseDownAnimateStartFrame=null,e.mousePressed=!0,e.mouseReleased=!1)},this.switchAnimation=()=>{for(let e=0;e<this.animationQueue.length;e++){const t=this.animationQueue[e];t.mouseReleased||(t.mouseReleased=!0,t.mouseDownAnimateReleasedFrame=t.mouseDownAnimateCurrentFrame,t.mouseUpClientX=this.clientX,t.mouseUpClientY=this.clientY)}},this.cleanupAnimation=(e,t)=>{for(let r=0;r<this.animationQueue.length;r++){const a=this.animationQueue[r];this.cleanUpAnimationUnit(a,e,t)}},this.cleanUpAnimationUnit=(e,t,r)=>{e.mouseUpClientX=null,e.mouseUpClientY=null,e.mouseDownAnimateStartFrame=null,e.mouseDownAnimateCurrentFrame=null,e.mouseDownAnimateReleasedFrame=null,e.mouseDownAnimateLogicFrame=null,e.mousePressed=!1,e.mouseReleased=!1;const a=this.animationQueue.indexOf(e);-1<a&&this.animationQueue.splice(a,1),t||(r?e.clear(!1):this.mouseInBoundary?e.paint(!0):e.clear(!0))},this.getRevealAnimationConfig=()=>this.canvasList.find(e=>e.mouseInCanvas())||null,this.id=e,this.container=t}}class x{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.pointerLeaveScheduled=!1,this.handlePointerLeave=()=>{this.pointerLeaveScheduled||(this.pointerLeaveScheduled=!0,window.requestAnimationFrame(()=>{for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerLeaveBoundary();this.pointerLeaveScheduled=!1}))},this.handlePointerMove=e=>{this.cachedMouseX=e.clientX,this.cachedMouseY=e.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)},this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=e=>{const t=this._currentHashId++,r=new b(t,e);return this._storage.push(r),r},this.removeBoundary=e=>{this._storage=this._storage.filter(t=>t!==e)},"experimentalAutoFit"===p.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerup",e=>{"mouse"!==e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointerleave",e=>{"mouse"===e.pointerType&&this.handlePointerLeave()})}}}const F="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class P extends F{constructor(){super(...arguments),this.stateManager=new x}}P.ElementName="ax-reveal-provider";class C extends F{constructor(){/**
+for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.currentFrameId=e,a.cleanedUpForAnimation)this.cleanUpAnimationUnit(a,!1),a.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(a);this.mouseInBoundary||e?a.paint(t):a.clear(!1)}}this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.mouseInBoundary||0!==this.animationQueue.length?this.requestPaintAll():this.animationFrame=null}},this.clearAll=e=>{this.cleanupAnimation(e,!0)},this.initializeAnimation=()=>{const e=this.canvasList.find(e=>e.mouseInCanvas());e&&(!this.animationQueue.includes(e)&&this.animationQueue.push(e),e.mouseDownAnimateStartFrame=null,e.mousePressed=!0,e.mouseReleased=!1)},this.switchAnimation=()=>{for(let e=0;e<this.animationQueue.length;e++){const t=this.animationQueue[e];t.mouseReleased||(t.mouseReleased=!0,t.mouseDownAnimateReleasedFrame=t.mouseDownAnimateCurrentFrame,t.mouseUpClientX=this.clientX,t.mouseUpClientY=this.clientY)}},this.cleanupAnimation=(e,t)=>{for(let r=0;r<this.animationQueue.length;r++){const a=this.animationQueue[r];this.cleanUpAnimationUnit(a,e,t)}},this.cleanUpAnimationUnit=(e,t,r)=>{e.mouseUpClientX=null,e.mouseUpClientY=null,e.mouseDownAnimateStartFrame=null,e.mouseDownAnimateCurrentFrame=null,e.mouseDownAnimateReleasedFrame=null,e.mouseDownAnimateLogicFrame=null,e.mousePressed=!1,e.mouseReleased=!1;const a=this.animationQueue.indexOf(e);-1<a&&this.animationQueue.splice(a,1),t||(r?e.clear(!1):this.mouseInBoundary?e.paint(!0):e.clear(!0))},this.getRevealAnimationConfig=()=>this.canvasList.find(e=>e.mouseInCanvas())||null,this.id=e,this.container=t}}class x{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.pointerLeaveScheduled=!1,this.handlePointerLeave=()=>{this.pointerLeaveScheduled||(this.pointerLeaveScheduled=!0,window.requestAnimationFrame(()=>{for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerLeaveBoundary();this.pointerLeaveScheduled=!1}))},this.handlePointerMove=e=>{this.cachedMouseX=e.clientX,this.cachedMouseY=e.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)},this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=e=>{const t=this._currentHashId++,r=new b(t,e);return this._storage.push(r),r},this.removeBoundary=e=>{this._storage=this._storage.filter(t=>t!==e)},"experimentalAutoFit"===p.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerup",e=>{"mouse"!==e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointerleave",e=>{"mouse"===e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointercancel",()=>{console.log("pointer cancel"),this.handlePointerLeave()})}}}const F="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class P extends F{constructor(){super(...arguments),this.stateManager=new x}}P.ElementName="ax-reveal-provider";class C extends F{constructor(){/**
              * Update the position of your pointer.
              * @param ev Pointer event from the listener.
              */super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=e=>{this.waitForStorage(t=>{t.clientX=e.clientX,t.clientY=e.clientY})},this.handlePointerEnter=()=>this.waitForStorage(e=>e.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(e=>e.onPointerLeaveBoundary()),this.handlePointerMove=this.updatePointerPosition,this.handlePointerUp=e=>{"mouse"===e.pointerType?this.waitForStorage(e=>e.switchAnimation()):this.waitForStorage(e=>e.clearAll(!1))},this.handlePointerDown=e=>this.waitForStorage(t=>{this.updatePointerPosition(e),t.initializeAnimation()}),this.root.innerHTML=`

package/es/CustomElements.js

@@ -63,9 +63,9 @@ export class AxRevealBoundary extends PatchedHTMLElement {
             this.updatePointerPosition(ev);
             storage.initializeAnimation();
         });
-        this.root.innerHTML = `
-<div>
-    <slot></slot>
+        this.root.innerHTML = `
+<div>
+    <slot></slot>
 </div>`;
     }
     get storage() {
@@ -129,25 +129,25 @@ export class AxReveal extends PatchedHTMLElement {
         this.handlePointerDown = (ev) => {
             this.setPointerCapture(ev.pointerId);
         };
-        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; }
+        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');
     }
@@ -174,44 +174,44 @@ export class AxRevealNg extends PatchedHTMLElement {
         this.handlePointerDown = (ev) => {
             this.setPointerCapture(ev.pointerId);
         };
-        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; }
+        this.root.innerHTML = `
+<div class="ax-reveal">
+    <svg>
+        <defs>
+            <radialGradient id="borderGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="borderCenter" offset="0%" />
+                <stop id="borderOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="fillGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="fillCenter" offset="0%" />
+                <stop id="fillOut" offset="100%" />
+            </radialGradient>
+            <radialGradient id="rippleGrad" gradientUnits="userSpaceOnUse" r="10">
+                <stop id="rippleCenter" offset="0%" />
+                <stop id="rippleMiddle" offset="0%" />
+                <stop id="rippleOut" offset="0%" />
+            </radialGradient>
+        </defs>
+        <path id="borderPath" fill="url(#borderGrad)" />
+        <path id="fillPath" fill="url(#fillGrad)" />
+        <path id="ripplePath" fill="url(#rippleGrad)" />
+    </svg>
+    <div class="content"><slot></slot></div>
+</div>
+<style>
+    .ax-reveal { display: contents; }
+    .ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
+    .content { position: relative; }
+    svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
+    :host { display: inline-block; position: relative; }
+    :host([block]) { display: block; }
+    :host([inline-block]) { display: inline-block; }
+    :host([flex]) { display: flex; }
+    :host([inline-flex]) { display: inline-flex; }
+    :host([grid]) { display: grid; }
+    :host([inline-grid]) { display: inline-grid; }
+    ::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
+    ::slotted(button) { outline:none; }
 </style>`;
         this.svg = this.root.querySelector('svg');
     }

package/es/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;;IAsBlB,qBAAqB,UAAS;IAE9B,kBAAkB,aAYjB;IAED,iBAAiB,UAAW,YAAY,UAQtC;IAEF,kBAAkB,aAKhB;IAEF,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/es/RevealStateManager.js

@@ -60,6 +60,14 @@ export class RevealStateManager {
                 if (ev.pointerType === 'mouse')
                     this.handlePointerLeave();
             });
+            // Handles boundary conditions such as the user scrolling
+            // the page, dragging the image, which can cause mouse events
+            // to fail, when Reveal should disappear to prevent the 
+            // image from getting stuck.
+            window.addEventListener('pointercancel', (ev) => {
+                console.log('pointer cancel');
+                this.handlePointerLeave();
+            });
         }
     }
 }

package/es/RevealStateManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"RevealStateManager.js","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RevealStateManager.js","sourceRoot":"","sources":["../src/RevealStateManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,kBAAkB;IAQ3B;QAPQ,mBAAc,GAAG,CAAC,CAAC;QACnB,aAAQ,GAA0B,EAAE,CAAC;QAErC,gCAA2B,GAAG,KAAK,CAAC;QAC5C,iBAAY,GAAG,CAAC,CAAC,CAAC;QAClB,iBAAY,GAAG,CAAC,CAAC,CAAC;QA8BlB,0BAAqB,GAAG,KAAK,CAAC;QAE9B,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,qBAAqB;gBAAE,OAAO;YAEvC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAElC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;gBAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,sBAAsB,EAAE,CAAC;iBAC7C;gBAED,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACvC,CAAC,CAAC,CAAC;QACP,CAAC,CAAA;QAED,sBAAiB,GAAG,CAAC,KAAmB,EAAE,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;YAClC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;YAElC,IAAI,CAAC,IAAI,CAAC,2BAA2B,EAAE;gBACnC,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;gBACtD,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;aAC3C;QACL,CAAC,CAAC;QAEF,uBAAkB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;YACzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;aAChF;QACL,CAAC,CAAC;QAEF,gBAAW,GAAG,CAAC,GAAgB,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAErC,MAAM,KAAK,GAAG,IAAI,mBAAmB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE1B,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC;QAEF,mBAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;YAC5C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;QAC7D,CAAC,CAAC;QAvEE,IAAI,MAAM,CAAC,mBAAmB,KAAK,qBAAqB,EAAE;YACtD,IAAI,OAAO,MAAM,KAAK,WAAW;gBAAE,OAAO;YAE1C,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAC/D,2BAA2B;YAC3B,uDAAuD;YACvD,+CAA+C;YAC/C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,EAAE,EAAE,EAAE;gBACxC,IAAI,EAAE,CAAC,WAAW,KAAK,OAAO;oBAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC9D,CAAC,CAAC,CAAC;YACH,sBAAsB;YACtB,sDAAsD;YACtD,0CAA0C;YAC1C,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC3C,IAAI,EAAE,CAAC,WAAW,KAAK,OAAO;oBAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC9D,CAAC,CAAC,CAAC;YACH,yDAAyD;YACzD,6DAA6D;YAC7D,wDAAwD;YACxD,4BAA4B;YAC5B,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC5C,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC9B,CAAC,CAAC,CAAC;SACN;IACL,CAAC;CA+CJ"}

package/es/SvgConfig.js

@@ -92,96 +92,96 @@ export class SvgConfig extends BaseConfig {
                     // 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 
+                        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} 
+                    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 
+                        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}` : ''} 
+                    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
+                        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}
+                    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