@mint-ui/map 1.2.0-test.33 → 1.2.0-test.35

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

@@ -14,6 +14,9 @@ require('../shared/types.js');
 var utils = require('../shared/utils.js');
 var context = require('../shared/context.js');
 var performance = require('../shared/performance.js');
+var viewport = require('../shared/viewport.js');
+var hooks = require('../shared/hooks.js');
+var helpers = require('../shared/helpers.js');
 var renderer = require('./renderer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,8 +30,6 @@ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
 var WoongCanvasPolygon = function (props) {
   var data = props.data,
       onClick = props.onClick,
-      onMouseOver = props.onMouseOver,
-      onMouseOut = props.onMouseOut,
       _a = props.enableMultiSelect,
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.enableViewportCulling,
@@ -53,7 +54,7 @@ var WoongCanvasPolygon = function (props) {
       hoveredFillColor = props.hoveredFillColor,
       hoveredStrokeColor = props.hoveredStrokeColor,
       hoveredLineWidth = props.hoveredLineWidth,
-      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -153,14 +154,7 @@ var WoongCanvasPolygon = function (props) {
    */
 
   var updateViewport = function () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
   };
   /**
    * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
@@ -168,21 +162,7 @@ var WoongCanvasPolygon = function (props) {
 
 
   var isInViewport = function (item) {
-    if (!enableViewportCulling || !viewportRef.current) return true;
-    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
-
-    var bbox = boundingBoxCacheRef.current.get(item.id);
-
-    if (!bbox) {
-      // 바운딩 박스 계산 (공통 함수 사용)
-      var computed = computeBoundingBox(item);
-      if (!computed) return false;
-      bbox = computed;
-      boundingBoxCacheRef.current.set(item.id, bbox);
-    } // 바운딩 박스와 viewport 교차 체크
-
-
-    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+    return viewport.isInViewport(item, enableViewportCulling, viewportRef, boundingBoxCacheRef, computeBoundingBox);
   }; // --------------------------------------------------------------------------
   // 유틸리티 함수: 좌표 변환 캐싱
   // --------------------------------------------------------------------------
@@ -211,8 +191,23 @@ var WoongCanvasPolygon = function (props) {
   /**
    * 폴리곤의 바운딩 박스 계산
    *
+   * 폴리곤의 모든 좌표를 순회하여 최소/최대 X, Y 값을 계산합니다.
+   * Viewport Culling에 사용되며, MultiPolygon 형식을 지원합니다.
+   *
    * @param item 폴리곤 데이터
-   * @returns 바운딩 박스 또는 null
+   * @returns 바운딩 박스 (minX, minY, maxX, maxY) 또는 null (좌표 변환 실패 시)
+   *
+   * @remarks
+   * - 성능: O(n), n은 폴리곤의 총 좌표 수
+   * - 바운딩 박스는 캐시되어 성능 최적화
+   * - MultiPolygon의 모든 좌표를 고려하여 계산
+   *
+   * @example
+   * ```typescript
+   * const bbox = computeBoundingBox(item);
+   * if (!bbox) return; // 계산 실패
+   * // bbox.minX, bbox.minY, bbox.maxX, bbox.maxY 사용
+   * ```
    */
 
 
@@ -259,19 +254,7 @@ var WoongCanvasPolygon = function (props) {
 
 
   var buildSpatialIndex = function () {
-    var spatial = spatialIndexRef.current;
-    spatial.clear();
-    var currentData = dataRef.current;
-
-    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
-      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
-
-      var bbox = computeBoundingBox(item);
-
-      if (bbox) {
-        spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
-      }
-    }
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
   }; // --------------------------------------------------------------------------
   // 렌더링 함수 결정 (dataType에 따라)
   // --------------------------------------------------------------------------
@@ -294,11 +277,8 @@ var WoongCanvasPolygon = function (props) {
 
   var renderBase = renderer.renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
   var renderEvent = renderer.renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth);
-  /** Base Layer에서 사용할 빈 Set (재사용) */
-
-  React.useRef(new Set());
   /**
-   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
+   * Base 레이어 렌더링 (뷰포트 컬링 적용)
    *
    * 🔥 최적화:
    * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
@@ -350,10 +330,16 @@ var WoongCanvasPolygon = function (props) {
   /**
    * Event 레이어 렌더링 (hover + 선택 상태 표시)
    *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
+   * 폴리곤의 hover 효과 및 선택 상태를 표시합니다.
+   * 자동 렌더링 방식으로 renderPolygonEvent를 사용합니다.
+   *
+   * @remarks
+   * - **성능 최적화**:
+   *   1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+   *   2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+   *   3. 클로저로 최신 데이터 참조
+   * - 선택된 항목은 Map에서 O(1)로 조회하여 성능 최적화
+   * - 자동 렌더링: 스타일 props(selectedFillColor, hoveredFillColor 등) 기반으로 자동 렌더링
    */
 
 
@@ -370,8 +356,9 @@ var WoongCanvasPolygon = function (props) {
         name: 'event-render-shape',
         sceneFunc: function (context, shape) {
           var ctx = context; // 클로저로 최신 ref 값 참조
+          // 성능 최적화: Array.from 대신 직접 변환 (메모리 할당 최소화)
 
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
           var hovered = hoveredItemRef.current; // 일반 렌더링
 
           renderEvent({
@@ -394,6 +381,13 @@ var WoongCanvasPolygon = function (props) {
   };
   /**
    * 전체 즉시 렌더링 (IDLE 시 호출)
+   *
+   * 뷰포트 업데이트, 공간 인덱스 빌드, 모든 레이어 렌더링을 순차적으로 수행합니다.
+   *
+   * @remarks
+   * - 호출 시점: 지도 이동/줌 완료 시, 데이터 변경 시, 리사이즈 시
+   * - 순서: 뷰포트 업데이트 → 공간 인덱스 빌드 → Base → Event 렌더링
+   * - Animation Layer는 사용하지 않음 (폴리곤 특성)
    */
 
 
@@ -406,89 +400,43 @@ var WoongCanvasPolygon = function (props) {
   // 이벤트 핸들러: 지도 이벤트
   // --------------------------------------------------------------------------
 
-  /**
-   * 지도 이동/줌 완료 시 처리
-   */
 
-
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = tslib.__assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 5. 새 위치에서 렌더링
-
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
-
-
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
+  var _f = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
   /**
-   * 줌 종료 시 처리 (다시 표시)
+   * 드래그 시작 처리 (커서를 grabbing으로 변경)
    */
 
 
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
   };
   /**
-   * 지도 중심 변경 시 처리 (transform으로 이동 추적)
+   * 드래그 종료 처리 (커서를 기본으로 복원)
    */
 
 
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current;
-
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      return;
-    }
-
-    var dx = prev.x - curr.x;
-    var dy = prev.y - curr.y;
-    accumTranslateRef.current = {
-      x: accumTranslateRef.current.x + dx,
-      y: accumTranslateRef.current.y + dy
-    };
-    prevCenterOffsetRef.current = {
-      x: curr.x,
-      y: curr.y
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
   }; // --------------------------------------------------------------------------
   // Hit Test & 상태 관리
   // --------------------------------------------------------------------------
@@ -518,13 +466,14 @@ var WoongCanvasPolygon = function (props) {
   /**
    * Hover 상태 설정 및 레이어 렌더링
    *
-   * @param data hover된 마커/폴리곤 데이터 또는 null
+   * 마우스가 폴리곤 위에 올라갔을 때 hover 상태를 설정하고 즉시 렌더링합니다.
    *
-   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
+   * @param data hover된 폴리곤 데이터 또는 null (hover 해제 시)
    *
-   * 🎯 topOnHover 지원:
-   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
-   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
+   * @remarks
+   * - **성능 최적화**: RAF 없이 즉시 렌더링 (16ms 지연 제거)
+   * - Event Layer에서 hover 효과 표시
+   * - 커서 상태도 자동으로 업데이트됨 (pointer/grab)
    */
 
 
@@ -543,11 +492,17 @@ var WoongCanvasPolygon = function (props) {
   /**
    * 클릭 처리 (단일/다중 선택)
    *
-   * @param data 클릭된 마커/폴리곤 데이터
+   * 폴리곤 클릭 시 선택 상태를 업데이트하고 렌더링을 수행합니다.
+   *
+   * @param data 클릭된 폴리곤 데이터
    *
-   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
+   * @remarks
+   * - **단일 선택**: 기존 선택 해제 후 새로 선택 (토글 가능)
+   * - **다중 선택**: enableMultiSelect가 true면 기존 선택 유지하며 추가/제거
+   * - **성능 최적화**:
+   *   - 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
+   *   - sceneFunc에서 selectedIds를 체크하여 선택된 폴리곤만 스킵
+   *   - 객체 생성 오버헤드 제거로 1,000개 이상도 부드럽게 처리
    */
 
 
@@ -591,77 +546,63 @@ var WoongCanvasPolygon = function (props) {
 
   /**
    * 클릭 이벤트 처리
+   *
+   * @param event 클릭 이벤트 파라미터
+   *
+   * @remarks
+   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
+   * - 상호작용이 비활성화되어 있으면 스킵
+   * - Spatial Index를 사용하여 빠른 Hit Test 수행
    */
 
 
   var handleClick = function (event) {
-    var _a;
-
     if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
 
-    try {
-      var clickedOffset = controller.positionToOffset(event.param.position);
-      var data_1 = findData(clickedOffset);
+    if (data) {
+      handleLocalClick(data);
 
-      if (data_1) {
-        handleLocalClick(data_1);
-
-        if (onClick) {
-          onClick(data_1, selectedIdsRef.current);
-        }
+      if (onClick) {
+        onClick(data, selectedIdsRef.current);
       }
-    } catch (error) {
-      console.error('[WoongCanvasPolygon] handleClick error:', error);
     }
   };
   /**
    * 마우스 이동 이벤트 처리 (hover 감지)
+   *
+   * @param event 마우스 이동 이벤트 파라미터
+   *
+   * @remarks
+   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
+   * - 상호작용이 비활성화되어 있으면 스킵
+   * - hover 상태 변경 시에만 렌더링 (최적화)
    */
 
 
   var handleMouseMove = function (event) {
-    var _a;
-
     if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var mouseOffset = controller.positionToOffset(event.param.position);
-      var hoveredItem = findData(mouseOffset);
-      var prevHovered = hoveredItemRef.current;
+    var mouseOffset = helpers.validateEvent(event, context$1, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
 
-      if (prevHovered !== hoveredItem) {
-        setHovered(hoveredItem);
-        if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-        if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-      }
-    } catch (error) {
-      console.error('[WoongCanvasPolygon] handleMouseMove error:', error);
+    if (prevHovered !== hoveredItem) {
+      setHovered(hoveredItem);
     }
   };
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
-
-  var handleDragStart = function () {
-    draggingRef.current = true;
-    controller.setMapCursor('grabbing');
-  };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
-
-  var handleDragEnd = function () {
-    draggingRef.current = false;
-    controller.setMapCursor('grab');
-  };
   /**
    * 마우스가 canvas를 벗어날 때 hover cleanup
+   *
+   * 맵 영역 밖으로 마우스가 나갔을 때 hover 상태를 초기화합니다.
+   *
+   * @remarks
+   * - 상호작용이 비활성화되어 있으면 스킵
+   * - hover 상태 초기화 및 커서 복원
    */
 
 
@@ -674,10 +615,6 @@ var WoongCanvasPolygon = function (props) {
       hoveredItemRef.current = null;
       controller.setMapCursor('grab');
       doRenderEvent();
-
-      if (onMouseOut) {
-        onMouseOut(prevHovered);
-      }
     }
   }; // --------------------------------------------------------------------------
   // Lifecycle: DOM 초기화
@@ -786,8 +723,6 @@ var WoongCanvasPolygon = function (props) {
           return findData(offset) !== null;
         },
         onClick: onClick,
-        onMouseOver: onMouseOver,
-        onMouseOut: onMouseOut,
         findData: findData,
         setHovered: setHovered,
         handleLocalClick: handleLocalClick,
@@ -847,18 +782,8 @@ var WoongCanvasPolygon = function (props) {
   // --------------------------------------------------------------------------
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
-
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
-
-    var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map();
-    externalSelectedItems.forEach(function (item) {
-      newSelectedIds.add(item.id);
-      newSelectedItemsMap.set(item.id, item);
-    });
-    selectedIdsRef.current = newSelectedIds;
-    selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
+    if (!stageRef.current) return;
+    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef); // 렌더링
 
     doRenderBase();
     doRenderEvent();
@@ -908,27 +833,7 @@ var WoongCanvasPolygon = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var dataMap = new Map(data.map(function (m) {
-      return [m.id, m];
-    }));
-    var newSelectedItemsMap = new Map();
-    selectedIdsRef.current.forEach(function (id) {
-      // 현재 data에 있으면 최신 데이터 사용
-      var currentItem = dataMap.get(id);
-
-      if (currentItem) {
-        newSelectedItemsMap.set(id, currentItem);
-      } else {
-        // 화면 밖이면 기존 데이터 유지
-        var prevItem = selectedItemsMapRef.current.get(id);
-
-        if (prevItem) {
-          newSelectedItemsMap.set(id, prevItem);
-        }
-      }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
-
-    selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current); // 즉시 렌더링
 
     renderAllImmediate();
   }, [data]);

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

@@ -2,38 +2,88 @@
  * 폴리곤 렌더링 유틸리티
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
 import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } 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>>;
 /**
- * 폴리곤 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 {};