@ax-design/reveal-highlight 0.4.2 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +75 -75
- package/build/BaseConfig.d.ts +5 -1
- package/build/BaseConfig.d.ts.map +1 -1
- package/build/CanvasConfig.d.ts +7 -1
- package/build/CanvasConfig.d.ts.map +1 -1
- package/build/ComputedStyleStorage.d.ts.map +1 -1
- package/build/CustomElements.d.ts +20 -4
- package/build/CustomElements.d.ts.map +1 -1
- package/build/RevealBoundryStore.d.ts +4 -0
- package/build/RevealBoundryStore.d.ts.map +1 -1
- package/build/RevealStateManager.d.ts +5 -1
- package/build/RevealStateManager.d.ts.map +1 -1
- package/build/main.js +113 -82
- package/build/utils/types.d.ts +2 -10
- package/build/utils/types.d.ts.map +1 -1
- package/es/BaseConfig.d.ts +46 -42
- package/es/BaseConfig.d.ts.map +1 -1
- package/es/BaseConfig.js +241 -219
- package/es/BaseConfig.js.map +1 -1
- package/es/CanvasConfig.d.ts +21 -15
- package/es/CanvasConfig.d.ts.map +1 -1
- package/es/CanvasConfig.js +332 -320
- package/es/CanvasConfig.js.map +1 -1
- package/es/ComputedStyleStorage.d.ts +8 -8
- package/es/ComputedStyleStorage.d.ts.map +1 -1
- package/es/ComputedStyleStorage.js +68 -58
- package/es/ComputedStyleStorage.js.map +1 -1
- package/es/CustomElements.d.ts +75 -59
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +296 -233
- package/es/CustomElements.js.map +1 -1
- package/es/Profiler.d.ts +12 -12
- package/es/Profiler.js +31 -31
- package/es/RevealBoundryStore.d.ts +80 -76
- package/es/RevealBoundryStore.d.ts.map +1 -1
- package/es/RevealBoundryStore.js +269 -248
- package/es/RevealBoundryStore.js.map +1 -1
- package/es/RevealStateManager.d.ts +19 -15
- package/es/RevealStateManager.d.ts.map +1 -1
- package/es/RevealStateManager.js +99 -73
- package/es/RevealStateManager.js.map +1 -1
- package/es/SvgConfig.d.ts +16 -16
- package/es/SvgConfig.js +345 -345
- package/es/config.d.ts +4 -4
- package/es/config.js +21 -21
- package/es/index.d.ts +5 -5
- package/es/index.js +205 -205
- package/es/tsconfig.tsbuildinfo +1 -1
- package/es/utils/extractRGBValue.d.ts +1 -1
- package/es/utils/extractRGBValue.js +47 -47
- package/es/utils/isValidateBorderDecorationType.d.ts +2 -2
- package/es/utils/isValidateBorderDecorationType.js +9 -9
- package/es/utils/types.d.ts +94 -102
- package/es/utils/types.d.ts.map +1 -1
- package/es/utils/types.js +1 -1
- package/es/variables.d.ts +1 -1
- package/es/variables.js +1 -1
- package/package.json +35 -34
- package/src/BaseConfig.ts +332 -310
- package/src/CanvasConfig.ts +420 -415
- package/src/ComputedStyleStorage.ts +102 -89
- package/src/CustomElements.ts +344 -272
- package/src/Profiler.ts +44 -44
- package/src/RevealBoundryStore.ts +315 -291
- package/src/RevealStateManager.ts +109 -86
- package/src/SvgConfig.ts +422 -422
- package/src/config.ts +26 -26
- package/src/cssTypedOM.d.ts +52 -52
- package/src/index.ts +219 -219
- package/src/utils/extractRGBValue.ts +58 -58
- package/src/utils/isValidateBorderDecorationType.ts +8 -8
- package/src/utils/types.ts +97 -105
- package/src/variables.ts +1 -1
package/build/main.js
CHANGED
|
@@ -1,93 +1,116 @@
|
|
|
1
|
-
(function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):(e="undefined"==typeof globalThis?e||self:globalThis,t(e.AxRevealHighlight={}))})(this,function(e){'use strict';var t=Number.isNaN,r=Math.max,
|
|
1
|
+
(function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):(e="undefined"==typeof globalThis?e||self:globalThis,t(e.AxRevealHighlight={}))})(this,function(e){'use strict';var t=Number.isNaN,r=Math.max,i=Math.floor;function a(e){return h.compat||!y?new p(e):new m(e)}function o(e,t){var i;const a=e.closest(t);if(a)return a;const r=null===(i=n(e))||void 0===i?void 0:i.host;return r?o(r,t):null}function n(e){return e?e.parentNode&&e.parentNode.nodeType===document.DOCUMENT_FRAGMENT_NODE?e.parentNode:n(e.parentNode):null}function l(){customElements.define(x.ElementName,x),customElements.define(w.ElementName,w),customElements.define(C.ElementName,C),customElements.define(B.ElementName,B)}function d({compat:e=!1,borderDetectionMode:t="strictEdge"}){if(A)return void console.warn("You have already registered Ax RevealHighlight, please do not call this function repeatedly.");if(h.borderDetectionMode=t,h.compat=e,A=!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-color",syntax:`<color>|${D}`,initialValue:D,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-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-right-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-top-type",syntax:"<custom-ident>",initialValue:"line",inherits:!0}),window.CSS.registerProperty({name:"--reveal-border-bottom-type",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>|${D}`,initialValue:D,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>|${D}`,initialValue:D,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}),l();else if(e){const e=document.documentElement;e.style.setProperty("--reveal-color","rgb(0, 0, 0)"),e.style.setProperty("--reveal-opacity","0.26"),e.style.setProperty("--reveal-border-color",D),e.style.setProperty("--reveal-border-width","1px"),e.style.setProperty("--reveal-border-fill-radius","1.5"),e.style.setProperty("--reveal-border-decoration-type","miter"),e.style.setProperty("--reveal-border-decoration-radius","0"),e.style.setProperty("--reveal-border-decoration-top-left-radius","-1"),e.style.setProperty("--reveal-border-decoration-top-right-radius","-1"),e.style.setProperty("--reveal-border-decoration-bottom-left-radius","-1"),e.style.setProperty("--reveal-border-decoration-bottom-right-radius","-1"),e.style.setProperty("--reveal-border-left-type","line"),e.style.setProperty("--reveal-border-right-type","line"),e.style.setProperty("--reveal-border-top-type","line"),e.style.setProperty("--reveal-border-bottom-type","line"),e.style.setProperty("--reveal-hover-light","true"),e.style.setProperty("--reveal-hover-light-color",D),e.style.setProperty("--reveal-hover-light-fill-radius","1.5"),e.style.setProperty("--reveal-hover-light-fill-radius-mode","relative"),e.style.setProperty("--reveal-diffuse","true"),e.style.setProperty("--reveal-press-animation","true"),e.style.setProperty("--reveal-press-animation-radius-mode","cover"),e.style.setProperty("--reveal-press-animation-color",D),e.style.setProperty("--reveal-press-animation-speed","2000"),e.style.setProperty("--reveal-release-animation-accelerate-rate","6"),l()}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 c="strictEdge",s=!1;class u extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const h={compat:!1,get borderDetectionMode(){return c},set borderDetectionMode(e){if(s)throw new u;c=e,s=!0}};class p{constructor(e){if(!p.colorParser){const e=document.createElement("div");e.style.setProperty("display","none","important"),document.body.appendChild(e),p.colorParser=e,p.colorParserStyle=window.getComputedStyle(e)}this.el=e,this.style=window.getComputedStyle(e)}size(){return this.style.length}get(e){return this.style.getPropertyValue(e).trim()}getColor(e){const t=this.get(e);let r=p.colorCache.get(t);return void 0===r&&(p.colorParser.style.color=t,r=p.colorParserStyle.color||"rgb(0, 0, 0)",p.colorCache.set(t,r)),r}getNumber(e){// Length values in computed style will always in the unit of px
|
|
2
2
|
// Maybe NaN
|
|
3
|
-
return parseFloat(this.get(e))}}
|
|
4
|
-
}}
|
|
3
|
+
return parseFloat(this.get(e))}}// Parsing a color forces a style recalc, so cache the result by the raw value
|
|
4
|
+
p.colorCache=new Map;class m{constructor(e){this.el=e,this.style=e.computedStyleMap()}size(){return this.style.size}get(e){return this.style.get(e).toString()}getColor(e){return this.get(e)}getNumber(e){const t=this.style.get(e).value;return"number"==typeof t?t:parseFloat(t);// Maybe NaN
|
|
5
|
+
}}// Firefox supports `CSS.registerProperty` but not `computedStyleMap`
|
|
6
|
+
const y="undefined"!=typeof Element&&"computedStyleMap"in Element.prototype,g=e=>{if(""===e)return"";if("#"===e[0]){// Thanks bro:
|
|
5
7
|
// https://stackoverflow.com/a/11508164/3931936
|
|
6
|
-
const
|
|
8
|
+
const a=parseInt(e.substring(1),16);var t=255&a>>16,r=255&a>>8,i=255&a;return t+","+r+","+i}else{let t="",r=!1,i=0;for(let a=0;a<e.length;a++){const o=e[a],n=o.charCodeAt(0)-48;if(" "!==o){if(r&&!(0<=n&&10>n)&&","!==o&&")"!==o)throw new SyntaxError(`${e} is not a validate color value!`);if(!r&&"("===o){r=!0;continue}if(2>i&&")"===o)throw new SyntaxError(`${e} should have at least three color channel`);if(","===o&&i++,")"===o)return t;r&&(t+=o)}}return t}},v=e=>"round"===e||"bevel"===e||"miter"===e;class f{constructor(e,t,o){/**
|
|
9
|
+
* Bumped whenever `cacheCanvasPaintingStyle` sees any value change, so
|
|
10
|
+
* painters can tell whether the last painted frame is still valid.
|
|
11
|
+
*/ /**
|
|
7
12
|
* If is cleaned up by `RevealBoundaryStore` during animation
|
|
8
13
|
* duration checkup.
|
|
9
|
-
*/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,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.dirty=!1,this.shapeDirty=!0,this.fillDirty=!0,this.animationDirty=!0,this.cleanedUpForAnimation=!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.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const e=this.container.getBoundingClientRect();this.cachedBoundingRect.top=
|
|
14
|
+
*/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,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.dirty=!1,this.styleVersion=0,this.shapeDirty=!0,this.fillDirty=!0,this.animationDirty=!0,this.cleanedUpForAnimation=!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.cacheBoundingRect=()=>{if(this.currentFrameId!==this.cachedBoundingRectFrameId){const e=this.container.getBoundingClientRect();this.cachedBoundingRect.top=i(e.top),this.cachedBoundingRect.left=i(e.left),this.cachedBoundingRect.width=i(e.width),this.cachedBoundingRect.height=i(e.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(e=[0,0],t=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative")=>{const i=this.cachedBoundingRect;switch(t){case"relative":e[0]=Math.min(i.width,i.height),e[1]=r(i.width,i.height);break;case"absolute":e[0]=-1,e[1]=-1;break;default:throw new SyntaxError("The value of `--reveal-hover-light-fill-radius-mode` must be `relative`, `absolute`, but got `"+t+"`!");}return e},this.getPropFromMultipleSource=(e,t)=>{const r=this.container.dataset[e];return r?r:this.computedStyle.get(t)},this.getNumberPropFromMultipleSource=(e,t)=>{var r=Number.parseFloat;const i=this.container.dataset[e];return i?r(i):this.computedStyle.getNumber(t)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const e=g(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",t=g(this.computedStyle.getColor("--reveal-border-color"))||e,i=g(this.computedStyle.getColor("--reveal-hover-light-color"))||e,a=g(this.computedStyle.getColor("--reveal-press-animation-color"))||e,o=e,n=this.computedStyle.getNumber("--reveal-opacity"),l=t,d=this.computedStyle.getNumber("--reveal-border-fill-radius"),s=this.computedStyle.get("--reveal-border-decoration-type")||"miter",u=this.computedStyle.getNumber("--reveal-border-width"),h="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left-type")?1:0,p="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right-type")?1:0,m="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top-type")?1:0,y="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom-type")?1:0,f="true"===this.computedStyle.get("--reveal-hover-light"),R=i,S=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),b=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative",F="true"===this.computedStyle.get("--reveal-diffuse"),P="true"===this.computedStyle.get("--reveal-press-animation"),x=this.computedStyle.get("--reveal-press-animation-radius-mode"),w=a,C=this.computedStyle.getNumber("--reveal-press-animation-speed"),B=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate"),D=this.computedStyle.getNumber("--reveal-border-decoration-radius"),r=this.getNumberPropFromMultipleSource("topLeftBorderRadius","--reveal-border-decoration-top-left-radius"),A=this.getNumberPropFromMultipleSource("topRightBorderRadius","--reveal-border-decoration-top-right-radius"),L=this.getNumberPropFromMultipleSource("bottomLeftBorderRadius","--reveal-border-decoration-bottom-left-radius"),T=this.getNumberPropFromMultipleSource("bottomRightBorderRadius","--reveal-border-decoration-bottom-right-radius"),I=0<=r?r:D,E=0<=A?A:D,M=0<=L?L:D,V=0<=T?T:D,N=this.cachedStyle,c=N.color!==o||N.opacity!==n||N.borderColor!==l||N.borderFillRadius!==d||N.borderDecorationType!==s||N.borderWidth!==u||N.withLeftBorderFactor!==h||N.withRightBorderFactor!==p||N.withTopBorderFactor!==m||N.withBottomBorderFactor!==y||N.hoverLight!==f||N.hoverLightColor!==R||N.hoverLightFillRadius!==S||N.hoverLightFillMode!==b||N.diffuse!==F||N.pressAnimation!==P||N.pressAnimationFillMode!==x||N.pressAnimationColor!==w||N.pressAnimationSpeed!==C||N.releaseAnimationAccelerateRate!==B||N.topLeftBorderDecorationRadius!==I||N.topRightBorderDecorationRadius!==E||N.bottomLeftBorderDecorationRadius!==M||N.bottomRightBorderDecorationRadius!==V;// Border related configurations
|
|
15
|
+
// Hover light related configurations
|
|
16
|
+
// Press animation related configurations
|
|
17
|
+
// Border decoration related configurations
|
|
18
|
+
if(c&&this.styleVersion++,this.fillDirty=this.fillDirty||N.color!==o,this.fillDirty=this.fillDirty||N.opacity!==n,this.fillDirty=this.fillDirty||N.borderColor!==l,this.fillDirty=this.fillDirty||N.borderFillRadius!==d,this.fillDirty=this.fillDirty||N.hoverLightColor!==R,this.fillDirty=this.fillDirty||N.hoverLightFillRadius!==S,this.fillDirty=this.fillDirty||N.hoverLightFillMode!==b,this.shapeDirty=this.shapeDirty||N.borderDecorationType!==s,this.shapeDirty=this.shapeDirty||N.borderWidth!==u,this.shapeDirty=this.shapeDirty||N.withLeftBorderFactor!==h,this.shapeDirty=this.shapeDirty||N.withRightBorderFactor!==p,this.shapeDirty=this.shapeDirty||N.withTopBorderFactor!==m,this.shapeDirty=this.shapeDirty||N.withBottomBorderFactor!==y,this.shapeDirty=this.shapeDirty||N.topLeftBorderDecorationRadius!==I,this.shapeDirty=this.shapeDirty||N.topRightBorderDecorationRadius!==E,this.shapeDirty=this.shapeDirty||N.bottomLeftBorderDecorationRadius!==M,this.shapeDirty=this.shapeDirty||N.bottomRightBorderDecorationRadius!==V,this.animationDirty=this.animationDirty||N.pressAnimation!==P,this.animationDirty=this.animationDirty||N.pressAnimationFillMode!==x,this.animationDirty=this.animationDirty||N.pressAnimationColor!==w,this.animationDirty=this.animationDirty||N.pressAnimationSpeed!==C,this.animationDirty=this.animationDirty||N.releaseAnimationAccelerateRate!==B,N.color=o,N.opacity=n,N.borderColor=l,N.borderFillRadius=d,N.borderDecorationType=s,N.borderWidth=u,N.withLeftBorderFactor=h,N.withRightBorderFactor=p,N.withTopBorderFactor=m,N.withBottomBorderFactor=y,N.hoverLight=f,N.hoverLightColor=R,N.hoverLightFillRadius=S,N.hoverLightFillMode=b,N.diffuse=F,N.pressAnimation=P,N.pressAnimationFillMode=x,N.pressAnimationColor=w,N.pressAnimationSpeed=C,N.releaseAnimationAccelerateRate=B,N.topLeftBorderDecorationRadius=I,N.topRightBorderDecorationRadius=E,N.bottomLeftBorderDecorationRadius=M,N.bottomRightBorderDecorationRadius=V,this.getTrueFillRadius(N.trueFillRadius,N.hoverLightFillMode),!v(N.borderDecorationType))throw new SyntaxError("The value of `--reveal-border-decoration-type` must be `round`, `bevel` or `miter`!");this.cachedStyleFrameId=this.currentFrameId},this.mouseInCanvas=()=>{const e=this.cachedBoundingRect,t=this._store.clientX-e.left,r=this._store.clientY-e.top;return 0<t&&0<r&&t<e.width&&r<e.height},this._store=e,this.container=o,this.element=t,this.computedStyle=a(o)}}class R extends f{constructor(e,a,o){// Inputs of the last painted frame, a frame with identical inputs is
|
|
19
|
+
// skipped and the canvas keeps its content.
|
|
20
|
+
super(e,a,o),this.updateCachedReveal=()=>{if(!this.fillDirty)return;if(!this.ctx)return;const e=this.cachedStyle,t=e.trueFillRadius[1]*this.pxRatio,r=this.cachedImg.cachedReveal;this._store.updateMaxRadius(e.trueFillRadius[1]*e.borderFillRadius);for(let a=0;2>a;a++){// 0 means border, 1 means hover light.
|
|
10
21
|
//-----------------------------------------
|
|
11
22
|
// Last rendered style.
|
|
12
|
-
const i=0==
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
const i=0==a?r.borderReveal:r.fillReveal,o=0==a?e.borderColor:e.hoverLightColor,n=0==a?e.borderFillRadius:e.hoverLightFillRadius,l=t*n,d=o===i.color&&e.opacity===i.opacity&&n===i.radiusFactor&&l===i.radius;if(d)continue;// The gradient is centered at (trueRadius, trueRadius), painting
|
|
24
|
+
// translates it to the pointer. A gradient is used instead of a
|
|
25
|
+
// pre-rendered bitmap, which takes `(4 * radius) ^ 2` pixels per
|
|
26
|
+
// element and is enough to exhaust the memory of mobile browsers.
|
|
27
|
+
const c=0==a?e.opacity:.5*e.opacity,s=this.ctx.createRadialGradient(l,l,0,l,l,l);s.addColorStop(0,`rgba(${o}, ${c})`),s.addColorStop(1,`rgba(${o}, 0.0)`),i.radius=l,i.radiusFactor=n,i.color=o,i.opacity=e.opacity,i.pattern=s}this.fillDirty=!1},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.updateAnimateGrd=(e,t)=>{const{pressAnimationColor:r,opacity:i}=this.cachedStyle,a=i*(.2-e),o=i*(.1-.07*e),n=.1+.8*e,l=0>a?0:a,d=0>o?0:o;let c=0;c=1<n?1:n,c=0>n?0:n,t.addColorStop(0,`rgba(${r},${l})`),t.addColorStop(.55*c,`rgba(${r},${d})`),t.addColorStop(c,`rgba(${r}, 0)`)},this.drawShape=e=>{if(!this.ctx)return;const t=this.cachedBoundingRect,r=t.width*this.pxRatio,i=t.height*this.pxRatio,a=this.cachedStyle,o=a.borderWidth*this.pxRatio,n=a.topLeftBorderDecorationRadius*this.pxRatio,l=a.topRightBorderDecorationRadius*this.pxRatio,d=a.bottomLeftBorderDecorationRadius*this.pxRatio,c=a.bottomRightBorderDecorationRadius*this.pxRatio,s=a.withLeftBorderFactor,u=a.withRightBorderFactor,h=a.withTopBorderFactor,p=a.withBottomBorderFactor,m=o<n?n-o:0,y=o<l?l-o:0,g=o<d?d-o:0,v=o<c?c-o:0;switch(this.ctx.beginPath(),a.borderDecorationType){// Oh... Fuck... It's painful...
|
|
28
|
+
case"round":this.ctx.moveTo(n,0),this.ctx.arcTo(r,0,r,i,l),this.ctx.lineTo(r,i-c),this.ctx.arcTo(r,i,c,i,c),this.ctx.lineTo(d,i),this.ctx.arcTo(0,i,0,c,d),this.ctx.lineTo(0,n),this.ctx.arcTo(0,0,n,0,n),e&&(this.ctx.moveTo(m,o*h),this.ctx.arcTo(o*s,o*h,o*s,m+o*h,m),this.ctx.lineTo(o*s,i-o*p-g),this.ctx.arcTo(o*s,i-o*p,o*s+g,i-o*p,g),this.ctx.lineTo(r-o*u-v,i-o*p),this.ctx.arcTo(r-o*u,i-o*p,r-o*u,i-o*p-v,v),this.ctx.lineTo(r-o*u,o*h+y),this.ctx.arcTo(r-o*u,o*h,r-o*u-y,o*h,y),this.ctx.lineTo(m,o*h));break;case"bevel":this.ctx.moveTo(n,0),this.ctx.lineTo(r-l,0),this.ctx.lineTo(r,l),this.ctx.lineTo(r,i-c),this.ctx.lineTo(r-c,i),this.ctx.lineTo(d,i),this.ctx.lineTo(0,i-d),this.ctx.lineTo(0,n),this.ctx.lineTo(n,0),this.ctx.lineTo(r-l,0),e&&(this.ctx.moveTo(m+o*s,o*h),this.ctx.lineTo(o*s,m+o*h),this.ctx.lineTo(o*s,i-g-o*p),this.ctx.lineTo(o*s+g,i-o*p),this.ctx.lineTo(r-v-o*u,i-o*p),this.ctx.lineTo(r-o*u,i-v-o*p),this.ctx.lineTo(r-o*u,y+o*h),this.ctx.lineTo(r-y-o*u,o*h),this.ctx.lineTo(m+o*u,o*h));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(r,0),this.ctx.lineTo(r,i),this.ctx.lineTo(0,i),this.ctx.lineTo(0,0),e&&(this.ctx.moveTo(o*s,o*h),this.ctx.lineTo(o*s,i-o*p),this.ctx.lineTo(r-o*u,i-o*p),this.ctx.lineTo(r-o*u,o*h),this.ctx.lineTo(o*s,o*h));}this.ctx.closePath()},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect,r=i(t.width*this.pxRatio),a=i(t.height*this.pxRatio);// Compare against the backing store size; assigning `width` or
|
|
29
|
+
// `height` resets the bitmap even when the value is unchanged.
|
|
30
|
+
(e.width!==r||e.height!==a)&&(e.width=r,e.height=a,e.style.width=`${t.width}px`,e.style.height=`${t.height}px`)},this.paintedRelativeX=NaN,this.paintedRelativeY=NaN,this.paintedRectWidth=-1,this.paintedRectHeight=-1,this.paintedStyleVersion=-1,this.paintedAnimation=!1,this.clear=()=>{if(!this.ctx)return!1;if(!this.dirty)return!1;const{width:e,height:t}=this.cachedBoundingRect;return this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,e*window.devicePixelRatio,t*window.devicePixelRatio),this.dirty=!1,!0},this.paint=()=>{const e=this._store;if(!this.ctx)return!1;const a=e.animationQueue.includes(this);if(!e.mouseInBoundary&&!a)return this.clear(),!1;if(!this.cachedImg.cachedReveal)return!1;// Read layout before any write to the canvas, so the read never
|
|
31
|
+
// forces a synchronous layout.
|
|
32
|
+
this.cacheBoundingRect();const o=this.cachedBoundingRect,n=e.clientX-o.left,l=e.clientY-o.top;if(t(n)||t(l))return!1;const d=this.cachedStyle;this.getTrueFillRadius(d.trueFillRadius);const c=d.trueFillRadius[1],s=n-c<o.width,u=l-c<o.height,h=0<n+c&&s&&0<l+c&&u;if(!h&&!a)return this.clear(),!1;this.cacheCanvasPaintingStyle();const p=this.dirty&&!a&&!this.paintedAnimation&&n===this.paintedRelativeX&&l===this.paintedRelativeY&&o.width===this.paintedRectWidth&&o.height===this.paintedRectHeight&&this.styleVersion===this.paintedStyleVersion;if(p)return!1;if(this.syncSizeToElement(this.element),this.updateCachedBitmap(),this.dirty=!0,this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),this.paintedWidth=o.width*this.pxRatio,this.paintedHeight=o.height*this.pxRatio,this.paintedRelativeX=n,this.paintedRelativeY=l,this.paintedRectWidth=o.width,this.paintedRectHeight=o.height,this.paintedStyleVersion=this.styleVersion,this.paintedAnimation=a,e.mouseInBoundary){const e=0<n&&0<l&&n<o.width&&l<o.height,t=this.cachedImg.cachedReveal.fillReveal.pattern;if(d.hoverLight&&e&&t){// draw fill.
|
|
33
|
+
const e=this.cachedImg.cachedReveal.fillReveal.radius,r=i(n*this.pxRatio-e),a=i(l*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(r,a),this.ctx.fillStyle=t,this.ctx.fill()}const r=d.diffuse&&h||e,a=this.cachedImg.cachedReveal.borderReveal.pattern;if(0!==d.borderWidth&&a&&r){// Draw border.
|
|
34
|
+
const e=this.cachedImg.cachedReveal.borderReveal.radius,t=i(n*this.pxRatio-e),r=i(l*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(t,r),this.ctx.fillStyle=a,this.ctx.fill()}}if(d.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const e="constrained"===d.pressAnimationFillMode?d.trueFillRadius[1]:r(o.width,o.height),t=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-o.left)*this.pxRatio,(this.mouseUpClientY-o.top)*this.pxRatio,0,(this.mouseUpClientX-o.left)*this.pxRatio,(this.mouseUpClientY-o.top)*this.pxRatio,e*this.pxRatio):this.ctx.createRadialGradient(n*this.pxRatio,l*this.pxRatio,0,n*this.pxRatio,l*this.pxRatio,e*this.pxRatio);// prettier-ignore
|
|
35
|
+
this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,t),this.drawShape(!1),this.ctx.fillStyle=t,this.ctx.fill()}return!0},this.ctx=a.getContext("2d"),this.cachedImg={cachedReveal:{borderReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null},fillReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null}}}}}class S extends f{constructor(e,i,a){super(e,i,a),this.updateCachedBitmap=()=>{},this.updateCachedReveal=()=>{const e=this.cachedStyle,t=this.cachedImg.cachedGradientStop;t.borderReveal[0].style.stopColor=e.borderColor,t.borderReveal[1].style.stopColor=e.borderColor,t.borderReveal[0].style.stopOpacity=e.opacity.toString(),t.borderReveal[1].style.stopOpacity="0",t.fillReveal[0].style.stopColor=e.hoverLightColor,t.fillReveal[1].style.stopColor=e.hoverLightColor,t.fillReveal[0].style.stopOpacity=(.5*e.opacity).toString(),t.fillReveal[1].style.stopOpacity="0",t.rippleReveal[0].style.stopColor=e.pressAnimationColor,t.rippleReveal[1].style.stopColor=e.pressAnimationColor,t.rippleReveal[2].style.stopColor=e.pressAnimationColor;const r=this.cachedImg.cachedGradient,i=-1===e.trueFillRadius[0];r.borderReveal.r.baseVal.value=i?e.borderFillRadius:e.borderFillRadius*e.trueFillRadius[1],r.fillReveal.r.baseVal.value=i?e.hoverLightFillRadius:e.hoverLightFillRadius*e.trueFillRadius[0],this.fillDirty=!1},this.updateAnimateGrd=(e,t,r,i)=>{const{opacity:a}=this.cachedStyle,o=a*(.2-e),n=a*(.1-.07*e),l=.1+.8*e,d=0>o?0:o,c=0>n?0:n;let s=0;s=1<l?1:l,s=0>l?0:l;const u=this.cachedImg.cachedGradientStop;u.rippleReveal[0].style.stopOpacity=d.toString(),u.rippleReveal[1].style.stopOpacity=c.toString(),u.rippleReveal[2].style.stopOpacity="0",u.rippleReveal[0].offset.baseVal=0,u.rippleReveal[1].offset.baseVal=.55*s,u.rippleReveal[2].offset.baseVal=s;const h=this.cachedImg.cachedGradient;h.rippleReveal.r.baseVal.value=i,h.rippleReveal.cx.baseVal.value=t,h.rippleReveal.cy.baseVal.value=r},this.updateGradientPosition=(e,t)=>{const r=this.cachedImg.cachedGradient;r.borderReveal.cx.baseVal.value=e,r.borderReveal.cy.baseVal.value=t,r.fillReveal.cx.baseVal.value=e,r.fillReveal.cy.baseVal.value=t},this.drawShape=(e,t)=>{const r=this.cachedBoundingRect,i=r.width,a=r.height,o=this.cachedStyle,n=o.borderWidth,l=o.topLeftBorderDecorationRadius,c=o.topRightBorderDecorationRadius,s=o.bottomLeftBorderDecorationRadius,u=o.bottomRightBorderDecorationRadius,h=o.withLeftBorderFactor,p=o.withRightBorderFactor,m=o.withTopBorderFactor,y=o.withBottomBorderFactor,g=o.withLeftBorderFactor?0:1,v=o.withRightBorderFactor?0:1,f=o.withTopBorderFactor?0:1,R=o.withBottomBorderFactor?0:1,S=!o.withTopBorderFactor&&!o.withLeftBorderFactor,b=!o.withTopBorderFactor&&!o.withRightBorderFactor,F=!o.withBottomBorderFactor&&!o.withLeftBorderFactor,P=!o.withBottomBorderFactor&&!o.withRightBorderFactor,x=n<l?l-n:0,w=n<c?c-n:0,C=n<s?s-n:0,B=n<u?u-n:0;let D="";// Step 1: Starting point
|
|
36
|
+
switch(D+=e?`M ${l}, 0 `:`M ${n}, ${x+n} `,o.borderDecorationType){// Oh... Fuck again...
|
|
37
|
+
case"round":e&&(D+=`
|
|
38
|
+
h ${i-l-c}
|
|
39
|
+
a ${c}, ${c} 0 0 1 ${c}, ${c}
|
|
40
|
+
v ${a-c-u}
|
|
22
41
|
a ${u}, ${u} 0 0 1 ${-u}, ${u}
|
|
23
|
-
h ${-
|
|
24
|
-
a ${
|
|
25
|
-
v ${-
|
|
42
|
+
h ${-i+s+u}
|
|
43
|
+
a ${s}, ${s} 0 0 1 ${-s}, ${-s}
|
|
44
|
+
v ${-a+c+u}
|
|
26
45
|
a ${l}, ${l} 0 0 1 ${l}, ${-l}
|
|
27
46
|
Z
|
|
28
|
-
`),
|
|
29
|
-
M ${n*
|
|
30
|
-
v ${
|
|
31
|
-
a ${
|
|
32
|
-
h ${
|
|
33
|
-
a ${
|
|
34
|
-
v ${-
|
|
35
|
-
a ${
|
|
36
|
-
h ${-
|
|
37
|
-
a ${
|
|
38
|
-
L ${n*
|
|
39
|
-
`;break;case"bevel":e&&(
|
|
40
|
-
h ${
|
|
41
|
-
l ${
|
|
42
|
-
v ${
|
|
47
|
+
`),D+=`
|
|
48
|
+
M ${n*h}, ${x+n}
|
|
49
|
+
v ${a-x-C-2*n+R*n}
|
|
50
|
+
a ${C}, ${C} 0 0 0 ${C}, ${C}
|
|
51
|
+
h ${i-C-B-2*n+g*n+v*n}
|
|
52
|
+
a ${B}, ${B} 0 0 0 ${B}, ${-B}
|
|
53
|
+
v ${-a+w+B+2*n-f*n-R*n}
|
|
54
|
+
a ${w}, ${w} 0 0 0 ${-w}, ${-w}
|
|
55
|
+
h ${-i+C+B+2*n-g*n-v*n}
|
|
56
|
+
a ${x}, ${x} 0 0 0 ${-x}, ${x}
|
|
57
|
+
L ${n*h}, ${x+n}
|
|
58
|
+
`;break;case"bevel":e&&(D+=`
|
|
59
|
+
h ${i-l-c}
|
|
60
|
+
l ${c} ${c}
|
|
61
|
+
v ${a-c-u}
|
|
43
62
|
l ${-u} ${u}
|
|
44
|
-
h ${-
|
|
45
|
-
l ${-
|
|
46
|
-
v ${-
|
|
63
|
+
h ${-i+c+u}
|
|
64
|
+
l ${-s} ${-s}
|
|
65
|
+
v ${-a+c+u}
|
|
47
66
|
l ${l} ${-l}
|
|
48
67
|
Z
|
|
49
|
-
`),
|
|
50
|
-
M ${n}, ${
|
|
51
|
-
${v?`h ${-n}`:""}
|
|
52
|
-
v ${i-P-w-2*n}
|
|
53
|
-
${v?`h ${n}`:""}
|
|
54
|
-
${x?`l ${-n} 0`:""}
|
|
55
|
-
l ${w} ${w}
|
|
56
|
-
${x?`l ${n} 0`:""}
|
|
57
|
-
${f?`v ${n}`:""}
|
|
58
|
-
h ${a-w-D-2*n}
|
|
59
|
-
${f?`v ${-n}`:""}
|
|
60
|
-
${F?`l ${n} 0`:""}
|
|
61
|
-
l ${D} ${-D}
|
|
62
|
-
${F?`l ${-n} 0`:""}
|
|
63
|
-
${g?`h ${n}`:""}
|
|
64
|
-
v ${-i+P+w+2*n}
|
|
68
|
+
`),D+=`
|
|
69
|
+
M ${n}, ${x+n}
|
|
65
70
|
${g?`h ${-n}`:""}
|
|
71
|
+
v ${a-x-C-2*n}
|
|
72
|
+
${g?`h ${n}`:""}
|
|
73
|
+
${F?`l ${-n} 0`:""}
|
|
74
|
+
l ${C} ${C}
|
|
75
|
+
${F?`l ${n} 0`:""}
|
|
76
|
+
${R?`v ${n}`:""}
|
|
77
|
+
h ${i-C-B-2*n}
|
|
78
|
+
${R?`v ${-n}`:""}
|
|
79
|
+
${P?`l ${n} 0`:""}
|
|
80
|
+
l ${B} ${-B}
|
|
81
|
+
${P?`l ${-n} 0`:""}
|
|
82
|
+
${v?`h ${n}`:""}
|
|
83
|
+
v ${-a+x+C+2*n}
|
|
84
|
+
${v?`h ${-n}`:""}
|
|
66
85
|
${b?`l 0 ${-n}`:""}
|
|
67
|
-
l ${-
|
|
86
|
+
l ${-w} ${-w}
|
|
68
87
|
${b?`l 0 ${n}`:""}
|
|
69
|
-
${
|
|
70
|
-
h ${-
|
|
71
|
-
${
|
|
88
|
+
${f?`v ${-n}`:""}
|
|
89
|
+
h ${-i+C+B+2*n}
|
|
90
|
+
${f?`v ${n}`:""}
|
|
72
91
|
${S?`l 0 ${-n}`:""}
|
|
73
|
-
l ${-
|
|
92
|
+
l ${-x} ${x}
|
|
74
93
|
${S?`l 0 ${n}`:""}
|
|
75
|
-
`;break;case"miter":e&&(
|
|
94
|
+
`;break;case"miter":e&&(D+=`
|
|
76
95
|
M 0, 0
|
|
77
|
-
h ${
|
|
78
|
-
v ${
|
|
79
|
-
h ${0-
|
|
80
|
-
v ${0-
|
|
96
|
+
h ${i}
|
|
97
|
+
v ${a}
|
|
98
|
+
h ${0-i}
|
|
99
|
+
v ${0-a}
|
|
81
100
|
Z
|
|
82
|
-
`),
|
|
83
|
-
M ${n*
|
|
84
|
-
v ${
|
|
85
|
-
h ${
|
|
86
|
-
v ${-
|
|
87
|
-
h ${-
|
|
101
|
+
`),D+=`
|
|
102
|
+
M ${n*h}, ${n*m}
|
|
103
|
+
v ${a-m*n-y*n}
|
|
104
|
+
h ${i-h*n-p*n}
|
|
105
|
+
v ${-a+m*n+y*n}
|
|
106
|
+
h ${-i+h*n+p*n}
|
|
88
107
|
`;}// Step 3: Close the path
|
|
89
|
-
|
|
108
|
+
D+="miter"===o.borderDecorationType?e?`L ${n}, ${n}`:`z`:e?`L ${x+n}, ${x+n}`:`z`,t.setAttribute("d",D)},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect,r=e.width.baseVal,i=e.height.baseVal;(r.value!==t.width||i.value!==t.height)&&(r.value=t.width,i.value=t.height)},this.clear=e=>{e||this.internalClear()},this.internalClear=()=>{if(!this.dirty)return!1;const e=this.cachedImg.cachedPath;return e.borderReveal.style.fill="transparent",e.fillReveal.style.fill="transparent",e.rippleReveal.style.fill="transparent",this.dirty=!1,!0},this.paint=e=>{const i=this._store,a=i.animationQueue.includes(this),o=i.clientX===i.paintedClientX&&i.clientY===i.paintedClientY;if(o&&!e&&!a)return!1;if(!i.mouseInBoundary&&!a)return this.internalClear(),!1;this.syncSizeToElement(this.element),this.cacheBoundingRect();const n=this.cachedBoundingRect,l=i.clientX-n.left,d=i.clientY-n.top;if(t(l)||t(d))return!1;const s=this.cachedStyle;this.getTrueFillRadius(s.trueFillRadius),this.paintedWidth=n.width,this.paintedHeight=n.height;const c=this.cachedImg.cachedGradient,u=r(c.borderReveal.r.baseVal.value,c.fillReveal.r.baseVal.value);this._store.updateMaxRadius(u),this.cacheCanvasPaintingStyle(),this.fillDirty&&this.updateCachedReveal();const h=l-u<n.width,p=d-u<n.height,m=0<l+u&&h&&0<d+u&&p;if(!m&&!a)return this.internalClear(),!1;if(this.dirty=!0,this.updateGradientPosition(l,d),this.shapeDirty&&(this.drawShape(!0,this.cachedImg.cachedPath.borderReveal),this.drawShape(!1,this.cachedImg.cachedPath.fillReveal),this.drawShape(!1,this.cachedImg.cachedPath.rippleReveal),this.shapeDirty=!1),i.mouseInBoundary){const e=0<l&&0<d&&l<n.width&&d<n.height;s.hoverLight&&e?this.cachedImg.cachedPath.fillReveal.style.fill="url(#fillGrad)":"transparent"!==this.cachedImg.cachedPath.fillReveal.style.fill&&(this.cachedImg.cachedPath.fillReveal.style.fill="transparent");const t=s.diffuse&&m||e;0!==s.borderWidth&&t?this.cachedImg.cachedPath.borderReveal.style.fill="url(#borderGrad)":"transparent"!==this.cachedImg.cachedPath.borderReveal.style.fill&&(this.cachedImg.cachedPath.borderReveal.style.fill="transparent")}if(s.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){const e="constrained"===s.pressAnimationFillMode?s.trueFillRadius[1]:r(n.width,n.height);this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,this.mouseUpClientX-n.left,this.mouseUpClientY-n.top,e):this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,l,d,e),this.cachedImg.cachedPath.rippleReveal.style.fill="url(#rippleGrad)"}else"transparent"!==this.cachedImg.cachedPath.rippleReveal.style.fill&&(this.cachedImg.cachedPath.rippleReveal.style.fill="transparent");return!0},this._store=e;const o={borderReveal:i.querySelector("#borderPath"),fillReveal:i.querySelector("#fillPath"),rippleReveal:i.querySelector("#ripplePath")},n={borderReveal:i.querySelector("#borderGrad"),fillReveal:i.querySelector("#fillGrad"),rippleReveal:i.querySelector("#rippleGrad")},l={borderReveal:[i.querySelector("#borderCenter"),i.querySelector("#borderOut")],fillReveal:[i.querySelector("#fillCenter"),i.querySelector("#fillOut")],rippleReveal:[i.querySelector("#rippleCenter"),i.querySelector("#rippleMiddle"),i.querySelector("#rippleOut")]};this.cachedImg={cachedReveal:{borderReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null},fillReveal:{radiusFactor:-1,radius:-1,color:"INVALID",opacity:0,pattern:null}},cachedPath:o,cachedGradient:n,cachedGradientStop:l}}}class b{constructor(e,t){// The current cursor position relative to window.
|
|
90
109
|
// The cursor position of painted reveal effect.
|
|
110
|
+
// While the browser scrolls under a finger, the finger stays on the same
|
|
111
|
+
// spot of the content, but touch events are throttled (~200ms in Chromium).
|
|
112
|
+
// The pointer is kept relative to the container and re-derived on every
|
|
113
|
+
// frame, otherwise it stays still on the screen while the content moves.
|
|
91
114
|
/**
|
|
92
115
|
* Repaint all canvas while user's pointer has entered the boundary.
|
|
93
116
|
*/ /**
|
|
@@ -114,27 +137,33 @@ B+="miter"===o.borderDecorationType?e?`L ${n}, ${n}`:`z`:e?`L ${P+n}, ${P+n}`:`z
|
|
|
114
137
|
* @param config The config to be cleaned up.
|
|
115
138
|
* @param skipPaint Skip painting.
|
|
116
139
|
* @param forceClean Force clear the painting.
|
|
117
|
-
*/this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,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.maxRadius=-1,this.requestedAnimationFrame=!1,this.addReveal=(e,t)=>{let r;const
|
|
140
|
+
*/this.clientX=-1e3,this.clientY=-1e3,this.paintedClientX=-1e3,this.paintedClientY=-1e3,this.mouseInBoundary=!1,this.canvasList=[],this.animationQueue=[],this.animationFrame=null,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.maxRadius=-1,this.requestedAnimationFrame=!1,this.addReveal=(e,t)=>{let r;const i=Object.prototype.toString.call(e);if("[object HTMLCanvasElement]"===i)r=new R(this,e,t);else if("[object SVGSVGElement]"===i)r=new S(this,e,t);else throw new TypeError(`Unknown element type, got: ${i}, Canvas or SVG element expected.`);r.cacheBoundingRect(),r.cacheCanvasPaintingStyle(),r.updateCachedBitmap(),this.canvasList.push(r)},this.removeReveal=e=>{this.canvasList=this.canvasList.filter(t=>t&&t.element!==e)},this.updateMaxRadius=e=>{this.maxRadius=r(e,this.maxRadius)},this.requestPaintAll=e=>{this.requestedAnimationFrame||(this.requestedAnimationFrame=!0,this.animationFrame=window.requestAnimationFrame(t=>{this.requestedAnimationFrame=!1,this.paintAll(e?-1:t,!0)}))},this.updatePointerPosition=(e,t)=>{this.clientX=e,this.clientY=t;const r=this.container.getBoundingClientRect();let i=!0;e<r.left-this.maxRadius&&(i=!1),e>r.right+this.maxRadius&&(i=!1),t<r.top-this.maxRadius&&(i=!1),t>r.bottom+this.maxRadius&&(i=!1),this.mouseInBoundary=i},this.anchorOffsetX=null,this.anchorOffsetY=null,this.anchorPointer=()=>{const e=this.container.getBoundingClientRect();this.anchorOffsetX=this.clientX-e.left,this.anchorOffsetY=this.clientY-e.top},this.followAnchor=()=>{if(null!==this.anchorOffsetX&&null!==this.anchorOffsetY){const e=this.container.getBoundingClientRect();this.clientX=e.left+this.anchorOffsetX,this.clientY=e.top+this.anchorOffsetY}},this.onPointerMoveOnScreen=(e,t)=>{if(this.updatePointerPosition(e,t),!!this.mouseInBoundary)return this.requestPaintAll(),!0},this.onPointerEnterBoundary=()=>{this.mouseInBoundary=!0,this.animationFrame||this.requestPaintAll()},this.onPointerLeaveBoundary=()=>{this.anchorOffsetX=null,this.anchorOffsetY=null,this.mouseInBoundary=!1,this.requestPaintAll(!0)},this.paintAll=(e,t)=>{if(t||this.mouseInBoundary||0!==this.animationQueue.length){this.followAnchor();// Animation duration checkup
|
|
141
|
+
// Paint the canvas one by one
|
|
118
142
|
for(let t=0;t<this.animationQueue.length;t++){const r=this.animationQueue[t];if(!e||r.currentFrameId===e)continue;r.currentFrameId=e,null===r.mouseDownAnimateStartFrame&&(r.mouseDownAnimateStartFrame=e);// Calculate how long the animation has been playing
|
|
119
|
-
const
|
|
143
|
+
const i=e-r.mouseDownAnimateStartFrame;r.mouseDownAnimateCurrentFrame=i;const a=r.cachedStyle.pressAnimationSpeed,o=r.cachedStyle.releaseAnimationAccelerateRate;// We assume that Ripple is a one-way linear process from
|
|
120
144
|
// no diffusion to fully diffused,
|
|
121
145
|
// and Logic Frame represents the progress of the animation
|
|
122
146
|
// in this process.
|
|
123
|
-
let n=
|
|
124
|
-
|
|
147
|
+
let n=i;r.mouseReleased&&r.mouseDownAnimateReleasedFrame&&(n+=(i-r.mouseDownAnimateReleasedFrame)*o),r.mouseDownAnimateLogicFrame=n/a,1<r.mouseDownAnimateLogicFrame&&(r.cleanedUpForAnimation=!0)}for(let r=0;r<this.canvasList.length;r++){const i=this.canvasList[r];if(i.currentFrameId=e,i.cleanedUpForAnimation)this.cleanUpAnimationUnit(i,!1),i.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(i);this.mouseInBoundary||e?i.paint(t):i.clear(!1)}}this.paintedClientX=this.clientX,this.paintedClientY=this.clientY,this.mouseInBoundary||0!==this.animationQueue.length?this.requestPaintAll():this.animationFrame=null}},this.clearAll=e=>{this.cleanupAnimation(e,!0)},this.initializeAnimation=()=>{const e=this.canvasList.find(e=>e.mouseInCanvas());e&&(!this.animationQueue.includes(e)&&this.animationQueue.push(e),e.mouseDownAnimateStartFrame=null,e.mousePressed=!0,e.mouseReleased=!1)},this.switchAnimation=()=>{for(let e=0;e<this.animationQueue.length;e++){const t=this.animationQueue[e];t.mouseReleased||(t.mouseReleased=!0,t.mouseDownAnimateReleasedFrame=t.mouseDownAnimateCurrentFrame,t.mouseUpClientX=this.clientX,t.mouseUpClientY=this.clientY)}},this.cleanupAnimation=(e,t)=>{for(let r=0;r<this.animationQueue.length;r++){const i=this.animationQueue[r];this.cleanUpAnimationUnit(i,e,t)}},this.cleanUpAnimationUnit=(e,t,r)=>{e.mouseUpClientX=null,e.mouseUpClientY=null,e.mouseDownAnimateStartFrame=null,e.mouseDownAnimateCurrentFrame=null,e.mouseDownAnimateReleasedFrame=null,e.mouseDownAnimateLogicFrame=null,e.mousePressed=!1,e.mouseReleased=!1;const i=this.animationQueue.indexOf(e);-1<i&&this.animationQueue.splice(i,1),t||(r?e.clear(!1):this.mouseInBoundary?e.paint(!0):e.clear(!0))},this.getRevealAnimationConfig=()=>this.canvasList.find(e=>e.mouseInCanvas())||null,this.id=e,this.container=t}}class F{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-1,this.touchScrolling=!1,this.pointerLeaveScheduled=!1,this.handlePointerLeave=()=>{this.pointerLeaveScheduled||(this.pointerLeaveScheduled=!0,window.requestAnimationFrame(()=>{for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerLeaveBoundary();this.pointerLeaveScheduled=!1}))},this.handlePointerMove=e=>{this.cachedMouseX=e.clientX,this.cachedMouseY=e.clientY,this.requestedTraverseBoundaries||(window.requestAnimationFrame(this.traverseBoundaries),this.requestedTraverseBoundaries=!0)},this.traverseBoundaries=()=>{this.requestedTraverseBoundaries=!1;for(let e=0;e<this._storage.length;e++)this._storage[e].onPointerMoveOnScreen(this.cachedMouseX,this.cachedMouseY),this.touchScrolling&&this._storage[e].anchorPointer()},this.newBoundary=e=>{const t=this._currentHashId++,r=new b(t,e);return this._storage.push(r),r},this.removeBoundary=e=>{this._storage=this._storage.filter(t=>t!==e)},"experimentalAutoFit"===h.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerdown",this.handlePointerMove),window.addEventListener("pointerup",e=>{"mouse"!==e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointerleave",e=>{"mouse"===e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointercancel",e=>{// The browser took over the touch for scrolling, keep following
|
|
148
|
+
// the finger with touch events until it leaves the screen.
|
|
149
|
+
if("touch"===e.pointerType){this.touchScrolling=!0;for(let e=0;e<this._storage.length;e++)this._storage[e].anchorPointer()}else this.handlePointerLeave()}),window.addEventListener("touchmove",e=>{this.touchScrolling&&e.touches.length&&this.handlePointerMove(e.touches[0])},{passive:!0});const e=e=>{!this.touchScrolling||e.touches.length||(this.touchScrolling=!1,this.handlePointerLeave())};window.addEventListener("touchend",e,{passive:!0}),window.addEventListener("touchcancel",e,{passive:!0})}}}const P="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class x extends P{constructor(){super(...arguments),this.stateManager=new F}}x.ElementName="ax-reveal-provider";class w extends P{constructor(){/**
|
|
125
150
|
* Update the position of your pointer.
|
|
126
|
-
* @param ev Pointer event from the listener.
|
|
127
|
-
*/
|
|
151
|
+
* @param ev Pointer event or touch point from the listener.
|
|
152
|
+
*/ // Once the browser starts scrolling, pointer events stop (`pointercancel`)
|
|
153
|
+
// but touch events keep coming, so we follow the finger with them instead.
|
|
154
|
+
// Fired when the browser takes over the touch for scrolling or zooming,
|
|
155
|
+
// `pointerup` will never come, so the pressed ripple must be cleaned here.
|
|
156
|
+
super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=e=>{this.waitForStorage(t=>{t.clientX=e.clientX,t.clientY=e.clientY})},this.touchScrolling=!1,this.handlePointerEnter=()=>this.waitForStorage(e=>e.onPointerEnterBoundary()),this.handlePointerLeave=()=>{this.touchScrolling||this.waitForStorage(e=>e.onPointerLeaveBoundary())},this.handlePointerMove=this.updatePointerPosition,this.handlePointerUp=e=>{"mouse"===e.pointerType?this.waitForStorage(e=>e.switchAnimation()):this.waitForStorage(e=>e.clearAll(!1))},this.handlePointerCancel=e=>{this.waitForStorage(t=>{"touch"===e.pointerType&&(this.touchScrolling=!0,t.anchorPointer()),t.clearAll(!1)})},this.handleTouchMove=e=>{this.touchScrolling&&e.targetTouches.length&&(this.updatePointerPosition(e.targetTouches[0]),this.waitForStorage(e=>e.anchorPointer()))},this.handleTouchEnd=e=>{!this.touchScrolling||e.targetTouches.length||(this.touchScrolling=!1,this.handlePointerLeave())},this.handlePointerDown=e=>this.waitForStorage(t=>{this.updatePointerPosition(e),t.initializeAnimation()}),this.root.innerHTML=`
|
|
128
157
|
<div>
|
|
129
158
|
<slot></slot>
|
|
130
|
-
</div>`}get storage(){return this._storage}set storage(e){const
|
|
159
|
+
</div>`}static get stateManager(){return w._stateManager||(w._stateManager=new F),w._stateManager}get storage(){return this._storage}set storage(e){var t;const r=this._storage;r&&(this.dispatchEvent(new CustomEvent(w.removeStorageEvent,{detail:r})),null===(t=this.ownerStateManager)||void 0===t?void 0:t.removeBoundary(r)),this._storage=e,e&&this.dispatchEvent(new CustomEvent(w.attachStorageEvent,{detail:e})),r&&e&&this.dispatchEvent(new CustomEvent(w.replaceStorageEvent,{detail:{old:r,new:e}}))}waitForStorage(e){this.storage===void 0?this.addEventListener(w.attachStorageEvent,()=>e(this.storage),{once:!0}):e(this.storage)}appendStorage(e=!1){if(!e&&this.storage)return;const t=o(this,x.ElementName),r=t?t.stateManager:w.stateManager;this.storage=r.newBoundary(this),this.ownerStateManager=r}connectedCallback(){this.appendStorage(!0),"strictEdge"===h.borderDetectionMode&&(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),this.addEventListener("pointercancel",this.handlePointerCancel),"strictEdge"===h.borderDetectionMode&&(this.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.addEventListener("touchcancel",this.handleTouchEnd,{passive:!0}))}disconnectedCallback(){this.storage=void 0,this.ownerStateManager=void 0}}w.ElementName="ax-reveal-bound",w.removeStorageEvent="removeStorage",w.attachStorageEvent="attachStorage",w.replaceStorageEvent="replaceStorage";class C extends P{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.connection=0,this.handlePointerDown=e=>{this.setPointerCapture(e.pointerId)},this.root.innerHTML=`
|
|
131
160
|
<div class="ax-reveal">
|
|
132
161
|
<canvas></canvas>
|
|
133
162
|
<div class="content"><slot></slot></div>
|
|
134
163
|
</div>
|
|
135
164
|
<style>
|
|
136
165
|
.ax-reveal { display: content; }
|
|
137
|
-
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action:
|
|
166
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: var(--reveal-touch-action, manipulation); user-select: none; }
|
|
138
167
|
.content { position: relative; }
|
|
139
168
|
canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
140
169
|
:host { display: inline-block; position: relative; }
|
|
@@ -144,9 +173,10 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
144
173
|
:host([inline-flex]) { display: inline-flex; }
|
|
145
174
|
:host([grid]) { display: grid; }
|
|
146
175
|
:host([inline-grid]) { display: inline-grid; }
|
|
147
|
-
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action:
|
|
176
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: var(--reveal-touch-action, manipulation); user-select: none; }
|
|
148
177
|
::slotted(button) { outline:none; }
|
|
149
|
-
</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.
|
|
178
|
+
</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.connection++,this.storage&&this.storage.removeReveal(this.canvas),this.storage=void 0}connectedCallback(){if(this.boundary=o(this,w.ElementName),!this.boundary)throw new SyntaxError("You must use "+w.ElementName+" as the boundary of reveal highlight!");const e=++this.connection;this.boundary.waitForStorage(t=>setTimeout(()=>{// Disconnected or reconnected before the timer fired.
|
|
179
|
+
e!==this.connection||(this.storage=t,t.addReveal(this.canvas,this))},0)),this.addEventListener("pointerdown",this.handlePointerDown)}}C.ElementName="ax-reveal";class B extends P{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.connection=0,this.handlePointerDown=e=>{this.setPointerCapture(e.pointerId)},this.root.innerHTML=`
|
|
150
180
|
<div class="ax-reveal">
|
|
151
181
|
<svg>
|
|
152
182
|
<defs>
|
|
@@ -172,7 +202,7 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
172
202
|
</div>
|
|
173
203
|
<style>
|
|
174
204
|
.ax-reveal { display: contents; }
|
|
175
|
-
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action:
|
|
205
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: var(--reveal-touch-action, manipulation); user-select: none; }
|
|
176
206
|
.content { position: relative; }
|
|
177
207
|
svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
178
208
|
:host { display: inline-block; position: relative; }
|
|
@@ -182,6 +212,7 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
182
212
|
:host([inline-flex]) { display: inline-flex; }
|
|
183
213
|
:host([grid]) { display: grid; }
|
|
184
214
|
:host([inline-grid]) { display: inline-grid; }
|
|
185
|
-
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action:
|
|
215
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: var(--reveal-touch-action, manipulation); user-select: none; }
|
|
186
216
|
::slotted(button) { outline:none; }
|
|
187
|
-
</style>`,this.svg=this.root.querySelector("svg")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.
|
|
217
|
+
</style>`,this.svg=this.root.querySelector("svg")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.connection++,this.storage&&this.storage.removeReveal(this.svg),this.storage=void 0}connectedCallback(){if(this.boundary=o(this,w.ElementName),!this.boundary)throw new SyntaxError("You must use "+w.ElementName+" as the boundary of reveal highlight!");const e=++this.connection;this.boundary.waitForStorage(t=>setTimeout(()=>{// Disconnected or reconnected before the timer fired.
|
|
218
|
+
e!==this.connection||(this.storage=t,t.addReveal(this.svg,this))},0)),this.addEventListener("pointerdown",this.handlePointerDown)}}B.ElementName="ax-reveal-ng";const D="magic";let A=!1;e.register=d,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/build/utils/types.d.ts
CHANGED
|
@@ -54,10 +54,10 @@ interface CachedReveal {
|
|
|
54
54
|
radiusFactor: number;
|
|
55
55
|
color: string;
|
|
56
56
|
opacity: number;
|
|
57
|
-
pattern:
|
|
57
|
+
pattern: CanvasGradient | null;
|
|
58
58
|
}
|
|
59
59
|
/**
|
|
60
|
-
* Cached border and body
|
|
60
|
+
* Cached border and body gradient, for faster painting on the canvas.
|
|
61
61
|
* @interface CachedRevealBitmap
|
|
62
62
|
*/
|
|
63
63
|
export interface CachedRevealBitmap {
|
|
@@ -65,14 +65,6 @@ export interface CachedRevealBitmap {
|
|
|
65
65
|
borderReveal: CachedReveal;
|
|
66
66
|
fillReveal: CachedReveal;
|
|
67
67
|
};
|
|
68
|
-
cachedCanvas: {
|
|
69
|
-
borderReveal: HTMLCanvasElement;
|
|
70
|
-
fillReveal: HTMLCanvasElement;
|
|
71
|
-
};
|
|
72
|
-
cachedCtx: {
|
|
73
|
-
borderReveal: CanvasRenderingContext2D | null;
|
|
74
|
-
fillReveal: CanvasRenderingContext2D | null;
|
|
75
|
-
};
|
|
76
68
|
}
|
|
77
69
|
/**
|
|
78
70
|
* Cached border and body pattern, just to store something in similar way.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,kBAAkB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,gBAAgB,CAAC;IACvC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,6BAA6B,EAAE,MAAM,CAAC;IACtC,8BAA8B,EAAE,MAAM,CAAC;IACvC,gCAAgC,EAAE,MAAM,CAAC;IACzC,iCAAiC,EAAE,MAAM,CAAC;IAC1C;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8BAA8B,EAAE,MAAM,CAAC;CAC1C;AAED,UAAU,YAAY;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"AAAA,oBAAY,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,kBAAkB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,gBAAgB,CAAC;IACvC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,6BAA6B,EAAE,MAAM,CAAC;IACtC,8BAA8B,EAAE,MAAM,CAAC;IACvC,gCAAgC,EAAE,MAAM,CAAC;IACzC,iCAAiC,EAAE,MAAM,CAAC;IAC1C;;;OAGG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,8BAA8B,EAAE,MAAM,CAAC;CAC1C;AAED,UAAU,YAAY;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAClC;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,YAAY,EAAE;QACV,YAAY,EAAE,YAAY,CAAC;QAC3B,UAAU,EAAE,YAAY,CAAC;KAC5B,CAAC;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC7B,YAAY,EAAE;QACV,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;QACpC,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAC;KACrC,CAAC;IACF,UAAU,EAAE;QACR,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;QACtC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC;QACpC,QAAQ,CAAC,YAAY,EAAE,cAAc,CAAC;KACzC,CAAC;IACF,cAAc,EAAE;QACZ,QAAQ,CAAC,YAAY,EAAE,wBAAwB,CAAC;QAChD,QAAQ,CAAC,UAAU,EAAE,wBAAwB,CAAC;QAC9C,QAAQ,CAAC,YAAY,EAAE,wBAAwB,CAAC;KACnD,CAAC;IACF,kBAAkB,EAAE;QAChB,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;QAClE,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;QAChE,QAAQ,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC;KACrF,CAAC;CACL"}
|
package/es/BaseConfig.d.ts
CHANGED
|
@@ -1,43 +1,47 @@
|
|
|
1
|
-
import { ComputedStyleStorage } from './ComputedStyleStorage.js';
|
|
2
|
-
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
3
|
-
import type { CachedBoundingRect, CachedStyle } from './utils/types.js';
|
|
4
|
-
export declare class BaseConfig<T extends Element> {
|
|
5
|
-
protected _store: RevealBoundaryStore;
|
|
6
|
-
pxRatio: number;
|
|
7
|
-
readonly container: HTMLElement;
|
|
8
|
-
readonly element: T;
|
|
9
|
-
protected readonly computedStyle: ComputedStyleStorage;
|
|
10
|
-
paintedWidth: number;
|
|
11
|
-
paintedHeight: number;
|
|
12
|
-
currentFrameId: number;
|
|
13
|
-
cachedBoundingRectFrameId: number;
|
|
14
|
-
cachedBoundingRect: CachedBoundingRect;
|
|
15
|
-
cachedStyleFrameId: number;
|
|
16
|
-
cachedStyle: CachedStyle;
|
|
17
|
-
dirty: boolean;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
import { ComputedStyleStorage } from './ComputedStyleStorage.js';
|
|
2
|
+
import { RevealBoundaryStore } from './RevealBoundryStore.js';
|
|
3
|
+
import type { CachedBoundingRect, CachedStyle } from './utils/types.js';
|
|
4
|
+
export declare class BaseConfig<T extends Element> {
|
|
5
|
+
protected _store: RevealBoundaryStore;
|
|
6
|
+
pxRatio: number;
|
|
7
|
+
readonly container: HTMLElement;
|
|
8
|
+
readonly element: T;
|
|
9
|
+
protected readonly computedStyle: ComputedStyleStorage;
|
|
10
|
+
paintedWidth: number;
|
|
11
|
+
paintedHeight: number;
|
|
12
|
+
currentFrameId: number;
|
|
13
|
+
cachedBoundingRectFrameId: number;
|
|
14
|
+
cachedBoundingRect: CachedBoundingRect;
|
|
15
|
+
cachedStyleFrameId: number;
|
|
16
|
+
cachedStyle: CachedStyle;
|
|
17
|
+
dirty: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Bumped whenever `cacheCanvasPaintingStyle` sees any value change, so
|
|
20
|
+
* painters can tell whether the last painted frame is still valid.
|
|
21
|
+
*/
|
|
22
|
+
styleVersion: number;
|
|
23
|
+
shapeDirty: boolean;
|
|
24
|
+
fillDirty: boolean;
|
|
25
|
+
animationDirty: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* If is cleaned up by `RevealBoundaryStore` during animation
|
|
28
|
+
* duration checkup.
|
|
29
|
+
*/
|
|
30
|
+
cleanedUpForAnimation: boolean;
|
|
31
|
+
mouseUpClientX: number | null;
|
|
32
|
+
mouseUpClientY: number | null;
|
|
33
|
+
mouseDownAnimateStartFrame: number | null;
|
|
34
|
+
mouseDownAnimateCurrentFrame: number | null;
|
|
35
|
+
mouseDownAnimateReleasedFrame: number | null;
|
|
36
|
+
mouseDownAnimateLogicFrame: number | null;
|
|
37
|
+
mousePressed: boolean;
|
|
38
|
+
mouseReleased: boolean;
|
|
39
|
+
constructor(store: RevealBoundaryStore, $canvas: T, $container: HTMLElement);
|
|
40
|
+
cacheBoundingRect: () => void;
|
|
41
|
+
getTrueFillRadius: (trueFillRadius?: [number, number], fillMode?: string) => [number, number];
|
|
42
|
+
getPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => string;
|
|
43
|
+
getNumberPropFromMultipleSource: (domPropsName: string, cssPropsName: string) => number;
|
|
44
|
+
cacheCanvasPaintingStyle: () => void;
|
|
45
|
+
mouseInCanvas: () => boolean;
|
|
46
|
+
}
|
|
43
47
|
//# sourceMappingURL=BaseConfig.d.ts.map
|
package/es/BaseConfig.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseConfig.d.ts","sourceRoot":"","sources":["../src/BaseConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE1F,qBAAa,UAAU,CAAC,CAAC,SAAS,OAAO;IACrC,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAEtC,OAAO,SAAgC;IAEvC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAEpB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,oBAAoB,CAAC;IAEvD,YAAY,SAAK;IACjB,aAAa,SAAK;IAElB,cAAc,EAAE,MAAM,CAAM;IAE5B,yBAAyB,EAAE,MAAM,CAAM;IAEvC,kBAAkB,EAAE,kBAAkB,CAKpC;IAEF,kBAAkB,EAAE,MAAM,CAAM;IAEhC,WAAW,EAAE,WAAW,CA2BtB;IAEF,KAAK,EAAE,OAAO,CAAS;IAEvB,UAAU,EAAE,OAAO,CAAQ;IAC3B,SAAS,EAAE,OAAO,CAAQ;IAC1B,cAAc,EAAE,OAAO,CAAQ;IAE/B;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,4BAA4B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnD,6BAA6B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpD,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,YAAY,UAAS;IAErB,aAAa,UAAS;gBAEV,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,WAAW;IAS3E,iBAAiB,aAaf;IAEF,iBAAiB,6EAsBf;IAEF,yBAAyB,iBAAkB,MAAM,gBAAgB,MAAM,YAKrE;IAEF,+BAA+B,iBAAkB,MAAM,gBAAgB,MAAM,YAK3E;IAEF,wBAAwB,
|
|
1
|
+
{"version":3,"file":"BaseConfig.d.ts","sourceRoot":"","sources":["../src/BaseConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAiB,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAI9D,OAAO,KAAK,EAAoB,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE1F,qBAAa,UAAU,CAAC,CAAC,SAAS,OAAO;IACrC,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC;IAEtC,OAAO,SAAgC;IAEvC,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAEpB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAE,oBAAoB,CAAC;IAEvD,YAAY,SAAK;IACjB,aAAa,SAAK;IAElB,cAAc,EAAE,MAAM,CAAM;IAE5B,yBAAyB,EAAE,MAAM,CAAM;IAEvC,kBAAkB,EAAE,kBAAkB,CAKpC;IAEF,kBAAkB,EAAE,MAAM,CAAM;IAEhC,WAAW,EAAE,WAAW,CA2BtB;IAEF,KAAK,EAAE,OAAO,CAAS;IAEvB;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAK;IAEzB,UAAU,EAAE,OAAO,CAAQ;IAC3B,SAAS,EAAE,OAAO,CAAQ;IAC1B,cAAc,EAAE,OAAO,CAAQ;IAE/B;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAS;IAEvC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,4BAA4B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnD,6BAA6B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACpD,0BAA0B,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjD,YAAY,UAAS;IAErB,aAAa,UAAS;gBAEV,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,WAAW;IAS3E,iBAAiB,aAaf;IAEF,iBAAiB,6EAsBf;IAEF,yBAAyB,iBAAkB,MAAM,gBAAgB,MAAM,YAKrE;IAEF,+BAA+B,iBAAkB,MAAM,gBAAgB,MAAM,YAK3E;IAEF,wBAAwB,aA0KtB;IAEF,aAAa,gBAOX;CACL"}
|