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

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

@@ -0,0 +1,183 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ */
+import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
+import type { PolygonStyleFunction } from "./CanvasPolygonLayer";
+/**
+ * 폴리곤 그리기 파라미터 인터페이스
+ */
+interface DrawPolygonParams {
+    /** Canvas 2D 렌더링 컨텍스트 */
+    ctx: CanvasRenderingContext2D;
+    /** 변환된 폴리곤 좌표 배열 (4차원: [MultiPolygon][Polygon][Point][x/y]) */
+    polygonOffsets: number[][][][];
+    /** 도넛 폴리곤 여부 (구멍이 있는 폴리곤) */
+    isDonutPolygon: boolean;
+    /** 채우기 색상 */
+    fillColor: string;
+    /** 테두리 색상 */
+    strokeColor: string;
+    /** 테두리 두께 */
+    lineWidth: number;
+}
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ *
+ * 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<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @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)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @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
+ *   2,                            // baseLineWidth
+ *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+ *   '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<T>;
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+ *   (item, context) => ({
+ *     fillColor: 'rgba(255, 100, 100, 0.5)',
+ *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+ *     lineWidth: 2
+ *   })
+ * );
+ * ```
+ */
+export declare const renderPolygonBaseWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderBase<T>;
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+ *   (item, context) => {
+ *     if (context.isActive) {
+ *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *     }
+ *     if (context.isHovered) {
+ *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *     }
+ *     if (context.isSelected) {
+ *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *     }
+ *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *   }
+ * );
+ * ```
+ */
+export declare const renderPolygonEventWithFunction: <T = any>(renderStyle: PolygonStyleFunction<T>) => CustomRenderEvent<T>;
+export {};

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

@@ -0,0 +1,482 @@
+'use strict';
+
+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,
+      polygonOffsets = _a.polygonOffsets,
+      isDonutPolygon = _a.isDonutPolygon,
+      fillColor = _a.fillColor,
+      strokeColor = _a.strokeColor,
+      lineWidth = _a.lineWidth;
+
+  for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
+    var multiPolygon = polygonOffsets_1[_i];
+
+    if (isDonutPolygon) {
+      // 도넛 폴리곤 처리: 외부 폴리곤 + 내부 구멍들을 같은 path에 추가
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기 (첫 번째 폴리곤)
+
+      var outerPolygon = multiPolygon[0];
+
+      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();
+      } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
+
+
+      for (var j = 1; j < multiPolygon.length; j++) {
+        var innerPolygon = multiPolygon[j];
+        if (innerPolygon.length === 0) continue;
+        ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
+
+        for (var i = 1; i < innerPolygon.length; i++) {
+          ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
+        }
+
+        ctx.closePath();
+      } // 3. evenodd fill rule로 구멍 뚫기
+
+
+      ctx.fillStyle = fillColor;
+      ctx.fill('evenodd'); // 4. 외곽선 그리기
+
+      ctx.strokeStyle = strokeColor;
+      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;
+        ctx.beginPath();
+        var firstPoint = polygonGroup[0];
+        ctx.moveTo(firstPoint[0], firstPoint[1]);
+
+        for (var i = 1; i < polygonGroup.length; i++) {
+          var point = polygonGroup[i];
+          ctx.lineTo(point[0], point[1]);
+        }
+
+        ctx.closePath(); // 스타일 설정 및 렌더링
+
+        ctx.fillStyle = fillColor;
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.fill();
+        ctx.stroke();
+      }
+    }
+  }
+};
+/**
+ * 폴리곤 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) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+      var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림 (중복 렌더링 방지)
+
+      if (selectedIds.has(item.id)) continue; // paths가 없으면 스킵
+
+      if (!item.paths) continue; // 좌표 변환 (자동 캐싱)
+
+      var polygonOffsets = utils.getOrComputePolygonOffsets(item);
+      if (!polygonOffsets) continue; // 폴리곤 그리기
+
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: baseFillColor,
+        strokeColor: baseStrokeColor,
+        lineWidth: baseLineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * 선택된 항목, hover된 항목, 마지막 선택된 항목을 각각 다른 스타일로 렌더링합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @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)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @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
+ *   2,                            // baseLineWidth
+ *   'rgba(255, 193, 7, 0.7)',    // selectedFillColor
+ *   'rgba(255, 152, 0, 1)',      // selectedStrokeColor
+ *   4                             // selectedLineWidth
+ * );
+ * ```
+ */
+
+var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (base 기준)
+  var _selectedFillColor = selectedFillColor || baseFillColor;
+
+  var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
+
+  var _selectedLineWidth = selectedLineWidth || baseLineWidth;
+
+  var _activeFillColor = activeFillColor || _selectedFillColor;
+
+  var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
+
+  var _activeLineWidth = activeLineWidth || _selectedLineWidth;
+
+  var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
+
+  var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
+
+  var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
+
+  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_1 = selectedItems; _i < selectedItems_1.length; _i++) {
+        var item = selectedItems_1[_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: _selectedFillColor,
+          strokeColor: _selectedStrokeColor,
+          lineWidth: _selectedLineWidth
+        });
+      }
+    } // 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: _activeFillColor,
+          strokeColor: _activeStrokeColor,
+          lineWidth: _activeLineWidth
+        });
+      }
+    } // 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 ? _activeFillColor : _hoveredFillColor,
+        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Base 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Base Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Base Layer 렌더링 함수
+ *
+ * @remarks
+ * - 선택된 항목은 Event Layer에서 그려지므로 Base Layer에서는 스킵
+ * - 성능: O(n), n은 렌더링할 폴리곤 개수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ *
+ * @example
+ * ```typescript
+ * const renderBase = renderPolygonBaseWithFunction<MyDataType>(
+ *   (item, context) => ({
+ *     fillColor: 'rgba(255, 100, 100, 0.5)',
+ *     strokeColor: 'rgba(200, 50, 50, 0.8)',
+ *     lineWidth: 2
+ *   })
+ * );
+ * ```
+ */
+
+var renderPolygonBaseWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        items = _a.items,
+        selectedIds = _a.selectedIds,
+        utils = _a.utils;
+
+    for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {
+      var item = items_2[_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); // 폴리곤 그리기
+
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: item.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
+/**
+ * 폴리곤 Event 렌더링 함수 팩토리 (함수 방식)
+ *
+ * Event Layer에서 사용할 렌더링 함수를 생성합니다.
+ * renderStyle 함수를 사용하여 각 폴리곤의 상태에 따라 스타일을 동적으로 결정합니다.
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ * @param renderStyle 폴리곤 스타일 함수
+ * @returns Event Layer 렌더링 함수
+ *
+ * @remarks
+ * - **렌더링 순서**: 선택된 항목 → 마지막 선택된 항목 → hover된 항목 (최상단)
+ * - **성능**: O(m), m은 선택된 항목 수 + hover된 항목 수
+ * - 좌표 변환은 자동으로 캐싱되어 성능 최적화됨
+ * - hover된 항목이 선택되어 있으면 active 스타일 적용
+ *
+ * @example
+ * ```typescript
+ * const renderEvent = renderPolygonEventWithFunction<MyDataType>(
+ *   (item, context) => {
+ *     if (context.isActive) {
+ *       return { fillColor: 'rgba(255, 152, 0, 0.8)', strokeColor: 'rgba(255, 87, 34, 1)', lineWidth: 5 };
+ *     }
+ *     if (context.isHovered) {
+ *       return { fillColor: 'rgba(100, 150, 255, 0.8)', strokeColor: 'rgba(0, 100, 200, 1)', lineWidth: 3 };
+ *     }
+ *     if (context.isSelected) {
+ *       return { fillColor: 'rgba(255, 193, 7, 0.7)', strokeColor: 'rgba(255, 152, 0, 1)', lineWidth: 4 };
+ *     }
+ *     return { fillColor: 'rgba(255, 100, 100, 0.5)', strokeColor: 'rgba(200, 50, 50, 0.8)', lineWidth: 2 };
+ *   }
+ * );
+ * ```
+ */
+
+var renderPolygonEventWithFunction = function (renderStyle) {
+  return function (_a) {
+    var ctx = _a.ctx,
+        hoveredItem = _a.hoveredItem,
+        utils = _a.utils,
+        selectedItems = _a.selectedItems,
+        selectedItem = _a.selectedItem;
+    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;
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: false
+        };
+        var style = renderStyle(item, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: item.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
+
+
+    if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && hoveredItemId !== selectedItemId) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
+
+      if (polygonOffsets) {
+        var context = {
+          isSelected: true,
+          isHovered: false,
+          isActive: true
+        };
+        var style = renderStyle(selectedItem, context);
+        drawPolygon({
+          ctx: ctx,
+          polygonOffsets: polygonOffsets,
+          isDonutPolygon: selectedItem.isDonutPolygon || false,
+          fillColor: style.fillColor,
+          strokeColor: style.strokeColor,
+          lineWidth: style.lineWidth
+        });
+      }
+    } // 3. 호버된 항목 그리기 (가장 위에 표시)
+
+
+    if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
+      var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
+      if (!polygonOffsets) return; // 좌표 변환 실패 시 스킵 (return은 렌더링 함수 종료)
+      // hover된 항목이 선택되어 있는지 확인
+
+      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
+      };
+      var style = renderStyle(hoveredItem, context);
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: style.fillColor,
+        strokeColor: style.strokeColor,
+        lineWidth: style.lineWidth
+      });
+    }
+  };
+};
+
+exports.drawPolygon = drawPolygon;
+exports.renderPolygonBase = renderPolygonBase;
+exports.renderPolygonBaseWithFunction = renderPolygonBaseWithFunction;
+exports.renderPolygonEvent = renderPolygonEvent;
+exports.renderPolygonEventWithFunction = renderPolygonEventWithFunction;

package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import { MarkerOptions, Offset, Position } from "../../../types";
+/**
+ * 2026-01-06 장한별
+ * 고주영팀장님이 만든 캔버스 마커
+ * 클릭, hover 등의 이벤트가 구현되어있지 않는 버전
+ * RA 지도 제품에서 CanvasMarker 컴포넌트를 사용하고 있음
+ *
+ */
 export interface CanvasMarkerRendererParams<T> {
     context: CanvasRenderingContext2D;
     offset: Offset[];