@ax-design/reveal-highlight - npm Package Compare versions

Comparing version 0.3.0-alpha.10 to 0.3.0-alpha.11

build/CanvasConfig.d.ts

@@ -99,5 +99,5 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
     private drawShape;
-    paint: (force?: boolean | undefined, debug?: boolean | undefined) => boolean;
+    paint: (force?: boolean | undefined) => boolean;
 }
 export {};
 //# sourceMappingURL=CanvasConfig.d.ts.map

build/main.js

@@ -16,6 +16,6 @@ (function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a="undefined"==typeof globalThis?a||self:globalThis,b(a.AxRevealHighlight={}))})(this,function(a){'use strict';var d=Math.max;function e(a){return k.compat?new l(a):new m(a)}function f(){customElements.define(u.ElementName,u),customElements.define(v.ElementName,v),customElements.define(w.ElementName,w)}function g({compat:a=!1,borderDetectionMode:b="strictEdge"}){if(y)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(k.borderDetectionMode=b,k.compat=a,y=!0,window.CSS&&window.CSS.registerProperty)window.CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0, 0, 0)",inherits:!0}),window.CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.26",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-style",syntax:"<custom-ident>",initialValue:"full",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-color",syntax:`<color>|${x}`,initialValue:x,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-type",syntax:"<custom-ident>",initialValue:"miter",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-radius",syntax:"<length>",initialValue:"0",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-left",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-right",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-top",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-bottom",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-color",syntax:`<color>|${x}`,initialValue:x,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),window.CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-color",syntax:`<color>|${x}`,initialValue:x,inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-radius-mode",syntax:"<custom-ident>",initialValue:"cover",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),window.CSS.registerProperty({name:"--reveal-release-animation-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0}),f();else if(a){const a=document.documentElement;a.style.setProperty("--reveal-color","rgb(0, 0, 0)"),a.style.setProperty("--reveal-opacity","0.26"),a.style.setProperty("--reveal-border-style","full"),a.style.setProperty("--reveal-border-color",x),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-fill-radius","1.5"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","0"),a.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),a.style.setProperty("--reveal-border-left","line"),a.style.setProperty("--reveal-border-right","line"),a.style.setProperty("--reveal-border-top","line"),a.style.setProperty("--reveal-border-bottom","line"),a.style.setProperty("--reveal-hover-light","true"),a.style.setProperty("--reveal-hover-light-color",x),a.style.setProperty("--reveal-hover-light-fill-radius","1.5"),a.style.setProperty("--reveal-hover-light-fill-radius-mode","relative"),a.style.setProperty("--reveal-diffuse","true"),a.style.setProperty("--reveal-press-animation","true"),a.style.setProperty("--reveal-press-animation-radius-mode","cover"),a.style.setProperty("--reveal-press-animation-color",x),a.style.setProperty("--reveal-press-animation-speed","2000"),a.style.setProperty("--reveal-release-animation-accelerate-rate","6"),f()}else console.warn("Your browser do NOT support `CSS.registerProperty` method, registration failed!"),console.warn("If you are the developer, try using `register(true)` to support old browsers.")}let h="strictEdge",i=!1;class j extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const k={compat:!1,get borderDetectionMode(){return h},set borderDetectionMode(a){if(i)throw new j;h=a,i=!0}};class l{constructor(a){if(!l.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),l.colorParser=a,l.colorParserStyle=window.getComputedStyle(a)}this.el=a,this.style=window.getComputedStyle(a)}size(){return this.style.length}get(a){return this.style.getPropertyValue(a).trim()}getColor(a){return l.colorParser.style.color=this.get(a),l.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
 // The cursor position of painted reveal effect.
-this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,this.dirty=!1,this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.maxRadius=-1,this.addReveal=(a,b)=>{const c=new q(this,a,b);c.cacheBoundingRect(),c.cacheCanvasPaintingStyle(),c.updateCachedBitmap(),this.canvasList.push(c)},this.removeReveal=a=>{this.canvasList=this.canvasList.filter(b=>b&&b.canvas===a)},this.updateMaxRadius=a=>{this.maxRadius=d(a,this.maxRadius)},this.onPointerMoveOnScreen=(a,b)=>{const c=this.container.getBoundingClientRect();return!(a<c.left-this.maxRadius)&&!(a>c.right+this.maxRadius)&&!(b<c.top-this.maxRadius)&&!(b>c.bottom+this.maxRadius)&&(this.mouseInBoundary=!0,this.clientX=a,this.clientY=b,this.animationFrame=window.requestAnimationFrame(this.paintAll),!0)},this.onPointerEnterBoundary=()=>{this.mouseInBoundary=!0,this.animationFrame||(this.animationFrame=window.requestAnimationFrame(this.paintAll))},this.onPointerLeaveBoundary=()=>{this.mouseInBoundary=!1,this.paintAll(0,!0)},this.paintAll=(a,b)=>{if(b||this.mouseInBoundary||0!==this.animationQueue.length){for(let b=0;b<this.animationQueue.length;b++){const c=this.animationQueue[b];if(!a||c.currentFrameId===a)return;c.currentFrameId=a,null===c.mouseDownAnimateStartFrame&&(c.mouseDownAnimateStartFrame=a);const d=a-c.mouseDownAnimateStartFrame;c.mouseDownAnimateCurrentFrame=d;const e=c.cachedStyle.pressAnimationSpeed,f=c.cachedStyle.releaseAnimationAccelerateRate;let g=d;c.mouseReleased&&c.mouseDownAnimateReleasedFrame&&(g+=(d-c.mouseDownAnimateReleasedFrame)*f),c.mouseDownAnimateLogicFrame=g/e,1<c.mouseDownAnimateLogicFrame&&this.cleanUpAnimation(c)}for(let c=0;c<this.canvasList.length;c++){const d=this.canvasList[c];d.currentFrameId=a,d.paint(b)}this.dirty=!0,this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.animationFrame=this.mouseInBoundary||0!==this.animationQueue.length?window.requestAnimationFrame(this.paintAll):null}},this.resetAll=()=>{for(let a=0;a<this.canvasList.length;a++){const b=this.canvasList[a];b.paint()}},this.initializeAnimation=()=>{const a=this.canvasList.find(a=>a.mouseInCanvas());a&&(!this.animationQueue.includes(a)&&this.animationQueue.push(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},this.switchAnimation=()=>{this.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=this.clientX,a.mouseUpClientY=this.clientY)})},this.cleanUpAnimation=a=>{a.mouseUpClientX=null,a.mouseUpClientY=null,a.mouseDownAnimateStartFrame=null,a.mouseDownAnimateCurrentFrame=null,a.mouseDownAnimateReleasedFrame=null,a.mouseDownAnimateLogicFrame=null,a.mousePressed=!1,a.mouseReleased=!1;const b=this.animationQueue.indexOf(a);-1<b&&this.animationQueue.splice(b,1),a.paint(!0)},this.getRevealAnimationConfig=()=>this.canvasList.find(a=>a.mouseInCanvas())||null,this.id=a,this.container=b}}class s{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let a=0;a<this._storage.length;a++)this._storage[a].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=a=>{const b=this._currentHashId++,c=new r(b,a);return this._storage.push(c),c},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b!==a)},"experimentalAutoFit"===k.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",a=>{this.cachedMouseX=a.clientX,this.cachedMouseY=a.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)})}}}const t="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class u extends t{constructor(){super(...arguments),this.stateManager=new s}}u.ElementName="ax-reveal-provider";class v extends t{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=a=>{this.waitForStorage(b=>{b.clientX=a.clientX,b.clientY=a.clientY})},this.handlePointerEnter=()=>this.waitForStorage(a=>a.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(a=>a.onPointerLeaveBoundary()),this.handlePointerMove=a=>this.updatePointerPosition(a),this.handlePointerUp=()=>this.waitForStorage(a=>a.switchAnimation()),this.handlePointerDown=a=>this.waitForStorage(b=>{this.updatePointerPosition(a),b.initializeAnimation()}),this.root.innerHTML=`
+this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,this.dirty=!1,this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.maxRadius=-1,this.addReveal=(a,b)=>{const c=new q(this,a,b);c.cacheBoundingRect(),c.cacheCanvasPaintingStyle(),c.updateCachedBitmap(),this.canvasList.push(c)},this.removeReveal=a=>{this.canvasList=this.canvasList.filter(b=>b&&b.canvas===a)},this.updateMaxRadius=a=>{this.maxRadius=d(a,this.maxRadius)},this.onPointerMoveOnScreen=(a,b)=>{const c=this.container.getBoundingClientRect();return!(a<c.left-this.maxRadius)&&!(a>c.right+this.maxRadius)&&!(b<c.top-this.maxRadius)&&!(b>c.bottom+this.maxRadius)&&(this.mouseInBoundary=!0,this.clientX=a,this.clientY=b,this.animationFrame=window.requestAnimationFrame(this.paintAll),!0)},this.onPointerEnterBoundary=()=>{this.mouseInBoundary=!0,this.animationFrame||(this.animationFrame=window.requestAnimationFrame(this.paintAll))},this.onPointerLeaveBoundary=()=>{this.mouseInBoundary=!1,this.paintAll(0,!0)},this.paintAll=(a,b)=>{if(b||this.mouseInBoundary||0!==this.animationQueue.length){for(let b=0;b<this.animationQueue.length;b++){const c=this.animationQueue[b];if(!a||c.currentFrameId===a)continue;c.currentFrameId=a,null===c.mouseDownAnimateStartFrame&&(c.mouseDownAnimateStartFrame=a);const d=a-c.mouseDownAnimateStartFrame;c.mouseDownAnimateCurrentFrame=d;const e=c.cachedStyle.pressAnimationSpeed,f=c.cachedStyle.releaseAnimationAccelerateRate;let g=d;c.mouseReleased&&c.mouseDownAnimateReleasedFrame&&(g+=(d-c.mouseDownAnimateReleasedFrame)*f),c.mouseDownAnimateLogicFrame=g/e,1<c.mouseDownAnimateLogicFrame&&this.cleanUpAnimation(c)}for(let c=0;c<this.canvasList.length;c++){const d=this.canvasList[c];d.currentFrameId=a,d.paint(b)}this.dirty=!0,this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.animationFrame=this.mouseInBoundary||0!==this.animationQueue.length?window.requestAnimationFrame(this.paintAll):null}},this.resetAll=()=>{for(let a=0;a<this.canvasList.length;a++){const b=this.canvasList[a];b.paint()}},this.initializeAnimation=()=>{const a=this.canvasList.find(a=>a.mouseInCanvas());a&&(!this.animationQueue.includes(a)&&this.animationQueue.push(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},this.switchAnimation=()=>{this.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=this.clientX,a.mouseUpClientY=this.clientY)})},this.cleanUpAnimation=a=>{a.mouseUpClientX=null,a.mouseUpClientY=null,a.mouseDownAnimateStartFrame=null,a.mouseDownAnimateCurrentFrame=null,a.mouseDownAnimateReleasedFrame=null,a.mouseDownAnimateLogicFrame=null,a.mousePressed=!1,a.mouseReleased=!1;const b=this.animationQueue.indexOf(a);-1<b&&this.animationQueue.splice(b,1),a.paint(!0)},this.getRevealAnimationConfig=()=>this.canvasList.find(a=>a.mouseInCanvas())||null,this.id=a,this.container=b}}class s{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.handlePointerMove=a=>{this.cachedMouseX=a.clientX,this.cachedMouseY=a.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)},this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let a=0;a<this._storage.length;a++)this._storage[a].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY)},this.newBoundary=a=>{const b=this._currentHashId++,c=new r(b,a);return this._storage.push(c),c},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b!==a)},"experimentalAutoFit"===k.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerdown",this.handlePointerMove),window.addEventListener("touchend",()=>{for(let a=0;a<this._storage.length;a++)this._storage[a].onPointerLeaveBoundary()})}}}const t="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class u extends t{constructor(){super(...arguments),this.stateManager=new s}}u.ElementName="ax-reveal-provider";class v extends t{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=a=>{this.waitForStorage(b=>{b.clientX=a.clientX,b.clientY=a.clientY})},this.handlePointerEnter=()=>this.waitForStorage(a=>a.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(a=>a.onPointerLeaveBoundary()),this.handlePointerMove=a=>this.updatePointerPosition(a),this.handlePointerUp=()=>this.waitForStorage(a=>a.switchAnimation()),this.handlePointerDown=a=>this.waitForStorage(b=>{this.updatePointerPosition(a),b.initializeAnimation()}),this.root.innerHTML=`
 <div>
     <slot></slot>
-</div>`}get storage(){return this._storage}set storage(a){const b=this._storage;b&&(this.dispatchEvent(new CustomEvent(v.removeStorageEvent,{detail:b})),v.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(v.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(v.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(v.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(u.ElementName),c=b?b.stateManager:v.stateManager;this.storage=c.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===k.borderDetectionMode&&(this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("pointermove",this.handlePointerMove)),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp)}disconnectedCallback(){this.storage=void 0}}v.ElementName="ax-reveal-bound",v.removeStorageEvent="removeStorage",v.attachStorageEvent="attachStorage",v.replaceStorageEvent="replaceStorage",v.stateManager=new s;class w extends t{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+</div>`}get storage(){return this._storage}set storage(a){const b=this._storage;b&&(this.dispatchEvent(new CustomEvent(v.removeStorageEvent,{detail:b})),v.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(v.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(v.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(v.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(u.ElementName),c=b?b.stateManager:v.stateManager;this.storage=c.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===k.borderDetectionMode&&(this.addEventListener("pointerenter",this.handlePointerEnter),this.addEventListener("pointerleave",this.handlePointerLeave),this.addEventListener("pointermove",this.handlePointerMove)),this.addEventListener("pointerdown",this.handlePointerDown),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("touchend",this.handlePointerLeave)}disconnectedCallback(){this.storage=void 0}}v.ElementName="ax-reveal-bound",v.removeStorageEvent="removeStorage",v.attachStorageEvent="attachStorage",v.replaceStorageEvent="replaceStorage",v.stateManager=new s;class w extends t{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
 <div>
@@ -22,0 +22,0 @@ <slot></slot>

build/RevealStateManager.d.ts

@@ -9,2 +9,3 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
     constructor();
+    handlePointerMove: (event: PointerEvent) => void;
     traverseBoundaries: () => void;
@@ -11,0 +12,0 @@ newBoundary: ($el: HTMLElement) => RevealBoundaryStore;

es/CanvasConfig.d.ts

@@ -99,5 +99,5 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
     private drawShape;
-    paint: (force?: boolean | undefined, debug?: boolean | undefined) => boolean;
+    paint: (force?: boolean | undefined) => boolean;
 }
 export {};
 //# sourceMappingURL=CanvasConfig.d.ts.map

es/CanvasConfig.js

@@ -407,3 +407,3 @@ import { createStorage } from './ComputedStyleStorage.js';
         };
-        this.paint = (force, debug) => {
+        this.paint = (force) => {
             const store = this._store;
@@ -410,0 +410,0 @@ const animationPlaying = store.animationQueue.includes(this);

es/CustomElements.js

@@ -89,2 +89,3 @@ import { RevealStateManager } from './RevealStateManager.js';
         this.addEventListener('pointerup', this.handlePointerUp);
+        this.addEventListener('touchend', this.handlePointerLeave);
     }
@@ -91,0 +92,0 @@ disconnectedCallback() {

es/RevealBoundryStore.js

@@ -72,3 +72,3 @@ import { CanvasConfig } from './CanvasConfig.js';
                 if (!frame || config.currentFrameId === frame) {
-                    return;
+                    continue;
                 }
@@ -75,0 +75,0 @@ config.currentFrameId = frame;

es/RevealStateManager.d.ts

@@ -9,2 +9,3 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
     constructor();
+    handlePointerMove: (event: PointerEvent) => void;
     traverseBoundaries: () => void;
@@ -11,0 +12,0 @@ newBoundary: ($el: HTMLElement) => RevealBoundaryStore;

es/RevealStateManager.js

@@ -10,2 +10,10 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
         this.cachedMouseY = -1;
+        this.handlePointerMove = (event) => {
+            this.cachedMouseX = event.clientX;
+            this.cachedMouseY = event.clientY;
+            if (!this.requestedTraverseBoundaries) {
+                window.requestAnimationFrame(this.traverseBoundaries);
+                this.requestedTraverseBoundaries = true;
+            }
+        };
         this.traverseBoundaries = () => {
@@ -24,3 +32,3 @@ this.requestedTraverseBoundaries = false;
         this.removeBoundary = (store) => {
-            this._storage = this._storage.filter(x => x !== store);
+            this._storage = this._storage.filter((x) => x !== store);
         };
@@ -30,8 +38,7 @@ if (config.borderDetectionMode === 'experimentalAutoFit') {
                 return;
-            window.addEventListener('pointermove', (event) => {
-                this.cachedMouseX = event.clientX;
-                this.cachedMouseY = event.clientY;
-                if (!this.requestedTraverseBoundaries) {
-                    window.requestAnimationFrame(this.traverseBoundaries);
-                    this.requestedTraverseBoundaries = true;
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerdown', this.handlePointerMove);
+            window.addEventListener('touchend', () => {
+                for (let i = 0; i < this._storage.length; i++) {
+                    this._storage[i].onPointerLeaveBoundary();
                 }
@@ -38,0 +45,0 @@ });

package.json

 {
     "name": "@ax-design/reveal-highlight",
-    "version": "0.3.0-alpha.10",
+    "version": "0.3.0-alpha.11",
     "description": "Web component that implement Reveal Highlight of Axiom Design System.",
@@ -5,0 +5,0 @@ "main": "build/main.js",

src/CanvasConfig.ts

 import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
 import { RevealBoundaryStore } from './RevealBoundryStore.js';
-import { MAGIC_DEFAULT_COLOR } from './variables.js';
 
@@ -614,3 +613,3 @@ type BorderDecoration = 'round' | 'bevel' | 'miter';
 
-    paint = (force?: boolean, debug?: boolean): boolean => {
+    paint = (force?: boolean): boolean => {
         const store = this._store;
@@ -617,0 +616,0 @@

src/CustomElements.ts

@@ -105,2 +105,3 @@ import { RevealStateManager } from './RevealStateManager.js';
         this.addEventListener('pointerup', this.handlePointerUp);
+        this.addEventListener('touchend', this.handlePointerLeave);
     }
@@ -107,0 +108,0 @@

src/RevealBoundryStore.ts

@@ -96,3 +96,3 @@ import { CanvasConfig } from './CanvasConfig.js';
             if (!frame || config.currentFrameId === frame) {
-                return;
+                continue;
             }
@@ -99,0 +99,0 @@

src/RevealStateManager.ts

@@ -17,9 +17,8 @@ import { RevealBoundaryStore } from './RevealBoundryStore.js';
 
-            window.addEventListener('pointermove', (event) => {
-                this.cachedMouseX = event.clientX;
-                this.cachedMouseY = event.clientY;
+            window.addEventListener('pointermove', this.handlePointerMove);
+            window.addEventListener('pointerdown', this.handlePointerMove);
 
-                if (!this.requestedTraverseBoundaries) {
-                    window.requestAnimationFrame(this.traverseBoundaries);
-                    this.requestedTraverseBoundaries = true;
+            window.addEventListener('touchend', () => {
+                for (let i = 0; i < this._storage.length; i++) {
+                    this._storage[i].onPointerLeaveBoundary();
                 }
@@ -30,2 +29,12 @@ });
 
+    handlePointerMove = (event: PointerEvent) => {
+        this.cachedMouseX = event.clientX;
+        this.cachedMouseY = event.clientY;
+
+        if (!this.requestedTraverseBoundaries) {
+            window.requestAnimationFrame(this.traverseBoundaries);
+            this.requestedTraverseBoundaries = true;
+        }
+    };
+
     traverseBoundaries = () => {
@@ -36,3 +45,3 @@ this.requestedTraverseBoundaries = false;
         }
-    }
+    };
 
@@ -49,4 +58,4 @@ newBoundary = ($el: HTMLElement) => {
     removeBoundary = (store: RevealBoundaryStore) => {
-        this._storage = this._storage.filter(x => x !== store);
+        this._storage = this._storage.filter((x) => x !== store);
     };
 }

No alert changes

Improved metrics

Total package byte prevSize

1516935

increased by0.1%

Lines of code

3106

increased by0.58%

No dependency changes