@mint-ui/map 0.1.7-beta → 0.1.9-beta

package/dist/index.umd.js

@@ -43,6 +43,7 @@
     var onLoad = _a.onLoad,
         _b = _a.visible,
         visible = _b === void 0 ? true : _b,
+        base = _a.base,
         children = _a.children;
     var controller = useMintMapController();
     var elementRef = React.useRef(null);
@@ -80,6 +81,15 @@
         controller && controller.destroyMap();
       };
     }, [controller, elementRef]);
+    React.useEffect(function () {
+      if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+        var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
+
+        if (prevZoomLevel !== base.zoomLevel) {
+          controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+        }
+      }
+    }, [base]);
     return React__default["default"].createElement("div", {
       className: cn$2('mint-map-root'),
       style: {
@@ -153,22 +163,82 @@
       return false;
     };
 
+    PolygonCalculator.getIncludedPositions = function (polygon, position) {
+      var targets = Array.isArray(position) ? position : [position];
+      var result = [];
+      var maxX = Math.max.apply(Math, polygon.map(function (pos) {
+        return pos.lng;
+      })) + 1;
+      var lines = this.convertPolygonToLinePoints(polygon);
+
+      for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
+        var target = targets_1[_i];
+        var tempLine = this.convertPositionToPoints(target, new Position(target.lat, maxX));
+        var crossPoints = this.getCrossPointAll(lines, tempLine);
+
+        if (crossPoints.length > 0 && crossPoints.length % 2 != 0) {
+          result.push(target);
+        }
+      }
+
+      return result;
+    };
+
+    PolygonCalculator.convertPolygonToLinePoints = function (polygon) {
+      var lines = [];
+
+      for (var i = 0; i < polygon.length; i++) {
+        lines.push(this.convertPositionToPoints(polygon[i], polygon[i + 1 === polygon.length ? 0 : i + 1]));
+      }
+
+      return lines;
+    };
+
     PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
       return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
     };
 
-    PolygonCalculator.findCrossPoint = function (sr, tr) {
+    PolygonCalculator.getCrossPoint = function (sr, tr) {
+      var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2);
+
+      if (p1 != 0) {
+        var x = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.x1 - tr.x2) - (sr.x1 - sr.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+        var y = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+
+        if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0) {
+          return {
+            x: x,
+            y: y
+          };
+        }
+      }
+    };
+
+    PolygonCalculator.toFixedPosition = function (n) {
+      return Number(n.toFixed(15));
+    };
+
+    PolygonCalculator.getCrossPointAll = function (sr, tr) {
+      var result = [];
+
       for (var _i = 0, sr_1 = sr; _i < sr_1.length; _i++) {
         var tmp = sr_1[_i];
-        var p1 = (tmp.x1 - tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 - tr.x2);
+        var p = this.getCrossPoint(tmp, tr);
 
-        if (p1 != 0) {
-          var x = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.x1 - tr.x2) - (tmp.x1 - tmp.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
-          var y = ((tmp.x1 * tmp.y2 - tmp.y1 * tmp.x2) * (tr.y1 - tr.y2) - (tmp.y1 - tmp.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
+        if (p) {
+          result.push(p);
+        }
+      }
 
-          if ((x - tmp.x1) * (x - tmp.x2) <= 0 && (y - tmp.y1) * (y - tmp.y2) <= 0 && (x - tr.x1) * (x - tr.x2) <= 0 && (y - tr.y1) * (y - tr.y2) <= 0) {
-            return true;
-          }
+      return result;
+    };
+
+    PolygonCalculator.findCrossPoint = function (sr, tr) {
+      for (var _i = 0, sr_2 = sr; _i < sr_2.length; _i++) {
+        var tmp = sr_2[_i];
+
+        if (this.getCrossPoint(tmp, tr)) {
+          return true;
         }
       }
 
@@ -357,7 +427,7 @@
         });
       }).setClear(function (item) {
         item.setMap(null);
-      }).createPool(1000).setCheckLiveTimeInterval(1000);
+      }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
     };
 
     NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -670,14 +740,14 @@
         return tslib.__generator(this, function (_a) {
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
-              var map;
+              var options, maxZoom, minZoom, map;
 
               var _this = this;
 
-              var _a, _b;
+              var _a, _b, _c, _d;
 
-              return tslib.__generator(this, function (_c) {
-                switch (_c.label) {
+              return tslib.__generator(this, function (_e) {
+                switch (_e.label) {
                   case 0:
                     if (this.mapInitialized && this.map) {
                       if (this.map.getElement() === divElement) {
@@ -692,19 +762,37 @@
                     return [4, this.loadMapApi()];
 
                   case 1:
-                    _c.sent();
+                    _e.sent();
 
-                    _c.label = 2;
+                    _e.label = 2;
 
                   case 2:
-                    map = new naver.maps.Map(divElement, {
+                    options = {
                       center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                       zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
                       logoControl: false,
                       mapDataControl: false,
                       mapTypeControl: false,
                       scaleControl: false
-                    });
+                    };
+                    maxZoom = 21;
+                    minZoom = 6;
+
+                    if ((_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.maxZoomLevel) {
+                      maxZoom = this.getSafeZoomValue(this.mapProps.base.maxZoomLevel);
+                    }
+
+                    if ((_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.minZoomLevel) {
+                      minZoom = this.getSafeZoomValue(this.mapProps.base.minZoomLevel);
+                    }
+
+                    if (minZoom > maxZoom) {
+                      minZoom = 6;
+                    }
+
+                    options.minZoom = minZoom;
+                    options.maxZoom = maxZoom;
+                    map = new naver.maps.Map(divElement, options);
                     map.addListener('dragstart', function (e) {
                       _this.dragStartPoint[0] = e.domEvent.clientX;
                       _this.dragStartPoint[1] = e.domEvent.clientY;
@@ -715,12 +803,12 @@
                       } else {
                         _this.dragged = true;
                       }
-
+                    });
+                    map.addListener('idle', function () {
                       _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                     });
                     map.addListener('zoom_changed', function () {
                       _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                      _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                     });
                     map.addListener('click', function (e) {
                       console.log('map click', e);
@@ -742,6 +830,16 @@
       });
     };
 
+    NaverMintMapController.prototype.getSafeZoomValue = function (value) {
+      if (value > 21) {
+        return 21;
+      } else if (value < 6) {
+        return 6;
+      }
+
+      return value;
+    };
+
     NaverMintMapController.prototype.destroyMap = function () {
       var _a;
 
@@ -778,6 +876,12 @@
       return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
     };
 
+    NaverMintMapController.prototype.setZoomLevel = function (zoom) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
+    };
+
     return NaverMintMapController;
   }(MintMapController);
 
@@ -1113,10 +1217,10 @@
 
               var _this = this;
 
-              var _a, _b;
+              var _a, _b, _c, _d;
 
-              return tslib.__generator(this, function (_c) {
-                switch (_c.label) {
+              return tslib.__generator(this, function (_e) {
+                switch (_e.label) {
                   case 0:
                     if (this.mapInitialized && this.map) {
                       if (this.map.getDiv() === divElement) {
@@ -1129,22 +1233,27 @@
                     return [4, this.loadMapApi()];
 
                   case 1:
-                    _c.sent();
+                    _e.sent();
 
-                    _c.label = 2;
+                    _e.label = 2;
 
                   case 2:
                     map = new google.maps.Map(divElement, {
                       mapId: this.mapProps.mapId,
                       center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
-                      maxZoom: 21,
-                      minZoom: 1,
-                      zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
+                      maxZoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.maxZoomLevel,
+                      minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
+                      zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
+                      disableDefaultUI: true,
+                      gestureHandling: 'greedy'
                     });
                     map.addListener('dragend', function () {
                       console.log('map dragend');
                       _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                     });
+                    map.addListener('idle', function () {
+                      _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                    });
                     map.addListener('zoom_changed', function () {
                       console.log('zoom_changed');
                       _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
@@ -1199,6 +1308,12 @@
       return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
     };
 
+    GoogleMintMapController.prototype.setZoomLevel = function (zoom) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
+    };
+
     return GoogleMintMapController;
   }(MintMapController);
 
@@ -1253,10 +1368,26 @@
       return new Position(this.nw.lat + (this.se.lat - this.nw.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
     };
 
-    Bounds.prototype.includes = function (positions) {
+    Bounds.prototype.getIncludedPositions = function (positions) {
+      var result = [];
+
       for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
         var pos = positions_1[_i];
 
+        if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
+          result.push(pos);
+        }
+      }
+
+      return result;
+    };
+
+    Bounds.prototype.includes = function (positions) {
+      positions = Array.isArray(positions) ? positions : [positions];
+
+      for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+        var pos = positions_2[_i];
+
         if (this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng) {
           return false;
         }
@@ -1266,8 +1397,8 @@
     };
 
     Bounds.prototype.includesOnlyOnePoint = function (positions) {
-      for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
-        var pos = positions_2[_i];
+      for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
+        var pos = positions_3[_i];
 
         if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
           return true;
@@ -1349,23 +1480,36 @@
     return Polygon;
   }(Drawable);
   var cn$1 = classNames__default["default"].bind(styles$2);
+  var DEFAULT_CENTER = {
+    lat: 37.5036845,
+    lng: 127.0448698
+  };
   function MintMap(_a) {
     var mapType = _a.mapType,
         children = _a.children,
-        props = tslib.__rest(_a, ["mapType", "children"]);
+        _b = _a.base,
+        base = _b === void 0 ? {
+      center: DEFAULT_CENTER,
+      zoomLevel: 12
+    } : _b,
+        props = tslib.__rest(_a, ["mapType", "children", "base"]);
 
-    var _b = React.useState(),
-        controller = _b[0],
-        setController = _b[1];
+    var _c = React.useState(),
+        controller = _c[0],
+        setController = _c[1];
 
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
         setController(undefined);
-        var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign({
+        var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
           mapType: mapType
-        }, props)) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign({
+        }, props), {
+          base: base
+        })) : mapType === 'google' ? new GoogleMintMapController(tslib.__assign(tslib.__assign({
           mapType: mapType
-        }, props)) : null;
+        }, props), {
+          base: base
+        })) : null;
 
         if (newController_1) {
           newController_1.loadMapApi().then(function () {
@@ -1382,7 +1526,9 @@
       controller: controller
     }, React__default["default"].createElement(MintMapCore, tslib.__assign({
       mapType: mapType
-    }, props), children)) : React__default["default"].createElement(PointLoading, {
+    }, props, {
+      base: base
+    }), children)) : React__default["default"].createElement(PointLoading, {
       text: "Loading"
     }));
   }
@@ -1722,7 +1868,7 @@
             divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
 
             if (markerRef.current) {
-              console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+              controller.clearDrawable(markerRef.current);
             }
 
             divCloneRef.current = undefined;
@@ -1735,7 +1881,7 @@
           divElement.removeEventListener('mouseover', onMouseOverHandler);
 
           if (markerRef.current) {
-            console.log('drawable cleared', controller.clearDrawable(markerRef.current));
+            controller.clearDrawable(markerRef.current);
           }
         }
       };
@@ -1743,11 +1889,9 @@
     React.useEffect(function () {
       if (options) {
         if (markerRef.current) {
-          console.log('update Marker');
           controller.updateMarker(markerRef.current, options);
           offsetCalibration(controller.getMapType(), divElement, options);
         } else {
-          console.log('create Marker');
           markerRef.current = new Marker(options);
           markerRef.current.element = divElement;
           controller.createMarker(markerRef.current);

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "@mint-ui/map",
-  "version": "0.1.7-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"],
-  "license": "MIT",
-  "private": false,
-  "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.2",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-interactions": "^6.5.7",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.7",
-    "@storybook/manager-webpack5": "^6.5.7",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.7",
-    "@storybook/testing-library": "^0.0.11",
-    "@types/classnames": "^2.3.1",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.9",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-react-icons": "^0.1.1",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-storybook": "^0.5.12",
-    "postcss": "^8.4.14",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "rollup": "^2.75.5",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.52.2",
-    "sass-loader": "^13.0.0",
-    "shx": "^0.3.4",
-    "style-loader": "^3.3.1",
-    "typescript": "^4.7.3"
-  },
-  "dependencies": {
-    "@types/google.maps": "^3.50.5",
-    "@types/navermaps": "^3.6.1",
-    "@mint-ui/tools":"1.0.3",
-    "axios": "^1.2.0",
-    "classnames": "^2.3.1",
-    "style-inject": "^0.3.0",
-    "uuid": "^9.0.0",
-    "xml-js": "^1.6.11"
-  },
-  "scripts": {
-    "storybook": "start-storybook -p 3000",
-    "build-storybook": "build-storybook",
-    "prebuild": "shx rm -rf ./dist",
-    "build": "rollup -c",
-    "postbuild": "shx rm -rf ./dist/dist"
-  }
-}
+{
+  "name": "@mint-ui/map",
+  "version": "0.1.9-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"],
+  "license": "MIT",
+  "private": false,
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@storybook/addon-actions": "^6.5.7",
+    "@storybook/addon-essentials": "^6.5.7",
+    "@storybook/addon-interactions": "^6.5.7",
+    "@storybook/addon-links": "^6.5.7",
+    "@storybook/builder-webpack5": "^6.5.7",
+    "@storybook/manager-webpack5": "^6.5.7",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.7",
+    "@storybook/testing-library": "^0.0.11",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.9",
+    "@types/uuid": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "babel-loader": "^8.2.5",
+    "babel-plugin-react-icons": "^0.1.1",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-storybook": "^0.5.12",
+    "postcss": "^8.4.14",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rollup": "^2.75.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.52.2",
+    "sass-loader": "^13.0.0",
+    "shx": "^0.3.4",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.3"
+  },
+  "dependencies": {
+    "@types/google.maps": "^3.50.5",
+    "@types/navermaps": "^3.6.1",
+    "@mint-ui/tools":"1.0.3",
+    "axios": "^1.2.0",
+    "classnames": "^2.3.1",
+    "style-inject": "^0.3.0",
+    "uuid": "^9.0.0",
+    "xml-js": "^1.6.11"
+  },
+  "scripts": {
+    "storybook": "start-storybook -p 3000",
+    "build-storybook": "build-storybook",
+    "prebuild": "shx rm -rf ./dist",
+    "build": "rollup -c",
+    "postbuild": "shx rm -rf ./dist/dist"
+  }
+}

package/test.ts

@@ -1,7 +1,7 @@
-const aa = [1,2,3]
-
-aa.push = new Proxy(aa.push, {
-  apply(target, thisArg, argArray) {
-    
-  },
+const aa = [1,2,3]
+
+aa.push = new Proxy(aa.push, {
+  apply(target, thisArg, argArray) {
+    
+  },
 })