fix some bugs

packages/use-shader-fx/build/use-shader-fx.umd.cjs

@@ -527,7 +527,7 @@ void main() {
 	alpha *= textureAlpha;
 
 	gl_FragColor = vec4(textureColor, alpha);
-}`;const rn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(a=>{a instanceof n.Mesh&&(a.geometry.dispose(),a.material.dispose())}),o.remove(...o.children)),t.texture.forEach((a,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:nn,fragmentShader:tn,transparent:!0,uniforms:{u_texture:{value:a},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},on=()=>{const t=u.useRef([]),s=u.useRef([]);return u.useCallback(({isIntersectingRef:a,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((f,r)=>{f.unobserve(s.current[r])}),s.current=[],t.current=[];const v=new Array(l.dom.length).fill(!1);a.current=[...v],e.current=[...v],l.dom.forEach((f,r)=>{const c=p=>{p.forEach(d=>{l.onIntersect[r]&&l.onIntersect[r](d),a.current[r]=d.isIntersecting})},m=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});m.observe(f),t.current.push(m),s.current.push(f)})},[])},un=()=>{const t=u.useRef([]),s=u.useCallback(({params:o,size:a,resolutionRef:e,scene:l,isIntersectingRef:v})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((f,r)=>{const c=o.dom[r];if(!c){W&&console.warn("DOM is null.");return}const m=c.getBoundingClientRect();if(t.current[r]=m,f.scale.set(m.width,m.height,1),f.position.set(m.left+m.width*.5-a.width*.5,-m.top-m.height*.5+a.height*.5,0),v.current[r]&&(o.rotation[r]&&f.rotation.copy(o.rotation[r]),f instanceof n.Mesh)){const p=f.material;i(p,"u_texture",o.texture[r]),i(p,"u_textureResolution",o.resolution[r]),i(p,"u_resolution",e.current.set(m.width,m.height)),i(p,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=u.useRef([]),s=u.useRef([]),o=u.useCallback((a,e=!1)=>{t.current.forEach((v,f)=>{v&&(s.current[f]=!0)});const l=e?[...s.current]:[...t.current];return a<0?l:l[a]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},sn=t=>({onView:o,onHidden:a})=>{const e=u.useRef(!1);u.useEffect(()=>{let l;const v=()=>{t.current.some(f=>f)?e.current||(o&&o(),e.current=!0):e.current&&(a&&a(),e.current=!1),l=requestAnimationFrame(v)};return l=requestAnimationFrame(v),()=>{cancelAnimationFrame(l)}},[o,a])},ne={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},ln=({size:t,dpr:s,samples:o=0},a=[],e)=>{const l=u.useMemo(()=>new n.Scene,[]),v=R(t),[f,r]=D({scene:l,camera:v,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[c,m]=b({...ne,updateKey:e}),[p,d]=un(),g=u.useRef(new n.Vector2(0,0)),[h,y]=u.useState(!0);u.useEffect(()=>{y(!0)},a);const M=u.useRef(null),C=u.useMemo(()=>new n.Texture,[]),T=on(),{isIntersectingOnceRef:P,isIntersectingRef:A,isIntersecting:E}=an(),_=sn(A);return[u.useCallback((z,k)=>{const{gl:j,size:V}=z;if(k&&m(k),h){if(M.current===c.updateKey)return C;M.current=c.updateKey}return en(c)&&(h&&(rn({params:c,size:V,scene:l}),T({isIntersectingRef:A,isIntersectingOnceRef:P,params:c}),y(!1)),d({params:c,size:V,resolutionRef:g,scene:l,isIntersectingRef:A})),r(j)},[r,m,T,d,h,l,c,P,A,C]),m,{scene:l,camera:v,renderTarget:f,output:f.texture,isIntersecting:E,DOMRects:p,intersections:A.current,useDomView:_}]};var cn=`precision mediump float;
+}`;const rn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(a=>{a instanceof n.Mesh&&(a.geometry.dispose(),a.material.dispose())}),o.remove(...o.children)),t.texture.forEach((a,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:nn,fragmentShader:tn,transparent:!0,uniforms:{u_texture:{value:a},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},on=()=>{const t=u.useRef([]),s=u.useRef([]);return u.useCallback(({isIntersectingRef:a,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((f,r)=>{f.unobserve(s.current[r])}),s.current=[],t.current=[];const v=new Array(l.dom.length).fill(!1);a.current=[...v],e.current=[...v],l.dom.forEach((f,r)=>{const c=p=>{p.forEach(d=>{l.onIntersect[r]&&l.onIntersect[r](d),a.current[r]=d.isIntersecting})},m=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});m.observe(f),t.current.push(m),s.current.push(f)})},[])},un=()=>{const t=u.useRef([]),s=u.useCallback(({params:o,size:a,resolutionRef:e,scene:l,isIntersectingRef:v})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((f,r)=>{const c=o.dom[r];if(!c){W&&console.warn("DOM is null.");return}const m=c.getBoundingClientRect();if(t.current[r]=m,f.scale.set(m.width,m.height,1),f.position.set(m.left+m.width*.5-a.width*.5,-m.top-m.height*.5+a.height*.5,0),v.current[r]&&(o.rotation[r]&&f.rotation.copy(o.rotation[r]),f instanceof n.Mesh)){const p=f.material;i(p,"u_texture",o.texture[r]),i(p,"u_textureResolution",o.resolution[r]),i(p,"u_resolution",e.current.set(m.width,m.height)),i(p,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=u.useRef([]),s=u.useRef([]),o=u.useCallback((a,e=!1)=>{t.current.forEach((v,f)=>{v&&(s.current[f]=!0)});const l=e?[...s.current]:[...t.current];return a<0?l:l[a]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},sn=t=>({onView:o,onHidden:a})=>{const e=u.useRef(!1);u.useEffect(()=>{let l;const v=()=>{t.current.some(f=>f)?e.current||(o&&o(),e.current=!0):e.current&&(a&&a(),e.current=!1),l=requestAnimationFrame(v)};return l=requestAnimationFrame(v),()=>{cancelAnimationFrame(l)}},[o,a])},ne={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},ln=({size:t,dpr:s,samples:o=0},a=[],e)=>{const l=u.useMemo(()=>new n.Scene,[]),v=R(t),[f,r]=D({scene:l,camera:v,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[c,m]=b({...ne,updateKey:e}),[p,d]=un(),g=u.useRef(new n.Vector2(0,0)),[h,y]=u.useState(!0);u.useEffect(()=>{y(!0)},a);const M=u.useRef(null),C=u.useMemo(()=>new n.Texture,[]),T=on(),{isIntersectingOnceRef:P,isIntersectingRef:A,isIntersecting:E}=an(),_=sn(A);return[u.useCallback((z,k)=>{const{gl:j,size:V}=z;if(k&&m(k),en(c)){if(h){if(M.current===c.updateKey)return C;M.current=c.updateKey}h&&(rn({params:c,size:V,scene:l}),T({isIntersectingRef:A,isIntersectingOnceRef:P,params:c}),y(!1)),d({params:c,size:V,resolutionRef:g,scene:l,isIntersectingRef:A})}return r(j)},[r,m,T,d,h,l,c,P,A,C]),m,{scene:l,camera:v,renderTarget:f,output:f.texture,isIntersecting:E,DOMRects:p,intersections:A.current,useDomView:_}]};var cn=`precision mediump float;
 
 varying vec2 vUv;
 

packages/use-shader-fx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.44",
+   "version": "1.0.45",
    "description": "The only difficult part is coding the shaders",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

packages/use-shader-fx/src/hooks/useDomSyncer/index.ts

@@ -113,15 +113,15 @@ export const useDomSyncer = (
 
          updateParams && setParams(updateParams);
 
-         if (refreshTrigger) {
-            if (updateKey.current === params.updateKey) {
-               return emptyTexture;
-            } else {
-               updateKey.current = params.updateKey!;
+         if (errorHandler(params)) {
+            if (refreshTrigger) {
+               if (updateKey.current === params.updateKey) {
+                  return emptyTexture;
+               } else {
+                  updateKey.current = params.updateKey!;
+               }
             }
-         }
 
-         if (errorHandler(params)) {
             if (refreshTrigger) {
                createMesh({
                   params,