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

package/dist/react-three-fiber.esm.js

@@ -1,101 +1,210 @@
-import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-b00a3b86.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, q as applyProps, x as buildGraph, p as context, c as createEvents, o as createPortal, d as createRoot, v as dispose, e as extend, g as flushGlobalEffects, s as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './loop-b00a3b86.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-5a08b43f.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, p as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, v as getRootState, m as invalidate, r as reconciler, o as render, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-5a08b43f.esm.js';
 import * as React from 'react';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import * as THREE from 'three';
-import useMeasure from 'react-use-measure';
+import createDebounce from 'debounce';
 import { FiberProvider } from 'its-fine';
 import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
+import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
-import 'suspend-react';
 
-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]
-};
-
-/** Default R3F event manager for web */
-function createPointerEvents(store) {
-  const {
-    handlePointer
-  } = 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 => {
+/* 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] = useState({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    bottom: 0,
+    right: 0,
+    x: 0,
+    y: 0
+  });
+
+  // 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 = 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 = useRef(false);
+  useEffect(() => {
+    mounted.current = true;
+    return () => void (mounted.current = false);
+  });
+
+  // memoize handlers, so event-listeners know when they should update
+  const [forceRefresh, resizeChange, scrollChange] = 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(callback, resizeDebounce) : callback, scrollDebounce ? createDebounce(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
+  useEffect(() => {
+    removeListeners();
+    addListeners();
+  }, [scroll, scrollChange, resizeChange]);
+
+  // remove all listeners when the components unmounts
+  useEffect(() => removeListeners, []);
+  return [ref, bounds, forceRefresh];
+}
+
+// Adds native resize listener to window
+function useOnWindowResize(onWindowResize) {
+  useEffect(() => {
+    const cb = onWindowResize;
+    window.addEventListener('resize', cb);
+    return () => void window.removeEventListener('resize', cb);
+  }, [onWindowResize]);
 }
+function useOnWindowScroll(onScroll, enabled) {
+  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.forwardRef(function Canvas({
   children,
@@ -247,4 +356,4 @@ const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref)
   });
 });
 
-export { Canvas, createPointerEvents as events };
+export { Canvas };