@mint-ui/map 1.2.0-test.34 → 1.2.0-test.36

package/dist/components/mint-map/core/advanced/woongCanvasPolygon/renderer.d.ts

@@ -2,38 +2,88 @@
  * 폴리곤 렌더링 유틸리티
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
-import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "../shared/types";
+import { CustomRenderBase, CustomRenderEvent, CanvasData } from "../shared/types";
 /**
- * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ * 폴리곤 그리기 파라미터 인터페이스
  */
-export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: {
+interface DrawPolygonParams {
+    /** Canvas 2D 렌더링 컨텍스트 */
     ctx: CanvasRenderingContext2D;
+    /** 변환된 폴리곤 좌표 배열 (4차원: [MultiPolygon][Polygon][Point][x/y]) */
     polygonOffsets: number[][][][];
+    /** 도넛 폴리곤 여부 (구멍이 있는 폴리곤) */
     isDonutPolygon: boolean;
+    /** 채우기 색상 */
     fillColor: string;
+    /** 테두리 색상 */
     strokeColor: string;
+    /** 테두리 두께 */
     lineWidth: number;
-}) => void;
+}
 /**
- * 폴리곤 Base 렌더링 함수
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ *
+ * Canvas 2D Context를 사용하여 폴리곤을 그립니다.
+ * 도넛 폴리곤의 경우 evenodd fill rule을 사용하여 구멍을 처리합니다.
+ *
+ * @param params 폴리곤 그리기 파라미터
  *
+ * @remarks
+ * - **도넛 폴리곤 처리**:
+ *   - 외부 폴리곤과 내부 구멍들을 같은 path에 추가
+ *   - `fill('evenodd')`를 사용하여 구멍 뚫기
+ * - **일반 폴리곤 처리**: 각 폴리곤 그룹을 개별적으로 그리기
+ * - **성능**: O(n), n은 폴리곤의 총 좌표 수
+ *
+ * @example
+ * ```typescript
+ * drawPolygon({
+ *   ctx,
+ *   polygonOffsets: [[[[100, 200], [200, 200], [200, 100], [100, 100]]]],
+ *   isDonutPolygon: false,
+ *   fillColor: 'rgba(255, 0, 0, 0.5)',
+ *   strokeColor: 'rgba(255, 0, 0, 1)',
+ *   lineWidth: 2
+ * });
+ * ```
+ */
+export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: DrawPolygonParams) => void;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택되지 않은 폴리곤만 렌더링하며, 선택된 항목은 Event Layer에서 처리됩니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상
  * @param baseStrokeColor 기본 폴리곤 테두리 색상
  * @param baseLineWidth 기본 폴리곤 테두리 두께
  * @returns Base Layer 렌더링 함수
  *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
  * @example
+ * ```typescript
  * const renderBase = renderPolygonBase(
  *   'rgba(255, 100, 100, 0.5)',
  *   'rgba(200, 50, 50, 0.8)',
  *   2
  * );
+ * ```
  */
-export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasData<T>>;
+export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<CanvasData<T>>;
 /**
- * 폴리곤 Event 렌더링 함수
+ * 폴리곤 Event 렌더링 함수 팩토리
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
  *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
  * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
  * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
@@ -48,7 +98,14 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
  * @returns Event Layer 렌더링 함수
  *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
  * @example
+ * ```typescript
  * const renderEvent = renderPolygonEvent(
  *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
  *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
@@ -57,5 +114,7 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
  *   4                             // selectedLineWidth
  * );
+ * ```
  */
-export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasData<T>>;
+export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<CanvasData<T>>;
+export {};

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

@@ -6,10 +6,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * 폴리곤 렌더링 유틸리티
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
 
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ *
+ * Canvas 2D Context를 사용하여 폴리곤을 그립니다.
+ * 도넛 폴리곤의 경우 evenodd fill rule을 사용하여 구멍을 처리합니다.
+ *
+ * @param params 폴리곤 그리기 파라미터
+ *
+ * @remarks
+ * - **도넛 폴리곤 처리**:
+ *   - 외부 폴리곤과 내부 구멍들을 같은 path에 추가
+ *   - `fill('evenodd')`를 사용하여 구멍 뚫기
+ * - **일반 폴리곤 처리**: 각 폴리곤 그룹을 개별적으로 그리기
+ * - **성능**: O(n), n은 폴리곤의 총 좌표 수
+ *
+ * @example
+ * ```typescript
+ * drawPolygon({
+ *   ctx,
+ *   polygonOffsets: [[[[100, 200], [200, 200], [200, 100], [100, 100]]]],
+ *   isDonutPolygon: false,
+ *   fillColor: 'rgba(255, 0, 0, 0.5)',
+ *   strokeColor: 'rgba(255, 0, 0, 1)',
+ *   lineWidth: 2
+ * });
+ * ```
  */
 var drawPolygon = function (_a) {
   var ctx = _a.ctx,
@@ -23,13 +48,16 @@ var drawPolygon = function (_a) {
     var multiPolygon = polygonOffsets_1[_i];
 
     if (isDonutPolygon) {
-      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+      // 도넛 폴리곤 처리: 외부 폴리곤 + 내부 구멍들을 같은 path에 추가
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기 (첫 번째 폴리곤)
 
-      if (multiPolygon[0] && multiPolygon[0].length > 0) {
-        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+      var outerPolygon = multiPolygon[0];
 
-        for (var i = 1; i < multiPolygon[0].length; i++) {
-          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
+      if (outerPolygon && outerPolygon.length > 0) {
+        ctx.moveTo(outerPolygon[0][0], outerPolygon[0][1]);
+
+        for (var i = 1; i < outerPolygon.length; i++) {
+          ctx.lineTo(outerPolygon[i][0], outerPolygon[i][1]);
         }
 
         ctx.closePath();
@@ -56,7 +84,7 @@ var drawPolygon = function (_a) {
       ctx.lineWidth = lineWidth;
       ctx.stroke();
     } else {
-      // 일반 폴리곤
+      // 일반 폴리곤 처리: 각 폴리곤 그룹을 개별적으로 그리기
       for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
         var polygonGroup = multiPolygon_1[_b];
         if (!polygonGroup.length) continue;
@@ -69,7 +97,8 @@ var drawPolygon = function (_a) {
           ctx.lineTo(point[0], point[1]);
         }
 
-        ctx.closePath();
+        ctx.closePath(); // 스타일 설정 및 렌더링
+
         ctx.fillStyle = fillColor;
         ctx.strokeStyle = strokeColor;
         ctx.lineWidth = lineWidth;
@@ -80,19 +109,30 @@ var drawPolygon = function (_a) {
   }
 };
 /**
- * 폴리곤 Base 렌더링 함수
+ * 폴리곤 Base 렌더링 함수 팩토리
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택되지 않은 폴리곤만 렌더링하며, 선택된 항목은 Event Layer에서 처리됩니다.
  *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상
  * @param baseStrokeColor 기본 폴리곤 테두리 색상
  * @param baseLineWidth 기본 폴리곤 테두리 두께
  * @returns Base Layer 렌더링 함수
  *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
  * @example
+ * ```typescript
  * const renderBase = renderPolygonBase(
  *   'rgba(255, 100, 100, 0.5)',
  *   'rgba(200, 50, 50, 0.8)',
  *   2
  * );
+ * ```
  */
 
 var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
@@ -103,12 +143,15 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
         utils = _a.utils;
 
     for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
-      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
 
-      if (selectedIds.has(item.id)) continue;
-      if (!item.paths) continue;
       var polygonOffsets = utils.getOrComputePolygonOffsets(item);
-      if (!polygonOffsets) continue;
+      if (!polygonOffsets) continue; // 폴리곤 그리기
+
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,
@@ -121,8 +164,12 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
   };
 };
 /**
- * 폴리곤 Event 렌더링 함수
+ * 폴리곤 Event 렌더링 함수 팩토리
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
  *
+ * @template T 폴리곤 데이터의 추가 속성 타입
  * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
  * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
  * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
@@ -137,7 +184,14 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
  * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
  * @returns Event Layer 렌더링 함수
  *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
  * @example
+ * ```typescript
  * const renderEvent = renderPolygonEvent(
  *   'rgba(255, 100, 100, 0.5)',  // baseFillColor
  *   'rgba(200, 50, 50, 0.8)',    // baseStrokeColor
@@ -146,6 +200,7 @@ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth)
  *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
  *   4                             // selectedLineWidth
  * );
+ * ```
  */
 
 var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
@@ -173,13 +228,19 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
         hoveredItem = _a.hoveredItem,
         utils = _a.utils,
         selectedItems = _a.selectedItems,
-        selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
+        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_1 = selectedItems; _i < selectedItems_1.length; _i++) {
         var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
 
-        if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
+        if (item.id === selectedItemId || item.id === hoveredItemId) continue;
         if (!item.paths) continue;
         var polygonOffsets = utils.getOrComputePolygonOffsets(item);
         if (!polygonOffsets) continue;
@@ -195,7 +256,7 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
     } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
 
 
-    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
       var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
 
       if (polygonOffsets) {
@@ -213,10 +274,10 @@ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth
 
     if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
       var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
-      if (!polygonOffsets) return;
-      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
-        return item.id === hoveredItem.id;
-      });
+      if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+      // 성능 최적화: Set을 사용하여 O(1) 조회 (이전: O(m) some() 체크)
+
+      var isSelected = selectedIdsSet.has(hoveredItem.id);
       drawPolygon({
         ctx: ctx,
         polygonOffsets: polygonOffsets,