@react-three/fiber 8.8.5 → 8.8.7
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.
- package/CHANGELOG.md +12 -0
- package/dist/{index-21350952.cjs.dev.js → index-4a687fc8.cjs.dev.js} +45 -32
- package/dist/{index-a415204b.esm.js → index-7209a19b.esm.js} +45 -32
- package/dist/{index-0ce5d46e.cjs.prod.js → index-d8fba45f.cjs.prod.js} +45 -32
- package/dist/react-three-fiber.cjs.dev.js +1 -1
- package/dist/react-three-fiber.cjs.prod.js +1 -1
- package/dist/react-three-fiber.esm.js +2 -2
- package/native/dist/react-three-fiber-native.cjs.dev.js +1 -1
- package/native/dist/react-three-fiber-native.cjs.prod.js +1 -1
- package/native/dist/react-three-fiber-native.esm.js +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -309,7 +309,9 @@ function applyProps$1(instance, data) {
|
|
|
309
309
|
const prevHandlers = localState.eventCount; // Prepare memoized props
|
|
310
310
|
|
|
311
311
|
if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
|
|
312
|
-
|
|
312
|
+
|
|
313
|
+
for (let i = 0; i < changes.length; i++) {
|
|
314
|
+
let [key, value, isEvent, keys] = changes[i];
|
|
313
315
|
let currentInstance = instance;
|
|
314
316
|
let targetProp = currentInstance[key]; // Revolve dashed props
|
|
315
317
|
|
|
@@ -385,7 +387,7 @@ function applyProps$1(instance, data) {
|
|
|
385
387
|
}
|
|
386
388
|
|
|
387
389
|
invalidateInstance(instance);
|
|
388
|
-
}
|
|
390
|
+
}
|
|
389
391
|
|
|
390
392
|
if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
|
|
391
393
|
// Pre-emptively remove the instance from the interaction manager
|
|
@@ -536,22 +538,20 @@ function createEvents(store) {
|
|
|
536
538
|
|
|
537
539
|
const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
|
|
538
540
|
|
|
539
|
-
eventsObjects.
|
|
540
|
-
const state = getRootState(
|
|
541
|
+
for (let i = 0; i < eventsObjects.length; i++) {
|
|
542
|
+
const state = getRootState(eventsObjects[i]);
|
|
541
543
|
|
|
542
544
|
if (state) {
|
|
543
545
|
state.raycaster.camera = undefined;
|
|
544
546
|
}
|
|
545
|
-
}
|
|
547
|
+
}
|
|
546
548
|
|
|
547
549
|
if (!state.previousRoot) {
|
|
548
550
|
// Make sure root-level pointer and ray are set up
|
|
549
551
|
state.events.compute == null ? void 0 : state.events.compute(event, state);
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
+
}
|
|
552
553
|
|
|
553
|
-
|
|
554
|
-
.flatMap(obj => {
|
|
554
|
+
function handleRaycast(obj) {
|
|
555
555
|
const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
|
|
556
556
|
|
|
557
557
|
if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
|
|
@@ -566,7 +566,11 @@ function createEvents(store) {
|
|
|
566
566
|
|
|
567
567
|
|
|
568
568
|
return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
|
|
569
|
-
}
|
|
569
|
+
} // Collect events
|
|
570
|
+
|
|
571
|
+
|
|
572
|
+
let hits = eventsObjects // Intersect objects
|
|
573
|
+
.flatMap(handleRaycast) // Sort by event priority and distance
|
|
570
574
|
.sort((a, b) => {
|
|
571
575
|
const aState = getRootState(a.object);
|
|
572
576
|
const bState = getRootState(b.object);
|
|
@@ -678,8 +682,9 @@ function createEvents(store) {
|
|
|
678
682
|
unprojectedPoint,
|
|
679
683
|
ray: raycaster.ray,
|
|
680
684
|
camera: camera,
|
|
685
|
+
|
|
681
686
|
// Hijack stopPropagation, which just sets a flag
|
|
682
|
-
stopPropagation
|
|
687
|
+
stopPropagation() {
|
|
683
688
|
// https://github.com/pmndrs/react-three-fiber/issues/596
|
|
684
689
|
// Events are not allowed to stop propagation if the pointer has been captured
|
|
685
690
|
const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
|
|
@@ -697,6 +702,7 @@ function createEvents(store) {
|
|
|
697
702
|
}
|
|
698
703
|
}
|
|
699
704
|
},
|
|
705
|
+
|
|
700
706
|
// there should be a distinction between target and currentTarget
|
|
701
707
|
target: {
|
|
702
708
|
hasPointerCapture,
|
|
@@ -724,7 +730,8 @@ function createEvents(store) {
|
|
|
724
730
|
const {
|
|
725
731
|
internal
|
|
726
732
|
} = store.getState();
|
|
727
|
-
|
|
733
|
+
|
|
734
|
+
for (const hoveredObj of internal.hovered.values()) {
|
|
728
735
|
// When no objects were hit or the the hovered object wasn't found underneath the cursor
|
|
729
736
|
// we call onPointerOut and delete the object from the hovered-elements map
|
|
730
737
|
if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
|
|
@@ -742,10 +749,17 @@ function createEvents(store) {
|
|
|
742
749
|
handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
|
|
743
750
|
}
|
|
744
751
|
}
|
|
745
|
-
}
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
function pointerMissed(event, objects) {
|
|
756
|
+
for (let i = 0; i < objects.length; i++) {
|
|
757
|
+
const instance = objects[i].__r3f;
|
|
758
|
+
instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
|
|
759
|
+
}
|
|
746
760
|
}
|
|
747
761
|
|
|
748
|
-
|
|
762
|
+
function handlePointer(name) {
|
|
749
763
|
// Deal with cancelation
|
|
750
764
|
switch (name) {
|
|
751
765
|
case 'onPointerLeave':
|
|
@@ -768,17 +782,17 @@ function createEvents(store) {
|
|
|
768
782
|
} // Any other pointer goes here ...
|
|
769
783
|
|
|
770
784
|
|
|
771
|
-
return event
|
|
785
|
+
return function handleEvent(event) {
|
|
772
786
|
const {
|
|
773
787
|
onPointerMissed,
|
|
774
788
|
internal
|
|
775
|
-
} = store.getState(); //prepareRay(event)
|
|
789
|
+
} = store.getState(); // prepareRay(event)
|
|
776
790
|
|
|
777
791
|
internal.lastEvent.current = event; // Get fresh intersects
|
|
778
792
|
|
|
779
793
|
const isPointerMove = name === 'onPointerMove';
|
|
780
794
|
const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
|
|
781
|
-
const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
|
|
795
|
+
const filter = isPointerMove ? filterPointerEvents : undefined; // const hits = patchIntersects(intersect(filter), event)
|
|
782
796
|
|
|
783
797
|
const hits = intersect(event, filter);
|
|
784
798
|
const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
|
|
@@ -799,7 +813,8 @@ function createEvents(store) {
|
|
|
799
813
|
|
|
800
814
|
|
|
801
815
|
if (isPointerMove) cancelPointer(hits);
|
|
802
|
-
|
|
816
|
+
|
|
817
|
+
function onIntersect(data) {
|
|
803
818
|
const eventObject = data.eventObject;
|
|
804
819
|
const instance = eventObject.__r3f;
|
|
805
820
|
const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
|
|
@@ -846,16 +861,10 @@ function createEvents(store) {
|
|
|
846
861
|
}
|
|
847
862
|
}
|
|
848
863
|
}
|
|
849
|
-
}
|
|
850
|
-
};
|
|
851
|
-
};
|
|
852
|
-
|
|
853
|
-
function pointerMissed(event, objects) {
|
|
854
|
-
objects.forEach(object => {
|
|
855
|
-
var _r3f3;
|
|
864
|
+
}
|
|
856
865
|
|
|
857
|
-
|
|
858
|
-
}
|
|
866
|
+
handleIntersects(hits, event, delta, onIntersect);
|
|
867
|
+
};
|
|
859
868
|
}
|
|
860
869
|
|
|
861
870
|
return {
|
|
@@ -1503,9 +1512,12 @@ const addTail = callback => createSubs(callback, globalTailEffects);
|
|
|
1503
1512
|
|
|
1504
1513
|
function run(effects, timestamp) {
|
|
1505
1514
|
if (!effects.size) return;
|
|
1506
|
-
|
|
1515
|
+
|
|
1516
|
+
for (const {
|
|
1507
1517
|
callback
|
|
1508
|
-
}
|
|
1518
|
+
} of effects.values()) {
|
|
1519
|
+
callback(timestamp);
|
|
1520
|
+
}
|
|
1509
1521
|
}
|
|
1510
1522
|
|
|
1511
1523
|
function flushGlobalEffects(type, timestamp) {
|
|
@@ -1561,7 +1573,7 @@ function createLoop(roots) {
|
|
|
1561
1573
|
|
|
1562
1574
|
flushGlobalEffects('before', timestamp); // Render all roots
|
|
1563
1575
|
|
|
1564
|
-
roots.
|
|
1576
|
+
for (const root of roots.values()) {
|
|
1565
1577
|
var _state$gl$xr;
|
|
1566
1578
|
|
|
1567
1579
|
state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
|
|
@@ -1569,7 +1581,8 @@ function createLoop(roots) {
|
|
|
1569
1581
|
if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
|
|
1570
1582
|
repeat += render$1(timestamp, state);
|
|
1571
1583
|
}
|
|
1572
|
-
}
|
|
1584
|
+
} // Run after-effects
|
|
1585
|
+
|
|
1573
1586
|
|
|
1574
1587
|
flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
|
|
1575
1588
|
|
|
@@ -1598,7 +1611,7 @@ function createLoop(roots) {
|
|
|
1598
1611
|
|
|
1599
1612
|
function advance(timestamp, runGlobalEffects = true, state, frame) {
|
|
1600
1613
|
if (runGlobalEffects) flushGlobalEffects('before', timestamp);
|
|
1601
|
-
if (!state) roots.
|
|
1614
|
+
if (!state) for (const root of roots.values()) render$1(timestamp, root.store.getState());else render$1(timestamp, state, frame);
|
|
1602
1615
|
if (runGlobalEffects) flushGlobalEffects('after', timestamp);
|
|
1603
1616
|
}
|
|
1604
1617
|
|
|
@@ -282,7 +282,9 @@ function applyProps$1(instance, data) {
|
|
|
282
282
|
const prevHandlers = localState.eventCount; // Prepare memoized props
|
|
283
283
|
|
|
284
284
|
if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
|
|
285
|
-
|
|
285
|
+
|
|
286
|
+
for (let i = 0; i < changes.length; i++) {
|
|
287
|
+
let [key, value, isEvent, keys] = changes[i];
|
|
286
288
|
let currentInstance = instance;
|
|
287
289
|
let targetProp = currentInstance[key]; // Revolve dashed props
|
|
288
290
|
|
|
@@ -358,7 +360,7 @@ function applyProps$1(instance, data) {
|
|
|
358
360
|
}
|
|
359
361
|
|
|
360
362
|
invalidateInstance(instance);
|
|
361
|
-
}
|
|
363
|
+
}
|
|
362
364
|
|
|
363
365
|
if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
|
|
364
366
|
// Pre-emptively remove the instance from the interaction manager
|
|
@@ -509,22 +511,20 @@ function createEvents(store) {
|
|
|
509
511
|
|
|
510
512
|
const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
|
|
511
513
|
|
|
512
|
-
eventsObjects.
|
|
513
|
-
const state = getRootState(
|
|
514
|
+
for (let i = 0; i < eventsObjects.length; i++) {
|
|
515
|
+
const state = getRootState(eventsObjects[i]);
|
|
514
516
|
|
|
515
517
|
if (state) {
|
|
516
518
|
state.raycaster.camera = undefined;
|
|
517
519
|
}
|
|
518
|
-
}
|
|
520
|
+
}
|
|
519
521
|
|
|
520
522
|
if (!state.previousRoot) {
|
|
521
523
|
// Make sure root-level pointer and ray are set up
|
|
522
524
|
state.events.compute == null ? void 0 : state.events.compute(event, state);
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
+
}
|
|
525
526
|
|
|
526
|
-
|
|
527
|
-
.flatMap(obj => {
|
|
527
|
+
function handleRaycast(obj) {
|
|
528
528
|
const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
|
|
529
529
|
|
|
530
530
|
if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
|
|
@@ -539,7 +539,11 @@ function createEvents(store) {
|
|
|
539
539
|
|
|
540
540
|
|
|
541
541
|
return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
|
|
542
|
-
}
|
|
542
|
+
} // Collect events
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
let hits = eventsObjects // Intersect objects
|
|
546
|
+
.flatMap(handleRaycast) // Sort by event priority and distance
|
|
543
547
|
.sort((a, b) => {
|
|
544
548
|
const aState = getRootState(a.object);
|
|
545
549
|
const bState = getRootState(b.object);
|
|
@@ -651,8 +655,9 @@ function createEvents(store) {
|
|
|
651
655
|
unprojectedPoint,
|
|
652
656
|
ray: raycaster.ray,
|
|
653
657
|
camera: camera,
|
|
658
|
+
|
|
654
659
|
// Hijack stopPropagation, which just sets a flag
|
|
655
|
-
stopPropagation
|
|
660
|
+
stopPropagation() {
|
|
656
661
|
// https://github.com/pmndrs/react-three-fiber/issues/596
|
|
657
662
|
// Events are not allowed to stop propagation if the pointer has been captured
|
|
658
663
|
const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
|
|
@@ -670,6 +675,7 @@ function createEvents(store) {
|
|
|
670
675
|
}
|
|
671
676
|
}
|
|
672
677
|
},
|
|
678
|
+
|
|
673
679
|
// there should be a distinction between target and currentTarget
|
|
674
680
|
target: {
|
|
675
681
|
hasPointerCapture,
|
|
@@ -697,7 +703,8 @@ function createEvents(store) {
|
|
|
697
703
|
const {
|
|
698
704
|
internal
|
|
699
705
|
} = store.getState();
|
|
700
|
-
|
|
706
|
+
|
|
707
|
+
for (const hoveredObj of internal.hovered.values()) {
|
|
701
708
|
// When no objects were hit or the the hovered object wasn't found underneath the cursor
|
|
702
709
|
// we call onPointerOut and delete the object from the hovered-elements map
|
|
703
710
|
if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
|
|
@@ -715,10 +722,17 @@ function createEvents(store) {
|
|
|
715
722
|
handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
|
|
716
723
|
}
|
|
717
724
|
}
|
|
718
|
-
}
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
function pointerMissed(event, objects) {
|
|
729
|
+
for (let i = 0; i < objects.length; i++) {
|
|
730
|
+
const instance = objects[i].__r3f;
|
|
731
|
+
instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
|
|
732
|
+
}
|
|
719
733
|
}
|
|
720
734
|
|
|
721
|
-
|
|
735
|
+
function handlePointer(name) {
|
|
722
736
|
// Deal with cancelation
|
|
723
737
|
switch (name) {
|
|
724
738
|
case 'onPointerLeave':
|
|
@@ -741,17 +755,17 @@ function createEvents(store) {
|
|
|
741
755
|
} // Any other pointer goes here ...
|
|
742
756
|
|
|
743
757
|
|
|
744
|
-
return event
|
|
758
|
+
return function handleEvent(event) {
|
|
745
759
|
const {
|
|
746
760
|
onPointerMissed,
|
|
747
761
|
internal
|
|
748
|
-
} = store.getState(); //prepareRay(event)
|
|
762
|
+
} = store.getState(); // prepareRay(event)
|
|
749
763
|
|
|
750
764
|
internal.lastEvent.current = event; // Get fresh intersects
|
|
751
765
|
|
|
752
766
|
const isPointerMove = name === 'onPointerMove';
|
|
753
767
|
const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
|
|
754
|
-
const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
|
|
768
|
+
const filter = isPointerMove ? filterPointerEvents : undefined; // const hits = patchIntersects(intersect(filter), event)
|
|
755
769
|
|
|
756
770
|
const hits = intersect(event, filter);
|
|
757
771
|
const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
|
|
@@ -772,7 +786,8 @@ function createEvents(store) {
|
|
|
772
786
|
|
|
773
787
|
|
|
774
788
|
if (isPointerMove) cancelPointer(hits);
|
|
775
|
-
|
|
789
|
+
|
|
790
|
+
function onIntersect(data) {
|
|
776
791
|
const eventObject = data.eventObject;
|
|
777
792
|
const instance = eventObject.__r3f;
|
|
778
793
|
const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
|
|
@@ -819,16 +834,10 @@ function createEvents(store) {
|
|
|
819
834
|
}
|
|
820
835
|
}
|
|
821
836
|
}
|
|
822
|
-
}
|
|
823
|
-
};
|
|
824
|
-
};
|
|
825
|
-
|
|
826
|
-
function pointerMissed(event, objects) {
|
|
827
|
-
objects.forEach(object => {
|
|
828
|
-
var _r3f3;
|
|
837
|
+
}
|
|
829
838
|
|
|
830
|
-
|
|
831
|
-
}
|
|
839
|
+
handleIntersects(hits, event, delta, onIntersect);
|
|
840
|
+
};
|
|
832
841
|
}
|
|
833
842
|
|
|
834
843
|
return {
|
|
@@ -1476,9 +1485,12 @@ const addTail = callback => createSubs(callback, globalTailEffects);
|
|
|
1476
1485
|
|
|
1477
1486
|
function run(effects, timestamp) {
|
|
1478
1487
|
if (!effects.size) return;
|
|
1479
|
-
|
|
1488
|
+
|
|
1489
|
+
for (const {
|
|
1480
1490
|
callback
|
|
1481
|
-
}
|
|
1491
|
+
} of effects.values()) {
|
|
1492
|
+
callback(timestamp);
|
|
1493
|
+
}
|
|
1482
1494
|
}
|
|
1483
1495
|
|
|
1484
1496
|
function flushGlobalEffects(type, timestamp) {
|
|
@@ -1534,7 +1546,7 @@ function createLoop(roots) {
|
|
|
1534
1546
|
|
|
1535
1547
|
flushGlobalEffects('before', timestamp); // Render all roots
|
|
1536
1548
|
|
|
1537
|
-
roots.
|
|
1549
|
+
for (const root of roots.values()) {
|
|
1538
1550
|
var _state$gl$xr;
|
|
1539
1551
|
|
|
1540
1552
|
state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
|
|
@@ -1542,7 +1554,8 @@ function createLoop(roots) {
|
|
|
1542
1554
|
if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
|
|
1543
1555
|
repeat += render$1(timestamp, state);
|
|
1544
1556
|
}
|
|
1545
|
-
}
|
|
1557
|
+
} // Run after-effects
|
|
1558
|
+
|
|
1546
1559
|
|
|
1547
1560
|
flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
|
|
1548
1561
|
|
|
@@ -1571,7 +1584,7 @@ function createLoop(roots) {
|
|
|
1571
1584
|
|
|
1572
1585
|
function advance(timestamp, runGlobalEffects = true, state, frame) {
|
|
1573
1586
|
if (runGlobalEffects) flushGlobalEffects('before', timestamp);
|
|
1574
|
-
if (!state) roots.
|
|
1587
|
+
if (!state) for (const root of roots.values()) render$1(timestamp, root.store.getState());else render$1(timestamp, state, frame);
|
|
1575
1588
|
if (runGlobalEffects) flushGlobalEffects('after', timestamp);
|
|
1576
1589
|
}
|
|
1577
1590
|
|
|
@@ -309,7 +309,9 @@ function applyProps$1(instance, data) {
|
|
|
309
309
|
const prevHandlers = localState.eventCount; // Prepare memoized props
|
|
310
310
|
|
|
311
311
|
if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
|
|
312
|
-
|
|
312
|
+
|
|
313
|
+
for (let i = 0; i < changes.length; i++) {
|
|
314
|
+
let [key, value, isEvent, keys] = changes[i];
|
|
313
315
|
let currentInstance = instance;
|
|
314
316
|
let targetProp = currentInstance[key]; // Revolve dashed props
|
|
315
317
|
|
|
@@ -385,7 +387,7 @@ function applyProps$1(instance, data) {
|
|
|
385
387
|
}
|
|
386
388
|
|
|
387
389
|
invalidateInstance(instance);
|
|
388
|
-
}
|
|
390
|
+
}
|
|
389
391
|
|
|
390
392
|
if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
|
|
391
393
|
// Pre-emptively remove the instance from the interaction manager
|
|
@@ -536,22 +538,20 @@ function createEvents(store) {
|
|
|
536
538
|
|
|
537
539
|
const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
|
|
538
540
|
|
|
539
|
-
eventsObjects.
|
|
540
|
-
const state = getRootState(
|
|
541
|
+
for (let i = 0; i < eventsObjects.length; i++) {
|
|
542
|
+
const state = getRootState(eventsObjects[i]);
|
|
541
543
|
|
|
542
544
|
if (state) {
|
|
543
545
|
state.raycaster.camera = undefined;
|
|
544
546
|
}
|
|
545
|
-
}
|
|
547
|
+
}
|
|
546
548
|
|
|
547
549
|
if (!state.previousRoot) {
|
|
548
550
|
// Make sure root-level pointer and ray are set up
|
|
549
551
|
state.events.compute == null ? void 0 : state.events.compute(event, state);
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
+
}
|
|
552
553
|
|
|
553
|
-
|
|
554
|
-
.flatMap(obj => {
|
|
554
|
+
function handleRaycast(obj) {
|
|
555
555
|
const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
|
|
556
556
|
|
|
557
557
|
if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
|
|
@@ -566,7 +566,11 @@ function createEvents(store) {
|
|
|
566
566
|
|
|
567
567
|
|
|
568
568
|
return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
|
|
569
|
-
}
|
|
569
|
+
} // Collect events
|
|
570
|
+
|
|
571
|
+
|
|
572
|
+
let hits = eventsObjects // Intersect objects
|
|
573
|
+
.flatMap(handleRaycast) // Sort by event priority and distance
|
|
570
574
|
.sort((a, b) => {
|
|
571
575
|
const aState = getRootState(a.object);
|
|
572
576
|
const bState = getRootState(b.object);
|
|
@@ -678,8 +682,9 @@ function createEvents(store) {
|
|
|
678
682
|
unprojectedPoint,
|
|
679
683
|
ray: raycaster.ray,
|
|
680
684
|
camera: camera,
|
|
685
|
+
|
|
681
686
|
// Hijack stopPropagation, which just sets a flag
|
|
682
|
-
stopPropagation
|
|
687
|
+
stopPropagation() {
|
|
683
688
|
// https://github.com/pmndrs/react-three-fiber/issues/596
|
|
684
689
|
// Events are not allowed to stop propagation if the pointer has been captured
|
|
685
690
|
const capturesForPointer = 'pointerId' in event && internal.capturedMap.get(event.pointerId); // We only authorize stopPropagation...
|
|
@@ -697,6 +702,7 @@ function createEvents(store) {
|
|
|
697
702
|
}
|
|
698
703
|
}
|
|
699
704
|
},
|
|
705
|
+
|
|
700
706
|
// there should be a distinction between target and currentTarget
|
|
701
707
|
target: {
|
|
702
708
|
hasPointerCapture,
|
|
@@ -724,7 +730,8 @@ function createEvents(store) {
|
|
|
724
730
|
const {
|
|
725
731
|
internal
|
|
726
732
|
} = store.getState();
|
|
727
|
-
|
|
733
|
+
|
|
734
|
+
for (const hoveredObj of internal.hovered.values()) {
|
|
728
735
|
// When no objects were hit or the the hovered object wasn't found underneath the cursor
|
|
729
736
|
// we call onPointerOut and delete the object from the hovered-elements map
|
|
730
737
|
if (!intersections.length || !intersections.find(hit => hit.object === hoveredObj.object && hit.index === hoveredObj.index && hit.instanceId === hoveredObj.instanceId)) {
|
|
@@ -742,10 +749,17 @@ function createEvents(store) {
|
|
|
742
749
|
handlers.onPointerLeave == null ? void 0 : handlers.onPointerLeave(data);
|
|
743
750
|
}
|
|
744
751
|
}
|
|
745
|
-
}
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
function pointerMissed(event, objects) {
|
|
756
|
+
for (let i = 0; i < objects.length; i++) {
|
|
757
|
+
const instance = objects[i].__r3f;
|
|
758
|
+
instance == null ? void 0 : instance.handlers.onPointerMissed == null ? void 0 : instance.handlers.onPointerMissed(event);
|
|
759
|
+
}
|
|
746
760
|
}
|
|
747
761
|
|
|
748
|
-
|
|
762
|
+
function handlePointer(name) {
|
|
749
763
|
// Deal with cancelation
|
|
750
764
|
switch (name) {
|
|
751
765
|
case 'onPointerLeave':
|
|
@@ -768,17 +782,17 @@ function createEvents(store) {
|
|
|
768
782
|
} // Any other pointer goes here ...
|
|
769
783
|
|
|
770
784
|
|
|
771
|
-
return event
|
|
785
|
+
return function handleEvent(event) {
|
|
772
786
|
const {
|
|
773
787
|
onPointerMissed,
|
|
774
788
|
internal
|
|
775
|
-
} = store.getState(); //prepareRay(event)
|
|
789
|
+
} = store.getState(); // prepareRay(event)
|
|
776
790
|
|
|
777
791
|
internal.lastEvent.current = event; // Get fresh intersects
|
|
778
792
|
|
|
779
793
|
const isPointerMove = name === 'onPointerMove';
|
|
780
794
|
const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
|
|
781
|
-
const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
|
|
795
|
+
const filter = isPointerMove ? filterPointerEvents : undefined; // const hits = patchIntersects(intersect(filter), event)
|
|
782
796
|
|
|
783
797
|
const hits = intersect(event, filter);
|
|
784
798
|
const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
|
|
@@ -799,7 +813,8 @@ function createEvents(store) {
|
|
|
799
813
|
|
|
800
814
|
|
|
801
815
|
if (isPointerMove) cancelPointer(hits);
|
|
802
|
-
|
|
816
|
+
|
|
817
|
+
function onIntersect(data) {
|
|
803
818
|
const eventObject = data.eventObject;
|
|
804
819
|
const instance = eventObject.__r3f;
|
|
805
820
|
const handlers = instance == null ? void 0 : instance.handlers; // Check presence of handlers
|
|
@@ -846,16 +861,10 @@ function createEvents(store) {
|
|
|
846
861
|
}
|
|
847
862
|
}
|
|
848
863
|
}
|
|
849
|
-
}
|
|
850
|
-
};
|
|
851
|
-
};
|
|
852
|
-
|
|
853
|
-
function pointerMissed(event, objects) {
|
|
854
|
-
objects.forEach(object => {
|
|
855
|
-
var _r3f3;
|
|
864
|
+
}
|
|
856
865
|
|
|
857
|
-
|
|
858
|
-
}
|
|
866
|
+
handleIntersects(hits, event, delta, onIntersect);
|
|
867
|
+
};
|
|
859
868
|
}
|
|
860
869
|
|
|
861
870
|
return {
|
|
@@ -1503,9 +1512,12 @@ const addTail = callback => createSubs(callback, globalTailEffects);
|
|
|
1503
1512
|
|
|
1504
1513
|
function run(effects, timestamp) {
|
|
1505
1514
|
if (!effects.size) return;
|
|
1506
|
-
|
|
1515
|
+
|
|
1516
|
+
for (const {
|
|
1507
1517
|
callback
|
|
1508
|
-
}
|
|
1518
|
+
} of effects.values()) {
|
|
1519
|
+
callback(timestamp);
|
|
1520
|
+
}
|
|
1509
1521
|
}
|
|
1510
1522
|
|
|
1511
1523
|
function flushGlobalEffects(type, timestamp) {
|
|
@@ -1561,7 +1573,7 @@ function createLoop(roots) {
|
|
|
1561
1573
|
|
|
1562
1574
|
flushGlobalEffects('before', timestamp); // Render all roots
|
|
1563
1575
|
|
|
1564
|
-
roots.
|
|
1576
|
+
for (const root of roots.values()) {
|
|
1565
1577
|
var _state$gl$xr;
|
|
1566
1578
|
|
|
1567
1579
|
state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
|
|
@@ -1569,7 +1581,8 @@ function createLoop(roots) {
|
|
|
1569
1581
|
if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
|
|
1570
1582
|
repeat += render$1(timestamp, state);
|
|
1571
1583
|
}
|
|
1572
|
-
}
|
|
1584
|
+
} // Run after-effects
|
|
1585
|
+
|
|
1573
1586
|
|
|
1574
1587
|
flushGlobalEffects('after', timestamp); // Stop the loop if nothing invalidates it
|
|
1575
1588
|
|
|
@@ -1598,7 +1611,7 @@ function createLoop(roots) {
|
|
|
1598
1611
|
|
|
1599
1612
|
function advance(timestamp, runGlobalEffects = true, state, frame) {
|
|
1600
1613
|
if (runGlobalEffects) flushGlobalEffects('before', timestamp);
|
|
1601
|
-
if (!state) roots.
|
|
1614
|
+
if (!state) for (const root of roots.values()) render$1(timestamp, root.store.getState());else render$1(timestamp, state, frame);
|
|
1602
1615
|
if (runGlobalEffects) flushGlobalEffects('after', timestamp);
|
|
1603
1616
|
}
|
|
1604
1617
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var index = require('./index-
|
|
5
|
+
var index = require('./index-4a687fc8.cjs.dev.js');
|
|
6
6
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var THREE = require('three');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var index = require('./index-
|
|
5
|
+
var index = require('./index-d8fba45f.cjs.prod.js');
|
|
6
6
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var THREE = require('three');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-
|
|
2
|
-
export { t as ReactThreeFiber, v as _roots, s 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, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-
|
|
1
|
+
import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-7209a19b.esm.js';
|
|
2
|
+
export { t as ReactThreeFiber, v as _roots, s 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, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-7209a19b.esm.js';
|
|
3
3
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import * as THREE from 'three';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var index = require('../../dist/index-
|
|
5
|
+
var index = require('../../dist/index-4a687fc8.cjs.dev.js');
|
|
6
6
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var THREE = require('three');
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var index = require('../../dist/index-
|
|
5
|
+
var index = require('../../dist/index-d8fba45f.cjs.prod.js');
|
|
6
6
|
var _extends = require('@babel/runtime/helpers/extends');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var THREE = require('three');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-
|
|
2
|
-
export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-
|
|
1
|
+
import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-7209a19b.esm.js';
|
|
2
|
+
export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-7209a19b.esm.js';
|
|
3
3
|
import _extends from '@babel/runtime/helpers/esm/extends';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import * as THREE from 'three';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-three/fiber",
|
|
3
|
-
"version": "8.8.
|
|
3
|
+
"version": "8.8.7",
|
|
4
4
|
"description": "A React renderer for Threejs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.17.8",
|
|
46
46
|
"@types/react-reconciler": "^0.26.7",
|
|
47
|
-
"its-fine": "^1.0.
|
|
47
|
+
"its-fine": "^1.0.4",
|
|
48
48
|
"react-reconciler": "^0.27.0",
|
|
49
49
|
"react-use-measure": "^2.1.1",
|
|
50
50
|
"scheduler": "^0.21.0",
|