(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a=a||self,b(a.AxRevealHighlight={}))})(this,function(a){'use strict';// interface RevealStyle {
//     color: string;
//     borderStyle: 'full' | 'half' | 'none';
//     borderWidth: number;
//     fillMode: 'relative' | 'absolute' | 'none';
//     fillRadius: number;
//     diffuse: boolean;
//     revealAnimateSpeed: number;
//     revealReleasedAccelerateRate: number;
// }
class b{constructor(){this._currentHashId=0,this._storage=[],this.newBoundary=()=>{const a=this._currentHashId++,b={_currentHashId:0,id:a,clientX:-1e3,clientY:-1e3,paintedClientX:-1e3,paintedClientY:-1e3,mouseInBoundary:!1,canvasList:[],dirty:!1,raf:null,destroy:()=>{this._storage.find((a,c)=>{return this._storage.splice(c,1),a===b})},addReveal:a=>{const c={canvas:a,ctx:a.getContext("2d"),cachedRevealBitmap:[],width:0,height:0,cachedStyle:{top:-1,left:-1,width:-1,height:-1,trueFillRadius:[0,0],cacheCanvasSize:-1,color:"",opacity:1,borderStyle:"",borderWidth:1,fillMode:"",fillRadius:0,diffuse:!0,revealAnimateSpeed:0,revealReleasedAccelerateRate:0},currentFrameId:-1,cachedFrameId:-2,getCanvasPaintingStyle:()=>{var b=Math.round;let d,e,f,g,h,i,j,k,l,m,n,o,p=0;if(c.currentFrameId!==c.cachedFrameId){const q=a.getBoundingClientRect(),r=a.computedStyleMap();if(0===r.size)return c.cachedStyle;const s=r.get("--reveal-color").toString().match(/\((\d+,\s*\d+,\s*\d+)[\s\S]*?\)/);h=s&&1<s.length?s[1]:"0, 0, 0",i=r.get("--reveal-opacity").value,j=r.get("--reveal-border-style").value,k=r.get("--reveal-border-width").value,l=r.get("--reveal-fill-mode").value,p=r.get("--reveal-fill-radius").value,m="true"===r.get("--reveal-diffuse").value,n=r.get("--reveal-animate-speed").value,o=r.get("--reveal-released-accelerate-rate").value,d=b(q.top),e=b(q.left),f=b(q.width),g=b(q.height);let t=[0,0];switch(l){case"none":break;case"relative":t=[f,g].sort((c,a)=>c-a).map(a=>a*p);break;case"absolute":t=[p,p];break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute` or `none`!");}const u=2*t[1];c.cachedStyle={top:d,left:e,width:f,height:g,trueFillRadius:t,cacheCanvasSize:u,color:h,opacity:i,borderStyle:j,borderWidth:k,fillMode:l,fillRadius:p,diffuse:m,revealAnimateSpeed:n,revealReleasedAccelerateRate:o},c.cachedFrameId=c.currentFrameId}return c.cachedStyle},cacheRevealBitmaps:()=>{if(!c.ctx)return;const{width:a,height:b,trueFillRadius:d,cacheCanvasSize:e}=c.getCanvasPaintingStyle(),{color:f,opacity:g}=c.cachedStyle;c.width=a,c.height=b,c.canvas.width=a,c.canvas.height=b,c.cachedRevealBitmap=[];let h,j,k,l;for(let a of[0,1]){if(k=document.createElement("canvas"),k.width=e,k.height=e,l=k.getContext("2d"),!l)return;h=0===a?g:.5*g,j=l.createRadialGradient(e/2,e/2,0,e/2,e/2,d[a]),j.addColorStop(0,"rgba("+f+", "+h+")"),j.addColorStop(1,"rgba("+f+", 0.0)"),l.fillStyle=j,l.fillRect(0,0,e,e),c.cachedRevealBitmap.push({type:a,bitmap:l.getImageData(0,0,e,e)})}},mouseInCanvas:()=>{const{top:a,left:d,width:e,height:f}=c.getCanvasPaintingStyle(),g=b.clientX-d,h=b.clientY-a;return!(0>g||g>e)&&!(0>h||h>f)},getAnimateGrd:(a,b)=>{if(!c.ctx)return null;const{color:d,opacity:e}=c.cachedStyle,f=e*(.2-a),g=e*(.1-.07*a),h=.1+.8*a,i=0>f?0:f,j=0>g?0:g,k=1<h?1:h;return b.addColorStop(0,`rgba(${d},${i})`),b.addColorStop(.55*k,`rgba(${d},${j})`),b.addColorStop(k,`rgba(${d}, 0)`),b},mouseUpClientX:null,mouseUpClientY:null,mouseDownAnimateStartFrame:null,mouseDownAnimateCurrentFrame:null,mouseDownAnimateReleasedFrame:null,mouseDownAnimateLogicFrame:null,mousePressed:!1,mouseReleased:!1};c.cacheRevealBitmaps(),b.canvasList.push(c)},removeReveal:a=>{b.canvasList.find((c,d)=>{const e=a===c.canvas;return b.canvasList.splice(d,1),e})},onPointerEnterBoundary:()=>{b.mouseInBoundary=!0,b.raf||(b.raf=window.requestAnimationFrame(a=>b.paintAll(a)))},onPointerLeaveBoundary:()=>{b.mouseInBoundary=!1,b.paintAll(0,!0)},paintAll:(a,d)=>{(d||b.mouseInBoundary||0!==b.animationQueue.size)&&(b.animationQueue.forEach(c=>{if(!a)return;if(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.revealAnimateSpeed,f=c.cachedStyle.revealReleasedAccelerateRate;c.mouseDownAnimateLogicFrame=c.mouseReleased&&c.mouseDownAnimateReleasedFrame?d/e+(d-c.mouseDownAnimateReleasedFrame)/e*f:d/e,1<c.mouseDownAnimateLogicFrame&&b.cleanUpAnimation(c)}),b.canvasList.forEach(e=>{e.currentFrameId=a,c(e,b,d)}),b.dirty=!0,b.paintedClientX=b.clientX,b.paintedClientY=b.clientY,b.mouseInBoundary||0!==b.animationQueue.size?window.requestAnimationFrame(a=>{b.paintAll(a)}):b.raf=null)},resetAll:()=>{b.canvasList.forEach(a=>{c(a,b)})},initializeAnimation:()=>{const a=b.canvasList.find(a=>a.mouseInCanvas());a&&(b.animationQueue.add(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},switchAnimation:()=>{b.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=b.clientX,a.mouseUpClientY=b.clientY)})},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,b.animationQueue.delete(a),c(a,b,!0)},animationQueue:new Set,getRevealAnimationConfig:()=>b.canvasList.find(a=>a.mouseInCanvas())||null,revealAnimationConfig:null,mouseUpClientX:null,mouseUpClientY:null,mouseDownAnimateStartFrame:null,mouseDownAnimateCurrentFrame:null,mouseDownAnimateReleasedFrame:null,mouseDownAnimateLogicFrame:null,mousePressed:!1,mouseReleased:!1};return this._storage.push(b),b}}}const c=(a,b,c)=>{const d=b.animationQueue.has(a);if(b.clientX===b.paintedClientX&&b.clientY===b.paintedClientY&&!d&&!c)return;if(!a.ctx)return;if(a.ctx.clearRect(0,0,a.width,a.height),b.dirty=!1,!b.mouseInBoundary&&!d)return;if(2>a.cachedRevealBitmap.length)return;const{top:e,left:f,width:g,height:h,cacheCanvasSize:i,trueFillRadius:j}=a.getCanvasPaintingStyle();(g!==a.width||h!==a.height)&&a.cacheRevealBitmaps();const k=a.cachedStyle.borderStyle,l=a.cachedStyle.borderWidth,m=a.cachedStyle.fillMode,n=b.clientX-f,o=b.clientY-e,p=0<n&&n<g&&0<o&&o<h;if(!p&&!a.cachedStyle.diffuse&&!d)return;let q=0,r=0,s=0,t=0;switch(k){case"full":q=l,r=l,s=g-2*l,t=h-2*l;break;case"half":q=0,r=l,s=g,t=h-2*l;break;case"none":q=0,r=0,s=g,t=h;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `full`, `half` or `none`!");}const u=n-i/2,v=o-i/2;if(isNaN(n)||isNaN(o))return;if(b.mouseInBoundary&&("none"!==k&&(a.ctx.putImageData(a.cachedRevealBitmap[0].bitmap,u,v,-u,-v,g,h),a.ctx.clearRect(q,r,s,t)),"none"!=m&&p&&a.ctx.putImageData(a.cachedRevealBitmap[1].bitmap,u,v,q-u,r-v,s,t)),!a.mousePressed||!a.mouseDownAnimateLogicFrame)return;let w;w=a.mouseReleased&&a.mouseUpClientX&&a.mouseUpClientY?a.ctx.createRadialGradient(a.mouseUpClientX-f,a.mouseUpClientY-e,0,a.mouseUpClientX-f,a.mouseUpClientY-e,j[1]):a.ctx.createRadialGradient(n,o,0,n,o,j[1]),a.getAnimateGrd(a.mouseDownAnimateLogicFrame,w),a.ctx.fillStyle=w,a.ctx.fillRect(q,r,1.5*s,1.5*t)};class d extends HTMLElement{constructor(){super(...arguments),this.stateManager=new b}}d.ElementName="ax-reveal-provider";class e extends HTMLElement{constructor(){super(...arguments),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.handlePointerDown=a=>this.waitForStorage(b=>{this.updatePointerPosition(a),b.initializeAnimation()}),this.handlePointerUp=()=>this.waitForStorage(a=>a.switchAnimation())}get storage(){return this._storage}set storage(a){const b=this._storage;b&&this.dispatchEvent(new CustomEvent(e.removeStorageEvent,{detail:b})),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(e.attachStorageEvent,{detail:this._storage})),b&&this.dispatchEvent(new CustomEvent(e.replaceStorageEvent,{detail:{old:b,new:a}})))}waitForStorage(a){this.storage===void 0?this.addEventListener(e.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(d.ElementName),c=b?b.stateManager:e.storage;this.storage=c.newBoundary()}connectedCallback(){this.appendStorage(!0),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}}e.storage=new b,e.ElementName="ax-reveal-bound",e.removeStorageEvent="removeStorage",e.attachStorageEvent="attachStorage",e.replaceStorageEvent="replaceStorage";class f extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
<div>
    <slot></slot>
    <canvas></canvas>
    </div>
<style>
    div { display: content; }
    canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
    :host { display: inline-block; position: relative; }
    :host([block]) { display: block; }
    :host([inline-block]) { display: inline-block; }
    :host([flex]) { display: flex; }
    :host([inline-flex]) { display: inline-flex; }
    :host([grid]) { display: grid; }
    :host([inline-grid]) { display: inline-grid; }
    ::slotted(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(e.ElementName),!this.boundary)throw new SyntaxError("You must use "+e.ElementName+" as the boundary of acrylic!");this.boundary.waitForStorage(a=>setTimeout(()=>a.addReveal(this.canvas),0))}}f.ElementName="ax-reveal",a.register=function(){window.CSS&&CSS.registerProperty?(customElements.define(d.ElementName,d),customElements.define(e.ElementName,e),customElements.define(f.ElementName,f),CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0,0,0)",inherits:!0}),CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.12",inherits:!0}),CSS.registerProperty({name:"--reveal-border-style",syntax:"<custom-ident>",initialValue:"full",inherits:!0}),CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),CSS.registerProperty({name:"--reveal-fill-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),CSS.registerProperty({name:"--reveal-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),CSS.registerProperty({name:"--reveal-animate-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),CSS.registerProperty({name:"--reveal-released-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0})):console.warn("Your browser do NOT support `CSS.registerProperty` method, register failed!")},Object.defineProperty(a,"__esModule",{value:!0})});
