@mint-ui/map 0.5.10-beta → 0.5.12-beta

package/dist/index.umd.js

@@ -596,7 +596,7 @@
     };
 
     Bounds.prototype.intersects = function (positions) {
-      return PolygonCalculator.intersects([this.nw, this.se], positions);
+      return PolygonCalculator.intersects([this.nw, this.sw, this.se, this.ne, this.nw], positions);
     };
 
     return Bounds;
@@ -3729,7 +3729,8 @@
       pointerEvents: "none",
       width: boxSize,
       height: boxSize,
-      viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+      viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize),
+      overflow: 'visible'
     }, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
       pointerEvents: "visiblepainted",
       cx: radius,
@@ -3748,6 +3749,86 @@
     }, children));
   }
 
+  var Drawable =
+  /** @class */
+  function () {
+    function Drawable() {}
+
+    return Drawable;
+  }();
+
+  var Marker =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Marker, _super);
+    /**
+     * 지도에 표시할 마커정보
+     */
+
+
+    function Marker(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Marker;
+  }(Drawable);
+
+  var Polyline =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polyline, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polyline(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+
+    return Polyline;
+  }(Drawable);
+
+  var Polygon =
+  /** @class */
+  function (_super) {
+    tslib.__extends(Polygon, _super);
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+
+
+    function Polygon(options) {
+      var _this = _super.call(this) || this;
+
+      _this.options = options;
+      return _this;
+    }
+    /**
+     * 폴리곤의 중점을 구한다.
+     */
+
+
+    Polygon.prototype.getCenter = function () {
+      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+        var paths = this.options.position.map(function (elem) {
+          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
+        });
+        return PolygonCalculator.getCenter(paths);
+      }
+
+      throw new Error('center 를 찾을 수 없습니다.');
+    };
+
+    return Polygon;
+  }(Drawable);
+
   function SVGPolygon(_a) {
     var path = _a.path,
         _b = _a.innerPath,
@@ -3802,39 +3883,33 @@
         containerHeight: height
       };
     }, []);
-    var getD = React.useCallback(function (_a) {
-      var path = _a.path,
-          containerLeft = _a.containerLeft,
-          containerTop = _a.containerTop,
-          mode = _a.mode;
-      var left = containerLeft;
-      var top = containerTop;
+    var getD = React.useCallback(function (path, innerPath, mode) {
       var isPolygon = mode === 'POLYGON';
       var out = ''; //path
 
-      out += getLine(path, left, top, isPolygon); //inner path
+      out += getLine(path, isPolygon); //inner path
 
       for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
         var inner = innerPath_1[_i];
-        out += ' ' + getLine(inner, left, top, isPolygon);
+        out += ' ' + getLine(inner, isPolygon);
       }
 
       return out;
     }, []);
-    var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
+    var getLine = React.useCallback(function (path, isPolygon) {
       return path.map(function (offset, idx) {
         if (idx === 0) {
-          return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "M ".concat(offset.x, ",").concat(offset.y);
         } else if (idx === 1) {
-          return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+          return "L ".concat(offset.x, ",").concat(offset.y);
         } else {
           if (offset.equals(path[idx - 1])) {
             return '';
           } else {
-            return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
+            return "".concat(offset.x, ",").concat(offset.y);
           }
         }
-      }).join(' ') + " ".concat(closePath ? 'Z' : '');
+      }).join(' ') + " ".concat(isPolygon ? 'Z' : "".concat(path[0].x, ",").concat(path[0].y));
     }, []);
 
     var _g = React.useState(0),
@@ -3849,28 +3924,26 @@
         d = _j[0],
         setD = _j[1];
 
+    var _k = React.useState(new Offset(0, 0)),
+        polygonAreaInfo = _k[0],
+        setPolygonAreaInfo = _k[1];
+
     React.useEffect(function () {
       var info = getPolygonInfo(path);
+      setPolygonAreaInfo(new Offset(Math.round(info.containerLeft), Math.round(info.containerTop)));
       setWidth(Math.round(info.containerWidth));
       setHeight(Math.round(info.containerHeight));
-      setD(getD(tslib.__assign(tslib.__assign({}, info), {
-        path: path,
-        innerPath: innerPath,
-        mode: mode
-      })));
-    }, [path, innerPath]);
+      setD(getD(path, innerPath, mode));
+    }, [path, innerPath, mode]);
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
       pointerEvents: "none",
+      overflow: 'visible',
       width: width,
       height: height,
-      viewBox: "0 0 ".concat(width, " ").concat(height)
+      viewBox: "".concat(polygonAreaInfo.x, " ").concat(polygonAreaInfo.y, " ").concat(width, " ").concat(height)
     }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
       fillRule: "evenodd",
       pointerEvents: "visiblepainted",
-      x: "0",
-      y: "0",
-      width: width,
-      height: height,
       fill: mode === 'POLYLINE' ? 'none' : background,
       stroke: mode === 'POLYLINE' ? 'black' : 'green',
       strokeLinejoin: "miter",
@@ -3916,7 +3989,8 @@
       pointerEvents: "none",
       width: width,
       height: height,
-      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
+      viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight),
+      overflow: 'visible'
     }, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
       pointerEvents: "visiblepainted",
       x: "0",
@@ -3936,86 +4010,6 @@
     }, children));
   }
 
-  var Drawable =
-  /** @class */
-  function () {
-    function Drawable() {}
-
-    return Drawable;
-  }();
-
-  var Marker =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
-     */
-
-
-    function Marker(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Marker;
-  }(Drawable);
-
-  var Polyline =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polyline(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-
-    return Polyline;
-  }(Drawable);
-
-  var Polygon =
-  /** @class */
-  function (_super) {
-    tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
-     */
-
-
-    function Polygon(options) {
-      var _this = _super.call(this) || this;
-
-      _this.options = options;
-      return _this;
-    }
-    /**
-     * 폴리곤의 중점을 구한다.
-     */
-
-
-    Polygon.prototype.getCenter = function () {
-      if (Array.isArray(this.options.position) && this.options.position.length > 0) {
-        var paths = this.options.position.map(function (elem) {
-          return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
-        });
-        return PolygonCalculator.getCenter(paths);
-      }
-
-      throw new Error('center 를 찾을 수 없습니다.');
-    };
-
-    return Polygon;
-  }(Drawable);
-
   function nextIndex(array, currIdx) {
     var next = currIdx + 1;
 
@@ -4359,6 +4353,7 @@
         _f = _a.visible,
         visible = _f === void 0 ? true : _f,
         zIndex = _a.zIndex,
+        debug = _a.debug,
         debugLabel = _a.debugLabel; //controller
 
     var controller = useMintMapController(); //zoom start event
@@ -4444,6 +4439,7 @@
       visible: visible,
       disablePointerEvent: true,
       zIndex: zIndex,
+      debug: debug,
       debugLabel: debugLabel
     }, mapVisible && React__default["default"].createElement(SVGCircle, {
       radius: computedRadius,
@@ -4483,6 +4479,7 @@
         zIndex = _a.zIndex,
         _h = _a.mode,
         mode = _h === void 0 ? 'POLYGON' : _h,
+        debug = _a.debug,
         debugLabel = _a.debugLabel; //controller
 
     var controller = useMintMapController(); //zoom start event
@@ -4496,8 +4493,11 @@
 
       if (zoomLevel.current !== newZoomLevel) {
         zoomLevel.current = newZoomLevel;
-        renderPolygonBase();
-        setMapVisible(true);
+        calculatePolygonBase();
+        setTimeout(function () {
+          setMapVisible(true);
+          renderPolygon();
+        }, 50);
       }
     }, []);
     var zoomLevel = React.useRef(controller.getZoomLevel());
@@ -4534,7 +4534,6 @@
     }); //polygon 생성 effect
 
     React.useEffect(function () {
-      // console.log('polygon changed');
       polygonPropsRef.current = {
         position: position,
         innerPositions: innerPositions,
@@ -4542,14 +4541,19 @@
         simplifyTolerance: simplifyTolerance,
         lastReapeated: lastReapeated
       };
-      renderPolygonBase();
+      calculatePolygonBase(true); // console.log('PolygonMarker useEffect');
     }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
     var _m = React.useState(true),
         mapVisible = _m[0],
         setMapVisible = _m[1];
 
-    var renderPolygonBase = React.useCallback(function () {
+    var renderInfoRef = React.useRef({
+      offset: [],
+      innerOffset: [],
+      startPosition: undefined
+    });
+    var calculatePolygonBase = React.useCallback(function (renderNow) {
       // console.log('renderPolygonBase');
       var _a = polygonPropsRef.current,
           position = _a.position,
@@ -4573,7 +4577,7 @@
         return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
       });
       var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
-      setOffsets(simplified); //inner path
+      renderInfoRef.current.offset = simplified; //inner path
 
       var innerPath = [];
 
@@ -4587,27 +4591,39 @@
           var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
           innerPath.push(simplified_1);
         }
+      }
 
-        setInnerOffsets(innerPath);
-      } //start point
-
+      renderInfoRef.current.innerOffset = innerPath; //start point
 
       var startPosition = maxLat && minLng ? new Position(maxLat, minLng) : undefined;
-      setPolygonStart(startPosition);
+      renderInfoRef.current.startPosition = startPosition;
+
+      if (renderNow) {
+        renderPolygon();
+      }
+    }, []);
+    var renderPolygon = React.useCallback(function () {
+      // console.log('render', renderInfoRef.current.offset);
+      setOffsets(renderInfoRef.current.offset);
+      setInnerOffsets(renderInfoRef.current.innerOffset);
+      setPolygonStart(renderInfoRef.current.startPosition);
     }, []);
     return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper, {
       position: polygonStart,
       visible: visible,
       disablePointerEvent: true,
       zIndex: zIndex,
+      debug: debug,
       debugLabel: debugLabel
-    }, mapVisible && React__default["default"].createElement(SVGPolygon, {
+    }, React__default["default"].createElement(SVGPolygon, {
       path: offsets,
       innerPath: innerOffsets,
       mode: mode,
       background: background,
       shapeProperties: shapeProperties,
-      svgProperties: svgProperties
+      svgProperties: tslib.__assign({
+        display: mapVisible ? '' : 'none'
+      }, svgProperties)
     }, children)));
   }
 
@@ -5057,53 +5073,11 @@
     }))));
   }
 
-  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
-  var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
+  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  pointer-events: auto;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+  var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
   styleInject__default["default"](css_248z);
 
   var cn = classNames__default["default"].bind(styles);
-
-  var getSizeString = function (size) {
-    return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
-  };
-
-  var getAlignPosition = function (value, align) {
-    if (typeof value === 'string') {
-      var trimmed = value.replace(/ /g, '');
-      console.log('trimmed:', trimmed);
-      var isPercent = trimmed.endsWith('%');
-
-      if (!isPercent && !trimmed.endsWith('px')) {
-        throw new Error("Size [".concat(value, "] is not valid string value."));
-      }
-
-      var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
-      var unit = isPercent ? '%' : 'px';
-      var numberValue = Number(numberPart);
-
-      if (isNaN(numberValue)) {
-        throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
-      }
-
-      if (align === 'center') {
-        return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
-      } else if (align === 'right' || align === 'bottom') {
-        return "calc(100% - ".concat(numberValue).concat(unit, ")");
-      } else {
-        return '0px';
-      }
-    } else if (typeof value === 'number') {
-      if (align === 'center') {
-        return "calc(50% - ".concat(value / 2, "px)");
-      } else if (align === 'right' || align === 'bottom') {
-        return "calc(100% - ".concat(value, "px)");
-      } else {
-        return '0px';
-      }
-    }
-
-    throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
-  };
   /**
    * Mint Map 컴포넌트
    *
@@ -5112,26 +5086,29 @@
    * @returns {JSX.Element} JSX
    */
 
-
   function MapControlWrapper(_a) {
     var _b = _a.width,
-        width = _b === void 0 ? 100 : _b,
+        width = _b === void 0 ? 'fit-content' : _b,
         _c = _a.height,
-        height = _c === void 0 ? 40 : _c,
+        height = _c === void 0 ? 'fit-content' : _c,
         _d = _a.positionHorizontal,
         positionHorizontal = _d === void 0 ? 'left' : _d,
         _e = _a.positionVertical,
         positionVertical = _e === void 0 ? 'top' : _e,
         children = _a.children;
     return React__default["default"].createElement("div", {
+      className: cn('mint-map-control-wrapper-container'),
+      style: {
+        justifyContent: positionHorizontal === 'center' ? 'center' : positionHorizontal === 'right' ? 'flex-end' : 'flex-start',
+        alignItems: positionVertical === 'center' ? 'center' : positionVertical === 'bottom' ? 'flex-end' : 'flex-start'
+      }
+    }, React__default["default"].createElement("div", {
       className: cn('mint-map-control-wrapper'),
       style: {
-        width: getSizeString(width),
-        height: getSizeString(height),
-        left: getAlignPosition(width, positionHorizontal),
-        top: getAlignPosition(height, positionVertical)
+        width: width,
+        height: height
       }
-    }, children);
+    }, children));
   }
 
   /**

package/package.json

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