motion-start 0.0.1

package/src/gestures/drag/types.ts

@@ -0,0 +1,307 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { RefObject } from "react";
+import type { VariantLabels } from "../../motion/types";
+import type { Inertia, TargetAndTransition } from "../../types";
+import type { Axis, BoundingBox2D } from "../../types/geometry";
+import { MotionValue } from "../../value";
+import type { PanInfo } from "../PanSession";
+import { DragControls } from "./use-drag-controls";
+export type DragHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => void;
+export type DragElastic = boolean | number | Partial<BoundingBox2D>;
+export interface ResolvedConstraints {
+    x: Partial<Axis>;
+    y: Partial<Axis>;
+}
+export interface ResolvedElastic {
+    x: Axis;
+    y: Axis;
+}
+/**
+ * @public
+ */
+export interface DragHandlers {
+    /**
+     * Callback function that fires when dragging starts.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   onDragStart={
+     *     (event, info) => console.log(info.point.x, info.point.y)
+     *   }
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDragStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    /**
+     * Callback function that fires when dragging ends.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   onDragEnd={
+     *     (event, info) => console.log(info.point.x, info.point.y)
+     *   }
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDragEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    /**
+     * Callback function that fires when the component is dragged.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   onDrag={
+     *     (event, info) => console.log(info.point.x, info.point.y)
+     *   }
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDrag?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
+    /**
+     * Callback function that fires a drag direction is determined.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   dragDirectionLock
+     *   onDirectionLock={axis => console.log(axis)}
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDirectionLock?(axis: "x" | "y"): void;
+    /**
+     * Callback function that fires when drag momentum/bounce transition finishes.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   onDragTransitionEnd={() => console.log('Drag transition complete')}
+     * />
+     * ```
+     *
+     * @public
+     */
+    onDragTransitionEnd?(): void;
+}
+/**
+ * @public
+ */
+export type InertiaOptions = Partial<Omit<Inertia, "velocity" | "type">>;
+/**
+ * @public
+ */
+export interface DraggableProps extends DragHandlers {
+    /**
+     * Enable dragging for this element. Set to `false` by default.
+     * Set `true` to drag in both directions.
+     * Set `"x"` or `"y"` to only drag in a specific direction.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv drag="x" />
+     * ```
+     */
+    drag?: boolean | "x" | "y";
+    /**
+     * Properties or variant label to animate to while the drag gesture is recognised.
+     *
+     * ```jsx
+     * <MotionDiv whileDrag={{ scale: 1.2 }} />
+     * ```
+     */
+    whileDrag?: VariantLabels | TargetAndTransition;
+    /**
+     * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv drag dragDirectionLock />
+     * ```
+     */
+    dragDirectionLock?: boolean;
+    /**
+     * Allows drag gesture propagation to child components. Set to `false` by
+     * default.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv drag="x" dragPropagation />
+     * ```
+     */
+    dragPropagation?: boolean;
+    /**
+     * Applies constraints on the permitted draggable area.
+     *
+     * It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
+     * This will define a distance the named edge of the draggable component.
+     *
+     * Alternatively, it can accept a `ref` to another component created with React's `useRef` hook.
+     * This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
+     * of the component you want to use as constraints.
+     *
+     * @motion
+     *
+     * ```jsx
+     * // In pixels
+     * <MotionDiv
+     *   drag="x"
+     *   dragConstraints={{ left: 0, right: 300 }}
+     * />
+     *
+     * // As a ref to another component
+     *     let constraintsRef;
+     *
+     *      <MotionDiv bind:this={constraintsRef}>
+     *          <MotionDiv drag dragConstraints={constraintsRef} />
+     *      </MotionDiv>
+     *   )
+     * }
+     * ```
+     */
+    dragConstraints?: false | Partial<BoundingBox2D> | RefObject<Element>;
+    /**
+     * The degree of movement allowed outside constraints. 0 = no movement, 1 =
+     * full movement.
+     *
+     * Set to `0.5` by default. Can also be set as `false` to disable movement.
+     *
+     * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
+     * per constraint. Any missing values will be set to `0`.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   dragConstraints={{ left: 0, right: 300 }}
+     *   dragElastic={0.2}
+     * />
+     * ```
+     */
+    dragElastic?: DragElastic;
+    /**
+     * Apply momentum from the pan gesture to the component when dragging
+     * finishes. Set to `true` by default.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   dragConstraints={{ left: 0, right: 300 }}
+     *   dragMomentum={false}
+     * />
+     * ```
+     */
+    dragMomentum?: boolean;
+    /**
+     * Allows you to change dragging inertia parameters.
+     * When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
+     * See {@link https://framer.com/api/animation/#inertia | Inertia} for all properties you can use.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <MotionDiv
+     *   drag
+     *   dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
+     * />
+     * ```
+     */
+    dragTransition?: InertiaOptions;
+    /**
+     * Usually, dragging is initiated by pressing down on a component and moving it. For some
+     * use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+     * might want to initiate dragging from a different component than the draggable one.
+     *
+     * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+     * the draggable component's `dragControls` prop. It exposes a `start` method
+     * that can start dragging from pointer events on other components.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const dragControls = useDragControls()
+     *
+     * function startDrag(event) {
+     *   dragControls.start(event, { snapToCursor: true })
+     * }
+     *
+     * <div onPointerDown={startDrag} />
+     * <MotionDiv drag="x" dragControls={dragControls} />
+     * ```
+     */
+    dragControls?: DragControls;
+    /**
+     * By default, if `drag` is defined on a component then an event listener will be attached
+     * to automatically initiate dragging when a user presses down on it.
+     *
+     * By setting `dragListener` to `false`, this event listener will not be created.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const dragControls = useDragControls()
+     *
+     * function startDrag(event) {
+     *   dragControls.start(event, { snapToCursor: true })
+     * }
+     *
+     * <div onPointerDown={startDrag} />
+     * <MotionDiv
+     *   drag="x"
+     *   dragControls={dragControls}
+     *   dragListener={false}
+     * />
+     * ```
+     */
+    dragListener?: boolean;
+    /**
+     * If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.
+     *
+     * @public
+     */
+    onMeasureDragConstraints?: (constraints: BoundingBox2D) => BoundingBox2D | void;
+    /**
+     * Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement.
+     * Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values.
+     * This allows you to manually control how updates from a drag gesture on an element is applied.
+     *
+     * @public
+     */
+    _dragX?: MotionValue<number>;
+    /**
+     * Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement.
+     * Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values.
+     * This allows you to manually control how updates from a drag gesture on an element is applied.
+     *
+     * @public
+     */
+    _dragY?: MotionValue<number>;
+}

package/src/gestures/drag/use-drag-controls.ts

@@ -0,0 +1,148 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { VisualElementDragControls, type DragControlOptions } from "./VisualElementDragControls";
+/**
+ * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
+ *
+ * @motion
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * <div onPointerDown={startDrag} />
+ * <MotionDiv drag="x" dragControls={dragControls} />
+ * ```
+ *
+ * @public
+ */
+export class DragControls {
+    private componentControls = new Set<VisualElementDragControls>();
+    /**
+     * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+     *
+     * @internal
+     */
+    subscribe(controls: VisualElementDragControls): () => void {
+        this.componentControls.add(controls);
+
+        return () => this.componentControls.delete(controls);
+    }
+    /**
+     * Start a drag gesture on every `motion` component that has this set of drag controls
+     * passed into it via the `dragControls` prop.
+     *
+     * ```jsx
+     * dragControls.start(e, {
+     *   snapToCursor: true
+     * })
+     * ```
+     *
+     * @param event - PointerEvent
+     * @param options - Options
+     *
+     * @public
+     */
+    start(event: React.PointerEvent | PointerEvent, options?: DragControlOptions): void {
+        this.componentControls.forEach((controls) => {
+            controls.start((event as React.PointerEvent).nativeEvent || event),
+            options
+        })
+    }
+
+    updateConstraints(flush?: boolean): void {
+        this.componentControls.forEach(function (controls) {
+            controls.prepareBoundingBox();
+            controls.resolveDragConstraints();
+        });
+    }
+}
+
+const createDragControls = () => new DragControls();
+
+/**
+ * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
+ * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+ * might want to initiate that dragging from a different component than the draggable one.
+ *
+ * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+ * the draggable component's `dragControls` prop. It exposes a `start` method
+ * that can start dragging from pointer events on other components.
+ *
+ * @motion
+ *
+ * ```jsx
+ * const dragControls = useDragControls()
+ *
+ * function startDrag(event) {
+ *   dragControls.start(event, { snapToCursor: true })
+ * }
+ *
+ * return (
+ *   <>
+ *     <div onPointerDown={startDrag} />
+ *     <MotionDiv drag="x" dragControls={dragControls} />
+ *   </>
+ * )
+ * ```
+ *
+ * @public
+ */
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/**
+* Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
+* and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
+* might want to initiate that dragging from a different component than the draggable one.
+*
+* By creating a `dragControls` using the `useDragControls` hook, we can pass this into
+* the draggable component's `dragControls` prop. It exposes a `start` method
+* that can start dragging from pointer events on other components.
+*
+* @library
+*
+* ```jsx
+* const dragControls = useDragControls()
+*
+* function startDrag(event) {
+*   dragControls.start(event, { snapToCursor: true })
+* }
+*
+* return (
+*   <>
+    *     <Frame onTapStart={startDrag} />
+*     <Frame drag="x" dragControls={dragControls} />
+*   </>
+* )
+* ```
+*
+* @motion
+*
+* ```jsx
+* const dragControls = useDragControls()
+*
+* function startDrag(event) {
+*   dragControls.start(event, { snapToCursor: true })
+* }
+*
+* return (
+*   <>
+    *     <div onPointerDown={startDrag} />
+*     <MotionDiv drag="x" dragControls={dragControls} />
+*   </>
+* )
+* ```
+*
+* @public
+*/
+export const useDragControls = createDragControls

package/src/gestures/drag/use-drag.ts

@@ -0,0 +1,15 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureProps } from "../../motion/features/types";
+/**
+ * A hook that allows an element to be dragged.
+ *
+ * @internal
+ */
+export type useDrag = (props: FeatureProps) => void;
+
+
+export { default as UseDrag } from './UseDrag.svelte';
+

package/src/gestures/drag/utils/constraints.ts

@@ -0,0 +1,157 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Axis, AxisBox2D, BoundingBox2D, Point2D } from "../../../types/geometry";
+import type { DragElastic, ResolvedConstraints } from "../types";
+
+/**
+ * Calculate the relative progress of one constraints box relative to another.
+ * Imagine a page scroll bar. At the top, this would return 0, at the bottom, 1.
+ * Anywhere in-between, a value between 0 and 1.
+ *
+ * This also handles flipped constraints, for instance a draggable container within
+ * a smaller viewport like a scrollable view.
+ */
+export type calcProgressWithinConstraints = (layoutBox: AxisBox2D, constraintsBox: AxisBox2D) => Point2D;
+
+
+
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { mix } from 'popmotion';
+import { __read } from 'tslib';
+
+/**
+ * Apply constraints to a point. These constraints are both physical along an
+ * axis, and an elastic factor that determines how much to constrain the point
+ * by if it does lie outside the defined parameters.
+ */
+function applyConstraints(point: number, { min, max }: Partial<Axis>, elastic?: Axis) {
+    if (min !== undefined && point < min) {
+        // If we have a min point defined, and this is outside of that, constrain
+        point = elastic ? mix(min, point, elastic.min) : Math.max(point, min);
+    }
+    else if (max !== undefined && point > max) {
+        // If we have a max point defined, and this is outside of that, constrain
+        point = elastic ? mix(max, point, elastic.max) : Math.min(point, max);
+    }
+    return point;
+}
+/**
+ * Calculates a min projection point based on a pointer, pointer progress
+ * within the drag target, and constraints.
+ *
+ * For instance if an element was 100px width, we were dragging from 0.25
+ * along this axis, the pointer is at 200px, and there were no constraints,
+ * we would calculate a min projection point of 175px.
+ */
+function calcConstrainedMinPoint(point: number, length: number, progress: number, constraints?: Partial<Axis>, elastic?: Axis) {
+    // Calculate a min point for this axis and apply it to the current pointer
+    var min = point - length * progress;
+    return constraints ? applyConstraints(min, constraints, elastic) : min;
+}
+/**
+ * Calculate constraints in terms of the viewport when defined relatively to the
+ * measured axis. This is measured from the nearest edge, so a max constraint of 200
+ * on an axis with a max value of 300 would return a constraint of 500 - axis length
+ */
+function calcRelativeAxisConstraints(axis: Axis, min?: number, max?: number) {
+    return {
+        min: min !== undefined ? axis.min + min : undefined,
+        max: max !== undefined
+            ? axis.max + max - (axis.max - axis.min)
+            : undefined,
+    } as Partial<Axis>;
+}
+/**
+ * Calculate constraints in terms of the viewport when
+ * defined relatively to the measured bounding box.
+ */
+function calcRelativeConstraints(layoutBox: AxisBox2D, { top, left, bottom, right }: Partial<BoundingBox2D>) {
+    return {
+        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
+    } as ResolvedConstraints;
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative axis
+ */
+function calcViewportAxisConstraints(layoutAxis: Axis, constraintsAxis: Axis) {
+    var _a;
+    var min = constraintsAxis.min - layoutAxis.min;
+    var max = constraintsAxis.max - layoutAxis.max;
+    // If the constraints axis is actually smaller than the layout axis then we can
+    // flip the constraints
+    if (constraintsAxis.max - constraintsAxis.min <
+        layoutAxis.max - layoutAxis.min) {
+        _a = __read([max, min], 2), min = _a[0], max = _a[1];
+    }
+    return {
+        min: layoutAxis.min + min,
+        max: layoutAxis.min + max,
+    };
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative box
+ */
+function calcViewportConstraints(layoutBox: AxisBox2D, constraintsBox: AxisBox2D) {
+    return {
+        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
+    };
+}
+/**
+ * Calculate the an axis position based on two axes and a progress value.
+ */
+function calcPositionFromProgress(axis: Axis, constraints: Axis, progress: number) {
+    var axisLength = axis.max - axis.min;
+    var min = mix(constraints.min, constraints.max - axisLength, progress);
+    return { min: min, max: min + axisLength } as Axis;
+}
+/**
+ * Rebase the calculated viewport constraints relative to the layout.min point.
+ */
+function rebaseAxisConstraints(layout: Axis, constraints: Partial<Axis>) {
+    var relativeConstraints: Partial<Axis> = {};
+    if (constraints.min !== undefined) {
+        relativeConstraints.min = constraints.min - layout.min;
+    }
+    if (constraints.max !== undefined) {
+        relativeConstraints.max = constraints.max - layout.min;
+    }
+    return relativeConstraints;
+}
+const defaultElastic = 0.35;
+/**
+ * Accepts a dragElastic prop and returns resolved elastic values for each axis.
+ */
+function resolveDragElastic(dragElastic: DragElastic) {
+    if (dragElastic === false) {
+        dragElastic = 0;
+    }
+    else if (dragElastic === true) {
+        dragElastic = defaultElastic;
+    }
+    return {
+        x: resolveAxisElastic(dragElastic, "left", "right"),
+        y: resolveAxisElastic(dragElastic, "top", "bottom"),
+    } as AxisBox2D;
+}
+function resolveAxisElastic(dragElastic: DragElastic, minLabel: string, maxLabel: string) {
+    return {
+        min: resolvePointElastic(dragElastic, minLabel),
+        max: resolvePointElastic(dragElastic, maxLabel),
+    } as Axis;
+}
+function resolvePointElastic(dragElastic: DragElastic, label: string): number {
+    var _a;
+    return typeof dragElastic === "number"
+        ? dragElastic
+        : (_a = (dragElastic as any)[label]) !== null && _a !== void 0 ? _a : 0;
+}
+
+export { applyConstraints, calcConstrainedMinPoint, calcPositionFromProgress, calcRelativeAxisConstraints, calcRelativeConstraints, calcViewportAxisConstraints, calcViewportConstraints, defaultElastic, rebaseAxisConstraints, resolveAxisElastic, resolveDragElastic, resolvePointElastic };
+

package/src/gestures/drag/utils/lock.ts

@@ -0,0 +1,69 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export type Lock = (() => void) | false;
+
+
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+function createLock(name: string) {
+    var lock: string | null = null;
+    return function (): Lock {
+        var openLock = function () {
+            lock = null;
+        };
+        
+        if (lock === null) {
+            lock = name;
+            return openLock;
+        }
+        return false;
+    };
+}
+var globalHorizontalLock = createLock("dragHorizontal");
+var globalVerticalLock = createLock("dragVertical");
+function getGlobalLock(drag: boolean | "x" | "y" | "lockDirection") {
+    var lock: Lock = false;
+    if (drag === "y") {
+        
+        lock = globalVerticalLock();
+    }
+    else if (drag === "x") {
+        
+        lock = globalHorizontalLock();
+    }
+    else {
+        var openHorizontal_1 = globalHorizontalLock();
+        var openVertical_1 = globalVerticalLock();
+        if (openHorizontal_1 && openVertical_1) {
+            lock = function () {
+                openHorizontal_1();
+                openVertical_1();
+            };
+        }
+        else {
+            // Release the locks because we don't use them
+            if (openHorizontal_1)
+                openHorizontal_1();
+            if (openVertical_1)
+                openVertical_1();
+        }
+    }
+    return lock;
+}
+function isDragActive() {
+    // Check the gesture lock - if we get it, it means no drag gesture is active
+    // and we can safely fire the tap gesture.
+    var openGestureLock = getGlobalLock(true);
+    if (!openGestureLock)
+        return true;
+    openGestureLock();
+    return false;
+}
+
+export { createLock, getGlobalLock, isDragActive };
+