motion 12.9.6 → 12.10.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/index.js +770 -666
- package/dist/cjs/react-client.js +268 -246
- package/dist/cjs/react-m.js +3 -3
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs +3 -1
- package/dist/es/motion/lib/index.mjs +1 -1
- package/dist/es/motion/lib/react.mjs +1 -1
- package/dist/es/motion-dom/dist/es/effects/MotionValueState.mjs +41 -0
- package/dist/es/motion-dom/dist/es/effects/style/index.mjs +51 -0
- package/dist/es/motion-dom/dist/es/effects/style/transform.mjs +38 -0
- package/dist/es/motion-dom/dist/es/gestures/press/index.mjs +4 -2
- package/dist/es/motion-dom/dist/es/value/index.mjs +20 -0
- package/dist/motion.dev.js +770 -666
- package/dist/motion.js +1 -1
- package/package.json +3 -3
- package/dist/es/motion-dom/dist/es/effects/style-effect.mjs +0 -36
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { transformPropOrder } from '../../render/utils/keys-transform.mjs';
|
|
2
|
+
|
|
3
|
+
const translateAlias = {
|
|
4
|
+
x: "translateX",
|
|
5
|
+
y: "translateY",
|
|
6
|
+
z: "translateZ",
|
|
7
|
+
transformPerspective: "perspective",
|
|
8
|
+
};
|
|
9
|
+
function buildTransform(state) {
|
|
10
|
+
let transform = "";
|
|
11
|
+
let transformIsDefault = true;
|
|
12
|
+
/**
|
|
13
|
+
* Loop over all possible transforms in order, adding the ones that
|
|
14
|
+
* are present to the transform string.
|
|
15
|
+
*/
|
|
16
|
+
for (let i = 0; i < transformPropOrder.length; i++) {
|
|
17
|
+
const key = transformPropOrder[i];
|
|
18
|
+
const value = state.latest[key];
|
|
19
|
+
if (value === undefined)
|
|
20
|
+
continue;
|
|
21
|
+
let valueIsDefault = true;
|
|
22
|
+
if (typeof value === "number") {
|
|
23
|
+
valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
valueIsDefault = parseFloat(value) === 0;
|
|
27
|
+
}
|
|
28
|
+
if (!valueIsDefault) {
|
|
29
|
+
transformIsDefault = false;
|
|
30
|
+
const transformName = translateAlias[key] || key;
|
|
31
|
+
const valueToRender = state.latest[key];
|
|
32
|
+
transform += `${transformName}(${valueToRender}) `;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return transformIsDefault ? "none" : transform.trim();
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { buildTransform };
|
|
@@ -43,10 +43,12 @@ function press(targetOrSelector, onPressStart, options = {}) {
|
|
|
43
43
|
const onPointerEnd = (endEvent, success) => {
|
|
44
44
|
window.removeEventListener("pointerup", onPointerUp);
|
|
45
45
|
window.removeEventListener("pointercancel", onPointerCancel);
|
|
46
|
-
if (
|
|
46
|
+
if (isPressing.has(target)) {
|
|
47
|
+
isPressing.delete(target);
|
|
48
|
+
}
|
|
49
|
+
if (!isValidPressEvent(endEvent)) {
|
|
47
50
|
return;
|
|
48
51
|
}
|
|
49
|
-
isPressing.delete(target);
|
|
50
52
|
if (typeof onPressEnd === "function") {
|
|
51
53
|
onPressEnd(endEvent, { success });
|
|
52
54
|
}
|
|
@@ -60,6 +60,11 @@ class MotionValue {
|
|
|
60
60
|
// Update update subscribers
|
|
61
61
|
if (this.current !== this.prev) {
|
|
62
62
|
this.events.change?.notify(this.current);
|
|
63
|
+
if (this.dependents) {
|
|
64
|
+
for (const dependent of this.dependents) {
|
|
65
|
+
dependent.dirty();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
63
68
|
}
|
|
64
69
|
// Update render subscribers
|
|
65
70
|
if (render) {
|
|
@@ -201,6 +206,20 @@ class MotionValue {
|
|
|
201
206
|
if (this.stopPassiveEffect)
|
|
202
207
|
this.stopPassiveEffect();
|
|
203
208
|
}
|
|
209
|
+
dirty() {
|
|
210
|
+
this.events.change?.notify(this.current);
|
|
211
|
+
}
|
|
212
|
+
addDependent(dependent) {
|
|
213
|
+
if (!this.dependents) {
|
|
214
|
+
this.dependents = new Set();
|
|
215
|
+
}
|
|
216
|
+
this.dependents.add(dependent);
|
|
217
|
+
}
|
|
218
|
+
removeDependent(dependent) {
|
|
219
|
+
if (this.dependents) {
|
|
220
|
+
this.dependents.delete(dependent);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
204
223
|
/**
|
|
205
224
|
* Returns the latest state of `MotionValue`
|
|
206
225
|
*
|
|
@@ -299,6 +318,7 @@ class MotionValue {
|
|
|
299
318
|
* @public
|
|
300
319
|
*/
|
|
301
320
|
destroy() {
|
|
321
|
+
this.dependents?.clear();
|
|
302
322
|
this.events.destroy?.notify();
|
|
303
323
|
this.clearListeners();
|
|
304
324
|
this.stop();
|