motion-v 0.5.0-beta.2 → 0.5.0

package/dist/es/features/gestures/drag/VisualElementDragControls.mjs

@@ -0,0 +1,450 @@
+import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
+import { extractEventInfo } from "../../../events/event-info.mjs";
+import { addDomEvent } from "../../../events/add-dom-event.mjs";
+import { getGlobalLock } from "./lock.mjs";
+import { applyConstraints, calcRelativeConstraints, resolveDragElastic, calcViewportConstraints, rebaseAxisConstraints, calcOrigin, defaultElastic } from "./utils/constraints.mjs";
+import { isHTMLElement } from "./utils/is.mjs";
+import { PanSession } from "../pan/PanSession.mjs";
+import { calcLength } from "../../../projection/geometry/delta-calc.mjs";
+import { createBox } from "../../../projection/geometry/models.mjs";
+import { eachAxis } from "../../../projection/utils/each-axis.mjs";
+import { percent } from "../../../value/types/numbers/units.mjs";
+import { addValueToWillChange } from "../../../value/use-will-change/add-will-change.mjs";
+import { measurePageBox } from "../../../projection/utils/measure.mjs";
+import { convertBoxToBoundingBox, convertBoundingBoxToBox } from "../../../projection/conversion.mjs";
+import { animateMotionValue } from "../../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/interfaces/motion-value.mjs";
+import { mixNumber } from "../../../utils/mix/number.mjs";
+import { invariant } from "hey-listen";
+import { isPresent } from "../../../state/utils/is-present.mjs";
+import { getContextWindow } from "../../../utils/get-context-window.mjs";
+import { frame } from "../../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+const elementDragControls = /* @__PURE__ */ new WeakMap();
+class VisualElementDragControls {
+  constructor(visualElement) {
+    this.openGlobalLock = null;
+    this.isDragging = false;
+    this.currentDirection = null;
+    this.originPoint = { x: 0, y: 0 };
+    this.constraints = false;
+    this.hasMutatedConstraints = false;
+    this.elastic = createBox();
+    this.visualElement = visualElement;
+  }
+  start(originEvent, { snapToCursor = false } = {}) {
+    if (!isPresent(this.visualElement))
+      return;
+    const onSessionStart = (event) => {
+      const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
+      dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
+      if (snapToCursor) {
+        this.snapToCursor(extractEventInfo(event, "page").point);
+      }
+    };
+    const onStart = (event, info) => {
+      const { drag, dragPropagation, onDragStart } = this.getProps();
+      if (drag && !dragPropagation) {
+        if (this.openGlobalLock)
+          this.openGlobalLock();
+        this.openGlobalLock = getGlobalLock(drag);
+        if (!this.openGlobalLock)
+          return;
+      }
+      this.isDragging = true;
+      this.currentDirection = null;
+      this.resolveConstraints();
+      if (this.visualElement.projection) {
+        this.visualElement.projection.isAnimationBlocked = true;
+        this.visualElement.projection.target = void 0;
+      }
+      eachAxis((axis) => {
+        let current = this.getAxisMotionValue(axis).get() || 0;
+        if (percent.test(current)) {
+          const { projection } = this.visualElement;
+          if (projection && projection.layout) {
+            const measuredAxis = projection.layout.layoutBox[axis];
+            if (measuredAxis) {
+              const length = calcLength(measuredAxis);
+              current = length * (parseFloat(current) / 100);
+            }
+          }
+        }
+        this.originPoint[axis] = current;
+      });
+      if (onDragStart) {
+        frame.postRender(() => onDragStart(event, info));
+      }
+      addValueToWillChange(this.visualElement, "transform");
+      const state = this.visualElement.state;
+      state.setActive("whileDrag", true);
+    };
+    const onMove = (event, info) => {
+      const {
+        dragPropagation,
+        dragDirectionLock,
+        onDirectionLock,
+        onDrag
+      } = this.getProps();
+      if (!dragPropagation && !this.openGlobalLock)
+        return;
+      const { offset } = info;
+      if (dragDirectionLock && this.currentDirection === null) {
+        this.currentDirection = getCurrentDirection(offset);
+        if (this.currentDirection !== null) {
+          onDirectionLock && onDirectionLock(this.currentDirection);
+        }
+        return;
+      }
+      this.updateAxis("x", info.point, offset);
+      this.updateAxis("y", info.point, offset);
+      this.visualElement.render();
+      onDrag && onDrag(event, info);
+    };
+    const onSessionEnd = (event, info) => this.stop(event, info);
+    const resumeAnimation = () => eachAxis(
+      (axis) => {
+        var _a;
+        return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.play());
+      }
+    );
+    const { dragSnapToOrigin } = this.getProps();
+    this.panSession = new PanSession(
+      originEvent,
+      {
+        onSessionStart,
+        onStart,
+        onMove,
+        onSessionEnd,
+        resumeAnimation
+      },
+      {
+        transformPagePoint: this.visualElement.getTransformPagePoint(),
+        dragSnapToOrigin,
+        contextWindow: getContextWindow(this.visualElement)
+      }
+    );
+  }
+  stop(event, info) {
+    const isDragging = this.isDragging;
+    this.cancel();
+    if (!isDragging)
+      return;
+    const { velocity } = info;
+    this.startAnimation(velocity);
+    const { onDragEnd } = this.getProps();
+    if (onDragEnd) {
+      frame.postRender(() => onDragEnd(event, info));
+    }
+  }
+  cancel() {
+    this.isDragging = false;
+    const { projection, animationState } = this.visualElement;
+    if (projection) {
+      projection.isAnimationBlocked = false;
+    }
+    this.panSession && this.panSession.end();
+    this.panSession = void 0;
+    const { dragPropagation } = this.getProps();
+    if (!dragPropagation && this.openGlobalLock) {
+      this.openGlobalLock();
+      this.openGlobalLock = null;
+    }
+    const state = this.visualElement.state;
+    state.setActive("whileDrag", false);
+  }
+  updateAxis(axis, _point, offset) {
+    const { drag } = this.getProps();
+    if (!offset || !shouldDrag(axis, drag, this.currentDirection))
+      return;
+    const axisValue = this.getAxisMotionValue(axis);
+    let next = this.originPoint[axis] + offset[axis];
+    if (this.constraints && this.constraints[axis]) {
+      next = applyConstraints(
+        next,
+        this.constraints[axis],
+        this.elastic[axis]
+      );
+    }
+    axisValue.set(next);
+  }
+  resolveConstraints() {
+    var _a;
+    const { dragConstraints, dragElastic } = this.getProps();
+    const layout = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : (_a = this.visualElement.projection) == null ? void 0 : _a.layout;
+    const prevConstraints = this.constraints;
+    if (dragConstraints && isHTMLElement(dragConstraints)) {
+      if (!this.constraints) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    } else {
+      if (dragConstraints && layout) {
+        this.constraints = calcRelativeConstraints(
+          layout.layoutBox,
+          dragConstraints
+        );
+      } else {
+        this.constraints = false;
+      }
+    }
+    this.elastic = resolveDragElastic(dragElastic);
+    if (prevConstraints !== this.constraints && layout && this.constraints && !this.hasMutatedConstraints) {
+      eachAxis((axis) => {
+        if (this.constraints !== false && this.getAxisMotionValue(axis)) {
+          this.constraints[axis] = rebaseAxisConstraints(
+            layout.layoutBox[axis],
+            this.constraints[axis]
+          );
+        }
+      });
+    }
+  }
+  resolveRefConstraints() {
+    const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
+    if (!constraints || !isHTMLElement(constraints))
+      return false;
+    const constraintsElement = constraints;
+    invariant(
+      constraintsElement !== null,
+      "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop."
+    );
+    const { projection } = this.visualElement;
+    if (!projection || !projection.layout)
+      return false;
+    const constraintsBox = measurePageBox(
+      constraintsElement,
+      projection.root,
+      this.visualElement.getTransformPagePoint()
+    );
+    let measuredConstraints = calcViewportConstraints(
+      projection.layout.layoutBox,
+      constraintsBox
+    );
+    if (onMeasureDragConstraints) {
+      const userConstraints = onMeasureDragConstraints(
+        convertBoxToBoundingBox(measuredConstraints)
+      );
+      this.hasMutatedConstraints = !!userConstraints;
+      if (userConstraints) {
+        measuredConstraints = convertBoundingBoxToBox(userConstraints);
+      }
+    }
+    return measuredConstraints;
+  }
+  startAnimation(velocity) {
+    const {
+      drag,
+      dragMomentum,
+      dragElastic,
+      dragTransition,
+      dragSnapToOrigin,
+      onDragTransitionEnd
+    } = this.getProps();
+    const constraints = this.constraints || {};
+    const momentumAnimations = eachAxis((axis) => {
+      if (!shouldDrag(axis, drag, this.currentDirection)) {
+        return;
+      }
+      let transition = constraints && constraints[axis] || {};
+      if (dragSnapToOrigin)
+        transition = { min: 0, max: 0 };
+      const bounceStiffness = dragElastic ? 200 : 1e6;
+      const bounceDamping = dragElastic ? 40 : 1e7;
+      const inertia = {
+        type: "inertia",
+        velocity: dragMomentum ? velocity[axis] : 0,
+        bounceStiffness,
+        bounceDamping,
+        timeConstant: 750,
+        restDelta: 1,
+        restSpeed: 10,
+        ...dragTransition,
+        ...transition
+      };
+      return this.startAxisValueAnimation(axis, inertia);
+    });
+    return Promise.all(momentumAnimations).then(onDragTransitionEnd);
+  }
+  startAxisValueAnimation(axis, transition) {
+    const axisValue = this.getAxisMotionValue(axis);
+    addValueToWillChange(this.visualElement, axis);
+    return axisValue.start(
+      animateMotionValue(
+        axis,
+        axisValue,
+        0,
+        transition,
+        this.visualElement,
+        false
+      )
+    );
+  }
+  stopAnimation() {
+    if (!isPresent(this.visualElement))
+      return;
+    eachAxis((axis) => this.getAxisMotionValue(axis).stop());
+  }
+  pauseAnimation() {
+    eachAxis((axis) => {
+      var _a;
+      return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.pause();
+    });
+  }
+  getAnimationState(axis) {
+    var _a;
+    return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.state;
+  }
+  /**
+   * 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.
+   * - Otherwise, we apply the delta to the x/y motion values.
+   */
+  getAxisMotionValue(axis) {
+    const dragKey = `_drag${axis.toUpperCase()}`;
+    const props = this.visualElement.getProps();
+    const externalMotionValue = props[dragKey];
+    return externalMotionValue || this.visualElement.getValue(
+      axis,
+      (props.initial ? props.initial[axis] : void 0) || 0
+    );
+  }
+  snapToCursor(point) {
+    eachAxis((axis) => {
+      const { drag } = this.getProps();
+      if (!shouldDrag(axis, drag, this.currentDirection))
+        return;
+      const { projection } = this.visualElement;
+      const axisValue = this.getAxisMotionValue(axis);
+      if (projection && projection.layout) {
+        const { min, max } = projection.layout.layoutBox[axis];
+        axisValue.set(point[axis] - mixNumber(min, max, 0.5));
+      }
+    });
+  }
+  /**
+   * When the viewport resizes we want to check if the measured constraints
+   * have changed and, if so, reposition the element within those new constraints
+   * relative to where it was before the resize.
+   */
+  scalePositionWithinConstraints() {
+    if (!this.visualElement.current)
+      return;
+    const { drag, dragConstraints } = this.getProps();
+    const { projection } = this.visualElement;
+    if (!isHTMLElement(dragConstraints) || !projection || !this.constraints)
+      return;
+    this.stopAnimation();
+    const boxProgress = { x: 0, y: 0 };
+    eachAxis((axis) => {
+      const axisValue = this.getAxisMotionValue(axis);
+      if (axisValue && this.constraints !== false) {
+        const latest = axisValue.get();
+        boxProgress[axis] = calcOrigin(
+          { min: latest, max: latest },
+          this.constraints[axis]
+        );
+      }
+    });
+    const { transformTemplate } = this.visualElement.getProps();
+    this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
+    projection.root && projection.root.updateScroll();
+    projection.updateLayout();
+    this.resolveConstraints();
+    eachAxis((axis) => {
+      if (!shouldDrag(axis, drag, null))
+        return;
+      const axisValue = this.getAxisMotionValue(axis);
+      const { min, max } = this.constraints[axis];
+      axisValue.set(mixNumber(min, max, boxProgress[axis]));
+    });
+  }
+  addListeners() {
+    if (!this.visualElement.current)
+      return;
+    elementDragControls.set(this.visualElement, this);
+    const element = this.visualElement.current;
+    const stopPointerListener = addPointerEvent(
+      element,
+      "pointerdown",
+      (event) => {
+        const { drag, dragListener = true } = this.getProps();
+        drag && dragListener && this.start(event);
+      }
+    );
+    const measureDragConstraints = () => {
+      const { dragConstraints } = this.getProps();
+      if (isHTMLElement(dragConstraints)) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    };
+    const { projection } = this.visualElement;
+    const stopMeasureLayoutListener = projection.addEventListener(
+      "measure",
+      measureDragConstraints
+    );
+    if (projection && !projection.layout) {
+      projection.root && projection.root.updateScroll();
+      projection.updateLayout();
+    }
+    frame.read(measureDragConstraints);
+    const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
+    const stopLayoutUpdateListener = projection.addEventListener(
+      "didUpdate",
+      ({ delta, hasLayoutChanged }) => {
+        if (this.isDragging && hasLayoutChanged) {
+          eachAxis((axis) => {
+            const motionValue = this.getAxisMotionValue(axis);
+            if (!motionValue)
+              return;
+            this.originPoint[axis] += delta[axis].translate;
+            motionValue.set(
+              motionValue.get() + delta[axis].translate
+            );
+          });
+          this.visualElement.render();
+        }
+      }
+    );
+    return () => {
+      stopResizeListener();
+      stopPointerListener();
+      stopMeasureLayoutListener();
+      stopLayoutUpdateListener && stopLayoutUpdateListener();
+    };
+  }
+  getProps() {
+    const props = this.visualElement.getProps();
+    const {
+      drag = false,
+      dragDirectionLock = false,
+      dragPropagation = false,
+      dragConstraints = false,
+      dragElastic = defaultElastic,
+      dragMomentum = true
+    } = props;
+    return {
+      ...props,
+      drag,
+      dragDirectionLock,
+      dragPropagation,
+      dragConstraints,
+      dragElastic,
+      dragMomentum
+    };
+  }
+}
+function shouldDrag(direction, drag, currentDirection) {
+  return (drag === true || drag === direction) && (currentDirection === null || currentDirection === direction);
+}
+function getCurrentDirection(offset, lockThreshold = 10) {
+  let direction = null;
+  if (Math.abs(offset.y) > lockThreshold) {
+    direction = "y";
+  } else if (Math.abs(offset.x) > lockThreshold) {
+    direction = "x";
+  }
+  return direction;
+}
+export {
+  VisualElementDragControls,
+  elementDragControls
+};

package/dist/es/features/gestures/drag/index.mjs

@@ -0,0 +1,26 @@
+import { Feature } from "../../feature.mjs";
+import { VisualElementDragControls } from "./VisualElementDragControls.mjs";
+import { noop } from "../../../external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/noop.mjs";
+import "../../../external/.pnpm/motion-utils@11.14.3/external/motion-utils/dist/es/errors.mjs";
+class DragGesture extends Feature {
+  constructor(state) {
+    super(state);
+    this.removeGroupControls = noop;
+    this.removeListeners = noop;
+    this.controls = new VisualElementDragControls(state.visualElement);
+  }
+  mount() {
+    const { dragControls } = this.state.options;
+    if (dragControls) {
+      this.removeGroupControls = dragControls.subscribe(this.controls);
+    }
+    this.removeListeners = this.controls.addListeners() || noop;
+  }
+  unmount() {
+    this.removeGroupControls();
+    this.removeListeners();
+  }
+}
+export {
+  DragGesture
+};

package/dist/es/features/gestures/drag/lock.mjs

@@ -0,0 +1,42 @@
+function createLock(name) {
+  let lock = null;
+  return () => {
+    const openLock = () => {
+      lock = null;
+    };
+    if (lock === null) {
+      lock = name;
+      return openLock;
+    }
+    return false;
+  };
+}
+const globalHorizontalLock = createLock("dragHorizontal");
+const globalVerticalLock = createLock("dragVertical");
+function getGlobalLock(drag) {
+  let lock = false;
+  if (drag === "y") {
+    lock = globalVerticalLock();
+  } else if (drag === "x") {
+    lock = globalHorizontalLock();
+  } else {
+    const openHorizontal = globalHorizontalLock();
+    const openVertical = globalVerticalLock();
+    if (openHorizontal && openVertical) {
+      lock = () => {
+        openHorizontal();
+        openVertical();
+      };
+    } else {
+      if (openHorizontal)
+        openHorizontal();
+      if (openVertical)
+        openVertical();
+    }
+  }
+  return lock;
+}
+export {
+  createLock,
+  getGlobalLock
+};

package/dist/es/features/gestures/drag/utils/constraints.mjs

@@ -0,0 +1,93 @@
+import { calcLength } from "../../../../projection/geometry/delta-calc.mjs";
+import { clamp } from "../../../../utils/clamp.mjs";
+import { mixNumber } from "../../../../utils/mix/number.mjs";
+import { progress } from "../../../../utils/progress.mjs";
+function applyConstraints(point, { min, max }, elastic) {
+  if (min !== void 0 && point < min) {
+    point = elastic ? mixNumber(min, point, elastic.min) : Math.max(point, min);
+  } else if (max !== void 0 && point > max) {
+    point = elastic ? mixNumber(max, point, elastic.max) : Math.min(point, max);
+  }
+  return point;
+}
+const defaultElastic = 0.35;
+function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
+  return {
+    x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+    y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
+  };
+}
+function calcRelativeAxisConstraints(axis, min, max) {
+  return {
+    min: min !== void 0 ? axis.min + min : void 0,
+    max: max !== void 0 ? axis.max + max - (axis.max - axis.min) : void 0
+  };
+}
+function resolveDragElastic(dragElastic = defaultElastic) {
+  if (dragElastic === false) {
+    dragElastic = 0;
+  } else if (dragElastic === true) {
+    dragElastic = defaultElastic;
+  }
+  return {
+    x: resolveAxisElastic(dragElastic, "left", "right"),
+    y: resolveAxisElastic(dragElastic, "top", "bottom")
+  };
+}
+function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
+  return {
+    min: resolvePointElastic(dragElastic, minLabel),
+    max: resolvePointElastic(dragElastic, maxLabel)
+  };
+}
+function resolvePointElastic(dragElastic, label) {
+  return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
+}
+function rebaseAxisConstraints(layout, constraints) {
+  const relativeConstraints = {};
+  if (constraints.min !== void 0) {
+    relativeConstraints.min = constraints.min - layout.min;
+  }
+  if (constraints.max !== void 0) {
+    relativeConstraints.max = constraints.max - layout.min;
+  }
+  return relativeConstraints;
+}
+function calcViewportConstraints(layoutBox, constraintsBox) {
+  return {
+    x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+    y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
+  };
+}
+function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
+  let min = constraintsAxis.min - layoutAxis.min;
+  let max = constraintsAxis.max - layoutAxis.max;
+  if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
+    [min, max] = [max, min];
+  }
+  return { min, max };
+}
+function calcOrigin(source, target) {
+  let origin = 0.5;
+  const sourceLength = calcLength(source);
+  const targetLength = calcLength(target);
+  if (targetLength > sourceLength) {
+    origin = progress(target.min, target.max - sourceLength, source.min);
+  } else if (sourceLength > targetLength) {
+    origin = progress(source.min, source.max - targetLength, target.min);
+  }
+  return clamp(0, 1, origin);
+}
+export {
+  applyConstraints,
+  calcOrigin,
+  calcRelativeAxisConstraints,
+  calcRelativeConstraints,
+  calcViewportAxisConstraints,
+  calcViewportConstraints,
+  defaultElastic,
+  rebaseAxisConstraints,
+  resolveAxisElastic,
+  resolveDragElastic,
+  resolvePointElastic
+};

package/dist/es/features/gestures/drag/utils/is.mjs

@@ -0,0 +1,6 @@
+function isHTMLElement(value) {
+  return typeof value === "object" && value !== null && "nodeType" in value;
+}
+export {
+  isHTMLElement
+};

package/dist/es/features/gestures/hover/index.mjs

@@ -0,0 +1,40 @@
+import { Feature } from "../../feature.mjs";
+import { hover } from "motion-dom";
+import { frame } from "../../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { extractEventInfo } from "../press/index.mjs";
+function handleHoverEvent(state, event, lifecycle) {
+  const props = state.options;
+  if (props.hover) {
+    state.setActive("hover", lifecycle === "Start");
+  }
+  const eventName = `onHover${lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(event, extractEventInfo(event)));
+  }
+}
+class HoverGesture extends Feature {
+  isActive() {
+    return Boolean(this.state.getOptions().hover);
+  }
+  constructor(state) {
+    super(state);
+  }
+  mount() {
+    const element = this.state.element;
+    if (!element)
+      return;
+    this.unmount = hover(
+      element,
+      (startEvent) => {
+        handleHoverEvent(this.state, startEvent, "Start");
+        return (endEvent) => {
+          handleHoverEvent(this.state, endEvent, "End");
+        };
+      }
+    );
+  }
+}
+export {
+  HoverGesture
+};

package/dist/es/features/gestures/in-view/index.mjs

@@ -0,0 +1,39 @@
+import { Feature } from "../../feature.mjs";
+import { inView } from "../../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { frame } from "../../../external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+function handleHoverEvent(state, entry, lifecycle) {
+  const props = state.options;
+  if (props.inView) {
+    state.setActive("inView", lifecycle === "Enter");
+  }
+  const eventName = `onViewport${lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(entry));
+  }
+}
+class InViewGesture extends Feature {
+  isActive() {
+    return Boolean(this.state.getOptions().inView);
+  }
+  constructor(state) {
+    super(state);
+  }
+  mount() {
+    const element = this.state.element;
+    if (!element)
+      return;
+    this.unmount = inView(
+      element,
+      (entry) => {
+        handleHoverEvent(this.state, entry, "Enter");
+        return (endEvent) => {
+          handleHoverEvent(this.state, entry, "Leave");
+        };
+      }
+    );
+  }
+}
+export {
+  InViewGesture
+};