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

package/dist/index.es.js

@@ -592,7 +592,7 @@ function () {
   };
 
   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;
@@ -3725,7 +3725,8 @@ function SVGCircle(_a) {
     pointerEvents: "none",
     width: boxSize,
     height: boxSize,
-    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize)
+    viewBox: "0 0 ".concat(boxSize, " ").concat(boxSize),
+    overflow: 'visible'
   }, svgProperties), React.createElement("circle", __assign({
     pointerEvents: "visiblepainted",
     cx: radius,
@@ -3744,6 +3745,86 @@ function SVGCircle(_a) {
   }, children));
 }
 
+var Drawable =
+/** @class */
+function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var Marker =
+/** @class */
+function (_super) {
+  __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) {
+  __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) {
+  __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,
@@ -3798,39 +3879,33 @@ function SVGPolygon(_a) {
       containerHeight: height
     };
   }, []);
-  var getD = useCallback(function (_a) {
-    var path = _a.path,
-        containerLeft = _a.containerLeft,
-        containerTop = _a.containerTop,
-        mode = _a.mode;
-    var left = containerLeft;
-    var top = containerTop;
+  var getD = 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 = useCallback(function (path, offsetLeft, offsetTop, closePath) {
+  var getLine = 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 = useState(0),
@@ -3845,28 +3920,26 @@ function SVGPolygon(_a) {
       d = _j[0],
       setD = _j[1];
 
+  var _k = useState(new Offset(0, 0)),
+      polygonAreaInfo = _k[0],
+      setPolygonAreaInfo = _k[1];
+
   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(__assign(__assign({}, info), {
-      path: path,
-      innerPath: innerPath,
-      mode: mode
-    })));
-  }, [path, innerPath]);
+    setD(getD(path, innerPath, mode));
+  }, [path, innerPath, mode]);
   return React.createElement(React.Fragment, null, React.createElement("svg", __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.createElement("path", __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",
@@ -3912,7 +3985,8 @@ function SVGRect(_a) {
     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.createElement("rect", __assign({
     pointerEvents: "visiblepainted",
     x: "0",
@@ -3932,86 +4006,6 @@ function SVGRect(_a) {
   }, children));
 }
 
-var Drawable =
-/** @class */
-function () {
-  function Drawable() {}
-
-  return Drawable;
-}();
-
-var Marker =
-/** @class */
-function (_super) {
-  __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) {
-  __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) {
-  __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;
 
@@ -4355,6 +4349,7 @@ function CircleMarker(_a) {
       _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
@@ -4440,6 +4435,7 @@ function CircleMarker(_a) {
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
   }, mapVisible && React.createElement(SVGCircle, {
     radius: computedRadius,
@@ -4479,6 +4475,7 @@ function PolygonMarker(_a) {
       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
@@ -4492,8 +4489,11 @@ function PolygonMarker(_a) {
 
     if (zoomLevel.current !== newZoomLevel) {
       zoomLevel.current = newZoomLevel;
-      renderPolygonBase();
-      setMapVisible(true);
+      calculatePolygonBase();
+      setTimeout(function () {
+        setMapVisible(true);
+        renderPolygon();
+      }, 50);
     }
   }, []);
   var zoomLevel = useRef(controller.getZoomLevel());
@@ -4530,7 +4530,6 @@ function PolygonMarker(_a) {
   }); //polygon 생성 effect
 
   useEffect(function () {
-    // console.log('polygon changed');
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -4538,14 +4537,19 @@ function PolygonMarker(_a) {
       simplifyTolerance: simplifyTolerance,
       lastReapeated: lastReapeated
     };
-    renderPolygonBase();
+    calculatePolygonBase(true); // console.log('PolygonMarker useEffect');
   }, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
 
   var _m = useState(true),
       mapVisible = _m[0],
       setMapVisible = _m[1];
 
-  var renderPolygonBase = useCallback(function () {
+  var renderInfoRef = useRef({
+    offset: [],
+    innerOffset: [],
+    startPosition: undefined
+  });
+  var calculatePolygonBase = useCallback(function (renderNow) {
     // console.log('renderPolygonBase');
     var _a = polygonPropsRef.current,
         position = _a.position,
@@ -4569,7 +4573,7 @@ function PolygonMarker(_a) {
       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 = [];
 
@@ -4583,27 +4587,39 @@ function PolygonMarker(_a) {
         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 = useCallback(function () {
+    // console.log('render', renderInfoRef.current.offset);
+    setOffsets(renderInfoRef.current.offset);
+    setInnerOffsets(renderInfoRef.current.innerOffset);
+    setPolygonStart(renderInfoRef.current.startPosition);
   }, []);
   return React.createElement(React.Fragment, null, polygonStart && React.createElement(MapMarkerWrapper, {
     position: polygonStart,
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
-  }, mapVisible && React.createElement(SVGPolygon, {
+  }, React.createElement(SVGPolygon, {
     path: offsets,
     innerPath: innerOffsets,
     mode: mode,
     background: background,
     shapeProperties: shapeProperties,
-    svgProperties: svgProperties
+    svgProperties: __assign({
+      display: mapVisible ? '' : 'none'
+    }, svgProperties)
   }, children)));
 }
 
@@ -5053,53 +5069,11 @@ function LoadingImage(_a) {
   }))));
 }
 
-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(css_248z);
 
 var cn = classNames.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 컴포넌트
  *
@@ -5108,26 +5082,29 @@ var getAlignPosition = function (value, align) {
  * @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.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.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));
 }
 
 /**