@mint-ui/map 1.2.0-test.1 → 1.2.0-test.11

package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts

@@ -0,0 +1,3 @@
+export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
+export * from "./WoongCanvasLayer";
+export * from "./shared";

package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Offset } from "../../../../types";
-import { CanvasMarkerData } from "./types";
+import { KonvaCanvasMarkerData } from "./types";
 /**
  * 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
  *
@@ -12,13 +12,14 @@ import { CanvasMarkerData } from "./types";
 export interface ComponentInstance<T> {
     zIndex: number;
     hitTest: (offset: Offset) => boolean;
-    onClick?: (payload: CanvasMarkerData<T>, selectedIds: Set<string>) => void;
-    onMouseOver?: (payload: CanvasMarkerData<T>) => void;
-    onMouseOut?: (payload: CanvasMarkerData<T>) => void;
-    findData: (offset: Offset) => CanvasMarkerData<T> | null;
-    setHovered: (data: CanvasMarkerData<T> | null) => void;
-    handleLocalClick: (data: CanvasMarkerData<T>) => void;
+    onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
+    onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
+    onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
+    findData: (offset: Offset) => KonvaCanvasMarkerData<T> | null;
+    setHovered: (data: KonvaCanvasMarkerData<T> | null) => void;
+    handleLocalClick: (data: KonvaCanvasMarkerData<T>) => void;
     getSelectedIds: () => Set<string>;
+    isInteractionDisabled: () => boolean;
 }
 interface KonvaMarkerContextValue {
     registerComponent: <T>(instance: ComponentInstance<T>) => void;

package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js

@@ -55,7 +55,9 @@ var KonvaMarkerProvider = function (_a) {
     var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
 
     for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i];
+      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+      if (component.isInteractionDisabled()) continue;
       var data = component.findData(clickedOffset);
 
       if (data) {
@@ -83,7 +85,9 @@ var KonvaMarkerProvider = function (_a) {
     var newHoveredData = null;
 
     for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-      var component = _b[_i];
+      var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
+
+      if (component.isInteractionDisabled()) continue;
       var data = component.findData(mouseOffset);
 
       if (data) {
@@ -155,5 +159,10 @@ var KonvaMarkerProvider = function (_a) {
     value: contextValue
   }, children);
 };
+var useKonvaMarkerContext = function () {
+  var context = React.useContext(KonvaMarkerContext);
+  return context;
+};
 
 exports.KonvaMarkerProvider = KonvaMarkerProvider;
+exports.useKonvaMarkerContext = useKonvaMarkerContext;

package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js

@@ -0,0 +1,343 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// ============================================================================
+// 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
+// ============================================================================
+
+/**
+ * 공간 인덱스 그리드 셀 크기 (px)
+ *
+ * 최적값 계산:
+ * - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
+ * - 화면 크기: 1920×1080 기준
+ * - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
+ *
+ * 성능 비교 (30,000개 기준):
+ * - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
+ * - 50px:  셀당 ~37개  → Hit Test O(37)  ✅ 15배 빠름!
+ *
+ * 트레이드오프:
+ * - 작을수록: Hit Test 빠름, 메모리 사용량 증가
+ * - 클수록: 메모리 효율적, Hit Test 느림
+ */
+var SPATIAL_GRID_CELL_SIZE = 50;
+/**
+ * 뷰포트 컬링 여유 공간 (px)
+ *
+ * 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
+ * 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
+ */
+
+var DEFAULT_CULLING_MARGIN = 100;
+/**
+ * LRU 캐시 최대 항목 수
+ *
+ * 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
+ *
+ * 최적값 계산:
+ * - 전체 항목: 30,000개
+ * - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
+ *
+ * 메모리 사용량 (항목당 ~80 bytes):
+ * - 10,000개: ~800KB  → 캐시 히트율 33% ❌
+ * - 30,000개: ~2.4MB  → 캐시 히트율 100% ✅
+ *
+ * zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
+ */
+
+var DEFAULT_MAX_CACHE_SIZE = 30000;
+/**
+ * LRU (Least Recently Used) Cache
+ * 메모리 제한을 위한 캐시 구현 (최적화 버전)
+ *
+ * 개선 사항:
+ * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
+ * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
+ * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
+ */
+
+var LRUCache =
+/** @class */
+function () {
+  function LRUCache(maxSize) {
+    if (maxSize === void 0) {
+      maxSize = 10000;
+    }
+
+    this.cache = new Map();
+    this.maxSize = maxSize;
+  }
+  /**
+   * 캐시에서 값 조회
+   *
+   * 최적화: delete+set 제거
+   * - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
+   * - 현재: 단순 조회만 수행 (O(1) 해시 조회)
+   *
+   * 트레이드오프:
+   * - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
+   * - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
+   *
+   * WoongKonvaMarker 사용 사례에 최적:
+   * - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
+   * - 접근 빈도 추적보다 빠른 조회가 더 중요
+   */
+
+
+  LRUCache.prototype.get = function (key) {
+    return this.cache.get(key);
+  };
+  /**
+   * 캐시에 값 저장 (버그 수정 + 최적화)
+   *
+   * 수정 사항:
+   * 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
+   * 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
+   */
+
+
+  LRUCache.prototype.set = function (key, value) {
+    var exists = this.cache.has(key);
+
+    if (exists) {
+      // 기존 항목 업데이트: 단순 덮어쓰기 (크기 변화 없음)
+      this.cache.set(key, value);
+    } else {
+      // 신규 항목 추가: 크기 체크 필요
+      if (this.cache.size >= this.maxSize) {
+        // 가장 오래된 항목 제거 (Map의 첫 번째 항목)
+        var firstKey = this.cache.keys().next().value;
+
+        if (firstKey !== undefined) {
+          this.cache.delete(firstKey);
+        }
+      }
+
+      this.cache.set(key, value);
+    }
+  };
+
+  LRUCache.prototype.clear = function () {
+    this.cache.clear();
+  };
+
+  LRUCache.prototype.size = function () {
+    return this.cache.size;
+  };
+
+  LRUCache.prototype.has = function (key) {
+    return this.cache.has(key);
+  };
+
+  return LRUCache;
+}();
+/**
+ * Spatial Hash Grid (공간 해시 그리드)
+ * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
+ *
+ * 개선 사항:
+ * 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
+ * 2. 메모리 누수 방지: 기존 항목 자동 제거
+ * 3. 성능 최적화: 불필요한 배열 생성 최소화
+ *
+ * 사용 사례:
+ * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
+ * - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
+ */
+
+var SpatialHashGrid =
+/** @class */
+function () {
+  function SpatialHashGrid(cellSize) {
+    if (cellSize === void 0) {
+      cellSize = 200;
+    }
+
+    this.cellSize = cellSize;
+    this.grid = new Map();
+    this.itemToCells = new Map();
+  }
+  /**
+   * 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
+   */
+
+
+  SpatialHashGrid.prototype.getCellKey = function (x, y) {
+    var cellX = Math.floor(x / this.cellSize);
+    var cellY = Math.floor(y / this.cellSize);
+    return "".concat(cellX, ",").concat(cellY);
+  };
+  /**
+   * 바운딩 박스가 걸치는 모든 셀 키 배열 반환
+   */
+
+
+  SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
+    var cells = [];
+    var startCellX = Math.floor(minX / this.cellSize);
+    var startCellY = Math.floor(minY / this.cellSize);
+    var endCellX = Math.floor(maxX / this.cellSize);
+    var endCellY = Math.floor(maxY / this.cellSize);
+
+    for (var x = startCellX; x <= endCellX; x++) {
+      for (var y = startCellY; y <= endCellY; y++) {
+        cells.push("".concat(x, ",").concat(y));
+      }
+    }
+
+    return cells;
+  };
+  /**
+   * 항목 추가 (바운딩 박스 기반)
+   *
+   * 개선 사항:
+   * - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
+   * - 메모리 누수 방지: 이전 셀 참조 완전 제거
+   */
+
+
+  SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
+    // 1. 기존 항목 제거 (중복 방지)
+    this.remove(item); // 2. 새 위치에 삽입
+
+    var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
+    this.itemToCells.set(item, cells);
+
+    for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
+      var cell = cells_1[_i];
+
+      if (!this.grid.has(cell)) {
+        this.grid.set(cell, []);
+      }
+
+      this.grid.get(cell).push(item);
+    }
+  };
+  /**
+   * 항목 제거
+   *
+   * 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
+   */
+
+
+  SpatialHashGrid.prototype.remove = function (item) {
+    var prevCells = this.itemToCells.get(item);
+    if (!prevCells) return; // 각 셀에서 항목 제거
+
+    for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
+      var cell = prevCells_1[_i];
+      var cellItems = this.grid.get(cell);
+
+      if (cellItems) {
+        var index = cellItems.indexOf(item);
+
+        if (index !== -1) {
+          cellItems.splice(index, 1);
+        } // 빈 셀 정리 (메모리 효율)
+
+
+        if (cellItems.length === 0) {
+          this.grid.delete(cell);
+        }
+      }
+    }
+
+    this.itemToCells.delete(item);
+  };
+  /**
+   * 항목 위치 업데이트
+   *
+   * 추가된 메서드: remove + insert의 편의 함수
+   */
+
+
+  SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
+    this.insert(item, minX, minY, maxX, maxY);
+  };
+  /**
+   * 점 주변의 항목 조회 (1개 셀만)
+   *
+   * 성능: O(해당 셀의 항목 수) - 보통 ~10개
+   */
+
+
+  SpatialHashGrid.prototype.queryPoint = function (x, y) {
+    var cellKey = this.getCellKey(x, y);
+    var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
+
+    return items || [];
+  };
+  /**
+   * 영역 내 항목 조회
+   *
+   * 성능: O(셀 개수 × 셀당 평균 항목 수)
+   * Set으로 중복 제거 보장
+   */
+
+
+  SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
+    var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
+    var results = new Set();
+
+    for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
+      var cell = cells_2[_i];
+      var items = this.grid.get(cell);
+
+      if (items) {
+        for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
+          var item = items_1[_a];
+          results.add(item);
+        }
+      }
+    }
+
+    return Array.from(results);
+  };
+  /**
+   * 항목 존재 여부 확인
+   *
+   * 추가된 메서드: 빠른 존재 여부 체크
+   */
+
+
+  SpatialHashGrid.prototype.has = function (item) {
+    return this.itemToCells.has(item);
+  };
+  /**
+   * 전체 초기화
+   */
+
+
+  SpatialHashGrid.prototype.clear = function () {
+    this.grid.clear();
+    this.itemToCells.clear();
+  };
+  /**
+   * 통계 정보
+   *
+   * 개선: totalItems는 실제 고유 항목 수를 정확히 반환
+   */
+
+
+  SpatialHashGrid.prototype.stats = function () {
+    var totalCellItems = 0;
+    this.grid.forEach(function (items) {
+      totalCellItems += items.length;
+    });
+    return {
+      totalCells: this.grid.size,
+      totalItems: this.itemToCells.size,
+      avgItemsPerCell: this.grid.size > 0 ? totalCellItems / this.grid.size : 0
+    };
+  };
+
+  return SpatialHashGrid;
+}();
+
+exports.DEFAULT_CULLING_MARGIN = DEFAULT_CULLING_MARGIN;
+exports.DEFAULT_MAX_CACHE_SIZE = DEFAULT_MAX_CACHE_SIZE;
+exports.LRUCache = LRUCache;
+exports.SPATIAL_GRID_CELL_SIZE = SPATIAL_GRID_CELL_SIZE;
+exports.SpatialHashGrid = SpatialHashGrid;

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

@@ -0,0 +1,59 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+import { CustomRenderBase, CustomRenderEvent, KonvaCanvasMarkerData } from "./types";
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: {
+    ctx: CanvasRenderingContext2D;
+    polygonOffsets: number[][][][];
+    isDonutPolygon: boolean;
+    fillColor: string;
+    strokeColor: string;
+    lineWidth: number;
+}) => void;
+/**
+ * 폴리곤 Base 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * 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<KonvaCanvasMarkerData<T>>;
+/**
+ * 폴리곤 Event 렌더링 함수
+ *
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @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)'
+ * );
+ */
+export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasMarkerData<T>>;

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

@@ -0,0 +1,226 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+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) {
+      ctx.beginPath(); // 1. 외부 폴리곤 그리기
+
+      if (multiPolygon[0] && multiPolygon[0].length > 0) {
+        ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
+
+        for (var i = 1; i < multiPolygon[0].length; i++) {
+          ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][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 렌더링 함수
+ *
+ * @param baseFillColor 기본 폴리곤 채우기 색상
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
+ * @returns Base Layer 렌더링 함수
+ *
+ * @example
+ * 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;
+      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 렌더링 함수
+ *
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
+ * @returns Event Layer 렌더링 함수
+ *
+ * @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)'
+ * );
+ */
+
+var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
+  // 기본값 설정 (selected 기준)
+  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; // 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.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) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
+      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;
+      var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
+        return item.id === hoveredItem.id;
+      });
+      drawPolygon({
+        ctx: ctx,
+        polygonOffsets: polygonOffsets,
+        isDonutPolygon: hoveredItem.isDonutPolygon || false,
+        fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
+        strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
+        lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
+      });
+    }
+  };
+};
+
+exports.drawPolygon = drawPolygon;
+exports.renderPolygonBase = renderPolygonBase;
+exports.renderPolygonEvent = renderPolygonEvent;