@mint-ui/map 1.2.0-test.1 → 1.2.0-test.11

package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts

@@ -1,5 +1,13 @@
 import Konva from "konva";
 import { Position, Offset } from "../../../../types";
+/**
+ * 캔버스 데이터 타입 Enum
+ * 마커인지 폴리곤인지 구분하는 상수
+ */
+export declare enum CanvasDataType {
+    MARKER = "MARKER",
+    POLYGON = "POLYGON"
+}
 /**
  * 폴리곤 경로 정의
  */
@@ -11,12 +19,12 @@ export interface Paths {
  * 캔버스 마커/폴리곤 기본 옵션
  */
 /**
- * 캔버스 마커/폴리곤의 기본 필수 속성
+ * Konva 캔버스 마커/폴리곤의 기본 필수 속성
  * (렌더링에 필요한 최소 정보)
  */
-export interface CanvasMarkerOption {
+export interface KonvaCanvasMarkerOption {
     id: string;
-    position: Position[];
+    position: Position;
     boxWidth?: number;
     boxHeight?: number;
     paths?: Paths;
@@ -27,16 +35,16 @@ export interface CanvasMarkerOption {
  * @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
  * @example
  * // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
- * type MarkerWithCanvas = CanvasMarkerData<Marker>
+ * type MarkerWithCanvas = KonvaCanvasMarkerData<Marker>
  * // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
  */
-export declare type CanvasMarkerData<T = {}> = T & CanvasMarkerOption;
+export declare type KonvaCanvasMarkerData<T = {}> = T & KonvaCanvasMarkerOption;
 /**
  * 렌더링 유틸리티 함수들
  */
 export interface RenderUtils<T> {
-    getOrComputePolygonOffsets: (polygonData: CanvasMarkerData<T>) => number[][][][] | null;
-    getOrComputeMarkerOffset: (markerData: CanvasMarkerData<T>) => Offset | null;
+    getOrComputePolygonOffsets: (polygonData: KonvaCanvasMarkerData<T>) => number[][][][] | null;
+    getOrComputeMarkerOffset: (markerData: KonvaCanvasMarkerData<T>) => Offset | null;
 }
 /**
  * 커스텀 렌더링 함수 파라미터 - Base Layer
@@ -45,7 +53,7 @@ export interface RenderBaseParams<T> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 렌더링할 마커 데이터 배열 */
-    items: CanvasMarkerData<T>[];
+    items: KonvaCanvasMarkerData<T>[];
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 렌더링 유틸리티 함수들 */
@@ -75,7 +83,7 @@ export interface RenderAnimationParams<T> {
     /** 현재 선택된 마커 ID Set */
     selectedIds: Set<string>;
     /** 전체 마커 데이터 배열 */
-    items: CanvasMarkerData<T>[];
+    items: KonvaCanvasMarkerData<T>[];
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
 }
@@ -98,11 +106,13 @@ export interface RenderEventParams<T> {
     /** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
     ctx: CanvasRenderingContext2D;
     /** 현재 hover된 마커 데이터 */
-    hoveredItem: CanvasMarkerData<T> | null;
+    hoveredItem: KonvaCanvasMarkerData<T> | null;
     /** 렌더링 유틸리티 함수들 */
     utils: RenderUtils<T>;
     /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
-    selectedItems?: CanvasMarkerData<T>[];
+    selectedItems?: KonvaCanvasMarkerData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer

package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 캔버스 데이터 타입 Enum
+ * 마커인지 폴리곤인지 구분하는 상수
+ */
+exports.CanvasDataType = void 0;
+
+(function (CanvasDataType) {
+  CanvasDataType["MARKER"] = "MARKER";
+  CanvasDataType["POLYGON"] = "POLYGON";
+})(exports.CanvasDataType || (exports.CanvasDataType = {}));

package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts

@@ -1,23 +1,32 @@
 import { Offset } from "../../../../types";
 import { MintMapController } from "../../../MintMapController";
-import { CanvasMarkerData } from "./types";
+import { KonvaCanvasMarkerData } from "./types";
 /**
  * 폴리곤 offset 계산
  */
-export declare const computePolygonOffsets: (polygonData: CanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
+export declare const computePolygonOffsets: (polygonData: KonvaCanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
 /**
  * 마커 offset 계산
  */
-export declare const computeMarkerOffset: (markerData: CanvasMarkerData<any>, controller: MintMapController) => Offset | null;
+export declare const computeMarkerOffset: (markerData: KonvaCanvasMarkerData<any>, controller: MintMapController) => Offset | null;
 /**
  * Point-in-Polygon 알고리즘
  */
 export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => boolean;
 /**
- * 폴리곤 히트 테스트
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+ *
+ * 로직:
+ * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
+ * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
+ *
+ * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
+ * - 도넛 폴리곤 A: isDonutPolygon=true
+ * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
  */
-export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: CanvasMarkerData<any>, getPolygonOffsets: (data: CanvasMarkerData<any>) => number[][][][] | null) => boolean;
+export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasMarkerData<any>, getPolygonOffsets: (data: KonvaCanvasMarkerData<any>) => number[][][][] | null) => boolean;
 /**
  * 마커 히트 테스트
  */
-export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: CanvasMarkerData<any>, getMarkerOffset: (data: CanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasMarkerData<any>, getMarkerOffset: (data: KonvaCanvasMarkerData<any>) => Offset | null) => boolean;
+export declare const hexToRgba: (hexColor: string, alpha?: number) => string;

package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js

@@ -0,0 +1,182 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../../../types/MapDrawables.js');
+var MapTypes = require('../../../../types/MapTypes.js');
+require('../../../../types/MapEventTypes.js');
+
+/**
+ * 폴리곤 offset 계산
+ */
+
+var computePolygonOffsets = function (polygonData, controller) {
+  var paths = polygonData.paths;
+
+  if (!paths || paths.type !== 'MultiPolygon' || !paths.coordinates) {
+    return null;
+  }
+
+  var result = [];
+
+  for (var _i = 0, _a = paths.coordinates; _i < _a.length; _i++) {
+    var multiPolygon = _a[_i];
+    var multiPolygonOffsets = [];
+
+    for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
+      var polygonGroup = multiPolygon_1[_b];
+      var polygonOffsets = [];
+
+      for (var _c = 0, polygonGroup_1 = polygonGroup; _c < polygonGroup_1.length; _c++) {
+        var coord = polygonGroup_1[_c];
+        var pos = new MapTypes.Position(coord[1], coord[0]);
+        var offset = controller.positionToOffset(pos);
+        polygonOffsets.push([offset.x, offset.y]);
+      }
+
+      multiPolygonOffsets.push(polygonOffsets);
+    }
+
+    result.push(multiPolygonOffsets);
+  }
+
+  return result;
+};
+/**
+ * 마커 offset 계산
+ */
+
+var computeMarkerOffset = function (markerData, controller) {
+  if (!markerData.position) {
+    return null;
+  }
+
+  return controller.positionToOffset(markerData.position);
+};
+/**
+ * Point-in-Polygon 알고리즘
+ */
+
+var isPointInPolygon = function (point, polygon) {
+  var inside = false;
+
+  for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    var xi = polygon[i][0],
+        yi = polygon[i][1];
+    var xj = polygon[j][0],
+        yj = polygon[j][1];
+    var intersect = yi > point.y !== yj > point.y && point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+
+  return inside;
+};
+/**
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
+ *
+ * 로직:
+ * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
+ * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
+ *
+ * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
+ * - 도넛 폴리곤 A: isDonutPolygon=true
+ * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
+ */
+
+var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
+  var polygonOffsets = getPolygonOffsets(polygonData);
+  if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
+
+  if (polygonData.isDonutPolygon) {
+    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+      var multiPolygon = polygonOffsets_1[_i];
+      if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
+
+      if (multiPolygon.length === 1) {
+        if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
+          return true;
+        }
+
+        continue;
+      } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
+
+      var outerPolygon = multiPolygon[0];
+
+      if (!isPointInPolygon(clickedOffset, outerPolygon)) {
+        continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
+      } // 2. 내부 구멍들(나머지)에 포함되는지 확인
+
+
+      for (var i = 1; i < multiPolygon.length; i++) {
+        var hole = multiPolygon[i];
+
+        if (isPointInPolygon(clickedOffset, hole)) {
+          // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
+          // 다른 multiPolygon 체크하지 않고 바로 false 반환
+          // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
+          return false;
+        }
+      } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
+
+
+      return true;
+    }
+
+    return false;
+  } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
+
+
+  for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
+    var multiPolygon = polygonOffsets_2[_a];
+
+    for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
+      var polygonGroup = multiPolygon_2[_b];
+      if (polygonGroup.length === 0) continue;
+
+      if (isPointInPolygon(clickedOffset, polygonGroup)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+/**
+ * 마커 히트 테스트
+ */
+
+var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
+  var markerOffset = getMarkerOffset(markerData);
+  if (!markerOffset) return false;
+  var boxWidth = markerData.boxWidth || 50;
+  var boxHeight = markerData.boxHeight || 28;
+  var tailHeight = 6;
+  var x = markerOffset.x - boxWidth / 2;
+  var y = markerOffset.y - boxHeight - tailHeight;
+  return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
+};
+var hexToRgba = function (hexColor, alpha) {
+  if (alpha === void 0) {
+    alpha = 1;
+  } // NOTE: 입력된 hexColor에서 "#" 제거
+
+
+  var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
+
+  if (hex.length === 6) {
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 4), 16);
+    var b = parseInt(hex.substring(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+  }
+
+  throw new Error('Invalid hex color format');
+};
+
+exports.computeMarkerOffset = computeMarkerOffset;
+exports.computePolygonOffsets = computePolygonOffsets;
+exports.hexToRgba = hexToRgba;
+exports.isPointInMarkerData = isPointInMarkerData;
+exports.isPointInPolygon = isPointInPolygon;
+exports.isPointInPolygonData = isPointInPolygonData;

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

@@ -172,7 +172,7 @@ function MapMarkerWrapper(_a) {
   var onMouseOverHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
+    var marker = markerRef.current;
 
     if (marker) {
       var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -185,6 +185,25 @@ function MapMarkerWrapper(_a) {
 
       next && topOnHover && controller.markerToTheTop(marker);
     }
+  }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
+
+
+  var onMouseLeaveHandler = function (e) {
+    var _a;
+
+    var marker = markerRef.current;
+
+    if (marker) {
+      var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
+      var next = true;
+
+      if (mouseOutHandler) {
+        var hasNext = mouseOutHandler(e);
+        hasNext !== undefined && (next = hasNext);
+      }
+
+      next && topOnHover && controller.restoreMarkerZIndex(marker);
+    }
   }; //create object
 
 
@@ -202,10 +221,12 @@ function MapMarkerWrapper(_a) {
     }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
 
     divElement.addEventListener('mouseover', onMouseOverHandler);
+    divElement.addEventListener('mouseleave', onMouseLeaveHandler);
     return function () {
       divElement.removeEventListener('click', onClickHandler);
       divElement.removeEventListener('mousedown', onMousedownHandler);
       divElement.removeEventListener('mouseover', onMouseOverHandler);
+      divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
 
       if (markerRef.current) {
         controller.clearDrawable(markerRef.current);

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -28,6 +28,7 @@ export declare class GoogleMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -20,6 +20,10 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
+require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/context.js');
+require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var GoogleMintMapController =
@@ -336,6 +340,10 @@ function (_super) {
     }
   };
 
+  GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   GoogleMintMapController.prototype.clearDrawable = function (drawable) {
     if (drawable && drawable.native) {
       if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -31,6 +31,7 @@ export declare class KakaoMintMapController extends MintMapController {
     private getMaxZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -21,6 +21,10 @@ var polygon = require('../core/util/polygon.js');
 require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
+require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/context.js');
+require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var KakaoMintMapController =
@@ -344,6 +348,10 @@ function (_super) {
     }
   };
 
+  KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
+    // 이 기능은 Naver Maps에서만 사용 가능합니다.
+  };
+
   KakaoMintMapController.prototype.clearDrawable = function (drawable) {
     var _this = this;
 

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -27,9 +27,12 @@ export declare class NaverMintMapController extends MintMapController {
     createMarker(marker: Marker): void;
     updateMarker(marker: Marker, options: MarkerOptions): void;
     private markerMaxZIndex;
+    private markerOriginalZIndex;
     private getMaxZIndex;
+    private getCurrentZIndex;
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
+    restoreMarkerZIndex(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
     private dragged;
     isMapDragged(): boolean;

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -20,6 +20,10 @@ require('../core/util/geo.js');
 var polygon = require('../core/util/polygon.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
+require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
+require('../core/advanced/woongCanvas/shared/types.js');
+require('../core/advanced/woongCanvas/shared/context.js');
+require('../core/advanced/woongCanvas/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var NaverMintMapController =
@@ -336,20 +340,54 @@ function (_super) {
     }
   };
 
-  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+  NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
-      if (parent_1) {
-        parent_1.style.zIndex = String(zIndex);
+      if (parent_1 && parent_1.style.zIndex) {
+        var zIndex = Number(parent_1.style.zIndex);
+        return isNaN(zIndex) ? undefined : zIndex;
+      }
+    }
+
+    return undefined;
+  };
+
+  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_2 = marker.element.parentElement;
+
+      if (parent_2) {
+        parent_2.style.zIndex = String(zIndex);
       }
     }
   };
 
   NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
+    if (this.markerOriginalZIndex !== undefined) {
+      return;
+    }
+
+    var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
+
+    this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
     this.setMarkerZIndex(marker, this.getMaxZIndex(1));
   };
 
+  NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
+    if (this.markerOriginalZIndex !== undefined) {
+      if (this.markerOriginalZIndex === null) {
+        // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
+        this.setMarkerZIndex(marker, 0);
+      } else {
+        this.setMarkerZIndex(marker, this.markerOriginalZIndex);
+      }
+
+      this.markerOriginalZIndex = undefined;
+    }
+  };
+
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
     var _a;