motion 10.17.1 → 11.11.12
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/.turbo/turbo-build.log +29 -0
- package/{LICENSE → LICENSE.md} +2 -2
- package/README.md +99 -7
- package/dist/cjs/index.js +6117 -0
- package/dist/cjs/react-client.js +10003 -0
- package/dist/cjs/react-m.js +1852 -0
- package/dist/es/framer-motion/dist/es/animation/GroupPlaybackControls.mjs +78 -0
- package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +34 -0
- package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +19 -0
- package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +52 -0
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +318 -0
- package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +112 -0
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +380 -0
- package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +42 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +169 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +36 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/easing.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/index.mjs +23 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/attach-timeline.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs +8 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-flags.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-linear-easing.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +13 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/inertia.mjs +87 -0
- package/dist/es/framer-motion/dist/es/animation/generators/keyframes.mjs +51 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +89 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +129 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/is-generator.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +105 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +75 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs +66 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element.mjs +26 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/data-id.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +230 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs +21 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/sort.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs +40 -0
- package/dist/es/framer-motion/dist/es/animation/utils/get-value-transition.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animation-controls.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-transition-defined.mjs +10 -0
- package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs +26 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs +40 -0
- package/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/LazyContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/index.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/utils.mjs +17 -0
- package/dist/es/framer-motion/dist/es/context/PresenceContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/anticipate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/back.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/circ.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +51 -0
- package/dist/es/framer-motion/dist/es/easing/ease.mjs +7 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/mirror.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/reverse.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/steps.mjs +15 -0
- package/dist/es/framer-motion/dist/es/easing/utils/create-generator-easing.mjs +17 -0
- package/dist/es/framer-motion/dist/es/easing/utils/get-easing-for-segment.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +3 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-easing-array.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +38 -0
- package/dist/es/framer-motion/dist/es/events/add-dom-event.mjs +6 -0
- package/dist/es/framer-motion/dist/es/events/add-pointer-event.mjs +8 -0
- package/dist/es/framer-motion/dist/es/events/event-info.mjs +15 -0
- package/dist/es/framer-motion/dist/es/events/utils/is-primary-pointer.mjs +18 -0
- package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs +71 -0
- package/dist/es/framer-motion/dist/es/frameloop/frame.mjs +6 -0
- package/dist/es/framer-motion/dist/es/frameloop/index-legacy.mjs +20 -0
- package/dist/es/framer-motion/dist/es/frameloop/microtask.mjs +5 -0
- package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs +80 -0
- package/dist/es/framer-motion/dist/es/frameloop/sync-time.mjs +31 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +487 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +129 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs +53 -0
- package/dist/es/framer-motion/dist/es/gestures/focus.mjs +41 -0
- package/dist/es/framer-motion/dist/es/gestures/hover.mjs +33 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +156 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +50 -0
- package/dist/es/framer-motion/dist/es/gestures/press.mjs +130 -0
- package/dist/es/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs +20 -0
- package/dist/es/framer-motion/dist/es/motion/features/Feature.mjs +9 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/exit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs +41 -0
- package/dist/es/framer-motion/dist/es/motion/features/animations.mjs +13 -0
- package/dist/es/framer-motion/dist/es/motion/features/definitions.mjs +28 -0
- package/dist/es/framer-motion/dist/es/motion/features/drag.mjs +17 -0
- package/dist/es/framer-motion/dist/es/motion/features/gestures.mjs +21 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/features/load-features.mjs +12 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/index.mjs +72 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/observers.mjs +49 -0
- package/dist/es/framer-motion/dist/es/motion/index.mjs +98 -0
- package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/utils/symbol.mjs +3 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs +36 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs +82 -0
- package/dist/es/framer-motion/dist/es/motion/utils/valid-prop.mjs +57 -0
- package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +93 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/conversion.mjs +33 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/copy.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-apply.mjs +119 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-calc.mjs +52 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-remove.mjs +54 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/models.mjs +17 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/utils.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs +13 -0
- package/dist/es/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs +27 -0
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +1583 -0
- package/dist/es/framer-motion/dist/es/projection/node/state.mjs +19 -0
- package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +112 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-border-radius.mjs +41 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs +35 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-correction.mjs +6 -0
- package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs +49 -0
- package/dist/es/framer-motion/dist/es/projection/utils/each-axis.mjs +5 -0
- package/dist/es/framer-motion/dist/es/projection/utils/has-transform.mjs +26 -0
- package/dist/es/framer-motion/dist/es/projection/utils/measure.mjs +17 -0
- package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +477 -0
- package/dist/es/framer-motion/dist/es/render/components/create-factory.mjs +23 -0
- package/dist/es/framer-motion/dist/es/render/components/m/create.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/components/m/elements.mjs +227 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/create.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/elements.mjs +194 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs +130 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/create-visual-element.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +64 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-window.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/index.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +80 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +56 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/edge.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/inset.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/offset.mjs +35 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/presets.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +48 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/supports.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +84 -0
- package/dist/es/framer-motion/dist/es/render/dom/use-render.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +42 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/resolve-element.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/defaults.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/dimensions.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/find.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs +10 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number-browser.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/test.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/transform.mjs +31 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-auto.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +43 -0
- package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/config-motion.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/html/use-props.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs +62 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/render.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/transform.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/object/ObjectVisualElement.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/store.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +40 -0
- package/dist/es/framer-motion/dist/es/render/svg/lowercase-elements.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/svg/use-props.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs +52 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/path.mjs +32 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/render.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs +19 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/transform-origin.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +164 -0
- package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs +332 -0
- package/dist/es/framer-motion/dist/es/render/utils/compare-by-depth.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/utils/get-variant-context.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-controlling-variants.mjs +13 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-variant-label.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs +36 -0
- package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +27 -0
- package/dist/es/framer-motion/dist/es/render/utils/variant-props.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/GlobalConfig.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/array.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/clamp.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/delay.mjs +24 -0
- package/dist/es/framer-motion/dist/es/utils/distance.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/errors.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/hsla-to-rgba.mjs +42 -0
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +75 -0
- package/dist/es/framer-motion/dist/es/utils/is-browser.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/is-numerical-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/is-ref-object.mjs +7 -0
- package/dist/es/framer-motion/dist/es/utils/is-zero-value-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/memo.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +94 -0
- package/dist/es/framer-motion/dist/es/utils/mix/immediate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/mix/index.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/mix/number.mjs +26 -0
- package/dist/es/framer-motion/dist/es/utils/mix/visibility.mjs +16 -0
- package/dist/es/framer-motion/dist/es/utils/noop.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/default.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/time.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/pipe.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/progress.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/index.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/state.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/resolve-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/subscription-manager.mjs +40 -0
- package/dist/es/framer-motion/dist/es/utils/time-conversion.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/transform.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/use-constant.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/velocity-per-second.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/warn-once.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/wrap.mjs +6 -0
- package/dist/es/framer-motion/dist/es/value/index.mjs +313 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hex.mjs +40 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hsla.mjs +22 -0
- package/dist/es/framer-motion/dist/es/value/types/color/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/value/types/color/rgba.mjs +25 -0
- package/dist/es/framer-motion/dist/es/value/types/color/utils.mjs +29 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/filter.mjs +30 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs +92 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/index.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/units.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/float-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/is-nullish.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/sanitize.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/single-color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/is.mjs +7 -0
- package/dist/es/framer-motion/dist/es/value/utils/is-motion-value.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs +16 -0
- package/dist/es/motion/lib/index.mjs +30 -0
- package/dist/es/motion/lib/react-client.mjs +3 -0
- package/dist/es/motion/lib/react-m.mjs +3 -0
- package/dist/index.d.ts +1 -0
- package/dist/motion.dev.js +6121 -0
- package/dist/motion.js +1 -0
- package/dist/react-client.d.ts +1 -0
- package/dist/react-m.d.ts +1 -0
- package/lib/index.js +1 -3
- package/lib/index.js.map +1 -1
- package/lib/react-client.js +3 -0
- package/lib/react-client.js.map +1 -0
- package/lib/react-m.js +3 -0
- package/lib/react-m.js.map +1 -0
- package/lib/react.js +3 -0
- package/lib/react.js.map +1 -0
- package/package.json +79 -29
- package/react/package.json +6 -0
- package/react-client/package.json +6 -0
- package/react-m/package.json +6 -0
- package/rollup.config.mjs +174 -0
- package/src/index.ts +1 -0
- package/src/react-client.ts +3 -0
- package/src/react-m.ts +3 -0
- package/src/react.ts +3 -0
- package/tsconfig.json +25 -0
- package/types/index.d.ts +1 -4
- package/types/react-client.d.ts +1 -0
- package/types/react-m.d.ts +1 -0
- package/types/react.d.ts +1 -0
- package/CHANGELOG.md +0 -372
- package/dist/animate.cjs.js +0 -22
- package/dist/animate.es.js +0 -19
- package/dist/main.cjs.js +0 -21
- package/dist/main.es.js +0 -3
- package/dist/motion.min.js +0 -1
- package/dist/motion.umd.js +0 -2359
- package/dist/size-index.js +0 -1
- package/lib/animate.js +0 -17
- package/lib/animate.js.map +0 -1
- package/types/animate.d.ts +0 -6
- package/types/animate.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
import { invariant } from '../../utils/errors.mjs';
|
|
2
|
+
import { PanSession } from '../pan/PanSession.mjs';
|
|
3
|
+
import { getGlobalLock } from './utils/lock.mjs';
|
|
4
|
+
import { isRefObject } from '../../utils/is-ref-object.mjs';
|
|
5
|
+
import { addPointerEvent } from '../../events/add-pointer-event.mjs';
|
|
6
|
+
import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, rebaseAxisConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
|
|
7
|
+
import { createBox } from '../../projection/geometry/models.mjs';
|
|
8
|
+
import { eachAxis } from '../../projection/utils/each-axis.mjs';
|
|
9
|
+
import { measurePageBox } from '../../projection/utils/measure.mjs';
|
|
10
|
+
import { extractEventInfo } from '../../events/event-info.mjs';
|
|
11
|
+
import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
|
|
12
|
+
import { addDomEvent } from '../../events/add-dom-event.mjs';
|
|
13
|
+
import { calcLength } from '../../projection/geometry/delta-calc.mjs';
|
|
14
|
+
import { mixNumber } from '../../utils/mix/number.mjs';
|
|
15
|
+
import { percent } from '../../value/types/numbers/units.mjs';
|
|
16
|
+
import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
|
|
17
|
+
import { getContextWindow } from '../../utils/get-context-window.mjs';
|
|
18
|
+
import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
|
|
19
|
+
import { frame } from '../../frameloop/frame.mjs';
|
|
20
|
+
|
|
21
|
+
const elementDragControls = new WeakMap();
|
|
22
|
+
/**
|
|
23
|
+
*
|
|
24
|
+
*/
|
|
25
|
+
// let latestPointerEvent: PointerEvent
|
|
26
|
+
class VisualElementDragControls {
|
|
27
|
+
constructor(visualElement) {
|
|
28
|
+
// This is a reference to the global drag gesture lock, ensuring only one component
|
|
29
|
+
// can "capture" the drag of one or both axes.
|
|
30
|
+
// TODO: Look into moving this into pansession?
|
|
31
|
+
this.openGlobalLock = null;
|
|
32
|
+
this.isDragging = false;
|
|
33
|
+
this.currentDirection = null;
|
|
34
|
+
this.originPoint = { x: 0, y: 0 };
|
|
35
|
+
/**
|
|
36
|
+
* The permitted boundaries of travel, in pixels.
|
|
37
|
+
*/
|
|
38
|
+
this.constraints = false;
|
|
39
|
+
this.hasMutatedConstraints = false;
|
|
40
|
+
/**
|
|
41
|
+
* The per-axis resolved elastic values.
|
|
42
|
+
*/
|
|
43
|
+
this.elastic = createBox();
|
|
44
|
+
this.visualElement = visualElement;
|
|
45
|
+
}
|
|
46
|
+
start(originEvent, { snapToCursor = false } = {}) {
|
|
47
|
+
/**
|
|
48
|
+
* Don't start dragging if this component is exiting
|
|
49
|
+
*/
|
|
50
|
+
const { presenceContext } = this.visualElement;
|
|
51
|
+
if (presenceContext && presenceContext.isPresent === false)
|
|
52
|
+
return;
|
|
53
|
+
const onSessionStart = (event) => {
|
|
54
|
+
const { dragSnapToOrigin } = this.getProps();
|
|
55
|
+
// Stop or pause any animations on both axis values immediately. This allows the user to throw and catch
|
|
56
|
+
// the component.
|
|
57
|
+
dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation();
|
|
58
|
+
if (snapToCursor) {
|
|
59
|
+
this.snapToCursor(extractEventInfo(event, "page").point);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const onStart = (event, info) => {
|
|
63
|
+
// Attempt to grab the global drag gesture lock - maybe make this part of PanSession
|
|
64
|
+
const { drag, dragPropagation, onDragStart } = this.getProps();
|
|
65
|
+
if (drag && !dragPropagation) {
|
|
66
|
+
if (this.openGlobalLock)
|
|
67
|
+
this.openGlobalLock();
|
|
68
|
+
this.openGlobalLock = getGlobalLock(drag);
|
|
69
|
+
// If we don 't have the lock, don't start dragging
|
|
70
|
+
if (!this.openGlobalLock)
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
this.isDragging = true;
|
|
74
|
+
this.currentDirection = null;
|
|
75
|
+
this.resolveConstraints();
|
|
76
|
+
if (this.visualElement.projection) {
|
|
77
|
+
this.visualElement.projection.isAnimationBlocked = true;
|
|
78
|
+
this.visualElement.projection.target = undefined;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Record gesture origin
|
|
82
|
+
*/
|
|
83
|
+
eachAxis((axis) => {
|
|
84
|
+
let current = this.getAxisMotionValue(axis).get() || 0;
|
|
85
|
+
/**
|
|
86
|
+
* If the MotionValue is a percentage value convert to px
|
|
87
|
+
*/
|
|
88
|
+
if (percent.test(current)) {
|
|
89
|
+
const { projection } = this.visualElement;
|
|
90
|
+
if (projection && projection.layout) {
|
|
91
|
+
const measuredAxis = projection.layout.layoutBox[axis];
|
|
92
|
+
if (measuredAxis) {
|
|
93
|
+
const length = calcLength(measuredAxis);
|
|
94
|
+
current = length * (parseFloat(current) / 100);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
this.originPoint[axis] = current;
|
|
99
|
+
});
|
|
100
|
+
// Fire onDragStart event
|
|
101
|
+
if (onDragStart) {
|
|
102
|
+
frame.postRender(() => onDragStart(event, info));
|
|
103
|
+
}
|
|
104
|
+
addValueToWillChange(this.visualElement, "transform");
|
|
105
|
+
const { animationState } = this.visualElement;
|
|
106
|
+
animationState && animationState.setActive("whileDrag", true);
|
|
107
|
+
};
|
|
108
|
+
const onMove = (event, info) => {
|
|
109
|
+
// latestPointerEvent = event
|
|
110
|
+
const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
|
|
111
|
+
// If we didn't successfully receive the gesture lock, early return.
|
|
112
|
+
if (!dragPropagation && !this.openGlobalLock)
|
|
113
|
+
return;
|
|
114
|
+
const { offset } = info;
|
|
115
|
+
// Attempt to detect drag direction if directionLock is true
|
|
116
|
+
if (dragDirectionLock && this.currentDirection === null) {
|
|
117
|
+
this.currentDirection = getCurrentDirection(offset);
|
|
118
|
+
// If we've successfully set a direction, notify listener
|
|
119
|
+
if (this.currentDirection !== null) {
|
|
120
|
+
onDirectionLock && onDirectionLock(this.currentDirection);
|
|
121
|
+
}
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
// Update each point with the latest position
|
|
125
|
+
this.updateAxis("x", info.point, offset);
|
|
126
|
+
this.updateAxis("y", info.point, offset);
|
|
127
|
+
/**
|
|
128
|
+
* Ideally we would leave the renderer to fire naturally at the end of
|
|
129
|
+
* this frame but if the element is about to change layout as the result
|
|
130
|
+
* of a re-render we want to ensure the browser can read the latest
|
|
131
|
+
* bounding box to ensure the pointer and element don't fall out of sync.
|
|
132
|
+
*/
|
|
133
|
+
this.visualElement.render();
|
|
134
|
+
/**
|
|
135
|
+
* This must fire after the render call as it might trigger a state
|
|
136
|
+
* change which itself might trigger a layout update.
|
|
137
|
+
*/
|
|
138
|
+
onDrag && onDrag(event, info);
|
|
139
|
+
};
|
|
140
|
+
const onSessionEnd = (event, info) => this.stop(event, info);
|
|
141
|
+
const resumeAnimation = () => eachAxis((axis) => {
|
|
142
|
+
var _a;
|
|
143
|
+
return this.getAnimationState(axis) === "paused" &&
|
|
144
|
+
((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
|
|
145
|
+
});
|
|
146
|
+
const { dragSnapToOrigin } = this.getProps();
|
|
147
|
+
this.panSession = new PanSession(originEvent, {
|
|
148
|
+
onSessionStart,
|
|
149
|
+
onStart,
|
|
150
|
+
onMove,
|
|
151
|
+
onSessionEnd,
|
|
152
|
+
resumeAnimation,
|
|
153
|
+
}, {
|
|
154
|
+
transformPagePoint: this.visualElement.getTransformPagePoint(),
|
|
155
|
+
dragSnapToOrigin,
|
|
156
|
+
contextWindow: getContextWindow(this.visualElement),
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
stop(event, info) {
|
|
160
|
+
const isDragging = this.isDragging;
|
|
161
|
+
this.cancel();
|
|
162
|
+
if (!isDragging)
|
|
163
|
+
return;
|
|
164
|
+
const { velocity } = info;
|
|
165
|
+
this.startAnimation(velocity);
|
|
166
|
+
const { onDragEnd } = this.getProps();
|
|
167
|
+
if (onDragEnd) {
|
|
168
|
+
frame.postRender(() => onDragEnd(event, info));
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
cancel() {
|
|
172
|
+
this.isDragging = false;
|
|
173
|
+
const { projection, animationState } = this.visualElement;
|
|
174
|
+
if (projection) {
|
|
175
|
+
projection.isAnimationBlocked = false;
|
|
176
|
+
}
|
|
177
|
+
this.panSession && this.panSession.end();
|
|
178
|
+
this.panSession = undefined;
|
|
179
|
+
const { dragPropagation } = this.getProps();
|
|
180
|
+
if (!dragPropagation && this.openGlobalLock) {
|
|
181
|
+
this.openGlobalLock();
|
|
182
|
+
this.openGlobalLock = null;
|
|
183
|
+
}
|
|
184
|
+
animationState && animationState.setActive("whileDrag", false);
|
|
185
|
+
}
|
|
186
|
+
updateAxis(axis, _point, offset) {
|
|
187
|
+
const { drag } = this.getProps();
|
|
188
|
+
// If we're not dragging this axis, do an early return.
|
|
189
|
+
if (!offset || !shouldDrag(axis, drag, this.currentDirection))
|
|
190
|
+
return;
|
|
191
|
+
const axisValue = this.getAxisMotionValue(axis);
|
|
192
|
+
let next = this.originPoint[axis] + offset[axis];
|
|
193
|
+
// Apply constraints
|
|
194
|
+
if (this.constraints && this.constraints[axis]) {
|
|
195
|
+
next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
|
|
196
|
+
}
|
|
197
|
+
axisValue.set(next);
|
|
198
|
+
}
|
|
199
|
+
resolveConstraints() {
|
|
200
|
+
var _a;
|
|
201
|
+
const { dragConstraints, dragElastic } = this.getProps();
|
|
202
|
+
const layout = this.visualElement.projection &&
|
|
203
|
+
!this.visualElement.projection.layout
|
|
204
|
+
? this.visualElement.projection.measure(false)
|
|
205
|
+
: (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
|
|
206
|
+
const prevConstraints = this.constraints;
|
|
207
|
+
if (dragConstraints && isRefObject(dragConstraints)) {
|
|
208
|
+
if (!this.constraints) {
|
|
209
|
+
this.constraints = this.resolveRefConstraints();
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
else {
|
|
213
|
+
if (dragConstraints && layout) {
|
|
214
|
+
this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
this.constraints = false;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
this.elastic = resolveDragElastic(dragElastic);
|
|
221
|
+
/**
|
|
222
|
+
* If we're outputting to external MotionValues, we want to rebase the measured constraints
|
|
223
|
+
* from viewport-relative to component-relative.
|
|
224
|
+
*/
|
|
225
|
+
if (prevConstraints !== this.constraints &&
|
|
226
|
+
layout &&
|
|
227
|
+
this.constraints &&
|
|
228
|
+
!this.hasMutatedConstraints) {
|
|
229
|
+
eachAxis((axis) => {
|
|
230
|
+
if (this.constraints !== false &&
|
|
231
|
+
this.getAxisMotionValue(axis)) {
|
|
232
|
+
this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
resolveRefConstraints() {
|
|
238
|
+
const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
|
|
239
|
+
if (!constraints || !isRefObject(constraints))
|
|
240
|
+
return false;
|
|
241
|
+
const constraintsElement = constraints.current;
|
|
242
|
+
invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
|
|
243
|
+
const { projection } = this.visualElement;
|
|
244
|
+
// TODO
|
|
245
|
+
if (!projection || !projection.layout)
|
|
246
|
+
return false;
|
|
247
|
+
const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
|
|
248
|
+
let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
|
|
249
|
+
/**
|
|
250
|
+
* If there's an onMeasureDragConstraints listener we call it and
|
|
251
|
+
* if different constraints are returned, set constraints to that
|
|
252
|
+
*/
|
|
253
|
+
if (onMeasureDragConstraints) {
|
|
254
|
+
const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
|
|
255
|
+
this.hasMutatedConstraints = !!userConstraints;
|
|
256
|
+
if (userConstraints) {
|
|
257
|
+
measuredConstraints = convertBoundingBoxToBox(userConstraints);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
return measuredConstraints;
|
|
261
|
+
}
|
|
262
|
+
startAnimation(velocity) {
|
|
263
|
+
const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
|
|
264
|
+
const constraints = this.constraints || {};
|
|
265
|
+
const momentumAnimations = eachAxis((axis) => {
|
|
266
|
+
if (!shouldDrag(axis, drag, this.currentDirection)) {
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
let transition = (constraints && constraints[axis]) || {};
|
|
270
|
+
if (dragSnapToOrigin)
|
|
271
|
+
transition = { min: 0, max: 0 };
|
|
272
|
+
/**
|
|
273
|
+
* Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
|
|
274
|
+
* of spring animations so we should look into adding a disable spring option to `inertia`.
|
|
275
|
+
* We could do something here where we affect the `bounceStiffness` and `bounceDamping`
|
|
276
|
+
* using the value of `dragElastic`.
|
|
277
|
+
*/
|
|
278
|
+
const bounceStiffness = dragElastic ? 200 : 1000000;
|
|
279
|
+
const bounceDamping = dragElastic ? 40 : 10000000;
|
|
280
|
+
const inertia = {
|
|
281
|
+
type: "inertia",
|
|
282
|
+
velocity: dragMomentum ? velocity[axis] : 0,
|
|
283
|
+
bounceStiffness,
|
|
284
|
+
bounceDamping,
|
|
285
|
+
timeConstant: 750,
|
|
286
|
+
restDelta: 1,
|
|
287
|
+
restSpeed: 10,
|
|
288
|
+
...dragTransition,
|
|
289
|
+
...transition,
|
|
290
|
+
};
|
|
291
|
+
// If we're not animating on an externally-provided `MotionValue` we can use the
|
|
292
|
+
// component's animation controls which will handle interactions with whileHover (etc),
|
|
293
|
+
// otherwise we just have to animate the `MotionValue` itself.
|
|
294
|
+
return this.startAxisValueAnimation(axis, inertia);
|
|
295
|
+
});
|
|
296
|
+
// Run all animations and then resolve the new drag constraints.
|
|
297
|
+
return Promise.all(momentumAnimations).then(onDragTransitionEnd);
|
|
298
|
+
}
|
|
299
|
+
startAxisValueAnimation(axis, transition) {
|
|
300
|
+
const axisValue = this.getAxisMotionValue(axis);
|
|
301
|
+
addValueToWillChange(this.visualElement, axis);
|
|
302
|
+
return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false));
|
|
303
|
+
}
|
|
304
|
+
stopAnimation() {
|
|
305
|
+
eachAxis((axis) => this.getAxisMotionValue(axis).stop());
|
|
306
|
+
}
|
|
307
|
+
pauseAnimation() {
|
|
308
|
+
eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });
|
|
309
|
+
}
|
|
310
|
+
getAnimationState(axis) {
|
|
311
|
+
var _a;
|
|
312
|
+
return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
|
|
313
|
+
}
|
|
314
|
+
/**
|
|
315
|
+
* Drag works differently depending on which props are provided.
|
|
316
|
+
*
|
|
317
|
+
* - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
|
|
318
|
+
* - Otherwise, we apply the delta to the x/y motion values.
|
|
319
|
+
*/
|
|
320
|
+
getAxisMotionValue(axis) {
|
|
321
|
+
const dragKey = `_drag${axis.toUpperCase()}`;
|
|
322
|
+
const props = this.visualElement.getProps();
|
|
323
|
+
const externalMotionValue = props[dragKey];
|
|
324
|
+
return externalMotionValue
|
|
325
|
+
? externalMotionValue
|
|
326
|
+
: this.visualElement.getValue(axis, (props.initial
|
|
327
|
+
? props.initial[axis]
|
|
328
|
+
: undefined) || 0);
|
|
329
|
+
}
|
|
330
|
+
snapToCursor(point) {
|
|
331
|
+
eachAxis((axis) => {
|
|
332
|
+
const { drag } = this.getProps();
|
|
333
|
+
// If we're not dragging this axis, do an early return.
|
|
334
|
+
if (!shouldDrag(axis, drag, this.currentDirection))
|
|
335
|
+
return;
|
|
336
|
+
const { projection } = this.visualElement;
|
|
337
|
+
const axisValue = this.getAxisMotionValue(axis);
|
|
338
|
+
if (projection && projection.layout) {
|
|
339
|
+
const { min, max } = projection.layout.layoutBox[axis];
|
|
340
|
+
axisValue.set(point[axis] - mixNumber(min, max, 0.5));
|
|
341
|
+
}
|
|
342
|
+
});
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* When the viewport resizes we want to check if the measured constraints
|
|
346
|
+
* have changed and, if so, reposition the element within those new constraints
|
|
347
|
+
* relative to where it was before the resize.
|
|
348
|
+
*/
|
|
349
|
+
scalePositionWithinConstraints() {
|
|
350
|
+
if (!this.visualElement.current)
|
|
351
|
+
return;
|
|
352
|
+
const { drag, dragConstraints } = this.getProps();
|
|
353
|
+
const { projection } = this.visualElement;
|
|
354
|
+
if (!isRefObject(dragConstraints) || !projection || !this.constraints)
|
|
355
|
+
return;
|
|
356
|
+
/**
|
|
357
|
+
* Stop current animations as there can be visual glitching if we try to do
|
|
358
|
+
* this mid-animation
|
|
359
|
+
*/
|
|
360
|
+
this.stopAnimation();
|
|
361
|
+
/**
|
|
362
|
+
* Record the relative position of the dragged element relative to the
|
|
363
|
+
* constraints box and save as a progress value.
|
|
364
|
+
*/
|
|
365
|
+
const boxProgress = { x: 0, y: 0 };
|
|
366
|
+
eachAxis((axis) => {
|
|
367
|
+
const axisValue = this.getAxisMotionValue(axis);
|
|
368
|
+
if (axisValue && this.constraints !== false) {
|
|
369
|
+
const latest = axisValue.get();
|
|
370
|
+
boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
|
|
371
|
+
}
|
|
372
|
+
});
|
|
373
|
+
/**
|
|
374
|
+
* Update the layout of this element and resolve the latest drag constraints
|
|
375
|
+
*/
|
|
376
|
+
const { transformTemplate } = this.visualElement.getProps();
|
|
377
|
+
this.visualElement.current.style.transform = transformTemplate
|
|
378
|
+
? transformTemplate({}, "")
|
|
379
|
+
: "none";
|
|
380
|
+
projection.root && projection.root.updateScroll();
|
|
381
|
+
projection.updateLayout();
|
|
382
|
+
this.resolveConstraints();
|
|
383
|
+
/**
|
|
384
|
+
* For each axis, calculate the current progress of the layout axis
|
|
385
|
+
* within the new constraints.
|
|
386
|
+
*/
|
|
387
|
+
eachAxis((axis) => {
|
|
388
|
+
if (!shouldDrag(axis, drag, null))
|
|
389
|
+
return;
|
|
390
|
+
/**
|
|
391
|
+
* Calculate a new transform based on the previous box progress
|
|
392
|
+
*/
|
|
393
|
+
const axisValue = this.getAxisMotionValue(axis);
|
|
394
|
+
const { min, max } = this.constraints[axis];
|
|
395
|
+
axisValue.set(mixNumber(min, max, boxProgress[axis]));
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
addListeners() {
|
|
399
|
+
if (!this.visualElement.current)
|
|
400
|
+
return;
|
|
401
|
+
elementDragControls.set(this.visualElement, this);
|
|
402
|
+
const element = this.visualElement.current;
|
|
403
|
+
/**
|
|
404
|
+
* Attach a pointerdown event listener on this DOM element to initiate drag tracking.
|
|
405
|
+
*/
|
|
406
|
+
const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
|
|
407
|
+
const { drag, dragListener = true } = this.getProps();
|
|
408
|
+
drag && dragListener && this.start(event);
|
|
409
|
+
});
|
|
410
|
+
const measureDragConstraints = () => {
|
|
411
|
+
const { dragConstraints } = this.getProps();
|
|
412
|
+
if (isRefObject(dragConstraints) && dragConstraints.current) {
|
|
413
|
+
this.constraints = this.resolveRefConstraints();
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
const { projection } = this.visualElement;
|
|
417
|
+
const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
|
|
418
|
+
if (projection && !projection.layout) {
|
|
419
|
+
projection.root && projection.root.updateScroll();
|
|
420
|
+
projection.updateLayout();
|
|
421
|
+
}
|
|
422
|
+
frame.read(measureDragConstraints);
|
|
423
|
+
/**
|
|
424
|
+
* Attach a window resize listener to scale the draggable target within its defined
|
|
425
|
+
* constraints as the window resizes.
|
|
426
|
+
*/
|
|
427
|
+
const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
|
|
428
|
+
/**
|
|
429
|
+
* If the element's layout changes, calculate the delta and apply that to
|
|
430
|
+
* the drag gesture's origin point.
|
|
431
|
+
*/
|
|
432
|
+
const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
|
|
433
|
+
if (this.isDragging && hasLayoutChanged) {
|
|
434
|
+
eachAxis((axis) => {
|
|
435
|
+
const motionValue = this.getAxisMotionValue(axis);
|
|
436
|
+
if (!motionValue)
|
|
437
|
+
return;
|
|
438
|
+
this.originPoint[axis] += delta[axis].translate;
|
|
439
|
+
motionValue.set(motionValue.get() + delta[axis].translate);
|
|
440
|
+
});
|
|
441
|
+
this.visualElement.render();
|
|
442
|
+
}
|
|
443
|
+
}));
|
|
444
|
+
return () => {
|
|
445
|
+
stopResizeListener();
|
|
446
|
+
stopPointerListener();
|
|
447
|
+
stopMeasureLayoutListener();
|
|
448
|
+
stopLayoutUpdateListener && stopLayoutUpdateListener();
|
|
449
|
+
};
|
|
450
|
+
}
|
|
451
|
+
getProps() {
|
|
452
|
+
const props = this.visualElement.getProps();
|
|
453
|
+
const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
|
|
454
|
+
return {
|
|
455
|
+
...props,
|
|
456
|
+
drag,
|
|
457
|
+
dragDirectionLock,
|
|
458
|
+
dragPropagation,
|
|
459
|
+
dragConstraints,
|
|
460
|
+
dragElastic,
|
|
461
|
+
dragMomentum,
|
|
462
|
+
};
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
function shouldDrag(direction, drag, currentDirection) {
|
|
466
|
+
return ((drag === true || drag === direction) &&
|
|
467
|
+
(currentDirection === null || currentDirection === direction));
|
|
468
|
+
}
|
|
469
|
+
/**
|
|
470
|
+
* Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
|
|
471
|
+
* than the provided threshold, return `null`.
|
|
472
|
+
*
|
|
473
|
+
* @param offset - The x/y offset from origin.
|
|
474
|
+
* @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
|
|
475
|
+
*/
|
|
476
|
+
function getCurrentDirection(offset, lockThreshold = 10) {
|
|
477
|
+
let direction = null;
|
|
478
|
+
if (Math.abs(offset.y) > lockThreshold) {
|
|
479
|
+
direction = "y";
|
|
480
|
+
}
|
|
481
|
+
else if (Math.abs(offset.x) > lockThreshold) {
|
|
482
|
+
direction = "x";
|
|
483
|
+
}
|
|
484
|
+
return direction;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
export { VisualElementDragControls, elementDragControls };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Feature } from '../../motion/features/Feature.mjs';
|
|
2
|
+
import { noop } from '../../utils/noop.mjs';
|
|
3
|
+
import { VisualElementDragControls } from './VisualElementDragControls.mjs';
|
|
4
|
+
|
|
5
|
+
class DragGesture extends Feature {
|
|
6
|
+
constructor(node) {
|
|
7
|
+
super(node);
|
|
8
|
+
this.removeGroupControls = noop;
|
|
9
|
+
this.removeListeners = noop;
|
|
10
|
+
this.controls = new VisualElementDragControls(node);
|
|
11
|
+
}
|
|
12
|
+
mount() {
|
|
13
|
+
// If we've been provided a DragControls for manual control over the drag gesture,
|
|
14
|
+
// subscribe this component to it on mount.
|
|
15
|
+
const { dragControls } = this.node.getProps();
|
|
16
|
+
if (dragControls) {
|
|
17
|
+
this.removeGroupControls = dragControls.subscribe(this.controls);
|
|
18
|
+
}
|
|
19
|
+
this.removeListeners = this.controls.addListeners() || noop;
|
|
20
|
+
}
|
|
21
|
+
unmount() {
|
|
22
|
+
this.removeGroupControls();
|
|
23
|
+
this.removeListeners();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { DragGesture };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { progress } from '../../../utils/progress.mjs';
|
|
2
|
+
import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
|
|
3
|
+
import { clamp } from '../../../utils/clamp.mjs';
|
|
4
|
+
import { mixNumber } from '../../../utils/mix/number.mjs';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Apply constraints to a point. These constraints are both physical along an
|
|
8
|
+
* axis, and an elastic factor that determines how much to constrain the point
|
|
9
|
+
* by if it does lie outside the defined parameters.
|
|
10
|
+
*/
|
|
11
|
+
function applyConstraints(point, { min, max }, elastic) {
|
|
12
|
+
if (min !== undefined && point < min) {
|
|
13
|
+
// If we have a min point defined, and this is outside of that, constrain
|
|
14
|
+
point = elastic
|
|
15
|
+
? mixNumber(min, point, elastic.min)
|
|
16
|
+
: Math.max(point, min);
|
|
17
|
+
}
|
|
18
|
+
else if (max !== undefined && point > max) {
|
|
19
|
+
// If we have a max point defined, and this is outside of that, constrain
|
|
20
|
+
point = elastic
|
|
21
|
+
? mixNumber(max, point, elastic.max)
|
|
22
|
+
: Math.min(point, max);
|
|
23
|
+
}
|
|
24
|
+
return point;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Calculate constraints in terms of the viewport when defined relatively to the
|
|
28
|
+
* measured axis. This is measured from the nearest edge, so a max constraint of 200
|
|
29
|
+
* on an axis with a max value of 300 would return a constraint of 500 - axis length
|
|
30
|
+
*/
|
|
31
|
+
function calcRelativeAxisConstraints(axis, min, max) {
|
|
32
|
+
return {
|
|
33
|
+
min: min !== undefined ? axis.min + min : undefined,
|
|
34
|
+
max: max !== undefined
|
|
35
|
+
? axis.max + max - (axis.max - axis.min)
|
|
36
|
+
: undefined,
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Calculate constraints in terms of the viewport when
|
|
41
|
+
* defined relatively to the measured bounding box.
|
|
42
|
+
*/
|
|
43
|
+
function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
|
|
44
|
+
return {
|
|
45
|
+
x: calcRelativeAxisConstraints(layoutBox.x, left, right),
|
|
46
|
+
y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Calculate viewport constraints when defined as another viewport-relative axis
|
|
51
|
+
*/
|
|
52
|
+
function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
|
|
53
|
+
let min = constraintsAxis.min - layoutAxis.min;
|
|
54
|
+
let max = constraintsAxis.max - layoutAxis.max;
|
|
55
|
+
// If the constraints axis is actually smaller than the layout axis then we can
|
|
56
|
+
// flip the constraints
|
|
57
|
+
if (constraintsAxis.max - constraintsAxis.min <
|
|
58
|
+
layoutAxis.max - layoutAxis.min) {
|
|
59
|
+
[min, max] = [max, min];
|
|
60
|
+
}
|
|
61
|
+
return { min, max };
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Calculate viewport constraints when defined as another viewport-relative box
|
|
65
|
+
*/
|
|
66
|
+
function calcViewportConstraints(layoutBox, constraintsBox) {
|
|
67
|
+
return {
|
|
68
|
+
x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
|
|
69
|
+
y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Calculate a transform origin relative to the source axis, between 0-1, that results
|
|
74
|
+
* in an asthetically pleasing scale/transform needed to project from source to target.
|
|
75
|
+
*/
|
|
76
|
+
function calcOrigin(source, target) {
|
|
77
|
+
let origin = 0.5;
|
|
78
|
+
const sourceLength = calcLength(source);
|
|
79
|
+
const targetLength = calcLength(target);
|
|
80
|
+
if (targetLength > sourceLength) {
|
|
81
|
+
origin = progress(target.min, target.max - sourceLength, source.min);
|
|
82
|
+
}
|
|
83
|
+
else if (sourceLength > targetLength) {
|
|
84
|
+
origin = progress(source.min, source.max - targetLength, target.min);
|
|
85
|
+
}
|
|
86
|
+
return clamp(0, 1, origin);
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Rebase the calculated viewport constraints relative to the layout.min point.
|
|
90
|
+
*/
|
|
91
|
+
function rebaseAxisConstraints(layout, constraints) {
|
|
92
|
+
const relativeConstraints = {};
|
|
93
|
+
if (constraints.min !== undefined) {
|
|
94
|
+
relativeConstraints.min = constraints.min - layout.min;
|
|
95
|
+
}
|
|
96
|
+
if (constraints.max !== undefined) {
|
|
97
|
+
relativeConstraints.max = constraints.max - layout.min;
|
|
98
|
+
}
|
|
99
|
+
return relativeConstraints;
|
|
100
|
+
}
|
|
101
|
+
const defaultElastic = 0.35;
|
|
102
|
+
/**
|
|
103
|
+
* Accepts a dragElastic prop and returns resolved elastic values for each axis.
|
|
104
|
+
*/
|
|
105
|
+
function resolveDragElastic(dragElastic = defaultElastic) {
|
|
106
|
+
if (dragElastic === false) {
|
|
107
|
+
dragElastic = 0;
|
|
108
|
+
}
|
|
109
|
+
else if (dragElastic === true) {
|
|
110
|
+
dragElastic = defaultElastic;
|
|
111
|
+
}
|
|
112
|
+
return {
|
|
113
|
+
x: resolveAxisElastic(dragElastic, "left", "right"),
|
|
114
|
+
y: resolveAxisElastic(dragElastic, "top", "bottom"),
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
|
|
118
|
+
return {
|
|
119
|
+
min: resolvePointElastic(dragElastic, minLabel),
|
|
120
|
+
max: resolvePointElastic(dragElastic, maxLabel),
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
function resolvePointElastic(dragElastic, label) {
|
|
124
|
+
return typeof dragElastic === "number"
|
|
125
|
+
? dragElastic
|
|
126
|
+
: dragElastic[label] || 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export { applyConstraints, calcOrigin, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };
|