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

package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.js

@@ -7,6 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ *
+ * 세 가지 스타일 지정 방식을 지원하는 렌더링 함수를 제공합니다:
+ * 1. 개별 props 방식: renderPolygonBase, renderPolygonEvent
+ * 2. 객체 방식: renderPolygonBaseWithObject, renderPolygonEventWithObject
+ * 3. 함수 방식: renderPolygonBaseWithCustomStyle, renderPolygonEventWithCustomStyle
  */
 
 /**
@@ -290,13 +295,13 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
   };
 };
 /**
- * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ * 폴리곤 Base 렌더링 함수 팩토리 (객체 방식)
  *
  * Base Layer에서 사용할 렌더링 함수를 생성합니다.
- * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ * renderStyle 객체를 사용하여 기본 스타일을 적용합니다.
  *
  * @template T 폴리곤 데이터의 추가 속성 타입
- * @param renderStyle 폴리곤 스타일 함수
+ * @param renderStyle 폴리곤 스타일 객체
  * @returns Base Layer 렌더링 함수
  *
  * @remarks
@@ -306,17 +311,13 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
  *
  * @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,
@@ -331,14 +332,179 @@ var renderPolygonBaseWithFunction = function (renderStyle) {
       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,
@@ -352,47 +518,47 @@ var renderPolygonBaseWithFunction = function (renderStyle) {
   };
 };
 /**
- * 폴리곤 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();
@@ -400,8 +566,8 @@ var renderPolygonEventWithFunction = function (renderStyle) {
     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;
@@ -412,7 +578,9 @@ var renderPolygonEventWithFunction = function (renderStyle) {
           isHovered: false,
           isActive: false
         };
-        var style = renderStyle(item, context);
+        var style = customStyle(item, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) continue;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -434,7 +602,9 @@ var renderPolygonEventWithFunction = function (renderStyle) {
           isHovered: false,
           isActive: true
         };
-        var style = renderStyle(selectedItem, context);
+        var style = customStyle(selectedItem, context); // null 또는 undefined를 반환하면 그리지 않음
+
+        if (!style) return;
         drawPolygon({
           ctx: ctx,
           polygonOffsets: polygonOffsets,
@@ -450,19 +620,17 @@ var renderPolygonEventWithFunction = function (renderStyle) {
     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,
@@ -477,6 +645,8 @@ var renderPolygonEventWithFunction = function (renderStyle) {
 
 exports.drawPolygon = drawPolygon;
 exports.renderPolygonBase = renderPolygonBase;
-exports.renderPolygonBaseWithFunction = renderPolygonBaseWithFunction;
+exports.renderPolygonBaseWithCustomStyle = renderPolygonBaseWithCustomStyle;
+exports.renderPolygonBaseWithObject = renderPolygonBaseWithObject;
 exports.renderPolygonEvent = renderPolygonEvent;
-exports.renderPolygonEventWithFunction = renderPolygonEventWithFunction;
+exports.renderPolygonEventWithCustomStyle = renderPolygonEventWithCustomStyle;
+exports.renderPolygonEventWithObject = renderPolygonEventWithObject;