How to use the popmotion.listen function in popmotion

}).start(viewer);
  };

  if (reset) {
    reset.addEventListener('click', () => {
      // const bounds = runtime.getBounds(panPadding);
      // viewer.update({
      //   x: bounds.x1,
      //   y: bounds.x2,
      // });

      constrainBounds();
    });
  }

  listen(document, 'mouseup touchend').start(constrainBounds);

  // A generic zoom to function, with an optional origin parameter.
  // All of the points referenced are world points. You can pass your
  // own in or it will simply default to the middle of the viewport.
  // Note: the factor changes the size of the VIEWPORT on the canvas.
  // So smaller values will zoom in, and larger values will zoom out.
  let currentZoom: ColdSubscription | undefined;
  function zoomTo(factor: number, origin?: Position, stream: boolean = false) {
    if (factor < 1 && runtime.scaleFactor / factor > (1 / minZoomFactor) * devicePixelRatio) {
      factor = runtime.scaleFactor * (minZoomFactor / devicePixelRatio);
    }
    if (factor >= 1 && runtime.scaleFactor / factor < 1 / maxZoomFactor) {
      factor = runtime.scaleFactor;
    }
    // Save the before for the tween.
    const fromPos = runtime.getViewport();

config
) => {
  const startListener = startPose + 'Start';
  const endListener = startPose + 'End';
  const moveListener = startPose + 'Move';

  if (preventScroll) {
    const touchMoveListener = listen(element, 'touchmove', {
      passive: false
    }).start((e: TouchEvent) => {
      e.preventDefault();
    });
    activeActions.set(moveListener, touchMoveListener);
  }

  const eventStartListener = listen(element, startEvents).start(
    (startEvent: MouseEvent | TouchEvent) => {
      poser.unset(endPose);
      poser.set(startPose);

      if (startCallback && config[startCallback])
        config[startCallback](startEvent);

      const eventEndListener = listen(
        useDocumentToEnd ? document.documentElement : element,
        endEvents + (useDocumentToEnd ? ' mouseenter' : '')
      ).start((endEvent: MouseEvent | TouchEvent) => {
        // If this is a window event, detect mouse reentries without the left button
        // pressed and detect them as an end event. This might be a candidate to be moved within Popmotion.
        if (
          useDocumentToEnd &&
          endEvent.type === 'mouseenter' &&

var dragStartListener = listen(element, 'mousedown touchstart').start(function (startEvent) {
        startEvent.preventDefault();
        setPose('dragging');
        if (onDragStart) onDragStart(startEvent);
        var dragEndListener = listen(document, 'mouseup touchend').start(function (endEvent) {
            activeActions.get('dragEndListener').stop();
            setPose('dragEnd');
            if (onDragEnd) onDragEnd(endEvent);
        });
        activeActions.set('dragEndListener', dragEndListener);
    });
    activeActions.set('dragStartListener', dragStartListener);

startAnimation = ref => {
    if (!ref) return;
    this.boxStyler = styler(ref);
    this.ballXY = value({ x: 0, y: 0 }, this.boxStyler.set);

    listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      pointer(this.ballXY.get()).start(this.ballXY);
    });

    listen(document, 'mouseup touchend').start(() => {
      spring({
        from: this.ballXY.get(),
        velocity: this.ballXY.getVelocity(),
        to: { x: 0, y: 0 },
        stiffness: 200
      }).start(this.ballXY);
    });
  };

startAnimation = ref => {
    if (!ref) return;

    const sliderStyler = styler(ref);
    this.sliderX = value(0, v => sliderStyler.set('x', v));
    const sliderWidth = ref.lastChild.offsetLeft + ref.lastChild.offsetWidth;
    const clampMovement = transform.clamp(-(sliderWidth - ref.offsetWidth), 0);

    listen(ref, 'mousedown touchstart').start(() =>
      pointer({ x: this.sliderX.get() })
        .pipe(({ x }) => x, clampMovement)
        .start(this.sliderX)
    );

    listen(document, 'mouseup touchend').start(() =>
      decay({
        from: this.sliderX.get(),
        velocity: this.sliderX.getVelocity()
      })
        .pipe(clampMovement)
        .start(this.sliderX)
    );
  };

var makeDraggable = function (element, activeActions, setPose, _a) {
    var onDragStart = _a.onDragStart,
        onDragEnd = _a.onDragEnd;
    var dragStartListener = listen(element, 'mousedown touchstart').start(function (startEvent) {
        startEvent.preventDefault();
        setPose('dragging');
        if (onDragStart) onDragStart(startEvent);
        var dragEndListener = listen(document, 'mouseup touchend').start(function (endEvent) {
            activeActions.get('dragEndListener').stop();
            setPose('dragEnd');
            if (onDragEnd) onDragEnd(endEvent);
        });
        activeActions.set('dragEndListener', dragEndListener);
    });
    activeActions.set('dragStartListener', dragStartListener);
};
var appendEventListeners = function (element, activeActions, setPose, _a) {

applyOffset(nodeRotation.get())
      )
      .start(nodeRotation);
  }

  function stopTracking() {
    if (active) active.stop();
    active = physics({
      from: nodeRotation.get(),
      velocity: nodeRotation.getVelocity(),
      friction
    }).start(nodeRotation);
  }

  listen(node, 'mousedown touchstart').start(startTracking);
  listen(document, 'mouseup touchend').start(stopTracking);

  return {
    stop: () => active && active.stop()
  };
}

startAnimation = ref => {
    if (!ref) return;
    this.boxStyler = styler(ref);
    this.ballXY = value({ x: 0, y: 0 }, this.boxStyler.set);

    const smoothXY = transform.transformMap({
      x: smooth(200),
      y: smooth(200)
    });

    listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      schedule(everyFrame(), pointer(this.ballXY.get()))
        .pipe(smoothXY)
        .start(this.ballXY);
    });

    listen(document, 'mouseup touchend').start(() => this.ballXY.stop());
  };

startAnimation = ref => {
    if (!ref) return;
    this.boxStyler = styler(ref);
    this.ballXY = value({ x: 0, y: 0 }, this.boxStyler.set);

    listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      pointer(this.ballXY.get()).start(this.ballXY);
    });

    listen(document, 'mouseup touchend').start(() => {
      spring({
        from: this.ballXY.get(),
        velocity: this.ballXY.getVelocity(),
        to: { x: 0, y: 0 },
        stiffness: 200
      }).start(this.ballXY);
    });
  };