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

Comparing version 0.3.0-alpha.3 to 0.3.0-alpha.4

build/CanvasConfig.d.ts

@@ -1,2 +0,1 @@
-import { ComputedStyleStorage } from './ComputedStyleStorage.js';
 import { RevealBoundaryStore } from './RevealBoundryStore.js';
@@ -66,5 +65,6 @@ declare type BorderDecoration = 'round' | 'bevel' | 'miter';
     pxRatio: number;
-    canvas: HTMLCanvasElement;
+    readonly container: HTMLElement;
+    readonly canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D | null;
-    computedStyle: ComputedStyleStorage;
+    private readonly computedStyle;
     paintedWidth: number;
@@ -86,5 +86,6 @@ paintedHeight: number;
     mouseReleased: boolean;
-    constructor(store: RevealBoundaryStore, $el: HTMLCanvasElement);
+    constructor(store: RevealBoundaryStore, $canvas: HTMLCanvasElement, $container: HTMLElement);
     cacheBoundingRect: () => void;
     getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string, fillRadius?: number) => [number, number];
+    getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string | undefined;
     cacheCanvasPaintingStyle: () => void;
@@ -91,0 +92,0 @@ updateCachedReveal: () => void;

build/ComputedStyleStorage.d.ts

 export interface ComputedStyleStorage {
+    el: HTMLElement;
     size(): number;
@@ -7,3 +8,3 @@ get(propertyName: string): string;
 }
-export declare function createStorage(el: HTMLElement, compat: boolean): ComputedStyleStorage;
+export declare function createStorage(el: HTMLElement): ComputedStyleStorage;
 //# sourceMappingURL=ComputedStyleStorage.d.ts.map

build/config.d.ts

 export declare const config: {
+    compat: boolean;
     borderDetectionMode: "strictEdge" | "experimentalAutoFit";
 };
 //# sourceMappingURL=config.d.ts.map

build/main.js

@@ -1,16 +0,16 @@
-(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,b){return b?new h(a):new i(a)}function f(){customElements.define(v.ElementName,v),customElements.define(w.ElementName,w),customElements.define(x.ElementName,x)}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(s.borderDetectionMode=b,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>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",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:"4px",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>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-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>",initialValue:j,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.dataset.revealCompat="true",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",j),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","4"),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",j),a.style.setProperty("--reveal-hover-light-radius","1.5"),a.style.setProperty("--reveal-hover-light-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",j),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.")}class h{constructor(a){if(!h.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),h.colorParser=a,h.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 h.colorParser.style.color=this.get(a),h.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
+(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(v.ElementName,v),customElements.define(w.ElementName,w),customElements.define(x.ElementName,x)}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>",initialValue:n,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",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:"4px",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>",initialValue:n,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-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>",initialValue:n,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",n),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","4"),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",n),a.style.setProperty("--reveal-hover-light-radius","1.5"),a.style.setProperty("--reveal-hover-light-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",n),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
 // Maybe NaN
-return parseFloat(this.get(a))}}class i{constructor(a){this.el=a,this.style=a.computedStyleMap()}size(){return this.style.size}get(a){return this.style.get(a).toString()}getColor(a){return this.get(a)}getNumber(a){const b=this.style.get(a).value;return"number"==typeof b?b:parseFloat(b);// Maybe NaN
-}}const j="rgba(-1, -1, -1)",k=a=>"round"===a||"bevel"===a||"miter"===a,l=a=>{if("#"===a[0]){// Thanks bro:
+return parseFloat(this.get(a))}}class m{constructor(a){this.el=a,this.style=a.computedStyleMap()}size(){return this.style.size}get(a){return this.style.get(a).toString()}getColor(a){return this.get(a)}getNumber(a){const b=this.style.get(a).value;return"number"==typeof b?b:parseFloat(b);// Maybe NaN
+}}const n="rgba(-1, -1, -1)",o=a=>"round"===a||"bevel"===a||"miter"===a,p=a=>{if("#"===a[0]){// Thanks bro:
 // 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}},m=()=>document.createElement("canvas");class n{constructor(a,b){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:"",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.canvas.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-radius-mode"),e=this.computedStyle.getNumber("--reveal-hover-light-radius"))=>{var f=Math.min;const g=this.cachedBoundingRect;switch(c){case"relative":a[0]=f(g.width,g.height)*e,a[1]=d(g.width,g.height)*e;break;case"absolute":a[0]=e,a[1]=e;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.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=l(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=l(this.computedStyle.getColor("--reveal-border-color")),d=l(this.computedStyle.getColor("--reveal-hover-light-color")),e=l(this.computedStyle.getColor("--reveal-press-animation-color")),f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b===j?a:b,f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.computedStyle.get("--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.computedStyle.get("--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.computedStyle.get("--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.computedStyle.get("--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d===j?a:d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-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===j?a: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.computedStyle.getNumber("--reveal-border-decoration-top-left-radius"),h=this.computedStyle.getNumber("--reveal-border-decoration-top-right-radius"),i=this.computedStyle.getNumber("--reveal-border-decoration-bottom-left-radius"),m=this.computedStyle.getNumber("--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<=m?m:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode,f.hoverLightFillRadius),!k(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=2*b,d=this.cachedImg.cachedReveal,e=b===d.radius&&a.opacity===d.opacity,f=e&&a.borderColor===d.borderColor,g=e&&a.hoverLightColor===d.hoverLightColor;if(f&&g)return;const{borderReveal:h,fillReveal:j}=this.cachedImg.cachedCanvas,{borderReveal:k,fillReveal:l}=this.cachedImg.cachedCtx;this.syncSizeToRevealRadius(h),this.syncSizeToRevealRadius(j);for(let d=0;1>=d;d++){// 0 means border, 1 means hover light.
+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}},q=()=>document.createElement("canvas");class r{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:"",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.canvas.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-radius-mode"),e=this.computedStyle.getNumber("--reveal-hover-light-radius"))=>{var f=Math.min;const g=this.cachedBoundingRect;switch(c){case"relative":a[0]=f(g.width,g.height)*e,a[1]=d(g.width,g.height)*e;break;case"absolute":a[0]=e,a[1]=e;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 a?c:this.computedStyle.get(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=p(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=p(this.computedStyle.getColor("--reveal-border-color")),d=p(this.computedStyle.getColor("--reveal-hover-light-color")),e=p(this.computedStyle.getColor("--reveal-press-animation-color")),f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b===n?a:b,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===n?a:d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-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===n?a: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.computedStyle.getNumber("--reveal-border-decoration-top-left-radius"),h=this.computedStyle.getNumber("--reveal-border-decoration-top-right-radius"),i=this.computedStyle.getNumber("--reveal-border-decoration-bottom-left-radius"),j=this.computedStyle.getNumber("--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,f.hoverLightFillRadius),!o(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=2*b,d=this.cachedImg.cachedReveal,e=b===d.radius&&a.opacity===d.opacity,f=e&&a.borderColor===d.borderColor,g=e&&a.hoverLightColor===d.hoverLightColor;if(f&&g)return;const{borderReveal:h,fillReveal:j}=this.cachedImg.cachedCanvas,{borderReveal:k,fillReveal:l}=this.cachedImg.cachedCtx;this.syncSizeToRevealRadius(h),this.syncSizeToRevealRadius(j);for(let d=0;1>=d;d++){// 0 means border, 1 means hover light.
 if(0==d&&f)continue;if(1==d&&g)continue;const e=0==d?h:j,i=0==d?k:l;if(!i)continue;const m=0==d?a.borderColor:a.hoverLightColor;i.clearRect(0,0,e.width,e.height);const n=0==d?a.opacity:.5*a.opacity,o=i.createRadialGradient(b,b,0,b,b,b);o.addColorStop(0,`rgba(${m}, ${n})`),o.addColorStop(1,`rgba(${m}, 0.0)`),i.fillStyle=o,i.clearRect(0,0,c,c),i.fillRect(0,0,c,c)}this.cachedImg.cachedReveal.radius=b,this.cachedImg.cachedReveal.borderColor=a.borderColor,this.cachedImg.cachedReveal.hoverLightColor=a.hoverLightColor,this.cachedImg.cachedReveal.opacity=a.opacity;this.ctx&&(this.cachedImg.cachedPattern.borderReveal=this.ctx.createPattern(h,"no-repeat"),this.cachedImg.cachedPattern.fillReveal=this.ctx.createPattern(j,"no-repeat"))},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.mouseInCanvas=()=>{const a=this.cachedBoundingRect,b=this._store.clientX-a.left,c=this._store.clientY-a.top;return 0<b&&0<c&&b<a.width&&c<a.height},this.syncSizeToElement=a=>{const c=this.cachedBoundingRect;(a.width!==c.width||a.height!==c.height)&&(a.width=c.width*this.pxRatio,a.height=c.height*this.pxRatio,a.style.width=`${c.width}px`,a.style.height=`${c.height}px`)},this.syncSizeToRevealRadius=a=>{const{trueFillRadius:b}=this.cachedStyle,c=b[1]||1,d=2*c*this.pxRatio;(a.width!==d||a.height!==d)&&(a.width=d,a.height=d)},this.updateAnimateGrd=(a,b)=>{const{pressAnimationColor:c,opacity:d}=this.cachedStyle,e=d*(.2-a),f=d*(.1-.07*a),g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;b.addColorStop(0,`rgba(${c},${h})`),b.addColorStop(.55*j,`rgba(${c},${i})`),b.addColorStop(j,`rgba(${c}, 0)`)},this.drawShape=a=>{if(!this.ctx)return;const d=this.cachedBoundingRect,b=d.width*this.pxRatio,e=d.height*this.pxRatio,f=this.cachedStyle,c=f.borderWidth*this.pxRatio,g=f.topLeftBorderDecorationRadius*this.pxRatio,h=f.topRightBorderDecorationRadius*this.pxRatio,i=f.bottomLeftBorderDecorationRadius*this.pxRatio,j=f.bottomRightBorderDecorationRadius*this.pxRatio,k=f.withLeftBorderFactor,l=f.withRightBorderFactor,m=f.withTopBorderFactor,n=f.withBottomBorderFactor,o=c<g?g-c:0,p=c<h?h-c:0,q=c<i?i-c:0,r=c<j?j-c:0;switch(this.ctx.beginPath(),f.borderDecorationType){// Oh... Fuck... It's painful...
 case"round":this.ctx.moveTo(g,0),this.ctx.arcTo(b,0,b,e,h),this.ctx.lineTo(b,e-j),this.ctx.arcTo(b,e,j,e,j),this.ctx.lineTo(i,e),this.ctx.arcTo(0,e,0,j,i),this.ctx.lineTo(0,g),this.ctx.arcTo(0,0,g,0,g),a&&(this.ctx.moveTo(o,c*m),this.ctx.arcTo(c*k,c*m,c*k,o+c*m,o),this.ctx.lineTo(c*k,e-c*n-q),this.ctx.arcTo(c*k,e-c*n,c*k+q,e-c*n,q),this.ctx.lineTo(b-c*l-r,e-c*n),this.ctx.arcTo(b-c*l,e-c*n,b-c*l,e-c*n-r,r),this.ctx.lineTo(b-c*l,c*m+p),this.ctx.arcTo(b-c*l,c*m,b-c*l-p,c*m,p),this.ctx.lineTo(o,c*m));break;case"bevel":this.ctx.moveTo(g,0),this.ctx.lineTo(b-h,0),this.ctx.lineTo(b,h),this.ctx.lineTo(b,e-j),this.ctx.lineTo(b-j,e),this.ctx.lineTo(i,e),this.ctx.lineTo(0,e-i),this.ctx.lineTo(0,g),this.ctx.lineTo(g,0),this.ctx.lineTo(b-h,0),a&&(this.ctx.moveTo(o+c*k,c*m),this.ctx.lineTo(c*k,o+c*m),this.ctx.lineTo(c*k,e-q-c*n),this.ctx.lineTo(c*k+q,e-c*n),this.ctx.lineTo(b-r-c*l,e-c*n),this.ctx.lineTo(b-c*l,e-r-c*n),this.ctx.lineTo(b-c*l,p+c*m),this.ctx.lineTo(b-p-c*l,c*m),this.ctx.lineTo(o+c*l,c*m));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(b,0),this.ctx.lineTo(b,e),this.ctx.lineTo(0,e),this.ctx.lineTo(0,0),a&&(this.ctx.moveTo(c*k,c*m),this.ctx.lineTo(c*k,e-c*n),this.ctx.lineTo(b-c*l,e-c*n),this.ctx.lineTo(b-c*l,c*m),this.ctx.lineTo(c*k,c*m));}this.ctx.closePath()},this.paint=a=>{var e=Number.isNaN;const g=this._store,h=g.animationQueue.includes(this),i=g.clientX===g.paintedClientX&&g.clientY===g.paintedClientY;if(i&&!h&&!a)return!1;if(!this.ctx)return!1;if(this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),g.dirty=!1,!g.mouseInBoundary&&!h)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.canvas),this.cacheBoundingRect();const j=this.cachedBoundingRect,b=g.clientX-j.left,k=g.clientY-j.top;if(e(b)||e(k))return!1;const l=this.cachedStyle;this.getTrueFillRadius(l.trueFillRadius),this.paintedWidth=j.width*this.pxRatio,this.paintedHeight=j.height*this.pxRatio;const c=d(l.trueFillRadius[0],l.trueFillRadius[1]),m=b-c<j.width,n=k-c<j.height,o=0<b+c&&m&&0<k+c&&n;if(!o&&!h)return!1;this.cacheCanvasPaintingStyle(),this.updateCachedBitmap();const p=this.cachedImg.cachedReveal.radius,q=f(b*this.pxRatio-p),r=f(k*this.pxRatio-p);if(g.mouseInBoundary){const a=0<b&&0<k&&b<j.width&&k<j.height,c=this.cachedImg.cachedPattern.fillReveal;l.hoverLight&&a&&c&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(q,r),this.ctx.fillStyle=c,this.ctx.fill());const d=l.diffuse&&o||a,e=this.cachedImg.cachedPattern.borderReveal;0!==l.borderWidth&&e&&d&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(q,r),this.ctx.fillStyle=e,this.ctx.fill())}if(l.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const a="constrained"===l.pressAnimationFillMode?l.trueFillRadius[1]:d(j.width,j.height),c=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,0,(this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,a*this.pxRatio):this.ctx.createRadialGradient(b*this.pxRatio,k*this.pxRatio,0,b*this.pxRatio,k*this.pxRatio,a*this.pxRatio);// prettier-ignore
-this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,c),this.drawShape(!1),this.ctx.fillStyle=c,this.ctx.fill()}return!0},this._store=a,this.canvas=b,this.ctx=b.getContext("2d");const g={borderReveal:m(),fillReveal:m()},h={borderReveal:g.borderReveal.getContext("2d"),fillReveal:g.fillReveal.getContext("2d")};this.cachedImg={cachedReveal:{radius:-1,borderColor:"INVALID",hoverLightColor:"INVALID",opacity:0},cachedCanvas:g,cachedCtx:h,cachedPattern:{borderReveal:null,fillReveal:null}};const i=!!document.documentElement.dataset.revealCompat;this.computedStyle=e(this.canvas,i)}}class o{constructor(a,b){// The current cursor position relative to window.
+this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,c),this.drawShape(!1),this.ctx.fillStyle=c,this.ctx.fill()}return!0},this._store=a,this.container=c,this.canvas=b,this.ctx=b.getContext("2d");const g={borderReveal:q(),fillReveal:q()},h={borderReveal:g.borderReveal.getContext("2d"),fillReveal:g.fillReveal.getContext("2d")};this.cachedImg={cachedReveal:{radius:-1,borderColor:"INVALID",hoverLightColor:"INVALID",opacity:0},cachedCanvas:g,cachedCtx:h,cachedPattern:{borderReveal:null,fillReveal:null}},this.computedStyle=e(c),console.log(this.computedStyle)}}class s{constructor(a,b){// The current cursor position relative to window.
 // 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=>{const b=new n(this,a);b.cacheBoundingRect(),b.cacheCanvasPaintingStyle(),b.updateCachedBitmap(),this.canvasList.push(b)},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}}let p="strictEdge",q=!1;class r extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const s={get borderDetectionMode(){return p},set borderDetectionMode(a){if(q)throw new r;p=a,q=!0}};class t{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 o(b,a);return this._storage.push(c),c},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b===a)},"experimentalAutoFit"===s.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 u="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class v extends u{constructor(){super(...arguments),this.stateManager=new t}}v.ElementName="ax-reveal-provider";class w extends u{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 r(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 t{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 s(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 u="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class v extends u{constructor(){super(...arguments),this.stateManager=new t}}v.ElementName="ax-reveal-provider";class w extends u{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(w.removeStorageEvent,{detail:b})),w.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(w.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(w.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(w.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(v.ElementName),c=b?b.stateManager:w.stateManager;this.storage=c.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===s.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}}w.ElementName="ax-reveal-bound",w.removeStorageEvent="removeStorage",w.attachStorageEvent="attachStorage",w.replaceStorageEvent="replaceStorage",w.stateManager=new t;class x extends u{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(w.removeStorageEvent,{detail:b})),w.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(w.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(w.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(w.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(v.ElementName),c=b?b.stateManager:w.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}}w.ElementName="ax-reveal-bound",w.removeStorageEvent="removeStorage",w.attachStorageEvent="attachStorage",w.replaceStorageEvent="replaceStorage",w.stateManager=new t;class x extends u{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
 <div>
@@ -31,2 +31,2 @@ <slot></slot>
     ::slotted(button) { outline:none; }
-</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(a=>a.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=this.closest(w.ElementName),!this.boundary)throw new SyntaxError("You must use "+w.ElementName+" as the boundary of acrylic!");this.boundary.waitForStorage(a=>setTimeout(()=>a.addReveal(this.canvas),0))}}x.ElementName="ax-reveal";let y=!1;a.register=g,Object.defineProperty(a,"__esModule",{value:!0})});
+</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(a=>a.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=this.closest(w.ElementName),!this.boundary)throw new SyntaxError("You must use "+w.ElementName+" as the boundary of acrylic!");this.boundary.waitForStorage(a=>setTimeout(()=>a.addReveal(this.canvas,this),0))}}x.ElementName="ax-reveal";let y=!1;a.register=g,Object.defineProperty(a,"__esModule",{value:!0})});

build/RevealBoundryStore.d.ts

@@ -24,3 +24,3 @@ import { CanvasConfig } from './CanvasConfig.js';
     constructor(id: number, $el: HTMLElement);
-    addReveal: ($el: HTMLCanvasElement) => void;
+    addReveal: ($canvas: HTMLCanvasElement, $container: HTMLElement) => void;
     removeReveal: ($el: HTMLCanvasElement) => void;
@@ -27,0 +27,0 @@ updateMaxRadius: (x: number) => void;

es/CanvasConfig.d.ts

@@ -1,2 +0,1 @@
-import { ComputedStyleStorage } from './ComputedStyleStorage.js';
 import { RevealBoundaryStore } from './RevealBoundryStore.js';
@@ -66,5 +65,6 @@ declare type BorderDecoration = 'round' | 'bevel' | 'miter';
     pxRatio: number;
-    canvas: HTMLCanvasElement;
+    readonly container: HTMLElement;
+    readonly canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D | null;
-    computedStyle: ComputedStyleStorage;
+    private readonly computedStyle;
     paintedWidth: number;
@@ -86,5 +86,6 @@ paintedHeight: number;
     mouseReleased: boolean;
-    constructor(store: RevealBoundaryStore, $el: HTMLCanvasElement);
+    constructor(store: RevealBoundaryStore, $canvas: HTMLCanvasElement, $container: HTMLElement);
     cacheBoundingRect: () => void;
     getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string, fillRadius?: number) => [number, number];
+    getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string | undefined;
     cacheCanvasPaintingStyle: () => void;
@@ -91,0 +92,0 @@ updateCachedReveal: () => void;

es/CanvasConfig.js

@@ -58,3 +58,3 @@ import { createStorage } from './ComputedStyleStorage.js';
 export class CanvasConfig {
-    constructor(store, $el) {
+    constructor(store, $canvas, $container) {
         this.pxRatio = window.devicePixelRatio || 1;
@@ -136,2 +136,8 @@ this.paintedWidth = 0;
         };
+        this.getPropFromMultipleSource = (domPropsName, cssPropsName) => {
+            const domProps = this.container.dataset[domPropsName];
+            if (domPropsName)
+                return domProps;
+            return this.computedStyle.get(cssPropsName);
+        };
         this.cacheCanvasPaintingStyle = () => {
@@ -157,6 +163,6 @@ if (this.currentFrameId === this.cachedStyleFrameId) {
             c.borderWidth = this.computedStyle.getNumber('--reveal-border-width');
-            c.withLeftBorderFactor = this.computedStyle.get('--reveal-border-left') === 'line' ? 1 : 0;
-            c.withRightBorderFactor = this.computedStyle.get('--reveal-border-right') === 'line' ? 1 : 0;
-            c.withTopBorderFactor = this.computedStyle.get('--reveal-border-top') === 'line' ? 1 : 0;
-            c.withBottomBorderFactor = this.computedStyle.get('--reveal-border-bottom') === 'line' ? 1 : 0;
+            c.withLeftBorderFactor = this.getPropFromMultipleSource('leftBorder', 'reveal-border-left') === 'line' ? 1 : 0;
+            c.withRightBorderFactor = this.getPropFromMultipleSource('rightBorder', 'reveal-border-right') === 'line' ? 1 : 0;
+            c.withTopBorderFactor = this.getPropFromMultipleSource('topBorder', 'reveal-border-top') === 'line' ? 1 : 0;
+            c.withBottomBorderFactor = this.getPropFromMultipleSource('bottomBorder', 'reveal-border-bottom') === 'line' ? 1 : 0;
             // Hover light related configurations
@@ -473,4 +479,5 @@ c.hoverLight = this.computedStyle.get('--reveal-hover-light') === 'true';
         this._store = store;
-        this.canvas = $el;
-        this.ctx = $el.getContext('2d');
+        this.container = $container;
+        this.canvas = $canvas;
+        this.ctx = $canvas.getContext('2d');
         const cachedCanvas = {
@@ -498,6 +505,6 @@ borderReveal: createEmptyCanvas(),
         };
-        const compat = !!document.documentElement.dataset.revealCompat;
-        this.computedStyle = createStorage(this.canvas, compat);
+        this.computedStyle = createStorage($container);
+        console.log(this.computedStyle);
     }
 }
 //# sourceMappingURL=CanvasConfig.js.map

es/ComputedStyleStorage.d.ts

 export interface ComputedStyleStorage {
+    el: HTMLElement;
     size(): number;
@@ -7,3 +8,3 @@ get(propertyName: string): string;
 }
-export declare function createStorage(el: HTMLElement, compat: boolean): ComputedStyleStorage;
+export declare function createStorage(el: HTMLElement): ComputedStyleStorage;
 //# sourceMappingURL=ComputedStyleStorage.d.ts.map

es/ComputedStyleStorage.js

@@ -0,1 +1,2 @@
+import { config } from './config.js';
 class ComputedStyleCompat {
@@ -53,4 +54,4 @@ constructor(el) {
 }
-export function createStorage(el, compat) {
-    return compat
+export function createStorage(el) {
+    return config.compat
         ? new ComputedStyleCompat(el)
@@ -57,0 +58,0 @@ : new ComputedStyleExperimental(el);

es/config.d.ts

 export declare const config: {
+    compat: boolean;
     borderDetectionMode: "strictEdge" | "experimentalAutoFit";
 };
 //# sourceMappingURL=config.d.ts.map

es/config.js

@@ -10,2 +10,3 @@ let borderDetectionMode = 'strictEdge';
 export const config = {
+    compat: false,
     get borderDetectionMode() {
@@ -12,0 +13,0 @@ return borderDetectionMode;

es/CustomElements.js

@@ -133,3 +133,3 @@ import { RevealStateManager } from './RevealStateManager.js';
             throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of acrylic!');
-        this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas), 0));
+        this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas, this), 0));
     }
@@ -136,0 +136,0 @@ }

es/index.js

@@ -16,2 +16,3 @@ import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
     config.borderDetectionMode = borderDetectionMode;
+    config.compat = compat;
     registered = true;
@@ -173,3 +174,2 @@ if (window.CSS && window.CSS.registerProperty) {
         const root = document.documentElement;
-        root.dataset.revealCompat = 'true';
         root.style.setProperty('--reveal-color', 'rgb(0, 0, 0)');
@@ -176,0 +176,0 @@ root.style.setProperty('--reveal-opacity', '0.26');

es/RevealBoundryStore.d.ts

@@ -24,3 +24,3 @@ import { CanvasConfig } from './CanvasConfig.js';
     constructor(id: number, $el: HTMLElement);
-    addReveal: ($el: HTMLCanvasElement) => void;
+    addReveal: ($canvas: HTMLCanvasElement, $container: HTMLElement) => void;
     removeReveal: ($el: HTMLCanvasElement) => void;
@@ -27,0 +27,0 @@ updateMaxRadius: (x: number) => void;

es/RevealBoundryStore.js

@@ -24,4 +24,4 @@ import { CanvasConfig } from './CanvasConfig.js';
         this.maxRadius = -1;
-        this.addReveal = ($el) => {
-            const canvasConfig = new CanvasConfig(this, $el);
+        this.addReveal = ($canvas, $container) => {
+            const canvasConfig = new CanvasConfig(this, $canvas, $container);
             canvasConfig.cacheBoundingRect();
@@ -28,0 +28,0 @@ canvasConfig.cacheCanvasPaintingStyle();

package.json

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

src/CanvasConfig.ts

@@ -139,6 +139,7 @@ import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
 
-    canvas: HTMLCanvasElement;
+    readonly container: HTMLElement;
+    readonly canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D | null;
 
-    computedStyle: ComputedStyleStorage;
+    private readonly computedStyle: ComputedStyleStorage;
 
@@ -202,7 +203,12 @@ paintedWidth = 0;
 
-    constructor(store: RevealBoundaryStore, $el: HTMLCanvasElement) {
+    constructor(
+        store: RevealBoundaryStore,
+        $canvas: HTMLCanvasElement,
+        $container: HTMLElement
+    ) {
         this._store = store;
 
-        this.canvas = $el;
-        this.ctx = $el.getContext('2d');
+        this.container = $container;
+        this.canvas = $canvas;
+        this.ctx = $canvas.getContext('2d');
 
@@ -234,4 +240,5 @@ const cachedCanvas = {
 
-        const compat = !!document.documentElement.dataset.revealCompat;
-        this.computedStyle = createStorage(this.canvas, compat);
+        this.computedStyle = createStorage($container);
+
+        console.log(this.computedStyle);
     }
@@ -279,2 +286,12 @@
 
+    getPropFromMultipleSource = (
+        domPropsName: string, 
+        cssPropsName: string
+    ) => {
+        const domProps = this.container.dataset[domPropsName]
+        if (domPropsName) return domProps
+
+        return this.computedStyle.get(cssPropsName)
+    }
+
     cacheCanvasPaintingStyle = () => {
@@ -307,7 +324,8 @@ if (this.currentFrameId === this.cachedStyleFrameId) {
         c.borderWidth = this.computedStyle.getNumber('--reveal-border-width');
-        c.withLeftBorderFactor = this.computedStyle.get('--reveal-border-left') === 'line' ? 1 : 0;
-        c.withRightBorderFactor = this.computedStyle.get('--reveal-border-right') === 'line' ? 1 : 0;
-        c.withTopBorderFactor = this.computedStyle.get('--reveal-border-top') === 'line' ? 1 : 0;
-        c.withBottomBorderFactor = this.computedStyle.get('--reveal-border-bottom') === 'line' ? 1 : 0;
         
+        c.withLeftBorderFactor = this.getPropFromMultipleSource('leftBorder', 'reveal-border-left') === 'line' ? 1 : 0;
+        c.withRightBorderFactor = this.getPropFromMultipleSource('rightBorder', 'reveal-border-right') === 'line' ? 1 : 0;
+        c.withTopBorderFactor = this.getPropFromMultipleSource('topBorder', 'reveal-border-top') === 'line' ? 1 : 0;
+        c.withBottomBorderFactor = this.getPropFromMultipleSource('bottomBorder', 'reveal-border-bottom') === 'line' ? 1 : 0;
+        
         // Hover light related configurations
@@ -314,0 +332,0 @@ c.hoverLight = this.computedStyle.get('--reveal-hover-light') === 'true';

src/ComputedStyleStorage.ts

@@ -0,2 +1,5 @@
+import { config } from './config.js';
+
 export interface ComputedStyleStorage {
+    el: HTMLElement;
     size(): number;
@@ -82,6 +85,6 @@ get(propertyName: string): string;
 
-export function createStorage(el: HTMLElement, compat: boolean): ComputedStyleStorage {
-    return compat
+export function createStorage(el: HTMLElement): ComputedStyleStorage {
+    return config.compat
         ? new ComputedStyleCompat(el)
         : new ComputedStyleExperimental(el);
 }

src/config.ts

@@ -14,2 +14,4 @@ let borderDetectionMode: 'strictEdge' | 'experimentalAutoFit' = 'strictEdge';
 export const config = {
+    compat: false,
+
     get borderDetectionMode() {
@@ -16,0 +18,0 @@ return borderDetectionMode

src/CustomElements.ts

@@ -140,3 +140,3 @@ import { RevealStateManager } from './RevealStateManager.js';
 
-        this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas), 0));
+        this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas, this), 0));
     }
@@ -143,0 +143,0 @@

src/index.ts

@@ -28,2 +28,3 @@ import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
     config.borderDetectionMode = borderDetectionMode;
+    config.compat = compat;
     registered = true;
@@ -187,4 +188,2 @@
 
-        root.dataset.revealCompat = 'true';
-
         root.style.setProperty('--reveal-color', 'rgb(0, 0, 0)');
@@ -191,0 +190,0 @@ root.style.setProperty('--reveal-opacity', '0.26');

src/RevealBoundryStore.ts

@@ -38,4 +38,4 @@ import { CanvasConfig } from './CanvasConfig.js';
 
-    addReveal = ($el: HTMLCanvasElement) => {
-        const canvasConfig = new CanvasConfig(this, $el);
+    addReveal = ($canvas: HTMLCanvasElement, $container: HTMLElement) => {
+        const canvasConfig = new CanvasConfig(this, $canvas, $container);
 
@@ -42,0 +42,0 @@ canvasConfig.cacheBoundingRect();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1581566

increased by5%

Number of package files

82

increased by1.23%

Lines of code

4565

increased by51.91%

No dependency changes