@mint-ui/map 1.2.0-test.50 → 1.2.0-test.52

package/dist/index.umd.js

@@ -5760,6 +5760,11 @@
    *
    * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
    * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+   *
+   * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+   * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+   * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+   * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
    */
 
   /**
@@ -6043,13 +6048,13 @@
     };
   };
   /**
-   * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+   * 폴리곤 Base 렌더링 함수 팩토리 (객체 방식)
    *
    * Base Layer에서 사용할 렌더링 함수를 생성합니다.
-   * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+   * renderStyle 객체를 사용하여 기본 스타일을 적용합니다.
    *
    * @template T 폴리곤 데이터의 추가 속성 타입
-   * @param renderStyle 폴리곤 스타일 함수
+   * @param renderStyle 폴리곤 스타일 객체
    * @returns Base Layer 렌더링 함수
    *
    * @remarks
@@ -6059,17 +6064,13 @@
    *
    * @example
    * ```typescript
-   * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
-   *   (item, context) => ({
-   *     fillColor: 'rgba(255, 100, 100, 0.5)',
-   *     strokeColor: 'rgba(200, 50, 50, 0.8)',
-   *     lineWidth: 2
-   *   })
-   * );
+   * const renderBase = renderPolygonBaseWithObject<MyDataType>({
+   *   base: { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 }
+   * });
    * ```
    */
 
-  var renderPolygonBaseWithFunction = function (renderStyle) {
+  var renderPolygonBaseWithObject = function (renderStyle) {
     return function (_a) {
       var ctx = _a.ctx,
           items = _a.items,
@@ -6084,14 +6085,179 @@
         if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
         var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-        if (!polygonOffsets) continue; // 스타일 함수로 스타일 가져오기 (Base Layer는 선택되지 않은 항목만)
+        if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로 base 스타일 사용
+
+        var style = renderStyle.base; // 폴리곤 그리기
+
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    };
+  };
+  /**
+   * 폴리곤 Event 렌더링 함수 팩토리 (객체 방식)
+   *
+   * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+   * renderStyle 객체를 사용하여 개별 props 방식과 동일한 알고리즘으로 스타일을 적용합니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param renderStyle 폴리곤 스타일 객체
+   * @returns Event Layer 렌더링 함수
+   *
+   * @remarks
+   * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+   * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   * - **알고리즘**: 개별 props 방식과 동일
+   *   - 기본값 설정: selected/active/hovered가 없으면 base 또는 상위 값 사용
+   *   - 선택된 항목: selected 스타일
+   *   - 마지막 선택된 항목 (호버 안 됨): active 스타일
+   *   - 호버된 항목: 선택되어 있으면 active, 아니면 hovered 스타일
+   *
+   * @example
+   * ```typescript
+   * const renderEvent = renderPolygonEventWithObject<MyDataType>({
+   *   base: { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 },
+   *   selected: { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 },
+   *   active: { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 },
+   *   hovered: { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 }
+   * });
+   * ```
+   */
+
+  var renderPolygonEventWithObject = function (renderStyle) {
+    // 기본값 설정 (개별 props 방식과 동일한 로직)
+    var _selectedStyle = renderStyle.selected || renderStyle.base;
+
+    var _activeStyle = renderStyle.active || _selectedStyle;
+
+    var _hoveredStyle = renderStyle.hovered || _selectedStyle;
+
+    return function (_a) {
+      var ctx = _a.ctx,
+          hoveredItem = _a.hoveredItem,
+          utils = _a.utils,
+          selectedItems = _a.selectedItems,
+          selectedItem = _a.selectedItem; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
+      var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
+        return item.id;
+      })) : new Set();
+      var hoveredItemId = hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id;
+      var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+
+      if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
+        for (var _i = 0, selectedItems_2 = selectedItems; _i < selectedItems_2.length; _i++) {
+          var item = selectedItems_2[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+
+          if (item.id === selectedItemId || item.id === hoveredItemId) continue;
+          if (!item.paths) continue;
+          var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+          if (!polygonOffsets) continue;
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: item.isDonutPolygon || false,
+            fillColor: _selectedStyle.fillColor,
+            strokeColor: _selectedStyle.strokeColor,
+            lineWidth: _selectedStyle.lineWidth
+          });
+        }
+      } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+      if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+        if (polygonOffsets) {
+          drawPolygon({
+            ctx: ctx,
+            polygonOffsets: polygonOffsets,
+            isDonutPolygon: selectedItem.isDonutPolygon || false,
+            fillColor: _activeStyle.fillColor,
+            strokeColor: _activeStyle.strokeColor,
+            lineWidth: _activeStyle.lineWidth
+          });
+        }
+      } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+      if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+        var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+        if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+        // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+        var isSelected = selectedIdsSet.has(hoveredItem.id);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: hoveredItem.isDonutPolygon || false,
+          fillColor: isSelected ? _activeStyle.fillColor : _hoveredStyle.fillColor,
+          strokeColor: isSelected ? _activeStyle.strokeColor : _hoveredStyle.strokeColor,
+          lineWidth: isSelected ? _activeStyle.lineWidth : _hoveredStyle.lineWidth
+        });
+      }
+    };
+  };
+  /**
+   * 폴리곤 Base 렌더링 함수 팩토리 (커스터마이징 방식)
+   *
+   * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+   * customStyle 함수를 사용하여 각 폴리곤의 스타일을 자유롭게 커스터마이징합니다.
+   *
+   * @template T 폴리곤 데이터의 추가 속성 타입
+   * @param customStyle 폴리곤 스타일 커스터마이징 함수
+   * @returns Base Layer 렌더링 함수
+   *
+   * @remarks
+   * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+   * - 성능: O(n), n은 렌더링할 폴리곤 개수
+   * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+   *
+   * @example
+   * ```typescript
+   * const renderBase = renderPolygonBaseWithCustomStyle<MyDataType>(
+   *   (item, context) => {
+   *     if (item.someProperty > 100) {
+   *       return { fillColor: 'red', strokeColor: 'darkred', lineWidth: 3 };
+   *     }
+   *     // 아무것도 반환하지 않으면 그리지 않음
+   *   }
+   * );
+   * ```
+   */
+
+  var renderPolygonBaseWithCustomStyle = function (customStyle) {
+    return function (_a) {
+      var ctx = _a.ctx,
+          items = _a.items,
+          selectedIds = _a.selectedIds,
+          utils = _a.utils;
+
+      for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {
+        var item = items_3[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+        if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+        if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+        var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+        if (!polygonOffsets) continue; // Base Layer는 선택되지 않은 항목만 그리므로
 
         var context = {
           isSelected: false,
           isHovered: false,
           isActive: false
         };
-        var style = renderStyle(item, context); // 폴리곤 그리기
+        var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) continue; // 폴리곤 그리기
 
         drawPolygon({
           ctx: ctx,
@@ -6105,47 +6271,47 @@
     };
   };
   /**
-   * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+   * 폴리곤 Event 렌더링 함수 팩토리 (커스터마이징 방식)
    *
    * Event Layer에서 사용할 렌더링 함수를 생성합니다.
-   * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+   * customStyle 함수를 사용하여 각 폴리곤의 스타일을 자유롭게 커스터마이징합니다.
    *
    * @template T 폴리곤 데이터의 추가 속성 타입
-   * @param renderStyle 폴리곤 스타일 함수
+   * @param customStyle 폴리곤 스타일 커스터마이징 함수
    * @returns Event Layer 렌더링 함수
    *
    * @remarks
    * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
    * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
    * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
-   * - hover된 항목이 선택되어 있으면 active 스타일 적용
    *
    * @example
    * ```typescript
-   * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+   * const renderEvent = renderPolygonEventWithCustomStyle<MyDataType>(
    *   (item, context) => {
    *     if (context.isActive) {
-   *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+   *       return { fillColor: 'yellow', strokeColor: 'orange', lineWidth: 5 };
    *     }
    *     if (context.isHovered) {
-   *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+   *       return { fillColor: 'blue', strokeColor: 'darkblue', lineWidth: 3 };
    *     }
    *     if (context.isSelected) {
-   *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+   *       return { fillColor: 'green', strokeColor: 'darkgreen', lineWidth: 4 };
    *     }
-   *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+   *     // 아무것도 반환하지 않으면 그리지 않음
    *   }
    * );
    * ```
    */
 
-  var renderPolygonEventWithFunction = function (renderStyle) {
+  var renderPolygonEventWithCustomStyle = function (customStyle) {
     return function (_a) {
       var ctx = _a.ctx,
           hoveredItem = _a.hoveredItem,
           utils = _a.utils,
           selectedItems = _a.selectedItems,
-          selectedItem = _a.selectedItem;
+          selectedItem = _a.selectedItem; // 성능 최적화: selectedItems를 Set으로 변환하여 O(1) 조회 (매번 some() 체크 방지)
+
       var selectedIdsSet = selectedItems ? new Set(selectedItems.map(function (item) {
         return item.id;
       })) : new Set();
@@ -6153,8 +6319,8 @@
       var selectedItemId = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
 
       if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
-        for (var _i = 0, selectedItems_2 = selectedItems; _i < selectedItems_2.length; _i++) {
-          var item = selectedItems_2[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
+        for (var _i = 0, selectedItems_3 = selectedItems; _i < selectedItems_3.length; _i++) {
+          var item = selectedItems_3[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
 
           if (item.id === selectedItemId || item.id === hoveredItemId) continue;
           if (!item.paths) continue;
@@ -6165,7 +6331,9 @@
             isHovered: false,
             isActive: false
           };
-          var style = renderStyle(item, context);
+          var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+          if (!style) continue;
           drawPolygon({
             ctx: ctx,
             polygonOffsets: polygonOffsets,
@@ -6187,7 +6355,9 @@
             isHovered: false,
             isActive: true
           };
-          var style = renderStyle(selectedItem, context);
+          var style = customStyle(selectedItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+          if (!style) return;
           drawPolygon({
             ctx: ctx,
             polygonOffsets: polygonOffsets,
@@ -6203,19 +6373,17 @@
       if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
         var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
         if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
-        // hover된 항목이 선택되어 있는지 확인
+        // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
 
         var isSelected = selectedIdsSet.has(hoveredItem.id);
-        var isActive = isSelected && hoveredItem.id === selectedItemId; // 개별 props 방식과 동일한 로직: 선택된 항목이 hover되면 active 스타일을 사용
-        // 따라서 선택된 항목이 hover될 때는 isHovered를 false로 설정하여
-        // renderStyle 함수에서 isActive를 우선적으로 체크할 수 있도록 함
-
         var context = {
           isSelected: isSelected,
           isHovered: !isSelected,
-          isActive: isActive
+          isActive: isSelected && hoveredItem.id === selectedItemId
         };
-        var style = renderStyle(hoveredItem, context);
+        var style = customStyle(hoveredItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) return;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -6243,13 +6411,16 @@
         externalSelectedItem = props.selectedItem,
         _e = props.disableInteraction,
         disableInteraction = _e === void 0 ? false : _e,
-        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderStyle이 있으면 함수 방식, baseFillColor가 있으면 개별 props 방식
+        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // 세 가지 방식 중 하나만 선택: customStyle > renderStyle > 개별 props
 
 
-    var isFunctionMode = 'renderStyle' in props && props.renderStyle !== undefined; // 개별 props 방식일 때만 추출
+    var isCustomStyleMode = 'customStyle' in props && props.customStyle !== undefined;
+    var isObjectMode = !isCustomStyleMode && 'renderStyle' in props && props.renderStyle !== undefined;
+    var isIndividualMode = !isCustomStyleMode && !isObjectMode; // 각 방식별 props 추출
 
-    var individualProps = isFunctionMode ? undefined : props;
-    var functionProps = isFunctionMode ? props : undefined; // --------------------------------------------------------------------------
+    var customStyleProps = isCustomStyleMode ? props : undefined;
+    var objectProps = isObjectMode ? props : undefined;
+    var individualProps = isIndividualMode ? props : undefined; // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
@@ -6356,11 +6527,11 @@
       }
     }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
 
-    var renderBase = isFunctionMode && functionProps ? renderPolygonBaseWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
-      throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+    var renderBase = isCustomStyleMode && customStyleProps ? renderPolygonBaseWithCustomStyle(customStyleProps.customStyle) : isObjectMode && objectProps ? renderPolygonBaseWithObject(objectProps.renderStyle) : isIndividualMode && individualProps ? renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth) : function () {
+      throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
     }();
-    var renderEvent = isFunctionMode && functionProps ? renderPolygonEventWithFunction(functionProps.renderStyle) : individualProps ? renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth) : function () {
-      throw new Error('Invalid props: either renderStyle or individual style props must be provided');
+    var renderEvent = isCustomStyleMode && customStyleProps ? renderPolygonEventWithCustomStyle(customStyleProps.customStyle) : isObjectMode && objectProps ? renderPolygonEventWithObject(objectProps.renderStyle) : isIndividualMode && individualProps ? renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth) : function () {
+      throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
     }(); // Base Layer 렌더링 (뷰포트 컬링 적용)
 
     var doRenderBase = function () {

package/package.json

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