@mint-ui/map 0.10.0-beta → 0.10.0-beta-test1

package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../../provider/MintMapProvider.js');
+require('../../provider/MarkerAutoTransitionProvider.js');
 var MapDrawables = require('../../../types/MapDrawables.js');
 require('../../../types/MapTypes.js');
 require('../../../types/MapEventTypes.js');

package/dist/components/mint-map/core/provider/MarkerAutoTransitionProvider.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Position } from "../../types";
+export declare type TransitionType = 'diagonal';
+export declare type TransitionSizeFunction = (zoomLevel: number) => number;
+export interface MarkerAutoTransitionOption {
+    type?: TransitionType;
+    sizeInMeter?: number | TransitionSizeFunction;
+}
+export interface MarkerAutoTransitionContextType {
+    option: Required<MarkerAutoTransitionOption>;
+    transition: (pos: Position) => Position;
+}
+export declare const MarkerAutoTransitionContext: React.Context<MarkerAutoTransitionContextType>;
+export declare const baseCenter: Position;
+export interface MarkerAutoTransitionProviderProps extends MarkerAutoTransitionOption {
+}
+export declare function MarkerAutoTransitionProvider({ children, sizeInMeter, type, }: React.PropsWithChildren<MarkerAutoTransitionProviderProps>): JSX.Element;

package/dist/components/mint-map/core/provider/MarkerAutoTransitionProvider.js

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../../types/MapDrawables.js');
+var MapTypes = require('../../types/MapTypes.js');
+require('../../types/MapEventTypes.js');
+require('../util/animation.js');
+var geo = require('../util/geo.js');
+require('tslib');
+require('../util/polygon.js');
+require('../util/status.js');
+var MintMapProvider = require('./MintMapProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MarkerAutoTransitionContext = React.createContext({
+  option: {
+    sizeInMeter: 2,
+    type: 'diagonal'
+  },
+  transition: function (pos) {
+    return pos;
+  }
+}); // provider
+
+var baseCenter = new MapTypes.Position(37.504497373023206, 127.04896282498558);
+function MarkerAutoTransitionProvider(_a) {
+  var children = _a.children,
+      _b = _a.sizeInMeter,
+      sizeInMeter = _b === void 0 ? 2 : _b,
+      _c = _a.type,
+      type = _c === void 0 ? 'diagonal' : _c;
+  var controller = MintMapProvider.useMintMapController();
+
+  var _d = React.useState(controller.getZoomLevel()),
+      zoom = _d[0],
+      setZoom = _d[1];
+
+  React.useEffect(function () {
+    var onZoomChanged = function () {
+      setZoom(controller.getZoomLevel());
+    };
+
+    controller.addEventListener('ZOOM_CHANGED', onZoomChanged);
+    return function () {
+      controller.removeEventListener('ZOOM_CHANGED', onZoomChanged);
+    };
+  }, []);
+  var calcSize = typeof sizeInMeter === 'number' ? sizeInMeter : sizeInMeter(controller.getZoomLevel());
+  var deltaLat = geo.GeoCalulator.convertMeterToLatitudeValue(calcSize);
+  var offset1 = controller.positionToOffset(baseCenter);
+  var offset2 = controller.positionToOffset(new MapTypes.Position(baseCenter.lat + deltaLat, baseCenter.lng));
+  var deltaOffsetY = offset2.y - offset1.y;
+  var offset3 = new MapTypes.Offset(offset1.x + deltaOffsetY, offset2.y);
+  var deltaLng = baseCenter.lng - controller.offsetToPosition(offset3).lng;
+  var posMap = new Map();
+
+  var transition = function (pos) {
+    var key = positionToMapKey(pos);
+    var count = posMap.get(key);
+
+    if (count === undefined) {
+      count = 1;
+      posMap.set(key, count);
+      return pos;
+    } //type : diagonal
+
+
+    var newPos = new MapTypes.Position(pos.lat + count * deltaLat, pos.lng + count * deltaLng);
+    count += 1;
+    posMap.set(key, count);
+    return newPos;
+  };
+
+  return React__default["default"].createElement(MarkerAutoTransitionContext.Provider, {
+    value: {
+      option: {
+        sizeInMeter: sizeInMeter,
+        type: type
+      },
+      transition: transition
+    }
+  }, zoom && children);
+}
+
+function positionToMapKey(pos) {
+  return "".concat(pos.lat, "-").concat(pos.lng);
+}
+
+exports.MarkerAutoTransitionContext = MarkerAutoTransitionContext;
+exports.MarkerAutoTransitionProvider = MarkerAutoTransitionProvider;
+exports.baseCenter = baseCenter;

package/dist/components/mint-map/core/provider/index.d.ts

@@ -1 +1,2 @@
 export * from "./MintMapProvider";
+export * from "./MarkerAutoTransitionProvider";

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -8,6 +8,7 @@ var reactDom = require('react-dom');
 var MintMapProvider = require('../provider/MintMapProvider.js');
 var MarkerMovingHook = require('../hooks/MarkerMovingHook.js');
 var MapDrawables = require('../../types/MapDrawables.js');
+var MarkerAutoTransitionProvider = require('../provider/MarkerAutoTransitionProvider.js');
 
 var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
   //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
@@ -214,8 +215,13 @@ function MapMarkerWrapper(_a) {
     };
   }, []); //create / update object
 
+  var transition = React.useContext(MarkerAutoTransitionProvider.MarkerAutoTransitionContext).transition;
   React.useEffect(function () {
     if (options) {
+      if (!Array.isArray(options.position)) {
+        options.position = transition(options.position);
+      }
+
       if (markerRef.current) {
         //console.log('update Marker')
         controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리

package/dist/index.es.js

@@ -4283,6 +4283,80 @@ function useMarkerMoving(_a) {
   return [start, stop, resume];
 }
 
+var MarkerAutoTransitionContext = createContext({
+  option: {
+    sizeInMeter: 2,
+    type: 'diagonal'
+  },
+  transition: function (pos) {
+    return pos;
+  }
+}); // provider
+
+var baseCenter = new Position(37.504497373023206, 127.04896282498558);
+function MarkerAutoTransitionProvider(_a) {
+  var children = _a.children,
+      _b = _a.sizeInMeter,
+      sizeInMeter = _b === void 0 ? 2 : _b,
+      _c = _a.type,
+      type = _c === void 0 ? 'diagonal' : _c;
+  var controller = useMintMapController();
+
+  var _d = useState(controller.getZoomLevel()),
+      zoom = _d[0],
+      setZoom = _d[1];
+
+  useEffect(function () {
+    var onZoomChanged = function () {
+      setZoom(controller.getZoomLevel());
+    };
+
+    controller.addEventListener('ZOOM_CHANGED', onZoomChanged);
+    return function () {
+      controller.removeEventListener('ZOOM_CHANGED', onZoomChanged);
+    };
+  }, []);
+  var calcSize = typeof sizeInMeter === 'number' ? sizeInMeter : sizeInMeter(controller.getZoomLevel());
+  var deltaLat = GeoCalulator.convertMeterToLatitudeValue(calcSize);
+  var offset1 = controller.positionToOffset(baseCenter);
+  var offset2 = controller.positionToOffset(new Position(baseCenter.lat + deltaLat, baseCenter.lng));
+  var deltaOffsetY = offset2.y - offset1.y;
+  var offset3 = new Offset(offset1.x + deltaOffsetY, offset2.y);
+  var deltaLng = baseCenter.lng - controller.offsetToPosition(offset3).lng;
+  var posMap = new Map();
+
+  var transition = function (pos) {
+    var key = positionToMapKey(pos);
+    var count = posMap.get(key);
+
+    if (count === undefined) {
+      count = 1;
+      posMap.set(key, count);
+      return pos;
+    } //type : diagonal
+
+
+    var newPos = new Position(pos.lat + count * deltaLat, pos.lng + count * deltaLng);
+    count += 1;
+    posMap.set(key, count);
+    return newPos;
+  };
+
+  return React.createElement(MarkerAutoTransitionContext.Provider, {
+    value: {
+      option: {
+        sizeInMeter: sizeInMeter,
+        type: type
+      },
+      transition: transition
+    }
+  }, zoom && children);
+}
+
+function positionToMapKey(pos) {
+  return "".concat(pos.lat, "-").concat(pos.lng);
+}
+
 var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
   //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
   var baseTransform = '';
@@ -4488,8 +4562,13 @@ function MapMarkerWrapper(_a) {
     };
   }, []); //create / update object
 
+  var transition = useContext(MarkerAutoTransitionContext).transition;
   useEffect(function () {
     if (options) {
+      if (!Array.isArray(options.position)) {
+        options.position = transition(options.position);
+      }
+
       if (markerRef.current) {
         //console.log('update Marker')
         controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리
@@ -5892,4 +5971,4 @@ function MapCanvasMarkerWrapper(_props) {
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, CanvasMarker, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Status, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CanvasMarker, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MarkerAutoTransitionContext, MarkerAutoTransitionProvider, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Status, baseCenter, getClusterInfo, getMapOfType, log, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -16,6 +16,7 @@ var MapBuildingProjection = require('./components/mint-map/core/advanced/MapBuil
 var MapLoadingComponents = require('./components/mint-map/core/advanced/MapLoadingComponents.js');
 var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
 var MintMapProvider = require('./components/mint-map/core/provider/MintMapProvider.js');
+var MarkerAutoTransitionProvider = require('./components/mint-map/core/provider/MarkerAutoTransitionProvider.js');
 var animation = require('./components/mint-map/core/util/animation.js');
 var geo = require('./components/mint-map/core/util/geo.js');
 var waiting = require('./components/mint-map/core/util/waiting.js');
@@ -54,6 +55,9 @@ exports.PointLoading = MapLoadingComponents.PointLoading;
 exports.useMarkerMoving = MarkerMovingHook.useMarkerMoving;
 exports.MintMapProvider = MintMapProvider.MintMapProvider;
 exports.useMintMapController = MintMapProvider.useMintMapController;
+exports.MarkerAutoTransitionContext = MarkerAutoTransitionProvider.MarkerAutoTransitionContext;
+exports.MarkerAutoTransitionProvider = MarkerAutoTransitionProvider.MarkerAutoTransitionProvider;
+exports.baseCenter = MarkerAutoTransitionProvider.baseCenter;
 exports.AnimationPlayer = animation.AnimationPlayer;
 exports.GeoCalulator = geo.GeoCalulator;
 exports.waiting = waiting.waiting;

package/dist/index.umd.js

@@ -4287,6 +4287,80 @@
     return [start, stop, resume];
   }
 
+  var MarkerAutoTransitionContext = React.createContext({
+    option: {
+      sizeInMeter: 2,
+      type: 'diagonal'
+    },
+    transition: function (pos) {
+      return pos;
+    }
+  }); // provider
+
+  var baseCenter = new Position(37.504497373023206, 127.04896282498558);
+  function MarkerAutoTransitionProvider(_a) {
+    var children = _a.children,
+        _b = _a.sizeInMeter,
+        sizeInMeter = _b === void 0 ? 2 : _b,
+        _c = _a.type,
+        type = _c === void 0 ? 'diagonal' : _c;
+    var controller = useMintMapController();
+
+    var _d = React.useState(controller.getZoomLevel()),
+        zoom = _d[0],
+        setZoom = _d[1];
+
+    React.useEffect(function () {
+      var onZoomChanged = function () {
+        setZoom(controller.getZoomLevel());
+      };
+
+      controller.addEventListener('ZOOM_CHANGED', onZoomChanged);
+      return function () {
+        controller.removeEventListener('ZOOM_CHANGED', onZoomChanged);
+      };
+    }, []);
+    var calcSize = typeof sizeInMeter === 'number' ? sizeInMeter : sizeInMeter(controller.getZoomLevel());
+    var deltaLat = GeoCalulator.convertMeterToLatitudeValue(calcSize);
+    var offset1 = controller.positionToOffset(baseCenter);
+    var offset2 = controller.positionToOffset(new Position(baseCenter.lat + deltaLat, baseCenter.lng));
+    var deltaOffsetY = offset2.y - offset1.y;
+    var offset3 = new Offset(offset1.x + deltaOffsetY, offset2.y);
+    var deltaLng = baseCenter.lng - controller.offsetToPosition(offset3).lng;
+    var posMap = new Map();
+
+    var transition = function (pos) {
+      var key = positionToMapKey(pos);
+      var count = posMap.get(key);
+
+      if (count === undefined) {
+        count = 1;
+        posMap.set(key, count);
+        return pos;
+      } //type : diagonal
+
+
+      var newPos = new Position(pos.lat + count * deltaLat, pos.lng + count * deltaLng);
+      count += 1;
+      posMap.set(key, count);
+      return newPos;
+    };
+
+    return React__default["default"].createElement(MarkerAutoTransitionContext.Provider, {
+      value: {
+        option: {
+          sizeInMeter: sizeInMeter,
+          type: type
+        },
+        transition: transition
+      }
+    }, zoom && children);
+  }
+
+  function positionToMapKey(pos) {
+    return "".concat(pos.lat, "-").concat(pos.lng);
+  }
+
   var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
     //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
     var baseTransform = '';
@@ -4492,8 +4566,13 @@
       };
     }, []); //create / update object
 
+    var transition = React.useContext(MarkerAutoTransitionContext).transition;
     React.useEffect(function () {
       if (options) {
+        if (!Array.isArray(options.position)) {
+          options.position = transition(options.position);
+        }
+
         if (markerRef.current) {
           //console.log('update Marker')
           controller.updateMarker(markerRef.current, options); //disablePointerEvent 처리
@@ -5914,6 +5993,8 @@
   exports.MapPolylineWrapper = MapPolylineWrapper;
   exports.MapUIEvent = MapUIEvent;
   exports.Marker = Marker;
+  exports.MarkerAutoTransitionContext = MarkerAutoTransitionContext;
+  exports.MarkerAutoTransitionProvider = MarkerAutoTransitionProvider;
   exports.MintMap = MintMap;
   exports.MintMapCanvasRenderer = MintMapCanvasRenderer;
   exports.MintMapController = MintMapController;
@@ -5931,6 +6012,7 @@
   exports.SVGPolygon = SVGPolygon;
   exports.SVGRect = SVGRect;
   exports.Status = Status;
+  exports.baseCenter = baseCenter;
   exports.getClusterInfo = getClusterInfo;
   exports.getMapOfType = getMapOfType;
   exports.log = log;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.10.0-beta",
+  "version": "0.10.0-beta-test1",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",