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

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

build/CanvasConfig.d.ts

@@ -22,2 +22,6 @@ import { ComputedStyleStorage } from './ComputedStyleStorage.js';
     bottomRightBorderDecorationRadius: number;
+    withLeftBorderFactor: number;
+    withRightBorderFactor: number;
+    withTopBorderFactor: number;
+    withBottomBorderFactor: number;
     borderWidth: number;
@@ -24,0 +28,0 @@ hoverLight: boolean;

build/main.js

@@ -1,2 +0,2 @@
-(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a="undefined"==typeof globalThis?a||self:globalThis,b(a.AxRevealHighlight={}))})(this,function(a){'use strict';var d=Math.max;function e(a,b){return b?new h(a):new i(a)}function f(){customElements.define(v.ElementName,v),customElements.define(w.ElementName,w),customElements.define(x.ElementName,x)}function g({compat:a=!1,borderDetectionMode:b="strictEdge"}){if(y)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(s.borderDetectionMode=b,y=!0,window.CSS&&window.CSS.registerProperty)window.CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0, 0, 0)",inherits:!0}),window.CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.26",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-style",syntax:"<custom-ident>",initialValue:"full",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-type",syntax:"<custom-ident>",initialValue:"miter",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-radius",syntax:"<length>",initialValue:"4px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),window.CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-radius-mode",syntax:"<custom-ident>",initialValue:"cover",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),window.CSS.registerProperty({name:"--reveal-release-animation-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0}),f();else if(a){const a=document.documentElement;a.dataset.revealCompat="true",a.style.setProperty("--reveal-color","rgb(0, 0, 0)"),a.style.setProperty("--reveal-opacity","0.26"),a.style.setProperty("--reveal-border-style","full"),a.style.setProperty("--reveal-border-color",j),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","4"),a.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),a.style.setProperty("--reveal-hover-light","true"),a.style.setProperty("--reveal-hover-light-color",j),a.style.setProperty("--reveal-hover-light-radius","1.5"),a.style.setProperty("--reveal-hover-light-radius-mode","relative"),a.style.setProperty("--reveal-diffuse","true"),a.style.setProperty("--reveal-press-animation","true"),a.style.setProperty("--reveal-press-animation-radius-mode","cover"),a.style.setProperty("--reveal-press-animation-color",j),a.style.setProperty("--reveal-press-animation-speed","2000"),a.style.setProperty("--reveal-release-animation-accelerate-rate","6"),f()}else console.warn("Your browser do NOT support `CSS.registerProperty` method, registration failed!"),console.warn("If you are the developer, try using `register(true)` to support old browsers.")}class h{constructor(a){if(!h.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),h.colorParser=a,h.colorParserStyle=window.getComputedStyle(a)}this.el=a,this.style=window.getComputedStyle(a)}size(){return this.style.length}get(a){return this.style.getPropertyValue(a).trim()}getColor(a){return h.colorParser.style.color=this.get(a),h.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(exports):"function"==typeof define&&define.amd?define(["exports"],b):(a="undefined"==typeof globalThis?a||self:globalThis,b(a.AxRevealHighlight={}))})(this,function(a){'use strict';var d=Math.max;function e(a,b){return b?new h(a):new i(a)}function f(){customElements.define(v.ElementName,v),customElements.define(w.ElementName,w),customElements.define(x.ElementName,x)}function g({compat:a=!1,borderDetectionMode:b="strictEdge"}){if(y)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(s.borderDetectionMode=b,y=!0,window.CSS&&window.CSS.registerProperty)window.CSS.registerProperty({name:"--reveal-color",syntax:"<color>",initialValue:"rgb(0, 0, 0)",inherits:!0}),window.CSS.registerProperty({name:"--reveal-opacity",syntax:"<number>",initialValue:"0.26",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-style",syntax:"<custom-ident>",initialValue:"full",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-type",syntax:"<custom-ident>",initialValue:"miter",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-radius",syntax:"<length>",initialValue:"4px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-top-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-left-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-decoration-bottom-right-radius",syntax:"<length>",initialValue:"-1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-left",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-right",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-top",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-bottom",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-radius-mode",syntax:"<custom-ident>",initialValue:"relative",inherits:!0}),window.CSS.registerProperty({name:"--reveal-diffuse",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation",syntax:"<custom-ident>",initialValue:"true",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-color",syntax:"<color>",initialValue:j,inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-radius-mode",syntax:"<custom-ident>",initialValue:"cover",inherits:!0}),window.CSS.registerProperty({name:"--reveal-press-animation-speed",syntax:"<number>",initialValue:"2000",inherits:!0}),window.CSS.registerProperty({name:"--reveal-release-animation-accelerate-rate",syntax:"<number>",initialValue:"6",inherits:!0}),f();else if(a){const a=document.documentElement;a.dataset.revealCompat="true",a.style.setProperty("--reveal-color","rgb(0, 0, 0)"),a.style.setProperty("--reveal-opacity","0.26"),a.style.setProperty("--reveal-border-style","full"),a.style.setProperty("--reveal-border-color",j),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","4"),a.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),a.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),a.style.setProperty("--reveal-border-left","line"),a.style.setProperty("--reveal-border-right","line"),a.style.setProperty("--reveal-border-top","line"),a.style.setProperty("--reveal-border-bottom","line"),a.style.setProperty("--reveal-hover-light","true"),a.style.setProperty("--reveal-hover-light-color",j),a.style.setProperty("--reveal-hover-light-radius","1.5"),a.style.setProperty("--reveal-hover-light-radius-mode","relative"),a.style.setProperty("--reveal-diffuse","true"),a.style.setProperty("--reveal-press-animation","true"),a.style.setProperty("--reveal-press-animation-radius-mode","cover"),a.style.setProperty("--reveal-press-animation-color",j),a.style.setProperty("--reveal-press-animation-speed","2000"),a.style.setProperty("--reveal-release-animation-accelerate-rate","6"),f()}else console.warn("Your browser do NOT support `CSS.registerProperty` method, registration failed!"),console.warn("If you are the developer, try using `register(true)` to support old browsers.")}class h{constructor(a){if(!h.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),h.colorParser=a,h.colorParserStyle=window.getComputedStyle(a)}this.el=a,this.style=window.getComputedStyle(a)}size(){return this.style.length}get(a){return this.style.getPropertyValue(a).trim()}getColor(a){return h.colorParser.style.color=this.get(a),h.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
 // Maybe NaN
@@ -6,5 +6,6 @@ return parseFloat(this.get(a))}}class i{constructor(a){this.el=a,this.style=a.computedStyleMap()}size(){return this.style.size}get(a){return this.style.get(a).toString()}getColor(a){return this.get(a)}getNumber(a){const b=this.style.get(a).value;return"number"==typeof b?b:parseFloat(b);// Maybe NaN
 // https://stackoverflow.com/a/11508164/3931936
-const b=parseInt(a.substring(1),16);var c=255&b>>16,d=255&b>>8,e=255&b;return c+","+d+","+e}else{let b="",c=!1,d=0;for(let e=0;e<a.length;e++){const f=a[e],g=f.charCodeAt(0)-48;if(" "!==f){if(c&&!(0<=g&&10>g)&&","!==f&&")"!==f)throw new SyntaxError(`${a} is not a validate color value!`);if(!c&&"("===f){c=!0;continue}if(2>d&&")"===f)throw new SyntaxError(`${a} should have at least three color channel`);if(","===f&&d++,")"===f)return b;c&&(b+=f)}}return b}},m=()=>document.createElement("canvas");class n{constructor(a,b){var f=Math.floor;this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderStyle:"",borderColor:"",borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const a=this.canvas.getBoundingClientRect();this.cachedBoundingRect.top=f(a.top),this.cachedBoundingRect.left=f(a.left),this.cachedBoundingRect.width=f(a.width),this.cachedBoundingRect.height=f(a.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(a=[0,0],c=this.computedStyle.get("--reveal-hover-light-radius-mode"),e=this.computedStyle.getNumber("--reveal-hover-light-radius"))=>{var f=Math.min;const g=this.cachedBoundingRect;switch(c){case"relative":a[0]=f(g.width,g.height)*e,a[1]=d(g.width,g.height)*e;break;case"absolute":a[0]=e,a[1]=e;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute`!");}return this._store.updateMaxRadius(d(a[0],a[1])),a},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=l(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=l(this.computedStyle.getColor("--reveal-border-color")),d=l(this.computedStyle.getColor("--reveal-hover-light-color")),e=l(this.computedStyle.getColor("--reveal-press-animation-color")),f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b===j?a:b,f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d===j?a:d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-radius-mode"),f.diffuse="true"===this.computedStyle.get("--reveal-diffuse"),f.pressAnimation="true"===this.computedStyle.get("--reveal-press-animation"),f.pressAnimationFillMode=this.computedStyle.get("--reveal-press-animation-radius-mode"),f.pressAnimationColor=e===j?a:e,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");const c=this.computedStyle.getNumber("--reveal-border-decoration-radius"),g=this.computedStyle.getNumber("--reveal-border-decoration-top-left-radius"),h=this.computedStyle.getNumber("--reveal-border-decoration-top-right-radius"),i=this.computedStyle.getNumber("--reveal-border-decoration-bottom-left-radius"),m=this.computedStyle.getNumber("--reveal-border-decoration-bottom-right-radius");if(f.topLeftBorderDecorationRadius=0<=g?g:c,f.topRightBorderDecorationRadius=0<=h?h:c,f.bottomLeftBorderDecorationRadius=0<=i?i:c,f.bottomRightBorderDecorationRadius=0<=m?m:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode,f.hoverLightFillRadius),!k(f.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.updateCachedReveal=()=>{const a=this.cachedStyle,b=a.trueFillRadius[1]*this.pxRatio,c=2*b,d=this.cachedImg.cachedReveal,e=b===d.radius&&a.opacity===d.opacity,f=e&&a.borderColor===d.borderColor,g=e&&a.hoverLightColor===d.hoverLightColor;if(f&&g)return;const{borderReveal:h,fillReveal:j}=this.cachedImg.cachedCanvas,{borderReveal:k,fillReveal:l}=this.cachedImg.cachedCtx;this.syncSizeToRevealRadius(h),this.syncSizeToRevealRadius(j);for(let d=0;1>=d;d++){// 0 means border, 1 means hover light.
-if(0==d&&f)continue;if(1==d&&g)continue;const e=0==d?h:j,i=0==d?k:l;if(!i)continue;const m=0==d?a.borderColor:a.hoverLightColor;i.clearRect(0,0,e.width,e.height);const n=0==d?a.opacity:.5*a.opacity,o=i.createRadialGradient(b,b,0,b,b,b);o.addColorStop(0,`rgba(${m}, ${n})`),o.addColorStop(1,`rgba(${m}, 0.0)`),i.fillStyle=o,i.clearRect(0,0,c,c),i.fillRect(0,0,c,c)}this.cachedImg.cachedReveal.radius=b,this.cachedImg.cachedReveal.borderColor=a.borderColor,this.cachedImg.cachedReveal.hoverLightColor=a.hoverLightColor,this.cachedImg.cachedReveal.opacity=a.opacity;this.ctx&&(this.cachedImg.cachedPattern.borderReveal=this.ctx.createPattern(h,"no-repeat"),this.cachedImg.cachedPattern.fillReveal=this.ctx.createPattern(j,"no-repeat"))},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.mouseInCanvas=()=>{const a=this.cachedBoundingRect,b=this._store.clientX-a.left,c=this._store.clientY-a.top;return 0<b&&0<c&&b<a.width&&c<a.height},this.syncSizeToElement=a=>{const c=this.cachedBoundingRect;(a.width!==c.width||a.height!==c.height)&&(a.width=c.width*this.pxRatio,a.height=c.height*this.pxRatio,a.style.width=`${c.width}px`,a.style.height=`${c.height}px`)},this.syncSizeToRevealRadius=a=>{const{trueFillRadius:b}=this.cachedStyle,c=b[1]||1,d=2*c*this.pxRatio;(a.width!==d||a.height!==d)&&(a.width=d,a.height=d)},this.updateAnimateGrd=(a,b)=>{const{pressAnimationColor:c,opacity:d}=this.cachedStyle,e=d*(.2-a),f=d*(.1-.07*a),g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;b.addColorStop(0,`rgba(${c},${h})`),b.addColorStop(.55*j,`rgba(${c},${i})`),b.addColorStop(j,`rgba(${c}, 0)`)},this.drawShape=a=>{if(!this.ctx)return;const d=this.cachedBoundingRect,b=d.width*this.pxRatio,e=d.height*this.pxRatio,f=this.cachedStyle,c=f.borderWidth*this.pxRatio,g=f.topLeftBorderDecorationRadius*this.pxRatio,h=f.topRightBorderDecorationRadius*this.pxRatio,i=f.bottomLeftBorderDecorationRadius*this.pxRatio,j=f.bottomRightBorderDecorationRadius*this.pxRatio,k=c<g?g-c:0,l=c<h?h-c:0,m=c<i?i-c:0,n=c<j?j-c:0;switch(this.ctx.beginPath(),f.borderDecorationType){// Oh... Fuck... It's painful...
-case"round":this.ctx.moveTo(g,0),this.ctx.arcTo(b,0,b,e,h),this.ctx.lineTo(b,e-j),this.ctx.arcTo(b,e,j,e,j),this.ctx.lineTo(i,e),this.ctx.arcTo(0,e,0,j,i),this.ctx.lineTo(0,g),this.ctx.arcTo(0,0,g,0,g),a&&(this.ctx.moveTo(k,c),this.ctx.arcTo(c,c,c,k+c,k),this.ctx.lineTo(c,e-c-m),this.ctx.arcTo(c,e-c,c+m,e-c,m),this.ctx.lineTo(b-c-n,e-c),this.ctx.arcTo(b-c,e-c,b-c,e-c-n,n),this.ctx.lineTo(b-c,c+l),this.ctx.arcTo(b-c,c,b-c-l,c,l),this.ctx.lineTo(k,c));break;case"bevel":this.ctx.moveTo(g,0),this.ctx.lineTo(b-h,0),this.ctx.lineTo(b,h),this.ctx.lineTo(b,e-j),this.ctx.lineTo(b-j,e),this.ctx.lineTo(i,e),this.ctx.lineTo(0,e-i),this.ctx.lineTo(0,g),this.ctx.lineTo(g,0),this.ctx.lineTo(b-h,0),a&&(this.ctx.moveTo(k+c,c),this.ctx.lineTo(c,k+c),this.ctx.lineTo(c,e-m-c),this.ctx.lineTo(c+m,e-c),this.ctx.lineTo(b-n-c,e-c),this.ctx.lineTo(b-c,e-n-c),this.ctx.lineTo(b-c,l+c),this.ctx.lineTo(b-l-c,c),this.ctx.lineTo(k+c,c));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(b,0),this.ctx.lineTo(b,e),this.ctx.lineTo(0,e),this.ctx.lineTo(0,0),a&&("full"===f.borderStyle&&(this.ctx.moveTo(c,c),this.ctx.lineTo(c,e-c),this.ctx.lineTo(b-c,e-c),this.ctx.lineTo(b-c,c),this.ctx.lineTo(0,c)),"half"===f.borderStyle&&(this.ctx.moveTo(0,c),this.ctx.lineTo(0,e-c),this.ctx.lineTo(b,e-c),this.ctx.lineTo(b,c),this.ctx.lineTo(0,c)));}this.ctx.closePath()},this.paint=a=>{var e=Number.isNaN;const g=this._store,h=g.animationQueue.includes(this),i=g.clientX===g.paintedClientX&&g.clientY===g.paintedClientY;if(i&&!h&&!a)return!1;if(!this.ctx)return!1;if(this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),g.dirty=!1,!g.mouseInBoundary&&!h)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.canvas),this.cacheBoundingRect();const j=this.cachedBoundingRect,b=g.clientX-j.left,k=g.clientY-j.top;if(e(b)||e(k))return!1;const l=this.cachedStyle;this.getTrueFillRadius(l.trueFillRadius),this.paintedWidth=j.width*this.pxRatio,this.paintedHeight=j.height*this.pxRatio;const c=d(l.trueFillRadius[0],l.trueFillRadius[1]),m=b-c<j.width,n=k-c<j.height,o=0<b+c&&m&&0<k+c&&n;if(!o&&!h)return!1;this.cacheCanvasPaintingStyle(),this.updateCachedBitmap();const p=this.cachedImg.cachedReveal.radius,q=f(b*this.pxRatio-p),r=f(k*this.pxRatio-p);if(g.mouseInBoundary){const a=0<b&&0<k&&b<j.width&&k<j.height,c=this.cachedImg.cachedPattern.fillReveal;l.hoverLight&&a&&c&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(q,r),this.ctx.fillStyle=c,this.ctx.fill());const d=l.diffuse&&o||a,e=this.cachedImg.cachedPattern.borderReveal;0!==l.borderWidth&&e&&d&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(q,r),this.ctx.fillStyle=e,this.ctx.fill())}if(l.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const a="constrained"===l.pressAnimationFillMode?l.trueFillRadius[1]:d(j.width,j.height),c=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,0,(this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,a*this.pxRatio):this.ctx.createRadialGradient(b*this.pxRatio,k*this.pxRatio,0,b*this.pxRatio,k*this.pxRatio,a*this.pxRatio);// prettier-ignore
+const b=parseInt(a.substring(1),16);var c=255&b>>16,d=255&b>>8,e=255&b;return c+","+d+","+e}else{let b="",c=!1,d=0;for(let e=0;e<a.length;e++){const f=a[e],g=f.charCodeAt(0)-48;if(" "!==f){if(c&&!(0<=g&&10>g)&&","!==f&&")"!==f)throw new SyntaxError(`${a} is not a validate color value!`);if(!c&&"("===f){c=!0;continue}if(2>d&&")"===f)throw new SyntaxError(`${a} should have at least three color channel`);if(","===f&&d++,")"===f)return b;c&&(b+=f)}}return b}},m=()=>document.createElement("canvas");class n{constructor(a,b){var f=Math.floor;this.pxRatio=window.devicePixelRatio||1,this.paintedWidth=0,this.paintedHeight=0,this.currentFrameId=-1,this.cachedBoundingRectFrameId=-2,this.cachedBoundingRect={top:-1,left:-1,width:-1,height:-1},this.cachedStyleFrameId=-2,this.cachedStyle={trueFillRadius:[0,0],color:"",opacity:1,borderStyle:"",borderColor:"",borderDecorationType:"miter",borderDecorationRadius:0,topLeftBorderDecorationRadius:0,topRightBorderDecorationRadius:0,bottomLeftBorderDecorationRadius:0,bottomRightBorderDecorationRadius:0,withLeftBorderFactor:1,withRightBorderFactor:1,withTopBorderFactor:1,withBottomBorderFactor:1,borderWidth:1,hoverLight:!0,hoverLightColor:"",hoverLightFillMode:"",hoverLightFillRadius:0,diffuse:!0,pressAnimation:!0,pressAnimationFillMode:"",pressAnimationColor:"",pressAnimationSpeed:0,releaseAnimationAccelerateRate:0},this.mouseUpClientX=null,this.mouseUpClientY=null,this.mouseDownAnimateStartFrame=null,this.mouseDownAnimateCurrentFrame=null,this.mouseDownAnimateReleasedFrame=null,this.mouseDownAnimateLogicFrame=null,this.mousePressed=!1,this.mouseReleased=!1,this.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const a=this.canvas.getBoundingClientRect();this.cachedBoundingRect.top=f(a.top),this.cachedBoundingRect.left=f(a.left),this.cachedBoundingRect.width=f(a.width),this.cachedBoundingRect.height=f(a.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(a=[0,0],c=this.computedStyle.get("--reveal-hover-light-radius-mode"),e=this.computedStyle.getNumber("--reveal-hover-light-radius"))=>{var f=Math.min;const g=this.cachedBoundingRect;switch(c){case"relative":a[0]=f(g.width,g.height)*e,a[1]=d(g.width,g.height)*e;break;case"absolute":a[0]=e,a[1]=e;break;default:throw new SyntaxError("The value of `--reveal-border-style` must be `relative`, `absolute`!");}return this._store.updateMaxRadius(d(a[0],a[1])),a},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=l(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=l(this.computedStyle.getColor("--reveal-border-color")),d=l(this.computedStyle.getColor("--reveal-hover-light-color")),e=l(this.computedStyle.getColor("--reveal-press-animation-color")),f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b===j?a:b,f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.computedStyle.get("--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.computedStyle.get("--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.computedStyle.get("--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.computedStyle.get("--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d===j?a:d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-radius-mode"),f.diffuse="true"===this.computedStyle.get("--reveal-diffuse"),f.pressAnimation="true"===this.computedStyle.get("--reveal-press-animation"),f.pressAnimationFillMode=this.computedStyle.get("--reveal-press-animation-radius-mode"),f.pressAnimationColor=e===j?a:e,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");// Border decoration related configurations
+const c=this.computedStyle.getNumber("--reveal-border-decoration-radius"),g=this.computedStyle.getNumber("--reveal-border-decoration-top-left-radius"),h=this.computedStyle.getNumber("--reveal-border-decoration-top-right-radius"),i=this.computedStyle.getNumber("--reveal-border-decoration-bottom-left-radius"),m=this.computedStyle.getNumber("--reveal-border-decoration-bottom-right-radius");if(f.topLeftBorderDecorationRadius=0<=g?g:c,f.topRightBorderDecorationRadius=0<=h?h:c,f.bottomLeftBorderDecorationRadius=0<=i?i:c,f.bottomRightBorderDecorationRadius=0<=m?m:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode,f.hoverLightFillRadius),!k(f.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.updateCachedReveal=()=>{const a=this.cachedStyle,b=a.trueFillRadius[1]*this.pxRatio,c=2*b,d=this.cachedImg.cachedReveal,e=b===d.radius&&a.opacity===d.opacity,f=e&&a.borderColor===d.borderColor,g=e&&a.hoverLightColor===d.hoverLightColor;if(f&&g)return;const{borderReveal:h,fillReveal:j}=this.cachedImg.cachedCanvas,{borderReveal:k,fillReveal:l}=this.cachedImg.cachedCtx;this.syncSizeToRevealRadius(h),this.syncSizeToRevealRadius(j);for(let d=0;1>=d;d++){// 0 means border, 1 means hover light.
+if(0==d&&f)continue;if(1==d&&g)continue;const e=0==d?h:j,i=0==d?k:l;if(!i)continue;const m=0==d?a.borderColor:a.hoverLightColor;i.clearRect(0,0,e.width,e.height);const n=0==d?a.opacity:.5*a.opacity,o=i.createRadialGradient(b,b,0,b,b,b);o.addColorStop(0,`rgba(${m}, ${n})`),o.addColorStop(1,`rgba(${m}, 0.0)`),i.fillStyle=o,i.clearRect(0,0,c,c),i.fillRect(0,0,c,c)}this.cachedImg.cachedReveal.radius=b,this.cachedImg.cachedReveal.borderColor=a.borderColor,this.cachedImg.cachedReveal.hoverLightColor=a.hoverLightColor,this.cachedImg.cachedReveal.opacity=a.opacity;this.ctx&&(this.cachedImg.cachedPattern.borderReveal=this.ctx.createPattern(h,"no-repeat"),this.cachedImg.cachedPattern.fillReveal=this.ctx.createPattern(j,"no-repeat"))},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.mouseInCanvas=()=>{const a=this.cachedBoundingRect,b=this._store.clientX-a.left,c=this._store.clientY-a.top;return 0<b&&0<c&&b<a.width&&c<a.height},this.syncSizeToElement=a=>{const c=this.cachedBoundingRect;(a.width!==c.width||a.height!==c.height)&&(a.width=c.width*this.pxRatio,a.height=c.height*this.pxRatio,a.style.width=`${c.width}px`,a.style.height=`${c.height}px`)},this.syncSizeToRevealRadius=a=>{const{trueFillRadius:b}=this.cachedStyle,c=b[1]||1,d=2*c*this.pxRatio;(a.width!==d||a.height!==d)&&(a.width=d,a.height=d)},this.updateAnimateGrd=(a,b)=>{const{pressAnimationColor:c,opacity:d}=this.cachedStyle,e=d*(.2-a),f=d*(.1-.07*a),g=.1+.8*a,h=0>e?0:e,i=0>f?0:f,j=1<g?1:g;b.addColorStop(0,`rgba(${c},${h})`),b.addColorStop(.55*j,`rgba(${c},${i})`),b.addColorStop(j,`rgba(${c}, 0)`)},this.drawShape=a=>{if(!this.ctx)return;const d=this.cachedBoundingRect,b=d.width*this.pxRatio,e=d.height*this.pxRatio,f=this.cachedStyle,c=f.borderWidth*this.pxRatio,g=f.topLeftBorderDecorationRadius*this.pxRatio,h=f.topRightBorderDecorationRadius*this.pxRatio,i=f.bottomLeftBorderDecorationRadius*this.pxRatio,j=f.bottomRightBorderDecorationRadius*this.pxRatio,k=f.withLeftBorderFactor,l=f.withRightBorderFactor,m=f.withTopBorderFactor,n=f.withBottomBorderFactor,o=c<g?g-c:0,p=c<h?h-c:0,q=c<i?i-c:0,r=c<j?j-c:0;switch(this.ctx.beginPath(),f.borderDecorationType){// Oh... Fuck... It's painful...
+case"round":this.ctx.moveTo(g,0),this.ctx.arcTo(b,0,b,e,h),this.ctx.lineTo(b,e-j),this.ctx.arcTo(b,e,j,e,j),this.ctx.lineTo(i,e),this.ctx.arcTo(0,e,0,j,i),this.ctx.lineTo(0,g),this.ctx.arcTo(0,0,g,0,g),a&&(this.ctx.moveTo(o,c*m),this.ctx.arcTo(c*k,c*m,c*k,o+c*m,o),this.ctx.lineTo(c*k,e-c*n-q),this.ctx.arcTo(c*k,e-c*n,c*k+q,e-c*n,q),this.ctx.lineTo(b-c*l-r,e-c*n),this.ctx.arcTo(b-c*l,e-c*n,b-c*l,e-c*n-r,r),this.ctx.lineTo(b-c*l,c*m+p),this.ctx.arcTo(b-c*l,c*m,b-c*l-p,c*m,p),this.ctx.lineTo(o,c*m));break;case"bevel":this.ctx.moveTo(g,0),this.ctx.lineTo(b-h,0),this.ctx.lineTo(b,h),this.ctx.lineTo(b,e-j),this.ctx.lineTo(b-j,e),this.ctx.lineTo(i,e),this.ctx.lineTo(0,e-i),this.ctx.lineTo(0,g),this.ctx.lineTo(g,0),this.ctx.lineTo(b-h,0),a&&(this.ctx.moveTo(o+c*k,c*m),this.ctx.lineTo(c*k,o+c*m),this.ctx.lineTo(c*k,e-q-c*n),this.ctx.lineTo(c*k+q,e-c*n),this.ctx.lineTo(b-r-c*l,e-c*n),this.ctx.lineTo(b-c*l,e-r-c*n),this.ctx.lineTo(b-c*l,p+c*m),this.ctx.lineTo(b-p-c*l,c*m),this.ctx.lineTo(o+c*l,c*m));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(b,0),this.ctx.lineTo(b,e),this.ctx.lineTo(0,e),this.ctx.lineTo(0,0),a&&(this.ctx.moveTo(c*k,c*m),this.ctx.lineTo(c*k,e-c*n),this.ctx.lineTo(b-c*l,e-c*n),this.ctx.lineTo(b-c*l,c*m),this.ctx.lineTo(c*k,c*m));}this.ctx.closePath()},this.paint=a=>{var e=Number.isNaN;const g=this._store,h=g.animationQueue.includes(this),i=g.clientX===g.paintedClientX&&g.clientY===g.paintedClientY;if(i&&!h&&!a)return!1;if(!this.ctx)return!1;if(this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),g.dirty=!1,!g.mouseInBoundary&&!h)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.canvas),this.cacheBoundingRect();const j=this.cachedBoundingRect,b=g.clientX-j.left,k=g.clientY-j.top;if(e(b)||e(k))return!1;const l=this.cachedStyle;this.getTrueFillRadius(l.trueFillRadius),this.paintedWidth=j.width*this.pxRatio,this.paintedHeight=j.height*this.pxRatio;const c=d(l.trueFillRadius[0],l.trueFillRadius[1]),m=b-c<j.width,n=k-c<j.height,o=0<b+c&&m&&0<k+c&&n;if(!o&&!h)return!1;this.cacheCanvasPaintingStyle(),this.updateCachedBitmap();const p=this.cachedImg.cachedReveal.radius,q=f(b*this.pxRatio-p),r=f(k*this.pxRatio-p);if(g.mouseInBoundary){const a=0<b&&0<k&&b<j.width&&k<j.height,c=this.cachedImg.cachedPattern.fillReveal;l.hoverLight&&a&&c&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(q,r),this.ctx.fillStyle=c,this.ctx.fill());const d=l.diffuse&&o||a,e=this.cachedImg.cachedPattern.borderReveal;0!==l.borderWidth&&e&&d&&(this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(q,r),this.ctx.fillStyle=e,this.ctx.fill())}if(l.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const a="constrained"===l.pressAnimationFillMode?l.trueFillRadius[1]:d(j.width,j.height),c=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,0,(this.mouseUpClientX-j.left)*this.pxRatio,(this.mouseUpClientY-j.top)*this.pxRatio,a*this.pxRatio):this.ctx.createRadialGradient(b*this.pxRatio,k*this.pxRatio,0,b*this.pxRatio,k*this.pxRatio,a*this.pxRatio);// prettier-ignore
 this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,c),this.drawShape(!1),this.ctx.fillStyle=c,this.ctx.fill()}return!0},this._store=a,this.canvas=b,this.ctx=b.getContext("2d");const g={borderReveal:m(),fillReveal:m()},h={borderReveal:g.borderReveal.getContext("2d"),fillReveal:g.fillReveal.getContext("2d")};this.cachedImg={cachedReveal:{radius:-1,borderColor:"INVALID",hoverLightColor:"INVALID",opacity:0},cachedCanvas:g,cachedCtx:h,cachedPattern:{borderReveal:null,fillReveal:null}};const i=!!document.documentElement.dataset.revealCompat;this.computedStyle=e(this.canvas,i)}}class o{constructor(a,b){// The current cursor position relative to window.
@@ -11,0 +12,0 @@ // The cursor position of painted reveal effect.

es/CanvasConfig.d.ts

@@ -22,2 +22,6 @@ import { ComputedStyleStorage } from './ComputedStyleStorage.js';
     bottomRightBorderDecorationRadius: number;
+    withLeftBorderFactor: number;
+    withRightBorderFactor: number;
+    withTopBorderFactor: number;
+    withBottomBorderFactor: number;
     borderWidth: number;
@@ -24,0 +28,0 @@ hoverLight: boolean;

es/CanvasConfig.js

@@ -83,2 +83,6 @@ import { createStorage } from './ComputedStyleStorage.js';
             bottomRightBorderDecorationRadius: 0,
+            withLeftBorderFactor: 1,
+            withRightBorderFactor: 1,
+            withTopBorderFactor: 1,
+            withBottomBorderFactor: 1,
             borderWidth: 1,
@@ -146,2 +150,3 @@ hoverLight: true,
             c.opacity = this.computedStyle.getNumber('--reveal-opacity');
+            // Border related configurations
             c.borderStyle = this.computedStyle.get('--reveal-border-style');
@@ -152,2 +157,7 @@ c.borderColor = parsedBorderColor !== MAGIC_DEFAULT_COLOR ? parsedBorderColor : parsedBaseColor;
             c.borderWidth = this.computedStyle.getNumber('--reveal-border-width');
+            c.withLeftBorderFactor = this.computedStyle.get('--reveal-border-left') === 'line' ? 1 : 0;
+            c.withRightBorderFactor = this.computedStyle.get('--reveal-border-right') === 'line' ? 1 : 0;
+            c.withTopBorderFactor = this.computedStyle.get('--reveal-border-top') === 'line' ? 1 : 0;
+            c.withBottomBorderFactor = this.computedStyle.get('--reveal-border-bottom') === 'line' ? 1 : 0;
+            // Hover light related configurations
             c.hoverLight = this.computedStyle.get('--reveal-hover-light') === 'true';
@@ -157,2 +167,3 @@ c.hoverLightColor = parsedHoverLightColor !== MAGIC_DEFAULT_COLOR ? parsedHoverLightColor : parsedBaseColor;
             c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-radius-mode');
+            // Press animation related configurations
             c.diffuse = this.computedStyle.get('--reveal-diffuse') === 'true';
@@ -165,2 +176,3 @@ c.pressAnimation = this.computedStyle.get('--reveal-press-animation') === 'true';
             c.releaseAnimationAccelerateRate = this.computedStyle.getNumber('--reveal-release-animation-accelerate-rate');
+            // Border decoration related configurations
             const r = this.computedStyle.getNumber('--reveal-border-decoration-radius');
@@ -277,2 +289,6 @@ const tl = this.computedStyle.getNumber('--reveal-border-decoration-top-left-radius');
             const br = c.bottomRightBorderDecorationRadius * this.pxRatio;
+            const wlf = c.withLeftBorderFactor;
+            const wrf = c.withRightBorderFactor;
+            const wtf = c.withTopBorderFactor;
+            const wbf = c.withBottomBorderFactor;
             const tl2 = bw < tl ? tl - bw : 0;
@@ -296,12 +312,22 @@ const tr2 = bw < tr ? tr - bw : 0;
                     if (hollow) {
+                        /* prettier-ignore-start */
                         // inner
-                        this.ctx.moveTo(tl2, bw);
-                        this.ctx.arcTo(bw, bw, bw, tl2 + bw, tl2);
-                        this.ctx.lineTo(bw, h - bw - bl2);
-                        this.ctx.arcTo(bw, h - bw, bw + bl2, h - bw, bl2);
-                        this.ctx.lineTo(w - bw - br2, h - bw);
-                        this.ctx.arcTo(w - bw, h - bw, w - bw, h - bw - br2, br2);
-                        this.ctx.lineTo(w - bw, bw + tr2);
-                        this.ctx.arcTo(w - bw, bw, w - bw - tr2, bw, tr2);
-                        this.ctx.lineTo(tl2, bw);
+                        /**
+                         +-①----⑧-+
+                         ②        ⑦
+                         |        |
+                         ③        ⑥
+                         +-④----⑤-+
+                         */
+                        //              x                    y                   r         p
+                        this.ctx.moveTo(tl2, bw * wtf); // ①
+                        this.ctx.arcTo(bw * wlf, bw * wtf, bw * wlf, tl2 + bw * wtf, tl2); // ②
+                        this.ctx.lineTo(bw * wlf, h - bw * wbf - bl2); // ③
+                        this.ctx.arcTo(bw * wlf, h - bw * wbf, bw * wlf + bl2, h - bw * wbf, bl2); // ④
+                        this.ctx.lineTo(w - bw * wrf - br2, h - bw * wbf); // ⑤
+                        this.ctx.arcTo(w - bw * wrf, h - bw * wbf, w - bw * wrf, h - bw * wbf - br2, br2); // ⑥
+                        this.ctx.lineTo(w - bw * wrf, bw * wtf + tr2); // ⑦
+                        this.ctx.arcTo(w - bw * wrf, bw * wtf, w - bw * wrf - tr2, bw * wtf, tr2); // ⑧
+                        this.ctx.lineTo(tl2, bw * wtf); // ①
+                        /* prettier-ignore-start */
                     }
@@ -323,11 +349,19 @@ break;
                         // inner
-                        this.ctx.moveTo(tl2 + bw, bw);
-                        this.ctx.lineTo(bw, tl2 + bw);
-                        this.ctx.lineTo(bw, h - bl2 - bw);
-                        this.ctx.lineTo(bw + bl2, h - bw);
-                        this.ctx.lineTo(w - br2 - bw, h - bw);
-                        this.ctx.lineTo(w - bw, h - br2 - bw);
-                        this.ctx.lineTo(w - bw, tr2 + bw);
-                        this.ctx.lineTo(w - tr2 - bw, bw);
-                        this.ctx.lineTo(tl2 + bw, bw);
+                        /**
+                         +-①----⑧-+
+                         ②        ⑦
+                         |        |
+                         ③        ⑥
+                         +-④----⑤-+
+                         */
+                        //              x                    y                       p
+                        this.ctx.moveTo(tl2 + bw * wlf, bw * wtf); // ①
+                        this.ctx.lineTo(bw * wlf, tl2 + bw * wtf); // ②
+                        this.ctx.lineTo(bw * wlf, h - bl2 - bw * wbf); // ③
+                        this.ctx.lineTo(bw * wlf + bl2, h - bw * wbf); // ④
+                        this.ctx.lineTo(w - br2 - bw * wrf, h - bw * wbf); // ⑤
+                        this.ctx.lineTo(w - bw * wrf, h - br2 - bw * wbf); // ⑥
+                        this.ctx.lineTo(w - bw * wrf, tr2 + bw * wtf); // ⑦
+                        this.ctx.lineTo(w - tr2 - bw * wrf, bw * wtf); // ⑧
+                        this.ctx.lineTo(tl2 + bw * wrf, bw * wtf); // ①
                     }
@@ -343,18 +377,16 @@ break;
                     if (hollow) {
-                        if (c.borderStyle === 'full') {
-                            // inner
-                            this.ctx.moveTo(bw, bw);
-                            this.ctx.lineTo(bw, h - bw);
-                            this.ctx.lineTo(w - bw, h - bw);
-                            this.ctx.lineTo(w - bw, bw);
-                            // I don't know by change this to 'bw, bw' caused rendering bug...
-                            this.ctx.lineTo(0, bw);
-                        }
-                        if (c.borderStyle === 'half') {
-                            this.ctx.moveTo(0, bw);
-                            this.ctx.lineTo(0, h - bw);
-                            this.ctx.lineTo(w, h - bw);
-                            this.ctx.lineTo(w, bw);
-                            this.ctx.lineTo(0, bw);
-                        }
+                        // inner
+                        /**
+                         ①--------④
+                         |        |
+                         |        |
+                         |        |
+                         ②--------③
+                         */
+                        //              x              y                 p
+                        this.ctx.moveTo(bw * wlf, bw * wtf); // ①
+                        this.ctx.lineTo(bw * wlf, h - bw * wbf); // ②
+                        this.ctx.lineTo(w - bw * wrf, h - bw * wbf); // ③
+                        this.ctx.lineTo(w - bw * wrf, bw * wtf); // ④
+                        this.ctx.lineTo(bw * wlf, bw * wtf); // ①
                     }
@@ -361,0 +393,0 @@ break;

es/index.js

@@ -43,2 +43,8 @@ import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
         window.CSS.registerProperty({
+            name: '--reveal-border-width',
+            syntax: '<length>',
+            initialValue: '1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
             name: '--reveal-border-decoration-type',
@@ -80,8 +86,26 @@ syntax: '<custom-ident>',
         window.CSS.registerProperty({
-            name: '--reveal-border-width',
-            syntax: '<length>',
-            initialValue: '1px',
+            name: '--reveal-border-left',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
             inherits: true,
         });
         window.CSS.registerProperty({
+            name: '--reveal-border-right',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-top',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-bottom',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
             name: '--reveal-hover-light',
@@ -162,2 +186,6 @@ syntax: '<custom-ident>',
         root.style.setProperty('--reveal-border-decoration-bottom-right-radius', '-1');
+        root.style.setProperty('--reveal-border-left', 'line');
+        root.style.setProperty('--reveal-border-right', 'line');
+        root.style.setProperty('--reveal-border-top', 'line');
+        root.style.setProperty('--reveal-border-bottom', 'line');
         root.style.setProperty('--reveal-hover-light', 'true');
@@ -164,0 +192,0 @@ root.style.setProperty('--reveal-hover-light-color', MAGIC_DEFAULT_COLOR);

package.json

 {
     "name": "@ax-design/reveal-highlight",
-    "version": "0.3.0-alpha.2",
+    "version": "0.3.0-alpha.3",
     "description": "Web component that implement Reveal Highlight of Axiom Design System.",
@@ -13,2 +13,3 @@ "main": "build/main.js",
         "npm-run-all": "^4.1.5",
+        "prettier": "2.2.1",
         "rimraf": "^2.6.3",
@@ -15,0 +16,0 @@ "rollup": "^2.38.5",

src/CanvasConfig.ts

@@ -88,2 +88,6 @@ import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
     bottomRightBorderDecorationRadius: number;
+    withLeftBorderFactor: number;
+    withRightBorderFactor: number;
+    withTopBorderFactor: number;
+    withBottomBorderFactor: number;
     borderWidth: number;
@@ -171,2 +175,6 @@ hoverLight: boolean;
         bottomRightBorderDecorationRadius: 0,
+        withLeftBorderFactor: 1,
+        withRightBorderFactor: 1,
+        withTopBorderFactor: 1,
+        withBottomBorderFactor: 1,
         borderWidth: 1,
@@ -290,2 +298,4 @@ hoverLight: true,
         c.opacity = this.computedStyle.getNumber('--reveal-opacity');
+        
+        // Border related configurations
         c.borderStyle = this.computedStyle.get('--reveal-border-style');
@@ -296,2 +306,8 @@ c.borderColor = parsedBorderColor !== MAGIC_DEFAULT_COLOR ? parsedBorderColor : parsedBaseColor;
         c.borderWidth = this.computedStyle.getNumber('--reveal-border-width');
+        c.withLeftBorderFactor = this.computedStyle.get('--reveal-border-left') === 'line' ? 1 : 0;
+        c.withRightBorderFactor = this.computedStyle.get('--reveal-border-right') === 'line' ? 1 : 0;
+        c.withTopBorderFactor = this.computedStyle.get('--reveal-border-top') === 'line' ? 1 : 0;
+        c.withBottomBorderFactor = this.computedStyle.get('--reveal-border-bottom') === 'line' ? 1 : 0;
+        
+        // Hover light related configurations
         c.hoverLight = this.computedStyle.get('--reveal-hover-light') === 'true';
@@ -301,2 +317,4 @@ c.hoverLightColor = parsedHoverLightColor !== MAGIC_DEFAULT_COLOR ? parsedHoverLightColor : parsedBaseColor;
         c.hoverLightFillMode = this.computedStyle.get('--reveal-hover-light-radius-mode');
+        
+        // Press animation related configurations
         c.diffuse = this.computedStyle.get('--reveal-diffuse') === 'true';
@@ -310,2 +328,3 @@ c.pressAnimation = this.computedStyle.get('--reveal-press-animation') === 'true';
 
+        // Border decoration related configurations
         const r = this.computedStyle.getNumber('--reveal-border-decoration-radius');
@@ -454,2 +473,7 @@ const tl = this.computedStyle.getNumber('--reveal-border-decoration-top-left-radius');
 
+        const wlf = c.withLeftBorderFactor;
+        const wrf = c.withRightBorderFactor;
+        const wtf = c.withTopBorderFactor;
+        const wbf = c.withBottomBorderFactor;
+
         const tl2 = bw < tl ? tl - bw : 0;
@@ -476,12 +500,26 @@ const tr2 = bw < tr ? tr - bw : 0;
                 if (hollow) {
+                    /* prettier-ignore-start */
                     // inner
-                    this.ctx.moveTo(tl2, bw);
-                    this.ctx.arcTo(bw, bw, bw, tl2 + bw, tl2);
-                    this.ctx.lineTo(bw, h - bw - bl2);
-                    this.ctx.arcTo(bw, h - bw, bw + bl2, h - bw, bl2);
-                    this.ctx.lineTo(w - bw - br2, h - bw);
-                    this.ctx.arcTo(w - bw, h - bw, w - bw, h - bw - br2, br2);
-                    this.ctx.lineTo(w - bw, bw + tr2);
-                    this.ctx.arcTo(w - bw, bw, w - bw - tr2, bw, tr2);
-                    this.ctx.lineTo(tl2, bw);
+                    /**
+                     +-①----⑧-+
+                     ②        ⑦
+                     |        |
+                     ③        ⑥
+                     +-④----⑤-+
+                     */
+                    //              x                    y                   r         p
+                    this.ctx.moveTo(tl2                , bw * wtf                ); // ①
+                    this.ctx.arcTo (bw * wlf           , bw * wtf           ,
+                                    bw * wlf           , tl2 + bw * wtf     , tl2); // ②
+                    this.ctx.lineTo(bw * wlf           , h - bw * wbf - bl2      ); // ③
+                    this.ctx.arcTo (bw * wlf           , h - bw * wbf       ,
+                                    bw * wlf + bl2     , h - bw * wbf       , bl2); // ④
+                    this.ctx.lineTo(w - bw * wrf - br2 , h - bw * wbf            ); // ⑤
+                    this.ctx.arcTo (w - bw * wrf       , h - bw * wbf       ,
+                                    w - bw * wrf       , h - bw * wbf - br2 , br2); // ⑥
+                    this.ctx.lineTo(w - bw * wrf       , bw * wtf + tr2          ); // ⑦
+                    this.ctx.arcTo (w - bw * wrf       , bw * wtf           ,
+                                    w - bw * wrf - tr2 , bw * wtf           , tr2); // ⑧
+                    this.ctx.lineTo(tl2                , bw * wtf                ); // ①
+                    /* prettier-ignore-start */
                 }
@@ -504,11 +542,19 @@ break;
                     // inner
-                    this.ctx.moveTo(tl2 + bw, bw);
-                    this.ctx.lineTo(bw, tl2 + bw);
-                    this.ctx.lineTo(bw, h - bl2 - bw);
-                    this.ctx.lineTo(bw + bl2, h - bw);
-                    this.ctx.lineTo(w - br2 - bw, h - bw);
-                    this.ctx.lineTo(w - bw, h - br2 - bw);
-                    this.ctx.lineTo(w - bw, tr2 + bw);
-                    this.ctx.lineTo(w - tr2 - bw, bw);
-                    this.ctx.lineTo(tl2 + bw, bw);
+                    /**
+                     +-①----⑧-+
+                     ②        ⑦
+                     |        |
+                     ③        ⑥
+                     +-④----⑤-+
+                     */
+                    //              x                    y                       p
+                    this.ctx.moveTo(tl2 + bw * wlf     , bw * wtf          ); // ①
+                    this.ctx.lineTo(bw * wlf           , tl2 + bw * wtf    ); // ②
+                    this.ctx.lineTo(bw * wlf           , h - bl2 - bw * wbf); // ③
+                    this.ctx.lineTo(bw * wlf + bl2     , h - bw * wbf      ); // ④
+                    this.ctx.lineTo(w - br2 - bw * wrf , h - bw * wbf      ); // ⑤
+                    this.ctx.lineTo(w - bw * wrf       , h - br2 - bw * wbf); // ⑥
+                    this.ctx.lineTo(w - bw * wrf       , tr2 + bw * wtf    ); // ⑦
+                    this.ctx.lineTo(w - tr2 - bw * wrf , bw * wtf          ); // ⑧
+                    this.ctx.lineTo(tl2 + bw * wrf     , bw * wtf          ); // ①
                 }
@@ -525,19 +571,16 @@ break;
                 if (hollow) {
-                    if (c.borderStyle === 'full') {
-                        // inner
-                        this.ctx.moveTo(bw, bw);
-                        this.ctx.lineTo(bw, h - bw);
-                        this.ctx.lineTo(w - bw, h - bw);
-                        this.ctx.lineTo(w - bw, bw);
-                        // I don't know by change this to 'bw, bw' caused rendering bug...
-                        this.ctx.lineTo(0, bw);
-                    }
-
-                    if (c.borderStyle === 'half') {
-                        this.ctx.moveTo(0, bw);
-                        this.ctx.lineTo(0, h - bw);
-                        this.ctx.lineTo(w, h - bw);
-                        this.ctx.lineTo(w, bw);
-                        this.ctx.lineTo(0, bw);
-                    }
+                    // inner
+                    /**
+                     ①--------④
+                     |        |
+                     |        |
+                     |        |
+                     ②--------③
+                     */
+                    //              x              y                 p
+                    this.ctx.moveTo(bw * wlf     , bw * wtf    ); // ①
+                    this.ctx.lineTo(bw * wlf     , h - bw * wbf); // ②
+                    this.ctx.lineTo(w - bw * wrf , h - bw * wbf); // ③
+                    this.ctx.lineTo(w - bw * wrf , bw * wtf    ); // ④
+                    this.ctx.lineTo(bw * wlf     , bw * wtf    ); // ①
                 }
@@ -544,0 +587,0 @@ break;

src/index.ts

@@ -56,2 +56,8 @@ import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
         window.CSS.registerProperty({
+            name: '--reveal-border-width',
+            syntax: '<length>',
+            initialValue: '1px',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
             name: '--reveal-border-decoration-type',
@@ -93,8 +99,26 @@ syntax: '<custom-ident>',
         window.CSS.registerProperty({
-            name: '--reveal-border-width',
-            syntax: '<length>',
-            initialValue: '1px',
+            name: '--reveal-border-left',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
             inherits: true,
         });
         window.CSS.registerProperty({
+            name: '--reveal-border-right',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-top',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
+            name: '--reveal-border-bottom',
+            syntax: '<custom-ident>',
+            initialValue: 'line',
+            inherits: true,
+        });
+        window.CSS.registerProperty({
             name: '--reveal-hover-light',
@@ -177,2 +201,6 @@ syntax: '<custom-ident>',
         root.style.setProperty('--reveal-border-decoration-bottom-right-radius', '-1');
+        root.style.setProperty('--reveal-border-left', 'line');
+        root.style.setProperty('--reveal-border-right', 'line');
+        root.style.setProperty('--reveal-border-top', 'line');
+        root.style.setProperty('--reveal-border-bottom', 'line');
         root.style.setProperty('--reveal-hover-light', 'true');
@@ -179,0 +207,0 @@ root.style.setProperty('--reveal-hover-light-color', MAGIC_DEFAULT_COLOR);

No alert changes

Improved metrics

Total package byte prevSize

1506214

increased by1.21%

Lines of code

3005

increased by4.92%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes