How to use the react-map-gl/utils/transition-manager function in react-map-gl

To help you get started, we’ve selected a few react-map-gl examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github uber / react-map-gl / test / src / utils / transition-manager.spec.js View on Github external
test('TransitionManager#auto#duration', t => {
  const mergeProps = props => Object.assign({}, TransitionManager.defaultProps, props);
  const initialProps = {
    width: 100,
    height: 100,
    longitude: -122.45,
    latitude: 37.78,
    zoom: 12,
    pitch: 0,
    bearing: 0,
    transitionDuration: 200
  };
  const transitionManager = new TransitionManager(mergeProps(initialProps));
  transitionManager.processViewportChange(
    mergeProps({
      width: 100,
      height: 100,
      longitude: -100.45, // changed
      latitude: 37.78,
      zoom: 12,
      pitch: 0,
      bearing: 0,
      transitionInterpolator: new ViewportFlyToInterpolator(),
      transitionDuration: 'auto'
    })
  );
  t.ok(
    Number.isFinite(transitionManager.state.duration) && transitionManager.state.duration > 0,
    'should set duraiton when using "auto" mode'
github uber / react-map-gl / test / src / utils / transition-manager.spec.js View on Github external
TEST_CASES_EVENTS.forEach((testCase, ti) => {
    for (let mode in testCase.shouldChange) {
      mode = parseInt(mode);
      let transitionProps;
      let time = 0;
      const transitionManager = new TransitionManager(
        Object.assign({}, TransitionManager.defaultProps, testCase.initialProps, {
          transitionInterruption: mode
        }),
        // Override current time getter
        () => time
      );

      testCase.input.forEach((props, i) => {
        transitionProps = Object.assign({}, TransitionManager.defaultProps, props, {
          transitionInterruption: mode
        });
        time = i * UPDATE_INTERVAL;
        transitionManager.processViewportChange(transitionProps);
      });
      // testing interpolator
      t.is(
github uber / react-map-gl / test / src / utils / transition-manager.spec.js View on Github external
);
      endCount++;
    },
    onViewportChange: (newViewport, interactionState) => {
      t.ok(!transitionInterpolator.arePropsEqual(viewport, newViewport), 'viewport has changed');
      t.ok(interactionState.inTransition, 'inTransition flag is true');
      viewport = newViewport;
      // update props in transition, should not trigger interruption
      transitionManager.processViewportChange(Object.assign({}, transitionProps, viewport));
      updateCount++;
    }
  };

  const mergeProps = props => Object.assign({}, TransitionManager.defaultProps, callbacks, props);

  const transitionManager = new TransitionManager(mergeProps(testCase.initialProps));

  testCase.input.forEach((props, i) => {
    transitionProps = mergeProps(props);
    transitionManager.processViewportChange(transitionProps);
  });

  setTimeout(() => {
    t.is(startCount, 3, 'onTransitionStart() called twice');
    t.is(interruptCount, 2, 'onTransitionInterrupt() called once');
    t.is(endCount, 1, 'onTransitionEnd() called once');
    t.ok(updateCount > 2, 'onViewportChange() called');
    t.end();
  }, 500);
});
github uber / react-map-gl / test / src / utils / transition-manager.spec.js View on Github external
test('TransitionManager#constructor', t => {
  const transitionManager = new TransitionManager();
  t.ok(transitionManager, 'TransitionManager constructor does not throw errors');
  t.notOk(transitionManager._isTransitionInProgress(), 'no transition in progress');
  t.end();
});