@mint-ui/map 1.2.0-test.18 → 1.2.0-test.19

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

@@ -71,7 +71,7 @@ var WoongCanvasLayer = function (props) {
 
   /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = React.useRef(data); // --------------------------------------------------------------------------
+  var dataRef = React.useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
@@ -222,6 +222,10 @@ var WoongCanvasLayer = function (props) {
   /**
    * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
    *
+   * 🎯 마커의 경우:
+   * - boxHeight: 본체만 (Hit Test 영역)
+   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   *
    * @param item 마커 또는 폴리곤 데이터
    * @returns 바운딩 박스 또는 null
    */
@@ -262,14 +266,16 @@ var WoongCanvasLayer = function (props) {
         maxY: maxY
       };
     } else {
-      // 마커: 중심점 기준 박스 크기 계산
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
       var offset = getOrComputeMarkerOffset(item);
       if (!offset) return null;
       var boxWidth = item.boxWidth || 50;
       var boxHeight = item.boxHeight || 28;
+      var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
       return {
         minX: offset.x - boxWidth / 2,
-        minY: offset.y - boxHeight - 6,
+        minY: offset.y - boxHeight - tailHeight,
         maxX: offset.x + boxWidth / 2,
         maxY: offset.y
       };
@@ -286,10 +292,10 @@ var WoongCanvasLayer = function (props) {
   var buildSpatialIndex = function () {
     var spatial = spatialIndexRef.current;
     spatial.clear();
-    var currentMarkers = markersRef.current;
+    var currentData = dataRef.current;
 
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
       var bbox = computeBoundingBox(item);
 
@@ -353,13 +359,13 @@ var WoongCanvasLayer = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : markersRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
 
           if (topOnHover && !renderEvent && hovered) {
             // hover된 항목 제외하고 렌더링
-            visibleMarkers = visibleMarkers.filter(function (item) {
+            visibleItems = visibleItems.filter(function (item) {
               return item.id !== hovered.id;
             });
           } // 일반 항목 렌더링
@@ -367,7 +373,7 @@ var WoongCanvasLayer = function (props) {
 
           renderBase({
             ctx: ctx,
-            items: visibleMarkers,
+            items: visibleItems,
             selectedIds: selectedIdsRef.current,
             utils: renderUtils
           }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
@@ -411,7 +417,7 @@ var WoongCanvasLayer = function (props) {
     renderAnimation({
       layer: layer,
       selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
+      items: dataRef.current,
       utils: renderUtils
     });
   };
@@ -1000,9 +1006,9 @@ var WoongCanvasLayer = function (props) {
   // --------------------------------------------------------------------------
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
+    if (!stageRef.current) return; // dataRef 동기화
 
-    markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -1030,13 +1036,13 @@ var WoongCanvasLayer = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var markersMap = new Map(data.map(function (m) {
+    var dataMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
     selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
 
       if (currentItem) {
         newSelectedItemsMap.set(id, currentItem);
@@ -1048,7 +1054,7 @@ var WoongCanvasLayer = function (props) {
           newSelectedItemsMap.set(id, prevItem);
         }
       }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

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

@@ -27,6 +27,7 @@ export interface KonvaCanvasOption {
     position: Position;
     boxWidth?: number;
     boxHeight?: number;
+    tailHeight?: number;
     paths?: Paths;
     isDonutPolygon?: boolean;
 }

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

@@ -26,7 +26,12 @@ export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => b
  */
 export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
 export declare const hexToRgba: (hexColor: string, alpha?: number) => string;

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

@@ -143,7 +143,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
   return false;
 };
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -151,9 +156,11 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = 6;
+  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
   var x = markerOffset.x - boxWidth / 2;
-  var y = markerOffset.y - boxHeight - tailHeight;
+  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) {

package/dist/index.es.js

@@ -931,7 +931,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
   return false;
 };
 /**
- * 마커 히트 테스트
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
+ *
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
  */
 
 var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -939,9 +944,11 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
   if (!markerOffset) return false;
   var boxWidth = markerData.boxWidth || 50;
   var boxHeight = markerData.boxHeight || 28;
-  var tailHeight = 6;
+  var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
   var x = markerOffset.x - boxWidth / 2;
-  var y = markerOffset.y - boxHeight - tailHeight;
+  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) {
@@ -5691,7 +5698,7 @@ var WoongCanvasLayer = function (props) {
 
   /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-  var markersRef = useRef(data); // --------------------------------------------------------------------------
+  var dataRef = useRef(data); // --------------------------------------------------------------------------
   // State Refs - 선택 및 Hover 상태 관리
   // --------------------------------------------------------------------------
 
@@ -5842,6 +5849,10 @@ var WoongCanvasLayer = function (props) {
   /**
    * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
    *
+   * 🎯 마커의 경우:
+   * - boxHeight: 본체만 (Hit Test 영역)
+   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   *
    * @param item 마커 또는 폴리곤 데이터
    * @returns 바운딩 박스 또는 null
    */
@@ -5882,14 +5893,16 @@ var WoongCanvasLayer = function (props) {
         maxY: maxY
       };
     } else {
-      // 마커: 중심점 기준 박스 크기 계산
+      // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
       var offset = getOrComputeMarkerOffset(item);
       if (!offset) return null;
       var boxWidth = item.boxWidth || 50;
       var boxHeight = item.boxHeight || 28;
+      var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
       return {
         minX: offset.x - boxWidth / 2,
-        minY: offset.y - boxHeight - 6,
+        minY: offset.y - boxHeight - tailHeight,
         maxX: offset.x + boxWidth / 2,
         maxY: offset.y
       };
@@ -5906,10 +5919,10 @@ var WoongCanvasLayer = function (props) {
   var buildSpatialIndex = function () {
     var spatial = spatialIndexRef.current;
     spatial.clear();
-    var currentMarkers = markersRef.current;
+    var currentData = dataRef.current;
 
-    for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-      var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
       var bbox = computeBoundingBox(item);
 
@@ -5973,13 +5986,13 @@ var WoongCanvasLayer = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-          var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+          var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }) : markersRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+          }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
 
           if (topOnHover && !renderEvent && hovered) {
             // hover된 항목 제외하고 렌더링
-            visibleMarkers = visibleMarkers.filter(function (item) {
+            visibleItems = visibleItems.filter(function (item) {
               return item.id !== hovered.id;
             });
           } // 일반 항목 렌더링
@@ -5987,7 +6000,7 @@ var WoongCanvasLayer = function (props) {
 
           renderBase({
             ctx: ctx,
-            items: visibleMarkers,
+            items: visibleItems,
             selectedIds: selectedIdsRef.current,
             utils: renderUtils
           }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
@@ -6031,7 +6044,7 @@ var WoongCanvasLayer = function (props) {
     renderAnimation({
       layer: layer,
       selectedIds: selectedIdsRef.current,
-      items: markersRef.current,
+      items: dataRef.current,
       utils: renderUtils
     });
   };
@@ -6620,9 +6633,9 @@ var WoongCanvasLayer = function (props) {
   // --------------------------------------------------------------------------
 
   useEffect(function () {
-    if (!stageRef.current) return; // markersRef 동기화
+    if (!stageRef.current) return; // dataRef 동기화
 
-    markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
     if (containerRef.current) {
       containerRef.current.style.transform = '';
@@ -6650,13 +6663,13 @@ var WoongCanvasLayer = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var markersMap = new Map(data.map(function (m) {
+    var dataMap = new Map(data.map(function (m) {
       return [m.id, m];
     }));
     var newSelectedItemsMap = new Map();
     selectedIdsRef.current.forEach(function (id) {
-      // 현재 markers에 있으면 최신 데이터 사용
-      var currentItem = markersMap.get(id);
+      // 현재 data에 있으면 최신 데이터 사용
+      var currentItem = dataMap.get(id);
 
       if (currentItem) {
         newSelectedItemsMap.set(id, currentItem);
@@ -6668,7 +6681,7 @@ var WoongCanvasLayer = function (props) {
           newSelectedItemsMap.set(id, prevItem);
         }
       }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
     selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

package/dist/index.umd.js

@@ -935,7 +935,12 @@
     return false;
   };
   /**
-   * 마커 히트 테스트
+   * 마커 히트 테스트 (클릭/hover 영역 체크)
+   *
+   * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
+   * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
+   * - boxHeight는 마커 본체만 포함 (꼬리 제외)
+   * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
    */
 
   var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -943,9 +948,11 @@
     if (!markerOffset) return false;
     var boxWidth = markerData.boxWidth || 50;
     var boxHeight = markerData.boxHeight || 28;
-    var tailHeight = 6;
+    var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
+
     var x = markerOffset.x - boxWidth / 2;
-    var y = markerOffset.y - boxHeight - tailHeight;
+    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) {
@@ -5695,7 +5702,7 @@
 
     /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
 
-    var markersRef = React.useRef(data); // --------------------------------------------------------------------------
+    var dataRef = React.useRef(data); // --------------------------------------------------------------------------
     // State Refs - 선택 및 Hover 상태 관리
     // --------------------------------------------------------------------------
 
@@ -5846,6 +5853,10 @@
     /**
      * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
      *
+     * 🎯 마커의 경우:
+     * - boxHeight: 본체만 (Hit Test 영역)
+     * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+     *
      * @param item 마커 또는 폴리곤 데이터
      * @returns 바운딩 박스 또는 null
      */
@@ -5886,14 +5897,16 @@
           maxY: maxY
         };
       } else {
-        // 마커: 중심점 기준 박스 크기 계산
+        // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
         var offset = getOrComputeMarkerOffset(item);
         if (!offset) return null;
         var boxWidth = item.boxWidth || 50;
         var boxHeight = item.boxHeight || 28;
+        var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
+
         return {
           minX: offset.x - boxWidth / 2,
-          minY: offset.y - boxHeight - 6,
+          minY: offset.y - boxHeight - tailHeight,
           maxX: offset.x + boxWidth / 2,
           maxY: offset.y
         };
@@ -5910,10 +5923,10 @@
     var buildSpatialIndex = function () {
       var spatial = spatialIndexRef.current;
       spatial.clear();
-      var currentMarkers = markersRef.current;
+      var currentData = dataRef.current;
 
-      for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-        var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
+      for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
+        var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
         var bbox = computeBoundingBox(item);
 
@@ -5977,13 +5990,13 @@
             var ctx = context;
             var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
-            var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
+            var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
               return isInViewport(item);
-            }) : markersRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+            }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
 
             if (topOnHover && !renderEvent && hovered) {
               // hover된 항목 제외하고 렌더링
-              visibleMarkers = visibleMarkers.filter(function (item) {
+              visibleItems = visibleItems.filter(function (item) {
                 return item.id !== hovered.id;
               });
             } // 일반 항목 렌더링
@@ -5991,7 +6004,7 @@
 
             renderBase({
               ctx: ctx,
-              items: visibleMarkers,
+              items: visibleItems,
               selectedIds: selectedIdsRef.current,
               utils: renderUtils
             }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
@@ -6035,7 +6048,7 @@
       renderAnimation({
         layer: layer,
         selectedIds: selectedIdsRef.current,
-        items: markersRef.current,
+        items: dataRef.current,
         utils: renderUtils
       });
     };
@@ -6624,9 +6637,9 @@
     // --------------------------------------------------------------------------
 
     React.useEffect(function () {
-      if (!stageRef.current) return; // markersRef 동기화
+      if (!stageRef.current) return; // dataRef 동기화
 
-      markersRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+      dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
 
       if (containerRef.current) {
         containerRef.current.style.transform = '';
@@ -6654,13 +6667,13 @@
        * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
        */
 
-      var markersMap = new Map(data.map(function (m) {
+      var dataMap = new Map(data.map(function (m) {
         return [m.id, m];
       }));
       var newSelectedItemsMap = new Map();
       selectedIdsRef.current.forEach(function (id) {
-        // 현재 markers에 있으면 최신 데이터 사용
-        var currentItem = markersMap.get(id);
+        // 현재 data에 있으면 최신 데이터 사용
+        var currentItem = dataMap.get(id);
 
         if (currentItem) {
           newSelectedItemsMap.set(id, currentItem);
@@ -6672,7 +6685,7 @@
             newSelectedItemsMap.set(id, prevItem);
           }
         }
-      }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
+      }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
 
       selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
 

package/package.json

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