@ax-design/reveal-highlight 0.4.0 → 0.4.1
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 +76 -227
- package/build/CustomElements.d.ts +2 -0
- package/build/CustomElements.d.ts.map +1 -1
- package/build/main.js +32 -32
- package/es/CustomElements.d.ts +2 -0
- package/es/CustomElements.d.ts.map +1 -1
- package/es/CustomElements.js +99 -77
- package/es/CustomElements.js.map +1 -1
- package/es/SvgConfig.js +70 -70
- package/es/tsconfig.tsbuildinfo +1 -0
- package/package.json +12 -8
- package/src/BaseConfig.ts +310 -310
- package/src/CanvasConfig.ts +415 -415
- package/src/ComputedStyleStorage.ts +89 -89
- package/src/CustomElements.ts +272 -247
- package/src/Profiler.ts +44 -44
- package/src/RevealBoundryStore.ts +291 -291
- package/src/RevealStateManager.ts +78 -78
- 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 +105 -105
- package/src/variables.ts +1 -1
- package/.prettierrc +0 -6
- package/.travis.yml +0 -26
- package/docs/demo/index.html +0 -992
- package/docs/demo/ng.html +0 -992
- package/docs/demo/performance-inspector.html +0 -60
- package/docs/demo/shapes-demo.html +0 -93
- package/docs/demo/single-unit.html +0 -39
- package/docs/logo.png +0 -0
- package/docs/logo.svg +0 -1
- package/docs/screen-record.gif +0 -0
- package/docs/src/logo.afdesign +0 -0
- package/rollup.config.js +0 -14
- package/tsconfig.json +0 -18
package/build/main.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
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,a=Math.floor;function i(e){return
|
|
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,a=Math.floor;function i(e){return p.compat?new m(e):new h(e)}function o(e,t){var a;const i=e.closest(t);if(i)return i;const r=null===(a=n(e))||void 0===a?void 0:a.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(P.ElementName,P),customElements.define(C.ElementName,C),customElements.define(w.ElementName,w),customElements.define(D.ElementName,D)}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(p.borderDetectionMode=t,p.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>|${B}`,initialValue:B,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>|${B}`,initialValue:B,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>|${B}`,initialValue:B,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",B),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",B),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",B),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 s="strictEdge",c=!1;class u extends Error{constructor(){super("Border detection mode has already been initialized."),this.name="InitializedError"}}const p={compat:!1,get borderDetectionMode(){return s},set borderDetectionMode(e){if(c)throw new u;s=e,c=!0}};class m{constructor(e){if(!m.colorParser){const e=document.createElement("div");e.style.display="none !important",document.body.appendChild(e),m.colorParser=e,m.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){return m.colorParser.style.color=this.get(e),m.colorParserStyle.color||"rgb(0, 0, 0)"}getNumber(e){// Length values in computed style will always in the unit of px
|
|
2
2
|
// Maybe NaN
|
|
3
|
-
return parseFloat(this.get(e))}}class
|
|
4
|
-
}}const
|
|
3
|
+
return parseFloat(this.get(e))}}class h{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
|
|
4
|
+
}}const y=e=>{if(""===e)return"";if("#"===e[0]){// Thanks bro:
|
|
5
5
|
// https://stackoverflow.com/a/11508164/3931936
|
|
6
|
-
const i=parseInt(e.substring(1),16);var t=255&i>>16,r=255&i>>8,a=255&i;return t+","+r+","+a}else{let t="",r=!1,a=0;for(let o=0;o<e.length;o++){const i=e[o],n=i.charCodeAt(0)-48;if(" "!==i){if(r&&!(0<=n&&10>n)&&","!==i&&")"!==i)throw new SyntaxError(`${e} is not a validate color value!`);if(!r&&"("===i){r=!0;continue}if(2>a&&")"===i)throw new SyntaxError(`${e} should have at least three color channel`);if(","===i&&a++,")"===i)return t;r&&(t+=i)}}return t}},
|
|
6
|
+
const i=parseInt(e.substring(1),16);var t=255&i>>16,r=255&i>>8,a=255&i;return t+","+r+","+a}else{let t="",r=!1,a=0;for(let o=0;o<e.length;o++){const i=e[o],n=i.charCodeAt(0)-48;if(" "!==i){if(r&&!(0<=n&&10>n)&&","!==i&&")"!==i)throw new SyntaxError(`${e} is not a validate color value!`);if(!r&&"("===i){r=!0;continue}if(2>a&&")"===i)throw new SyntaxError(`${e} should have at least three color channel`);if(","===i&&a++,")"===i)return t;r&&(t+=i)}}return t}},v=e=>"round"===e||"bevel"===e||"miter"===e;class g{constructor(e,t,o){/**
|
|
7
7
|
* If is cleaned up by `RevealBoundaryStore` during animation
|
|
8
8
|
* 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=a(e.top),this.cachedBoundingRect.left=a(e.left),this.cachedBoundingRect.width=a(e.width),this.cachedBoundingRect.height=a(e.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(e=[0,0],t=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative")=>{const a=this.cachedBoundingRect;switch(t){case"relative":e[0]=Math.min(a.width,a.height),e[1]=r(a.width,a.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 a=this.container.dataset[e];return a?r(a):this.computedStyle.getNumber(t)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const e=
|
|
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=a(e.top),this.cachedBoundingRect.left=a(e.left),this.cachedBoundingRect.width=a(e.width),this.cachedBoundingRect.height=a(e.height),this.cachedBoundingRectFrameId=this.currentFrameId}},this.getTrueFillRadius=(e=[0,0],t=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative")=>{const a=this.cachedBoundingRect;switch(t){case"relative":e[0]=Math.min(a.width,a.height),e[1]=r(a.width,a.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 a=this.container.dataset[e];return a?r(a):this.computedStyle.getNumber(t)},this.cacheCanvasPaintingStyle=()=>{if(this.currentFrameId===this.cachedStyleFrameId)return;if(0===this.computedStyle.size())return;const e=y(this.computedStyle.getColor("--reveal-color"))||"0, 0, 0",t=y(this.computedStyle.getColor("--reveal-border-color"))||e,a=y(this.computedStyle.getColor("--reveal-hover-light-color"))||e,i=y(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"),p="line"===this.getPropFromMultipleSource("leftBorder","--reveal-border-left-type")?1:0,m="line"===this.getPropFromMultipleSource("rightBorder","--reveal-border-right-type")?1:0,h="line"===this.getPropFromMultipleSource("topBorder","--reveal-border-top-type")?1:0,g="line"===this.getPropFromMultipleSource("bottomBorder","--reveal-border-bottom-type")?1:0,R="true"===this.computedStyle.get("--reveal-hover-light"),f=a,S=this.computedStyle.getNumber("--reveal-hover-light-fill-radius"),b=this.computedStyle.get("--reveal-hover-light-fill-radius-mode")||"relative",x="true"===this.computedStyle.get("--reveal-diffuse"),F="true"===this.computedStyle.get("--reveal-press-animation"),P=this.computedStyle.get("--reveal-press-animation-radius-mode"),C=i,w=this.computedStyle.getNumber("--reveal-press-animation-speed"),D=this.computedStyle.getNumber("--reveal-release-animation-accelerate-rate"),B=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"),T=this.getNumberPropFromMultipleSource("bottomLeftBorderRadius","--reveal-border-decoration-bottom-left-radius"),L=this.getNumberPropFromMultipleSource("bottomRightBorderRadius","--reveal-border-decoration-bottom-right-radius"),I=0<=r?r:B,E=0<=A?A:B,M=0<=T?T:B,V=0<=L?L:B,N=this.cachedStyle;if(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!==f,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!==p,this.shapeDirty=this.shapeDirty||N.withRightBorderFactor!==m,this.shapeDirty=this.shapeDirty||N.withTopBorderFactor!==h,this.shapeDirty=this.shapeDirty||N.withBottomBorderFactor!==g,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!==F,this.animationDirty=this.animationDirty||N.pressAnimationFillMode!==P,this.animationDirty=this.animationDirty||N.pressAnimationColor!==C,this.animationDirty=this.animationDirty||N.pressAnimationSpeed!==w,this.animationDirty=this.animationDirty||N.releaseAnimationAccelerateRate!==D,N.color=o,N.opacity=n,N.borderColor=l,N.borderFillRadius=d,N.borderDecorationType=s,N.borderWidth=u,N.withLeftBorderFactor=p,N.withRightBorderFactor=m,N.withTopBorderFactor=h,N.withBottomBorderFactor=g,N.hoverLight=R,N.hoverLightColor=f,N.hoverLightFillRadius=S,N.hoverLightFillMode=b,N.diffuse=x,N.pressAnimation=F,N.pressAnimationFillMode=P,N.pressAnimationColor=C,N.pressAnimationSpeed=w,N.releaseAnimationAccelerateRate=D,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.syncSizeToRevealRadius=(e,t)=>{const{trueFillRadius:r}=this.cachedStyle,a=r[1]||1,i=2*a*this.pxRatio*t;(e.width!==i||e.height!==i)&&(e.width=i,e.height=i)},this._store=e,this.container=o,this.element=t,this.computedStyle=i(o)}}const R=()=>document.createElement("canvas");class f extends g{constructor(e,i,o){super(e,i,o),this.updateCachedReveal=()=>{if(!this.fillDirty)return;const e=this.cachedStyle,t=e.trueFillRadius[1]*this.pxRatio,r=this.cachedImg.cachedReveal,{borderReveal:a,fillReveal:o}=this.cachedImg.cachedCanvas,{borderReveal:n,fillReveal:l}=this.cachedImg.cachedCtx;this._store.updateMaxRadius(e.trueFillRadius[1]*e.borderFillRadius);for(let d=0;2>d;d++){// 0 means border, 1 means hover light.
|
|
10
10
|
//-----------------------------------------
|
|
11
11
|
// Last rendered style.
|
|
12
12
|
const i=0==d?r.borderReveal:r.fillReveal,s=0==d?e.borderColor:e.hoverLightColor,c=0==d?e.borderFillRadius:e.hoverLightFillRadius,u=s===i.color&&e.opacity===i.opacity&&c===i.radiusFactor;if(u)continue;const p=0==d?a:o,m=0==d?n:l;if(this.syncSizeToRevealRadius(p,c),!m)continue;m.clearRect(0,0,p.width,p.height);const h=0==d?e.opacity:.5*e.opacity,y=t*c,v=m.createRadialGradient(y,y,0,y,y,y);v.addColorStop(0,`rgba(${s}, ${h})`),v.addColorStop(1,`rgba(${s}, 0.0)`);const g=2*t*c;m.fillStyle=v,m.clearRect(0,0,g,g),m.fillRect(0,0,g,g),i.radius=y,i.radiusFactor=c,i.color=s,i.opacity=e.opacity,this.ctx&&(i.pattern=this.ctx.createPattern(p,"no-repeat"))}this.fillDirty=!1},this.updateCachedBitmap=()=>{this.ctx&&this.updateCachedReveal()},this.updateAnimateGrd=(e,t)=>{const{pressAnimationColor:r,opacity:a}=this.cachedStyle,i=a*(.2-e),o=a*(.1-.07*e),n=.1+.8*e,l=0>i?0:i,d=0>o?0:o;let s=0;s=1<n?1:n,s=0>n?0:n,t.addColorStop(0,`rgba(${r},${l})`),t.addColorStop(.55*s,`rgba(${r},${d})`),t.addColorStop(s,`rgba(${r}, 0)`)},this.drawShape=e=>{if(!this.ctx)return;const t=this.cachedBoundingRect,r=t.width*this.pxRatio,a=t.height*this.pxRatio,i=this.cachedStyle,o=i.borderWidth*this.pxRatio,n=i.topLeftBorderDecorationRadius*this.pxRatio,l=i.topRightBorderDecorationRadius*this.pxRatio,d=i.bottomLeftBorderDecorationRadius*this.pxRatio,s=i.bottomRightBorderDecorationRadius*this.pxRatio,c=i.withLeftBorderFactor,u=i.withRightBorderFactor,p=i.withTopBorderFactor,m=i.withBottomBorderFactor,h=o<n?n-o:0,y=o<l?l-o:0,v=o<d?d-o:0,g=o<s?s-o:0;switch(this.ctx.beginPath(),i.borderDecorationType){// Oh... Fuck... It's painful...
|
|
13
13
|
case"round":this.ctx.moveTo(n,0),this.ctx.arcTo(r,0,r,a,l),this.ctx.lineTo(r,a-s),this.ctx.arcTo(r,a,s,a,s),this.ctx.lineTo(d,a),this.ctx.arcTo(0,a,0,s,d),this.ctx.lineTo(0,n),this.ctx.arcTo(0,0,n,0,n),e&&(this.ctx.moveTo(h,o*p),this.ctx.arcTo(o*c,o*p,o*c,h+o*p,h),this.ctx.lineTo(o*c,a-o*m-v),this.ctx.arcTo(o*c,a-o*m,o*c+v,a-o*m,v),this.ctx.lineTo(r-o*u-g,a-o*m),this.ctx.arcTo(r-o*u,a-o*m,r-o*u,a-o*m-g,g),this.ctx.lineTo(r-o*u,o*p+y),this.ctx.arcTo(r-o*u,o*p,r-o*u-y,o*p,y),this.ctx.lineTo(h,o*p));break;case"bevel":this.ctx.moveTo(n,0),this.ctx.lineTo(r-l,0),this.ctx.lineTo(r,l),this.ctx.lineTo(r,a-s),this.ctx.lineTo(r-s,a),this.ctx.lineTo(d,a),this.ctx.lineTo(0,a-d),this.ctx.lineTo(0,n),this.ctx.lineTo(n,0),this.ctx.lineTo(r-l,0),e&&(this.ctx.moveTo(h+o*c,o*p),this.ctx.lineTo(o*c,h+o*p),this.ctx.lineTo(o*c,a-v-o*m),this.ctx.lineTo(o*c+v,a-o*m),this.ctx.lineTo(r-g-o*u,a-o*m),this.ctx.lineTo(r-o*u,a-g-o*m),this.ctx.lineTo(r-o*u,y+o*p),this.ctx.lineTo(r-y-o*u,o*p),this.ctx.lineTo(h+o*u,o*p));break;case"miter":this.ctx.moveTo(0,0),this.ctx.lineTo(r,0),this.ctx.lineTo(r,a),this.ctx.lineTo(0,a),this.ctx.lineTo(0,0),e&&(this.ctx.moveTo(o*c,o*p),this.ctx.lineTo(o*c,a-o*m),this.ctx.lineTo(r-o*u,a-o*m),this.ctx.lineTo(r-o*u,o*p),this.ctx.lineTo(o*c,o*p));}this.ctx.closePath()},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect;(e.width!==t.width||e.height!==t.height)&&(e.width=t.width*this.pxRatio,e.height=t.height*this.pxRatio,e.style.width=`${t.width}px`,e.style.height=`${t.height}px`)},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=e=>{const i=this._store,o=i.animationQueue.includes(this),n=i.clientX===i.paintedClientX&&i.clientY===i.paintedClientY;if(n&&!e&&!o)return!1;if(!this.ctx)return!1;if(this.dirty=!0,this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.paintedWidth,this.paintedHeight),!i.mouseInBoundary&&!o)return!1;if(!this.cachedImg.cachedReveal)return!1;this.syncSizeToElement(this.element),this.cacheBoundingRect();const l=this.cachedBoundingRect,d=i.clientX-l.left,s=i.clientY-l.top;if(t(d)||t(s))return!1;const u=this.cachedStyle;this.getTrueFillRadius(u.trueFillRadius),this.paintedWidth=l.width*this.pxRatio,this.paintedHeight=l.height*this.pxRatio;const c=u.trueFillRadius[1],p=d-c<l.width,m=s-c<l.height,h=0<d+c&&p&&0<s+c&&m;if(!h&&!o)return!1;if(this.cacheCanvasPaintingStyle(),this.updateCachedBitmap(),i.mouseInBoundary){const e=0<d&&0<s&&d<l.width&&s<l.height,t=this.cachedImg.cachedReveal.fillReveal.pattern;if(u.hoverLight&&e&&t){// draw fill.
|
|
14
14
|
const e=this.cachedImg.cachedReveal.fillReveal.radius,r=a(d*this.pxRatio-e),i=a(s*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!1),this.ctx.translate(r,i),this.ctx.fillStyle=t,this.ctx.fill()}const r=u.diffuse&&h||e,i=this.cachedImg.cachedReveal.borderReveal.pattern;if(0!==u.borderWidth&&i&&r){// Draw border.
|
|
15
15
|
const e=this.cachedImg.cachedReveal.borderReveal.radius,t=a(d*this.pxRatio-e),r=a(s*this.pxRatio-e);this.ctx.setTransform(1,0,0,1,0,0),this.drawShape(!0),this.ctx.translate(t,r),this.ctx.fillStyle=i,this.ctx.fill()}}if(u.pressAnimation&&this.mousePressed&&this.mouseDownAnimateLogicFrame){this.ctx.setTransform(1,0,0,1,0,0);const e="constrained"===u.pressAnimationFillMode?u.trueFillRadius[1]:r(l.width,l.height),t=this.mouseReleased&&this.mouseUpClientX&&this.mouseUpClientY?this.ctx.createRadialGradient((this.mouseUpClientX-l.left)*this.pxRatio,(this.mouseUpClientY-l.top)*this.pxRatio,0,(this.mouseUpClientX-l.left)*this.pxRatio,(this.mouseUpClientY-l.top)*this.pxRatio,e*this.pxRatio):this.ctx.createRadialGradient(d*this.pxRatio,s*this.pxRatio,0,d*this.pxRatio,s*this.pxRatio,e*this.pxRatio);// prettier-ignore
|
|
16
|
-
this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,t),this.drawShape(!1),this.ctx.fillStyle=t,this.ctx.fill()}return!0},this.ctx=i.getContext("2d");const n={borderReveal:
|
|
17
|
-
switch(
|
|
18
|
-
case"round":e&&(
|
|
16
|
+
this.updateAnimateGrd(this.mouseDownAnimateLogicFrame,t),this.drawShape(!1),this.ctx.fillStyle=t,this.ctx.fill()}return!0},this.ctx=i.getContext("2d");const n={borderReveal:R(),fillReveal:R()},l={borderReveal:n.borderReveal.getContext("2d"),fillReveal:n.fillReveal.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}},cachedCanvas:n,cachedCtx:l}}}class S extends g{constructor(e,a,i){super(e,a,i),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,a=-1===e.trueFillRadius[0];r.borderReveal.r.baseVal.value=a?e.borderFillRadius:e.borderFillRadius*e.trueFillRadius[1],r.fillReveal.r.baseVal.value=a?e.hoverLightFillRadius:e.hoverLightFillRadius*e.trueFillRadius[0],this.fillDirty=!1},this.updateAnimateGrd=(e,t,r,a)=>{const{opacity:i}=this.cachedStyle,o=i*(.2-e),n=i*(.1-.07*e),l=.1+.8*e,d=0>o?0:o,s=0>n?0:n;let c=0;c=1<l?1:l,c=0>l?0:l;const u=this.cachedImg.cachedGradientStop;u.rippleReveal[0].style.stopOpacity=d.toString(),u.rippleReveal[1].style.stopOpacity=s.toString(),u.rippleReveal[2].style.stopOpacity="0",u.rippleReveal[0].offset.baseVal=0,u.rippleReveal[1].offset.baseVal=.55*c,u.rippleReveal[2].offset.baseVal=c;const p=this.cachedImg.cachedGradient;p.rippleReveal.r.baseVal.value=a,p.rippleReveal.cx.baseVal.value=t,p.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,a=r.width,i=r.height,o=this.cachedStyle,n=o.borderWidth,l=o.topLeftBorderDecorationRadius,s=o.topRightBorderDecorationRadius,c=o.bottomLeftBorderDecorationRadius,u=o.bottomRightBorderDecorationRadius,p=o.withLeftBorderFactor,m=o.withRightBorderFactor,h=o.withTopBorderFactor,y=o.withBottomBorderFactor,v=o.withLeftBorderFactor?0:1,g=o.withRightBorderFactor?0:1,R=o.withTopBorderFactor?0:1,f=o.withBottomBorderFactor?0:1,S=!o.withTopBorderFactor&&!o.withLeftBorderFactor,b=!o.withTopBorderFactor&&!o.withRightBorderFactor,x=!o.withBottomBorderFactor&&!o.withLeftBorderFactor,F=!o.withBottomBorderFactor&&!o.withRightBorderFactor,P=n<l?l-n:0,C=n<s?s-n:0,w=n<c?c-n:0,D=n<u?u-n:0;let B="";// Step 1: Starting point
|
|
17
|
+
switch(B+=e?`M ${l}, 0 `:`M ${n}, ${P+n} `,o.borderDecorationType){// Oh... Fuck again...
|
|
18
|
+
case"round":e&&(B+=`
|
|
19
19
|
h ${a-l-s}
|
|
20
20
|
a ${s}, ${s} 0 0 1 ${s}, ${s}
|
|
21
21
|
v ${i-s-u}
|
|
@@ -25,18 +25,18 @@ case"round":e&&(D+=`
|
|
|
25
25
|
v ${-i+s+u}
|
|
26
26
|
a ${l}, ${l} 0 0 1 ${l}, ${-l}
|
|
27
27
|
Z
|
|
28
|
-
`),
|
|
28
|
+
`),B+=`
|
|
29
29
|
M ${n*p}, ${P+n}
|
|
30
30
|
v ${i-P-w-2*n+f*n}
|
|
31
31
|
a ${w}, ${w} 0 0 0 ${w}, ${w}
|
|
32
|
-
h ${a-w-
|
|
33
|
-
a ${
|
|
34
|
-
v ${-i+C+
|
|
32
|
+
h ${a-w-D-2*n+v*n+g*n}
|
|
33
|
+
a ${D}, ${D} 0 0 0 ${D}, ${-D}
|
|
34
|
+
v ${-i+C+D+2*n-R*n-f*n}
|
|
35
35
|
a ${C}, ${C} 0 0 0 ${-C}, ${-C}
|
|
36
|
-
h ${-a+w+
|
|
36
|
+
h ${-a+w+D+2*n-v*n-g*n}
|
|
37
37
|
a ${P}, ${P} 0 0 0 ${-P}, ${P}
|
|
38
38
|
L ${n*p}, ${P+n}
|
|
39
|
-
`;break;case"bevel":e&&(
|
|
39
|
+
`;break;case"bevel":e&&(B+=`
|
|
40
40
|
h ${a-l-s}
|
|
41
41
|
l ${s} ${s}
|
|
42
42
|
v ${i-s-u}
|
|
@@ -46,7 +46,7 @@ case"round":e&&(D+=`
|
|
|
46
46
|
v ${-i+s+u}
|
|
47
47
|
l ${l} ${-l}
|
|
48
48
|
Z
|
|
49
|
-
`),
|
|
49
|
+
`),B+=`
|
|
50
50
|
M ${n}, ${P+n}
|
|
51
51
|
${v?`h ${-n}`:""}
|
|
52
52
|
v ${i-P-w-2*n}
|
|
@@ -55,10 +55,10 @@ case"round":e&&(D+=`
|
|
|
55
55
|
l ${w} ${w}
|
|
56
56
|
${x?`l ${n} 0`:""}
|
|
57
57
|
${f?`v ${n}`:""}
|
|
58
|
-
h ${a-w-
|
|
58
|
+
h ${a-w-D-2*n}
|
|
59
59
|
${f?`v ${-n}`:""}
|
|
60
60
|
${F?`l ${n} 0`:""}
|
|
61
|
-
l ${
|
|
61
|
+
l ${D} ${-D}
|
|
62
62
|
${F?`l ${-n} 0`:""}
|
|
63
63
|
${g?`h ${n}`:""}
|
|
64
64
|
v ${-i+P+w+2*n}
|
|
@@ -67,26 +67,26 @@ case"round":e&&(D+=`
|
|
|
67
67
|
l ${-C} ${-C}
|
|
68
68
|
${b?`l 0 ${n}`:""}
|
|
69
69
|
${R?`v ${-n}`:""}
|
|
70
|
-
h ${-a+w+
|
|
70
|
+
h ${-a+w+D+2*n}
|
|
71
71
|
${R?`v ${n}`:""}
|
|
72
72
|
${S?`l 0 ${-n}`:""}
|
|
73
73
|
l ${-P} ${P}
|
|
74
74
|
${S?`l 0 ${n}`:""}
|
|
75
|
-
`;break;case"miter":e&&(
|
|
75
|
+
`;break;case"miter":e&&(B+=`
|
|
76
76
|
M 0, 0
|
|
77
77
|
h ${a}
|
|
78
78
|
v ${i}
|
|
79
79
|
h ${0-a}
|
|
80
80
|
v ${0-i}
|
|
81
81
|
Z
|
|
82
|
-
`),
|
|
82
|
+
`),B+=`
|
|
83
83
|
M ${n*p}, ${n*h}
|
|
84
84
|
v ${i-h*n-y*n}
|
|
85
85
|
h ${a-p*n-m*n}
|
|
86
86
|
v ${-i+h*n+y*n}
|
|
87
87
|
h ${-a+p*n+m*n}
|
|
88
88
|
`;}// Step 3: Close the path
|
|
89
|
-
|
|
89
|
+
B+="miter"===o.borderDecorationType?e?`L ${n}, ${n}`:`z`:e?`L ${P+n}, ${P+n}`:`z`,t.setAttribute("d",B)},this.syncSizeToElement=e=>{const t=this.cachedBoundingRect,r=e.width.baseVal,a=e.height.baseVal;(r.value!==t.width||a.value!==t.height)&&(r.value=t.width,a.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 a=this._store,i=a.animationQueue.includes(this),o=a.clientX===a.paintedClientX&&a.clientY===a.paintedClientY;if(o&&!e&&!i)return!1;if(!a.mouseInBoundary&&!i)return this.internalClear(),!1;this.syncSizeToElement(this.element),this.cacheBoundingRect();const n=this.cachedBoundingRect,l=a.clientX-n.left,d=a.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 p=l-u<n.width,m=d-u<n.height,h=0<l+u&&p&&0<d+u&&m;if(!h&&!i)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),a.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&&h||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:a.querySelector("#borderPath"),fillReveal:a.querySelector("#fillPath"),rippleReveal:a.querySelector("#ripplePath")},n={borderReveal:a.querySelector("#borderGrad"),fillReveal:a.querySelector("#fillGrad"),rippleReveal:a.querySelector("#rippleGrad")},l={borderReveal:[a.querySelector("#borderCenter"),a.querySelector("#borderOut")],fillReveal:[a.querySelector("#fillCenter"),a.querySelector("#fillOut")],rippleReveal:[a.querySelector("#rippleCenter"),a.querySelector("#rippleMiddle"),a.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
90
|
// The cursor position of painted reveal effect.
|
|
91
91
|
/**
|
|
92
92
|
* Repaint all canvas while user's pointer has entered the boundary.
|
|
@@ -114,27 +114,27 @@ D+="miter"===o.borderDecorationType?e?`L ${n}, ${n}`:`z`:e?`L ${P+n}, ${P+n}`:`z
|
|
|
114
114
|
* @param config The config to be cleaned up.
|
|
115
115
|
* @param skipPaint Skip painting.
|
|
116
116
|
* @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 a=Object.prototype.toString.call(e);if("[object HTMLCanvasElement]"===a)r=new
|
|
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 a=Object.prototype.toString.call(e);if("[object HTMLCanvasElement]"===a)r=new f(this,e,t);else if("[object SVGSVGElement]"===a)r=new S(this,e,t);else throw new TypeError(`Unknown element type, got: ${a}, 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 a=!0;e<r.left-this.maxRadius&&(a=!1),e>r.right+this.maxRadius&&(a=!1),t<r.top-this.maxRadius&&(a=!1),t>r.bottom+this.maxRadius&&(a=!1),this.mouseInBoundary=a},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.mouseInBoundary=!1,this.requestPaintAll(!0)},this.paintAll=(e,t)=>{if(t||this.mouseInBoundary||0!==this.animationQueue.length){// Animation duration checkup
|
|
118
118
|
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
119
|
const a=e-r.mouseDownAnimateStartFrame;r.mouseDownAnimateCurrentFrame=a;const i=r.cachedStyle.pressAnimationSpeed,o=r.cachedStyle.releaseAnimationAccelerateRate;// We assume that Ripple is a one-way linear process from
|
|
120
120
|
// no diffusion to fully diffused,
|
|
121
121
|
// and Logic Frame represents the progress of the animation
|
|
122
122
|
// in this process.
|
|
123
123
|
let n=a;r.mouseReleased&&r.mouseDownAnimateReleasedFrame&&(n+=(a-r.mouseDownAnimateReleasedFrame)*o),r.mouseDownAnimateLogicFrame=n/i,1<r.mouseDownAnimateLogicFrame&&(r.cleanedUpForAnimation=!0)}// Paint the canvas one by one
|
|
124
|
-
for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.currentFrameId=e,a.cleanedUpForAnimation)this.cleanUpAnimationUnit(a,!1),a.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(a);this.mouseInBoundary||e?a.paint(t):a.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 a=this.animationQueue[r];this.cleanUpAnimationUnit(a,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 a=this.animationQueue.indexOf(e);-1<a&&this.animationQueue.splice(a,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
|
|
124
|
+
for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.currentFrameId=e,a.cleanedUpForAnimation)this.cleanUpAnimationUnit(a,!1),a.cleanedUpForAnimation=!1;else{const e=-1===this.animationQueue.indexOf(a);this.mouseInBoundary||e?a.paint(t):a.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 a=this.animationQueue[r];this.cleanUpAnimationUnit(a,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 a=this.animationQueue.indexOf(e);-1<a&&this.animationQueue.splice(a,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 x{constructor(){if(this._currentHashId=0,this._storage=[],this.requestedTraverseBoundaries=!1,this.cachedMouseX=-1,this.cachedMouseY=-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.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"===p.borderDetectionMode){if("undefined"==typeof Window)return;window.addEventListener("pointermove",this.handlePointerMove),window.addEventListener("pointerup",e=>{"mouse"!==e.pointerType&&this.handlePointerLeave()}),window.addEventListener("pointerleave",e=>{"mouse"===e.pointerType&&this.handlePointerLeave()})}}}const F="undefined"==typeof globalThis.Window?class{constructor(){this.root={innerHTML:"",querySelector:()=>null},this.attachShadow=()=>null}}:HTMLElement;class P extends F{constructor(){super(...arguments),this.stateManager=new x}}P.ElementName="ax-reveal-provider";class C extends F{constructor(){/**
|
|
125
125
|
* Update the position of your pointer.
|
|
126
126
|
* @param ev Pointer event from the listener.
|
|
127
|
-
*/super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=e=>{this.waitForStorage(t=>{t.clientX=e.clientX,t.clientY=e.clientY})},this.handlePointerEnter=()=>this.waitForStorage(e=>e.onPointerEnterBoundary()),this.handlePointerLeave=()=>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.handlePointerDown=e=>this.waitForStorage(t=>{this.
|
|
127
|
+
*/super(),this.root=this.attachShadow({mode:"open"}),this.updatePointerPosition=e=>{this.waitForStorage(t=>{t.clientX=e.clientX,t.clientY=e.clientY})},this.handlePointerEnter=()=>this.waitForStorage(e=>e.onPointerEnterBoundary()),this.handlePointerLeave=()=>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.handlePointerDown=e=>this.waitForStorage(t=>{this.updatePointerPosition(e),t.initializeAnimation()}),this.root.innerHTML=`
|
|
128
128
|
<div>
|
|
129
129
|
<slot></slot>
|
|
130
|
-
</div>`}get storage(){return this._storage}set storage(e){const t=this._storage;t&&(this.dispatchEvent(new CustomEvent(
|
|
130
|
+
</div>`}get storage(){return this._storage}set storage(e){const t=this._storage;t&&(this.dispatchEvent(new CustomEvent(C.removeStorageEvent,{detail:t})),C.stateManager.removeBoundary(t)),e&&(this._storage=e,this.dispatchEvent(new CustomEvent(C.attachStorageEvent,{detail:e}))),t&&e&&this.dispatchEvent(new CustomEvent(C.replaceStorageEvent,{detail:{old:t,new:e}}))}waitForStorage(e){this.storage===void 0?this.addEventListener(C.attachStorageEvent,()=>e(this.storage),{once:!0}):e(this.storage)}appendStorage(e=!1){if(!e&&this.storage)return;const t=o(this,P.ElementName),r=t?t.stateManager:C.stateManager;this.storage=r.newBoundary(this)}connectedCallback(){this.appendStorage(!0),"strictEdge"===p.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)}disconnectedCallback(){this.storage=void 0}}C.ElementName="ax-reveal-bound",C.removeStorageEvent="removeStorage",C.attachStorageEvent="attachStorage",C.replaceStorageEvent="replaceStorage",C.stateManager=new x;class w extends F{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.handlePointerDown=e=>{this.setPointerCapture(e.pointerId)},this.root.innerHTML=`
|
|
131
131
|
<div class="ax-reveal">
|
|
132
132
|
<canvas></canvas>
|
|
133
133
|
<div class="content"><slot></slot></div>
|
|
134
134
|
</div>
|
|
135
135
|
<style>
|
|
136
136
|
.ax-reveal { display: content; }
|
|
137
|
-
.ax-reveal * { user-drag: none; touch-action: none; user-select: none; }
|
|
137
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
138
138
|
.content { position: relative; }
|
|
139
139
|
canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
140
140
|
:host { display: inline-block; position: relative; }
|
|
@@ -144,9 +144,9 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
144
144
|
:host([inline-flex]) { display: inline-flex; }
|
|
145
145
|
:host([grid]) { display: grid; }
|
|
146
146
|
:host([inline-grid]) { display: inline-grid; }
|
|
147
|
-
::slotted(*) { user-drag: none; touch-action: none; }
|
|
147
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
148
148
|
::slotted(button) { outline:none; }
|
|
149
|
-
</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=this.
|
|
149
|
+
</style>`,this.canvas=this.root.querySelector("canvas")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.canvas))}connectedCallback(){if(this.boundary=o(this,C.ElementName),!this.boundary)throw new SyntaxError("You must use "+C.ElementName+" as the boundary of reveal highlight!");this.boundary.waitForStorage(e=>setTimeout(()=>e.addReveal(this.canvas,this),0)),this.addEventListener("pointerdown",this.handlePointerDown)}}w.ElementName="ax-reveal";class D extends F{constructor(){super(),this.root=this.attachShadow({mode:"open"}),this.handlePointerDown=e=>{this.setPointerCapture(e.pointerId)},this.root.innerHTML=`
|
|
150
150
|
<div class="ax-reveal">
|
|
151
151
|
<svg>
|
|
152
152
|
<defs>
|
|
@@ -171,8 +171,8 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
171
171
|
<div class="content"><slot></slot></div>
|
|
172
172
|
</div>
|
|
173
173
|
<style>
|
|
174
|
-
.ax-reveal { display:
|
|
175
|
-
.ax-reveal * { user-drag: none; touch-action: none; user-select: none; }
|
|
174
|
+
.ax-reveal { display: contents; }
|
|
175
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
176
176
|
.content { position: relative; }
|
|
177
177
|
svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
178
178
|
:host { display: inline-block; position: relative; }
|
|
@@ -182,6 +182,6 @@ for(let r=0;r<this.canvasList.length;r++){const a=this.canvasList[r];if(a.curren
|
|
|
182
182
|
:host([inline-flex]) { display: inline-flex; }
|
|
183
183
|
:host([grid]) { display: grid; }
|
|
184
184
|
:host([inline-grid]) { display: inline-grid; }
|
|
185
|
-
::slotted(*) { user-drag: none; touch-action: none; }
|
|
185
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
186
186
|
::slotted(button) { outline:none; }
|
|
187
|
-
</style>`,this.svg=this.root.querySelector("svg")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.svg))}connectedCallback(){if(this.boundary=this.
|
|
187
|
+
</style>`,this.svg=this.root.querySelector("svg")}adoptedCallback(){this.disconnectedCallback(),this.connectedCallback()}disconnectedCallback(){this.boundary&&this.boundary.waitForStorage(e=>e.removeReveal(this.svg))}connectedCallback(){if(this.boundary=o(this,C.ElementName),!this.boundary)throw new SyntaxError("You must use "+C.ElementName+" as the boundary of reveal highlight!");this.boundary.waitForStorage(e=>setTimeout(()=>e.addReveal(this.svg,this),0)),this.addEventListener("pointerdown",this.handlePointerDown)}}D.ElementName="ax-reveal-ng";const B="magic";let A=!1;e.register=d,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/es/CustomElements.d.ts
CHANGED
|
@@ -40,6 +40,7 @@ export declare class AxReveal extends PatchedHTMLElement {
|
|
|
40
40
|
private canvas;
|
|
41
41
|
private boundary;
|
|
42
42
|
adoptedCallback(): void;
|
|
43
|
+
handlePointerDown: (ev: PointerEvent) => void;
|
|
43
44
|
disconnectedCallback(): void;
|
|
44
45
|
connectedCallback(): void;
|
|
45
46
|
constructor();
|
|
@@ -50,6 +51,7 @@ export declare class AxRevealNg extends PatchedHTMLElement {
|
|
|
50
51
|
private svg;
|
|
51
52
|
private boundary;
|
|
52
53
|
adoptedCallback(): void;
|
|
54
|
+
handlePointerDown: (ev: PointerEvent) => void;
|
|
53
55
|
disconnectedCallback(): void;
|
|
54
56
|
connectedCallback(): void;
|
|
55
57
|
constructor();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomElements.d.ts","sourceRoot":"","sources":["../src/CustomElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAwB9D,QAAA,MAAM,kBAAkB;;;CAC+F,CAAC;AAExH,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,wBAAwB;IACnD,QAAQ,CAAC,YAAY,qBAA4B;CACpD;AAED,qBAAa,gBAAiB,SAAQ,kBAAkB;IACpD,MAAM,CAAC,QAAQ,CAAC,WAAW,qBAAqB;IAEhD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,kBAAkB,mBAAmB;IACrD,MAAM,CAAC,QAAQ,CAAC,mBAAmB,oBAAoB;IAEvD,OAAO,CAAC,IAAI,CAAuC;IAEnD,MAAM,CAAC,QAAQ,CAAC,YAAY,qBAA4B;IAExD,OAAO,CAAC,QAAQ,CAAmC;IAEnD,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,OAAO,QAoBlB;IAEM,cAAc,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI;IAQ/D,OAAO,CAAC,aAAa;IAWrB;;;OAGG;IACH,qBAAqB,OAAQ,YAAY,UAKvC;IAEF,kBAAkB,aAA4E;IAC9F,kBAAkB,aAA4E;IAC9F,iBAAiB,OATY,YAAY,UASM;IAC/C,eAAe,OAAQ,YAAY,UAMjC;IACF,iBAAiB,OAAQ,YAAY,UAI9B;IAEP,iBAAiB;IAWjB,oBAAoB;;CAWvB;AAED,qBAAa,QAAS,SAAQ,kBAAkB;IAC5C,MAAM,CAAC,QAAQ,CAAC,WAAW,eAAe;IAC1C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,iBAAiB,OAAQ,YAAY,UAEnC;IAEF,oBAAoB;IAIpB,iBAAiB;;CAmCpB;AAED,qBAAa,UAAW,SAAQ,kBAAkB;IAC9C,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAkB;IAC7C,OAAO,CAAC,IAAI,CAAuC;IACnD,OAAO,CAAC,GAAG,CAAa;IACxB,OAAO,CAAC,QAAQ,CAAoB;IAEpC,eAAe;IAKf,iBAAiB,OAAQ,YAAY,UAEnC;IAEF,oBAAoB;IAIpB,iBAAiB;;CAsDpB"}
|
package/es/CustomElements.js
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
import { RevealStateManager } from './RevealStateManager.js';
|
|
2
2
|
import { config } from './config.js';
|
|
3
|
+
function closest(dom, selector) {
|
|
4
|
+
var _a;
|
|
5
|
+
const r = dom.closest(selector);
|
|
6
|
+
if (r)
|
|
7
|
+
return r;
|
|
8
|
+
const host = (_a = findParentShadowRoot(dom)) === null || _a === void 0 ? void 0 : _a.host;
|
|
9
|
+
if (!host)
|
|
10
|
+
return null;
|
|
11
|
+
return closest(host, selector);
|
|
12
|
+
}
|
|
13
|
+
function findParentShadowRoot(x) {
|
|
14
|
+
if (!x)
|
|
15
|
+
return null;
|
|
16
|
+
if (x.parentNode && x.parentNode.nodeType === document.DOCUMENT_FRAGMENT_NODE)
|
|
17
|
+
return x.parentNode;
|
|
18
|
+
return findParentShadowRoot(x.parentNode);
|
|
19
|
+
}
|
|
3
20
|
class ServerSideHTMLElement {
|
|
4
21
|
constructor() {
|
|
5
22
|
this.root = {
|
|
@@ -9,9 +26,7 @@ class ServerSideHTMLElement {
|
|
|
9
26
|
this.attachShadow = () => null;
|
|
10
27
|
}
|
|
11
28
|
}
|
|
12
|
-
const PatchedHTMLElement = typeof globalThis.Window === 'undefined'
|
|
13
|
-
? ServerSideHTMLElement
|
|
14
|
-
: HTMLElement;
|
|
29
|
+
const PatchedHTMLElement = typeof globalThis.Window === 'undefined' ? ServerSideHTMLElement : HTMLElement;
|
|
15
30
|
export class AxRevealProvider extends PatchedHTMLElement {
|
|
16
31
|
constructor() {
|
|
17
32
|
super(...arguments);
|
|
@@ -28,30 +43,29 @@ export class AxRevealBoundary extends PatchedHTMLElement {
|
|
|
28
43
|
* @param ev Pointer event from the listener.
|
|
29
44
|
*/
|
|
30
45
|
this.updatePointerPosition = (ev) => {
|
|
31
|
-
this.waitForStorage(storage => {
|
|
46
|
+
this.waitForStorage((storage) => {
|
|
32
47
|
storage.clientX = ev.clientX;
|
|
33
48
|
storage.clientY = ev.clientY;
|
|
34
49
|
});
|
|
35
50
|
};
|
|
36
|
-
this.handlePointerEnter = () => this.waitForStorage(storage => storage.onPointerEnterBoundary());
|
|
37
|
-
this.handlePointerLeave = () => this.waitForStorage(storage => storage.onPointerLeaveBoundary());
|
|
51
|
+
this.handlePointerEnter = () => this.waitForStorage((storage) => storage.onPointerEnterBoundary());
|
|
52
|
+
this.handlePointerLeave = () => this.waitForStorage((storage) => storage.onPointerLeaveBoundary());
|
|
38
53
|
this.handlePointerMove = this.updatePointerPosition;
|
|
39
54
|
this.handlePointerUp = (ev) => {
|
|
40
55
|
if (ev.pointerType === 'mouse') {
|
|
41
|
-
this.waitForStorage(storage => storage.switchAnimation());
|
|
56
|
+
this.waitForStorage((storage) => storage.switchAnimation());
|
|
42
57
|
}
|
|
43
58
|
else {
|
|
44
|
-
this.waitForStorage(storage => storage.clearAll(false));
|
|
59
|
+
this.waitForStorage((storage) => storage.clearAll(false));
|
|
45
60
|
}
|
|
46
61
|
};
|
|
47
|
-
this.handlePointerDown = (ev) => this.waitForStorage(storage => {
|
|
48
|
-
this.setPointerCapture(ev.pointerId);
|
|
62
|
+
this.handlePointerDown = (ev) => this.waitForStorage((storage) => {
|
|
49
63
|
this.updatePointerPosition(ev);
|
|
50
64
|
storage.initializeAnimation();
|
|
51
65
|
});
|
|
52
|
-
this.root.innerHTML = `
|
|
53
|
-
<div>
|
|
54
|
-
<slot></slot>
|
|
66
|
+
this.root.innerHTML = `
|
|
67
|
+
<div>
|
|
68
|
+
<slot></slot>
|
|
55
69
|
</div>`;
|
|
56
70
|
}
|
|
57
71
|
get storage() {
|
|
@@ -85,7 +99,7 @@ export class AxRevealBoundary extends PatchedHTMLElement {
|
|
|
85
99
|
if (!force && this.storage) {
|
|
86
100
|
return;
|
|
87
101
|
}
|
|
88
|
-
const parent =
|
|
102
|
+
const parent = closest(this, AxRevealProvider.ElementName);
|
|
89
103
|
const stateManager = parent ? parent.stateManager : AxRevealBoundary.stateManager;
|
|
90
104
|
this.storage = stateManager.newBoundary(this);
|
|
91
105
|
}
|
|
@@ -112,25 +126,28 @@ export class AxReveal extends PatchedHTMLElement {
|
|
|
112
126
|
constructor() {
|
|
113
127
|
super();
|
|
114
128
|
this.root = this.attachShadow({ mode: 'open' });
|
|
115
|
-
this.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
:host
|
|
129
|
-
:host([
|
|
130
|
-
:host([
|
|
131
|
-
:host([
|
|
132
|
-
|
|
133
|
-
|
|
129
|
+
this.handlePointerDown = (ev) => {
|
|
130
|
+
this.setPointerCapture(ev.pointerId);
|
|
131
|
+
};
|
|
132
|
+
this.root.innerHTML = `
|
|
133
|
+
<div class="ax-reveal">
|
|
134
|
+
<canvas></canvas>
|
|
135
|
+
<div class="content"><slot></slot></div>
|
|
136
|
+
</div>
|
|
137
|
+
<style>
|
|
138
|
+
.ax-reveal { display: content; }
|
|
139
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
140
|
+
.content { position: relative; }
|
|
141
|
+
canvas { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
142
|
+
:host { display: inline-block; position: relative; }
|
|
143
|
+
:host([block]) { display: block; }
|
|
144
|
+
:host([inline-block]) { display: inline-block; }
|
|
145
|
+
:host([flex]) { display: flex; }
|
|
146
|
+
:host([inline-flex]) { display: inline-flex; }
|
|
147
|
+
:host([grid]) { display: grid; }
|
|
148
|
+
:host([inline-grid]) { display: inline-grid; }
|
|
149
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
150
|
+
::slotted(button) { outline:none; }
|
|
134
151
|
</style>`;
|
|
135
152
|
this.canvas = this.root.querySelector('canvas');
|
|
136
153
|
}
|
|
@@ -139,13 +156,14 @@ export class AxReveal extends PatchedHTMLElement {
|
|
|
139
156
|
this.connectedCallback();
|
|
140
157
|
}
|
|
141
158
|
disconnectedCallback() {
|
|
142
|
-
this.boundary && this.boundary.waitForStorage(storage => storage.removeReveal(this.canvas));
|
|
159
|
+
this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.canvas));
|
|
143
160
|
}
|
|
144
161
|
connectedCallback() {
|
|
145
|
-
this.boundary =
|
|
162
|
+
this.boundary = closest(this, AxRevealBoundary.ElementName);
|
|
146
163
|
if (!this.boundary)
|
|
147
164
|
throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!');
|
|
148
|
-
this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.canvas, this), 0));
|
|
165
|
+
this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.canvas, this), 0));
|
|
166
|
+
this.addEventListener('pointerdown', this.handlePointerDown);
|
|
149
167
|
}
|
|
150
168
|
}
|
|
151
169
|
AxReveal.ElementName = 'ax-reveal';
|
|
@@ -153,44 +171,47 @@ export class AxRevealNg extends PatchedHTMLElement {
|
|
|
153
171
|
constructor() {
|
|
154
172
|
super();
|
|
155
173
|
this.root = this.attachShadow({ mode: 'open' });
|
|
156
|
-
this.
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
<stop id="
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
<stop id="
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
:host
|
|
189
|
-
:host([
|
|
190
|
-
:host([
|
|
191
|
-
:host([
|
|
192
|
-
|
|
193
|
-
|
|
174
|
+
this.handlePointerDown = (ev) => {
|
|
175
|
+
this.setPointerCapture(ev.pointerId);
|
|
176
|
+
};
|
|
177
|
+
this.root.innerHTML = `
|
|
178
|
+
<div class="ax-reveal">
|
|
179
|
+
<svg>
|
|
180
|
+
<defs>
|
|
181
|
+
<radialGradient id="borderGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
182
|
+
<stop id="borderCenter" offset="0%" />
|
|
183
|
+
<stop id="borderOut" offset="100%" />
|
|
184
|
+
</radialGradient>
|
|
185
|
+
<radialGradient id="fillGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
186
|
+
<stop id="fillCenter" offset="0%" />
|
|
187
|
+
<stop id="fillOut" offset="100%" />
|
|
188
|
+
</radialGradient>
|
|
189
|
+
<radialGradient id="rippleGrad" gradientUnits="userSpaceOnUse" r="10">
|
|
190
|
+
<stop id="rippleCenter" offset="0%" />
|
|
191
|
+
<stop id="rippleMiddle" offset="0%" />
|
|
192
|
+
<stop id="rippleOut" offset="0%" />
|
|
193
|
+
</radialGradient>
|
|
194
|
+
</defs>
|
|
195
|
+
<path id="borderPath" fill="url(#borderGrad)" />
|
|
196
|
+
<path id="fillPath" fill="url(#fillGrad)" />
|
|
197
|
+
<path id="ripplePath" fill="url(#rippleGrad)" />
|
|
198
|
+
</svg>
|
|
199
|
+
<div class="content"><slot></slot></div>
|
|
200
|
+
</div>
|
|
201
|
+
<style>
|
|
202
|
+
.ax-reveal { display: contents; }
|
|
203
|
+
.ax-reveal * { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
204
|
+
.content { position: relative; }
|
|
205
|
+
svg { top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; position: absolute; }
|
|
206
|
+
:host { display: inline-block; position: relative; }
|
|
207
|
+
:host([block]) { display: block; }
|
|
208
|
+
:host([inline-block]) { display: inline-block; }
|
|
209
|
+
:host([flex]) { display: flex; }
|
|
210
|
+
:host([inline-flex]) { display: inline-flex; }
|
|
211
|
+
:host([grid]) { display: grid; }
|
|
212
|
+
:host([inline-grid]) { display: inline-grid; }
|
|
213
|
+
::slotted(*) { user-drag: none; -webkit-user-drag: none; touch-action: none; user-select: none; }
|
|
214
|
+
::slotted(button) { outline:none; }
|
|
194
215
|
</style>`;
|
|
195
216
|
this.svg = this.root.querySelector('svg');
|
|
196
217
|
}
|
|
@@ -199,13 +220,14 @@ export class AxRevealNg extends PatchedHTMLElement {
|
|
|
199
220
|
this.connectedCallback();
|
|
200
221
|
}
|
|
201
222
|
disconnectedCallback() {
|
|
202
|
-
this.boundary && this.boundary.waitForStorage(storage => storage.removeReveal(this.svg));
|
|
223
|
+
this.boundary && this.boundary.waitForStorage((storage) => storage.removeReveal(this.svg));
|
|
203
224
|
}
|
|
204
225
|
connectedCallback() {
|
|
205
|
-
this.boundary =
|
|
226
|
+
this.boundary = closest(this, AxRevealBoundary.ElementName);
|
|
206
227
|
if (!this.boundary)
|
|
207
228
|
throw new SyntaxError('You must use ' + AxRevealBoundary.ElementName + ' as the boundary of reveal highlight!');
|
|
208
|
-
this.boundary.waitForStorage(storage => setTimeout(() => storage.addReveal(this.svg, this), 0));
|
|
229
|
+
this.boundary.waitForStorage((storage) => setTimeout(() => storage.addReveal(this.svg, this), 0));
|
|
230
|
+
this.addEventListener('pointerdown', this.handlePointerDown);
|
|
209
231
|
}
|
|
210
232
|
}
|
|
211
233
|
AxRevealNg.ElementName = 'ax-reveal-ng';
|