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

package/dist/index.umd.js

@@ -5539,9 +5539,12 @@
   /**
    * 폴리곤 Event 렌더링 함수
    *
-   * @param selectedFillColor 선택된 폴리곤 채우기 색상
-   * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
-   * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+   * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
+   * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
+   * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
+   * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
+   * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
+   * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
    * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
    * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
    * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
@@ -5552,29 +5555,34 @@
    *
    * @example
    * const renderEvent = renderPolygonEvent(
-   *   'rgba(255, 193, 7, 0.7)',
-   *   'rgba(255, 152, 0, 1)',
-   *   4,
-   *   'rgba(255, 0, 0, 0.8)',
-   *   undefined,
-   *   undefined,
-   *   'rgba(100, 150, 255, 0.8)'
+   *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
+   *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
+   *   2,                            // baseLineWidth
+   *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+   *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+   *   4                             // selectedLineWidth
    * );
    */
 
-  var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
-    // 기본값 설정 (selected 기준)
-    var _activeFillColor = activeFillColor || selectedFillColor;
+  var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+    // 기본값 설정 (base 기준)
+    var _selectedFillColor = selectedFillColor || baseFillColor;
 
-    var _activeStrokeColor = activeStrokeColor || selectedStrokeColor;
+    var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
 
-    var _activeLineWidth = activeLineWidth || selectedLineWidth;
+    var _selectedLineWidth = selectedLineWidth || baseLineWidth;
 
-    var _hoveredFillColor = hoveredFillColor || selectedFillColor;
+    var _activeFillColor = activeFillColor || _selectedFillColor;
 
-    var _hoveredStrokeColor = hoveredStrokeColor || selectedStrokeColor;
+    var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
 
-    var _hoveredLineWidth = hoveredLineWidth || selectedLineWidth;
+    var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+    var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+    var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+    var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
 
     return function (_a) {
       var ctx = _a.ctx,
@@ -5595,9 +5603,9 @@
             ctx: ctx,
             polygonOffsets: polygonOffsets,
             isDonutPolygon: item.isDonutPolygon || false,
-            fillColor: selectedFillColor,
-            strokeColor: selectedStrokeColor,
-            lineWidth: selectedLineWidth
+            fillColor: _selectedFillColor,
+            strokeColor: _selectedStrokeColor,
+            lineWidth: _selectedLineWidth
           });
         }
       } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
@@ -5640,7 +5648,7 @@
   // 메인 컴포넌트
   // ============================================================================
 
-  var WoongCanvasLayerComponent = function (props) {
+  var WoongCanvasLayer = function (props) {
     var data = props.data,
         dataType = props.dataType,
         onClick = props.onClick,
@@ -5782,55 +5790,11 @@
       var bbox = boundingBoxCacheRef.current.get(item.id);
 
       if (!bbox) {
-        // 폴리곤인 경우
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          var offsets = getOrComputePolygonOffsets(item);
-          if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
-
-          var minX = Infinity,
-              minY = Infinity,
-              maxX = -Infinity,
-              maxY = -Infinity;
-
-          for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
-            var multiPolygon = offsets_1[_i];
-
-            for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
-              var polygonGroup = multiPolygon_1[_a];
-
-              for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
-                var _c = polygonGroup_1[_b],
-                    x = _c[0],
-                    y = _c[1];
-                if (x < minX) minX = x;
-                if (y < minY) minY = y;
-                if (x > maxX) maxX = x;
-                if (y > maxY) maxY = y;
-              }
-            }
-          }
-
-          bbox = {
-            minX: minX,
-            minY: minY,
-            maxX: maxX,
-            maxY: maxY
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        } // 마커인 경우
-        else {
-          var offset = getOrComputeMarkerOffset(item);
-          if (!offset) return false;
-          var boxWidth = item.boxWidth || 50;
-          var boxHeight = item.boxHeight || 28;
-          bbox = {
-            minX: offset.x - boxWidth / 2,
-            minY: offset.y - boxHeight - 6,
-            maxX: offset.x + boxWidth / 2,
-            maxY: offset.y
-          };
-          boundingBoxCacheRef.current.set(item.id, bbox);
-        }
+        // 바운딩 박스 계산 (공통 함수 사용)
+        var computed = computeBoundingBox(item);
+        if (!computed) return false;
+        bbox = computed;
+        boundingBoxCacheRef.current.set(item.id, bbox);
       } // 바운딩 박스와 viewport 교차 체크
 
 
@@ -5876,6 +5840,65 @@
 
       return result;
     }; // --------------------------------------------------------------------------
+    // 유틸리티 함수: 바운딩 박스 계산
+    // --------------------------------------------------------------------------
+
+    /**
+     * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
+     *
+     * @param item 마커 또는 폴리곤 데이터
+     * @returns 바운딩 박스 또는 null
+     */
+
+
+    var computeBoundingBox = function (item) {
+      if (dataType === exports.CanvasDataType.POLYGON) {
+        // 폴리곤: 모든 좌표의 최소/최대값 계산
+        var offsets = getOrComputePolygonOffsets(item);
+        if (!offsets) return null;
+        var minX = Infinity,
+            minY = Infinity,
+            maxX = -Infinity,
+            maxY = -Infinity;
+
+        for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
+          var multiPolygon = offsets_1[_i];
+
+          for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
+            var polygonGroup = multiPolygon_1[_a];
+
+            for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
+              var _c = polygonGroup_1[_b],
+                  x = _c[0],
+                  y = _c[1];
+              if (x < minX) minX = x;
+              if (y < minY) minY = y;
+              if (x > maxX) maxX = x;
+              if (y > maxY) maxY = y;
+            }
+          }
+        }
+
+        return {
+          minX: minX,
+          minY: minY,
+          maxX: maxX,
+          maxY: maxY
+        };
+      } else {
+        // 마커: 중심점 기준 박스 크기 계산
+        var offset = getOrComputeMarkerOffset(item);
+        if (!offset) return null;
+        var boxWidth = item.boxWidth || 50;
+        var boxHeight = item.boxHeight || 28;
+        return {
+          minX: offset.x - boxWidth / 2,
+          minY: offset.y - boxHeight - 6,
+          maxX: offset.x + boxWidth / 2,
+          maxY: offset.y
+        };
+      }
+    }; // --------------------------------------------------------------------------
     // 유틸리티 함수: 공간 인덱싱
     // --------------------------------------------------------------------------
 
@@ -5890,52 +5913,12 @@
       var currentMarkers = markersRef.current;
 
       for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
-        var item = currentMarkers_1[_i];
+        var item = currentMarkers_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
 
-        if (dataType === exports.CanvasDataType.POLYGON) {
-          // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
-          var offsets = getOrComputePolygonOffsets(item);
-
-          if (offsets) {
-            var minX = Infinity,
-                minY = Infinity,
-                maxX = -Infinity,
-                maxY = -Infinity;
-
-            for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
-              var multiPolygon = offsets_2[_a];
-
-              for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
-                var polygonGroup = multiPolygon_2[_b];
-
-                for (var _c = 0, polygonGroup_2 = polygonGroup; _c < polygonGroup_2.length; _c++) {
-                  var _d = polygonGroup_2[_c],
-                      x = _d[0],
-                      y = _d[1];
-                  if (x < minX) minX = x;
-                  if (y < minY) minY = y;
-                  if (x > maxX) maxX = x;
-                  if (y > maxY) maxY = y;
-                }
-              }
-            }
+        var bbox = computeBoundingBox(item);
 
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
-        } else {
-          // 마커: 점 기반 바운딩 박스
-          var offset = getOrComputeMarkerOffset(item);
-
-          if (offset) {
-            var boxWidth = item.boxWidth || 50;
-            var boxHeight = item.boxHeight || 28;
-            var tailHeight = 6;
-            var minX = offset.x - boxWidth / 2;
-            var minY = offset.y - boxHeight - tailHeight;
-            var maxX = offset.x + boxWidth / 2;
-            var maxY = offset.y;
-            spatial.insert(item, minX, minY, maxX, maxY);
-          }
+        if (bbox) {
+          spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
         }
       }
     }; // --------------------------------------------------------------------------
@@ -5964,7 +5947,7 @@
     var renderAnimation = dataType === exports.CanvasDataType.MARKER ? props.renderAnimation : undefined;
     var renderEvent = dataType === exports.CanvasDataType.MARKER ? props.renderEvent : function () {
       var polygonProps = props;
-      return renderPolygonEvent(polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
+      return renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
     }();
     /**
      * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
@@ -5973,6 +5956,10 @@
      * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
      * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
      * 3. 클로저로 최신 데이터 참조
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+     * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
      */
 
     var doRenderBase = function () {
@@ -5987,17 +5974,40 @@
         shape = new Konva__default["default"].Shape({
           name: 'base-render-shape',
           sceneFunc: function (context, shape) {
-            var ctx = context; // 클로저로 최신 ref 값 참조
+            var ctx = context;
+            var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
 
             var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
               return isInViewport(item);
-            }) : markersRef.current;
+            }) : markersRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
+
+            if (topOnHover && !renderEvent && hovered) {
+              // hover된 항목 제외하고 렌더링
+              visibleMarkers = visibleMarkers.filter(function (item) {
+                return item.id !== hovered.id;
+              });
+            } // 일반 항목 렌더링
+
+
             renderBase({
               ctx: ctx,
               items: visibleMarkers,
               selectedIds: selectedIdsRef.current,
               utils: renderUtils
-            });
+            }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
+
+            if (topOnHover && !renderEvent && hovered) {
+              var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
+
+              if (isHoveredInViewport) {
+                renderBase({
+                  ctx: ctx,
+                  items: [hovered],
+                  selectedIds: selectedIdsRef.current,
+                  utils: renderUtils
+                });
+              }
+            }
           },
           perfectDrawEnabled: false,
           listening: false,
@@ -6042,13 +6052,6 @@
     var doRenderEvent = function () {
       var layer = eventLayerRef.current;
       if (!layer) return;
-
-      if (!onClick && !onMouseOver && !onMouseOut) {
-        layer.destroyChildren();
-        layer.batchDraw();
-        return;
-      }
-
       if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
 
       var shape = layer.findOne('.event-render-shape');
@@ -6237,17 +6240,19 @@
       return null;
     };
     /**
-     * Hover 상태 설정 및 Event 레이어 렌더링
+     * Hover 상태 설정 및 레이어 렌더링
      *
      * @param data hover된 마커/폴리곤 데이터 또는 null
      *
      * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
-     * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
+     *
+     * 🎯 topOnHover 지원:
+     * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+     * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
      */
 
 
     var setHovered = function (data) {
-      if (!onMouseOver && !onMouseOut) return;
       hoveredItemRef.current = data;
 
       if (draggingRef.current) {
@@ -6255,10 +6260,15 @@
       } else {
         controller.setMapCursor(data ? 'pointer' : 'grab');
       } // 즉시 렌더링 (RAF 없이)
-      // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
 
 
-      doRenderEvent();
+      if (renderEvent) {
+        // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
+        doRenderEvent();
+      } else if (topOnHover) {
+        // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
+        doRenderBase();
+      }
     };
     /**
      * 클릭 처리 (단일/다중 선택)
@@ -6272,8 +6282,7 @@
 
 
     var handleLocalClick = function (data) {
-      if (!onClick) return; // 1. 선택 상태 업데이트
-
+      // 1. 선택 상태 업데이트
       if (enableMultiSelect) {
         // 다중 선택: Set과 Map 동시 업데이트
         var newSelected = new Set(selectedIdsRef.current);
@@ -6325,7 +6334,6 @@
 
       if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-      if (!onClick) return;
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
@@ -6334,7 +6342,10 @@
 
         if (data_1) {
           handleLocalClick(data_1);
-          onClick(data_1, selectedIdsRef.current);
+
+          if (onClick) {
+            onClick(data_1, selectedIdsRef.current);
+          }
         }
       } catch (error) {
         console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6350,7 +6361,6 @@
 
       if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-      if (!onMouseOver && !onMouseOut) return;
       if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
 
       try {
@@ -6393,7 +6403,6 @@
     var handleMouseLeave = function () {
       if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-      if (!onMouseOver && !onMouseOut) return;
       var prevHovered = hoveredItemRef.current;
 
       if (prevHovered) {
@@ -6678,116 +6687,6 @@
       }
     }), divElement);
   };
-  /**
-   * 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
-   *
-   * ## 📌 주요 특징
-   * - **30,000개 이상의 폴리곤/마커를 60fps로 렌더링**
-   * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
-   * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
-   * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
-   * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
-   * - **Discriminated Union Props**: 타입 안전한 MARKER/POLYGON 모드
-   *
-   * ## 🎯 사용 방법
-   *
-   * ### 1️⃣ POLYGON 모드 (자동 렌더링)
-   * ```tsx
-   * <WoongCanvasLayer
-   *   dataType={CanvasDataType.POLYGON}
-   *   data={polygons}
-   *   baseFillColor="rgba(255, 100, 100, 0.5)"
-   *   baseStrokeColor="rgba(200, 50, 50, 0.8)"
-   *   baseLineWidth={2}
-   *   selectedFillColor="rgba(255, 193, 7, 0.7)"
-   *   selectedStrokeColor="rgba(255, 152, 0, 1)"
-   *   selectedLineWidth={4}
-   *   hoveredFillColor="rgba(100, 150, 255, 0.8)"  // optional
-   *   hoveredStrokeColor="rgba(0, 100, 200, 1)"    // optional
-   *   hoveredLineWidth={3}                         // optional
-   *   enableMultiSelect={true}
-   *   onClick={handleClick}
-   * />
-   * ```
-   *
-   * ### 2️⃣ MARKER 모드 (커스텀 렌더링)
-   * ```tsx
-   * <WoongCanvasLayer
-   *   dataType={CanvasDataType.MARKER}
-   *   data={markers}
-   *   renderBase={renderMarkerBase}              // required
-   *   renderAnimation={renderMarkerAnimation}    // optional
-   *   renderEvent={renderMarkerEvent}            // optional
-   *   topOnHover={true}
-   *   onClick={handleClick}
-   * />
-   * ```
-   *
-   * ## 📊 데이터 형식
-   * ```typescript
-   * const data: KonvaCanvasData<T>[] = [
-   *   {
-   *     id: 'unique-id',
-   *     position: new Position(lat, lng),
-   *     // POLYGON: paths 필수
-   *     paths: [[[lat, lng], [lat, lng], ...]],
-   *     // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
-   *     boxWidth: 60,
-   *     boxHeight: 75,
-   *     // 커스텀 데이터
-   *     ...customData
-   *   }
-   * ];
-   * ```
-   *
-   * ## ⚡ 성능 최적화 팁
-   * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
-   * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
-   * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
-   * 4. **React.memo 최적화**: 컴포넌트가 자동으로 불필요한 리렌더링 방지
-   *
-   * @template T 마커/폴리곤 데이터의 추가 속성 타입
-   *
-   * @example
-   * // 동적 boxWidth 계산 예시
-   * const tempCtx = document.createElement('canvas').getContext('2d');
-   * tempCtx.font = 'bold 15px Arial';
-   * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
-   *
-   * @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
-   */
-
-
-  var WoongCanvasLayer = React__default["default"].memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
-    // // 1. data 비교
-    // const prevData = prevProps.data;
-    // const nextData = nextProps.data;
-    // // 참조가 같으면 스킵
-    // if (prevData !== nextData) {
-    //   // 길이가 다르면 변경됨
-    //   if (prevData.length !== nextData.length) return false;
-    //   // 각 데이터의 ID 비교
-    //   for (let i = 0; i < prevData.length; i++) {
-    //     if (prevData[i].id !== nextData[i].id) {
-    //       return false;  // 변경됨 → 리렌더링
-    //     }
-    //   }
-    // }
-    // 2. selectedItems 비교 (참조만 비교)
-    if (prevProps.selectedItems !== nextProps.selectedItems) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    if (prevProps.selectedItem !== nextProps.selectedItem) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    if (prevProps.disableInteraction !== nextProps.disableInteraction) {
-      return false; // 변경됨 → 리렌더링
-    }
-
-    return true; // 같음 → 리렌더링 스킵
-  });
 
   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-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-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};

package/package.json

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