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

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

build/main.js

@@ -6,3 +6,3 @@ (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
 // https://stackoverflow.com/a/11508164/3931936
-const b=parseInt(a.substring(1),16);var c=255&b>>16,d=255&b>>8,e=255&b;return c+","+d+","+e}else{let b="",c=!1,d=0;for(let e=0;e<a.length;e++){const f=a[e],g=f.charCodeAt(0)-48;if(" "!==f){if(c&&!(0<=g&&10>g)&&","!==f&&")"!==f)throw new SyntaxError(`${a} is not a validate color value!`);if(!c&&"("===f){c=!0;continue}if(2>d&&")"===f)throw new SyntaxError(`${a} should have at least three color channel`);if(","===f&&d++,")"===f)return b;c&&(b+=f)}}return b}},p=()=>document.createElement("canvas");class q{constructor(a,b,c){var f=Math.floor;this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderStyle:"",borderColor:"",borderFillRadius:0,borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,withLeftBorderFactor:1,withRightBorderFactor:1,withTopBorderFactor:1,withBottomBorderFactor:1,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},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.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const a=this.container.getBoundingClientRect();this.cachedBoundingRect.top=f(a.top),this.cachedBoundingRect.left=f(a.left),this.cachedBoundingRect.width=f(a.width),this.cachedBoundingRect.height=f(a.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(a=[0,0],c=this.computedStyle.get("--reveal-hover-light-fill-radius-mode"))=>{var e=Math.min;const f=this.cachedBoundingRect;switch(c){case"relative":a[0]=e(f.width,f.height),a[1]=d(f.width,f.height);break;case"absolute":a[0]=-1,a[1]=-1;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute`!");}return this._store.updateMaxRadius(d(a[0],a[1])),a},this.getPropFromMultipleSource=(a,b)=>{const c=this.container.dataset[a];return c?c:this.computedStyle.get(b)},this.getNumberPropFromMultipleSource=(a,b)=>{var c=Number.parseFloat;const d=this.container.dataset[a];return d?c(d):this.computedStyle.getNumber(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=o(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=o(this.computedStyle.getColor("--reveal-border-color"))||a,d=o(this.computedStyle.getColor("--reveal-hover-light-color"))||a,e=o(this.computedStyle.getColor("--reveal-press-animation-color"))||a,f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b,f.borderFillRadius=this.computedStyle.getNumber("--reveal-border-fill-radius"),f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-fill-radius-mode"),f.diffuse="true"===this.computedStyle.get("--reveal-diffuse"),f.pressAnimation="true"===this.computedStyle.get("--reveal-press-animation"),f.pressAnimationFillMode=this.computedStyle.get("--reveal-press-animation-radius-mode"),f.pressAnimationColor=e,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");// Border decoration related configurations
+const b=parseInt(a.substring(1),16);var c=255&b>>16,d=255&b>>8,e=255&b;return c+","+d+","+e}else{let b="",c=!1,d=0;for(let e=0;e<a.length;e++){const f=a[e],g=f.charCodeAt(0)-48;if(" "!==f){if(c&&!(0<=g&&10>g)&&","!==f&&")"!==f)throw new SyntaxError(`${a} is not a validate color value!`);if(!c&&"("===f){c=!0;continue}if(2>d&&")"===f)throw new SyntaxError(`${a} should have at least three color channel`);if(","===f&&d++,")"===f)return b;c&&(b+=f)}}return b}},p=()=>document.createElement("canvas");class q{constructor(a,b,c){var f=Math.floor;this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderStyle:"",borderColor:"",borderFillRadius:0,borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,withLeftBorderFactor:1,withRightBorderFactor:1,withTopBorderFactor:1,withBottomBorderFactor:1,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},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.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const a=this.container.getBoundingClientRect();this.cachedBoundingRect.top=f(a.top),this.cachedBoundingRect.left=f(a.left),this.cachedBoundingRect.width=f(a.width),this.cachedBoundingRect.height=f(a.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(a=[0,0],c=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative")=>{var e=Math.min;const f=this.cachedBoundingRect;switch(c){case"relative":a[0]=e(f.width,f.height),a[1]=d(f.width,f.height);break;case"absolute":a[0]=-1,a[1]=-1;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute`, but got `"+c+"`!");}return this._store.updateMaxRadius(d(a[0],a[1])),a},this.getPropFromMultipleSource=(a,b)=>{const c=this.container.dataset[a];return c?c:this.computedStyle.get(b)},this.getNumberPropFromMultipleSource=(a,b)=>{var c=Number.parseFloat;const d=this.container.dataset[a];return d?c(d):this.computedStyle.getNumber(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=o(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=o(this.computedStyle.getColor("--reveal-border-color"))||a,d=o(this.computedStyle.getColor("--reveal-hover-light-color"))||a,e=o(this.computedStyle.getColor("--reveal-press-animation-color"))||a,f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b,f.borderFillRadius=this.computedStyle.getNumber("--reveal-border-fill-radius"),f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative",f.diffuse="true"===this.computedStyle.get("--reveal-diffuse"),f.pressAnimation="true"===this.computedStyle.get("--reveal-press-animation"),f.pressAnimationFillMode=this.computedStyle.get("--reveal-press-animation-radius-mode"),f.pressAnimationColor=e,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");// Border decoration related configurations
 const c=this.computedStyle.getNumber("--reveal-border-decoration-radius"),g=this.getNumberPropFromMultipleSource("topLeftBorderRadius","--reveal-border-decoration-top-left-radius"),h=this.getNumberPropFromMultipleSource("topRightBorderRadius","--reveal-border-decoration-top-right-radius"),i=this.getNumberPropFromMultipleSource("bottomLeftBorderRadius","--reveal-border-decoration-bottom-left-radius"),j=this.getNumberPropFromMultipleSource("bottomRightBorderRadius","--reveal-border-decoration-bottom-right-radius");if(f.topLeftBorderDecorationRadius=0<=g?g:c,f.topRightBorderDecorationRadius=0<=h?h:c,f.bottomLeftBorderDecorationRadius=0<=i?i:c,f.bottomRightBorderDecorationRadius=0<=j?j:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode),!n(f.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.updateCachedReveal=()=>{const a=this.cachedStyle,b=a.trueFillRadius[1]*this.pxRatio,c=this.cachedImg.cachedReveal,{borderReveal:d,fillReveal:e}=this.cachedImg.cachedCanvas,{borderReveal:f,fillReveal:g}=this.cachedImg.cachedCtx;for(let h=0;2>h;h++){// 0 means border, 1 means hover light.
@@ -17,3 +17,3 @@ //-----------------------------------------
 // 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)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=`
+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>
@@ -20,0 +20,0 @@ <slot></slot>

es/CanvasConfig.js

@@ -121,3 +121,3 @@ import { createStorage } from './ComputedStyleStorage.js';
         };
-        this.getTrueFillRadius = (trueFillRadius = [0, 0], fillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode')) => {
+        this.getTrueFillRadius = (trueFillRadius = [0, 0], fillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative') => {
             const b = this.cachedBoundingRect;
@@ -134,3 +134,3 @@ switch (fillMode) {
                 default:
-                    throw new SyntaxError('The value of `--reveal-border-style` must be `relative`, `absolute`!');
+                    throw new SyntaxError('The value of `--reveal-border-style` must be `relative`, `absolute`, but got `' + fillMode + '`!');
             }
@@ -184,3 +184,3 @@ this._store.updateMaxRadius(Math.max(trueFillRadius[0], trueFillRadius[1]));
             c.hoverLightFillRadius = this.computedStyle.getNumber('--reveal-hover-light-fill-radius');
-            c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode');
+            c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative';
             // Press animation related configurations
@@ -187,0 +187,0 @@ c.diffuse = this.computedStyle.get('--reveal-diffuse') === 'true';

es/RevealBoundryStore.js

@@ -33,3 +33,3 @@ import { CanvasConfig } from './CanvasConfig.js';
             this.canvasList = this.canvasList.filter((config) => {
-                return config && config.canvas === $el;
+                return config && config.canvas !== $el;
             });
@@ -36,0 +36,0 @@ };

package.json

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

src/CanvasConfig.ts

@@ -265,3 +265,3 @@ import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
         trueFillRadius = [0, 0] as [number, number],
-        fillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode')
+        fillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative'
     ) => {
@@ -280,3 +280,5 @@ const b = this.cachedBoundingRect;
             default:
-                throw new SyntaxError('The value of `--reveal-border-style` must be `relative`, `absolute`!');
+                throw new SyntaxError(
+                    'The value of `--reveal-border-style` must be `relative`, `absolute`, but got `' + fillMode + '`!'
+                );
         }
@@ -346,3 +348,3 @@
         c.hoverLightFillRadius = this.computedStyle.getNumber('--reveal-hover-light-fill-radius');
-        c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode');
+        c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-fill-radius-mode') || 'relative';
 
@@ -359,6 +361,18 @@ // Press animation related configurations
         const r = this.computedStyle.getNumber('--reveal-border-decoration-radius');
-        const tl = this.getNumberPropFromMultipleSource('topLeftBorderRadius', '--reveal-border-decoration-top-left-radius');
-        const tr = this.getNumberPropFromMultipleSource('topRightBorderRadius', '--reveal-border-decoration-top-right-radius');
-        const bl = this.getNumberPropFromMultipleSource('bottomLeftBorderRadius', '--reveal-border-decoration-bottom-left-radius');
-        const br = this.getNumberPropFromMultipleSource('bottomRightBorderRadius', '--reveal-border-decoration-bottom-right-radius');
+        const tl = this.getNumberPropFromMultipleSource(
+            'topLeftBorderRadius',
+            '--reveal-border-decoration-top-left-radius'
+        );
+        const tr = this.getNumberPropFromMultipleSource(
+            'topRightBorderRadius',
+            '--reveal-border-decoration-top-right-radius'
+        );
+        const bl = this.getNumberPropFromMultipleSource(
+            'bottomLeftBorderRadius',
+            '--reveal-border-decoration-bottom-left-radius'
+        );
+        const br = this.getNumberPropFromMultipleSource(
+            'bottomRightBorderRadius',
+            '--reveal-border-decoration-bottom-right-radius'
+        );
 
@@ -365,0 +379,0 @@ c.topLeftBorderDecorationRadius = tl >= 0 ? tl : r;

src/RevealBoundryStore.ts

@@ -50,3 +50,3 @@ import { CanvasConfig } from './CanvasConfig.js';
         this.canvasList = this.canvasList.filter((config) => {
-            return config && config.canvas === $el;
+            return config && config.canvas !== $el;
         });
@@ -53,0 +53,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

1590529

increased by4.85%

Number of package files

83

increased by1.22%

Lines of code

4647

increased by49.61%

No dependency changes