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

package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.js

@@ -32,7 +32,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__default["default"].createElement("circle", tslib.__assign({
     pointerEvents: "visiblepainted",
     cx: radius,

package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.js

@@ -37,7 +37,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__default["default"].createElement("rect", tslib.__assign({
     pointerEvents: "visiblepainted",
     x: "0",

package/dist/components/mint-map/core/wrapper/MapControlWrapper.d.ts

@@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
 declare type AlignHorizontal = 'left' | 'right' | 'center';
 declare type AlignVertical = 'top' | 'bottom' | 'center';
 export interface MapControlWrapperProps {
-    width?: number | string;
-    height?: number | string;
+    width?: string | number;
+    height?: string | number;
     positionHorizontal?: AlignHorizontal;
     positionVertical?: AlignVertical;
 }

package/dist/components/mint-map/core/wrapper/MapControlWrapper.js

@@ -12,48 +12,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 var cn = classNames__default["default"].bind(MintMapWrapper_module);
-
-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 컴포넌트
  *
@@ -62,26 +20,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__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));
 }
 
 exports.MapControlWrapper = MapControlWrapper;

package/dist/components/mint-map/core/wrapper/MintMapWrapper.module.scss.js

@@ -6,8 +6,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styleInject__default = /*#__PURE__*/_interopDefaultLegacy(styleInject);
 
-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);
 
 module.exports = styles;

package/dist/index.es.js

@@ -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,
@@ -3984,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",
@@ -5067,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 컴포넌트
  *
@@ -5122,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));
 }
 
 /**

package/dist/index.umd.js

@@ -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,
@@ -3988,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",
@@ -5071,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 컴포넌트
    *
@@ -5126,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.11-beta",
+  "version": "0.5.12-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",