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

Comparing version 0.2.0-alpha.2 to 0.2.0-alpha.3

build/CustomElements.d.ts

@@ -12,2 +12,3 @@ import { RevealStateManager } from './RevealStateManager.js';
     static readonly replaceStorageEvent = "replaceStorage";
+    private root;
     static readonly stateManager: RevealStateManager;
@@ -27,2 +28,3 @@ private _storage;
     disconnectedCallback(): void;
+    constructor();
 }
@@ -29,0 +31,0 @@ export declare class AxReveal extends HTMLElement {

build/main.js

@@ -15,5 +15,7 @@ (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';function b(a,b){return b?new d(a):new e(a)}function c(){customElements.define(k.ElementName,k),customElements.define(l.ElementName,l),customElements.define(m.ElementName,m)}class d{constructor(a){if(!d.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),d.colorParser=a,d.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 d.colorParser.style.color=this.get(a),d.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
                  * http://jsfiddle.net/robhawkes/gHCJt/
-                 */const{borderDecorationType:a,borderDecorationSize:b,borderWidth:c,width:d,height:e}=this.cachedStyle,f=this.cachedImg.cachedMask;if(b===(null===f||void 0===f?void 0:f.borderDecorationSize)&&a===(null===f||void 0===f?void 0:f.borderDecorationType))return;const g=this.cachedImg.cachedCanvas;this.syncSizeToElement(g.borderMask),this.syncSizeToElement(g.fillMask);// Draw masks.
+                 */const{borderStyle:a,borderDecorationType:b,borderDecorationSize:c,width:d,height:e}=this.cachedStyle,f="none"===a?0:this.cachedStyle.borderWidth,g=this.cachedImg.cachedMask;if(c===(null===g||void 0===g?void 0:g.borderDecorationSize)&&b===(null===g||void 0===g?void 0:g.borderDecorationType))return;const h=this.cachedImg.cachedCanvas;this.syncSizeToElement(h.borderMask),this.syncSizeToElement(h.fillMask);// Draw masks.
 // Some variables will be used frequently
-const h=b/2,j=d*this.pxRatio,k=e*this.pxRatio,l=j-b,m=k-b,{borderMask:n,fillMask:o}=this.cachedImg.cachedCtx;if(n&&o){for(let c of[n,o])c.clearRect(0,0,j,k),c.lineJoin=a,c.lineWidth=b,c.fillStyle="black";switch(n.globalCompositeOperation="source-over",this.cachedStyle.borderStyle){case"full":n.fillRect(h,h,l,m),n.strokeRect(h,h,l,m),n.globalCompositeOperation="destination-out",n.fillRect(h+c,h+c,l-2*c,m-2*c),n.strokeRect(h+c,h+c,l-2*c,m-2*c),o.fillRect(h+c,h+c,l-c,m-c),o.strokeRect(h+c,h+c,l-c,m-c);break;case"half":n.lineWidth=c,n.beginPath(),n.moveTo(0,h),n.lineTo(j,h),n.moveTo(0,k-h),n.lineTo(j,k-h),n.stroke(),o.rect(0,c,l,m-c);break;case"none":o.rect(0,0,l,m);break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `full`, `half` or `none`!");}return{width:d,height:e,borderDecorationSize:b,borderDecorationType:a}}},this.updateCachedReveal=()=>{const{color:a,opacity:b,trueFillRadius:c}=this.cachedStyle,d=c[1],e=2*d,f=this.cachedImg.cachedReveal;if(d!==(null===f||void 0===f?void 0:f.radius)||a!=(null===f||void 0===f?void 0:f.color)||b!=(null===f||void 0===f?void 0:f.opacity)){const{borderReveal:f,fillReveal:g}=this.cachedImg.cachedCanvas;this.syncSizeToRevealRadius(f),this.syncSizeToRevealRadius(g);for(const h of[0,1]){// 0 means border, 1 means fill.
+const j=d*this.pxRatio,k=e*this.pxRatio,{borderMask:l,fillMask:m}=this.cachedImg.cachedCtx;if(l&&m){for(let a of[l,m])a.clearRect(0,0,j,k),a.lineJoin=b,a.fillStyle="black";switch(l.globalCompositeOperation="source-over",a){// I HATE MATH!
+case"full":case"none":l.lineWidth=c;const b=[c/2,c/2,j-c,k-c];l.fillRect(...b),l.strokeRect(...b),l.globalCompositeOperation="destination-out";const d=c-f;l.lineWidth=d;const e=[f+d/2,f+d/2,j-2*f-d,k-2*f-d];l.fillRect(...e),l.strokeRect(...e),m.lineWidth=d,m.fillRect(...e),m.strokeRect(...e);break;case"half":// Draw the border mask
+const g=c/2;l.lineWidth=f,l.beginPath(),l.moveTo(0,g),l.lineTo(j,g),l.moveTo(0,k-g),l.lineTo(j,k-g),l.stroke(),m.rect(0,f,j,k-2*f);break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `full`, `half` or `none`!");}return{width:d,height:e,borderDecorationSize:c,borderDecorationType:b}}},this.updateCachedReveal=()=>{const{color:a,opacity:b,trueFillRadius:c}=this.cachedStyle,d=c[1],e=2*d,f=this.cachedImg.cachedReveal;if(d!==(null===f||void 0===f?void 0:f.radius)||a!=(null===f||void 0===f?void 0:f.color)||b!=(null===f||void 0===f?void 0:f.opacity)){const{borderReveal:f,fillReveal:g}=this.cachedImg.cachedCanvas;this.syncSizeToRevealRadius(f),this.syncSizeToRevealRadius(g);for(const h of[0,1]){// 0 means border, 1 means fill.
 const i=0===h?f:g,j=i.getContext("2d");if(!j)return;j.clearRect(0,0,i.width,i.height);const k=0===h?b:.5*b,l=j.createRadialGradient(d,d,0,d,d,c[h]);l.addColorStop(0,`rgba(${a}, ${k})`),l.addColorStop(1,`rgba(${a}, 0.0)`),j.fillStyle=l,j.clearRect(0,0,e,e),j.fillRect(0,0,e,e)}return{radius:d,color:a,opacity:b,borderReveal:f,fillReveal:g}}},this.updateCachedBitmap=()=>{if(!this.ctx)return;const a=this.updateCachedMask(),b=this.updateCachedReveal();a&&(this.cachedImg.cachedMask=a),b&&(this.cachedImg.cachedReveal=b)},this.mouseInCanvas=()=>{this.cacheCanvasPaintingStyle();const{top:a,left:b,width:c,height:d}=this.cachedStyle,e=this._store.clientX-b,f=this._store.clientY-a;return 0<e&&0<f&&e<c&&f<d},this.syncSizeToElement=a=>{const{width:b,height:c}=this.cachedStyle;a.width=b*this.pxRatio,a.height=c*this.pxRatio,a.style.width=`${b}px`,a.style.height=`${c}px`},this.syncSizeToRevealRadius=a=>{const{trueFillRadius:b}=this.cachedStyle,c=b[1],d=2*c;a.width=d*this.pxRatio,a.height=d*this.pxRatio},this.getAnimateGrd=(a,b)=>{const{color: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.paint=a=>{const b=this._store,c=b.animationQueue.has(this),d=b.clientX===b.paintedClientX&&b.clientY===b.paintedClientY;if(d&&!c&&!a)return;if(!this.ctx)return;if(!this.bufferCtx)return;if(this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),b.dirty=!1,!b.mouseInBoundary&&!c)return;if(!this.cachedImg.cachedReveal||!this.cachedImg.cachedMask)return;this.cacheCanvasPaintingStyle(),this.updateCachedBitmap();const{top:e,left:f,width:g,height:h,trueFillRadius:i,borderStyle:j,fillMode:k}=this.cachedStyle;this.syncSizeToElement(this.canvas),this.paintedWidth=g,this.paintedHeight=h;const l=this.mouseInCanvas();if(!l&&!this.cachedStyle.diffuse&&!c)return;const m=b.clientX-f,n=b.clientY-e,o=this.cachedImg.cachedReveal.radius,p=m-o,q=n-o;if(!(isNaN(m)||isNaN(n))&&(this.syncSizeToRevealRadius(this.bufferCanvas),this.ctx.clearRect(0,0,g,h),b.mouseInBoundary&&("none"!==j&&(this.bufferCtx.clearRect(0,0,g,h),this.bufferCtx.globalCompositeOperation="source-over",this.bufferCtx.drawImage(this.cachedImg.cachedCanvas.borderMask,0,0),this.bufferCtx.globalCompositeOperation="source-in",this.bufferCtx.drawImage(this.cachedImg.cachedCanvas.borderReveal,p*this.pxRatio,q*this.pxRatio),this.ctx.drawImage(this.bufferCanvas,0,0)),"none"!==k&&l&&(this.bufferCtx.clearRect(0,0,g,h),this.bufferCtx.globalCompositeOperation="source-over",this.bufferCtx.drawImage(this.cachedImg.cachedCanvas.fillMask,0,0),this.bufferCtx.globalCompositeOperation="source-in",this.bufferCtx.drawImage(this.cachedImg.cachedCanvas.fillReveal,p*this.pxRatio,q*this.pxRatio),this.ctx.drawImage(this.bufferCanvas,0,0))),this.mousePressed&&this.mouseDownAnimateLogicFrame)){this.bufferCtx.clearRect(0,0,g,h),this.bufferCtx.globalCompositeOperation="source-over",this.bufferCtx.drawImage(this.cachedImg.cachedCanvas.fillMask,0,0),this.bufferCtx.globalCompositeOperation="source-in";const a=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.bufferCtx.createRadialGradient(this.mouseUpClientX-f,this.mouseUpClientY-e,0,this.mouseUpClientX-f,this.mouseUpClientY-e,i[1]):this.bufferCtx.createRadialGradient(m,n,0,m,n,i[1]);this.getAnimateGrd(this.mouseDownAnimateLogicFrame,a),this.bufferCtx.fillStyle=a,this.bufferCtx.fillRect(0,0,g,h),this.ctx.drawImage(this.bufferCanvas,0,0)}// this.ctx.setTransform(this.pxRatio, 0, 0, this.pxRatio, 0, 0);
@@ -34,5 +36,8 @@ // this.bufferCtx.setTransform(this.pxRatio, 0, 0, this.pxRatio, 0, 0);
 // 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=new Set,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.addReveal=a=>{const b=new h(this,a);b.cacheCanvasPaintingStyle(),b.updateCachedBitmap(),this.canvasList.push(b)},this.removeReveal=a=>{this.canvasList=this.canvasList.filter(b=>b&&b.canvas===a)},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)=>{(b||this.mouseInBoundary||0!==this.animationQueue.size)&&(this.animationQueue.forEach(b=>{if(!a||b.currentFrameId===a)return;b.currentFrameId=a,null===b.mouseDownAnimateStartFrame&&(b.mouseDownAnimateStartFrame=a);const c=a-b.mouseDownAnimateStartFrame;b.mouseDownAnimateCurrentFrame=c;const d=b.cachedStyle.revealAnimateSpeed,e=b.cachedStyle.revealReleasedAccelerateRate;let f=c;b.mouseReleased&&b.mouseDownAnimateReleasedFrame&&(f+=(c-b.mouseDownAnimateReleasedFrame)*e),b.mouseDownAnimateLogicFrame=f/d,1<b.mouseDownAnimateLogicFrame&&this.cleanUpAnimation(b)}),this.canvasList.forEach(c=>{c.currentFrameId=a,c.paint(b)}),this.dirty=!0,this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.animationFrame=this.mouseInBoundary||0!==this.animationQueue.size?window.requestAnimationFrame(this.paintAll):null)},this.resetAll=()=>{this.canvasList.forEach(a=>{a.paint()})},this.initializeAnimation=()=>{const a=this.canvasList.find(a=>a.mouseInCanvas());a&&(this.animationQueue.add(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,this.animationQueue.delete(a),a.paint(!0)},this.getRevealAnimationConfig=()=>this.canvasList.find(a=>a.mouseInCanvas())||null,this.id=a}}class j{constructor(){this._currentHashId=0,this._storage=[],this.newBoundary=()=>{const a=this._currentHashId++,b=new i(a);return this._storage.push(b),b},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b===a)}}}class k extends HTMLElement{constructor(){super(...arguments),this.stateManager=new j}}k.ElementName="ax-reveal-provider";class l 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.handlePointerUp=()=>this.waitForStorage(a=>a.switchAnimation()),this.handlePointerDown=a=>this.waitForStorage(b=>{this.updatePointerPosition(a),b.initializeAnimation()})}get storage(){return this._storage}set storage(a){const b=this._storage;b&&(this.dispatchEvent(new CustomEvent(l.removeStorageEvent,{detail:b})),l.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(l.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(l.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(l.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(k.ElementName),c=b?b.stateManager:l.stateManager;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}}l.ElementName="ax-reveal-bound",l.removeStorageEvent="removeStorage",l.attachStorageEvent="attachStorage",l.replaceStorageEvent="replaceStorage",l.stateManager=new j;class m extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=new Set,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.addReveal=a=>{const b=new h(this,a);b.cacheCanvasPaintingStyle(),b.updateCachedBitmap(),this.canvasList.push(b)},this.removeReveal=a=>{this.canvasList=this.canvasList.filter(b=>b&&b.canvas===a)},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)=>{(b||this.mouseInBoundary||0!==this.animationQueue.size)&&(this.animationQueue.forEach(b=>{if(!a||b.currentFrameId===a)return;b.currentFrameId=a,null===b.mouseDownAnimateStartFrame&&(b.mouseDownAnimateStartFrame=a);const c=a-b.mouseDownAnimateStartFrame;b.mouseDownAnimateCurrentFrame=c;const d=b.cachedStyle.revealAnimateSpeed,e=b.cachedStyle.revealReleasedAccelerateRate;let f=c;b.mouseReleased&&b.mouseDownAnimateReleasedFrame&&(f+=(c-b.mouseDownAnimateReleasedFrame)*e),b.mouseDownAnimateLogicFrame=f/d,1<b.mouseDownAnimateLogicFrame&&this.cleanUpAnimation(b)}),this.canvasList.forEach(c=>{c.currentFrameId=a,c.paint(b)}),this.dirty=!0,this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.animationFrame=this.mouseInBoundary||0!==this.animationQueue.size?window.requestAnimationFrame(this.paintAll):null)},this.resetAll=()=>{this.canvasList.forEach(a=>{a.paint()})},this.initializeAnimation=()=>{const a=this.canvasList.find(a=>a.mouseInCanvas());a&&(this.animationQueue.add(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,this.animationQueue.delete(a),a.paint(!0)},this.getRevealAnimationConfig=()=>this.canvasList.find(a=>a.mouseInCanvas())||null,this.id=a}}class j{constructor(){this._currentHashId=0,this._storage=[],this.newBoundary=()=>{const a=this._currentHashId++,b=new i(a);return this._storage.push(b),b},this.removeBoundary=a=>{this._storage=this._storage.filter(b=>b===a)}}}class k extends HTMLElement{constructor(){super(...arguments),this.stateManager=new j}}k.ElementName="ax-reveal-provider";class l extends HTMLElement{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(l.removeStorageEvent,{detail:b})),l.stateManager.removeBoundary(b)),a&&(this._storage=a,this.dispatchEvent(new CustomEvent(l.attachStorageEvent,{detail:a}))),b&&a&&this.dispatchEvent(new CustomEvent(l.replaceStorageEvent,{detail:{old:b,new:a}}))}waitForStorage(a){this.storage===void 0?this.addEventListener(l.attachStorageEvent,()=>a(this.storage),{once:!0}):a(this.storage)}appendStorage(a=!1){if(!a&&this.storage)return;const b=this.closest(k.ElementName),c=b?b.stateManager:l.stateManager;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}}l.ElementName="ax-reveal-bound",l.removeStorageEvent="removeStorage",l.attachStorageEvent="attachStorage",l.replaceStorageEvent="replaceStorage",l.stateManager=new j;class m extends HTMLElement{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.root.innerHTML=`
+<div>
+    <slot></slot>
     <canvas></canvas>
@@ -39,0 +44,0 @@ </div>

es/CanvasConfig.js

@@ -98,3 +98,4 @@ import { createStorage } from './ComputedStyleStorage.js';
              */
-            const { borderDecorationType, borderDecorationSize, borderWidth, width, height } = this.cachedStyle;
+            const { borderStyle, borderDecorationType, borderDecorationSize, width, height } = this.cachedStyle;
+            const borderWidth = borderStyle === 'none' ? 0 : this.cachedStyle.borderWidth;
             const last = this.cachedImg.cachedMask;
@@ -110,7 +111,4 @@ if (borderDecorationSize === (last === null || last === void 0 ? void 0 : last.borderDecorationSize) &&
             // Some variables will be used frequently
-            const beginCoord = borderDecorationSize / 2;
             const ctxWidth = width * this.pxRatio;
             const ctxHeight = height * this.pxRatio;
-            const decWidth = ctxWidth - borderDecorationSize;
-            const decHeight = ctxHeight - borderDecorationSize;
             // Get context
@@ -123,20 +121,40 @@ const { borderMask: borderCtx, fillMask: fillCtx } = this.cachedImg.cachedCtx;
                 i.lineJoin = borderDecorationType;
-                i.lineWidth = borderDecorationSize;
                 i.fillStyle = 'black';
             }
             borderCtx.globalCompositeOperation = 'source-over';
-            switch (this.cachedStyle.borderStyle) {
+            switch (borderStyle) {
+                // I HATE MATH!
                 case 'full':
-                    // Draw the border mask
-                    borderCtx.fillRect(beginCoord, beginCoord, decWidth, decHeight);
-                    borderCtx.strokeRect(beginCoord, beginCoord, decWidth, decHeight);
+                case 'none':
+                    // Drawing the border mask:
+                    // Drawing the outer edge of the shape.
+                    borderCtx.lineWidth = borderDecorationSize;
+                    const geoParams1 = [
+                        borderDecorationSize / 2,
+                        borderDecorationSize / 2,
+                        ctxWidth - borderDecorationSize,
+                        ctxHeight - borderDecorationSize,
+                    ];
+                    borderCtx.fillRect(...geoParams1);
+                    borderCtx.strokeRect(...geoParams1);
+                    // Draw the inner part of the shape by remove unnecessary parts.
                     borderCtx.globalCompositeOperation = 'destination-out';
-                    borderCtx.fillRect(beginCoord + borderWidth, beginCoord + borderWidth, decWidth - borderWidth * 2, decHeight - borderWidth * 2);
-                    borderCtx.strokeRect(beginCoord + borderWidth, beginCoord + borderWidth, decWidth - borderWidth * 2, decHeight - borderWidth * 2);
+                    const clippingShapeLineWidth = borderDecorationSize - borderWidth;
+                    borderCtx.lineWidth = clippingShapeLineWidth;
+                    const geoParams2 = [
+                        borderWidth + clippingShapeLineWidth / 2,
+                        borderWidth + clippingShapeLineWidth / 2,
+                        ctxWidth - (borderWidth * 2) - clippingShapeLineWidth,
+                        ctxHeight - (borderWidth * 2) - clippingShapeLineWidth,
+                    ];
+                    borderCtx.fillRect(...geoParams2);
+                    borderCtx.strokeRect(...geoParams2);
                     // draw fill mask
-                    fillCtx.fillRect(beginCoord + borderWidth, beginCoord + borderWidth, decWidth - borderWidth, decHeight - borderWidth);
-                    fillCtx.strokeRect(beginCoord + borderWidth, beginCoord + borderWidth, decWidth - borderWidth, decHeight - borderWidth);
+                    fillCtx.lineWidth = clippingShapeLineWidth;
+                    fillCtx.fillRect(...geoParams2);
+                    fillCtx.strokeRect(...geoParams2);
                     break;
                 case 'half':
                     // Draw the border mask
+                    const beginCoord = borderDecorationSize / 2;
                     borderCtx.lineWidth = borderWidth;
@@ -150,7 +168,4 @@ borderCtx.beginPath();
                     // draw the fill mask
-                    fillCtx.rect(0, borderWidth, decWidth, decHeight - borderWidth);
+                    fillCtx.rect(0, borderWidth, ctxWidth, ctxHeight - (borderWidth * 2));
                     break;
-                case 'none':
-                    fillCtx.rect(0, 0, decWidth, decHeight);
-                    break;
                 default:
@@ -157,0 +172,0 @@ throw new SyntaxError('The value of `--reveal-border-style` must be `full`, `half` or `none`!');

es/CustomElements.d.ts

@@ -12,2 +12,3 @@ import { RevealStateManager } from './RevealStateManager.js';
     static readonly replaceStorageEvent = "replaceStorage";
+    private root;
     static readonly stateManager: RevealStateManager;
@@ -27,2 +28,3 @@ private _storage;
     disconnectedCallback(): void;
+    constructor();
 }
@@ -29,0 +31,0 @@ export declare class AxReveal extends HTMLElement {

es/CustomElements.js

@@ -11,3 +11,4 @@ import { RevealStateManager } from './RevealStateManager.js';
     constructor() {
-        super(...arguments);
+        super();
+        this.root = this.attachShadow({ mode: 'open' });
         this.updatePointerPosition = (ev) => {
@@ -27,2 +28,6 @@ this.waitForStorage(storage => {
         });
+        this.root.innerHTML = `
+<div>
+    <slot></slot>
+</div>`;
     }
@@ -29,0 +34,0 @@ get storage() {

package.json

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

src/CanvasConfig.ts

@@ -246,3 +246,4 @@ import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
 
-        const { borderDecorationType, borderDecorationSize, borderWidth, width, height } = this.cachedStyle;
+        const { borderStyle, borderDecorationType, borderDecorationSize, width, height } = this.cachedStyle;
+        const borderWidth = borderStyle === 'none' ? 0 : this.cachedStyle.borderWidth;
 
@@ -265,7 +266,4 @@ const last = this.cachedImg.cachedMask;
         // Some variables will be used frequently
-        const beginCoord = borderDecorationSize / 2;
         const ctxWidth = width * this.pxRatio;
         const ctxHeight = height * this.pxRatio;
-        const decWidth = ctxWidth - borderDecorationSize;
-        const decHeight = ctxHeight - borderDecorationSize;
 
@@ -280,3 +278,2 @@ // Get context
             i.lineJoin = borderDecorationType;
-            i.lineWidth = borderDecorationSize;
             i.fillStyle = 'black';
@@ -287,37 +284,42 @@ }
 
-        switch (this.cachedStyle.borderStyle) {
+        switch (borderStyle) {
+            // I HATE MATH!
             case 'full':
-                // Draw the border mask
-                borderCtx.fillRect(beginCoord, beginCoord, decWidth, decHeight);
-                borderCtx.strokeRect(beginCoord, beginCoord, decWidth, decHeight);
+            case 'none':
+                // Drawing the border mask:
+                // Drawing the outer edge of the shape.
+                borderCtx.lineWidth = borderDecorationSize;
+
+                const geoParams1 = [
+                    borderDecorationSize / 2,
+                    borderDecorationSize / 2,
+                    ctxWidth - borderDecorationSize,
+                    ctxHeight - borderDecorationSize,
+                ] as const;
+                borderCtx.fillRect(...geoParams1);
+                borderCtx.strokeRect(...geoParams1);
+
+                // Draw the inner part of the shape by remove unnecessary parts.
                 borderCtx.globalCompositeOperation = 'destination-out';
-                borderCtx.fillRect(
-                    beginCoord + borderWidth,
-                    beginCoord + borderWidth,
-                    decWidth - borderWidth * 2,
-                    decHeight - borderWidth * 2
-                );
-                borderCtx.strokeRect(
-                    beginCoord + borderWidth,
-                    beginCoord + borderWidth,
-                    decWidth - borderWidth * 2,
-                    decHeight - borderWidth * 2
-                );
+                const clippingShapeLineWidth = borderDecorationSize - borderWidth;
+                borderCtx.lineWidth = clippingShapeLineWidth;
 
+                const geoParams2 = [
+                    borderWidth + clippingShapeLineWidth / 2,
+                    borderWidth + clippingShapeLineWidth / 2,
+                    ctxWidth - (borderWidth * 2) - clippingShapeLineWidth,
+                    ctxHeight - (borderWidth * 2) - clippingShapeLineWidth,
+                ] as const;
+                borderCtx.fillRect(...geoParams2);
+                borderCtx.strokeRect(...geoParams2);
+
                 // draw fill mask
-                fillCtx.fillRect(
-                    beginCoord + borderWidth,
-                    beginCoord + borderWidth,
-                    decWidth - borderWidth,
-                    decHeight - borderWidth
-                );
-                fillCtx.strokeRect(
-                    beginCoord + borderWidth,
-                    beginCoord + borderWidth,
-                    decWidth - borderWidth,
-                    decHeight - borderWidth
-                );
+                fillCtx.lineWidth = clippingShapeLineWidth;
+                fillCtx.fillRect(...geoParams2);
+                fillCtx.strokeRect(...geoParams2);
                 break;
             case 'half':
                 // Draw the border mask
+                const beginCoord = borderDecorationSize / 2;
+
                 borderCtx.lineWidth = borderWidth;
@@ -332,7 +334,4 @@ borderCtx.beginPath();
                 // draw the fill mask
-                fillCtx.rect(0, borderWidth, decWidth, decHeight - borderWidth);
+                fillCtx.rect(0, borderWidth, ctxWidth, ctxHeight - (borderWidth * 2));
                 break;
-            case 'none':
-                fillCtx.rect(0, 0, decWidth, decHeight);
-                break;
 
@@ -339,0 +338,0 @@ default:

src/CustomElements.ts

@@ -16,2 +16,4 @@ import { RevealStateManager } from './RevealStateManager.js';
 
+    private root = this.attachShadow({ mode: 'open' });
+
     static readonly stateManager = new RevealStateManager();
@@ -92,2 +94,10 @@
     }
+
+    constructor() {
+        super();
+        this.root.innerHTML = `
+<div>
+    <slot></slot>
+</div>`
+    }
 }
@@ -94,0 +104,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1423871

increased by0.1%

Lines of code

2267

increased by1.39%

No dependency changes