@mint-ui/map 1.2.0-test.4 → 1.2.0-test.6

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

@@ -36,6 +36,8 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
     maxCacheSize?: number;
     /** 외부에서 제어하는 선택된 항목 배열 (선택) */
     selectedItems?: KonvaCanvasMarkerData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
 }
 /**
  * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
@@ -46,5 +48,5 @@ export interface WoongKonvaMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' |
  *
  * 주의: JSON.stringify() 사용 금지! (매우 느림)
  */
-declare const WoongKonvaMarker: <T>({ markers, dataType, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
+declare const WoongKonvaMarker: <T>({ markers, dataType, onClick, onMouseOver, onMouseOut, renderBase, renderAnimation, renderEvent, enableMultiSelect, topOnHover, enableViewportCulling, cullingMargin, maxCacheSize, selectedItems: externalSelectedItems, selectedItem: externalSelectedItem, ...options }: WoongKonvaMarkerProps<T>) => React.ReactPortal;
 export default WoongKonvaMarker;

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

@@ -55,7 +55,8 @@ var WoongKonvaMarkerComponent = function (_a) {
       _f = _a.maxCacheSize,
       maxCacheSize = _f === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _f,
       externalSelectedItems = _a.selectedItems,
-      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
+      externalSelectedItem = _a.selectedItem,
+      options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -89,9 +90,9 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = React.useRef(null);
-  /** 마지막으로 클릭된 항목 */
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-  var lastClickedItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
   /**
    * 선택된 항목의 ID Set
    *
@@ -439,7 +440,7 @@ var WoongKonvaMarkerComponent = function (_a) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
+            selectedItem: selectedItemRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -643,9 +644,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
+    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
       // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
@@ -953,6 +952,16 @@ var WoongKonvaMarkerComponent = function (_a) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+  // --------------------------------------------------------------------------
+
+  React.useEffect(function () {
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
   // Lifecycle: 마커 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 

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

@@ -111,8 +111,8 @@ export interface RenderEventParams<T> {
     utils: RenderUtils<T>;
     /** 현재 선택된 마커 데이터 배열 (선택 강조용) */
     selectedItems?: KonvaCanvasMarkerData<T>[];
-    /** 마지막으로 클릭된 마커 데이터 */
-    lastClickedItem: KonvaCanvasMarkerData<T> | null;
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasMarkerData<T> | null;
 }
 /**
  * 커스텀 렌더링 함수 타입 - Event Layer

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

@@ -14,7 +14,15 @@ export declare const computeMarkerOffset: (markerData: KonvaCanvasMarkerData<any
  */
 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: KonvaCanvasMarkerData<any>, getPolygonOffsets: (data: KonvaCanvasMarkerData<any>) => number[][][][] | null) => boolean;
 /**

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

@@ -72,18 +72,67 @@ var isPointInPolygon = function (point, polygon) {
   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;
+  if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
 
-  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-    var multiPolygon = polygonOffsets_1[_i];
+  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; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
 
-    for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-      var polygonGroup = multiPolygon_2[_a];
+      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;

package/dist/index.es.js

@@ -860,18 +860,67 @@ var isPointInPolygon = function (point, polygon) {
   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;
+  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. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
 
-  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-    var multiPolygon = polygonOffsets_1[_i];
+      var outerPolygon = multiPolygon[0];
 
-    for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-      var polygonGroup = multiPolygon_2[_a];
+      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;
@@ -5356,7 +5405,8 @@ var WoongKonvaMarkerComponent = function (_a) {
       _f = _a.maxCacheSize,
       maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
       externalSelectedItems = _a.selectedItems,
-      options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
+      externalSelectedItem = _a.selectedItem,
+      options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -5390,9 +5440,9 @@ var WoongKonvaMarkerComponent = function (_a) {
   /** 현재 Hover 중인 항목 */
 
   var hoveredItemRef = useRef(null);
-  /** 마지막으로 클릭된 항목 */
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-  var lastClickedItemRef = useRef(null);
+  var selectedItemRef = useRef(externalSelectedItem);
   /**
    * 선택된 항목의 ID Set
    *
@@ -5740,7 +5790,7 @@ var WoongKonvaMarkerComponent = function (_a) {
             hoveredItem: hoveredItemRef.current,
             utils: renderUtils,
             selectedItems: selectedItems,
-            lastClickedItem: lastClickedItemRef.current
+            selectedItem: selectedItemRef.current
           });
         },
         perfectDrawEnabled: false,
@@ -5944,9 +5994,7 @@ var WoongKonvaMarkerComponent = function (_a) {
 
 
   var handleLocalClick = function (data) {
-    // 0. 마지막 클릭 항목 저장
-    lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
+    // 1. 선택 상태 업데이트
     if (enableMultiSelect) {
       // 다중 선택: Set과 Map 동시 업데이트
       var newSelected = new Set(selectedIdsRef.current);
@@ -6254,6 +6302,16 @@ var WoongKonvaMarkerComponent = function (_a) {
     doRenderEvent();
   }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
   // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
   // Lifecycle: 마커 데이터 변경 시 렌더링
   // --------------------------------------------------------------------------
 

package/dist/index.umd.js

@@ -864,18 +864,67 @@
     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;
+    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. 외부 폴리곤(첫 번째)에 포함되는지 확인
+
 
-    for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
-      var multiPolygon = polygonOffsets_1[_i];
+        var outerPolygon = multiPolygon[0];
 
-      for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
-        var polygonGroup = multiPolygon_2[_a];
+        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;
@@ -5360,7 +5409,8 @@
         _f = _a.maxCacheSize,
         maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
         externalSelectedItems = _a.selectedItems,
-        options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
+        externalSelectedItem = _a.selectedItem,
+        options = tslib.__rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem"]); // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
@@ -5394,9 +5444,9 @@
     /** 현재 Hover 중인 항목 */
 
     var hoveredItemRef = React.useRef(null);
-    /** 마지막으로 클릭된 항목 */
+    /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
 
-    var lastClickedItemRef = React.useRef(null);
+    var selectedItemRef = React.useRef(externalSelectedItem);
     /**
      * 선택된 항목의 ID Set
      *
@@ -5744,7 +5794,7 @@
               hoveredItem: hoveredItemRef.current,
               utils: renderUtils,
               selectedItems: selectedItems,
-              lastClickedItem: lastClickedItemRef.current
+              selectedItem: selectedItemRef.current
             });
           },
           perfectDrawEnabled: false,
@@ -5948,9 +5998,7 @@
 
 
     var handleLocalClick = function (data) {
-      // 0. 마지막 클릭 항목 저장
-      lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
-
+      // 1. 선택 상태 업데이트
       if (enableMultiSelect) {
         // 다중 선택: Set과 Map 동시 업데이트
         var newSelected = new Set(selectedIdsRef.current);
@@ -6258,6 +6306,16 @@
       doRenderEvent();
     }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
     // --------------------------------------------------------------------------
+    // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+    // --------------------------------------------------------------------------
+
+    React.useEffect(function () {
+      if (!stageRef.current) return; // Ref 동기화
+
+      selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+      doRenderEvent();
+    }, [externalSelectedItem]); // --------------------------------------------------------------------------
     // Lifecycle: 마커 데이터 변경 시 렌더링
     // --------------------------------------------------------------------------
 

package/package.json

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