motion-start 0.0.1

package/src/events/types.ts

@@ -0,0 +1,15 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { RefObject } from "react";
+import type { Point2D } from "../types/geometry";
+
+/** @public */
+export interface EventInfo {
+    point: Point2D;
+}
+export type EventHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo) => void;
+export type ListenerControls = [() => void, () => void];
+export type TargetOrRef = EventTarget | RefObject<EventTarget>;
+export type TargetBasedReturnType<Target> = Target extends EventTarget ? ListenerControls : undefined;

package/src/events/use-dom-event.ts

@@ -0,0 +1,48 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../index.js";
+export interface UseDomEventProps {
+    /**
+     * Ref object that's been provided to the element you want to bind the listener to.
+     */
+    ref: {current:Node} | VisualElement<EventTarget>,
+    /**
+     * Name of the event you want listen for.
+     */
+    eventName: string,
+    /**
+     * Function to fire when receiving the event.
+     */
+    handler?: EventListener,
+    /**
+     * Options to pass to `Event.addEventListener`.
+     */
+    options?: AddEventListenerOptions
+}
+/**
+ * Attaches an event listener directly to the provided DOM element.
+ *
+ * Bypassing Sveltes's event system can be desirable, for instance when attaching non-passive
+ * event handlers.
+ *
+ * ```jsx
+ * <script>
+ *  import { useDomEvent } from 'svelte-motion'
+ *  let ref;
+ * </script>
+ *
+ * <UseDomEvent ref={{current:ref}} eventName="wheel" handler={onWheel} options={{passive: false}/>
+ * <div bind:this={ref}/>
+ * ```
+ *
+ * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.
+ * @param eventName - Name of the event you want listen for.
+ * @param handler - Function to fire when receiving the event.
+ * @param options - Options to pass to `Event.addEventListener`.
+ *
+ * @public
+ */
+export { default as UseDomEvent, addDomEvent } from './UseDomEvent.svelte';
+

package/src/events/use-pointer-event.ts

@@ -0,0 +1,29 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { RefObject } from "react";
+import type { EventListenerWithPointInfo } from "./event-info";
+export type usePointerEvent = (ref: RefObject<Element>, eventName: string, handler?: EventListenerWithPointInfo | undefined, options?: AddEventListenerOptions) => void;
+
+export interface UsePointerEventProps {
+    /**
+     * Ref object that's been provided to the element you want to bind the listener to.
+     */
+    ref: RefObject<Element>,
+    /**
+     * Name of the event you want listen for.
+     */
+    eventName: string,
+    /**
+     * Function to fire when receiving the event.
+     */
+    handler?: EventListener | undefined,
+    /**
+     * Options to pass to `Event.addEventListener`.
+     */
+    options?: AddEventListenerOptions
+}
+
+export { default as UsePointerEvent, addPointerEvent } from './UsePointerEvent.svelte';
+

package/src/events/utils.ts

@@ -0,0 +1,25 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { isBrowser } from '../utils/is-browser.js';
+
+// We check for event support via functions in case they've been mocked by a testing suite.
+var supportsPointerEvents = function () {
+    return isBrowser && window.onpointerdown === null;
+};
+var supportsTouchEvents = function () {
+    return isBrowser && window.ontouchstart === null;
+};
+var supportsMouseEvents = function () {
+    return isBrowser && window.onmousedown === null;
+};
+
+export { supportsMouseEvents, supportsPointerEvents, supportsTouchEvents };

package/src/gestures/PanSession.ts

@@ -0,0 +1,298 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Point2D, TransformPoint2D } from "../types/geometry";
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import sync, { cancelSync, getFrameData } from 'framesync';
+import { distance, pipe } from 'popmotion';
+import { __assign } from 'tslib';
+import { extractEventInfo } from '../events/event-info.js';
+import type { EventInfo } from "../events/types";
+import { addPointerEvent } from '../events/use-pointer-event.js';
+import { secondsToMilliseconds } from '../utils/time-conversion.js';
+import { isMouseEvent, isTouchEvent } from './utils/event-type.js';
+
+export type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
+
+/**
+ * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
+ * information about the current state of the tap gesture such as its
+ * `point`, `delta`, `offset` and `velocity`.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <MotionDiv onPan={(event, info) => {
+ *   console.log(info.point.x, info.point.y)
+ * }} />
+ * ```
+ *
+ * @public
+ */
+export interface PanInfo {
+    /**
+     * Contains `x` and `y` values for the current pan position relative
+     * to the device or page.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <MotionDiv onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    point: Point2D;
+    /**
+     * Contains `x` and `y` values for the distance moved since
+     * the last event.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.delta.x, info.delta.y)
+     * }
+     *
+     * <MotionDiv onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    delta: Point2D;
+    /**
+     * Contains `x` and `y` values for the distance moved from
+     * the first pan event.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.offset.x, info.offset.y)
+     * }
+     *
+     * <MotionDiv onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    offset: Point2D;
+    /**
+     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
+     *
+     * @motion
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.velocity.x, info.velocity.y)
+     * }
+     *
+     * <MotionDiv onPan={onPan} />
+     * ```
+     *
+     * @public
+     */
+    velocity: Point2D;
+}
+export type PanHandler = (event: Event, info: PanInfo) => void;
+interface PanSessionHandlers {
+    onSessionStart: PanHandler;
+    onStart: PanHandler;
+    onMove: PanHandler;
+    onEnd: PanHandler;
+    onSessionEnd: PanHandler;
+    // TODO: future feature
+    // resumeAnimation: () => void
+}
+interface PanSessionOptions {
+    transformPagePoint?: TransformPoint2D;
+    // TODO: future feature
+    // contextWindow?: (Window & typeof globalThis) | null
+    // dragSnapToOrigin?: boolean
+}
+
+interface TimestampedPoint extends Point2D {
+    timestamp: number
+}
+
+/**
+ * @internal
+ */
+export class PanSession {
+    /**
+     * @internal
+     */
+    private history!: TimestampedPoint[];
+    /**
+     * @internal
+     */
+    private startEvent: PointerEvent | null = null;
+    /**
+     * @internal
+     */
+    private lastMoveEvent: PointerEvent | null = null;
+    /**
+     * @internal
+     */
+    private lastMoveEventInfo: EventInfo | null = null;
+    /**
+     * @internal
+     */
+    private transformPagePoint?: TransformPoint2D
+    /**
+     * @internal
+     */
+    private handlers: Partial<PanSessionHandlers> = {};
+    /**
+     * @internal
+     */
+    private removeListeners!: Function;
+
+    // TODO: future implementation of newer features
+    // /**
+    //  * For determining if an animation should resume after it is interupted
+    //  * 
+    //  * @internal
+    //  */
+    // private dragSnapToOrigin: boolean
+    
+    // /**
+    //  * @internal
+    //  */
+    // private contextWindow: PanSessionOptions["contextWindow"] = window
+
+
+    constructor(event: PointerEvent, handlers: Partial<PanSessionHandlers>, { transformPagePoint }: PanSessionOptions = {}) {
+        // If we have more than one touch, don't start detecting this gesture
+        if (isTouchEvent(event) && event.touches.length > 1)
+            return;
+        this.handlers = handlers;
+        this.transformPagePoint = transformPagePoint;
+        var info = extractEventInfo(event);
+        var initialInfo = transformPoint(info, this.transformPagePoint);
+        var point = initialInfo.point;
+        var timestamp = getFrameData().timestamp;
+        this.history = [{...point, timestamp}];
+        var onSessionStart = handlers.onSessionStart;
+        onSessionStart &&
+            onSessionStart(event, getPanInfo(initialInfo, this.history));
+        this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp));
+    }
+
+    private updatePoint = () => {
+            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+                return;
+            var info = getPanInfo(this.lastMoveEventInfo, this.history);
+            var isPanStarted = this.startEvent !== null;
+            // Only start panning if the offset is larger than 3 pixels. If we make it
+            // any larger than this we'll want to reset the pointer history
+            // on the first update to avoid visual snapping to the cursoe.
+            var isDistancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3;
+            if (!isPanStarted && !isDistancePastThreshold)
+                return;
+            var point = info.point;
+            var timestamp = getFrameData().timestamp;
+            this.history.push(__assign(__assign({}, point), { timestamp: timestamp }));
+            var _a = this.handlers, onStart = _a.onStart, onMove = _a.onMove;
+            if (!isPanStarted) {
+                onStart && onStart(this.lastMoveEvent, info);
+                this.startEvent = this.lastMoveEvent;
+            }
+            onMove && onMove(this.lastMoveEvent, info);
+        };
+    private handlePointerMove = (event: PointerEvent, info: EventInfo) => {
+            this.lastMoveEvent = event;
+            this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
+            // Because Safari doesn't trigger mouseup events when it's above a `<select>`
+            if (isMouseEvent(event) && event.buttons === 0) {
+                this.handlePointerUp(event, info);
+                return;
+            }
+            // Throttle mouse move event to once per frame
+            sync.update(this.updatePoint, true);
+        };
+    private handlePointerUp = (event: PointerEvent, info: EventInfo) => {
+            this.end();
+            var _a = this.handlers, onEnd = _a.onEnd, onSessionEnd = _a.onSessionEnd;
+            var panInfo = getPanInfo(transformPoint(info, this.transformPagePoint), this.history);
+            if (this.startEvent && onEnd) {
+                onEnd(event, panInfo);
+            }
+            onSessionEnd && onSessionEnd(event, panInfo);
+        };
+    updateHandlers(handlers: Partial<PanSessionHandlers>){
+        this.handlers = handlers;
+    };
+    end() {
+        this.removeListeners && this.removeListeners();
+        cancelSync.update(this.updatePoint);
+    };
+}
+
+
+function transformPoint(info: EventInfo, transformPagePoint?: (point: Point2D) => Point2D) {
+    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a: Point2D, b: Point2D): Point2D {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo(_a: EventInfo, history: TimestampedPoint[]) {
+    var point = _a.point;
+    return {
+        point: point,
+        delta: subtractPoint(point, lastDevicePoint(history)),
+        offset: subtractPoint(point, startDevicePoint(history)),
+        velocity: getVelocity(history, 0.1),
+    };
+}
+function startDevicePoint(history: TimestampedPoint[]) {
+    return history[0];
+}
+function lastDevicePoint(history: TimestampedPoint[]) {
+    return history[history.length - 1];
+}
+function getVelocity(history: TimestampedPoint[], timeDelta: number) {
+    if (history.length < 2) {
+        return { x: 0, y: 0 };
+    }
+    var i = history.length - 1;
+    var timestampedPoint = null;
+    var lastPoint = lastDevicePoint(history);
+    while (i >= 0) {
+        timestampedPoint = history[i];
+        if (lastPoint.timestamp - timestampedPoint.timestamp >
+            secondsToMilliseconds(timeDelta)) {
+            break;
+        }
+        i--;
+    }
+    if (!timestampedPoint) {
+        return { x: 0, y: 0 };
+    }
+    var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+    if (time === 0) {
+        return { x: 0, y: 0 };
+    }
+    var currentVelocity = {
+        x: (lastPoint.x - timestampedPoint.x) / time,
+        y: (lastPoint.y - timestampedPoint.y) / time,
+    };
+    if (currentVelocity.x === Infinity) {
+        currentVelocity.x = 0;
+    }
+    if (currentVelocity.y === Infinity) {
+        currentVelocity.y = 0;
+    }
+    return currentVelocity;
+}
+
+// export { PanSession };

package/src/gestures/UseFocusGesture.svelte

@@ -0,0 +1,31 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { UseDomEvent } from "../events/use-dom-event.js";
+  import { AnimationType } from "../render/utils/types.js";
+
+  export let props, visualElement;
+  $: ({ whileFocus } = props);
+  const onFocus = () => {
+    visualElement.animationState?.setActive(AnimationType.Focus, true);
+  };
+
+  const onBlur = () => {
+    visualElement.animationState?.setActive(AnimationType.Focus, false);
+  };
+</script>
+
+<UseDomEvent
+  ref={visualElement}
+  eventName="focus"
+  handler={whileFocus ? onFocus : undefined}
+>
+  <UseDomEvent
+    ref={visualElement}
+    eventName="blur"
+    handler={whileFocus ? onBlur : undefined}
+  >
+    <slot />
+  </UseDomEvent>
+</UseDomEvent>

package/src/gestures/UseGestures.svelte

@@ -0,0 +1,17 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { UseFocusGesture } from "./use-focus-gesture.js";
+  import { UseHoverGesture } from "./use-hover-gesture.js";
+  import { UsePanGesture } from "./use-pan-gesture.js";
+  import { UseTapGesture } from "./use-tap-gesture.js";
+
+  export let props, visualElement;
+</script>
+
+<UsePanGesture {props} {visualElement} />
+<UseTapGesture {props} {visualElement} />
+<UseHoverGesture {props} {visualElement} />
+<UseFocusGesture {props} {visualElement} />
+<slot />

package/src/gestures/UseHoverGesture.svelte

@@ -0,0 +1,40 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module lang="ts">
+  import { isDragActive } from "./drag/utils/lock.js";
+  function createHoverEvent(visualElement, isActive, callback) {
+    return (event, info) => {
+      if (!isMouseEvent(event) || isDragActive()) return;
+      callback?.(event, info);
+
+      visualElement.animationState?.setActive(AnimationType.Hover, isActive);
+    };
+  }
+</script>
+
+<script lang="ts">
+  import { UsePointerEvent } from "../events/use-pointer-event.js";
+  import { AnimationType } from "../render/utils/types.js";
+  import { isMouseEvent } from "./utils/event-type.js";
+
+  export let props, visualElement;
+  let { onHoverStart, onHoverEnd, whileHover } = props;
+  $: ({ onHoverStart, onHoverEnd, whileHover } = props);
+</script>
+
+<UsePointerEvent
+  ref={visualElement}
+  eventName="pointerenter"
+  handler={onHoverStart || whileHover
+    ? createHoverEvent(visualElement, true, onHoverStart)
+    : undefined}
+/>
+<UsePointerEvent
+  ref={visualElement}
+  eventName="pointerleave"
+  handler={onHoverEnd || whileHover
+    ? createHoverEvent(visualElement, false, onHoverEnd)
+    : undefined}
+/>
+<slot />

package/src/gestures/UsePanGesture.svelte

@@ -0,0 +1,58 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { afterUpdate, getContext, onDestroy } from "svelte";
+  import { get } from "svelte/store";
+  import { MotionConfigContext } from "../context/MotionConfigContext.js";
+  import { UsePointerEvent } from "../events/use-pointer-event";
+  import { PanSession } from "./PanSession";
+
+  export let props,
+    visualElement,
+    isCustom = false;
+  let { onPan, onPanStart, onPanEnd, onPanSessionStart } = props;
+  $: ({ onPan, onPanStart, onPanEnd, onPanSessionStart } = props);
+  $: hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart;
+  let panSession = null;
+  const mcc = getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+  let { transformPagePoint } = get(mcc);
+  $: ({ transformPagePoint } = $mcc);
+  let handlers = {
+    onSessionStart: onPanSessionStart,
+    onStart: onPanStart,
+    onMove: onPan,
+    onEnd: (event, info) => {
+      panSession = null;
+      onPanEnd && onPanEnd(event, info);
+    },
+  };
+  $: handlers = {
+    onSessionStart: onPanSessionStart,
+    onStart: onPanStart,
+    onMove: onPan,
+    onEnd: (event, info) => {
+      panSession = null;
+      onPanEnd && onPanEnd(event, info);
+    },
+  };
+  function onPointerDown(event) {
+    panSession = new PanSession(event, handlers, {
+      transformPagePoint,
+    });
+  }
+  afterUpdate(() => {
+    if (panSession !== null) {
+      panSession.updateHandlers(handlers);
+    }
+  });
+  onDestroy(() => panSession && panSession.end());
+</script>
+
+<UsePointerEvent
+  ref={visualElement}
+  eventName="pointerdown"
+  handler={hasPanEvents && onPointerDown}
+>
+  <slot />
+</UsePointerEvent>

package/src/gestures/UseTapGesture.svelte

@@ -0,0 +1,77 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { pipe } from "popmotion";
+  import { onDestroy } from "svelte";
+  import {
+    UsePointerEvent,
+    addPointerEvent,
+  } from "../events/use-pointer-event.js";
+  import { AnimationType } from "../render/utils/types.js";
+  import { isDragActive } from "./drag/utils/lock.js";
+  import { isNodeOrChild } from "./utils/is-node-or-child.js";
+
+  export let props, visualElement;
+
+  $: ({ onTap, onTapStart, onTapCancel, whileTap } = props);
+  $: hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
+
+  let isPressing = false;
+  let cancelPointerEndListeners = null;
+
+  function removePointerEndListener() {
+    cancelPointerEndListeners?.();
+    cancelPointerEndListeners = null;
+  }
+
+  function checkPointerEnd() {
+    removePointerEndListener();
+    isPressing = false;
+    visualElement.animationState?.setActive(AnimationType.Tap, false);
+    return !isDragActive();
+  }
+
+  function onPointerUp(event, info) {
+    if (!checkPointerEnd()) return;
+
+    /**
+     * We only count this as a tap gesture if the event.target is the same
+     * as, or a child of, this component's element
+     */
+    !isNodeOrChild(visualElement.getInstance(), event.target)
+      ? onTapCancel?.(event, info)
+      : onTap?.(event, info);
+  }
+
+  function onPointerCancel(event, info) {
+    if (!checkPointerEnd()) return;
+
+    onTapCancel?.(event, info);
+  }
+
+  function onPointerDown(event, info) {
+    if (isPressing) return;
+    removePointerEndListener();
+    isPressing = true;
+
+    cancelPointerEndListeners = pipe(
+      addPointerEvent(window, "pointerup", onPointerUp),
+      addPointerEvent(window, "pointercancel", onPointerCancel)
+    );
+
+    onTapStart?.(event, info);
+
+    visualElement.animationState?.setActive(AnimationType.Tap, true);
+  }
+
+  onDestroy(removePointerEndListener);
+</script>
+
+<UsePointerEvent
+  ref={visualElement}
+  eventName="pointerdown"
+  handler={hasPressListeners ? onPointerDown : undefined}
+>
+  <slot />
+</UsePointerEvent>

package/src/gestures/drag/UseDrag.svelte

@@ -0,0 +1,55 @@
+<!-- based on framer-motion@4.1.11,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { getContext, onDestroy, onMount } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import {
+    MotionConfigContext,
+    type MotionConfigContextObject,
+  } from "../../context/MotionConfigContext.js";
+  import { VisualElementDragControls } from "./VisualElementDragControls.js";
+
+  export let visualElement, props, isCustom;
+
+  const mcc: Writable<MotionConfigContextObject> =
+    getContext(MotionConfigContext) || MotionConfigContext(isCustom);
+
+  let dragControls = new VisualElementDragControls({
+    visualElement,
+  });
+
+  // If we've been provided a DragControls for manual control over the drag gesture,
+  // subscribe this component to it on mount.
+  let cleanup;
+  const dragEffect = () => {
+    if (cleanup) {
+      cleanup();
+    }
+    if (groupDragControls) {
+      cleanup = groupDragControls.subscribe(dragControls);
+    }
+  };
+  let { dragControls: groupDragControls } = props;
+  let { transformPagePoint } = get(mcc);
+
+  $: ({ dragControls: groupDragControls } = props);
+  //let {transformPagePoint} = get($mcc);
+  $: ({ transformPagePoint } = $mcc);
+  dragControls.setProps({ ...props, transformPagePoint });
+
+  //dragControls.setProps({ ...props, transformPagePoint })
+
+  $: dragControls.setProps({ ...props, transformPagePoint });
+
+  $: dragEffect(dragControls);
+
+  onDestroy(() => {
+    if (cleanup) {
+      cleanup();
+    }
+  });
+  onMount(() => dragControls.mount(visualElement));
+</script>
+
+<slot />