@mint-ui/map/dist/components/mint-map/core/hooks/MarkerMovingHook.js

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var MintMapProvider = require('../provider/MintMapProvider.js');
var animation = require('../util/animation.js');
var geo = require('../util/geo.js');
require('../../types/MapDrawables.js');
var MapTypes = require('../../types/MapTypes.js');
require('../../types/MapEventTypes.js');

function nextIndex(array, currIdx) {
  var next = currIdx + 1;

  if (next > array.length - 1) {
    next = 0;
  }

  return next;
}

function useMarkerMoving(_a) {
  var _b = _a.marker,
      marker = _b === void 0 ? undefined : _b,
      _c = _a.positions,
      positions = _c === void 0 ? [] : _c,
      _d = _a.positionClosed,
      positionClosed = _d === void 0 ? false : _d,
      _e = _a.loop,
      loop = _e === void 0 ? false : _e,
      _f = _a.fps,
      fps = _f === void 0 ? 1 : _f,
      _g = _a.startPositionIndex,
      startPositionIndex = _g === void 0 ? 0 : _g,
      _h = _a.velocity,
      velocity = _h === void 0 ? 10 : _h,
      onMovingStart = _a.onMovingStart,
      onMovingEnd = _a.onMovingEnd; //controller

  var controller = MintMapProvider.useMintMapController();
  React.useEffect(function () {
    //console.log('velocity changed!!!!', velocity);
    contextRef.current && (contextRef.current.velocityKmh = velocity);
  }, [velocity]);
  var contextRef = React.useRef();
  React.useEffect(function () {
    //console.log('ani marker', marker);
    if (marker) {
      var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
      var stopNext_1 = false;
      var loopCount_1 = 0;
      var context_1 = contextRef.current = {
        pos1: positions[startPositionIndex],
        pos2: positions[currTargetIndex_1],
        velocityKmh: velocity
      };
      var nextOption_1 = {
        position: context_1.nextPos,
        anchor: marker.options.anchor
      };

      var draw = function (frameGapTime, _elapsedTime) {
        if (!marker) {
          console.log('myMarker is not exist!!!');
          return true; //종료
        } //지난 시간


        context_1.elapsedTimeMs = frameGapTime; //next position 계산

        while (true) {
          //계산
          geo.GeoCalulator.computeNextPositionAndDistances(context_1); //타겟에 도착했으면, 원래 얼마나 더 갈수 있었는지 체크해서
          //그 만큼 더 가도록 계속 처리하기위해 다시 계산

          if (context_1.nextPos === context_1.pos2) {
            //다음 목표가 시작점과 같으면 loop 카운트 +1
            if (currTargetIndex_1 === startPositionIndex) {
              loopCount_1 += 1;
            }

            if (!loop && loopCount_1 > 0) {
              stopNext_1 = true;
              break;
            } //현재 출발점


            context_1.pos1 = positions[currTargetIndex_1]; //현재 목표점

            currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);

            if (currTargetIndex_1 === 0 && !positionClosed) {
              context_1.pos1 = positions[currTargetIndex_1];
              currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
            }

            context_1.pos2 = positions[currTargetIndex_1];
          } else {
            break;
          }
        }

        nextOption_1.position = new MapTypes.Position(context_1.nextPos.lat, context_1.nextPos.lng);
        marker.options.position = nextOption_1.position;
        controller.updateMarker(marker, nextOption_1);

        if (stopNext_1) {
          onMovingEnd && onMovingEnd();
          return true; //종료
        }

        return false;
      };

      player.current = new animation.AnimationPlayer(draw, fps);
    }

    return function () {
      player.current && player.current.stop();
    };
  }, [marker]);
  var player = React.useRef();

  var _j = React.useState('stop'),
      playbackStatus = _j[0],
      setPlaybackStatus = _j[1];

  React.useEffect(function () {
    var _a, _b, _c;

    if (playbackStatus === 'start') {
      (_a = player === null || player === void 0 ? void 0 : player.current) === null || _a === void 0 ? void 0 : _a.start();
      onMovingStart && onMovingStart();
    } else if (playbackStatus === 'resume') {
      (_b = player === null || player === void 0 ? void 0 : player.current) === null || _b === void 0 ? void 0 : _b.resume();
    } else if (playbackStatus === 'stop') {
      (_c = player === null || player === void 0 ? void 0 : player.current) === null || _c === void 0 ? void 0 : _c.stop();
    }
  }, [playbackStatus]);

  var start = function () {
    setPlaybackStatus('start');
  };

  var stop = function () {
    setPlaybackStatus('stop');
  };

  var resume = function () {
    setPlaybackStatus('resume');
  };

  return [start, stop, resume];
}

exports.useMarkerMoving = useMarkerMoving;