@react-three/drei 9.94.0 → 9.94.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.94.0",
+  "version": "9.94.1",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/View.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),c=require("tunnel-rat");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=i(e),s=a(t),l=a(r),u=i(c);const f=e=>e&&e.isOrthographicCamera,d=new l.Color,m=u.default();function h(e){return"top"in e}function g(e,t){const{right:r,top:n,left:c,bottom:i,width:a,height:o}=t,s=t.bottom<0||n>e.height||r<0||t.left>e.width;if(h(e)){const t=e.top+e.height-i;return{position:{width:a,height:o,left:c-e.left,top:n,bottom:t,right:r},isOffscreen:s}}return{position:{width:a,height:o,top:n,left:c,bottom:e.height-i,right:r},isOffscreen:s}}function p(e,{left:t,bottom:r,width:n,height:c}){let i;const a=n/c;return f(e.camera)?e.camera.left===n/-2&&e.camera.right===n/2&&e.camera.top===c/2&&e.camera.bottom===c/-2||(Object.assign(e.camera,{left:n/-2,right:n/2,top:c/2,bottom:c/-2}),e.camera.updateProjectionMatrix()):e.camera.aspect!==a&&(e.camera.aspect=a,e.camera.updateProjectionMatrix()),i=e.gl.autoClear,e.gl.autoClear=!1,e.gl.setViewport(t,r,n,c),e.gl.setScissor(t,r,n,c),e.gl.setScissorTest(!0),i}function b(e,t){e.gl.setScissorTest(!1),e.gl.autoClear=t}function v(e){e.gl.getClearColor(d),e.gl.setClearColor(d,e.gl.getClearAlpha()),e.gl.clear(!0,!0)}function w({visible:e=!0,canvasSize:t,scene:r,index:c,children:i,frames:a,rect:o,track:l}){const u=n.useThree(),[f,d]=s.useState(!1);let m=0;return n.useFrame((n=>{var c;(a===1/0||m<=a)&&(o.current=null==(c=l.current)?void 0:c.getBoundingClientRect(),m++);const{position:s,isOffscreen:u}=g(t,o.current);if(f!==u&&d(u),e&&!f&&o.current){const e=p(n,s);n.gl.render(i?n.scene:r,n.camera),b(n,e)}}),c),s.useLayoutEffect((()=>{if(!e||!f){const{position:e}=g(t,o.current),r=p(u,e);v(u),b(u,r)}}),[e,f]),s.useEffect((()=>{const e=u.get().events.connected;return u.setEvents({connected:l.current}),()=>{const{position:r}=g(t,o.current),n=p(u,r);v(u),b(u,n),u.setEvents({connected:e})}}),[]),s.useEffect((()=>{h(t)||console.warn("Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944")}),[]),s.createElement(s.Fragment,null,i)}const E=s.forwardRef((({track:e,visible:t=!0,index:r=1,id:c,style:i,className:a,frames:u=1/0,children:f,...d},m)=>{var h,g,p,b;const v=s.useRef(null),{size:E,scene:C}=n.useThree(),[x]=s.useState((()=>new l.Scene)),[y,O]=s.useReducer((()=>!0),!1),j=s.useCallback(((t,r)=>{if(v.current&&e.current&&t.target===e.current){const{width:e,height:n,left:c,top:i}=v.current,a=t.clientX-c,o=t.clientY-i;r.pointer.set(a/e*2-1,-o/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[v,e]);return s.useEffect((()=>{var t;v.current=null==(t=e.current)?void 0:t.getBoundingClientRect(),O()}),[e]),s.createElement("group",o.default({ref:m},d),y&&n.createPortal(s.createElement(w,{visible:t,canvasSize:E,frames:u,scene:C,track:e,rect:v,index:r},f),x,{events:{compute:j,priority:r},size:{width:null==(h=v.current)?void 0:h.width,height:null==(g=v.current)?void 0:g.height,top:null==(p=v.current)?void 0:p.top,left:null==(b=v.current)?void 0:b.left}}))})),C=s.forwardRef((({as:e="div",id:t,visible:r,className:n,style:c,index:i=1,track:a,frames:l=1/0,children:u,...f},d)=>{const h=s.useId(),g=s.useRef(null);return s.useImperativeHandle(d,(()=>g.current)),s.createElement(s.Fragment,null,s.createElement(e,o.default({ref:g,id:t,className:n,style:c},f)),s.createElement(m.In,null,s.createElement(E,{visible:r,key:h,track:g,frames:l,index:i},u)))})),x=s.forwardRef(((e,t)=>s.useContext(n.context)?s.createElement(E,o.default({ref:t},e)):s.createElement(C,o.default({ref:t},e))));x.Port=()=>s.createElement(m.Out,null),exports.View=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),c=require("tunnel-rat");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var o=i(e),s=a(t),l=a(r),u=i(c);const f=e=>e&&e.isOrthographicCamera,d=new l.Color,m=u.default();function h(e){return"top"in e}function g(e,t){const{right:r,top:n,left:c,bottom:i,width:a,height:o}=t,s=t.bottom<0||n>e.height||r<0||t.left>e.width;if(h(e)){const t=e.top+e.height-i;return{position:{width:a,height:o,left:c-e.left,top:n,bottom:t,right:r},isOffscreen:s}}return{position:{width:a,height:o,top:n,left:c,bottom:e.height-i,right:r},isOffscreen:s}}function p(e,{left:t,bottom:r,width:n,height:c}){let i;const a=n/c;return f(e.camera)?e.camera.left===n/-2&&e.camera.right===n/2&&e.camera.top===c/2&&e.camera.bottom===c/-2||(Object.assign(e.camera,{left:n/-2,right:n/2,top:c/2,bottom:c/-2}),e.camera.updateProjectionMatrix()):e.camera.aspect!==a&&(e.camera.aspect=a,e.camera.updateProjectionMatrix()),i=e.gl.autoClear,e.gl.autoClear=!1,e.gl.setViewport(t,r,n,c),e.gl.setScissor(t,r,n,c),e.gl.setScissorTest(!0),i}function b(e,t){e.gl.setScissorTest(!1),e.gl.autoClear=t}function v(e){e.gl.getClearColor(d),e.gl.setClearColor(d,e.gl.getClearAlpha()),e.gl.clear(!0,!0)}function w({visible:e=!0,canvasSize:t,scene:r,index:c,children:i,frames:a,rect:o,track:l}){const u=n.useThree(),[f,d]=s.useState(!1);let m=0;return n.useFrame((n=>{var c;(a===1/0||m<=a)&&(o.current=null==(c=l.current)?void 0:c.getBoundingClientRect(),m++);if(o.current){const{position:c,isOffscreen:a}=g(t,o.current);if(f!==a&&d(a),e&&!f&&o.current){const e=p(n,c);n.gl.render(i?n.scene:r,n.camera),b(n,e)}}}),c),s.useLayoutEffect((()=>{const r=o.current;if(r&&(!e||!f)){const{position:e}=g(t,r),n=p(u,e);v(u),b(u,n)}}),[e,f]),s.useEffect((()=>{const e=o.current,r=u.get().events.connected;return u.setEvents({connected:l.current}),()=>{if(e){const{position:r}=g(t,e),n=p(u,r);v(u),b(u,n)}u.setEvents({connected:r})}}),[]),s.useEffect((()=>{h(t)||console.warn("Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944")}),[]),s.createElement(s.Fragment,null,i)}const E=s.forwardRef((({track:e,visible:t=!0,index:r=1,id:c,style:i,className:a,frames:u=1/0,children:f,...d},m)=>{var h,g,p,b;const v=s.useRef(null),{size:E,scene:C}=n.useThree(),[x]=s.useState((()=>new l.Scene)),[y,O]=s.useReducer((()=>!0),!1),j=s.useCallback(((t,r)=>{if(v.current&&e.current&&t.target===e.current){const{width:e,height:n,left:c,top:i}=v.current,a=t.clientX-c,o=t.clientY-i;r.pointer.set(a/e*2-1,-o/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[v,e]);return s.useEffect((()=>{var t;v.current=null==(t=e.current)?void 0:t.getBoundingClientRect(),O()}),[e]),s.createElement("group",o.default({ref:m},d),y&&n.createPortal(s.createElement(w,{visible:t,canvasSize:E,frames:u,scene:C,track:e,rect:v,index:r},f),x,{events:{compute:j,priority:r},size:{width:null==(h=v.current)?void 0:h.width,height:null==(g=v.current)?void 0:g.height,top:null==(p=v.current)?void 0:p.top,left:null==(b=v.current)?void 0:b.left}}))})),C=s.forwardRef((({as:e="div",id:t,visible:r,className:n,style:c,index:i=1,track:a,frames:l=1/0,children:u,...f},d)=>{const h=s.useId(),g=s.useRef(null);return s.useImperativeHandle(d,(()=>g.current)),s.createElement(s.Fragment,null,s.createElement(e,o.default({ref:g,id:t,className:n,style:c},f)),s.createElement(m.In,null,s.createElement(E,{visible:r,key:h,track:g,frames:l,index:i},u)))})),x=s.forwardRef(((e,t)=>s.useContext(n.context)?s.createElement(E,o.default({ref:t},e)):s.createElement(C,o.default({ref:t},e))));x.Port=()=>s.createElement(m.Out,null),exports.View=x;

package/web/View.js

@@ -116,51 +116,55 @@ function Container({
       rect.current = (_track$current = track.current) == null ? void 0 : _track$current.getBoundingClientRect();
       frameCount++;
     }
-    const {
-      position,
-      isOffscreen: _isOffscreen
-    } = computeContainerPosition(canvasSize, rect.current);
-    if (isOffscreen !== _isOffscreen) setOffscreen(_isOffscreen);
-    if (visible && !isOffscreen && rect.current) {
-      const autoClear = prepareSkissor(state, position);
-      // When children are present render the portalled scene, otherwise the default scene
-      state.gl.render(children ? state.scene : scene, state.camera);
-      finishSkissor(state, autoClear);
+    if (rect.current) {
+      const {
+        position,
+        isOffscreen: _isOffscreen
+      } = computeContainerPosition(canvasSize, rect.current);
+      if (isOffscreen !== _isOffscreen) setOffscreen(_isOffscreen);
+      if (visible && !isOffscreen && rect.current) {
+        const autoClear = prepareSkissor(state, position);
+        // When children are present render the portalled scene, otherwise the default scene
+        state.gl.render(children ? state.scene : scene, state.camera);
+        finishSkissor(state, autoClear);
+      }
     }
   }, index);
   React.useLayoutEffect(() => {
-    if (!visible || !isOffscreen) {
+    const curRect = rect.current;
+    if (curRect && (!visible || !isOffscreen)) {
       // If the view is not visible clear it once, but stop rendering afterwards!
       const {
         position
-      } = computeContainerPosition(canvasSize, rect.current);
+      } = computeContainerPosition(canvasSize, curRect);
       const autoClear = prepareSkissor(rootState, position);
       clear(rootState);
       finishSkissor(rootState, autoClear);
     }
   }, [visible, isOffscreen]);
   React.useEffect(() => {
+    const curRect = rect.current;
     // Connect the event layer to the tracking element
     const old = rootState.get().events.connected;
     rootState.setEvents({
       connected: track.current
     });
     return () => {
-      const {
-        position
-      } = computeContainerPosition(canvasSize, rect.current);
-      const autoClear = prepareSkissor(rootState, position);
-      clear(rootState);
-      finishSkissor(rootState, autoClear);
+      if (curRect) {
+        const {
+          position
+        } = computeContainerPosition(canvasSize, curRect);
+        const autoClear = prepareSkissor(rootState, position);
+        clear(rootState);
+        finishSkissor(rootState, autoClear);
+      }
       rootState.setEvents({
         connected: old
       });
     };
   }, []);
   React.useEffect(() => {
-    if (isNonLegacyCanvasSize(canvasSize)) {
-      return;
-    }
+    if (isNonLegacyCanvasSize(canvasSize)) return;
     console.warn('Detected @react-three/fiber canvas size does not include position information. <View /> may not work as expected. ' + 'Upgrade to @react-three/fiber ^8.1.0 for support.\n See https://github.com/pmndrs/drei/issues/944');
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);