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

Comparing version 0.1.9 to 0.1.10-beta.0

build/main.js

@@ -5,3 +5,4 @@ (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';function b(a,b){return b?new d(a):new e(a)}// interface RevealStyle {
 return parseFloat(this.get(a))}}class e{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
-}}class f{constructor(){this._currentHashId=0,this._storage=[],this.newBoundary=()=>{const a=this._currentHashId++,c={_currentHashId:0,id:a,clientX:-1e3,clientY:-1e3,paintedClientX:-1e3,paintedClientY:-1e3,mouseInBoundary:!1,canvasList:[],dirty:!1,raf:null,destroy:()=>{this._storage.find((a,b)=>{return this._storage.splice(b,1),a===c})},addReveal:a=>{const d={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 c=Math.round;if(d.currentFrameId===d.cachedFrameId)return d.cachedStyle;const e=!!document.documentElement.dataset.revealCompat,f=b(a,e);if(0===f.size())return d.cachedStyle;const g=a.getBoundingClientRect(),h=f.getColor("--reveal-color"),i=h.match(/\((\d+,\s*\d+,\s*\d+)[\s\S]*?\)/),j={top:c(g.top),left:c(g.left),width:c(g.width),height:c(g.height),color:i&&1<i.length?i[1]:"0, 0, 0",opacity:f.getNumber("--reveal-opacity"),borderStyle:f.get("--reveal-border-style"),borderWidth:f.getNumber("--reveal-border-width"),fillMode:f.get("--reveal-fill-mode"),fillRadius:f.getNumber("--reveal-fill-radius"),diffuse:"true"===f.get("--reveal-diffuse"),revealAnimateSpeed:f.getNumber("--reveal-animate-speed"),revealReleasedAccelerateRate:f.getNumber("--reveal-released-accelerate-rate")},{width:k,height:l,fillMode:m,fillRadius:n}=j;let o=[0,0];switch(m){case"none":break;case"relative":o=[k,l].sort((c,a)=>c-a).map(a=>a*n);break;case"absolute":o=[n,n];break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute` or `none`!");}const p=2*o[1];return d.cachedStyle=Object.assign({},j,{trueFillRadius:o,cacheCanvasSize:p}),d.cachedFrameId=d.currentFrameId,d.cachedStyle},cacheRevealBitmaps:()=>{if(!d.ctx)return;const{width:a,height:b,trueFillRadius:c,cacheCanvasSize:e}=d.getCanvasPaintingStyle(),{color:f,opacity:g}=d.cachedStyle;d.width=a,d.height=b,d.canvas.width=a,d.canvas.height=b,d.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,c[a]),j.addColorStop(0,"rgba("+f+", "+h+")"),j.addColorStop(1,"rgba("+f+", 0.0)"),l.fillStyle=j,l.fillRect(0,0,e,e),d.cachedRevealBitmap.push({type:a,bitmap:l.getImageData(0,0,e,e)})}},mouseInCanvas:()=>{const{top:a,left:b,width:e,height:f}=d.getCanvasPaintingStyle(),g=c.clientX-b,h=c.clientY-a;return!(0>g||g>e)&&!(0>h||h>f)},getAnimateGrd:(a,b)=>{if(!d.ctx)return null;const{color:c,opacity:e}=d.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(${c},${i})`),b.addColorStop(.55*k,`rgba(${c},${j})`),b.addColorStop(k,`rgba(${c}, 0)`),b},mouseUpClientX:null,mouseUpClientY:null,mouseDownAnimateStartFrame:null,mouseDownAnimateCurrentFrame:null,mouseDownAnimateReleasedFrame:null,mouseDownAnimateLogicFrame:null,mousePressed:!1,mouseReleased:!1};d.cacheRevealBitmaps(),c.canvasList.push(d)},removeReveal:a=>{c.canvasList.find((b,d)=>!!(b&&a===b.canvas)&&(c.canvasList.splice(d,1),!0))},onPointerEnterBoundary:()=>{c.mouseInBoundary=!0,c.raf||(c.raf=window.requestAnimationFrame(a=>c.paintAll(a)))},onPointerLeaveBoundary:()=>{c.mouseInBoundary=!1,c.paintAll(0,!0)},paintAll:(a,b)=>{(b||c.mouseInBoundary||0!==c.animationQueue.size)&&(c.animationQueue.forEach(b=>{if(!a)return;if(b.currentFrameId===a)return;b.currentFrameId=a,null===b.mouseDownAnimateStartFrame&&(b.mouseDownAnimateStartFrame=a);const d=a-b.mouseDownAnimateStartFrame;b.mouseDownAnimateCurrentFrame=d;const e=b.cachedStyle.revealAnimateSpeed,f=b.cachedStyle.revealReleasedAccelerateRate;b.mouseDownAnimateLogicFrame=b.mouseReleased&&b.mouseDownAnimateReleasedFrame?d/e+(d-b.mouseDownAnimateReleasedFrame)/e*f:d/e,1<b.mouseDownAnimateLogicFrame&&c.cleanUpAnimation(b)}),c.canvasList.forEach(d=>{d.currentFrameId=a,g(d,c,b)}),c.dirty=!0,c.paintedClientX=c.clientX,c.paintedClientY=c.clientY,c.mouseInBoundary||0!==c.animationQueue.size?window.requestAnimationFrame(a=>{c.paintAll(a)}):c.raf=null)},resetAll:()=>{c.canvasList.forEach(a=>{g(a,c)})},initializeAnimation:()=>{const a=c.canvasList.find(a=>a.mouseInCanvas());a&&(c.animationQueue.add(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},switchAnimation:()=>{c.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=c.clientX,a.mouseUpClientY=c.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,c.animationQueue.delete(a),g(a,c,!0)},animationQueue:new Set,getRevealAnimationConfig:()=>c.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(c),c}}}const g=(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 h extends HTMLElement{constructor(){super(...arguments),this.stateManager=new f}}h.ElementName="ax-reveal-provider";class i 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(i.removeStorageEvent,{detail:b})),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(i.attachStorageEvent,{detail:this._storage})),b&&this.dispatchEvent(new CustomEvent(i.replaceStorageEvent,{detail:{old:b,new:a}})))}waitForStorage(a){this.storage===void 0?this.addEventListener(i.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(h.ElementName),c=b?b.stateManager:i.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}}i.storage=new f,i.ElementName="ax-reveal-bound",i.removeStorageEvent="removeStorage",i.attachStorageEvent="attachStorage",i.replaceStorageEvent="replaceStorage";class j extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+}}class f{constructor(){this._currentHashId=0,this._storage=[],this.newBoundary=()=>{const a=this._currentHashId++,c={_currentHashId:0,id:a,clientX:-1e3,clientY:-1e3,paintedClientX:-1e3,paintedClientY:-1e3,mouseInBoundary:!1,canvasList:[],dirty:!1,raf:null,destroy:()=>{this._storage.find((a,b)=>{return this._storage.splice(b,1),a===c})},addReveal:a=>{const d={canvas:a,ctx:a.getContext("2d"),cachedRevealBitmap:{width:0,height:0,color:"",opacity:0,bitmaps:[]},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,cacheCanvasPaintingStyle:()=>{var c=Math.round;if(d.currentFrameId===d.cachedFrameId)return d.cachedStyle;const e=!!document.documentElement.dataset.revealCompat,f=b(a,e);if(0===f.size())return d.cachedStyle;const g=a.getBoundingClientRect(),h=f.getColor("--reveal-color"),i=h.match(/\((\d+,\s*\d+,\s*\d+)[\s\S]*?\)/),j={top:c(g.top),left:c(g.left),width:c(g.width),height:c(g.height),color:i&&1<i.length?i[1]:"0, 0, 0",opacity:f.getNumber("--reveal-opacity"),borderStyle:f.get("--reveal-border-style"),borderWidth:f.getNumber("--reveal-border-width"),fillMode:f.get("--reveal-fill-mode"),fillRadius:f.getNumber("--reveal-fill-radius"),diffuse:"true"===f.get("--reveal-diffuse"),revealAnimateSpeed:f.getNumber("--reveal-animate-speed"),revealReleasedAccelerateRate:f.getNumber("--reveal-released-accelerate-rate")},{width:k,height:l,fillMode:m,fillRadius:n}=j;let o=[0,0];switch(m){case"none":break;case"relative":o=[k,l].sort((c,a)=>c-a).map(a=>a*n);break;case"absolute":o=[n,n];break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute` or `none`!");}const p=2*o[1];d.cachedStyle=Object.assign({},j,{trueFillRadius:o,cacheCanvasSize:p}),d.cachedFrameId=d.currentFrameId},cacheRevealBitmaps:()=>{if(!d.ctx)return;const{width:a,height:b,color:c,opacity:e,trueFillRadius:f,cacheCanvasSize:g}=d.cachedStyle,h=d.cachedRevealBitmap;if(a!==h.width||b!=h.height||c!=h.color||e!=h.opacity){d.width=a,d.height=b,d.canvas.width=a,d.canvas.height=b,d.cachedRevealBitmap={width:a,height:b,color:c,opacity:e,bitmaps:[]};for(const a of[0,1]){// 0 means border, 1 means fill.
+const b=document.createElement("canvas");b.width=g,b.height=g;const h=b.getContext("2d");if(!h)return;const i=0===a?e:.5*e,j=h.createRadialGradient(g/2,g/2,0,g/2,g/2,f[a]);j.addColorStop(0,"rgba("+c+", "+i+")"),j.addColorStop(1,"rgba("+c+", 0.0)"),h.fillStyle=j,h.fillRect(0,0,g,g);const k=h.getImageData(0,0,g,g);d.cachedRevealBitmap.bitmaps.push(k)}}},mouseInCanvas:()=>{d.cacheCanvasPaintingStyle();const{top:a,left:b,width:e,height:f}=d.cachedStyle,g=c.clientX-b,h=c.clientY-a;return!(0>g||g>e)&&!(0>h||h>f)},getAnimateGrd:(a,b)=>{if(!d.ctx)return null;const{color:c,opacity:e}=d.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(${c},${i})`),b.addColorStop(.55*k,`rgba(${c},${j})`),b.addColorStop(k,`rgba(${c}, 0)`),b},mouseUpClientX:null,mouseUpClientY:null,mouseDownAnimateStartFrame:null,mouseDownAnimateCurrentFrame:null,mouseDownAnimateReleasedFrame:null,mouseDownAnimateLogicFrame:null,mousePressed:!1,mouseReleased:!1};d.cacheCanvasPaintingStyle(),d.cacheRevealBitmaps(),c.canvasList.push(d)},removeReveal:a=>{c.canvasList.find((b,d)=>!!(b&&a===b.canvas)&&(c.canvasList.splice(d,1),!0))},onPointerEnterBoundary:()=>{c.mouseInBoundary=!0,c.raf||(c.raf=window.requestAnimationFrame(a=>c.paintAll(a)))},onPointerLeaveBoundary:()=>{c.mouseInBoundary=!1,c.paintAll(0,!0)},paintAll:(a,b)=>{(b||c.mouseInBoundary||0!==c.animationQueue.size)&&(c.animationQueue.forEach(b=>{if(!a)return;if(b.currentFrameId===a)return;b.currentFrameId=a,null===b.mouseDownAnimateStartFrame&&(b.mouseDownAnimateStartFrame=a);const d=a-b.mouseDownAnimateStartFrame;b.mouseDownAnimateCurrentFrame=d;const e=b.cachedStyle.revealAnimateSpeed,f=b.cachedStyle.revealReleasedAccelerateRate;b.mouseDownAnimateLogicFrame=b.mouseReleased&&b.mouseDownAnimateReleasedFrame?d/e+(d-b.mouseDownAnimateReleasedFrame)/e*f:d/e,1<b.mouseDownAnimateLogicFrame&&c.cleanUpAnimation(b)}),c.canvasList.forEach(d=>{d.currentFrameId=a,g(d,c,b)}),c.dirty=!0,c.paintedClientX=c.clientX,c.paintedClientY=c.clientY,c.mouseInBoundary||0!==c.animationQueue.size?window.requestAnimationFrame(a=>{c.paintAll(a)}):c.raf=null)},resetAll:()=>{c.canvasList.forEach(a=>{g(a,c)})},initializeAnimation:()=>{const a=c.canvasList.find(a=>a.mouseInCanvas());a&&(c.animationQueue.add(a),a.mouseDownAnimateStartFrame=null,a.mousePressed=!0,a.mouseReleased=!1)},switchAnimation:()=>{c.animationQueue.forEach(a=>{a.mouseReleased||(a.mouseReleased=!0,a.mouseDownAnimateReleasedFrame=a.mouseDownAnimateCurrentFrame,a.mouseUpClientX=c.clientX,a.mouseUpClientY=c.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,c.animationQueue.delete(a),g(a,c,!0)},animationQueue:new Set,getRevealAnimationConfig:()=>c.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(c),c}}}const g=(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.bitmaps.length)return;a.cacheCanvasPaintingStyle(),a.cacheRevealBitmaps();const{top:e,left:f,width:g,height:h,cacheCanvasSize:i,trueFillRadius:j}=a.cachedStyle,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.bitmaps[0],u,v,-u,-v,g,h),a.ctx.clearRect(q,r,s,t)),"none"!=m&&p&&a.ctx.putImageData(a.cachedRevealBitmap.bitmaps[1],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 h extends HTMLElement{constructor(){super(...arguments),this.stateManager=new f}}h.ElementName="ax-reveal-provider";class i 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(i.removeStorageEvent,{detail:b})),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(i.attachStorageEvent,{detail:this._storage})),b&&this.dispatchEvent(new CustomEvent(i.replaceStorageEvent,{detail:{old:b,new:a}})))}waitForStorage(a){this.storage===void 0?this.addEventListener(i.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(h.ElementName),c=b?b.stateManager:i.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}}i.storage=new f,i.ElementName="ax-reveal-bound",i.removeStorageEvent="removeStorage",i.attachStorageEvent="attachStorage",i.replaceStorageEvent="replaceStorage";class j extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
 <div>
@@ -8,0 +9,0 @@ <slot></slot>

build/RevealStateManager.d.ts

@@ -23,3 +23,3 @@ interface CachedStyle {
     height: number;
-    cachedRevealBitmap: CachedRevealBitmap[];
+    cachedRevealBitmap: CachedRevealBitmap;
     mouseUpClientX: number | null;
@@ -36,3 +36,3 @@ mouseUpClientY: number | null;
     cachedFrameId: any;
-    getCanvasPaintingStyle(): CachedStyle;
+    cacheCanvasPaintingStyle(): void;
     cacheRevealBitmaps(): void;
@@ -68,4 +68,7 @@ mouseInCanvas(): boolean;
 interface CachedRevealBitmap {
-    type: number;
-    bitmap: ImageData;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    bitmaps: ImageData[];
 }
@@ -72,0 +75,0 @@ declare class RevealStateManager {

es/RevealStateManager.d.ts

@@ -23,3 +23,3 @@ interface CachedStyle {
     height: number;
-    cachedRevealBitmap: CachedRevealBitmap[];
+    cachedRevealBitmap: CachedRevealBitmap;
     mouseUpClientX: number | null;
@@ -36,3 +36,3 @@ mouseUpClientY: number | null;
     cachedFrameId: any;
-    getCanvasPaintingStyle(): CachedStyle;
+    cacheCanvasPaintingStyle(): void;
     cacheRevealBitmaps(): void;
@@ -68,4 +68,7 @@ mouseInCanvas(): boolean;
 interface CachedRevealBitmap {
-    type: number;
-    bitmap: ImageData;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    bitmaps: ImageData[];
 }
@@ -72,0 +75,0 @@ declare class RevealStateManager {

es/RevealStateManager.js

@@ -40,3 +40,9 @@ // interface RevealStyle {
                         ctx: $el.getContext('2d'),
-                        cachedRevealBitmap: [],
+                        cachedRevealBitmap: {
+                            width: 0,
+                            height: 0,
+                            color: '',
+                            opacity: 0,
+                            bitmaps: [],
+                        },
                         width: 0,
@@ -59,7 +65,7 @@ height: 0,
                             revealAnimateSpeed: 0,
-                            revealReleasedAccelerateRate: 0
+                            revealReleasedAccelerateRate: 0,
                         },
                         currentFrameId: -1,
                         cachedFrameId: -2,
-                        getCanvasPaintingStyle: () => {
+                        cacheCanvasPaintingStyle: () => {
                             if (canvasConfig.currentFrameId === canvasConfig.cachedFrameId) {
@@ -109,3 +115,2 @@ return canvasConfig.cachedStyle;
                             canvasConfig.cachedFrameId = canvasConfig.currentFrameId;
-                            return canvasConfig.cachedStyle;
                         },
@@ -115,4 +120,7 @@ cacheRevealBitmaps: () => {
                                 return;
-                            const { width, height, trueFillRadius, cacheCanvasSize } = canvasConfig.getCanvasPaintingStyle();
-                            const { color, opacity } = canvasConfig.cachedStyle;
+                            const { width, height, color, opacity, trueFillRadius, cacheCanvasSize, } = canvasConfig.cachedStyle;
+                            const last = canvasConfig.cachedRevealBitmap;
+                            if (width === last.width && height == last.height && color == last.color && opacity == last.opacity) {
+                                return;
+                            }
                             canvasConfig.width = width;
@@ -122,14 +130,16 @@ canvasConfig.height = height;
                             canvasConfig.canvas.height = height;
-                            canvasConfig.cachedRevealBitmap = [];
-                            let fillAlpha, grd, revealCanvas, revealCtx;
-                            for (let i of [0, 1]) {
+                            canvasConfig.cachedRevealBitmap = {
+                                width, height, color, opacity,
+                                bitmaps: [],
+                            };
+                            for (const i of [0, 1]) {
                                 // 0 means border, 1 means fill.
-                                revealCanvas = document.createElement('canvas');
+                                const revealCanvas = document.createElement('canvas');
                                 revealCanvas.width = cacheCanvasSize;
                                 revealCanvas.height = cacheCanvasSize;
-                                revealCtx = revealCanvas.getContext('2d');
+                                const revealCtx = revealCanvas.getContext('2d');
                                 if (!revealCtx)
                                     return;
-                                fillAlpha = i === 0 ? opacity : (opacity * 0.5);
-                                grd = revealCtx.createRadialGradient(cacheCanvasSize / 2, cacheCanvasSize / 2, 0, cacheCanvasSize / 2, cacheCanvasSize / 2, trueFillRadius[i]);
+                                const fillAlpha = i === 0 ? opacity : (opacity * 0.5);
+                                const grd = revealCtx.createRadialGradient(cacheCanvasSize / 2, cacheCanvasSize / 2, 0, cacheCanvasSize / 2, cacheCanvasSize / 2, trueFillRadius[i]);
                                 grd.addColorStop(0, 'rgba(' + color + ', ' + fillAlpha + ')');
@@ -139,10 +149,9 @@ grd.addColorStop(1, 'rgba(' + color + ', 0.0)');
                                 revealCtx.fillRect(0, 0, cacheCanvasSize, cacheCanvasSize);
-                                canvasConfig.cachedRevealBitmap.push({
-                                    type: i,
-                                    bitmap: revealCtx.getImageData(0, 0, cacheCanvasSize, cacheCanvasSize)
-                                });
+                                const bitmap = revealCtx.getImageData(0, 0, cacheCanvasSize, cacheCanvasSize);
+                                canvasConfig.cachedRevealBitmap.bitmaps.push(bitmap);
                             }
                         },
                         mouseInCanvas: () => {
-                            const { top, left, width, height } = canvasConfig.getCanvasPaintingStyle();
+                            canvasConfig.cacheCanvasPaintingStyle();
+                            const { top, left, width, height } = canvasConfig.cachedStyle;
                             const relativeX = storage.clientX - left;
@@ -178,4 +187,5 @@ const relativeY = storage.clientY - top;
                         mousePressed: false,
-                        mouseReleased: false
+                        mouseReleased: false,
                     };
+                    canvasConfig.cacheCanvasPaintingStyle();
                     canvasConfig.cacheRevealBitmaps();
@@ -292,3 +302,3 @@ storage.canvasList.push(canvasConfig);
                 mousePressed: false,
-                mouseReleased: false
+                mouseReleased: false,
             };
@@ -313,8 +323,7 @@ this._storage.push(storage);
         return;
-    if (config.cachedRevealBitmap.length < 2)
+    if (config.cachedRevealBitmap.bitmaps.length < 2)
         return;
-    const { top, left, width, height, cacheCanvasSize, trueFillRadius } = config.getCanvasPaintingStyle();
-    if (width !== config.width || height !== config.height) {
-        config.cacheRevealBitmaps();
-    }
+    config.cacheCanvasPaintingStyle();
+    config.cacheRevealBitmaps();
+    const { top, left, width, height, cacheCanvasSize, trueFillRadius } = config.cachedStyle;
     const borderStyle = config.cachedStyle.borderStyle;
@@ -357,7 +366,7 @@ const borderWidth = config.cachedStyle.borderWidth;
         if (borderStyle !== 'none') {
-            config.ctx.putImageData(config.cachedRevealBitmap[0].bitmap, putX, putY, -putX, -putY, width, height);
+            config.ctx.putImageData(config.cachedRevealBitmap.bitmaps[0], putX, putY, -putX, -putY, width, height);
             config.ctx.clearRect(fillX, fillY, fillW, fillH);
         }
         if (fillMode != 'none' && mouseInCanvas)
-            config.ctx.putImageData(config.cachedRevealBitmap[1].bitmap, putX, putY, fillX - putX, fillY - putY, fillW, fillH);
+            config.ctx.putImageData(config.cachedRevealBitmap.bitmaps[1], putX, putY, fillX - putX, fillY - putY, fillW, fillH);
     }
@@ -364,0 +373,0 @@ if (!config.mousePressed || !config.mouseDownAnimateLogicFrame)

package.json

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

src/RevealStateManager.ts

@@ -37,3 +37,3 @@ // interface RevealStyle {
     height: number;
-    cachedRevealBitmap: CachedRevealBitmap[];
+    cachedRevealBitmap: CachedRevealBitmap;
     mouseUpClientX: number | null;
@@ -51,3 +51,3 @@ mouseUpClientY: number | null;
 
-    getCanvasPaintingStyle(): CachedStyle;
+    cacheCanvasPaintingStyle(): void;
     cacheRevealBitmaps(): void;
@@ -88,4 +88,7 @@ mouseInCanvas(): boolean;
 interface CachedRevealBitmap {
-    type: number;
-    bitmap: ImageData;
+    width: number;
+    height: number;
+    color: string;
+    opacity: number;
+    bitmaps: ImageData[];
 }
@@ -121,3 +124,9 @@
                     ctx: $el.getContext('2d'),
-                    cachedRevealBitmap: [],
+                    cachedRevealBitmap: {
+                        width: 0,
+                        height: 0,
+                        color: '',
+                        opacity: 0,
+                        bitmaps: [],
+                    },
                     width: 0,
@@ -140,3 +149,3 @@ height: 0,
                         revealAnimateSpeed: 0,
-                        revealReleasedAccelerateRate: 0
+                        revealReleasedAccelerateRate: 0,
                     },
@@ -146,3 +155,3 @@ currentFrameId: -1,
 
-                    getCanvasPaintingStyle: () => {
+                    cacheCanvasPaintingStyle: () => {
                         if (canvasConfig.currentFrameId === canvasConfig.cachedFrameId) {
@@ -206,4 +215,2 @@ return canvasConfig.cachedStyle;
                         canvasConfig.cachedFrameId = canvasConfig.currentFrameId;
-
-                        return canvasConfig.cachedStyle;
                     },
@@ -213,10 +220,16 @@
                         if (!canvasConfig.ctx) return;
+
                         const {
                             width,
                             height,
+                            color,
+                            opacity,
                             trueFillRadius,
-                            cacheCanvasSize
-                        } = canvasConfig.getCanvasPaintingStyle();
+                            cacheCanvasSize,
+                        } = canvasConfig.cachedStyle;
 
-                        const { color, opacity } = canvasConfig.cachedStyle;
+                        const last = canvasConfig.cachedRevealBitmap;
+                        if (width === last.width && height == last.height && color == last.color && opacity == last.opacity) {
+                            return;
+                        }
 
@@ -227,18 +240,19 @@ canvasConfig.width = width;
                         canvasConfig.canvas.height = height;
-                        canvasConfig.cachedRevealBitmap = [];
+                        canvasConfig.cachedRevealBitmap = {
+                            width, height, color, opacity,
+                            bitmaps: [],
+                        };
 
-                        let fillAlpha, grd, revealCanvas, revealCtx;
-
-                        for (let i of [0, 1]) {
+                        for (const i of [0, 1]) {
                             // 0 means border, 1 means fill.
-                            revealCanvas = document.createElement('canvas');
+                            const revealCanvas = document.createElement('canvas');
                             revealCanvas.width = cacheCanvasSize;
                             revealCanvas.height = cacheCanvasSize;
 
-                            revealCtx = revealCanvas.getContext('2d');
+                            const revealCtx = revealCanvas.getContext('2d');
                             if (!revealCtx) return;
 
-                            fillAlpha = i === 0 ? opacity : (opacity * 0.5);
+                            const fillAlpha = i === 0 ? opacity : (opacity * 0.5);
 
-                            grd = revealCtx.createRadialGradient(
+                            const grd = revealCtx.createRadialGradient(
                                 cacheCanvasSize / 2,
@@ -249,3 +263,3 @@ cacheCanvasSize / 2,
                                 cacheCanvasSize / 2,
-                                trueFillRadius[i]
+                                trueFillRadius[i],
                             );
@@ -259,6 +273,5 @@
 
-                            canvasConfig.cachedRevealBitmap.push({
-                                type: i,
-                                bitmap: revealCtx.getImageData(0, 0, cacheCanvasSize, cacheCanvasSize)
-                            });
+                            const bitmap = revealCtx.getImageData(0, 0, cacheCanvasSize, cacheCanvasSize);
+
+                            canvasConfig.cachedRevealBitmap.bitmaps.push(bitmap);
                         }
@@ -268,3 +281,4 @@ },
                     mouseInCanvas: () => {
-                        const { top, left, width, height } = canvasConfig.getCanvasPaintingStyle();
+                        canvasConfig.cacheCanvasPaintingStyle();
+                        const { top, left, width, height } = canvasConfig.cachedStyle;
 
@@ -306,6 +320,8 @@ const relativeX = storage.clientX - left;
                     mousePressed: false,
-                    mouseReleased: false
+                    mouseReleased: false,
                 };
 
+                canvasConfig.cacheCanvasPaintingStyle();
                 canvasConfig.cacheRevealBitmaps();
+
                 storage.canvasList.push(canvasConfig);
@@ -441,3 +457,3 @@ },
             mousePressed: false,
-            mouseReleased: false
+            mouseReleased: false,
         };
@@ -467,9 +483,8 @@
     if (!storage.mouseInBoundary && !animationPlaying) return;
-    if (config.cachedRevealBitmap.length < 2) return;
+    if (config.cachedRevealBitmap.bitmaps.length < 2) return;
 
-    const { top, left, width, height, cacheCanvasSize, trueFillRadius } = config.getCanvasPaintingStyle();
+    config.cacheCanvasPaintingStyle();
+    config.cacheRevealBitmaps();
 
-    if (width !== config.width || height !== config.height) {
-        config.cacheRevealBitmaps();
-    }
+    const { top, left, width, height, cacheCanvasSize, trueFillRadius } = config.cachedStyle;
 
@@ -522,3 +537,3 @@ const borderStyle = config.cachedStyle.borderStyle;
         if (borderStyle !== 'none') {
-            config.ctx.putImageData(config.cachedRevealBitmap[0].bitmap, putX, putY, -putX, -putY, width, height);
+            config.ctx.putImageData(config.cachedRevealBitmap.bitmaps[0], putX, putY, -putX, -putY, width, height);
             config.ctx.clearRect(fillX, fillY, fillW, fillH);
@@ -529,3 +544,3 @@ }
             config.ctx.putImageData(
-                config.cachedRevealBitmap[1].bitmap,
+                config.cachedRevealBitmap.bitmaps[1],
                 putX,
@@ -536,3 +551,3 @@ putY,
                 fillW,
-                fillH
+                fillH,
             );
@@ -552,3 +567,3 @@ }
             config.mouseUpClientY - top,
-            trueFillRadius[1]
+            trueFillRadius[1],
         );
@@ -555,0 +570,0 @@ } else {

No alert changes

Improved metrics

Total package byte prevSize

1418395

increased by0.15%

Lines of code

1728

increased by1.83%

No dependency changes