@mint-ui/map 0.4.0-beta → 0.4.2-beta

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } from 'tslib';
-import React, { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
 import { ObjectPool } from '@mint-ui/tools';
@@ -40,13 +40,15 @@ function MintMapCore(_a) {
       visible = _b === void 0 ? true : _b,
       zoomLevel = _a.zoomLevel,
       center = _a.center,
+      _c = _a.centerMoveWithPanning,
+      centerMoveWithPanning = _c === void 0 ? false : _c,
       children = _a.children;
   var controller = useMintMapController();
   var elementRef = useRef(null);
 
-  var _c = useState(false),
-      mapInitialized = _c[0],
-      setMapInitialized = _c[1];
+  var _d = useState(false),
+      mapInitialized = _d[0],
+      setMapInitialized = _d[1];
 
   useEffect(function () {
     (function () {
@@ -91,7 +93,7 @@ function MintMapCore(_a) {
       var prevCenter = controller.getCenter();
 
       if (!Position.equals(prevCenter, center)) {
-        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+        centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
       }
     }
   }, [center]);
@@ -341,12 +343,43 @@ var MintMapController = function () {
     return this.type;
   };
 
+  MintMapController.prototype.positionToOffset = function (position) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var x = w * (position.lng - minLng) / lng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var y = h * (maxLat - position.lat) / lat;
+    return new Offset(x, y);
+  };
+
+  MintMapController.prototype.offsetToPosition = function (offset) {
+    var div = this.mapDivElement;
+    var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
+    var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
+    var bounds = this.getCurrBounds();
+    var maxLng = bounds.ne.lng;
+    var minLng = bounds.sw.lng;
+    var lng = Math.abs(maxLng - minLng);
+    var lngVal = offset.x * lng / w + minLng;
+    var maxLat = bounds.ne.lat;
+    var minLat = bounds.sw.lat;
+    var lat = Math.abs(maxLat - minLat);
+    var latVal = (offset.y * lat / h - maxLat) * -1;
+    return new Position(latVal, lngVal);
+  };
+
   MintMapController.prototype.loadScript = function (url, id) {
     return __awaiter(this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         return [2, new Promise(function (resolve) {
           if (id && document.getElementById(id)) {
-            console.log("already loaded script => ".concat(id));
             resolve();
             return;
           }
@@ -646,7 +679,6 @@ var NaverMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -932,7 +964,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2, new Promise(function (resolve, error) {
           return __awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, ok;
             return __generator(this, function (_a) {
@@ -942,7 +974,6 @@ var NaverMintMapController = function (_super) {
                   loaded = false;
 
                   window[callbackName] = function () {
-                    console.log('naver api loaded');
                     loaded = true;
                     delete window[callbackName];
                   };
@@ -965,12 +996,11 @@ var NaverMintMapController = function (_super) {
                   ok = _a.sent();
 
                   if (!ok) {
-                    throw new Error('naver script api load failed!!');
+                    error('naver script api load failed!!');
                   }
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script loaded"));
                   return [2];
               }
             });
@@ -985,6 +1015,7 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -1077,7 +1108,6 @@ var NaverMintMapController = function (_super) {
                   });
                   this.mapInitialized = true;
                   this.initMarkerPool();
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   map.trigger('idle');
                   return [2];
@@ -1108,8 +1138,6 @@ var NaverMintMapController = function (_super) {
     } catch (e) {
       console.log('naver map destroy error', e);
     }
-
-    console.log("".concat(this.type, " map destroyed"));
   };
 
   NaverMintMapController.prototype.getCurrBounds = function () {
@@ -1175,11 +1203,8 @@ var GoogleMintMapController = function (_super) {
       } catch (e) {
         console.log('google map destroy error', e);
       }
-
-      console.log("".concat(_this.type, " map destroyed"));
     };
 
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -1475,7 +1500,6 @@ var GoogleMintMapController = function (_super) {
                   loaded = false;
 
                   window[callbackName] = function () {
-                    console.log('google api loaded');
                     loaded = true;
                     delete window[callbackName];
                   };
@@ -1504,7 +1528,6 @@ var GoogleMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script api loaded"));
                   return [2];
               }
             });
@@ -1519,6 +1542,7 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var map;
@@ -1579,7 +1603,6 @@ var GoogleMintMapController = function (_super) {
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
               }
@@ -1654,7 +1677,6 @@ var KakaoMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    console.log("".concat(_this.type, " controller loadded"));
     return _this;
   }
 
@@ -1972,7 +1994,6 @@ var KakaoMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  console.log("".concat(this.type, " map script loaded"));
                   return [2];
               }
             });
@@ -1987,6 +2008,7 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return __generator(this, function (_a) {
+        this.mapDivElement = divElement;
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
@@ -2064,7 +2086,6 @@ var KakaoMintMapController = function (_super) {
                   });
                   this.mapInitialized = true;
                   this.initMarkerPool();
-                  console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
               }
@@ -2095,8 +2116,6 @@ var KakaoMintMapController = function (_super) {
     } catch (e) {
       console.log('kakao map destroy error', e);
     }
-
-    console.log("".concat(this.type, " map destroyed"));
   };
 
   KakaoMintMapController.prototype.getCurrBounds = function () {
@@ -2421,6 +2440,14 @@ function PointLoading(_a) {
   }, "".concat(text, " ").concat(pointString)));
 }
 
+var MintMapCanvasRenderer = function () {
+  function MintMapCanvasRenderer(context) {
+    this.context = context;
+  }
+
+  return MintMapCanvasRenderer;
+}();
+
 var AnimationPlayer = function () {
   function AnimationPlayer(drawFunction, fps) {
     this.prevtime = 0;
@@ -3196,4 +3223,264 @@ function MapPolylineWrapper(_a) {
   return React.createElement(React.Fragment, null, options && children);
 }
 
-export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+var console$1 = {
+  log: function () {
+  }
+};
+function MapCanvasWrapper(_a) {
+  var children = _a.children;
+      __rest(_a, ["children"]);
+  var controller = useMintMapController();
+
+  var _b = useState(false),
+      renderFlag = _b[0],
+      setRenderFlag = _b[1];
+
+  var invokeRender = useCallback(function () {
+    setRenderFlag(!renderFlag);
+  }, []);
+  var renderer = useRef();
+  var containerRef = useRef(null);
+  var canvasRef = useRef(null);
+  var contextRef = useRef();
+  var clearRect = useCallback(function () {
+    if (contextRef.current && canvasRef.current) {
+      contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
+    }
+
+    return true;
+  }, []);
+  var scaleCanvas = useCallback(function (containerRef, canvasElement, canvasContext) {
+    var devicePixelRatio = window.devicePixelRatio;
+    var width = containerRef.offsetWidth;
+    var height = containerRef.offsetHeight;
+    canvasElement.width = width * devicePixelRatio;
+    canvasElement.height = height * devicePixelRatio;
+    canvasElement.style.width = "".concat(width, "px");
+    canvasElement.style.height = "".concat(height, "px");
+    canvasContext.scale(devicePixelRatio, devicePixelRatio);
+  }, []);
+  var parseClickParamToPosition = useCallback(function (mapType, e) {
+    var latlng = e.latlng || e.latLng;
+
+    if (!latlng) {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
+    }
+
+    var clickPosition = new Position(0, 0);
+
+    if (mapType === 'naver') {
+      clickPosition.lat = latlng._lat;
+      clickPosition.lng = latlng._lng;
+    } else if (mapType === 'google') {
+      clickPosition.lat = latlng.lat();
+      clickPosition.lng = latlng.lng();
+    } else if (mapType === 'kakao') {
+      clickPosition.lat = latlng.Ma;
+      clickPosition.lng = latlng.La;
+    } else {
+      throw new Error("Map Type ".concat(mapType, " canvas marker click not supported"));
+    }
+
+    return clickPosition;
+  }, []);
+
+  var includes = function (point, targetPoint, width, height) {
+    if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var processMouseEvent = useCallback(function (clickedOffset, eventName) {
+    var items = renderItemsOnView.current;
+    var hitSet = new Set();
+
+    for (var i = items.length - 1; i >= 0; i--) {
+      var item = items[i];
+
+      if (item.visible === undefined || item.visible) {
+        var event_1 = item[eventName];
+
+        if (!event_1) {
+          continue;
+        }
+
+        var pos = item.position;
+
+        if (pos && !pos.offset) {
+          pos.offset = controller.positionToOffset(pos);
+        }
+
+        if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
+          continue;
+        }
+
+        event_1(clickedOffset);
+        hitSet.add(item);
+        break;
+      }
+    }
+
+    return hitSet;
+  }, []);
+  useEffect(function () {
+    var resizeObserver;
+
+    if (canvasRef.current && containerRef.current) {
+      resizeObserver = new ResizeObserver(function (entries) {
+        var elem = entries[0];
+        canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
+        renderMain();
+      });
+      resizeObserver.observe(containerRef.current);
+      var map = controller.getMap();
+
+      if (map) {
+        map.addListener('zooming', function () {
+          clearRect();
+        });
+        map.addListener('zoom_start', function () {
+          clearRect();
+        });
+        map.addListener('center_changed', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = 'hidden';
+          }
+        });
+        map.addListener('idle', function () {
+
+          if (containerRef.current) {
+            containerRef.current.style.visibility = '';
+          }
+
+          clearRect();
+          invokeRender();
+        });
+        map.addListener('mousemove', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
+          renderItemsMouseOverStatus.current.forEach(function (item) {
+            if (!hitSet.has(item)) {
+              item.onMouseOut && item.onMouseOut(clickedOffset);
+            }
+          });
+          renderItemsMouseOverStatus.current = hitSet;
+        });
+        map.addListener('click', function (e) {
+          var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
+          var clickedOffset = controller.positionToOffset(clickPosition);
+          processMouseEvent(clickedOffset, 'onClick');
+        });
+      }
+
+      contextRef.current = canvasRef.current.getContext('2d');
+
+      if (contextRef.current) {
+        scaleCanvas(containerRef.current, canvasRef.current, contextRef.current);
+        renderer.current = new MintMapCanvasRenderer(contextRef.current);
+      }
+    }
+
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  var renderItems = useRef([]);
+  var renderItemsOnView = useRef([]);
+  var renderItemsMouseOverStatus = useRef(new Set());
+  useEffect(function () {
+    renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+      return item.props;
+    });
+    var zIndexList = [];
+    var undefinedList = [];
+
+    for (var _i = 0, _a = renderItems.current; _i < _a.length; _i++) {
+      var item = _a[_i];
+
+      if (item.zIndex !== undefined) {
+        zIndexList.push(item);
+      } else {
+        undefinedList.push(item);
+      }
+    }
+
+    renderItems.current = undefinedList;
+    zIndexList.sort(function (a, b) {
+      return a > b ? 1 : -1;
+    }).forEach(function (item) {
+      renderItems.current.push(item);
+    });
+  }, [children]);
+  var renderMain = useCallback(function () {
+    var ctx = contextRef.current;
+    var container = containerRef.current;
+
+    if (!ctx || !container || !renderer.current) {
+      return;
+    }
+
+    clearRect();
+    var t = new Date().getTime();
+    var items = renderItems.current;
+    renderItemsOnView.current.length = 0;
+    var newSet = new Set();
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i];
+
+      if (item.visible === undefined || item.visible) {
+        var pos = item.position;
+        pos.offset = controller.positionToOffset(pos);
+
+        if (item.anchor) {
+          pos.offset.x += item.anchor.x;
+          pos.offset.y += item.anchor.y;
+        }
+
+        console$1.log('canvas marker', pos.offset);
+
+        if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
+          continue;
+        }
+
+        item.renderer(renderer.current, pos.offset, item.payload);
+        renderItemsOnView.current.push(item);
+        newSet.add(item);
+      }
+    }
+
+    renderItemsMouseOverStatus.current.forEach(function (item) {
+      if (!newSet.has(item)) {
+        renderItemsMouseOverStatus.current.delete(item);
+      }
+    });
+    console$1.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
+  }, []);
+  renderMain();
+  return React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      zIndex: 2,
+      pointerEvents: 'none'
+    }
+  }, React.createElement("canvas", {
+    ref: canvasRef,
+    style: {
+      pointerEvents: 'revert-layer'
+    }
+  }), renderFlag && React.createElement(React.Fragment, null));
+}
+
+function MapCanvasMarkerWrapper(_props) {
+  return React.createElement(React.Fragment, null);
+}
+
+export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var MintMap = require('./components/mint-map/MintMap.js');
 var MintMapCore = require('./components/mint-map/core/MintMapCore.js');
 var MintMapController = require('./components/mint-map/core/MintMapController.js');
+var MintMapCanvasRenderer = require('./components/mint-map/core/MintMapCanvasRenderer.js');
 var MapBuildingProjection = require('./components/mint-map/core/advanced/MapBuildingProjection.js');
 var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
 var MintMapProvider = require('./components/mint-map/core/provider/MintMapProvider.js');
@@ -16,6 +17,8 @@ var MapControlWrapper = require('./components/mint-map/core/wrapper/MapControlWr
 var MapMarkerWrapper = require('./components/mint-map/core/wrapper/MapMarkerWrapper.js');
 var MapPolygonWrapper = require('./components/mint-map/core/wrapper/MapPolygonWrapper.js');
 var MapPolylineWrapper = require('./components/mint-map/core/wrapper/MapPolylineWrapper.js');
+var MapCanvasWrapper = require('./components/mint-map/core/wrapper/MapCanvasWrapper.js');
+var MapCanvasMarkerWrapper = require('./components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js');
 var NaverMintMapController = require('./components/mint-map/naver/NaverMintMapController.js');
 var GoogleMintMapController = require('./components/mint-map/google/GoogleMintMapController.js');
 
@@ -31,6 +34,7 @@ exports.Polyline = MintMap.Polyline;
 exports.Position = MintMap.Position;
 exports.MintMapCore = MintMapCore.MintMapCore;
 exports.MintMapController = MintMapController.MintMapController;
+exports.MintMapCanvasRenderer = MintMapCanvasRenderer.MintMapCanvasRenderer;
 exports.MapBuildingProjection = MapBuildingProjection.MapBuildingProjection;
 exports.useMarkerMoving = MarkerMovingHook.useMarkerMoving;
 exports.MintMapProvider = MintMapProvider.MintMapProvider;
@@ -44,5 +48,7 @@ exports.MapControlWrapper = MapControlWrapper.MapControlWrapper;
 exports.MapMarkerWrapper = MapMarkerWrapper.MapMarkerWrapper;
 exports.MapPolygonWrapper = MapPolygonWrapper.MapPolygonWrapper;
 exports.MapPolylineWrapper = MapPolylineWrapper.MapPolylineWrapper;
+exports.MapCanvasWrapper = MapCanvasWrapper.MapCanvasWrapper;
+exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper.MapCanvasMarkerWrapper;
 exports.NaverMintMapController = NaverMintMapController.NaverMintMapController;
 exports.GoogleMintMapController = GoogleMintMapController.GoogleMintMapController;