@react-three/fiber 8.16.7 → 8.17.0

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

@@ -1,100 +1,189 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-ba8afaa4.esm.js';
-export { t as ReactThreeFiber, x as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, w as buildGraph, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './index-ba8afaa4.esm.js';
+import { c as createPointerEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './events-3515660a.esm.js';
+export { t as ReactThreeFiber, z as _roots, x as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, y as buildGraph, g as context, f as createEvents, c as createPointerEvents, h as createPortal, b as createRoot, l as dispose, c as events, e as extend, s as flushGlobalEffects, v as flushSync, w as getRootState, m as invalidate, j as reconciler, r as render, d as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from './events-3515660a.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, useContextBridge } from 'its-fine';
 import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand';
+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 => {
-      var _events$handlers;
-      const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: target
-        }
-      }));
-      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
-        const [eventName, passive] = DOM_EVENTS[name];
-        target.addEventListener(eventName, event, {
-          passive
-        });
-      });
-    },
-    disconnect: () => {
+/* 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
+  });
+
+  // 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();
-      if (events.connected) {
-        var _events$handlers2;
-        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
-          if (events && events.connected instanceof HTMLElement) {
-            const [eventName] = DOM_EVENTS[name];
-            events.connected.removeEventListener(eventName, event);
-          }
-        });
-        set(state => ({
-          events: {
-            ...state.events,
-            connected: undefined
-          }
-        }));
+        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;
       }
+      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;
+    }
+  }
+
+  // add scroll-listeners / observers
+  function addListeners() {
+    if (!state.current.element) return;
+    state.current.resizeObserver = new ResizeObserver(scrollChange);
+    state.current.resizeObserver.observe(state.current.element);
+    if (scroll && state.current.scrollContainers) {
+      state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
+        capture: true,
+        passive: true
+      }));
     }
+  }
+
+  // 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,
   fallback,
@@ -245,4 +334,4 @@ const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref)
   });
 });
 
-export { Canvas, createPointerEvents as events };
+export { Canvas };