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

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var loop = require('../../dist/loop-dfcc9ca9.cjs.prod.js');
+var events = require('../../dist/events-cb1a9ea0.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -15,9 +15,9 @@ var base64Js = require('base64-js');
 var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -41,88 +41,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var fs__namespace = /*#__PURE__*/_interopNamespace(fs);
 
-/** Default R3F event manager for react-native */
-function createTouchEvents(store) {
-  const {
-    handlePointer
-  } = loop.createEvents(store);
-  const handleTouch = (event, name) => {
-    event.persist()
-
-    // Apply offset
-    ;
-    event.nativeEvent.offsetX = event.nativeEvent.locationX;
-    event.nativeEvent.offsetY = event.nativeEvent.locationY;
-
-    // Emulate DOM event
-    const callback = handlePointer(name);
-    callback(event.nativeEvent);
-    return true;
-  };
-  const responder = reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponderCapture: () => true,
-    onPanResponderTerminationRequest: () => true,
-    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
-    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
-    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
-    onPanResponderEnd: (e, state) => {
-      handleTouch(e, 'onPointerUp');
-      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
-    },
-    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
-    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
-    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
-  });
-  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: responder.panHandlers,
-    update: () => {
-      var _internal$lastEvent;
-      const {
-        events,
-        internal
-      } = store.getState();
-      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
-        handlePointer('onPointerMove')(internal.lastEvent.current);
-      }
-    },
-    connect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: true
-        }
-      }));
-    },
-    disconnect: () => {
-      const {
-        set
-      } = store.getState();
-      set(state => ({
-        events: {
-          ...state.events,
-          connected: false
-        }
-      }));
-    }
-  };
-}
-
 // TODO: React 19 needs support from react-native
 const _View = reactNative.View;
 /**
@@ -133,7 +51,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   gl,
-  events = createTouchEvents,
+  events: events$1 = events.createPointerEvents,
   shadows,
   linear,
   flat,
@@ -151,8 +69,8 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   // 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();
+  React__namespace.useMemo(() => events.extend(THREE__namespace), []);
+  const Bridge = events.useBridge();
   const [{
     width,
     height,
@@ -167,7 +85,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
   React__namespace.useImperativeHandle(forwardedRef, () => viewRef.current);
-  const handlePointerMissed = loop.useMutableCallback(onPointerMissed);
+  const handlePointerMissed = events.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(undefined);
 
@@ -196,27 +114,92 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   // Called on context create or swap
   // https://github.com/pmndrs/react-three-fiber/pull/2297
   const onContextCreate = React__namespace.useCallback(context => {
-    const canvasShim = {
+    const listeners = new Map();
+    const canvas = {
+      style: {},
       width: context.drawingBufferWidth,
       height: context.drawingBufferHeight,
-      style: {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
+      clientWidth: context.drawingBufferWidth,
       clientHeight: context.drawingBufferHeight,
       getContext: (_, {
         antialias = false
       }) => {
         setAntialias(antialias);
         return context;
+      },
+      addEventListener(type, listener) {
+        let callbacks = listeners.get(type);
+        if (!callbacks) {
+          callbacks = [];
+          listeners.set(type, callbacks);
+        }
+        callbacks.push(listener);
+      },
+      removeEventListener(type, listener) {
+        const callbacks = listeners.get(type);
+        if (callbacks) {
+          const index = callbacks.indexOf(listener);
+          if (index !== -1) callbacks.splice(index, 1);
+        }
+      },
+      dispatchEvent(event) {
+        Object.assign(event, {
+          target: this
+        });
+        const callbacks = listeners.get(event.type);
+        if (callbacks) {
+          for (const callback of callbacks) {
+            callback(event);
+          }
+        }
+      },
+      setPointerCapture() {
+        // TODO
+      },
+      releasePointerCapture() {
+        // TODO
       }
     };
-    root.current = loop.createRoot(canvasShim);
-    setCanvas(canvasShim);
+
+    // TODO: this is wrong but necessary to trick controls
+    // @ts-ignore
+    canvas.ownerDocument = canvas;
+    canvas.getRootNode = () => canvas;
+    root.current = events.createRoot(canvas);
+    setCanvas(canvas);
+    function handleTouch(gestureEvent, type) {
+      gestureEvent.persist();
+      canvas.dispatchEvent(Object.assign(gestureEvent.nativeEvent, {
+        type,
+        offsetX: gestureEvent.nativeEvent.locationX,
+        offsetY: gestureEvent.nativeEvent.locationY,
+        pointerType: 'touch',
+        pointerId: gestureEvent.nativeEvent.identifier
+      }));
+      return true;
+    }
+    const responder = reactNative.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderTerminationRequest: () => true,
+      onStartShouldSetPanResponderCapture: e => handleTouch(e, 'pointercapture'),
+      onPanResponderStart: e => handleTouch(e, 'pointerdown'),
+      onPanResponderMove: e => handleTouch(e, 'pointermove'),
+      onPanResponderEnd: (e, state) => {
+        handleTouch(e, 'pointerup');
+        if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'click');
+      },
+      onPanResponderRelease: e => handleTouch(e, 'pointerleave'),
+      onPanResponderTerminate: e => handleTouch(e, 'lostpointercapture'),
+      onPanResponderReject: e => handleTouch(e, 'lostpointercapture')
+    });
+    setBind(responder.panHandlers);
   }, []);
   if (root.current && width > 0 && height > 0) {
     root.current.configure({
       gl,
-      events,
+      events: events$1,
       shadows,
       linear,
       flat,
@@ -240,9 +223,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // Overwrite onCreated to apply RN bindings
       onCreated: state => {
-        // Bind events after creation
-        setBind(state.events.handlers);
-
         // Bind render to RN bridge
         const context = state.gl.getContext();
         const renderFrame = state.gl.render.bind(state.gl);
@@ -254,10 +234,10 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
       }
     });
     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
@@ -267,7 +247,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   }
   React__namespace.useEffect(() => {
     if (canvas) {
-      return () => loop.unmountComponentAtNode(canvas);
+      return () => events.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
   return /*#__PURE__*/jsxRuntime.jsx(_View, {
@@ -300,6 +280,88 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(p
   });
 });
 
+/** Default R3F event manager for react-native */
+function createTouchEvents(store) {
+  const {
+    handlePointer
+  } = events.createEvents(store);
+  const handleTouch = (event, name) => {
+    event.persist()
+
+    // Apply offset
+    ;
+    event.nativeEvent.offsetX = event.nativeEvent.locationX;
+    event.nativeEvent.offsetY = event.nativeEvent.locationY;
+
+    // Emulate DOM event
+    const callback = handlePointer(name);
+    callback(event.nativeEvent);
+    return true;
+  };
+  const responder = reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: e => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: e => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: e => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp');
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick');
+    },
+    onPanResponderRelease: e => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: e => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: e => handleTouch(e, 'onLostPointerCapture')
+  });
+  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: responder.panHandlers,
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current);
+      }
+    },
+    connect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: true
+        }
+      }));
+    },
+    disconnect: () => {
+      const {
+        set
+      } = store.getState();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: false
+        }
+      }));
+    }
+  };
+}
+
 // http://stackoverflow.com/questions/105034
 function uuidv4() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
@@ -461,32 +523,32 @@ function polyfills() {
 
 if (reactNative.Platform.OS !== 'web') polyfills();
 
-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.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 = createTouchEvents;