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

package/dist/index.umd.js

@@ -45,13 +45,15 @@
         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 = React.useRef(null);
 
-    var _c = React.useState(false),
-        mapInitialized = _c[0],
-        setMapInitialized = _c[1];
+    var _d = React.useState(false),
+        mapInitialized = _d[0],
+        setMapInitialized = _d[1];
 
     React.useEffect(function () {
       (function () {
@@ -96,7 +98,7 @@
         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]);
@@ -346,12 +348,43 @@
       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 tslib.__awaiter(this, void 0, void 0, function () {
         return tslib.__generator(this, function (_a) {
           return [2, new Promise(function (resolve) {
             if (id && document.getElementById(id)) {
-              console.log("already loaded script => ".concat(id));
               resolve();
               return;
             }
@@ -651,7 +684,6 @@
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragStartPoint = [0, 0];
       _this.dragged = false;
-      console.log("".concat(_this.type, " controller loadded"));
       return _this;
     }
 
@@ -937,7 +969,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
-          return [2, new Promise(function (resolve) {
+          return [2, new Promise(function (resolve, error) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var callbackName, loaded, params, ok;
               return tslib.__generator(this, function (_a) {
@@ -947,7 +979,6 @@
                     loaded = false;
 
                     window[callbackName] = function () {
-                      console.log('naver api loaded');
                       loaded = true;
                       delete window[callbackName];
                     };
@@ -970,12 +1001,11 @@
                     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];
                 }
               });
@@ -990,6 +1020,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
@@ -1082,7 +1113,6 @@
                     });
                     this.mapInitialized = true;
                     this.initMarkerPool();
-                    console.log("".concat(this.type, " map script initialized"), divElement);
                     resolve(map);
                     map.trigger('idle');
                     return [2];
@@ -1113,8 +1143,6 @@
       } catch (e) {
         console.log('naver map destroy error', e);
       }
-
-      console.log("".concat(this.type, " map destroyed"));
     };
 
     NaverMintMapController.prototype.getCurrBounds = function () {
@@ -1180,11 +1208,8 @@
         } 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;
     }
 
@@ -1480,7 +1505,6 @@
                     loaded = false;
 
                     window[callbackName] = function () {
-                      console.log('google api loaded');
                       loaded = true;
                       delete window[callbackName];
                     };
@@ -1509,7 +1533,6 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    console.log("".concat(this.type, " map script api loaded"));
                     return [2];
                 }
               });
@@ -1524,6 +1547,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var map;
@@ -1584,7 +1608,6 @@
                       _this.mapProps.onMouseMove(pos);
                     });
                     this.mapInitialized = true;
-                    console.log("".concat(this.type, " map script initialized"), divElement);
                     resolve(map);
                     return [2];
                 }
@@ -1659,7 +1682,6 @@
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragStartPoint = [0, 0];
       _this.dragged = false;
-      console.log("".concat(_this.type, " controller loadded"));
       return _this;
     }
 
@@ -1977,7 +1999,6 @@
 
                     this.mapApiLoaded = true;
                     resolve(true);
-                    console.log("".concat(this.type, " map script loaded"));
                     return [2];
                 }
               });
@@ -1992,6 +2013,7 @@
         var _this = this;
 
         return tslib.__generator(this, function (_a) {
+          this.mapDivElement = divElement;
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var options, maxZoom, minZoom, map;
@@ -2069,7 +2091,6 @@
                     });
                     this.mapInitialized = true;
                     this.initMarkerPool();
-                    console.log("".concat(this.type, " map script initialized"), divElement);
                     resolve(map);
                     return [2];
                 }
@@ -2100,8 +2121,6 @@
       } catch (e) {
         console.log('kakao map destroy error', e);
       }
-
-      console.log("".concat(this.type, " map destroyed"));
     };
 
     KakaoMintMapController.prototype.getCurrBounds = function () {
@@ -2426,6 +2445,14 @@
     }, "".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;
@@ -3201,18 +3228,281 @@
     return React__default["default"].createElement(React__default["default"].Fragment, null, options && children);
   }
 
+  var console$1 = {
+    log: function () {
+    }
+  };
+  function MapCanvasWrapper(_a) {
+    var children = _a.children;
+        tslib.__rest(_a, ["children"]);
+    var controller = useMintMapController();
+
+    var _b = React.useState(false),
+        renderFlag = _b[0],
+        setRenderFlag = _b[1];
+
+    var invokeRender = React.useCallback(function () {
+      setRenderFlag(!renderFlag);
+    }, []);
+    var renderer = React.useRef();
+    var containerRef = React.useRef(null);
+    var canvasRef = React.useRef(null);
+    var contextRef = React.useRef();
+    var clearRect = React.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 = React.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 = React.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 = React.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;
+    }, []);
+    React.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 = React.useRef([]);
+    var renderItemsOnView = React.useRef([]);
+    var renderItemsMouseOverStatus = React.useRef(new Set());
+    React.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 = React.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__default["default"].createElement("div", {
+      ref: containerRef,
+      style: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+        zIndex: 2,
+        pointerEvents: 'none'
+      }
+    }, React__default["default"].createElement("canvas", {
+      ref: canvasRef,
+      style: {
+        pointerEvents: 'revert-layer'
+      }
+    }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
+  }
+
+  function MapCanvasMarkerWrapper(_props) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null);
+  }
+
   exports.AnimationPlayer = AnimationPlayer;
   exports.Bounds = Bounds;
   exports.Drawable = Drawable;
   exports.GeoCalulator = GeoCalulator;
   exports.GoogleMintMapController = GoogleMintMapController;
   exports.MapBuildingProjection = MapBuildingProjection;
+  exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
+  exports.MapCanvasWrapper = MapCanvasWrapper;
   exports.MapControlWrapper = MapControlWrapper;
   exports.MapMarkerWrapper = MapMarkerWrapper;
   exports.MapPolygonWrapper = MapPolygonWrapper;
   exports.MapPolylineWrapper = MapPolylineWrapper;
   exports.Marker = Marker;
   exports.MintMap = MintMap;
+  exports.MintMapCanvasRenderer = MintMapCanvasRenderer;
   exports.MintMapController = MintMapController;
   exports.MintMapCore = MintMapCore;
   exports.MintMapProvider = MintMapProvider;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.4.0-beta",
+  "version": "0.4.2-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",
   "types": "./dist/index.d.ts",
   "repository": "https://github.com/dev-rsquare/mint-ui-map",
   "author": "RSQUARE",
-  "keywords": ["react", "map", "google", "naver", "library", "typescript"],
+  "keywords": ["react", "react map", "map", "google", "naver", "kakao", "library", "typescript", "canvas", "marker"],
   "license": "MIT",
   "private": false,
   "devDependencies": {