@react-three/fiber 8.12.1 → 8.12.2

package/CHANGELOG.md

@@ -1,10 +1,16 @@
 # @react-three/fiber
 
+## 8.12.2
+
+### Patch Changes
+
+- c5193468: fix: safeguard window.devicePixelRatio
+
 ## 8.12.1
 
 ### Patch Changes
 
-- 572f25fa: add support for onlostpointercapture
+- 571f07ac: fix: safeguard window.devicePixelRatio
 
 ## 8.12.0
 

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

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

package/dist/{index-ca508128.cjs.prod.js → index-1fcbd5a8.cjs.prod.js}

@@ -432,7 +432,10 @@ const DEFAULT = '__default';
 const DEFAULTS = new Map();
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  var _window$devicePixelRa;
+  // Err on the side of progress by assuming 2x dpr if we can't detect it
+  // This will happen in workers where window is defined but dpr isn't.
+  const target = typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) != null ? _window$devicePixelRa : 2 : 1;
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
@@ -619,7 +622,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1086,6 +1089,25 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
+      case 'onLostPointerCapture':
+        return event => {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
+          }
+        };
     }
 
     // Any other pointer goes here ...
@@ -1100,7 +1122,6 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
-      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1120,7 +1141,6 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
-
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1164,24 +1184,6 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
-        } else if (isLostPointerCapture) {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
-              }
-            });
-          }
         } else {
           // All other events ...
           const handler = handlers[name];

package/dist/{index-faa0fc56.esm.js → index-21bbaaf9.esm.js}

@@ -405,7 +405,10 @@ const DEFAULT = '__default';
 const DEFAULTS = new Map();
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  var _window$devicePixelRa;
+  // Err on the side of progress by assuming 2x dpr if we can't detect it
+  // This will happen in workers where window is defined but dpr isn't.
+  const target = typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) != null ? _window$devicePixelRa : 2 : 1;
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
@@ -592,7 +595,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1059,6 +1062,25 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
+      case 'onLostPointerCapture':
+        return event => {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
+          }
+        };
     }
 
     // Any other pointer goes here ...
@@ -1073,7 +1095,6 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
-      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1093,7 +1114,6 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
-
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1137,24 +1157,6 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
-        } else if (isLostPointerCapture) {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
-              }
-            });
-          }
         } else {
           // All other events ...
           const handler = handlers[name];

package/dist/{index-12cac964.cjs.dev.js → index-ab4b9c97.cjs.dev.js}

@@ -432,7 +432,10 @@ const DEFAULT = '__default';
 const DEFAULTS = new Map();
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  var _window$devicePixelRa;
+  // Err on the side of progress by assuming 2x dpr if we can't detect it
+  // This will happen in workers where window is defined but dpr isn't.
+  const target = typeof window !== 'undefined' ? (_window$devicePixelRa = window.devicePixelRatio) != null ? _window$devicePixelRa : 2 : 1;
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 
@@ -619,7 +622,7 @@ function diffProps(instance, {
     // When props match bail out
     if (is.equ(value, previous[key])) return;
     // Collect handlers and bail out
-    if (/^on(LostPointer|Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]);
     // Split dashed props
     let entries = [];
     if (key.includes('-')) entries = key.split('-');
@@ -1086,6 +1089,25 @@ function createEvents(store) {
       case 'onPointerLeave':
       case 'onPointerCancel':
         return () => cancelPointer([]);
+      case 'onLostPointerCapture':
+        return event => {
+          const {
+            internal
+          } = store.getState();
+          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
+            // If the object event interface had onLostPointerCapture, we'd call it here on every
+            // object that's getting removed. We call it on the next frame because onLostPointerCapture
+            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
+            // happen in the object it originated from, leaving components in a in-between state.
+            requestAnimationFrame(() => {
+              // Only release if pointer-up didn't do it already
+              if (internal.capturedMap.has(event.pointerId)) {
+                internal.capturedMap.delete(event.pointerId);
+                cancelPointer([]);
+              }
+            });
+          }
+        };
     }
 
     // Any other pointer goes here ...
@@ -1100,7 +1122,6 @@ function createEvents(store) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove';
-      const isLostPointerCapture = name === 'onLostPointerCapture';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
       const filter = isPointerMove ? filterPointerEvents : undefined;
       const hits = intersect(event, filter);
@@ -1120,7 +1141,6 @@ function createEvents(store) {
           if (onPointerMissed) onPointerMissed(event);
         }
       }
-
       // Take care of unhover
       if (isPointerMove) cancelPointer(hits);
       function onIntersect(data) {
@@ -1164,24 +1184,6 @@ function createEvents(store) {
           }
           // Call mouse move
           handlers.onPointerMove == null ? void 0 : handlers.onPointerMove(data);
-        } else if (isLostPointerCapture) {
-          const {
-            internal
-          } = store.getState();
-          if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-            // If the object event interface had onLostPointerCapture, we'd call it here on every
-            // object that's getting removed. We call it on the next frame because onLostPointerCapture
-            // fires before onPointerUp. Otherwise pointerUp would never be called if the event didn't
-            // happen in the object it originated from, leaving components in a in-between state.
-            requestAnimationFrame(() => {
-              // Only release if pointer-up didn't do it already
-              if (internal.capturedMap.has(event.pointerId)) {
-                internal.capturedMap.delete(event.pointerId);
-                cancelPointer([]);
-                handlers.onLostPointerCapture == null ? void 0 : handlers.onLostPointerCapture(data);
-              }
-            });
-          }
         } else {
           // All other events ...
           const handler = handlers[name];

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-12cac964.cjs.dev.js');
+var index = require('./index-ab4b9c97.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ca508128.cjs.prod.js');
+var index = require('./index-1fcbd5a8.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-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-faa0fc56.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-faa0fc56.esm.js';
+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-21bbaaf9.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-21bbaaf9.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-12cac964.cjs.dev.js');
+var index = require('../../dist/index-ab4b9c97.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-ca508128.cjs.prod.js');
+var index = require('../../dist/index-1fcbd5a8.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-faa0fc56.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-faa0fc56.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-21bbaaf9.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, 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, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-21bbaaf9.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.12.1",
+  "version": "8.12.2",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",