@react-three/fiber 9.0.0-rc.8 → 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-5b423474.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.
@@ -369,6 +370,8 @@ function applyProps(object, props) {
     // 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) {
@@ -380,9 +383,8 @@ function applyProps(object, props) {
     }
     // Set literal types
     else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2296,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-89dd614d.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.
@@ -395,6 +396,8 @@ function applyProps(object, props) {
     // 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) {
@@ -406,9 +409,8 @@ function applyProps(object, props) {
     }
     // Set literal types
     else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2322,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-b4105f71.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.
@@ -395,6 +396,8 @@ function applyProps(object, props) {
     // 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) {
@@ -406,9 +409,8 @@ function applyProps(object, props) {
     }
     // Set literal types
     else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2322,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-89dd614d.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-b4105f71.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-5b423474.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-5b423474.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-89dd614d.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-b4105f71.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-5b423474.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-5b423474.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.8",
+  "version": "9.0.0-rc.9",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",