motion-start 0.0.1 → 0.0.3

package/dist/gestures/drag/VisualElementDragControls.js

@@ -0,0 +1,749 @@
+/**
+based on framer-motion@4.1.15,
+Copyright (c) 2018 Framer B.V.
+*/
+import { flushSync } from 'framesync';
+import { progress } from 'popmotion';
+import { __assign, __read, __spreadArray } from 'tslib';
+import { startAnimation } from '../../animation/utils/transitions.js';
+import { getViewportPointFromEvent } from '../../events/event-info.js';
+import { addDomEvent } from '../../events/use-dom-event.js';
+import { addPointerEvent } from '../../events/use-pointer-event.js';
+import { calcRelativeOffset } from '../../motion/features/layout/utils.js';
+import { convertToRelativeProjection } from '../../render/dom/projection/convert-to-relative.js';
+import { getBoundingBox } from '../../render/dom/projection/measure.js';
+import { collectProjectingAncestors, collectProjectingChildren, updateLayoutMeasurement, } from '../../render/dom/projection/utils.js';
+import { batchLayout, flushLayout } from '../../render/dom/utils/batch-layout.js';
+import { AnimationType } from '../../render/utils/types.js';
+import { eachAxis } from '../../utils/each-axis.js';
+import { invariant } from '../../utils/errors.js';
+import { calcOrigin } from '../../utils/geometry/delta-calc.js';
+import { axisBox, convertAxisBoxToBoundingBox, convertBoundingBoxToAxisBox } from '../../utils/geometry/index.js';
+import { isRefObject } from '../../utils/is-ref-object.js';
+import { PanSession } from '../PanSession.js';
+import { applyConstraints, calcConstrainedMinPoint, calcPositionFromProgress, calcRelativeConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveDragElastic, } from './utils/constraints.js';
+import { getGlobalLock } from './utils/lock.js';
+var elementDragControls = new WeakMap();
+/**
+ *
+ */
+var lastPointerEvent;
+class VisualElementDragControls {
+    constructor({ visualElement }) {
+        /**
+         * Track whether we're currently dragging.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "isDragging", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /**
+         * The current direction of drag, or `null` if both.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "currentDirection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /**
+         * The permitted boundaries of travel, in pixels.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "constraints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /**
+         * The per-axis resolved elastic values.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "elastic", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: axisBox()
+        });
+        /**
+         * A reference to the host component's latest props.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "props", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        /**
+         * @internal
+         */
+        Object.defineProperty(this, "visualElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @internal
+         */
+        Object.defineProperty(this, "hasMutatedConstraints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /**
+         * @internal
+         */
+        Object.defineProperty(this, "cancelLayout", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * Track the initial position of the cursor relative to the dragging element
+         * when dragging starts as a value of 0-1 on each axis. We then use this to calculate
+         * an ideal bounding box for the VisualElement renderer to project into every frame.
+         *
+         * @internal
+         */
+        Object.defineProperty(this, "cursorProgress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                x: 0.5,
+                y: 0.5,
+            }
+        });
+        Object.defineProperty(this, "originPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { x: 0, y: 0 }
+        });
+        Object.defineProperty(this, "openGlobalLock", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /**
+         * @internal
+         */
+        Object.defineProperty(this, "panSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * A reference to the measured constraints bounding box
+         */
+        Object.defineProperty(this, "constraintsBox", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * Instantiate a PanSession for the drag gesture
+         *
+         * @public
+         */
+        Object.defineProperty(this, "start", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (originEvent, { snapToCursor = false, cursorProgress = undefined } = {}) => {
+                const onSessionStart = (event) => {
+                    // Stop any animations on both axis values immediately. This allows the user to throw and catch
+                    // the component.
+                    this.stopMotion();
+                    /**
+                     * Save the initial point. We'll use this to calculate the pointer's position rather
+                     * than the one we receive when the gesture actually starts. By then, the pointer will
+                     * have already moved, and the perception will be of the pointer "slipping" across the element
+                     */
+                    var initialPoint = getViewportPointFromEvent(event).point;
+                    (event = this.cancelLayout) === null || event === void 0 ? void 0 : event.call(this);
+                    var _self = this;
+                    this.cancelLayout = batchLayout((read, write) => {
+                        var ancestors = collectProjectingAncestors(_self.visualElement);
+                        var children = collectProjectingChildren(_self.visualElement);
+                        var tree = __spreadArray(__spreadArray([], __read(ancestors)), __read(children));
+                        var hasManuallySetCursorOrigin = false;
+                        /**
+                         * Apply a simple lock to the projection target. This ensures no animations
+                         * can run on the projection box while this lock is active.
+                         */
+                        _self.isLayoutDrag() && _self.visualElement.lockProjectionTarget();
+                        write(() => {
+                            tree.forEach((element) => element.resetTransform());
+                        });
+                        read(() => {
+                            updateLayoutMeasurement(_self.visualElement);
+                            children.forEach(updateLayoutMeasurement);
+                        });
+                        write(() => {
+                            tree.forEach((element) => element.restoreTransform());
+                            if (snapToCursor) {
+                                hasManuallySetCursorOrigin = _self.snapToCursor(initialPoint);
+                            }
+                        });
+                        read(() => {
+                            var isRelativeDrag = Boolean(_self.getAxisMotionValue('x') && !_self.isExternalDrag());
+                            if (!isRelativeDrag) {
+                                _self.visualElement.rebaseProjectionTarget(true, _self.visualElement.measureViewportBox(false));
+                            }
+                            _self.visualElement.scheduleUpdateLayoutProjection();
+                            /**
+                             * When dragging starts, we want to find where the cursor is relative to the bounding box
+                             * of the element. Every frame, we calculate a new bounding box using this relative position
+                             * and let the visualElement renderer figure out how to reproject the element into this bounding
+                             * box.
+                             *
+                             * By doing it this way, rather than applying an x/y transform directly to the element,
+                             * we can ensure the component always visually sticks to the cursor as we'd expect, even
+                             * if the DOM element itself changes layout as a result of React updates the user might
+                             * make based on the drag position.
+                             */
+                            var projection = _self.visualElement.projection;
+                            eachAxis((axis) => {
+                                if (!hasManuallySetCursorOrigin) {
+                                    var _a = projection.target[axis], min = _a.min, max = _a.max;
+                                    _self.cursorProgress[axis] = cursorProgress
+                                        ? cursorProgress[axis]
+                                        : progress(min, max, initialPoint[axis]);
+                                }
+                                /**
+                                 * If we have external drag MotionValues, record their origin point. On pointermove
+                                 * we'll apply the pan gesture offset directly to this value.
+                                 */
+                                var axisValue = _self.getAxisMotionValue(axis);
+                                if (axisValue) {
+                                    _self.originPoint[axis] = axisValue.get();
+                                }
+                            });
+                        });
+                        write(() => {
+                            flushSync.update();
+                            flushSync.preRender();
+                            flushSync.render();
+                            flushSync.postRender();
+                        });
+                        read(() => _self.resolveDragConstraints());
+                    });
+                };
+                const onStart = (event, info) => {
+                    // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
+                    const { drag, dragPropagation, onDragStart } = this.props;
+                    if (drag && !dragPropagation) {
+                        if (this.openGlobalLock)
+                            this.openGlobalLock();
+                        this.openGlobalLock = getGlobalLock(drag);
+                        // If we don 't have the lock, don't start dragging
+                        if (!this.openGlobalLock)
+                            return;
+                    }
+                    flushLayout();
+                    // Set current drag status
+                    this.isDragging = true;
+                    this.currentDirection = null;
+                    // Fire onDragStart event
+                    if (onDragStart)
+                        onDragStart(event, info);
+                    const { animationState } = this.visualElement;
+                    animationState && animationState.setActive(AnimationType.Drag, true);
+                };
+                const onMove = (event, info) => {
+                    const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag } = this.props;
+                    // If we didn't successfully receive the gesture lock, early return.
+                    if (!dragPropagation && !this.openGlobalLock)
+                        return;
+                    var offset = info.offset;
+                    // Attempt to detect drag direction if directionLock is true
+                    if (dragDirectionLock && this.currentDirection === null) {
+                        this.currentDirection = getCurrentDirection(offset);
+                        // If we've successfully set a direction, notify listener
+                        if (this.currentDirection !== null) {
+                            onDirectionLock && onDirectionLock(this.currentDirection);
+                        }
+                        return;
+                    }
+                    // Update each point with the latest position
+                    this.updateAxis('x', info.point, offset);
+                    this.updateAxis('y', info.point, offset);
+                    // Fire onDrag event
+                    onDrag && onDrag(event, info);
+                    // Update the last pointer event
+                    lastPointerEvent = event;
+                };
+                const onSessionEnd = (event, info) => {
+                    return this.stop(event, info);
+                };
+                const transformPagePoint = this.props.transformPagePoint;
+                this.panSession = new PanSession(originEvent, {
+                    onSessionStart,
+                    onStart,
+                    onMove,
+                    onSessionEnd,
+                }, { transformPagePoint: transformPagePoint });
+            }
+        });
+        Object.defineProperty(this, "resolveDragConstraints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { dragConstraints, dragElastic } = this.props;
+                var layout = this.visualElement.getLayoutState().layoutCorrected;
+                if (dragConstraints) {
+                    this.constraints = isRefObject(dragConstraints)
+                        ? this.resolveRefConstraints(layout, dragConstraints)
+                        : calcRelativeConstraints(layout, dragConstraints);
+                }
+                else {
+                    this.constraints = false;
+                }
+                this.elastic = resolveDragElastic(dragElastic);
+                /**
+                 * If we're outputting to external MotionValues, we want to rebase the measured constraints
+                 * from viewport-relative to component-relative.
+                 */
+                if (this.constraints && !this.hasMutatedConstraints) {
+                    eachAxis((axis) => {
+                        if (this.getAxisMotionValue(axis)) {
+                            this.constraints[axis] = rebaseAxisConstraints(layout[axis], this.constraints[axis]);
+                        }
+                    });
+                }
+            }
+        });
+        Object.defineProperty(this, "resolveRefConstraints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (layoutBox, constraints) => {
+                const { transformPagePoint, onMeasureDragConstraints } = this.props;
+                const constraintsElement = constraints.current;
+                invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
+                this.constraintsBox = getBoundingBox(constraintsElement, transformPagePoint);
+                var measuredConstraints = calcViewportConstraints(layoutBox, this.constraintsBox);
+                /**
+                 * If there's an onMeasureDragConstraints listener we call it and
+                 * if different constraints are returned, set constraints to that
+                 */
+                if (onMeasureDragConstraints) {
+                    var userConstraints = onMeasureDragConstraints(convertAxisBoxToBoundingBox(measuredConstraints));
+                    this.hasMutatedConstraints = !!userConstraints;
+                    if (userConstraints) {
+                        measuredConstraints = convertBoundingBoxToAxisBox(userConstraints);
+                    }
+                }
+                return measuredConstraints;
+            }
+        });
+        Object.defineProperty(this, "cancelDrag", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b;
+                this.visualElement.unlockProjectionTarget();
+                (_a = this.cancelLayout) === null || _a === void 0 ? void 0 : _a.call(this);
+                this.isDragging = false;
+                const { projection, animationState } = this.visualElement;
+                this.panSession && this.panSession.end();
+                this.panSession = undefined;
+                if (!this.props.dragPropagation && this.openGlobalLock) {
+                    this.openGlobalLock();
+                    this.openGlobalLock = null;
+                }
+                animationState && animationState.setActive(AnimationType.Drag, false);
+            }
+        });
+        Object.defineProperty(this, "stop", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event, info) => {
+                var _a, _b, _c;
+                (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
+                this.panSession = undefined;
+                var isDragging = this.isDragging;
+                this.cancelDrag();
+                if (!isDragging)
+                    return;
+                var velocity = info.velocity;
+                this.animateDragEnd(velocity);
+                const { onDragEnd } = this.props;
+                if (onDragEnd)
+                    onDragEnd(event, info);
+            }
+        });
+        Object.defineProperty(this, "snapToCursor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (point) => {
+                return eachAxis((axis) => {
+                    var drag = this.props.drag;
+                    // If we're not dragging this axis, do an early return.
+                    if (!shouldDrag(axis, drag, this.currentDirection))
+                        return;
+                    var axisValue = this.getAxisMotionValue(axis);
+                    if (axisValue) {
+                        var box = this.visualElement.getLayoutState().layout;
+                        var length_1 = box[axis].max - box[axis].min;
+                        var center = box[axis].min + length_1 / 2;
+                        var offset = point[axis] - center;
+                        this.originPoint[axis] = point[axis];
+                        axisValue.set(offset);
+                    }
+                    else {
+                        this.cursorProgress[axis] = 0.5;
+                        return true;
+                    }
+                }).includes(true);
+            }
+        });
+        /**
+         * Update the specified axis with the latest pointer information.
+         */
+        Object.defineProperty(this, "updateAxis", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (axis, point, offset) => {
+                var drag = this.props.drag;
+                // If we're not dragging this axis, do an early return.
+                if (!shouldDrag(axis, drag, this.currentDirection))
+                    return;
+                return this.getAxisMotionValue(axis)
+                    ? this.updateAxisMotionValue(axis, offset)
+                    : this.updateVisualElementAxis(axis, point);
+            }
+        });
+        Object.defineProperty(this, "updateAxisMotionValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (axis, offset) => {
+                var axisValue = this.getAxisMotionValue(axis);
+                if (!offset || !axisValue)
+                    return;
+                var nextValue = this.originPoint[axis] + offset[axis];
+                var update = this.constraints ? applyConstraints(nextValue, this.constraints[axis], this.elastic[axis]) : nextValue;
+                axisValue.set(update);
+            }
+        });
+        Object.defineProperty(this, "updateVisualElementAxis", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (axis, point) => {
+                var _a;
+                // Get the actual layout bounding box of the element
+                var axisLayout = this.visualElement.getLayoutState().layout[axis];
+                // Calculate its current length. In the future we might want to lerp this to animate
+                // between lengths if the layout changes as we change the DOM
+                var axisLength = axisLayout.max - axisLayout.min;
+                // Get the initial progress that the pointer sat on this axis on gesture start.
+                var axisProgress = this.cursorProgress[axis];
+                // Calculate a new min point based on the latest pointer position, constraints and elastic
+                var min = calcConstrainedMinPoint(point[axis], axisLength, axisProgress, (_a = this.constraints) === null || _a === void 0 ? void 0 : _a[axis], this.elastic[axis]);
+                // Update the axis viewport target with this new min and the length
+                this.visualElement.setProjectionTargetAxis(axis, min, min + axisLength);
+            }
+        });
+        Object.defineProperty(this, "setProps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ({ drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, ...remainingProps }) => {
+                this.props = {
+                    ...remainingProps,
+                    drag,
+                    dragDirectionLock,
+                    dragPropagation,
+                    dragConstraints,
+                    dragElastic,
+                    dragMomentum,
+                };
+            }
+        });
+        /**
+         * Drag works differently depending on which props are provided.
+         *
+         * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+         * - If the component will perform layout animations, we output the gesture to the component's
+         *      visual bounding box
+         * - Otherwise, we apply the delta to the x/y motion values.
+         */
+        Object.defineProperty(this, "getAxisMotionValue", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (axis) => {
+                var _a = this.props, layout = _a.layout, layoutId = _a.layoutId;
+                var dragKey = '_drag' + axis.toUpperCase();
+                if (this.props[dragKey]) {
+                    return this.props[dragKey];
+                }
+                else if (!layout && layoutId === undefined) {
+                    return this.visualElement.getValue(axis, 0);
+                }
+            }
+        });
+        Object.defineProperty(this, "isLayoutDrag", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return !this.getAxisMotionValue('x');
+            }
+        });
+        Object.defineProperty(this, "isExternalDrag", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a = this.props, _dragX = _a._dragX, _dragY = _a._dragY;
+                return _dragX || _dragY;
+            }
+        });
+        Object.defineProperty(this, "animateDragEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (velocity) => {
+                var _a = this.props, drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition;
+                /**
+                 * Everything beyond the drag gesture should be performed with
+                 * relative projection so children stay in sync with their parent element.
+                 */
+                var isRelative = convertToRelativeProjection(this.visualElement, this.isLayoutDrag() && !this.isExternalDrag());
+                /**
+                 * If we had previously resolved constraints relative to the viewport,
+                 * we need to also convert those to a relative coordinate space for the animation
+                 */
+                var constraints = this.constraints || {};
+                if (isRelative && Object.keys(constraints).length && this.isLayoutDrag()) {
+                    var projectionParent = this.visualElement.getProjectionParent();
+                    if (projectionParent) {
+                        var relativeConstraints_1 = calcRelativeOffset(projectionParent.projection.targetFinal, constraints);
+                        eachAxis((axis) => {
+                            var _a = relativeConstraints_1[axis], min = _a.min, max = _a.max;
+                            constraints[axis] = {
+                                min: isNaN(min) ? undefined : min,
+                                max: isNaN(max) ? undefined : max,
+                            };
+                        });
+                    }
+                }
+                var momentumAnimations = eachAxis((axis) => {
+                    var _a;
+                    if (!shouldDrag(axis, drag, this.currentDirection)) {
+                        return;
+                    }
+                    var transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0
+                        ? _a
+                        : {};
+                    /**
+                     * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame
+                     * of spring animations so we should look into adding a disable spring option to `inertia`.
+                     * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
+                     * using the value of `dragElastic`.
+                     */
+                    var bounceStiffness = dragElastic ? 200 : 1000000;
+                    var bounceDamping = dragElastic ? 40 : 10000000;
+                    var inertia = __assign(__assign({
+                        type: 'inertia',
+                        velocity: dragMomentum ? velocity[axis] : 0,
+                        bounceStiffness: bounceStiffness,
+                        bounceDamping: bounceDamping,
+                        timeConstant: 750,
+                        restDelta: 1,
+                        restSpeed: 10,
+                    }, dragTransition), transition);
+                    // If we're not animating on an externally-provided `MotionValue` we can use the
+                    // component's animation controls which will handle interactions with whileHover (etc),
+                    // otherwise we just have to animate the `MotionValue` itself.
+                    return this.getAxisMotionValue(axis)
+                        ? this.startAxisValueAnimation(axis, inertia)
+                        : this.visualElement.startLayoutAnimation(axis, inertia, isRelative);
+                });
+                // Run all animations and then resolve the new drag constraints.
+                return Promise.all(momentumAnimations).then(() => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onDragTransitionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                });
+            }
+        });
+        Object.defineProperty(this, "stopMotion", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                eachAxis((axis) => {
+                    var axisValue = this.getAxisMotionValue(axis);
+                    axisValue ? axisValue.stop() : this.visualElement.stopLayoutAnimation();
+                });
+            }
+        });
+        Object.defineProperty(this, "startAxisValueAnimation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (axis, transition) => {
+                var axisValue = this.getAxisMotionValue(axis);
+                if (!axisValue)
+                    return;
+                var currentValue = axisValue.get();
+                axisValue.set(currentValue);
+                axisValue.set(currentValue); // Set twice to hard-reset velocity
+                return startAnimation(axis, axisValue, 0, transition);
+            }
+        });
+        Object.defineProperty(this, "scalePoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a = this.props, drag = _a.drag, dragConstraints = _a.dragConstraints;
+                if (!isRefObject(dragConstraints) || !this.constraintsBox)
+                    return;
+                // Stop any current animations as there can be some visual glitching if we resize mid animation
+                this.stopMotion();
+                // Record the relative progress of the targetBox relative to the constraintsBox
+                var boxProgress = { x: 0, y: 0 };
+                eachAxis((axis) => {
+                    boxProgress[axis] = calcOrigin(this.visualElement.projection.target[axis], this.constraintsBox[axis]);
+                });
+                /**
+                 * For each axis, calculate the current progress of the layout axis within the constraints.
+                 * Then, using the latest layout and constraints measurements, reposition the new layout axis
+                 * proportionally within the constraints.
+                 */
+                this.updateConstraints(() => {
+                    eachAxis((axis) => {
+                        if (!shouldDrag(axis, drag, null))
+                            return;
+                        // Calculate the position of the targetBox relative to the constraintsBox using the
+                        // previously calculated progress
+                        var _a = calcPositionFromProgress(this.visualElement.projection.target[axis], this.constraintsBox[axis], boxProgress[axis]), min = _a.min, max = _a.max;
+                        this.visualElement.setProjectionTargetAxis(axis, min, max);
+                    });
+                });
+                /**
+                 * If any other draggable components are queuing the same tasks synchronously
+                 * this will wait until they've all been scheduled before flushing.
+                 */
+                setTimeout(flushLayout, 1);
+            }
+        });
+        Object.defineProperty(this, "updateConstraints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (onReady) => {
+                this.cancelLayout = batchLayout((read, write) => {
+                    var ancestors = collectProjectingAncestors(_this.visualElement);
+                    write(() => ancestors.forEach((element) => element.resetTransform()));
+                    read(() => updateLayoutMeasurement(this.visualElement));
+                    write(() => ancestors.forEach((element) => element.restoreTransform()));
+                    read(() => {
+                        this.resolveDragConstraints();
+                    });
+                    if (onReady)
+                        write(onReady);
+                });
+            }
+        });
+        Object.defineProperty(this, "mount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (visualElement) => {
+                var element = visualElement.getInstance();
+                /**
+                 * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
+                 */
+                var stopPointerListener = addPointerEvent(element, 'pointerdown', (event) => {
+                    var _a = this.props, drag = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b;
+                    drag && dragListener && this.start(event);
+                });
+                /**
+                 * Attach a window resize listener to scale the draggable target within its defined
+                 * constraints as the window resizes.
+                 */
+                var stopResizeListener = addDomEvent(window, 'resize', () => {
+                    this.scalePoint();
+                });
+                /**
+                 * Ensure drag constraints are resolved correctly relative to the dragging element
+                 * whenever its layout changes.
+                 */
+                var stopLayoutUpdateListener = visualElement.onLayoutUpdate(() => {
+                    if (this.isDragging) {
+                        this.resolveDragConstraints();
+                    }
+                });
+                /**
+                 * If the previous component with this same layoutId was dragging at the time
+                 * it was unmounted, we want to continue the same gesture on this component.
+                 */
+                var prevDragCursor = visualElement.prevDragCursor;
+                if (prevDragCursor) {
+                    this.start(lastPointerEvent, { cursorProgress: prevDragCursor });
+                }
+                /**
+                 * Return a function that will teardown the drag gesture
+                 */
+                return () => {
+                    stopPointerListener === null || stopPointerListener === void 0 ? void 0 : stopPointerListener();
+                    stopResizeListener === null || stopResizeListener === void 0 ? void 0 : stopResizeListener();
+                    stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
+                    this.cancelDrag();
+                };
+            }
+        });
+        this.visualElement = visualElement;
+        this.visualElement.enableLayoutProjection();
+        elementDragControls.set(visualElement, this);
+    }
+}
+function shouldDrag(direction, drag, currentDirection) {
+    return (drag === true || drag === direction) && (currentDirection === null || currentDirection === direction);
+}
+/**
+ * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower
+ * than the provided threshold, return `null`.
+ *
+ * @param offset - The x/y offset from origin.
+ * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
+ */
+function getCurrentDirection(offset, lockThreshold = 10) {
+    var direction = null;
+    if (Math.abs(offset.y) > lockThreshold) {
+        direction = 'y';
+    }
+    else if (Math.abs(offset.x) > lockThreshold) {
+        direction = 'x';
+    }
+    return direction;
+}
+export { VisualElementDragControls, elementDragControls };