framer-motion 5.5.0-beta.0 → 5.5.0
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/dist/cjs/three-entry.js
CHANGED
|
@@ -386,6 +386,7 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
386
386
|
var context = React.useContext(MotionCanvasContext);
|
|
387
387
|
heyListen.invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
|
|
388
388
|
var _c = context, setSize = _c.setSize, layoutCamera = _c.layoutCamera;
|
|
389
|
+
var latestLayout = React.useRef(null);
|
|
389
390
|
var advance = fiber.useThree(function (three) { return three.advance; });
|
|
390
391
|
var set = fiber.useThree(function (three) { return three.set; });
|
|
391
392
|
var camera = fiber.useThree(function (three) { return three.camera; });
|
|
@@ -402,6 +403,12 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
402
403
|
* with the projected dimensions.
|
|
403
404
|
*/
|
|
404
405
|
var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
|
|
406
|
+
if (latestLayout.current) {
|
|
407
|
+
var _a = latestLayout.current, x = _a.x, y = _a.y;
|
|
408
|
+
var xRatio = useMotionValue.calcLength(newProjection.x) / useMotionValue.calcLength(x);
|
|
409
|
+
var yRatio = useMotionValue.calcLength(newProjection.y) / useMotionValue.calcLength(y);
|
|
410
|
+
gl.setPixelRatio(Math.max(xRatio, yRatio) * window.devicePixelRatio);
|
|
411
|
+
}
|
|
405
412
|
updateCamera(calcBoxSize(newProjection));
|
|
406
413
|
advance(sync.getFrameData().timestamp);
|
|
407
414
|
});
|
|
@@ -410,6 +417,7 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
410
417
|
* output to match the layout dimensions.
|
|
411
418
|
*/
|
|
412
419
|
var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
|
|
420
|
+
latestLayout.current = newLayout;
|
|
413
421
|
var newSize = calcBoxSize(newLayout);
|
|
414
422
|
gl.setSize(newSize.width, newSize.height);
|
|
415
423
|
setSize(newSize);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext, useLayoutEffect } from 'react';
|
|
1
|
+
import { useContext, useRef, useLayoutEffect } from 'react';
|
|
2
2
|
import { useThree } from '@react-three/fiber';
|
|
3
3
|
import { useVisualElementContext } from '../../context/MotionContext/index.mjs';
|
|
4
4
|
import { MotionCanvasContext } from './MotionCanvasContext.mjs';
|
|
@@ -18,6 +18,7 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
18
18
|
var context = useContext(MotionCanvasContext);
|
|
19
19
|
invariant(Boolean(context), "No MotionCanvas detected. Replace Canvas from @react-three/fiber with MotionCanvas from framer-motion.");
|
|
20
20
|
var _c = context, setSize = _c.setSize, layoutCamera = _c.layoutCamera;
|
|
21
|
+
var latestLayout = useRef(null);
|
|
21
22
|
var advance = useThree(function (three) { return three.advance; });
|
|
22
23
|
var set = useThree(function (three) { return three.set; });
|
|
23
24
|
var camera = useThree(function (three) { return three.camera; });
|
|
@@ -34,6 +35,12 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
34
35
|
* with the projected dimensions.
|
|
35
36
|
*/
|
|
36
37
|
var removeProjectionUpdateListener = projection.addEventListener("projectionUpdate", function (newProjection) {
|
|
38
|
+
if (latestLayout.current) {
|
|
39
|
+
var _a = latestLayout.current, x = _a.x, y = _a.y;
|
|
40
|
+
var xRatio = calcLength(newProjection.x) / calcLength(x);
|
|
41
|
+
var yRatio = calcLength(newProjection.y) / calcLength(y);
|
|
42
|
+
gl.setPixelRatio(Math.max(xRatio, yRatio) * window.devicePixelRatio);
|
|
43
|
+
}
|
|
37
44
|
updateCamera(calcBoxSize(newProjection));
|
|
38
45
|
advance(getFrameData().timestamp);
|
|
39
46
|
});
|
|
@@ -42,6 +49,7 @@ function useLayoutCamera(_a, updateCamera) {
|
|
|
42
49
|
* output to match the layout dimensions.
|
|
43
50
|
*/
|
|
44
51
|
var removeLayoutMeasureListener = projection.addEventListener("measure", function (newLayout) {
|
|
52
|
+
latestLayout.current = newLayout;
|
|
45
53
|
var newSize = calcBoxSize(newLayout);
|
|
46
54
|
gl.setSize(newSize.width, newSize.height);
|
|
47
55
|
setSize(newSize);
|