@react-three/drei 9.41.2 → 9.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.41.2",
+  "version": "9.42.0",
   "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("react"),t=require("three"),r=require("@react-three/fiber");function n(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 c=n(e),i=n(t);const a=new i.Color;function s({canvasSize:e,scene:t,index:n,children:i,frames:s,rect:o,track:u}){const l=r.useThree((e=>e.get)),h=r.useThree((e=>e.camera)),g=r.useThree((e=>e.scene)),d=r.useThree((e=>e.setEvents));let f=0;return r.useFrame((r=>{var n,c;(s===1/0||f<=s)&&(o.current=null==(n=u.current)?void 0:n.getBoundingClientRect(),f++);if(o.current){const{left:n,right:s,top:u,bottom:l,width:d,height:f}=o.current,p=l<0||u>e.height||s<0||n>e.width,m=e.height-l,v=d/f;if((c=h)&&c.isOrthographicCamera?h.left===d/-2&&h.right===d/2&&h.top===f/2&&h.bottom===f/-2||(Object.assign(h,{left:d/-2,right:d/2,top:f/2,bottom:f/-2}),h.updateProjectionMatrix()):h.aspect!==v&&(h.aspect=v,h.updateProjectionMatrix()),r.gl.setViewport(n,m,d,f),r.gl.setScissor(n,m,d,f),r.gl.setScissorTest(!0),p)return r.gl.getClearColor(a),r.gl.setClearColor(a,r.gl.getClearAlpha()),void r.gl.clear(!0,!0);r.gl.render(i?g:t,h)}}),n),c.useEffect((()=>{const e=l().events.connected;return d({connected:u.current}),()=>d({connected:e})}),[]),c.createElement(c.Fragment,null,i)}exports.View=({track:e,index:t=1,frames:n=1/0,children:a})=>{const o=c.useRef(null),{size:u,scene:l}=r.useThree(),[h]=c.useState((()=>new i.Scene)),g=c.useCallback(((t,r)=>{if(e.current&&t.target===e.current){const{width:e,height:n,left:c,top:i}=o.current,a=t.clientX-c,s=t.clientY-i;r.pointer.set(a/e*2-1,-s/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[o]),[d,f]=c.useReducer((()=>!0),!1);return c.useEffect((()=>{var t;o.current=null==(t=e.current)?void 0:t.getBoundingClientRect(),f()}),[]),c.createElement(c.Fragment,null,d&&r.createPortal(c.createElement(s,{canvasSize:u,frames:n,scene:l,track:e,rect:o,index:t},a),h,{events:{compute:g,priority:t},size:{width:o.current.width,height:o.current.height}}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function n(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 i=n(e),c=n(t);const o=new c.Color;function s(e){return"top"in e}function a({canvasSize:e,scene:t,index:n,children:c,frames:a,rect:u,track:l}){const h=r.useThree((e=>e.get)),f=r.useThree((e=>e.camera)),g=r.useThree((e=>e.scene)),d=r.useThree((e=>e.setEvents));let p=0;return r.useFrame((r=>{var n,i;(a===1/0||p<=a)&&(u.current=null==(n=l.current)?void 0:n.getBoundingClientRect(),p++);if(u.current){const{position:{left:n,bottom:a,width:l,height:h},isOffscreen:d}=function(e,t){const{right:r,top:n,left:i,bottom:c,width:o,height:a}=t,u=t.bottom<0||n>e.height||r<0||t.left>e.width;if(s(e)){const t=e.top+e.height-c;return{position:{width:o,height:a,left:i-e.left,top:n,bottom:t,right:r},isOffscreen:u}}return{position:{width:o,height:a,top:n,left:i,bottom:e.height-c,right:r},isOffscreen:u}}(e,u.current),p=l/h;if((i=f)&&i.isOrthographicCamera?f.left===l/-2&&f.right===l/2&&f.top===h/2&&f.bottom===h/-2||(Object.assign(f,{left:l/-2,right:l/2,top:h/2,bottom:h/-2}),f.updateProjectionMatrix()):f.aspect!==p&&(f.aspect=p,f.updateProjectionMatrix()),r.gl.setViewport(n,a,l,h),r.gl.setScissor(n,a,l,h),r.gl.setScissorTest(!0),d)return r.gl.getClearColor(o),r.gl.setClearColor(o,r.gl.getClearAlpha()),void r.gl.clear(!0,!0);r.gl.render(c?g:t,f)}}),n),i.useEffect((()=>{const e=h().events.connected;return d({connected:l.current}),()=>d({connected:e})}),[]),i.useEffect((()=>{s(e)||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")}),[]),i.createElement(i.Fragment,null,c)}exports.View=({track:e,index:t=1,frames:n=1/0,children:o})=>{const s=i.useRef(null),{size:u,scene:l}=r.useThree(),[h]=i.useState((()=>new c.Scene)),f=i.useCallback(((t,r)=>{if(e.current&&t.target===e.current){const{width:e,height:n,left:i,top:c}=s.current,o=t.clientX-i,a=t.clientY-c;r.pointer.set(o/e*2-1,-a/n*2+1),r.raycaster.setFromCamera(r.pointer,r.camera)}}),[s]),[g,d]=i.useReducer((()=>!0),!1);return i.useEffect((()=>{var t;s.current=null==(t=e.current)?void 0:t.getBoundingClientRect(),d()}),[]),i.createElement(i.Fragment,null,g&&r.createPortal(i.createElement(a,{canvasSize:u,frames:n,scene:l,track:e,rect:s,index:t},o),h,{events:{compute:f,priority:t},size:{width:s.current.width,height:s.current.height}}))};

package/web/View.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import * as THREE from 'three';
-import { Size } from '@react-three/fiber';
+declare type LegacyCanvasSize = {
+    height: number;
+    width: number;
+};
+declare type CanvasSize = LegacyCanvasSize & {
+    top: number;
+    left: number;
+};
 export declare type ContainerProps = {
     scene: THREE.Scene;
     index: number;
@@ -8,7 +15,7 @@ export declare type ContainerProps = {
     frames: number;
     rect: React.MutableRefObject<DOMRect>;
     track: React.MutableRefObject<HTMLElement>;
-    canvasSize: Size;
+    canvasSize: LegacyCanvasSize | CanvasSize;
 };
 export declare type ViewProps = {
     track: React.MutableRefObject<HTMLElement>;
@@ -17,3 +24,4 @@ export declare type ViewProps = {
     children?: React.ReactNode;
 };
 export declare const View: ({ track, index, frames, children }: ViewProps) => JSX.Element;
+export {};

package/web/View.js

@@ -5,6 +5,59 @@ import { useThree, createPortal, useFrame } from '@react-three/fiber';
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 
 const col = new THREE.Color();
+/**
+ * In `@react-three/fiber` after `v8.0.0` but prior to `v8.1.0`, `state.size` contained only dimension
+ * information. After `v8.1.0`, position information (`top`, `left`) was added
+ *
+ * @todo remove this when drei supports v9 and up
+ */
+
+function isNonLegacyCanvasSize(size) {
+  return 'top' in size;
+}
+
+function computeContainerPosition(canvasSize, trackRect) {
+  const {
+    right,
+    top,
+    left: trackLeft,
+    bottom: trackBottom,
+    width,
+    height
+  } = trackRect;
+  const isOffscreen = trackRect.bottom < 0 || top > canvasSize.height || right < 0 || trackRect.left > canvasSize.width;
+
+  if (isNonLegacyCanvasSize(canvasSize)) {
+    const canvasBottom = canvasSize.top + canvasSize.height;
+    const bottom = canvasBottom - trackBottom;
+    const left = trackLeft - canvasSize.left;
+    return {
+      position: {
+        width,
+        height,
+        left,
+        top,
+        bottom,
+        right
+      },
+      isOffscreen
+    };
+  } // Fall back on old behavior if r3f < 8.1.0
+
+
+  const bottom = canvasSize.height - trackBottom;
+  return {
+    position: {
+      width,
+      height,
+      top,
+      left: trackLeft,
+      bottom,
+      right
+    },
+    isOffscreen
+  };
+}
 
 function Container({
   canvasSize,
@@ -30,15 +83,14 @@ function Container({
 
     if (rect.current) {
       const {
-        left,
-        right,
-        top,
-        bottom,
-        width,
-        height
-      } = rect.current;
-      const isOffscreen = bottom < 0 || top > canvasSize.height || right < 0 || left > canvasSize.width;
-      const positiveYUpBottom = canvasSize.height - bottom;
+        position: {
+          left,
+          bottom,
+          width,
+          height
+        },
+        isOffscreen
+      } = computeContainerPosition(canvasSize, rect.current);
       const aspect = width / height;
 
       if (isOrthographicCamera(camera)) {
@@ -56,8 +108,8 @@ function Container({
         camera.updateProjectionMatrix();
       }
 
-      state.gl.setViewport(left, positiveYUpBottom, width, height);
-      state.gl.setScissor(left, positiveYUpBottom, width, height);
+      state.gl.setViewport(left, bottom, width, height);
+      state.gl.setScissor(left, bottom, width, height);
       state.gl.setScissorTest(true);
 
       if (isOffscreen) {
@@ -81,6 +133,13 @@ function Container({
       connected: old
     });
   }, []);
+  React.useEffect(() => {
+    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);
 }