oops-ui 0.0.0

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 ADDED
@@ -0,0 +1,13 @@
1
+ Copyright (c) <2024> <letmiseesee>
2
+
3
+ Permission to use, copy, modify, and/or distribute this software for any
4
+ purpose with or without fee is hereby granted, provided that the above
5
+ copyright notice and this permission notice appear in all copies.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
8
+ WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
9
+ MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
10
+ ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
11
+ WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
12
+ ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
13
+ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
package/ReadMe.md ADDED
@@ -0,0 +1,17 @@
1
+ # oops ui
2
+
3
+ oops! A rudimentary React UI
4
+
5
+ ## Other languages
6
+
7
+ [English](https://github.com/lmssee/npm-oops-ui/blob/main/README.md) [中文](https://github.com/lmssee/npm-oops-ui/blob/main/自述文件.md)
8
+
9
+ ## install
10
+
11
+ ```sh
12
+ npm install --save oops-ui
13
+ ```
14
+
15
+ ## use
16
+
17
+ see [oops ui](https://lmssee.com/oops-ui)
@@ -0,0 +1 @@
1
+ (()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{BackgroundRipple:()=>ye});const r=require("react");var n=e.n(r);const i=require("a-element-inline-style");function o(e){var t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function a(e,t,r,n){function i(e,t){var n=r.createShader(e);if(r.shaderSource(n,t),r.compileShader(n),!r.getShaderParameter(n,r.COMPILE_STATUS))throw new Error("compile error: "+r.getShaderInfoLog(n));return n}var o,a={id:r.createProgram(),uniforms:{},locations:{}};if(r.attachShader(a.id,i(r.VERTEX_SHADER,e)),r.attachShader(a.id,i(r.FRAGMENT_SHADER,t)),r.linkProgram(a.id),!r.getProgramParameter(a.id,r.LINK_STATUS))throw new Error("link error: "+r.getProgramInfoLog(a.id));r.useProgram(a.id),r.enableVertexAttribArray(0);for(var s=e+t,l=/uniform (\w+) (\w+)/g;null!==(o=l.exec(s));){var u=o[2];a.locations[u]=r.getUniformLocation(a.id,u)}return a}function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=this.gl;r.activeTexture(r.TEXTURE0+(t||0)),r.bindTexture(r.TEXTURE_2D,e)}function l(e){return e.endsWith("%")}function u(){var e=this,t=function(){return e.initState=!1,null};if(!this.gl)return t();var r=this.gl,n=Object.fromEntries(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].reduce((function(e,t){var n=r.getExtension(t);return n&&e.push([t,n]),e}),[]));if(!n.OES_texture_float)return t();var i=[];function o(e,t,r){var i="OES_texture_"+e,o=i+"_linear",a=o in n;return{type:t,linearSupport:a,arrayType:r,extensions:a?[i,o]:[i]}}i.push(o("float",r.FLOAT,Float32Array)),n.OES_texture_half_float&&i.push(o("half_float",n.OES_texture_half_float.HALF_FLOAT_OES,null));var a=r.createTexture(),s=r.createFramebuffer();r.bindFramebuffer(r.FRAMEBUFFER,s),r.bindTexture(r.TEXTURE_2D,a),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE);for(var l=null,u=0;u<i.length;u++)if(r.texImage2D(r.TEXTURE_2D,0,r.RGBA,32,32,0,r.RGBA,i[u].type,null),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,a,0),r.checkFramebufferStatus(r.FRAMEBUFFER)===r.FRAMEBUFFER_COMPLETE){l=i[u];break}return l}function c(e){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c(e)}function f(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,p(n.key),n)}}function h(e,t,r){return t&&f(e.prototype,t),r&&f(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function d(e,t,r){return(t=p(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){var t=function(e){if("object"!=c(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=c(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==c(t)?t:t+""}var m="lmssee_ripper_element_style",v=h((function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),d(this,"styleElement",document.createElement("style")),d(this,"canvas",void 0),d(this,"gl",void 0),d(this,"config",void 0),d(this,"transparentPixels",function(){try{return new ImageData(32,32)}catch(e){return console.log(e&&""),document.createElement("canvas").getContext("2d").createImageData(32,32)}}()),d(this,"initState",!0),this.canvas=t;var r=t.getContext("webgl");if(null===r)return this.initState=!1,void(this.config=null);if(this.gl=r,null===document.querySelector("style#".concat(m))){var n=this.styleElement;n.id=m,n.innerHTML="\n .lmssee-ripples { \n position: relative; \n z-index: 0; \n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translate(0,0);\n }\n ";var i=document.head;i.prepend?i.prepend(n):i.insertBefore(n,i.firstChild)}this.config=Reflect.apply(u,this,[])})),g={imageUrl:"",resolution:360,dropRadius:10,perturbance:.03,interactive:!0,crossOrigin:"",playingState:!0,accelerating:3,raindropsTimeInterval:660,idleFluctuations:!0};function E(e){return E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E(e)}function y(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function b(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?y(Object(r),!0).forEach((function(t){F(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):y(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function T(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,A(n.key),n)}}function R(e,t){if(t&&("object"==E(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function w(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(w=function(){return!!e})()}function _(e){return _=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},_(e)}function x(e,t){return x=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},x(e,t)}function P(e,t,r){S(e,t),t.set(e,r)}function S(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function F(e,t,r){return(t=A(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function A(e){var t=function(e){if("object"!=E(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==E(t)?t:t+""}function O(e,t){return e.get(D(e,t))}function k(e,t,r){return e.set(D(e,t),r),r}function D(e,t,r){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:r;throw new TypeError("Private element is not present on this object")}Object.freeze(g);var U=new WeakMap,M=new WeakMap,L=new WeakMap,C=new WeakMap,I=new WeakMap,j=new WeakMap,W=new WeakMap,X=new WeakMap,B=new WeakMap,N=new WeakMap,G=new WeakMap,z=new WeakMap,H=new WeakMap,Y=new WeakMap,q=new WeakMap,K=new WeakMap,V=new WeakMap,J=new WeakMap,Q=new WeakMap,Z=new WeakMap,$=new WeakMap,ee=new WeakMap,te=new WeakMap,re=new WeakMap,ne=new WeakSet,ie=function(e){function t(e,r){var n,o,a,s;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),o=this,s=[e],a=_(a=t),function(e,t){S(e,t),t.add(e)}(n=R(o,w()?Reflect.construct(a,s||[],_(o).constructor):a.apply(o,s)),ne),F(n,"defaults",g),F(n,"interactive",n.defaults.interactive),P(n,U,n.defaults.accelerating),P(n,M,n.defaults.resolution),P(n,L,n.defaults.perturbance),F(n,"dropRadius",void 0),F(n,"crossOrigin",""),F(n,"imageUrl",void 0),F(n,"idleFluctuations",!0),P(n,C,void 0),P(n,I,void 0),P(n,j,[]),P(n,W,[]),P(n,X,0),P(n,B,1),P(n,N,void 0),P(n,G,!1),P(n,z,!1),P(n,H,!1),P(n,Y,0),P(n,q,""),F(n,"imageSource",""),F(n,"renderProgram",void 0),P(n,K,void 0),P(n,V,void 0),P(n,J,void 0),P(n,Q,void 0),P(n,Z,void 0),P(n,$,void 0),P(n,ee,Date.now()),P(n,te,n.defaults.raindropsTimeInterval),P(n,re,{mousemove:function(e){return console.log(e)},mousedown:function(e){return console.log(e)},touchmove:function(e){return console.log(e)},touchstart:function(e){return console.log(e)}}),Object.defineProperties(n,{defaults:{value:n.defaults,writable:!1,enumerable:!1,configurable:!1}}),r&&"boolean"!=typeof r.interactive&&delete r.interactive;var l=b(b({},n.defaults),r);if(n.interactive=l.interactive,n.resolution=l.resolution,n.perturbance=l.perturbance,n.dropRadius=l.dropRadius,n.crossOrigin=l.crossOrigin,n.imageUrl=l.imageUrl,n.idleFluctuations=l.idleFluctuations,!1===n.initState||null===e.parentElement||null===n.config||null===n.gl)return n.initState=!1,R(n);var u=n.gl,c=1/O(M,n);k(I,n,new Float32Array([c,c])),k(C,n,e.parentElement),function(e){var t=e.parentElement;e.width=t.clientWidth,e.height=t.clientHeight,(0,i.setStyle)(e,{position:"absolute",left:0,top:0,right:0,bottom:0,zIndex:-1})}(e),n.config.extensions.forEach((function(e){return u.getExtension(e)})),n.updateSize=n.updateSize.bind(n),window.addEventListener("resize",n.updateSize);for(var f=n.config.arrayType,h=f?new f(O(M,n)*O(M,n)*4):null,d=n.config,p=0;p<2;p++){var m=u.createTexture(),v=u.createFramebuffer();u.bindFramebuffer(u.FRAMEBUFFER,v),u.bindTexture(u.TEXTURE_2D,m),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_MIN_FILTER,d.linearSupport?u.LINEAR:u.NEAREST),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_MAG_FILTER,d.linearSupport?u.LINEAR:u.NEAREST),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_S,u.CLAMP_TO_EDGE),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_T,u.CLAMP_TO_EDGE),u.texImage2D(u.TEXTURE_2D,0,u.RGBA,O(M,n),O(M,n),0,u.RGBA,d.type,h),u.framebufferTexture2D(u.FRAMEBUFFER,u.COLOR_ATTACHMENT0,u.TEXTURE_2D,m,0),O(j,n).push(m),O(W,n).push(v)}return k(N,n,u.createBuffer()),u.bindBuffer(u.ARRAY_BUFFER,O(N,n)),u.bufferData(u.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),u.STATIC_DRAW),D(ne,n,de).call(n),D(ne,n,pe).call(n),D(ne,n,me).call(n),D(ne,n,ae).call(n),u.clearColor(0,0,0,0),u.blendFunc(u.SRC_ALPHA,u.ONE_MINUS_SRC_ALPHA),k(G,n,!0),k(z,n,!0),k(H,n,!0),D(ne,n,oe).call(n),k(Y,n,requestAnimationFrame((function(){return D(ne,n,se).call(n)}))),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&x(e,t)}(t,e),r=t,n=[{key:"accelerating",set:function(e){e>100||e<2||k(U,this,e)}},{key:"resolution",set:function(e){e<100||e>550||k(M,this,e)}},{key:"perturbance",set:function(e){e<1e-4||e>1||k(L,this,e)}},{key:"playingState",set:function(e){k(z,this,!1!==e)}},{key:"initialized",get:function(){return O(H,this)}},{key:"raindropsTimeInterval",set:function(e){e<10||e>12e3||k(te,this,e)}},{key:"raindropsFall",value:function(){var e=window.getComputedStyle(O(C,this)),t=function(e){return function(e=1,t=0){let r=Math.ceil(Number(t)),n=Math.floor(Number(e));return r>n&&([n,r]=[r,n]),Math.floor(Math.random()*(n-r+1)+r)}(parseInt(e))},r=e.width,n=e.height;this.drop(t(r),t(n),1.5*this.dropRadius,.14)}},{key:"drop",value:function(e,t,r,n){var i=this.gl,o=O(C,this).offsetWidth,a=O(C,this).offsetHeight,l=Math.max(o,a);r/=l;var u=new Float32Array([(2*e-o)/l,(a-2*t)/l]);i.viewport(0,0,O(M,this),O(M,this)),i.bindFramebuffer(i.FRAMEBUFFER,O(W,this)[O(X,this)]),Reflect.apply(s,this,[O(j,this)[O(B,this)]]),i.useProgram(O(J,this).id),i.uniform2fv(O(J,this).locations.center,u),i.uniform1f(O(J,this).locations.radius,r),i.uniform1f(O(J,this).locations.strength,n),D(ne,this,le).call(this),D(ne,this,fe).call(this)}},{key:"updateSize",value:function(){var e=O(C,this).offsetWidth,t=O(C,this).offsetHeight;e==this.canvas.width&&t==this.canvas.height||(this.canvas.width=e,this.canvas.height=t)}},{key:"destroy",value:function(){var e=this,t=O(C,this);t&&(Object.keys(O(re,this)).forEach((function(r){return t.removeEventListener&&t.removeEventListener(r,O(re,e)[r])})),t.removeAttribute&&t.removeAttribute("data-ripples")),this.styleElement&&this.styleElement.remove(),this.gl=null,this.gl&&(this.gl=null),window.removeEventListener("resize",this.updateSize),D(ne,this,ge).call(this),O(Y,this)&&window.cancelAnimationFrame(O(Y,this))}},{key:"show",value:function(){k(G,this,!0),this.canvas.style.visibility="visible",D(ne,this,ve).call(this)}},{key:"hide",value:function(){k(G,this,!1),this.canvas.style.visibility="hidden",D(ne,this,ge).call(this)}},{key:"pause",value:function(){k(z,this,!1)}},{key:"play",value:function(){k(z,this,!0)}},{key:"changePlayingState",value:function(){k(z,this,!O(z,this))}},{key:"set",value:function(e,t){"imageUrl"===e?(this.imageUrl=t,D(ne,this,ae).call(this)):this[e]=t}}],n&&T(r.prototype,n),Object.defineProperty(r,"prototype",{writable:!1}),r;var r,n}(v);function oe(){var e=this,t=function(t){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];O(G,e)&&O(z,e)&&e.interactive&&(k(ee,e,Date.now()),D(ne,e,Ee).call(e,t,e.dropRadius*(r?1.5:1),r?.14:.01))};O(re,this).mousemove=function(r){for(var n=O(U,e);n--;)t(r)},O(re,this).touchmove=O(re,this).touchstart=function(e){for(var r=e.touches,n=0;n<r.length;n++)t(r[n])},O(re,this).mousedown=function(e){return t(e,!0)},Object.keys(O(re,this)).forEach((function(t){return O(C,e)&&O(C,e).addEventListener(t,O(re,e)[t])}))}function ae(){var e=this,t=this.gl,r=this.imageUrl||o(O(q,this))||o(window.getComputedStyle(O(C,this)).backgroundImage);if(r!==this.imageSource)if(this.imageSource=r,this.imageSource){var n=new Image;n.onload=function(){var r=function(e){return!(e&e-1)},i=r(n.width)&&r(n.height)?t.REPEAT:t.CLAMP_TO_EDGE;t.bindTexture(t.TEXTURE_2D,O(K,e)),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,i),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,i),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,n),k(Q,e,n.width),k(Z,e,n.height),D(ne,e,ve).call(e)},n.onerror=function(){return D(ne,e,me).call(e)},n.crossOrigin=this.imageSource.match(/^data:/)?null:this.crossOrigin,n.src=this.imageSource}else D(ne,this,me).call(this)}function se(){var e=this;O(G,this)&&(D(ne,this,he).call(this),O(z,this)&&D(ne,this,ce).call(this),D(ne,this,ue).call(this),k(Y,this,requestAnimationFrame((function(){return D(ne,e,se).call(e)}))))}function le(){var e=this.gl;e.bindBuffer(e.ARRAY_BUFFER,O(N,this)),e.vertexAttribPointer(0,2,e.FLOAT,!1,0,0),e.drawArrays(e.TRIANGLE_FAN,0,4)}function ue(){var e=this.gl;e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.enable(e.BLEND),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.useProgram(this.renderProgram.id),Reflect.apply(s,this,[O(K,this),0]),Reflect.apply(s,this,[O(j,this)[0],1]),e.uniform1f(this.renderProgram.locations.perturbance,O(L,this)),e.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),e.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),e.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),e.uniform1i(this.renderProgram.locations.samplerBackground,0),e.uniform1i(this.renderProgram.locations.samplerRipples,1),D(ne,this,le).call(this),e.disable(e.BLEND)}function ce(){if(this.idleFluctuations){var e=Date.now();e-O(ee,this)>O(te,this)&&(k(ee,this,e),this.raindropsFall())}var t=this.gl;t.viewport(0,0,O(M,this),O(M,this)),t.bindFramebuffer(t.FRAMEBUFFER,O(W,this)[O(X,this)]),Reflect.apply(s,this,[O(j,this)[O(B,this)]]),t.useProgram(O(V,this).id),D(ne,this,le).call(this),D(ne,this,fe).call(this)}function fe(){k(X,this,1-O(X,this)),k(B,this,1-O(B,this))}function he(){var e,t,r,n=window.getComputedStyle(O(C,this)).backgroundSize,i=window.getComputedStyle(O(C,this)).backgroundAttachment,o=(e=window.getComputedStyle(O(C,this)).backgroundPosition,/\s+/.test(e)?e.replace(/center/,"50%").replace(/top|left/,"0%").replace(/bottom/,"100%").replace(/\s+/," ").split(" "):l(e)?[e,"50%"]:{center:["50%","50%"],top:["50%","0%"],bottom:["50%","100%"],left:["0%","50%"],right:["100%","50%"]}[e]),a="fixed"==i?{left:window.scrollX,top:window.scrollY,width:window.innerWidth,height:window.innerHeight}:{left:O(C,this).getBoundingClientRect().left,top:O(C,this).getBoundingClientRect().top,width:O(C,this).scrollWidth,height:O(C,this).scrollHeight};if("cover"==n){var s=Math.max(a.width/O(Q,this),a.height/O(Z,this));t=O(Q,this)*s,r=O(Z,this)*s}else if("contain"==n){var u=Math.min(a.width/O(Q,this),a.height/O(Z,this));t=O(Q,this)*u,r=O(Z,this)*u}else{var c=n.split(" ");t=c[0]||"",r=c[1]||t,l(t)?t=a.width*parseFloat(t)/100:"auto"!==t&&(t=parseFloat(t)),l(r)?r=a.height*parseFloat(r)/100:"auto"!==r&&(r=parseFloat(r)),"auto"==t&&"auto"==r?(t=O(Q,this),r=O(Z,this)):("auto"==t&&(t=O(Q,this)*(Number(r)/O(Z,this))),"auto"==r&&(r=O(Z,this)*(Number(t)/O(Q,this))))}var f=o[0],h=o[1];f=l(f)?(a.left+(a.width-Number(t))*parseFloat(f)/100).toString():(a.left+parseFloat(f)).toString(),h=l(h)?(a.top+(a.height-Number(r))*parseFloat(h)/100).toString():(a.top+parseFloat(h)).toString(),this.renderProgram.uniforms.topLeft=new Float32Array([(O(C,this).offsetLeft-Number(f))/Number(t),(O(C,this).offsetTop-Number(h))/Number(r)]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+O(C,this).clientWidth/Number(t),this.renderProgram.uniforms.topLeft[1]+O(C,this).clientHeight/Number(r)]);var d=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/d,this.canvas.height/d])}function de(){var e=this.gl,t="\n attribute vec2 vertex;\n varying vec2 coord;\n void main() {\n coord = vertex * 0.5 + 0.5;\n gl_Position = vec4(vertex, 0.0, 1.0);\n }";k(J,this,a(t,"precision highp float;\n\n const float PI = 3.141592653589793;\n uniform sampler2D texture;\n uniform vec2 center;\n uniform float radius;\n uniform float strength;\n\n varying vec2 coord;\n\n void main() {\n vec4 info = texture2D(texture, coord);\n\n float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\n drop = 0.5 - cos(drop * PI) * 0.5;\n info.r += drop * strength;\n gl_FragColor = info;\n }",e)),k(V,this,a(t,"precision highp float;\n\n uniform sampler2D texture;\n uniform vec2 delta;\n\n varying vec2 coord;\n\n void main() {\n vec4 info = texture2D(texture, coord);\n \n vec2 dx = vec2(delta.x, 0.0);\n vec2 dy = vec2(0.0, delta.y);\n \n float average = (\n texture2D(texture, coord - dx).r +\n texture2D(texture, coord - dy).r +\n texture2D(texture, coord + dx).r +\n texture2D(texture, coord + dy).r\n ) * 0.25;\n \n info.g += (average - info.r) * 2.0;\n info.g *= 0.995;\n info.r += info.g;\n \n gl_FragColor = info;\n }\n ",this.gl)),e.uniform2fv(O(V,this).locations.delta,O(I,this)),this.renderProgram=a("\n precision highp float;\n\n attribute vec2 vertex;\n uniform vec2 topLeft;\n uniform vec2 bottomRight;\n uniform vec2 containerRatio;\n varying vec2 ripplesCoord;\n varying vec2 backgroundCoord;\n void main() {\n backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);\n backgroundCoord.y = 1.0 - backgroundCoord.y;\n ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;\n gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);\n }\n ","\n precision highp float;\n\n uniform sampler2D samplerBackground;\n uniform sampler2D samplerRipples;\n uniform vec2 delta;\n\n uniform float perturbance;\n varying vec2 ripplesCoord;\n varying vec2 backgroundCoord;\n\n void main() {\n float height = texture2D(samplerRipples, ripplesCoord).r;\n float heightX = texture2D(samplerRipples, vec2(ripplesCoord.x + delta.x, ripplesCoord.y)).r;\n float heightY = texture2D(samplerRipples, vec2(ripplesCoord.x, ripplesCoord.y + delta.y)).r;\n vec3 dx = vec3(delta.x, heightX - height, 0.0);\n vec3 dy = vec3(0.0, heightY - height, delta.y);\n vec2 offset = -normalize(cross(dy, dx)).xz;\n float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);\n gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;\n }",e),e.uniform2fv(this.renderProgram.locations.delta,O(I,this))}function pe(){var e=this.gl;k(K,this,e.createTexture()),e.bindTexture(e.TEXTURE_2D,O(K,this)),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,1),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR)}function me(){var e=this.gl;e.bindTexture(e.TEXTURE_2D,O(K,this)),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,this.transparentPixels)}function ve(){var e=O(C,this).style.backgroundImage;"none"!=e&&(k($,this,e),k(q,this,window.getComputedStyle(O(C,this)).backgroundImage),O(C,this).style.backgroundImage="none")}function ge(){O(C,this).style.backgroundImage=O($,this)||""}function Ee(e,t,r){var n=window.getComputedStyle(O(C,this)),i=parseInt(n.borderLeftWidth)||0,o=parseInt(n.borderTopWidth)||0;this.drop(e.pageX-O(C,this).offsetLeft-i,e.pageY-O(C,this).offsetTop-o,t,r)}function ye(e){var t=(0,r.useRef)(null),i=function(e,t){var n=(0,r.useRef)(null);return(0,r.useEffect)((function(){return n.current=new ie(e.current,t.option),function(){return n.current.destroy()}}),[]),n}(t,e);return function(e,t){(0,r.useEffect)((function(){if(t.option&&e.current){var r=t.option;Object.keys(e.current.defaults).forEach((function(t){void 0!==r[t]&&e.current.set(t,r[t])}))}}),[t.option])}(i,e),n().createElement("div",{style:e.style,className:"lmssee-ripples"},e.children,n().createElement("canvas",{ref:t}))}module.exports["oops-ui"]=t})();
@@ -0,0 +1 @@
1
+ import*as e from"react";import*as t from"a-element-inline-style";var r={d:(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},n={};r.d(n,{z:()=>Re});const i=(o={default:()=>e.default,useEffect:()=>e.useEffect,useRef:()=>e.useRef},a={},r.d(a,o),a);var o,a;const s=(e=>{var t={};return r.d(t,e),t})({setStyle:()=>t.setStyle});function l(e){var t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function u(e,t,r,n){function i(e,t){var n=r.createShader(e);if(r.shaderSource(n,t),r.compileShader(n),!r.getShaderParameter(n,r.COMPILE_STATUS))throw new Error("compile error: "+r.getShaderInfoLog(n));return n}var o,a={id:r.createProgram(),uniforms:{},locations:{}};if(r.attachShader(a.id,i(r.VERTEX_SHADER,e)),r.attachShader(a.id,i(r.FRAGMENT_SHADER,t)),r.linkProgram(a.id),!r.getProgramParameter(a.id,r.LINK_STATUS))throw new Error("link error: "+r.getProgramInfoLog(a.id));r.useProgram(a.id),r.enableVertexAttribArray(0);for(var s=e+t,l=/uniform (\w+) (\w+)/g;null!==(o=l.exec(s));){var u=o[2];a.locations[u]=r.getUniformLocation(a.id,u)}return a}function c(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,r=this.gl;r.activeTexture(r.TEXTURE0+(t||0)),r.bindTexture(r.TEXTURE_2D,e)}function f(e){return e.endsWith("%")}function h(){var e=this,t=function(){return e.initState=!1,null};if(!this.gl)return t();var r=this.gl,n=Object.fromEntries(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].reduce((function(e,t){var n=r.getExtension(t);return n&&e.push([t,n]),e}),[]));if(!n.OES_texture_float)return t();var i=[];function o(e,t,r){var i="OES_texture_"+e,o=i+"_linear",a=o in n;return{type:t,linearSupport:a,arrayType:r,extensions:a?[i,o]:[i]}}i.push(o("float",r.FLOAT,Float32Array)),n.OES_texture_half_float&&i.push(o("half_float",n.OES_texture_half_float.HALF_FLOAT_OES,null));var a=r.createTexture(),s=r.createFramebuffer();r.bindFramebuffer(r.FRAMEBUFFER,s),r.bindTexture(r.TEXTURE_2D,a),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.NEAREST),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE);for(var l=null,u=0;u<i.length;u++)if(r.texImage2D(r.TEXTURE_2D,0,r.RGBA,32,32,0,r.RGBA,i[u].type,null),r.framebufferTexture2D(r.FRAMEBUFFER,r.COLOR_ATTACHMENT0,r.TEXTURE_2D,a,0),r.checkFramebufferStatus(r.FRAMEBUFFER)===r.FRAMEBUFFER_COMPLETE){l=i[u];break}return l}function d(e){return d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d(e)}function p(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,g(n.key),n)}}function m(e,t,r){return t&&p(e.prototype,t),r&&p(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e}function v(e,t,r){return(t=g(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function g(e){var t=function(e){if("object"!=d(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=d(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==d(t)?t:t+""}var E="lmssee_ripper_element_style",y=m((function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),v(this,"styleElement",document.createElement("style")),v(this,"canvas",void 0),v(this,"gl",void 0),v(this,"config",void 0),v(this,"transparentPixels",function(){try{return new ImageData(32,32)}catch(e){return console.log(e&&""),document.createElement("canvas").getContext("2d").createImageData(32,32)}}()),v(this,"initState",!0),this.canvas=t;var r=t.getContext("webgl");if(null===r)return this.initState=!1,void(this.config=null);if(this.gl=r,null===document.querySelector("style#".concat(E))){var n=this.styleElement;n.id=E,n.innerHTML="\n .lmssee-ripples { \n position: relative; \n z-index: 0; \n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: translate(0,0);\n }\n ";var i=document.head;i.prepend?i.prepend(n):i.insertBefore(n,i.firstChild)}this.config=Reflect.apply(h,this,[])})),b={imageUrl:"",resolution:360,dropRadius:10,perturbance:.03,interactive:!0,crossOrigin:"",playingState:!0,accelerating:3,raindropsTimeInterval:660,idleFluctuations:!0};function T(e){return T="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},T(e)}function R(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?R(Object(r),!0).forEach((function(t){k(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):R(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function _(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,D(n.key),n)}}function x(e,t){if(t&&("object"==T(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function P(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(P=function(){return!!e})()}function S(e){return S=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},S(e)}function F(e,t){return F=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},F(e,t)}function A(e,t,r){O(e,t),t.set(e,r)}function O(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function k(e,t,r){return(t=D(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function D(e){var t=function(e){if("object"!=T(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,"string");if("object"!=T(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==T(t)?t:t+""}function U(e,t){return e.get(L(e,t))}function M(e,t,r){return e.set(L(e,t),r),r}function L(e,t,r){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:r;throw new TypeError("Private element is not present on this object")}Object.freeze(b);var C=new WeakMap,I=new WeakMap,W=new WeakMap,X=new WeakMap,B=new WeakMap,j=new WeakMap,N=new WeakMap,G=new WeakMap,z=new WeakMap,H=new WeakMap,Y=new WeakMap,q=new WeakMap,K=new WeakMap,V=new WeakMap,J=new WeakMap,Q=new WeakMap,Z=new WeakMap,$=new WeakMap,ee=new WeakMap,te=new WeakMap,re=new WeakMap,ne=new WeakMap,ie=new WeakMap,oe=new WeakMap,ae=new WeakSet,se=function(){function e(t,r){var n,i,o,a;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),i=this,a=[t],o=S(o=e),function(e,t){O(e,t),t.add(e)}(n=x(i,P()?Reflect.construct(o,a||[],S(i).constructor):o.apply(i,a)),ae),k(n,"defaults",b),k(n,"interactive",n.defaults.interactive),A(n,C,n.defaults.accelerating),A(n,I,n.defaults.resolution),A(n,W,n.defaults.perturbance),k(n,"dropRadius",void 0),k(n,"crossOrigin",""),k(n,"imageUrl",void 0),k(n,"idleFluctuations",!0),A(n,X,void 0),A(n,B,void 0),A(n,j,[]),A(n,N,[]),A(n,G,0),A(n,z,1),A(n,H,void 0),A(n,Y,!1),A(n,q,!1),A(n,K,!1),A(n,V,0),A(n,J,""),k(n,"imageSource",""),k(n,"renderProgram",void 0),A(n,Q,void 0),A(n,Z,void 0),A(n,$,void 0),A(n,ee,void 0),A(n,te,void 0),A(n,re,void 0),A(n,ne,Date.now()),A(n,ie,n.defaults.raindropsTimeInterval),A(n,oe,{mousemove:function(e){return console.log(e)},mousedown:function(e){return console.log(e)},touchmove:function(e){return console.log(e)},touchstart:function(e){return console.log(e)}}),Object.defineProperties(n,{defaults:{value:n.defaults,writable:!1,enumerable:!1,configurable:!1}}),r&&"boolean"!=typeof r.interactive&&delete r.interactive;var l=w(w({},n.defaults),r);if(n.interactive=l.interactive,n.resolution=l.resolution,n.perturbance=l.perturbance,n.dropRadius=l.dropRadius,n.crossOrigin=l.crossOrigin,n.imageUrl=l.imageUrl,n.idleFluctuations=l.idleFluctuations,!1===n.initState||null===t.parentElement||null===n.config||null===n.gl)return n.initState=!1,x(n);var u=n.gl,c=1/U(I,n);M(B,n,new Float32Array([c,c])),M(X,n,t.parentElement),function(e){var t=e.parentElement;e.width=t.clientWidth,e.height=t.clientHeight,(0,s.setStyle)(e,{position:"absolute",left:0,top:0,right:0,bottom:0,zIndex:-1})}(t),n.config.extensions.forEach((function(e){return u.getExtension(e)})),n.updateSize=n.updateSize.bind(n),window.addEventListener("resize",n.updateSize);for(var f=n.config.arrayType,h=f?new f(U(I,n)*U(I,n)*4):null,d=n.config,p=0;p<2;p++){var m=u.createTexture(),v=u.createFramebuffer();u.bindFramebuffer(u.FRAMEBUFFER,v),u.bindTexture(u.TEXTURE_2D,m),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_MIN_FILTER,d.linearSupport?u.LINEAR:u.NEAREST),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_MAG_FILTER,d.linearSupport?u.LINEAR:u.NEAREST),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_S,u.CLAMP_TO_EDGE),u.texParameteri(u.TEXTURE_2D,u.TEXTURE_WRAP_T,u.CLAMP_TO_EDGE),u.texImage2D(u.TEXTURE_2D,0,u.RGBA,U(I,n),U(I,n),0,u.RGBA,d.type,h),u.framebufferTexture2D(u.FRAMEBUFFER,u.COLOR_ATTACHMENT0,u.TEXTURE_2D,m,0),U(j,n).push(m),U(N,n).push(v)}return M(H,n,u.createBuffer()),u.bindBuffer(u.ARRAY_BUFFER,U(H,n)),u.bufferData(u.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),u.STATIC_DRAW),L(ae,n,ve).call(n),L(ae,n,ge).call(n),L(ae,n,Ee).call(n),L(ae,n,ue).call(n),u.clearColor(0,0,0,0),u.blendFunc(u.SRC_ALPHA,u.ONE_MINUS_SRC_ALPHA),M(Y,n,!0),M(q,n,!0),M(K,n,!0),L(ae,n,le).call(n),M(V,n,requestAnimationFrame((function(){return L(ae,n,ce).call(n)}))),n}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&F(e,t)}(e,y),t=e,r=[{key:"accelerating",set:function(e){e>100||e<2||M(C,this,e)}},{key:"resolution",set:function(e){e<100||e>550||M(I,this,e)}},{key:"perturbance",set:function(e){e<1e-4||e>1||M(W,this,e)}},{key:"playingState",set:function(e){M(q,this,!1!==e)}},{key:"initialized",get:function(){return U(K,this)}},{key:"raindropsTimeInterval",set:function(e){e<10||e>12e3||M(ie,this,e)}},{key:"raindropsFall",value:function(){var e=window.getComputedStyle(U(X,this)),t=function(e){return function(e=1,t=0){let r=Math.ceil(Number(t)),n=Math.floor(Number(e));return r>n&&([n,r]=[r,n]),Math.floor(Math.random()*(n-r+1)+r)}(parseInt(e))},r=e.width,n=e.height;this.drop(t(r),t(n),1.5*this.dropRadius,.14)}},{key:"drop",value:function(e,t,r,n){var i=this.gl,o=U(X,this).offsetWidth,a=U(X,this).offsetHeight,s=Math.max(o,a);r/=s;var l=new Float32Array([(2*e-o)/s,(a-2*t)/s]);i.viewport(0,0,U(I,this),U(I,this)),i.bindFramebuffer(i.FRAMEBUFFER,U(N,this)[U(G,this)]),Reflect.apply(c,this,[U(j,this)[U(z,this)]]),i.useProgram(U($,this).id),i.uniform2fv(U($,this).locations.center,l),i.uniform1f(U($,this).locations.radius,r),i.uniform1f(U($,this).locations.strength,n),L(ae,this,fe).call(this),L(ae,this,pe).call(this)}},{key:"updateSize",value:function(){var e=U(X,this).offsetWidth,t=U(X,this).offsetHeight;e==this.canvas.width&&t==this.canvas.height||(this.canvas.width=e,this.canvas.height=t)}},{key:"destroy",value:function(){var e=this,t=U(X,this);t&&(Object.keys(U(oe,this)).forEach((function(r){return t.removeEventListener&&t.removeEventListener(r,U(oe,e)[r])})),t.removeAttribute&&t.removeAttribute("data-ripples")),this.styleElement&&this.styleElement.remove(),this.gl=null,this.gl&&(this.gl=null),window.removeEventListener("resize",this.updateSize),L(ae,this,be).call(this),U(V,this)&&window.cancelAnimationFrame(U(V,this))}},{key:"show",value:function(){M(Y,this,!0),this.canvas.style.visibility="visible",L(ae,this,ye).call(this)}},{key:"hide",value:function(){M(Y,this,!1),this.canvas.style.visibility="hidden",L(ae,this,be).call(this)}},{key:"pause",value:function(){M(q,this,!1)}},{key:"play",value:function(){M(q,this,!0)}},{key:"changePlayingState",value:function(){M(q,this,!U(q,this))}},{key:"set",value:function(e,t){"imageUrl"===e?(this.imageUrl=t,L(ae,this,ue).call(this)):this[e]=t}}],r&&_(t.prototype,r),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,r}();function le(){var e=this,t=function(t){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];U(Y,e)&&U(q,e)&&e.interactive&&(M(ne,e,Date.now()),L(ae,e,Te).call(e,t,e.dropRadius*(r?1.5:1),r?.14:.01))};U(oe,this).mousemove=function(r){for(var n=U(C,e);n--;)t(r)},U(oe,this).touchmove=U(oe,this).touchstart=function(e){for(var r=e.touches,n=0;n<r.length;n++)t(r[n])},U(oe,this).mousedown=function(e){return t(e,!0)},Object.keys(U(oe,this)).forEach((function(t){return U(X,e)&&U(X,e).addEventListener(t,U(oe,e)[t])}))}function ue(){var e=this,t=this.gl,r=this.imageUrl||l(U(J,this))||l(window.getComputedStyle(U(X,this)).backgroundImage);if(r!==this.imageSource)if(this.imageSource=r,this.imageSource){var n=new Image;n.onload=function(){var r=function(e){return!(e&e-1)},i=r(n.width)&&r(n.height)?t.REPEAT:t.CLAMP_TO_EDGE;t.bindTexture(t.TEXTURE_2D,U(Q,e)),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,i),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,i),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,n),M(ee,e,n.width),M(te,e,n.height),L(ae,e,ye).call(e)},n.onerror=function(){return L(ae,e,Ee).call(e)},n.crossOrigin=this.imageSource.match(/^data:/)?null:this.crossOrigin,n.src=this.imageSource}else L(ae,this,Ee).call(this)}function ce(){var e=this;U(Y,this)&&(L(ae,this,me).call(this),U(q,this)&&L(ae,this,de).call(this),L(ae,this,he).call(this),M(V,this,requestAnimationFrame((function(){return L(ae,e,ce).call(e)}))))}function fe(){var e=this.gl;e.bindBuffer(e.ARRAY_BUFFER,U(H,this)),e.vertexAttribPointer(0,2,e.FLOAT,!1,0,0),e.drawArrays(e.TRIANGLE_FAN,0,4)}function he(){var e=this.gl;e.bindFramebuffer(e.FRAMEBUFFER,null),e.viewport(0,0,this.canvas.width,this.canvas.height),e.enable(e.BLEND),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.useProgram(this.renderProgram.id),Reflect.apply(c,this,[U(Q,this),0]),Reflect.apply(c,this,[U(j,this)[0],1]),e.uniform1f(this.renderProgram.locations.perturbance,U(W,this)),e.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),e.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),e.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),e.uniform1i(this.renderProgram.locations.samplerBackground,0),e.uniform1i(this.renderProgram.locations.samplerRipples,1),L(ae,this,fe).call(this),e.disable(e.BLEND)}function de(){if(this.idleFluctuations){var e=Date.now();e-U(ne,this)>U(ie,this)&&(M(ne,this,e),this.raindropsFall())}var t=this.gl;t.viewport(0,0,U(I,this),U(I,this)),t.bindFramebuffer(t.FRAMEBUFFER,U(N,this)[U(G,this)]),Reflect.apply(c,this,[U(j,this)[U(z,this)]]),t.useProgram(U(Z,this).id),L(ae,this,fe).call(this),L(ae,this,pe).call(this)}function pe(){M(G,this,1-U(G,this)),M(z,this,1-U(z,this))}function me(){var e,t,r,n=window.getComputedStyle(U(X,this)).backgroundSize,i=window.getComputedStyle(U(X,this)).backgroundAttachment,o=(e=window.getComputedStyle(U(X,this)).backgroundPosition,/\s+/.test(e)?e.replace(/center/,"50%").replace(/top|left/,"0%").replace(/bottom/,"100%").replace(/\s+/," ").split(" "):f(e)?[e,"50%"]:{center:["50%","50%"],top:["50%","0%"],bottom:["50%","100%"],left:["0%","50%"],right:["100%","50%"]}[e]),a="fixed"==i?{left:window.scrollX,top:window.scrollY,width:window.innerWidth,height:window.innerHeight}:{left:U(X,this).getBoundingClientRect().left,top:U(X,this).getBoundingClientRect().top,width:U(X,this).scrollWidth,height:U(X,this).scrollHeight};if("cover"==n){var s=Math.max(a.width/U(ee,this),a.height/U(te,this));t=U(ee,this)*s,r=U(te,this)*s}else if("contain"==n){var l=Math.min(a.width/U(ee,this),a.height/U(te,this));t=U(ee,this)*l,r=U(te,this)*l}else{var u=n.split(" ");t=u[0]||"",r=u[1]||t,f(t)?t=a.width*parseFloat(t)/100:"auto"!==t&&(t=parseFloat(t)),f(r)?r=a.height*parseFloat(r)/100:"auto"!==r&&(r=parseFloat(r)),"auto"==t&&"auto"==r?(t=U(ee,this),r=U(te,this)):("auto"==t&&(t=U(ee,this)*(Number(r)/U(te,this))),"auto"==r&&(r=U(te,this)*(Number(t)/U(ee,this))))}var c=o[0],h=o[1];c=f(c)?(a.left+(a.width-Number(t))*parseFloat(c)/100).toString():(a.left+parseFloat(c)).toString(),h=f(h)?(a.top+(a.height-Number(r))*parseFloat(h)/100).toString():(a.top+parseFloat(h)).toString(),this.renderProgram.uniforms.topLeft=new Float32Array([(U(X,this).offsetLeft-Number(c))/Number(t),(U(X,this).offsetTop-Number(h))/Number(r)]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+U(X,this).clientWidth/Number(t),this.renderProgram.uniforms.topLeft[1]+U(X,this).clientHeight/Number(r)]);var d=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/d,this.canvas.height/d])}function ve(){var e=this.gl,t="\n attribute vec2 vertex;\n varying vec2 coord;\n void main() {\n coord = vertex * 0.5 + 0.5;\n gl_Position = vec4(vertex, 0.0, 1.0);\n }";M($,this,u(t,"precision highp float;\n\n const float PI = 3.141592653589793;\n uniform sampler2D texture;\n uniform vec2 center;\n uniform float radius;\n uniform float strength;\n\n varying vec2 coord;\n\n void main() {\n vec4 info = texture2D(texture, coord);\n\n float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\n drop = 0.5 - cos(drop * PI) * 0.5;\n info.r += drop * strength;\n gl_FragColor = info;\n }",e)),M(Z,this,u(t,"precision highp float;\n\n uniform sampler2D texture;\n uniform vec2 delta;\n\n varying vec2 coord;\n\n void main() {\n vec4 info = texture2D(texture, coord);\n \n vec2 dx = vec2(delta.x, 0.0);\n vec2 dy = vec2(0.0, delta.y);\n \n float average = (\n texture2D(texture, coord - dx).r +\n texture2D(texture, coord - dy).r +\n texture2D(texture, coord + dx).r +\n texture2D(texture, coord + dy).r\n ) * 0.25;\n \n info.g += (average - info.r) * 2.0;\n info.g *= 0.995;\n info.r += info.g;\n \n gl_FragColor = info;\n }\n ",this.gl)),e.uniform2fv(U(Z,this).locations.delta,U(B,this)),this.renderProgram=u("\n precision highp float;\n\n attribute vec2 vertex;\n uniform vec2 topLeft;\n uniform vec2 bottomRight;\n uniform vec2 containerRatio;\n varying vec2 ripplesCoord;\n varying vec2 backgroundCoord;\n void main() {\n backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);\n backgroundCoord.y = 1.0 - backgroundCoord.y;\n ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;\n gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);\n }\n ","\n precision highp float;\n\n uniform sampler2D samplerBackground;\n uniform sampler2D samplerRipples;\n uniform vec2 delta;\n\n uniform float perturbance;\n varying vec2 ripplesCoord;\n varying vec2 backgroundCoord;\n\n void main() {\n float height = texture2D(samplerRipples, ripplesCoord).r;\n float heightX = texture2D(samplerRipples, vec2(ripplesCoord.x + delta.x, ripplesCoord.y)).r;\n float heightY = texture2D(samplerRipples, vec2(ripplesCoord.x, ripplesCoord.y + delta.y)).r;\n vec3 dx = vec3(delta.x, heightX - height, 0.0);\n vec3 dy = vec3(0.0, heightY - height, delta.y);\n vec2 offset = -normalize(cross(dy, dx)).xz;\n float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);\n gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;\n }",e),e.uniform2fv(this.renderProgram.locations.delta,U(B,this))}function ge(){var e=this.gl;M(Q,this,e.createTexture()),e.bindTexture(e.TEXTURE_2D,U(Q,this)),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,1),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR)}function Ee(){var e=this.gl;e.bindTexture(e.TEXTURE_2D,U(Q,this)),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,this.transparentPixels)}function ye(){var e=U(X,this).style.backgroundImage;"none"!=e&&(M(re,this,e),M(J,this,window.getComputedStyle(U(X,this)).backgroundImage),U(X,this).style.backgroundImage="none")}function be(){U(X,this).style.backgroundImage=U(re,this)||""}function Te(e,t,r){var n=window.getComputedStyle(U(X,this)),i=parseInt(n.borderLeftWidth)||0,o=parseInt(n.borderTopWidth)||0;this.drop(e.pageX-U(X,this).offsetLeft-i,e.pageY-U(X,this).offsetTop-o,t,r)}function Re(e){var t=(0,i.useRef)(null),r=function(e,t){var r=(0,i.useRef)(null);return(0,i.useEffect)((function(){return r.current=new se(e.current,t.option),function(){return r.current.destroy()}}),[]),r}(t,e);return function(e,t){(0,i.useEffect)((function(){if(t.option&&e.current){var r=t.option;Object.keys(e.current.defaults).forEach((function(t){void 0!==r[t]&&e.current.set(t,r[t])}))}}),[t.option])}(r,e),i.default.createElement("div",{style:e.style,className:"lmssee-ripples"},e.children,i.default.createElement("canvas",{ref:t}))}var we=n.z;export{we as BackgroundRipple};
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export default function Button(): React.JSX.Element;
@@ -0,0 +1,3 @@
1
+ import Button from './button';
2
+ export { Button };
3
+ export default Button;
@@ -0,0 +1 @@
1
+ import './index.scss';
@@ -0,0 +1,2 @@
1
+ export { RipplesEle as BackgroundRipple } from './ripples';
2
+ export {};
@@ -0,0 +1,4 @@
1
+ /**************************
2
+ * 标题
3
+ **************************/
4
+ export declare function OHeader(): void;
File without changes
@@ -0,0 +1,8 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName react-ripples
5
+ * @FileName interface.ts
6
+ * @CreateDate 周三 12/18/2024
7
+ * @Description
8
+ ****************************************************************************/
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ export default function OLayout(): React.JSX.Element;
3
+ /**************************
4
+ * 侧栏
5
+ **************************/
6
+ export declare function OSidebar(): void;
7
+ /**************************
8
+ * 页脚
9
+ **************************/
10
+ export declare function OFooter(): void;
11
+ /**************************
12
+ * 内容区
13
+ **************************/
14
+ export declare function OContent(): void;
File without changes
File without changes
File without changes
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { BackgroundRipplesProps } from './interface';
3
+ /**************************************
4
+ *
5
+ * ## 一个 ripples 元素组件
6
+ *
7
+ * - children 内嵌的 ReactNode
8
+ * - style 更改显示的样式
9
+ * - option 初始化 ripples 的原始数据
10
+ *
11
+ **************************************/
12
+ export declare function RipplesEle(props: BackgroundRipplesProps): React.JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { RipplesOptions } from './interface';
2
+ /**************************
3
+ * 默认值
4
+ **************************/
5
+ export declare const defaultData: RipplesOptions;
@@ -0,0 +1 @@
1
+ export { RipplesEle } from './RipplesEle';
@@ -0,0 +1,145 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName react-ripples
5
+ * @FileName interface.ts
6
+ * @CreateDate 周二 12/17/2024
7
+ * @Description BackgroundRipples 的类型声明文件
8
+ ****************************************************************************/
9
+ import { CSSProperties, ReactNode } from 'react';
10
+ /**************************************
11
+ *
12
+ * 背景涟漪的 props 类型
13
+ *
14
+ **************************************/
15
+ export interface BackgroundRipplesProps {
16
+ /**************************
17
+ * 内嵌的子元素
18
+ **************************/
19
+ children?: ReactNode;
20
+ /**************************
21
+ * 用于设定外层的样式
22
+ **************************/
23
+ style?: CSSProperties;
24
+ /**************************
25
+ * ## 可设定涟漪的参数
26
+ *
27
+ * - resolution 分辨率,纹理的尺寸,该项目中该值为纹理的宽和高,缺省为 `360`
28
+ * - dropRadius 扩撒半径,缺省值为 `20`
29
+ * - perturbance 扰动系数,缺省为 `0.03`
30
+ * - interactive 光标交互,缺省为 `true` ,关闭须显示传入 `false` 值
31
+ * - accelerating 加速光标移动触发,缺省为 `3`
32
+ * - crossOrigin 原始样式
33
+ * - imageUrl 原始背景图片地址
34
+ * - playingState 当前的播放状态,缺省为 `true` ,设定为 `false` 时并不关闭,而是暂停
35
+ * - raindropsTimeInterval 雨滴滴落的间隔,缺省为 `660`,可设置区间为 `10 ~ 12000`
36
+ * - idleFluctuations 闲置波动,在光标交互不触发时,将触发模拟雨滴,缺省为 `true`
37
+ **************************/
38
+ option?: RipplesOptions;
39
+ }
40
+ /**************************************
41
+ *
42
+ * WebGLProgram
43
+ *
44
+ **************************************/
45
+ export interface Program {
46
+ id: WebGLProgram;
47
+ uniforms: {
48
+ [x: string]: Float32Array;
49
+ };
50
+ locations: {
51
+ [x: string]: WebGLUniformLocation;
52
+ };
53
+ }
54
+ /**************************************
55
+ *
56
+ * 涟漪设定参数
57
+ *
58
+ * - resolution 分辨率,纹理的尺寸,该项目中该值为纹理的宽和高,缺省为 `360`
59
+ * - dropRadius 扩撒半径,缺省值为 `20`
60
+ * - perturbance 扰动系数,缺省为 `0.03`
61
+ * - interactive 光标交互,缺省为 `true` ,关闭须显示传入 `false` 值
62
+ * - crossOrigin 原始样式
63
+ * - imageUrl 原始背景图片地址
64
+ * - playingState 当前的播放状态,缺省为 `true` ,设定为 `false` 时并不关闭,而是暂停
65
+ * - accelerating 加速光标移动触发,缺省为 `3`
66
+ * - raindropsTimeInterval 雨滴滴落的间隔,缺省为 `660`,可设置区间为 `10 ~ 12000`
67
+ * - idleFluctuations 闲置波动,在光标交互不触发时,将触发模拟雨滴,缺省为 `true`
68
+ **************************************/
69
+ export interface RipplesOptions {
70
+ /**************************
71
+ * 分辨率
72
+ *
73
+ * 纹理的尺寸,该项目中该值为纹理的宽和高
74
+ *
75
+ * 缺省为 `360`
76
+ **************************/
77
+ resolution?: number;
78
+ /**************************
79
+ * 扩散半径
80
+ *
81
+ * 缺省为 `20`
82
+ **************************/
83
+ dropRadius?: number;
84
+ /**************************
85
+ * 扰动系数
86
+ *
87
+ * 缺省 `0.03`
88
+ *
89
+ * 取之范围 `0.01 - 1`
90
+ **************************/
91
+ perturbance?: number;
92
+ /**************************
93
+ * 是否开启光标滑动轨迹
94
+ *
95
+ * 缺省为 `true`
96
+ **************************/
97
+ interactive?: boolean;
98
+ /**************************
99
+ * 加速光标移动触发,缺省为 `3`
100
+ *
101
+ *
102
+ * 由于大佬原方法在光标触发 mousemove 时不怎么明显
103
+ *
104
+ * 所以以倍级触发会让波动更加明显
105
+ *
106
+ * 可设置区间为 `2 - 100`
107
+ **************************/
108
+ accelerating?: number;
109
+ /**************************
110
+ * 原设定的背景图片
111
+ *
112
+ * 缺省为 `''`
113
+ **************************/
114
+ crossOrigin?: string;
115
+ /**************************
116
+ * 设定的元素背景的 url 地址
117
+ *
118
+ * 缺省为 `''`
119
+ **************************/
120
+ imageUrl?: string;
121
+ /**************************
122
+ * 当前涟漪的状态
123
+ *
124
+ * 缺省为 `true` , 即涟漪触发正在执行
125
+ **************************/
126
+ playingState?: boolean;
127
+ /**************************
128
+ * 雨滴滴落的时间间隔
129
+ *
130
+ * 单位为 ms
131
+ *
132
+ * 缺省值为 `660`
133
+ *
134
+ * 可设置区间为 `10 ~ 12000`
135
+ **************************/
136
+ raindropsTimeInterval?: number;
137
+ /**************************
138
+ * 闲置波动
139
+ *
140
+ * 在光标交互不触发时,将触发模拟雨滴
141
+ *
142
+ * 缺省为 `true`
143
+ **************************/
144
+ idleFluctuations?: boolean;
145
+ }
@@ -0,0 +1,4 @@
1
+ /**************************
2
+ * 创建一个隐含像素数据的区域
3
+ **************************/
4
+ export declare function createImageData(width: number, height: number): ImageData;
@@ -0,0 +1,40 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName website
5
+ * @FileName dataStore.ts
6
+ * @CreateDate 周六 12/07/2024
7
+ * @Description 数据库
8
+ ****************************************************************************/
9
+ export declare class RipplesData {
10
+ /**************************
11
+ * style 元素的 id
12
+ **************************/
13
+ styleElement: HTMLStyleElement;
14
+ /**************************
15
+ * canvas 元素
16
+ **************************/
17
+ canvas: HTMLCanvasElement;
18
+ /**************************
19
+ * WebGL 绘图上下文
20
+ **************************/
21
+ gl: WebGLRenderingContext;
22
+ /**************************
23
+ * 配置
24
+ **************************/
25
+ config: {
26
+ type: number;
27
+ linearSupport: boolean;
28
+ extensions: string[];
29
+ arrayType: Float32ArrayConstructor | null;
30
+ } | null;
31
+ /**************************
32
+ * 像素
33
+ **************************/
34
+ transparentPixels: ImageData;
35
+ /**************************
36
+ * 初始化情况
37
+ **************************/
38
+ initState: boolean;
39
+ constructor(canvas: HTMLCanvasElement);
40
+ }
@@ -0,0 +1,10 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName website
5
+ * @FileName loadConfig.ts
6
+ * @CreateDate 周五 12/13/2024
7
+ * @Description 加载 config
8
+ ****************************************************************************/
9
+ import { RipplesData } from './index';
10
+ export declare function loadConfig(this: RipplesData): any;
@@ -0,0 +1,114 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName website
5
+ * @FileName ripples/index.ts
6
+ * @CreateDate 周六 12/07/2024
7
+ * @Description ripples 水涟漪效果
8
+ ****************************************************************************/
9
+ import { RipplesData } from './rippersData';
10
+ import { Program, RipplesOptions } from './interface';
11
+ /**************************************
12
+ *
13
+ * ## 水波动涟漪的效果
14
+ *
15
+ *
16
+ * 魔改自大佬的[代码](https://github.com/sirxemic/jquery.ripples)
17
+ **************************************/
18
+ export declare class Ripples extends RipplesData {
19
+ #private;
20
+ /**************************
21
+ *
22
+ * 默认值
23
+ *
24
+ * - resolution 分辨率,纹理的尺寸,该项目中该值为纹理的宽和高,缺省为 `360`
25
+ * - dropRadius 扩撒半径,缺省值为 `20`
26
+ * - perturbance 扰动系数,缺省为 `0.03`
27
+ * - interactive 光标交互,缺省为 `true` ,关闭须显示传入 `false` 值
28
+ * - crossOrigin 原始样式
29
+ * - imageUrl 原始背景图片地址
30
+ * - playingState 当前的播放状态,缺省为 `true` ,设定为 `false` 时并不关闭,而是暂停
31
+ * - accelerating 加速光标移动触发,缺省为 `3`
32
+ * - raindropsTimeInterval 雨滴滴落的间隔,缺省为 `660`,可设置区间为 `10 ~ 12000`
33
+ * - idleFluctuations 闲置波动,在光标交互不触发时,将触发模拟雨滴,缺省为 `true`
34
+ **************************/
35
+ defaults: RipplesOptions;
36
+ /** 是否与鼠标互动 */
37
+ interactive: boolean;
38
+ /**************************
39
+ * 倍级触发光标事件
40
+ **************************/
41
+ set accelerating(value: number);
42
+ /** 分辨率
43
+ *
44
+ * 纹理的尺寸,该项目中该值为纹理的宽和高
45
+ *
46
+ */
47
+ set resolution(value: number);
48
+ /** 扰动系数 */
49
+ set perturbance(value: number);
50
+ /** 扩散半径 */
51
+ dropRadius: number;
52
+ /** 原始 css */
53
+ crossOrigin: string;
54
+ /** 传入的背景图片 */
55
+ imageUrl: string | null;
56
+ /** 闲置波动 */
57
+ idleFluctuations: boolean;
58
+ /** 当前播放的状态 */
59
+ set playingState(value: boolean);
60
+ /** 初始化状态 */
61
+ get initialized(): boolean;
62
+ imageSource: string;
63
+ renderProgram: Program;
64
+ set raindropsTimeInterval(value: number);
65
+ constructor(canvas: HTMLCanvasElement, options?: RipplesOptions);
66
+ /**************************
67
+ * 模拟雨滴下落
68
+ **************************/
69
+ raindropsFall(): void;
70
+ /**************************
71
+ * 公共方法,触发
72
+ **************************/
73
+ drop(x: number, y: number, radius: number, strength: number): void;
74
+ /**************************
75
+ * 元素的尺寸发生变化
76
+ **************************/
77
+ updateSize(): void;
78
+ /**************************
79
+ * 销毁
80
+ **************************/
81
+ destroy(): void;
82
+ /**************************
83
+ * 展示元素
84
+ *
85
+ * - 设置状态
86
+ * - 设置 canvas 元素展示
87
+ * - 隐藏父级节点背景
88
+ **************************/
89
+ show(): void;
90
+ /**************************
91
+ * 隐藏元素
92
+ *
93
+ * - 设置状态
94
+ * - 设置 canvas 元素隐藏
95
+ * - 恢复父级节点背景
96
+ **************************/
97
+ hide(): void;
98
+ /**************************
99
+ * 暂停动画涟漪状态
100
+ **************************/
101
+ pause(): void;
102
+ /**************************
103
+ * 播放动画涟漪状态
104
+ **************************/
105
+ play(): void;
106
+ /**************************
107
+ * 切换当前状态
108
+ **************************/
109
+ changePlayingState(): void;
110
+ /**************************
111
+ * 给初始化化量赋值
112
+ **************************/
113
+ set(property: keyof RipplesOptions, value: unknown): void;
114
+ }
File without changes
@@ -0,0 +1,51 @@
1
+ /****************************************************************************
2
+ * @Author lmssee
3
+ * @Email lmssee@outlook.com
4
+ * @ProjectName website
5
+ * @FileName tools.ts
6
+ * @CreateDate 周六 12/07/2024
7
+ * @Description 工具
8
+ ****************************************************************************/
9
+ import { Ripples } from './ripplesClass';
10
+ import { Program } from './interface';
11
+ /**************************************
12
+ *
13
+ * 转换背景的位置为特定的格式
14
+ *
15
+ **************************************/
16
+ export declare function translateBackgroundPosition(value: string): string[];
17
+ /**************************************
18
+ *
19
+ * 检测数据是否为 url 外联图像地址
20
+ *
21
+ **************************************/
22
+ export declare function extractUrl(value: string): string;
23
+ /**************************************
24
+ *
25
+ * 增加 WebGLProgram
26
+ *
27
+ *
28
+ **************************************/
29
+ export declare function createProgram(vertexSource: string, fragmentSource: string, gl: WebGLRenderingContext, _uniformValues?: string): Program;
30
+ /**************************************
31
+ *
32
+ * 绑定纹理
33
+ *
34
+ **************************************/
35
+ export declare function bindTexture(this: Ripples, texture: WebGLTexture, unit?: number): void;
36
+ /**************************************
37
+ *
38
+ * 是否是 base64 数据
39
+ *
40
+ **************************************/
41
+ export declare function isDataUri(url: string): RegExpMatchArray;
42
+ /**************************************
43
+ *
44
+ * 给定的字符串是否为百分数
45
+ *
46
+ **************************************/
47
+ export declare function isPercentage(value: string): boolean;
48
+ /**************************
49
+ * 给 canvas 设置样式
50
+ **************************/
51
+ export declare function setCanvasStyle(canvas: HTMLCanvasElement): void;
package/package.json ADDED
@@ -0,0 +1,87 @@
1
+ {
2
+ "name": "oops-ui",
3
+ "version": "0.0.0",
4
+ "type": "module",
5
+ "main": "dist/index.cms.js",
6
+ "module": "dist/index.ems.js",
7
+ "typings": "dist/types/index.d.ts",
8
+ "scripts": {
9
+ "build": "npx ixxx rm dist && webpack --env t=ems && webpack --env t=cms && tsc -p tsconfig.build.json",
10
+ "build:local": "npx ixxx rm *.tgz && npm run build && npm pack && pwd",
11
+ "dev": "webpack-dev-server --env dev"
12
+ },
13
+ "author": "lmssee <lmssee@outlook.com> (https://lmssee.com)",
14
+ "license": "ISC",
15
+ "description": "oops! A rudimentary React UI ",
16
+ "files": [
17
+ "dist",
18
+ "LICENSE"
19
+ ],
20
+ "keywords": [
21
+ "lmssee",
22
+ "is-mi",
23
+ "oops",
24
+ "oops-ui"
25
+ ],
26
+ "repository": {
27
+ "type": "git",
28
+ "url": "git+ssh://git@github.com/lmssee/npm-oops-ui.git"
29
+ },
30
+ "bugs": {
31
+ "url": "https://github.com/lmssee/npm-oops-ui/issues"
32
+ },
33
+ "publishConfig": {
34
+ "access": "public",
35
+ "registry": "https://registry.npmjs.org/"
36
+ },
37
+ "homepage": "https://lmssee.com/oops-ui",
38
+ "peerDependencies": {
39
+ "a-element-inline-style": ">= 0.0.0",
40
+ "a-js-tools": "^0.0.0",
41
+ "react": ">= 17",
42
+ "react-dom": ">= 17"
43
+ },
44
+ "devDependencies": {
45
+ "@babel/core": "^7.26.0",
46
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
47
+ "@babel/preset-env": "^7.26.0",
48
+ "@babel/preset-react": "^7.26.3",
49
+ "@babel/preset-typescript": "^7.26.0",
50
+ "@commitlint/cli": "^19.6.1",
51
+ "@commitlint/config-conventional": "^19.6.0",
52
+ "@eslint/js": "^9.17.0",
53
+ "@types/node": "^22.10.2",
54
+ "@types/react": "^19.0.1",
55
+ "@types/react-dom": "^19.0.2",
56
+ "@types/webxr": "^0.5.20",
57
+ "@typescript-eslint/eslint-plugin": "^8.18.1",
58
+ "@typescript-eslint/parser": "^8.18.1",
59
+ "a-element-inline-style": "^0.0.0",
60
+ "babel-loader": "^9.2.1",
61
+ "babel-plugin-import": "^1.13.8",
62
+ "commitizen": "^4.3.1",
63
+ "copy-webpack-plugin": "^12.0.2",
64
+ "css-loader": "^6.11.0",
65
+ "cz-conventional-changelog": "^3.3.0",
66
+ "eslint": "^9.17.0",
67
+ "eslint-config-prettier": "^9.1.0",
68
+ "eslint-plugin-prettier": "^5.2.1",
69
+ "html-webpack-plugin": "^5.6.3",
70
+ "husky": "^9.1.7",
71
+ "lint-staged": "^15.2.11",
72
+ "postcss-loader": "^8.1.1",
73
+ "prettier": "^3.4.2",
74
+ "react": "^19.0.0",
75
+ "react-dom": "^19.0.0",
76
+ "react-router": "^7.0.2",
77
+ "sass": "^1.83.0",
78
+ "sass-loader": "^16.0.4",
79
+ "style-loader": "^4.0.0",
80
+ "ts-loader": "^9.5.1",
81
+ "typescript": "^5.7.2",
82
+ "typescript-eslint": "^8.18.1",
83
+ "webpack": "^5.97.1",
84
+ "webpack-cli": "^5.1.4",
85
+ "webpack-dev-server": "^5.2.0"
86
+ }
87
+ }