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

package/dist/components/mint-map/core/advanced/shapes/CircleMarker.d.ts

@@ -9,6 +9,7 @@ export interface CircleMarkerProps {
     zIndex?: number;
     svgProperties?: React.SVGProps<SVGSVGElement>;
     shapeProperties?: React.SVGProps<SVGCircleElement>;
+    debug?: boolean | undefined;
     debugLabel?: string;
 }
 /**
@@ -18,4 +19,4 @@ export interface CircleMarkerProps {
  *
  * @returns {JSX.Element} JSX
  */
-export declare function CircleMarker({ children, center, radius, radiusUnit, background, svgProperties, shapeProperties, visible, zIndex, debugLabel, }: PropsWithChildren<CircleMarkerProps>): JSX.Element;
+export declare function CircleMarker({ children, center, radius, radiusUnit, background, svgProperties, shapeProperties, visible, zIndex, debug, debugLabel, }: PropsWithChildren<CircleMarkerProps>): JSX.Element;

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

@@ -42,6 +42,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 = MintMapProvider.useMintMapController(); //zoom start event
@@ -127,6 +128,7 @@ function CircleMarker(_a) {
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
   }, mapVisible && React__default["default"].createElement(SVGCircle.SVGCircle, {
     radius: computedRadius,

package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.d.ts

@@ -15,6 +15,7 @@ export interface PolygonMarkerProps {
     mode?: 'POLYGON' | 'POLYLINE';
     svgProperties?: React.SVGProps<SVGSVGElement>;
     shapeProperties?: React.SVGProps<SVGPathElement>;
+    debug?: boolean | undefined;
     debugLabel?: string;
 }
 /**
@@ -24,4 +25,4 @@ export interface PolygonMarkerProps {
  *
  * @returns {JSX.Element} JSX
  */
-export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, debugLabel, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;
+export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, debug, debugLabel, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../../provider/MintMapProvider.js');
 var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
@@ -11,7 +12,6 @@ var MapTypes = require('../../../types/MapTypes.js');
 require('../../../types/MapEventTypes.js');
 require('../../util/animation.js');
 require('../../util/geo.js');
-require('tslib');
 var polygon = require('../../util/polygon.js');
 require('../../util/status.js');
 var NaverMintMapController = require('../../../naver/NaverMintMapController.js');
@@ -48,6 +48,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 = MintMapProvider.useMintMapController(); //zoom start event
@@ -61,8 +62,11 @@ function PolygonMarker(_a) {
 
     if (zoomLevel.current !== newZoomLevel) {
       zoomLevel.current = newZoomLevel;
-      renderPolygonBase();
-      setMapVisible(true);
+      calculatePolygonBase();
+      setTimeout(function () {
+        setMapVisible(true);
+        renderPolygon();
+      }, 50);
     }
   }, []);
   var zoomLevel = React.useRef(controller.getZoomLevel());
@@ -99,7 +103,6 @@ function PolygonMarker(_a) {
   }); //polygon 생성 effect
 
   React.useEffect(function () {
-    // console.log('polygon changed');
     polygonPropsRef.current = {
       position: position,
       innerPositions: innerPositions,
@@ -107,14 +110,19 @@ function PolygonMarker(_a) {
       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,
@@ -138,7 +146,7 @@ function PolygonMarker(_a) {
       return controller instanceof NaverMintMapController.NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
     });
     var simplified = simplifyPath ? polygon.PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
-    setOffsets(simplified); //inner path
+    renderInfoRef.current.offset = simplified; //inner path
 
     var innerPath = [];
 
@@ -152,27 +160,39 @@ function PolygonMarker(_a) {
         var simplified_1 = simplifyPath ? polygon.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 MapTypes.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.MapMarkerWrapper, {
     position: polygonStart,
     visible: visible,
     disablePointerEvent: true,
     zIndex: zIndex,
+    debug: debug,
     debugLabel: debugLabel
-  }, mapVisible && React__default["default"].createElement(SVGPolygon.SVGPolygon, {
+  }, React__default["default"].createElement(SVGPolygon.SVGPolygon, {
     path: offsets,
     innerPath: innerOffsets,
     mode: mode,
     background: background,
     shapeProperties: shapeProperties,
-    svgProperties: svgProperties
+    svgProperties: tslib.__assign({
+      display: mapVisible ? '' : 'none'
+    }, svgProperties)
   }, children)));
 }
 

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/SVGPolygon.js

@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
+require('../../../../types/MapDrawables.js');
+var MapTypes = require('../../../../types/MapTypes.js');
+require('../../../../types/MapEventTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -63,39 +66,33 @@ function SVGPolygon(_a) {
       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),
@@ -110,28 +107,26 @@ function SVGPolygon(_a) {
       d = _j[0],
       setD = _j[1];
 
+  var _k = React.useState(new MapTypes.Offset(0, 0)),
+      polygonAreaInfo = _k[0],
+      setPolygonAreaInfo = _k[1];
+
   React.useEffect(function () {
     var info = getPolygonInfo(path);
+    setPolygonAreaInfo(new MapTypes.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",

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/components/mint-map/types/MapTypes.js

@@ -123,7 +123,7 @@ function () {
   };
 
   Bounds.prototype.intersects = function (positions) {
-    return polygon.PolygonCalculator.intersects([this.nw, this.se], positions);
+    return polygon.PolygonCalculator.intersects([this.nw, this.sw, this.se, this.ne, this.nw], positions);
   };
 
   return Bounds;