motion-start 0.0.1 → 0.1.0

package/src/components/MotionConfig/MotionConfigScaleCorrection.ts

@@ -1,47 +0,0 @@
-import { getContext } from "svelte";
-import { get } from "svelte/store";
-import {
-    ScaleCorrectionContext,
-    ScaleCorrectionParentContext,
-} from "../../context/ScaleCorrectionProvider.svelte";
-
-
-export const scaleCorrection = () => {
-
-    const scaleCorrectionContext = getContext(ScaleCorrectionContext);
-    const scaleCorrectionParentContext = getContext(
-        ScaleCorrectionParentContext
-    );
-    const afterU = (nc = false) => {
-        /* Second part of the updater calling in child layouts first.*/
-        const scc = get(scaleCorrectionContext);
-
-        
-        scc.forEach((v, i) => {
-            v.afterU?.(true);
-        });
-    };
-
-    const updater = () => {
-        // in React the updater function is called on children first, in Svelte the child does not call it.
-        get(scaleCorrectionContext).forEach((v) => {
-            v.updater?.(true);
-        })
-    }
-
-    scaleCorrectionParentContext.update((v) =>
-        v.concat([
-            {
-                updater,
-                afterU,
-            },
-        ])
-    );
-    
-    return {
-        update: updater
-        }
-    }
-
-
-

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/MotionContext.svelte

@@ -1,27 +0,0 @@
-<!-- based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V. -->
-
-<script lang="ts" module>
-  import { getContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-  import type { VisualElement } from "../../render/types";
-  import { getDomContext } from "../DOMcontext";
-  import type { MotionContextProps } from "./index.js";
-  export const MotionContext = (c?: any): Writable<MotionContextProps> =>
-    getDomContext("Motion", c) || writable({});
-
-  export const useVisualElementContext = (c?: any) => {
-    return (getContext(MotionContext) || MotionContext(c)) as
-      | VisualElement<any, any>
-      | undefined;
-  };
-</script>
-
-<script lang="ts">
-  export let isCustom;
-  const motionContext =
-    getContext<Writable<MotionContextProps>>(MotionContext) ||
-    MotionContext(isCustom);
-</script>
-
-<slot parent={$motionContext.visualElement} />

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/MotionContext/index.ts

@@ -1,14 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { VisualElement } from "../../render/types";
-export interface MotionContextProps {
-    visualElement?: VisualElement;
-    initial?: false | string | string[];
-    animate?: string | string[];
-}
-
-
-export { MotionContext, useVisualElementContext, default as UseVisualElementContext } from "./MotionContext.svelte";
-

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/events/UsePointerEvent.svelte

@@ -1,76 +0,0 @@
-<!-- based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V. -->
-
-<script lang="ts" module>
-  import type { EventListenerWithPointInfo } from "./event-info.js";
-  import { UseDomEvent } from "./use-dom-event.js";
-  import {
-    supportsMouseEvents,
-    supportsPointerEvents,
-    supportsTouchEvents,
-  } from "./utils.js";
-
-  const mouseEventNames = {
-    pointerdown: "mousedown",
-    pointermove: "mousemove",
-    pointerup: "mouseup",
-    pointercancel: "mousecancel",
-    pointerover: "mouseover",
-    pointerout: "mouseout",
-    pointerenter: "mouseenter",
-    pointerleave: "mouseleave",
-  };
-
-  const touchEventNames = {
-    pointerdown: "touchstart",
-    pointermove: "touchmove",
-    pointerup: "touchend",
-    pointercancel: "touchcancel",
-  };
-  function getPointerEventName(name: string) {
-    if (supportsPointerEvents()) {
-      return name;
-    } else if (supportsTouchEvents()) {
-      return (touchEventNames as any)[name];
-    } else if (supportsMouseEvents()) {
-      return (mouseEventNames as any)[name];
-    }
-
-    return name;
-  }
-  export function addPointerEvent(
-    target: EventTarget,
-    eventName: string,
-    handler: EventListenerWithPointInfo,
-    options?: AddEventListenerOptions
-  ) {
-    return addDomEvent(
-      target,
-      getPointerEventName(eventName),
-      wrapHandler(handler, eventName === "pointerdown"),
-      options
-    );
-  }
-</script>
-
-<script lang="ts">
-  import { wrapHandler } from "./event-info.js";
-  import { addDomEvent } from "./use-dom-event.js";
-  import type { UsePointerEventProps } from "./use-pointer-event.js";
-
-  type $$Props = UsePointerEventProps;
-
-  export let ref: $$Props["ref"],
-    eventName: $$Props["eventName"],
-    handler: $$Props["handler"] = undefined,
-    options: $$Props["options"] = undefined;
-</script>
-
-<UseDomEvent
-  {ref}
-  eventName={getPointerEventName(eventName)}
-  handler={handler && wrapHandler(handler, eventName === "pointerdown")}
-  {options}
->
-  <slot />
-</UseDomEvent>

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

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