motion-start 0.0.1 → 0.0.3

package/src/animation/utils/default-transitions.ts

@@ -1,70 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { PopmotionTransitionProps, ValueTarget, SingleTarget, KeyframesTarget } from "../../types";
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { __assign } from 'tslib';
-import { isKeyframesTarget } from './is-keyframes-target.js';
-
-var underDampedSpring = function () { return ({
-    type: "spring",
-    stiffness: 500,
-    damping: 25,
-    restDelta: 0.5,
-    restSpeed: 10,
-}); };
-var criticallyDampedSpring = function (to: SingleTarget) { return ({
-    type: "spring",
-    stiffness: 550,
-    damping: to === 0 ? 2 * Math.sqrt(550) : 30,
-    restDelta: 0.01,
-    restSpeed: 10,
-}); };
-var linearTween = function () { return ({
-    type: "keyframes",
-    ease: "linear",
-    duration: 0.3,
-}); };
-var keyframes = function (values: KeyframesTarget) { return ({
-    type: "keyframes",
-    duration: 0.8,
-    values: values,
-}); };
-var defaultTransitions = {
-    x: underDampedSpring,
-    y: underDampedSpring,
-    z: underDampedSpring,
-    rotate: underDampedSpring,
-    rotateX: underDampedSpring,
-    rotateY: underDampedSpring,
-    rotateZ: underDampedSpring,
-    scaleX: criticallyDampedSpring,
-    scaleY: criticallyDampedSpring,
-    scale: criticallyDampedSpring,
-    opacity: linearTween,
-    backgroundColor: linearTween,
-    color: linearTween,
-    default: criticallyDampedSpring,
-};
-
-// TODO: need to bring closer to Transition - then can use keyof typeof defaultTransitions.
-var getDefaultTransition = function (valueKey: string, to: ValueTarget): PopmotionTransitionProps {
-    var transitionFactory: (v: any) => any;
-    if (isKeyframesTarget(to)) {
-        transitionFactory = keyframes;
-    }
-    else {
-        transitionFactory =
-            (defaultTransitions as any)[valueKey] || defaultTransitions.default;
-    }
-    return __assign({ to: to }, transitionFactory(to));
-};
-
-export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };

package/src/context/DOMcontext.ts

@@ -1,21 +0,0 @@
-export const getDomContext = (name: string, el: any) => {
-    if (!el || !window){
-        return undefined;
-    }
-    let par = el;
-    while(par = par.parentNode){
-        if (par.motionDomContext && par.motionDomContext.has(name)){
-            return par.motionDomContext.get(name)
-        }
-    }
-    return undefined;
-}
-
-export const setDomContext = (name: string, el: any, value: any) => {
-    if (el && window){
-        if (!el.motionDomContext){
-            el.motionDomContext = new Map();
-        }
-        el.motionDomContext.set(name,value);
-    }
-}

package/src/context/LayoutGroupContext.ts

@@ -1,13 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { Writable } from 'svelte/store'
-
-import { writable } from "svelte/store";
-import { getDomContext } from "./DOMcontext";
-
-/**
- * @internal
- */
-export const LayoutGroupContext = (c?: any): Writable<string | null> => getDomContext("LayoutGroup",c)||writable(null);

package/src/context/LazyContext.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { CreateVisualElement } from "../render/types";
-export interface LazyContextProps {
-    renderer?: CreateVisualElement<any>;
-    strict: boolean;
-}
-
-import { writable, type Writable } from "svelte/store";
-import { getDomContext } from "./DOMcontext";
-
-
-const LazyContext = (c?: any): Writable<LazyContextProps> => getDomContext("Lazy",c) || writable({ strict: false });
-
-export { LazyContext };

package/src/context/MotionContext/UseCreateMotionContext.svelte

@@ -1,34 +0,0 @@
-<!-- based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V. -->
-
-<script lang="ts">
-    import { getContext } from "svelte";
-    import { get, type Writable } from 'svelte/store';
-    import { MotionContext, type MotionContextProps } from './index.js';
-    import { getCurrentTreeVariants } from './utils.js';
-
-    export let props: any, 
-        isStatic: any,
-        isCustom: any = undefined;
-
-    let mc: Writable<MotionContextProps> = getContext(MotionContext)||MotionContext(isCustom);
-    let {initial, animate} = getCurrentTreeVariants(props, get(mc));
-    $: ({initial,animate} = getCurrentTreeVariants(props, $mc));
-
-    const variantLabelsAsDependency = (prop) => {
-        return Array.isArray(prop) ? prop.join(" ") : prop;
-    }
-
-    const memo = () => { return (
-        { initial: initial, animate: animate }
-        ); 
-    } 
-    /**
-     * Only break memoisation in static mode
-     */
-     let value = memo();
-     $: if (isStatic){
-         value = memo(variantLabelsAsDependency(initial),variantLabelsAsDependency(animate))
-     }
-</script>
-<slot {value}/>

package/src/context/SharedLayoutContext.ts

@@ -1,29 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { Writable } from 'svelte/store'
-import type { SharedLayoutSyncMethods, SyncLayoutBatcher } from "../components/AnimateSharedLayout/types";
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { writable } from 'svelte/store';
-import { createBatcher } from '../components/AnimateSharedLayout/utils/batcher.js';
-import { getDomContext } from './DOMcontext.js';
-
-var SharedLayoutContext = (custom?: any): Writable<SyncLayoutBatcher | SharedLayoutSyncMethods> => getDomContext("SharedLayout",custom)||writable(createBatcher());
-
-/**
- * @internal
- */
-var FramerTreeLayoutContext = ()=> writable(createBatcher());
-
-function isSharedLayout(context: SyncLayoutBatcher | SharedLayoutSyncMethods): context is SharedLayoutSyncMethods {
-    return !!context.forceUpdate;
-}
-
-export { FramerTreeLayoutContext, SharedLayoutContext, isSharedLayout };

package/src/gestures/PanSession.ts

@@ -1,298 +0,0 @@
-/** 
-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 };