@mint-ui/map 1.2.0-test.4 → 1.2.0-test.41

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

@@ -0,0 +1,582 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Konva = require('konva');
+var MintMapProvider = require('../../provider/MintMapProvider.js');
+var MapDrawables = require('../../../types/MapDrawables.js');
+require('../../../types/MapTypes.js');
+require('../../../types/MapEventTypes.js');
+var reactDom = require('react-dom');
+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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
+
+var WoongCanvasPolygon = function (props) {
+  var data = props.data,
+      onClick = props.onClick,
+      _a = props.enableMultiSelect,
+      enableMultiSelect = _a === void 0 ? false : _a,
+      _b = props.enableViewportCulling,
+      enableViewportCulling = _b === void 0 ? false : _b,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
+      externalSelectedItems = props.selectedItems,
+      externalSelectedItem = props.selectedItem,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
+      baseFillColor = props.baseFillColor,
+      baseStrokeColor = props.baseStrokeColor,
+      baseLineWidth = props.baseLineWidth,
+      selectedFillColor = props.selectedFillColor,
+      selectedStrokeColor = props.selectedStrokeColor,
+      selectedLineWidth = props.selectedLineWidth,
+      activeFillColor = props.activeFillColor,
+      activeStrokeColor = props.activeStrokeColor,
+      activeLineWidth = props.activeLineWidth,
+      hoveredFillColor = props.hoveredFillColor,
+      hoveredStrokeColor = props.hoveredStrokeColor,
+      hoveredLineWidth = props.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
+  // --------------------------------------------------------------------------
+
+
+  var controller = MintMapProvider.useMintMapController();
+  var context$1 = context.useWoongCanvasContext();
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
+
+  var divRef = React.useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var containerRef = React.useRef(null);
+  var markerRef = React.useRef(); // Konva Refs
+
+  var stageRef = React.useRef(null);
+  var baseLayerRef = React.useRef(null);
+  var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
+
+  var dataRef = React.useRef(data);
+  var disableInteractionRef = React.useRef(disableInteraction);
+  var enableViewportCullingRef = React.useRef(enableViewportCulling);
+  var hoveredItemRef = React.useRef(null);
+  var selectedItemRef = React.useRef(externalSelectedItem);
+  var selectedIdsRef = React.useRef(new Set());
+  var selectedItemsMapRef = React.useRef(new Map()); // 드래그 상태 Refs
+
+  var draggingRef = React.useRef(false);
+  var prevCenterOffsetRef = React.useRef(null);
+  var accumTranslateRef = React.useRef({
+    x: 0,
+    y: 0
+  }); // 성능 최적화 Refs
+
+  var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
+  var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
+  var boundingBoxCacheRef = React.useRef(new Map());
+  var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
+
+  var updateViewport = function () {
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
+  }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
+
+
+  var isInViewport = function (item) {
+    return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
+  }; // 폴리곤 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
+
+
+  var getOrComputePolygonOffsets = function (polygonData) {
+    var cached = offsetCacheRef.current.get(polygonData.id);
+    if (cached && Array.isArray(cached)) return cached;
+    var result = utils.computePolygonOffsets(polygonData, controller);
+    if (!result) return null;
+    offsetCacheRef.current.set(polygonData.id, result);
+    return result;
+  }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
+
+
+  var computeBoundingBox = function (item) {
+    var offsets = getOrComputePolygonOffsets(item);
+    if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
+
+    var minX = Infinity,
+        minY = Infinity,
+        maxX = -Infinity,
+        maxY = -Infinity;
+
+    for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
+      var multiPolygon = offsets_1[_i];
+
+      for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
+        var polygonGroup = multiPolygon_1[_a];
+
+        for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
+          var _c = polygonGroup_1[_b],
+              x = _c[0],
+              y = _c[1];
+          if (x < minX) minX = x;
+          if (y < minY) minY = y;
+          if (x > maxX) maxX = x;
+          if (y > maxY) maxY = y;
+        }
+      }
+    }
+
+    return {
+      minX: minX,
+      minY: minY,
+      maxX: maxX,
+      maxY: maxY
+    };
+  }; // 공간 인덱스 빌드 (빠른 Hit Test용)
+
+
+  var buildSpatialIndex = function () {
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
+  }; // 렌더링 유틸리티 객체
+
+
+  var renderUtils = {
+    getOrComputePolygonOffsets: getOrComputePolygonOffsets,
+    getOrComputeMarkerOffset: function () {
+      return null;
+    }
+  }; // 렌더링 함수 생성
+
+  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 렌더링 (뷰포트 컬링 적용)
+
+  var doRenderBase = function () {
+    var layer = baseLayerRef.current;
+    if (!layer) return;
+    var shape = layer.findOne('.base-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        name: 'base-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
+
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
+            return isInViewport(item);
+          }) : dataRef.current;
+          renderBase({
+            ctx: ctx,
+            items: visibleItems,
+            selectedIds: selectedIdsRef.current,
+            hoveredItem: hovered,
+            utils: renderUtils
+          });
+        },
+        perfectDrawEnabled: false,
+        listening: false,
+        hitStrokeWidth: 0
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
+
+
+  var doRenderEvent = function () {
+    var layer = eventLayerRef.current;
+    if (!layer) return;
+    var shape = layer.findOne('.event-render-shape');
+
+    if (!shape) {
+      shape = new Konva__default["default"].Shape({
+        name: 'event-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context;
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
+          var hovered = hoveredItemRef.current;
+          renderEvent({
+            ctx: ctx,
+            hoveredItem: hovered,
+            utils: renderUtils,
+            selectedItems: selectedItems,
+            selectedItem: selectedItemRef.current
+          });
+        },
+        perfectDrawEnabled: false,
+        listening: false,
+        hitStrokeWidth: 0
+      });
+      layer.add(shape);
+    }
+
+    layer.batchDraw();
+  }; // 전체 즉시 렌더링
+
+
+  var renderAllImmediate = function () {
+    if (enableViewportCullingRef.current) {
+      updateViewport();
+    }
+
+    buildSpatialIndex();
+    doRenderBase();
+    doRenderEvent();
+  }; // 지도 이벤트 핸들러 생성
+
+
+  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;
+
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
+  };
+
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  }; // Hit Test: 특정 좌표의 폴리곤 찾기
+
+
+  var findData = function (offset) {
+    // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
+
+    for (var i = candidates.length - 1; i >= 0; i--) {
+      var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
+
+      if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+        return item;
+      }
+    }
+
+    return null;
+  }; // Hover 상태 설정 및 렌더링
+
+
+  var setHovered = function (data) {
+    hoveredItemRef.current = data;
+
+    if (draggingRef.current) {
+      controller.setMapCursor('grabbing');
+    } else {
+      controller.setMapCursor(data ? 'pointer' : 'grab');
+    }
+
+    doRenderEvent();
+  }; // 클릭 처리: 선택 상태 업데이트
+
+
+  var handleLocalClick = function (data) {
+    if (enableMultiSelect) {
+      var newSelected = new Set(selectedIdsRef.current);
+
+      if (newSelected.has(data.id)) {
+        newSelected.delete(data.id);
+        selectedItemsMapRef.current.delete(data.id);
+      } else {
+        newSelected.add(data.id);
+        selectedItemsMapRef.current.set(data.id, data);
+      }
+
+      selectedIdsRef.current = newSelected;
+    } else {
+      var newSelected = new Set();
+
+      if (!selectedIdsRef.current.has(data.id)) {
+        newSelected.add(data.id);
+        selectedItemsMapRef.current.clear();
+        selectedItemsMapRef.current.set(data.id, data);
+      } else {
+        selectedItemsMapRef.current.clear();
+      }
+
+      selectedIdsRef.current = newSelected;
+    }
+
+    doRenderBase();
+    doRenderEvent();
+  }; // 클릭 이벤트 핸들러
+
+
+  var handleClick = function (event) {
+    if (disableInteractionRef.current) return;
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
+    if (!data) return;
+    handleLocalClick(data);
+    onClick === null || onClick === void 0 ? void 0 : onClick(data, selectedIdsRef.current);
+  }; // 마우스 이동 이벤트 핸들러 (hover 감지)
+
+
+  var handleMouseMove = function (event) {
+    if (disableInteractionRef.current) return;
+    var mouseOffset = helpers.validateEvent(event, context$1, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
+    if (prevHovered === hoveredItem) return;
+    setHovered(hoveredItem);
+  }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
+
+
+  var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return;
+    var prevHovered = hoveredItemRef.current;
+    if (!prevHovered) return;
+    hoveredItemRef.current = null;
+    controller.setMapCursor('grab');
+    doRenderEvent();
+  }; // DOM 초기화
+
+
+  React.useEffect(function () {
+    divElement.style.width = 'fit-content';
+    return function () {
+      if (!markerRef.current) return;
+      controller.clearDrawable(markerRef.current);
+      markerRef.current = undefined;
+    };
+  }, []); // 마커 생성/업데이트
+
+  React.useEffect(function () {
+    if (!options) return;
+    var bounds = controller.getCurrBounds();
+
+    var markerOptions = tslib.__assign({
+      position: bounds.nw
+    }, options);
+
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+      return;
+    }
+
+    markerRef.current = new MapDrawables.Marker(markerOptions);
+    markerRef.current.element = divElement;
+    controller.createMarker(markerRef.current);
+
+    if (divElement.parentElement) {
+      divElement.parentElement.style.pointerEvents = 'none';
+    }
+
+    if (options.zIndex !== undefined) {
+      controller.setMarkerZIndex(markerRef.current, options.zIndex);
+    }
+  }, [options]); // Konva 초기화 및 이벤트 리스너 등록
+
+  React.useEffect(function () {
+    var mapDiv = controller.mapDivElement;
+    var stage = new Konva__default["default"].Stage({
+      container: containerRef.current,
+      width: mapDiv.offsetWidth,
+      height: mapDiv.offsetHeight
+    });
+    stageRef.current = stage;
+    var baseLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    var eventLayer = new Konva__default["default"].Layer({
+      listening: false
+    });
+    baseLayerRef.current = baseLayer;
+    eventLayerRef.current = eventLayer;
+    stage.add(baseLayer);
+    stage.add(eventLayer);
+
+    if (enableViewportCulling) {
+      updateViewport();
+    } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+
+    var resizeRafId = null;
+    var resizeObserver = new ResizeObserver(function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeRafId = requestAnimationFrame(function () {
+        stage.width(mapDiv.offsetWidth);
+        stage.height(mapDiv.offsetHeight);
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+
+        if (enableViewportCullingRef.current) {
+          updateViewport();
+        }
+
+        renderAllImmediate();
+        resizeRafId = null;
+      });
+    });
+    resizeObserver.observe(mapDiv);
+    controller.addEventListener('IDLE', handleIdle);
+    controller.addEventListener('ZOOMSTART', handleZoomStart);
+    controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
+    controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
+    controller.addEventListener('CLICK', handleClick);
+    controller.addEventListener('MOUSEMOVE', handleMouseMove);
+    controller.addEventListener('DRAGSTART', handleDragStart);
+    controller.addEventListener('DRAGEND', handleDragEnd);
+    mapDiv.addEventListener('mouseleave', handleMouseLeave);
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록
+
+    var componentInstance = null;
+
+    if (context$1) {
+      componentInstance = {
+        zIndex: currentZIndex,
+        hitTest: function (offset) {
+          return findData(offset) !== null;
+        },
+        onClick: onClick,
+        findData: findData,
+        setHovered: setHovered,
+        handleLocalClick: handleLocalClick,
+        getSelectedIds: function () {
+          return selectedIdsRef.current;
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        }
+      };
+      context$1.registerComponent(componentInstance);
+    }
+
+    return function () {
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeObserver.disconnect();
+      controller.removeEventListener('IDLE', handleIdle);
+      controller.removeEventListener('ZOOMSTART', handleZoomStart);
+      controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
+      controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
+      controller.removeEventListener('CLICK', handleClick);
+      controller.removeEventListener('MOUSEMOVE', handleMouseMove);
+      controller.removeEventListener('DRAGSTART', handleDragStart);
+      controller.removeEventListener('DRAGEND', handleDragEnd);
+      mapDiv.removeEventListener('mouseleave', handleMouseLeave);
+
+      if (context$1 && componentInstance) {
+        context$1.unregisterComponent(componentInstance);
+      }
+
+      baseLayer.destroyChildren();
+      eventLayer.destroyChildren();
+      stage.destroy();
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear();
+      spatialIndexRef.current.clear();
+    };
+  }, []); // disableInteraction 동기화
+
+  React.useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  React.useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 selectedItems 동기화
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
+    doRenderBase();
+    doRenderEvent();
+  }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    selectedItemRef.current = externalSelectedItem;
+    doRenderEvent();
+  }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
+
+  React.useEffect(function () {
+    if (!stageRef.current) return;
+    dataRef.current = data;
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    }
+
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    };
+    offsetCacheRef.current.clear();
+    boundingBoxCacheRef.current.clear();
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
+    renderAllImmediate();
+  }, [data]);
+  return reactDom.createPortal(React__default["default"].createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    }
+  }), divElement);
+};
+
+exports.WoongCanvasProvider = context.WoongCanvasProvider;
+exports.LRUCache = performance.LRUCache;
+exports.SpatialHashGrid = performance.SpatialHashGrid;
+exports["default"] = WoongCanvasPolygon;

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

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

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

@@ -0,0 +1,120 @@
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
+ */
+import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
+/**
+ * 폴리곤 그리기 파라미터 인터페이스
+ */
+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>;
+export {};