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

Comparing version 0.1.1 to 0.1.3

build/CustomElements.d.ts

@@ -16,6 +16,7 @@ import RevealStateManager, { RevealBoundaryStore } from './RevealStateManager.js';
     private appendStorage;
+    updatePointerPosition: (ev: MouseEvent) => void;
     handlePointerEnter: () => void;
     handlePointerLeave: () => void;
     handlePointerMove: (ev: MouseEvent) => void;
-    handlePointerDown: () => void;
+    handlePointerDown: (ev: MouseEvent) => void;
     handlePointerUp: () => void;
@@ -22,0 +23,0 @@ connectedCallback(): void;

build/main.js

@@ -1,16 +0,27 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a=a||self,b(a.AxDesignRevealHighlight={}))})(this,function(a){'use strict';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:"",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=0;if(c.currentFrameId!==c.cachedFrameId){const p=a.getBoundingClientRect(),q=a.computedStyleMap(),r=q.get("--reveal-color").toString().match(/\((\d+,\s*\d+,\s*\d+)[\s\S]*?\)/);h=r&&1<r.length?r[1]:"0, 0, 0",i=q.get("--reveal-border-style").value,j=q.get("--reveal-border-width").value,k=q.get("--reveal-fill-mode").value,o=q.get("--reveal-fill-radius").value,l="true"===q.get("--reveal-diffuse").value,m=q.get("--reveal-animate-speed").value,n=q.get("--reveal-released-accelerate-rate").value,d=b(p.top),e=b(p.left),f=b(p.width),g=b(p.height);let s=[0,0];switch(k){case"none":break;case"relative":s=[f,g].sort((c,a)=>c-a).map(a=>a*o);break;case"absolute":s=[o,o];break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute` or `none`!");}const t=2*s[1];c.cachedStyle={top:d,left:e,width:f,height:g,trueFillRadius:s,cacheCanvasSize:t,color:h,borderStyle:i,borderWidth:j,fillMode:k,fillRadius:o,diffuse:l,revealAnimateSpeed:m,revealReleasedAccelerateRate:n},c.cachedFrameId=c.currentFrameId}return c.cachedStyle},cacheRevealBitmaps:()=>{if(!c.ctx)return;const{width:a,height:b,trueFillRadius:d,cacheCanvasSize:e}=c.getCanvasPaintingStyle(),f=c.cachedStyle.color;c.width=a,c.height=b,c.canvas.width=a,c.canvas.height=b,c.cachedRevealBitmap=[];let g,h,j,k;for(let a of[0,1]){if(j=document.createElement("canvas"),j.width=e,j.height=e,k=j.getContext("2d"),!k)return;g=0===a?", 0.6)":", 0.3)",h=k.createRadialGradient(e/2,e/2,0,e/2,e/2,d[a]),h.addColorStop(0,"rgba("+f+g),h.addColorStop(1,"rgba("+f+", 0.0)"),k.fillStyle=h,k.fillRect(0,0,e,e),c.cachedRevealBitmap.push({type:a,bitmap:k.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 d=c.cachedStyle.color,e=.2-a,f=.1-.07*a,g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;return b.addColorStop(0,`rgba(${d},${h})`),b.addColorStop(.55*j,`rgba(${d},${i})`),b.addColorStop(j,`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;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),b.paintAll(0,!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.handlePointerEnter=()=>this.waitForStorage(a=>a.onPointerEnterBoundary()),this.handlePointerLeave=()=>this.waitForStorage(a=>a.onPointerLeaveBoundary()),this.handlePointerMove=a=>this.waitForStorage(b=>{b.clientX=a.clientX,b.clientY=a.clientY}),this.handlePointerDown=()=>this.waitForStorage(a=>a.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; }
-      </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(){customElements.define(d.ElementName,d),customElements.define(e.ElementName,e),customElements.define(f.ElementName,f),window.CSS&&CSS.registerProperty&&(CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0,0,0)",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}))},Object.defineProperty(a,"__esModule",{value:!0})});
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a=a||self,b(a.AxDesignRevealHighlight={}))})(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:"",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=0;if(c.currentFrameId!==c.cachedFrameId){const p=a.getBoundingClientRect(),q=a.computedStyleMap(),r=q.get("--reveal-color").toString().match(/\((\d+,\s*\d+,\s*\d+)[\s\S]*?\)/);h=r&&1<r.length?r[1]:"0, 0, 0",i=q.get("--reveal-border-style").value,j=q.get("--reveal-border-width").value,k=q.get("--reveal-fill-mode").value,o=q.get("--reveal-fill-radius").value,l="true"===q.get("--reveal-diffuse").value,m=q.get("--reveal-animate-speed").value,n=q.get("--reveal-released-accelerate-rate").value,d=b(p.top),e=b(p.left),f=b(p.width),g=b(p.height);let s=[0,0];switch(k){case"none":break;case"relative":s=[f,g].sort((c,a)=>c-a).map(a=>a*o);break;case"absolute":s=[o,o];break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute` or `none`!");}const t=2*s[1];c.cachedStyle={top:d,left:e,width:f,height:g,trueFillRadius:s,cacheCanvasSize:t,color:h,borderStyle:i,borderWidth:j,fillMode:k,fillRadius:o,diffuse:l,revealAnimateSpeed:m,revealReleasedAccelerateRate:n},c.cachedFrameId=c.currentFrameId}return c.cachedStyle},cacheRevealBitmaps:()=>{if(!c.ctx)return;const{width:a,height:b,trueFillRadius:d,cacheCanvasSize:e}=c.getCanvasPaintingStyle(),f=c.cachedStyle.color;c.width=a,c.height=b,c.canvas.width=a,c.canvas.height=b,c.cachedRevealBitmap=[];let g,h,j,k;for(let a of[0,1]){if(j=document.createElement("canvas"),j.width=e,j.height=e,k=j.getContext("2d"),!k)return;g=0===a?", 0.6)":", 0.3)",h=k.createRadialGradient(e/2,e/2,0,e/2,e/2,d[a]),h.addColorStop(0,"rgba("+f+g),h.addColorStop(1,"rgba("+f+", 0.0)"),k.fillStyle=h,k.fillRect(0,0,e,e),c.cachedRevealBitmap.push({type:a,bitmap:k.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 d=c.cachedStyle.color,e=.2-a,f=.1-.07*a,g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;return b.addColorStop(0,`rgba(${d},${h})`),b.addColorStop(.55*j,`rgba(${d},${i})`),b.addColorStop(j,`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-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})});

es/CustomElements.d.ts

@@ -16,6 +16,7 @@ import RevealStateManager, { RevealBoundaryStore } from './RevealStateManager.js';
     private appendStorage;
+    updatePointerPosition: (ev: MouseEvent) => void;
     handlePointerEnter: () => void;
     handlePointerLeave: () => void;
     handlePointerMove: (ev: MouseEvent) => void;
-    handlePointerDown: () => void;
+    handlePointerDown: (ev: MouseEvent) => void;
     handlePointerUp: () => void;
@@ -22,0 +23,0 @@ connectedCallback(): void;

es/CustomElements.js

@@ -12,9 +12,15 @@ import RevealStateManager from './RevealStateManager.js';
         super(...arguments);
+        this.updatePointerPosition = (ev) => {
+            this.waitForStorage(storage => {
+                storage.clientX = ev.clientX;
+                storage.clientY = ev.clientY;
+            });
+        };
         this.handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
         this.handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
-        this.handlePointerMove = (ev) => this.waitForStorage(storage => {
-            storage.clientX = ev.clientX;
-            storage.clientY = ev.clientY;
+        this.handlePointerMove = (ev) => this.updatePointerPosition(ev);
+        this.handlePointerDown = (ev) => this.waitForStorage(storage => {
+            this.updatePointerPosition(ev);
+            storage.initializeAnimation();
         });
-        this.handlePointerDown = () => this.waitForStorage(storage => storage.initializeAnimation());
         this.handlePointerUp = () => this.waitForStorage(storage => storage.switchAnimation());
@@ -74,17 +80,18 @@ }
         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; }
-      </style>`;
+<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');
@@ -91,0 +98,0 @@ }

es/index.js

 import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
 export function register() {
-    customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
-    customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
-    customElements.define(AxReveal.ElementName, AxReveal);
     if (window.CSS && CSS.registerProperty) {
+        customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
+        customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
+        customElements.define(AxReveal.ElementName, AxReveal);
         CSS.registerProperty({
@@ -56,3 +56,6 @@ name: '--reveal-color',
     }
+    else {
+        console.warn('Your browser do NOT support `CSS.registerProperty` method, register failed!');
+    }
 }
 //# sourceMappingURL=index.js.map

es/RevealStateManager.js

@@ -0,1 +1,11 @@
+// interface RevealStyle {
+//     color: string;
+//     borderStyle: 'full' | 'half' | 'none';
+//     borderWidth: number;
+//     fillMode: 'relative' | 'absolute' | 'none';
+//     fillRadius: number;
+//     diffuse: boolean;
+//     revealAnimateSpeed: number;
+//     revealReleasedAccelerateRate: number;
+// }
 class RevealStateManager {
@@ -186,2 +196,4 @@ constructor() {
                             return;
+                        if (config.currentFrameId === frame)
+                            return;
                         config.currentFrameId = frame;
@@ -252,3 +264,3 @@ if (config.mouseDownAnimateStartFrame === null)
                     storage.animationQueue.delete(config);
-                    storage.paintAll(0, true);
+                    paintCanvas(config, storage, true);
                 },
@@ -255,0 +267,0 @@ animationQueue: new Set(),

package.json

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

README.md

@@ -11,3 +11,5 @@ <h1 align="center">
   <a href="https://www.npmjs.com/package/@ax-design/reveal-highlight"><img src="https://img.shields.io/npm/v/@ax-design/reveal-highlight.svg" alt="npm version"></a>
-  <a href="https://travis-ci.org/ax-design/reveal-highlight"><img src="https://travis-ci.org/ax-design/reveal-highlight.svg?branch=master" alt="CI Status"></a>
+  <a href="https://travis-ci.com/ax-design/reveal-highlight"><img src="https://travis-ci.com/ax-design/reveal-highlight.svg?branch=master" alt="CI status"></a>
+  <a href="https://deepscan.io/dashboard#view=project&tid=4412&pid=6185&bid=50120"><img src="https://deepscan.io/api/teams/4412/projects/6185/branches/50120/badge/grade.svg" alt="DeepScan grade"></a>
+  <a href="https://t.me/axiom_chat"><img src="https://img.shields.io/badge/chat-on%20Telegram-%230088cc.svg" alt="Telegram chat group" /></a>
   <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT Licence" />
@@ -23,3 +25,3 @@
 
-```
+```bash
 // with npm
@@ -32,2 +34,13 @@ npm install @ax-design/reveal-highlight
 
+and import it:
+
+```javascript
+//CommonJS
+require('@ax-design/reveal-highlight').register();
+
+//ESModule
+import { register } from '@ax-design/reveal-highlight';
+register();
+```
+
 ## Usage
@@ -135,2 +148,2 @@
 
-**Description:** The acceleration rate of the animation when the mouse is released.
+**Description:** The acceleration rate of the animation when the mouse is released.

src/CustomElements.ts

@@ -43,5 +43,3 @@ import RevealStateManager, { RevealBoundaryStore } from './RevealStateManager.js';
     }
-    handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
-    handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
-    handlePointerMove = (ev: MouseEvent) =>
+    updatePointerPosition = (ev: MouseEvent) => {
         this.waitForStorage(storage => {
@@ -51,3 +49,10 @@ storage.clientX = ev.clientX;
         });
-    handlePointerDown = () => this.waitForStorage(storage => storage.initializeAnimation());
+    }
+    handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
+    handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
+    handlePointerMove = (ev: MouseEvent) => this.updatePointerPosition(ev);
+    handlePointerDown = (ev: MouseEvent) => this.waitForStorage(storage => {
+        this.updatePointerPosition(ev);
+        storage.initializeAnimation();
+    });
     handlePointerUp = () => this.waitForStorage(storage => storage.switchAnimation());
@@ -89,19 +94,20 @@ connectedCallback() {
         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; }
-      </style>`;
+<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')!;
     }
 }

src/index.ts

 import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
 export function register() {
-    customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
-    customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
-    customElements.define(AxReveal.ElementName, AxReveal);
-
     if (window.CSS && CSS.registerProperty) {
+        customElements.define(AxRevealProvider.ElementName, AxRevealProvider);
+        customElements.define(AxRevealBoundary.ElementName, AxRevealBoundary);
+        customElements.define(AxReveal.ElementName, AxReveal);
         CSS.registerProperty({
@@ -56,4 +55,6 @@ name: '--reveal-color',
         });
+    } else {
+        console.warn('Your browser do NOT support `CSS.registerProperty` method, register failed!');
     }
 
 }

src/RevealStateManager.ts

@@ -1,3 +0,1 @@
-import { stringify } from "querystring";
-
 // interface RevealStyle {
@@ -321,2 +319,3 @@ //     color: string;
                     if (!frame) return;
+                    if (config.currentFrameId === frame) return;
 
@@ -400,3 +399,3 @@ config.currentFrameId = frame;
 
-                storage.paintAll(0, true);
+                paintCanvas(config, storage, true);
             },
@@ -403,0 +402,0 @@

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

Lines of code

1486

increased by2.91%

Number of lines in readme file

146

increased by10.61%

Worsened metrics

Total package byte prevSize

1368001

decreased by-4.16%

Number of package files

35

decreased by-5.41%

No dependency changes