@react-three/fiber 9.0.0-beta.1 → 9.0.0-rc.1

package/dist/react-three-fiber.cjs.dev.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('./loop-eb3c7218.cjs.dev.js');
+var events = require('./events-df578889.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
-var useMeasure = require('react-use-measure');
+var createDebounce = require('debounce');
 var itsFine = require('its-fine');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -36,93 +36,201 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
+var createDebounce__default = /*#__PURE__*/_interopDefault(createDebounce);
 
-const DOM_EVENTS = {
-  onClick: ['click', false],
-  onContextMenu: ['contextmenu', false],
-  onDoubleClick: ['dblclick', false],
-  onWheel: ['wheel', true],
-  onPointerDown: ['pointerdown', true],
-  onPointerUp: ['pointerup', true],
-  onPointerLeave: ['pointerleave', true],
-  onPointerMove: ['pointermove', true],
-  onPointerCancel: ['pointercancel', true],
-  onLostPointerCapture: ['lostpointercapture', true]
-};
+/* eslint-disable react-hooks/rules-of-hooks */
+function useMeasure({
+  debounce,
+  scroll,
+  polyfill,
+  offsetSize
+} = {
+  debounce: 0,
+  scroll: false,
+  offsetSize: false
+}) {
+  const ResizeObserver = polyfill || typeof window !== 'undefined' && window.ResizeObserver;
+  const [bounds, set] = React.useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0
+  });
 
-/** Default R3F event manager for web */
-function createPointerEvents(store) {
-  const {
-    handlePointer
-  } = loop.createEvents(store);
-  return {
-    priority: 1,
-    enabled: true,
-    compute(event, state, previous) {
-      // https://github.com/pmndrs/react-three-fiber/pull/782
-      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
-      state.raycaster.setFromCamera(state.pointer, state.camera);
-    },
-    connected: undefined,
-    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
-      ...acc,
-      [key]: handlePointer(key)
-    }), {}),
-    update: () => {
-      var _internal$lastEvent;
-      const {
-        events,
-        internal
-      } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
-    },
-    connect: target => {
+  // In test mode
+  if (!ResizeObserver) {
+    // @ts-ignore
+    bounds.width = 1280;
+    // @ts-ignore
+    bounds.height = 800;
+    return [() => {}, bounds, () => {}];
+  }
+
+  // keep all state in a ref
+  const state = React.useRef({
+    element: null,
+    scrollContainers: null,
+    resizeObserver: null,
+    lastBounds: bounds,
+    orientationHandler: null
+  });
+
+  // set actual debounce values early, so effects know if they should react accordingly
+  const scrollDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.scroll : null;
+  const resizeDebounce = debounce ? typeof debounce === 'number' ? debounce : debounce.resize : null;
+
+  // make sure to update state only as long as the component is truly mounted
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    mounted.current = true;
+    return () => void (mounted.current = false);
+  });
+
+  // memoize handlers, so event-listeners know when they should update
+  const [forceRefresh, resizeChange, scrollChange] = React.useMemo(() => {
+    const callback = () => {
+      if (!state.current.element) return;
       const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: target
-        }
-      }));
-      if (events.handlers) {
-        for (const name in events.handlers) {
-          const event = events.handlers[name];
-          const [eventName, passive] = DOM_EVENTS[name];
-          target.addEventListener(eventName, event, {
-            passive
-          });
-        }
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      } = state.current.element.getBoundingClientRect();
+      const size = {
+        left,
+        top,
+        width,
+        height,
+        bottom,
+        right,
+        x,
+        y
+      };
+      if (state.current.element instanceof HTMLElement && offsetSize) {
+        size.height = state.current.element.offsetHeight;
+        size.width = state.current.element.offsetWidth;
       }
-    },
-    disconnect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-      if (events.connected) {
-        if (events.handlers) {
-          for (const name in events.handlers) {
-            const event = events.handlers[name];
-            const [eventName] = DOM_EVENTS[name];
-            events.connected.removeEventListener(eventName, event);
-          }
-        }
-        set(state => ({
-          events: {
-            ...state.events,
-            connected: undefined
-          }
-        }));
+      Object.freeze(size);
+      if (mounted.current && !areBoundsEqual(state.current.lastBounds, size)) set(state.current.lastBounds = size);
+    };
+    return [callback, resizeDebounce ? createDebounce__default["default"](callback, resizeDebounce) : callback, scrollDebounce ? createDebounce__default["default"](callback, scrollDebounce) : callback];
+  }, [set, offsetSize, scrollDebounce, resizeDebounce]);
+
+  // cleanup current scroll-listeners / observers
+  function removeListeners() {
+    if (state.current.scrollContainers) {
+      state.current.scrollContainers.forEach(element => element.removeEventListener('scroll', scrollChange, true));
+      state.current.scrollContainers = null;
+    }
+    if (state.current.resizeObserver) {
+      state.current.resizeObserver.disconnect();
+      state.current.resizeObserver = null;
+    }
+    if (state.current.orientationHandler) {
+      if ('orientation' in screen && 'removeEventListener' in screen.orientation) {
+        screen.orientation.removeEventListener('change', state.current.orientationHandler);
+      } else if ('onorientationchange' in window) {
+        window.removeEventListener('orientationchange', state.current.orientationHandler);
       }
     }
+  }
+
+  // add scroll-listeners / observers
+  function addListeners() {
+    var _state$current$resize;
+    if (!state.current.element) return;
+    state.current.resizeObserver = new ResizeObserver(resizeChange);
+    (_state$current$resize = state.current.resizeObserver) == null ? void 0 : _state$current$resize.observe(state.current.element);
+    if (scroll && state.current.scrollContainers) {
+      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
+        capture: true,
+        passive: true
+      }));
+    }
+
+    // Handle orientation changes
+    state.current.orientationHandler = () => {
+      scrollChange();
+    };
+
+    // Use screen.orientation if available
+    if ('orientation' in screen && 'addEventListener' in screen.orientation) {
+      screen.orientation.addEventListener('change', state.current.orientationHandler);
+    } else if ('onorientationchange' in window) {
+      // Fallback to orientationchange event
+      window.addEventListener('orientationchange', state.current.orientationHandler);
+    }
+  }
+
+  // the ref we expose to the user
+  const ref = node => {
+    if (!node || node === state.current.element) return;
+    removeListeners();
+    state.current.element = node;
+    state.current.scrollContainers = findScrollContainers(node);
+    addListeners();
   };
+
+  // add general event listeners
+  useOnWindowScroll(scrollChange, Boolean(scroll));
+  useOnWindowResize(resizeChange);
+
+  // respond to changes that are relevant for the listeners
+  React.useEffect(() => {
+    removeListeners();
+    addListeners();
+  }, [scroll, scrollChange, resizeChange]);
+
+  // remove all listeners when the components unmounts
+  React.useEffect(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
+}
+
+// Adds native resize listener to window
+function useOnWindowResize(onWindowResize) {
+  React.useEffect(() => {
+    const cb = onWindowResize;
+    window.addEventListener('resize', cb);
+    return () => void window.removeEventListener('resize', cb);
+  }, [onWindowResize]);
 }
+function useOnWindowScroll(onScroll, enabled) {
+  React.useEffect(() => {
+    if (enabled) {
+      const cb = onScroll;
+      window.addEventListener('scroll', cb, {
+        capture: true,
+        passive: true
+      });
+      return () => void window.removeEventListener('scroll', cb, true);
+    }
+  }, [onScroll, enabled]);
+}
+
+// Returns a list of scroll offsets
+function findScrollContainers(element) {
+  const result = [];
+  if (!element || element === document.body) return result;
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = window.getComputedStyle(element);
+  if ([overflow, overflowX, overflowY].some(prop => prop === 'auto' || prop === 'scroll')) result.push(element);
+  return [...result, ...findScrollContainers(element.parentElement)];
+}
+
+// Checks if element boundaries are equal
+const keys = ['x', 'y', 'top', 'bottom', 'left', 'right', 'width', 'height'];
+const areBoundsEqual = (a, b) => keys.every(key => a[key] === b[key]);
 
 const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
@@ -130,7 +238,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   resize,
   style,
   gl,
-  events = createPointerEvents,
+  events: events$1 = events.createPointerEvents,
   eventSource,
   eventPrefix,
   shadows,
@@ -151,9 +259,9 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
-  React__namespace.useMemo(() => loop.extend(THREE__namespace), []);
-  const Bridge = loop.useBridge();
-  const [containerRef, containerRect] = useMeasure__default["default"]({
+  React__namespace.useMemo(() => events.extend(THREE__namespace), []);
+  const Bridge = events.useBridge();
+  const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -164,7 +272,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
   React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
-  const handlePointerMissed = loop.useMutableCallback(onPointerMissed);
+  const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false);
 
@@ -173,14 +281,14 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-  loop.useIsomorphicLayoutEffect(() => {
+  events.useIsomorphicLayoutEffect(() => {
     const canvas = canvasRef.current;
     if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-      if (!root.current) root.current = loop.createRoot(canvas);
+      if (!root.current) root.current = events.createRoot(canvas);
       root.current.configure({
         gl,
         scene,
-        events,
+        events: events$1,
         shadows,
         linear,
         flat,
@@ -196,7 +304,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
         onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
         onCreated: state => {
           // Connect to event source
-          state.events.connect == null ? void 0 : state.events.connect(eventSource ? loop.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? events.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
           // Set up compute function
           if (eventPrefix) {
             state.setEvents({
@@ -213,10 +321,10 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
         }
       });
       root.current.render( /*#__PURE__*/jsxRuntime.jsx(Bridge, {
-        children: /*#__PURE__*/jsxRuntime.jsx(loop.ErrorBoundary, {
+        children: /*#__PURE__*/jsxRuntime.jsx(events.ErrorBoundary, {
           set: setError,
           children: /*#__PURE__*/jsxRuntime.jsx(React__namespace.Suspense, {
-            fallback: /*#__PURE__*/jsxRuntime.jsx(loop.Block, {
+            fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
               set: setBlock
             }),
             children: children
@@ -227,7 +335,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   React__namespace.useEffect(() => {
     const canvas = canvasRef.current;
-    if (canvas) return () => loop.unmountComponentAtNode(canvas);
+    if (canvas) return () => events.unmountComponentAtNode(canvas);
   }, []);
 
   // When the event source is not this div, we need to set pointer-events to none
@@ -274,32 +382,32 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   });
 });
 
-exports.ReactThreeFiber = loop.threeTypes;
-exports._roots = loop._roots;
-exports.act = loop.act;
-exports.addAfterEffect = loop.addAfterEffect;
-exports.addEffect = loop.addEffect;
-exports.addTail = loop.addTail;
-exports.advance = loop.advance;
-exports.applyProps = loop.applyProps;
-exports.buildGraph = loop.buildGraph;
-exports.context = loop.context;
-exports.createEvents = loop.createEvents;
-exports.createPortal = loop.createPortal;
-exports.createRoot = loop.createRoot;
-exports.dispose = loop.dispose;
-exports.extend = loop.extend;
-exports.flushGlobalEffects = loop.flushGlobalEffects;
-exports.getRootState = loop.getRootState;
-exports.invalidate = loop.invalidate;
-exports.reconciler = loop.reconciler;
-exports.render = loop.render;
-exports.unmountComponentAtNode = loop.unmountComponentAtNode;
-exports.useFrame = loop.useFrame;
-exports.useGraph = loop.useGraph;
-exports.useInstanceHandle = loop.useInstanceHandle;
-exports.useLoader = loop.useLoader;
-exports.useStore = loop.useStore;
-exports.useThree = loop.useThree;
+exports.ReactThreeFiber = events.threeTypes;
+exports._roots = events._roots;
+exports.act = events.act;
+exports.addAfterEffect = events.addAfterEffect;
+exports.addEffect = events.addEffect;
+exports.addTail = events.addTail;
+exports.advance = events.advance;
+exports.applyProps = events.applyProps;
+exports.buildGraph = events.buildGraph;
+exports.context = events.context;
+exports.createEvents = events.createEvents;
+exports.createPortal = events.createPortal;
+exports.createRoot = events.createRoot;
+exports.dispose = events.dispose;
+exports.events = events.createPointerEvents;
+exports.extend = events.extend;
+exports.flushGlobalEffects = events.flushGlobalEffects;
+exports.getRootState = events.getRootState;
+exports.invalidate = events.invalidate;
+exports.reconciler = events.reconciler;
+exports.render = events.render;
+exports.unmountComponentAtNode = events.unmountComponentAtNode;
+exports.useFrame = events.useFrame;
+exports.useGraph = events.useGraph;
+exports.useInstanceHandle = events.useInstanceHandle;
+exports.useLoader = events.useLoader;
+exports.useStore = events.useStore;
+exports.useThree = events.useThree;
 exports.Canvas = Canvas;
-exports.events = createPointerEvents;