@react-three/fiber 7.0.26 → 7.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,306 +0,0 @@
1
- import * as THREE from 'three';
2
- import { Asset } from 'expo-asset';
3
- import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-3f4e5f46.esm.js';
4
- export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-3f4e5f46.esm.js';
5
- import _extends from '@babel/runtime/helpers/esm/extends';
6
- import * as React from 'react';
7
- import { PixelRatio, View, StyleSheet } from 'react-native';
8
- import { GLView } from 'expo-gl';
9
- import Pressability from 'react-native/Libraries/Pressability/Pressability';
10
- import 'suspend-react';
11
- import 'react-reconciler/constants';
12
- import 'zustand';
13
- import 'react-reconciler';
14
- import 'scheduler';
15
-
16
- const EVENTS = {
17
- PRESS: 'onPress',
18
- PRESSIN: 'onPressIn',
19
- PRESSOUT: 'onPressOut',
20
- LONGPRESS: 'onLongPress',
21
- HOVERIN: 'onHoverIn',
22
- HOVEROUT: 'onHoverOut',
23
- PRESSMOVE: 'onPressMove'
24
- };
25
- const DOM_EVENTS = {
26
- [EVENTS.PRESS]: 'onClick',
27
- [EVENTS.PRESSIN]: 'onPointerDown',
28
- [EVENTS.PRESSOUT]: 'onPointerUp',
29
- [EVENTS.LONGPRESS]: 'onDoubleClick',
30
- [EVENTS.HOVERIN]: 'onPointerOver',
31
- [EVENTS.HOVEROUT]: 'onPointerOut',
32
- [EVENTS.PRESSMOVE]: 'onPointerMove'
33
- };
34
- function createTouchEvents(store) {
35
- const {
36
- handlePointer
37
- } = createEvents(store);
38
-
39
- const handleTouch = (event, name) => {
40
- event.persist() // Apply offset
41
- ;
42
- event.nativeEvent.offsetX = event.nativeEvent.locationX;
43
- event.nativeEvent.offsetY = event.nativeEvent.locationY; // Emulate DOM event
44
-
45
- const callback = handlePointer(DOM_EVENTS[name]);
46
- return callback(event.nativeEvent);
47
- };
48
-
49
- return {
50
- connected: false,
51
- handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
52
- [name]: event => handleTouch(event, name)
53
- }), {}),
54
- connect: () => {
55
- const {
56
- set,
57
- events
58
- } = store.getState();
59
- events.disconnect == null ? void 0 : events.disconnect();
60
- const connected = new Pressability(events == null ? void 0 : events.handlers);
61
- set(state => ({
62
- events: { ...state.events,
63
- connected
64
- }
65
- }));
66
- const handlers = connected.getEventHandlers();
67
- return handlers;
68
- },
69
- disconnect: () => {
70
- const {
71
- set,
72
- events
73
- } = store.getState();
74
-
75
- if (events.connected) {
76
- events.connected.reset();
77
- set(state => ({
78
- events: { ...state.events,
79
- connected: false
80
- }
81
- }));
82
- }
83
- }
84
- };
85
- }
86
-
87
- const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
88
-
89
- function Block({
90
- set
91
- }) {
92
- React.useLayoutEffect(() => {
93
- set(new Promise(() => null));
94
- return () => set(false);
95
- }, [set]);
96
- return null;
97
- }
98
-
99
- class ErrorBoundary extends React.Component {
100
- constructor(...args) {
101
- super(...args);
102
- this.state = {
103
- error: false
104
- };
105
- }
106
-
107
- componentDidCatch(error) {
108
- this.props.set(error);
109
- }
110
-
111
- render() {
112
- return this.state.error ? null : this.props.children;
113
- }
114
-
115
- }
116
-
117
- ErrorBoundary.getDerivedStateFromError = () => ({
118
- error: true
119
- });
120
-
121
- const Canvas = /*#__PURE__*/React.forwardRef(({
122
- children,
123
- fallback,
124
- style,
125
- events,
126
- ...props
127
- }, forwardedRef) => {
128
- // Create a known catalogue of Threejs-native elements
129
- // This will include the entire THREE namespace by default, users can extend
130
- // their own elements by using the createRoot API instead
131
- React.useMemo(() => extend(THREE), []);
132
- const [{
133
- width,
134
- height
135
- }, setSize] = React.useState({
136
- width: 0,
137
- height: 0
138
- });
139
- const [canvas, setCanvas] = React.useState(null);
140
- const [bind, setBind] = React.useState();
141
- const canvasProps = pick(props, CANVAS_PROPS);
142
- const viewProps = omit(props, CANVAS_PROPS);
143
- const [block, setBlock] = React.useState(false);
144
- const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
145
-
146
- if (block) throw block; // Throw exception outwards if anything within canvas throws
147
-
148
- if (error) throw error;
149
- const onLayout = React.useCallback(e => {
150
- const {
151
- width,
152
- height
153
- } = e.nativeEvent.layout;
154
- setSize({
155
- width,
156
- height
157
- });
158
- }, []);
159
- const onContextCreate = React.useCallback(context => {
160
- const canvasShim = {
161
- width: context.drawingBufferWidth,
162
- height: context.drawingBufferHeight,
163
- style: {},
164
- addEventListener: () => {},
165
- removeEventListener: () => {},
166
- clientHeight: context.drawingBufferHeight,
167
- getContext: () => context
168
- };
169
- setCanvas(canvasShim);
170
- }, []);
171
-
172
- if (width > 0 && height > 0 && canvas) {
173
- // Overwrite onCreated to apply RN bindings
174
- const onCreated = state => {
175
- // Bind events after creation
176
- const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
177
- setBind(handlers); // Bind render to RN bridge
178
-
179
- const context = state.gl.getContext();
180
- const renderFrame = state.gl.render.bind(state.gl);
181
-
182
- state.gl.render = (scene, camera) => {
183
- renderFrame(scene, camera);
184
- context.endFrameEXP();
185
- };
186
-
187
- return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
188
- };
189
-
190
- createRoot(canvas, { ...canvasProps,
191
- // expo-gl can only render at native dpr/resolution
192
- // https://github.com/expo/expo-three/issues/39
193
- dpr: PixelRatio.get(),
194
- size: {
195
- width,
196
- height
197
- },
198
- events: events || createTouchEvents,
199
- onCreated
200
- }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
201
- set: setError
202
- }, /*#__PURE__*/React.createElement(React.Suspense, {
203
- fallback: /*#__PURE__*/React.createElement(Block, {
204
- set: setBlock
205
- })
206
- }, children)));
207
- }
208
-
209
- React.useEffect(() => {
210
- return () => unmountComponentAtNode(canvas);
211
- }, [canvas]);
212
- return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
213
- ref: forwardedRef,
214
- onLayout: onLayout,
215
- style: {
216
- flex: 1,
217
- ...style
218
- }
219
- }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
220
- onContextCreate: onContextCreate,
221
- style: StyleSheet.absoluteFill
222
- }));
223
- });
224
-
225
- /**
226
- * Generates an asset based on input type.
227
- */
228
-
229
- const getAsset = input => {
230
- if (input instanceof Asset) return input;
231
-
232
- switch (typeof input) {
233
- case 'string':
234
- return Asset.fromURI(input);
235
-
236
- case 'number':
237
- return Asset.fromModule(input);
238
-
239
- default:
240
- throw 'Invalid asset! Must be a URI or module.';
241
- }
242
- }; // Don't pre-process urls, let expo-asset generate an absolute URL
243
-
244
-
245
- THREE.LoaderUtils.extractUrlBase = () => './'; // There's no Image in native, so create a data texture instead
246
-
247
-
248
- THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {
249
- const texture = new THREE.Texture(); // @ts-expect-error
250
-
251
- texture.isDataTexture = true;
252
- getAsset(url).downloadAsync().then(asset => {
253
- texture.image = {
254
- data: asset,
255
- width: asset.width,
256
- height: asset.height
257
- };
258
- texture.needsUpdate = true;
259
- onLoad == null ? void 0 : onLoad(texture);
260
- }).catch(onError);
261
- return texture;
262
- }; // Fetches assets via XMLHttpRequest
263
-
264
-
265
- THREE.FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
266
- if (this.path) url = this.path + url;
267
- const request = new XMLHttpRequest();
268
- getAsset(url).downloadAsync().then(asset => {
269
- request.open('GET', asset.uri, true);
270
- request.addEventListener('load', event => {
271
- if (request.status === 200) {
272
- onLoad == null ? void 0 : onLoad(request.response);
273
- this.manager.itemEnd(url);
274
- } else {
275
- onError == null ? void 0 : onError(event);
276
- this.manager.itemError(url);
277
- this.manager.itemEnd(url);
278
- }
279
- }, false);
280
- request.addEventListener('progress', event => {
281
- onProgress == null ? void 0 : onProgress(event);
282
- }, false);
283
- request.addEventListener('error', event => {
284
- onError == null ? void 0 : onError(event);
285
- this.manager.itemError(url);
286
- this.manager.itemEnd(url);
287
- }, false);
288
- request.addEventListener('abort', event => {
289
- onError == null ? void 0 : onError(event);
290
- this.manager.itemError(url);
291
- this.manager.itemEnd(url);
292
- }, false);
293
- if (this.responseType) request.responseType = this.responseType;
294
- if (this.withCredentials) request.withCredentials = this.withCredentials;
295
-
296
- for (const header in this.requestHeader) {
297
- request.setRequestHeader(header, this.requestHeader[header]);
298
- }
299
-
300
- request.send(null);
301
- this.manager.itemStart(url);
302
- });
303
- return request;
304
- };
305
-
306
- export { Canvas, createTouchEvents as events };