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

Comparing version 0.3.0-alpha.9 to 0.3.0-alpha.10

build/main.js

@@ -6,3 +6,3 @@ (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){return k.compat?new l(a):new m(a)}function f(){customElements.define(u.ElementName,u),customElements.define(v.ElementName,v),customElements.define(w.ElementName,w)}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(k.borderDetectionMode=b,k.compat=a,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>|${x}`,initialValue:x,inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-width",syntax:"<length>",initialValue:"1px",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-fill-radius",syntax:"<number>",initialValue:"1.5",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:"0",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>|${x}`,initialValue:x,inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-radius",syntax:"<number>",initialValue:"1.5",inherits:!0}),window.CSS.registerProperty({name:"--reveal-hover-light-fill-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>|${x}`,initialValue:x,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.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",x),a.style.setProperty("--reveal-border-width","1px"),a.style.setProperty("--reveal-border-fill-radius","1.5"),a.style.setProperty("--reveal-border-decoration-type","miter"),a.style.setProperty("--reveal-border-decoration-radius","0"),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",x),a.style.setProperty("--reveal-hover-light-fill-radius","1.5"),a.style.setProperty("--reveal-hover-light-fill-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",x),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.")}let h="strictEdge",i=!1;class j extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const k={compat:!1,get borderDetectionMode(){return h},set borderDetectionMode(a){if(i)throw new j;h=a,i=!0}};class l{constructor(a){if(!l.colorParser){const a=document.createElement("div");a.style.display="none !important",document.body.appendChild(a),l.colorParser=a,l.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 l.colorParser.style.color=this.get(a),l.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(a){// Length values in computed style will always in the unit of px
 // 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}},p=()=>document.createElement("canvas");class q{constructor(a,b,c){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:"",borderFillRadius:0,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-fill-radius-mode"))=>{var e=Math.min;const f=this.cachedBoundingRect;switch(c){case"relative":a[0]=e(f.width,f.height),a[1]=d(f.width,f.height);break;case"absolute":a[0]=-1,a[1]=-1;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.getPropFromMultipleSource=(a,b)=>{const c=this.container.dataset[a];return c?c:this.computedStyle.get(b)},this.getNumberPropFromMultipleSource=(a,b)=>{var c=Number.parseFloat;const d=this.container.dataset[a];return d?c(d):this.computedStyle.getNumber(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=o(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=o(this.computedStyle.getColor("--reveal-border-color"))||a,d=o(this.computedStyle.getColor("--reveal-hover-light-color"))||a,e=o(this.computedStyle.getColor("--reveal-press-animation-color"))||a,f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b,f.borderFillRadius=this.computedStyle.getNumber("--reveal-border-fill-radius"),f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-fill-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,f.pressAnimationSpeed=this.computedStyle.getNumber("--reveal-press-animation-speed"),f.releaseAnimationAccelerateRate=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate");// Border decoration related configurations
+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}},p=()=>document.createElement("canvas");class q{constructor(a,b,c){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:"",borderFillRadius:0,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.container.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-fill-radius-mode"))=>{var e=Math.min;const f=this.cachedBoundingRect;switch(c){case"relative":a[0]=e(f.width,f.height),a[1]=d(f.width,f.height);break;case"absolute":a[0]=-1,a[1]=-1;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.getPropFromMultipleSource=(a,b)=>{const c=this.container.dataset[a];return c?c:this.computedStyle.get(b)},this.getNumberPropFromMultipleSource=(a,b)=>{var c=Number.parseFloat;const d=this.container.dataset[a];return d?c(d):this.computedStyle.getNumber(b)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const a=o(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",b=o(this.computedStyle.getColor("--reveal-border-color"))||a,d=o(this.computedStyle.getColor("--reveal-hover-light-color"))||a,e=o(this.computedStyle.getColor("--reveal-press-animation-color"))||a,f=this.cachedStyle;f.color=a,f.opacity=this.computedStyle.getNumber("--reveal-opacity"),f.borderStyle=this.computedStyle.get("--reveal-border-style"),f.borderColor=b,f.borderFillRadius=this.computedStyle.getNumber("--reveal-border-fill-radius"),f.borderDecorationType=this.computedStyle.get("--reveal-border-decoration-type")||"miter",f.borderWidth=this.computedStyle.getNumber("--reveal-border-width"),f.withLeftBorderFactor="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left")?1:0,f.withRightBorderFactor="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right")?1:0,f.withTopBorderFactor="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top")?1:0,f.withBottomBorderFactor="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom")?1:0,f.hoverLight="true"===this.computedStyle.get("--reveal-hover-light"),f.hoverLightColor=d,f.hoverLightFillRadius=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),f.hoverLightFillMode=this.computedStyle.get("--reveal-hover-light-fill-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,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.getNumberPropFromMultipleSource("topLeftBorderRadius","--reveal-border-decoration-top-left-radius"),h=this.getNumberPropFromMultipleSource("topRightBorderRadius","--reveal-border-decoration-top-right-radius"),i=this.getNumberPropFromMultipleSource("bottomLeftBorderRadius","--reveal-border-decoration-bottom-left-radius"),j=this.getNumberPropFromMultipleSource("bottomRightBorderRadius","--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<=j?j:c,this.getTrueFillRadius(f.trueFillRadius,f.hoverLightFillMode),!n(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=this.cachedImg.cachedReveal,{borderReveal:d,fillReveal:e}=this.cachedImg.cachedCanvas,{borderReveal:f,fillReveal:g}=this.cachedImg.cachedCtx;for(let h=0;2>h;h++){// 0 means border, 1 means hover light.
@@ -9,0 +9,0 @@ //-----------------------------------------

es/CanvasConfig.js

@@ -114,3 +114,3 @@ import { createStorage } from './ComputedStyleStorage.js';
             }
-            const boundingRect = this.canvas.getBoundingClientRect();
+            const boundingRect = this.container.getBoundingClientRect();
             this.cachedBoundingRect.top = Math.floor(boundingRect.top);
@@ -117,0 +117,0 @@ this.cachedBoundingRect.left = Math.floor(boundingRect.left);

package.json

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

src/CanvasConfig.ts

@@ -254,3 +254,3 @@ import { ComputedStyleStorage, createStorage } from './ComputedStyleStorage.js';
 
-        const boundingRect = this.canvas.getBoundingClientRect();
+        const boundingRect = this.container.getBoundingClientRect();
 
@@ -257,0 +257,0 @@ this.cachedBoundingRect.top = Math.floor(boundingRect.top);

No alert changes

Improved metrics

Total package byte prevSize

1515440

increased by0.08%

No dependency changes