@react-three/fiber 9.0.0-rc.7 → 9.0.0-rc.9

package/dist/declarations/src/core/events.d.ts

@@ -56,6 +56,7 @@ export interface EventHandlers {
     onPointerMissed?: (event: MouseEvent) => void;
     onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
     onWheel?: (event: ThreeEvent<WheelEvent>) => void;
+    onLostPointerCapture?: (event: ThreeEvent<PointerEvent>) => void;
 }
 export type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
 export type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;

package/dist/declarations/src/core/utils.d.ts

@@ -27,6 +27,7 @@ export type Camera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & {
 };
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const isRef: (obj: any) => obj is React.RefObject<unknown>;
+export declare const isColorRepresentation: (value: unknown) => value is THREE.ColorRepresentation;
 /**
  * An SSR-friendly useLayoutEffect.
  *

package/dist/{events-12fa3319.esm.js → events-aba3c3d1.esm.js}

@@ -26,6 +26,7 @@ function findInitialRoot(instance) {
 const act = React.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -366,29 +367,24 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
-    // Copy if properties match signatures
-    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      // fetch the default state of the target
-      const ctor = getMemoizedPrototype(root);
-      // The target key was originally null or undefined, which indicates that the object which
-      // is now present was externally set by the user, we should therefore assign the value directly
-      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
-      // Otherwise copy is correct
-      else target.copy(value);
-    }
-    // Layers have no copy function, we must therefore copy the mask property
-    else if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
+    // Layers must be written to the mask property
+    if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
       target.mask = value.mask;
+    } else if (target instanceof THREE.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
+    // Copy if properties match signatures and implement math interface (likely read-only)
+    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+      target.copy(value);
     }
     // Set array types
-    else if (target != null && target.set && Array.isArray(value)) {
-      if (target.fromArray) target.fromArray(value);else target.set(...value);
+    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+      if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target != null && target.set && typeof value !== 'object') {
-      const isColor = target == null ? void 0 : target.isColor;
+    else if (target && typeof target.set === 'function' && typeof value === 'number') {
       // Allow setting array scalars
-      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value);
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2302,7 +2298,7 @@ function createPointerEvents(store) {
     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.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      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,

package/dist/{events-56f909a9.cjs.dev.js → events-b02714fc.cjs.dev.js}

@@ -52,6 +52,7 @@ function findInitialRoot(instance) {
 const act = React__namespace.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -392,29 +393,24 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
-    // Copy if properties match signatures
-    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      // fetch the default state of the target
-      const ctor = getMemoizedPrototype(root);
-      // The target key was originally null or undefined, which indicates that the object which
-      // is now present was externally set by the user, we should therefore assign the value directly
-      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
-      // Otherwise copy is correct
-      else target.copy(value);
-    }
-    // Layers have no copy function, we must therefore copy the mask property
-    else if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
+    // Layers must be written to the mask property
+    if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
+    } else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
+    // Copy if properties match signatures and implement math interface (likely read-only)
+    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+      target.copy(value);
     }
     // Set array types
-    else if (target != null && target.set && Array.isArray(value)) {
-      if (target.fromArray) target.fromArray(value);else target.set(...value);
+    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+      if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target != null && target.set && typeof value !== 'object') {
-      const isColor = target == null ? void 0 : target.isColor;
+    else if (target && typeof target.set === 'function' && typeof value === 'number') {
       // Allow setting array scalars
-      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value);
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2328,7 +2324,7 @@ function createPointerEvents(store) {
     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.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      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,

package/dist/{events-858f07e7.cjs.prod.js → events-bd708dc8.cjs.prod.js}

@@ -52,6 +52,7 @@ function findInitialRoot(instance) {
 const act = React__namespace.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -392,29 +393,24 @@ function applyProps(object, props) {
       target
     } = resolve(object, prop);
 
-    // Copy if properties match signatures
-    if (target != null && target.copy && value != null && value.constructor && target.constructor === value.constructor) {
-      // fetch the default state of the target
-      const ctor = getMemoizedPrototype(root);
-      // The target key was originally null or undefined, which indicates that the object which
-      // is now present was externally set by the user, we should therefore assign the value directly
-      if (!is.und(ctor) && (is.und(ctor[key]) || is.nul(ctor[key]))) root[key] = value;
-      // Otherwise copy is correct
-      else target.copy(value);
-    }
-    // Layers have no copy function, we must therefore copy the mask property
-    else if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
+    // Layers must be written to the mask property
+    if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
+    } else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
+    // Copy if properties match signatures and implement math interface (likely read-only)
+    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+      target.copy(value);
     }
     // Set array types
-    else if (target != null && target.set && Array.isArray(value)) {
-      if (target.fromArray) target.fromArray(value);else target.set(...value);
+    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+      if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target != null && target.set && typeof value !== 'object') {
-      const isColor = target == null ? void 0 : target.isColor;
+    else if (target && typeof target.set === 'function' && typeof value === 'number') {
       // Allow setting array scalars
-      if (!isColor && target.setScalar && typeof value === 'number') target.setScalar(value);
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2328,7 +2324,7 @@ function createPointerEvents(store) {
     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.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      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,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-56f909a9.cjs.dev.js');
+var events = require('./events-b02714fc.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-858f07e7.cjs.prod.js');
+var events = require('./events-bd708dc8.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');

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

@@ -1,5 +1,5 @@
-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-12fa3319.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, f as events, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './events-12fa3319.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-aba3c3d1.esm.js';
+export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, f as events, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './events-aba3c3d1.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-56f909a9.cjs.dev.js');
+var events = require('../../dist/events-b02714fc.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-858f07e7.cjs.prod.js');
+var events = require('../../dist/events-bd708dc8.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

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

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-12fa3319.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-12fa3319.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-aba3c3d1.esm.js';
+export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-aba3c3d1.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-rc.7",
+  "version": "9.0.0-rc.9",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",