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

package/dist/index.es.js

@@ -6426,6 +6426,1154 @@ var WoongCanvasMarker = function (props) {
   }), divElement);
 };
 
+/**
+ * 폴리곤 렌더링 유틸리티
+ *
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
+ */
+
+/**
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
+ */
+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 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 렌더링 함수
+ *
+ * @example
+ * 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; // 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
+      });
+    }
+  };
+};
+
+// 메인 컴포넌트
+// ============================================================================
+
+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,
+      enableViewportCulling = _b === void 0 ? true : _b,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? 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 = __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"]); // --------------------------------------------------------------------------
+  // Hooks & Context
+  // --------------------------------------------------------------------------
+
+
+  var controller = useMintMapController();
+  var context = useWoongCanvasContext();
+  var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
+  // DOM Refs
+  // --------------------------------------------------------------------------
+
+  var divRef = useRef(document.createElement('div'));
+  var divElement = divRef.current;
+  var containerRef = useRef(null);
+  var markerRef = useRef(); // --------------------------------------------------------------------------
+  // Konva Refs
+  // --------------------------------------------------------------------------
+
+  var stageRef = useRef(null);
+  var baseLayerRef = useRef(null);
+  var eventLayerRef = useRef(null); // --------------------------------------------------------------------------
+  // Data Refs - 선택 및 Hover 상태 관리
+  // --------------------------------------------------------------------------
+
+  /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
+
+  var dataRef = useRef(data); // --------------------------------------------------------------------------
+  // State Refs - 선택 및 Hover 상태 관리
+  // --------------------------------------------------------------------------
+
+  /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
+
+  var disableInteractionRef = useRef(disableInteraction);
+  /** 현재 Hover 중인 항목 */
+
+  var hoveredItemRef = useRef(null);
+  /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
+
+  var selectedItemRef = useRef(externalSelectedItem);
+  /**
+   * 선택된 항목의 ID Set
+   *
+   * 용도:
+   * 1. onClick 콜백에 전달 - onClick(data, selectedIdsRef.current)
+   * 2. 선택 여부 빠른 체크 - selectedIdsRef.current.has(id)
+   * 3. 메모리 효율 - ID만 저장 (작음)
+   *
+   * selectedItemsMapRef와 차이:
+   * - selectedIdsRef: ID만 저장 { "id1", "id2" }
+   * - selectedItemsMapRef: 전체 객체 저장 { id1: {...}, id2: {...} }
+   *
+   * 둘 다 필요: ID만 필요한 곳은 이것, 전체 데이터 필요한 곳은 Map
+   */
+
+  var selectedIdsRef = useRef(new Set());
+  /**
+   * 선택된 항목의 실제 데이터 Map (핵심 성능 최적화!)
+   *
+   * 목적: doRenderEvent에서 filter() 순회 제거
+   * - 이전: markersRef.current.filter() → O(전체 마커 수)
+   * - 현재: Map.values() → O(선택된 항목 수)
+   *
+   * 성능 개선: 10,000개 중 1개 선택 시
+   * - 이전: 10,000번 체크
+   * - 현재: 1번 접근 (10,000배 빠름!)
+   */
+
+  var selectedItemsMapRef = useRef(new Map()); // --------------------------------------------------------------------------
+  // Drag Refs
+  // --------------------------------------------------------------------------
+
+  var draggingRef = useRef(false);
+  var prevCenterOffsetRef = useRef(null);
+  var accumTranslateRef = useRef({
+    x: 0,
+    y: 0
+  }); // --------------------------------------------------------------------------
+  // Performance Refs (캐싱 & 최적화)
+  // --------------------------------------------------------------------------
+
+  /** 좌표 변환 결과 LRU 캐시 */
+
+  var offsetCacheRef = useRef(new LRUCache(maxCacheSize));
+  /** 공간 인덱스 (빠른 Hit Test) */
+
+  var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
+  /** 바운딩 박스 캐시 (Viewport Culling 최적화) */
+
+  var boundingBoxCacheRef = useRef(new Map());
+  /** 뷰포트 경계 캐시 (Viewport Culling) */
+
+  var viewportRef = useRef(null); // --------------------------------------------------------------------------
+  // 유틸리티 함수: 뷰포트 관리
+  // --------------------------------------------------------------------------
+
+  /**
+   * 현재 뷰포트 영역 계산
+   */
+
+  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
+    };
+  };
+  /**
+   * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
+   */
+
+
+  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);
+  }; // --------------------------------------------------------------------------
+  // 유틸리티 함수: 좌표 변환 캐싱
+  // --------------------------------------------------------------------------
+
+  /**
+   * 폴리곤 좌표 변환 결과를 캐시하고 반환
+   * @param polygonData 폴리곤 데이터
+   * @returns 변환된 좌표 배열 또는 null
+   */
+
+
+  var getOrComputePolygonOffsets = function (polygonData) {
+    var cached = offsetCacheRef.current.get(polygonData.id);
+    if (cached && Array.isArray(cached)) return cached;
+    var result = computePolygonOffsets(polygonData, controller);
+
+    if (result) {
+      offsetCacheRef.current.set(polygonData.id, result);
+    }
+
+    return result;
+  }; // --------------------------------------------------------------------------
+  // 유틸리티 함수: 바운딩 박스 계산
+  // --------------------------------------------------------------------------
+
+  /**
+   * 폴리곤의 바운딩 박스 계산
+   *
+   * @param item 폴리곤 데이터
+   * @returns 바운딩 박스 또는 null
+   */
+
+
+  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 () {
+    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);
+      }
+    }
+  }; // --------------------------------------------------------------------------
+  // 렌더링 함수 결정 (dataType에 따라)
+  // --------------------------------------------------------------------------
+
+  /**
+   * 외부 렌더링 함수에 전달할 유틸리티 객체
+   */
+
+
+  var renderUtils = {
+    getOrComputePolygonOffsets: getOrComputePolygonOffsets,
+    getOrComputeMarkerOffset: function () {
+      return null;
+    } // 폴리곤에서는 사용하지 않음
+
+  };
+  /**
+   * 렌더링 함수 생성 (props 기반)
+   */
+
+  var renderBase = renderPolygonBase(baseFillColor, baseStrokeColor, baseLineWidth);
+  var renderEvent = renderPolygonEvent(baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth);
+  /** Base Layer에서 사용할 빈 Set (재사용) */
+
+  useRef(new Set());
+  /**
+   * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
+   *
+   * 🔥 최적화:
+   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+   * 3. 클로저로 최신 데이터 참조
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
+   * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
+   */
+
+  var doRenderBase = function () {
+    var layer = baseLayerRef.current;
+    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+    var shape = layer.findOne('.base-render-shape');
+
+    if (!shape) {
+      // 최초 생성 (한 번만 실행됨)
+      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
+      shape = new Konva.Shape({
+        name: 'base-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context;
+          var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
+
+          var visibleItems = enableViewportCulling ? 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);
+    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+
+
+    layer.batchDraw();
+  };
+  /**
+   * Event 레이어 렌더링 (hover + 선택 상태 표시)
+   *
+   * 🔥 최적화:
+   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+   * 3. 클로저로 최신 데이터 참조
+   */
+
+
+  var doRenderEvent = function () {
+    var layer = eventLayerRef.current;
+    if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
+
+    var shape = layer.findOne('.event-render-shape');
+
+    if (!shape) {
+      // 최초 생성 (한 번만 실행됨)
+      // sceneFunc도 여기서 한 번만 설정 (클로저로 최신 데이터 참조)
+      shape = new Konva.Shape({
+        name: 'event-render-shape',
+        sceneFunc: function (context, shape) {
+          var ctx = context; // 클로저로 최신 ref 값 참조
+
+          var selectedItems = Array.from(selectedItemsMapRef.current.values());
+          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);
+    } // sceneFunc는 이미 설정되어 있으므로 다시 그리기만
+
+
+    layer.batchDraw();
+  };
+  /**
+   * 전체 즉시 렌더링 (IDLE 시 호출)
+   */
+
+
+  var renderAllImmediate = function () {
+    updateViewport();
+    buildSpatialIndex();
+    doRenderBase();
+    doRenderEvent();
+  }; // --------------------------------------------------------------------------
+  // 이벤트 핸들러: 지도 이벤트
+  // --------------------------------------------------------------------------
+
+  /**
+   * 지도 이동/줌 완료 시 처리
+   */
+
+
+  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 = __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 handleZoomEnd = function () {
+    if (containerRef.current) {
+      containerRef.current.style.visibility = '';
+    }
+  };
+  /**
+   * 지도 중심 변경 시 처리 (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)");
+    }
+  }; // --------------------------------------------------------------------------
+  // Hit Test & 상태 관리
+  // --------------------------------------------------------------------------
+
+  /**
+   * 특정 좌표의 폴리곤 데이터 찾기 (Spatial Index 사용)
+   *
+   * @param offset 검사할 좌표
+   * @returns 찾은 폴리곤 데이터 또는 null
+   */
+
+
+  var findData = function (offset) {
+    // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
+    var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 폴리곤 체크
+
+    for (var i = candidates.length - 1; i >= 0; i--) {
+      var item = candidates[i];
+
+      if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
+        return item;
+      }
+    }
+
+    return null;
+  };
+  /**
+   * Hover 상태 설정 및 레이어 렌더링
+   *
+   * @param data hover된 마커/폴리곤 데이터 또는 null
+   *
+   * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
+   *
+   * 🎯 topOnHover 지원:
+   * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
+   * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
+   */
+
+
+  var setHovered = function (data) {
+    hoveredItemRef.current = data;
+
+    if (draggingRef.current) {
+      controller.setMapCursor('grabbing');
+    } else {
+      controller.setMapCursor(data ? 'pointer' : 'grab');
+    } // 즉시 렌더링 (RAF 없이)
+
+
+    doRenderEvent();
+  };
+  /**
+   * 클릭 처리 (단일/다중 선택)
+   *
+   * @param data 클릭된 마커/폴리곤 데이터
+   *
+   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
+   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
+   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
+   */
+
+
+  var handleLocalClick = function (data) {
+    // 1. 선택 상태 업데이트
+    if (enableMultiSelect) {
+      // 다중 선택: Set과 Map 동시 업데이트
+      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;
+    } // 2. Base Layer 재렌더링 (단일 Shape로 최적화되어 빠름)
+
+
+    doRenderBase(); // 3. Event Layer 렌더링 (hover 처리)
+
+    doRenderEvent();
+  }; // --------------------------------------------------------------------------
+  // 이벤트 핸들러: UI 이벤트
+  // --------------------------------------------------------------------------
+
+  /**
+   * 클릭 이벤트 처리
+   */
+
+
+  var handleClick = function (event) {
+    var _a;
+
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+    if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+
+    try {
+      var clickedOffset = controller.positionToOffset(event.param.position);
+      var data_1 = findData(clickedOffset);
+
+      if (data_1) {
+        handleLocalClick(data_1);
+
+        if (onClick) {
+          onClick(data_1, selectedIdsRef.current);
+        }
+      }
+    } catch (error) {
+      console.error('[WoongCanvasPolygon] handleClick error:', error);
+    }
+  };
+  /**
+   * 마우스 이동 이벤트 처리 (hover 감지)
+   */
+
+
+  var handleMouseMove = function (event) {
+    var _a;
+
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+    if (context || !((_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;
+
+      if (prevHovered !== hoveredItem) {
+        setHovered(hoveredItem);
+        if (prevHovered && onMouseOut) onMouseOut(prevHovered);
+        if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
+      }
+    } catch (error) {
+      console.error('[WoongCanvasPolygon] handleMouseMove error:', error);
+    }
+  };
+  /**
+   * 드래그 시작 처리 (커서를 grabbing으로 변경)
+   */
+
+
+  var handleDragStart = function () {
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
+  };
+  /**
+   * 드래그 종료 처리 (커서를 기본으로 복원)
+   */
+
+
+  var handleDragEnd = function () {
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
+  };
+  /**
+   * 마우스가 canvas를 벗어날 때 hover cleanup
+   */
+
+
+  var handleMouseLeave = function () {
+    if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
+
+    var prevHovered = hoveredItemRef.current;
+
+    if (prevHovered) {
+      hoveredItemRef.current = null;
+      controller.setMapCursor('grab');
+      doRenderEvent();
+
+      if (onMouseOut) {
+        onMouseOut(prevHovered);
+      }
+    }
+  }; // --------------------------------------------------------------------------
+  // Lifecycle: DOM 초기화
+  // --------------------------------------------------------------------------
+
+
+  useEffect(function () {
+    divElement.style.width = 'fit-content';
+    return function () {
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined;
+      }
+    };
+  }, []); // --------------------------------------------------------------------------
+  // Lifecycle: 마커 생성/업데이트
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (options) {
+      var bounds = controller.getCurrBounds();
+
+      var markerOptions = __assign({
+        position: bounds.nw
+      }, options);
+
+      if (markerRef.current) {
+        controller.updateMarker(markerRef.current, markerOptions);
+      } else {
+        markerRef.current = new 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]); // --------------------------------------------------------------------------
+  // Lifecycle: Konva 초기화 및 이벤트 리스너 등록
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    var mapDiv = controller.mapDivElement;
+    var stage = new Konva.Stage({
+      container: containerRef.current,
+      width: mapDiv.offsetWidth,
+      height: mapDiv.offsetHeight
+    });
+    stageRef.current = stage; // 레이어 최적화 설정
+
+    var baseLayer = new Konva.Layer({
+      listening: false // 이벤트 리스닝 비활성화로 성능 향상
+
+    });
+    var eventLayer = new Konva.Layer({
+      listening: false
+    });
+    baseLayerRef.current = baseLayer;
+    eventLayerRef.current = eventLayer;
+    stage.add(baseLayer);
+    stage.add(eventLayer); // 초기 뷰포트 설정
+
+    updateViewport(); // ResizeObserver (맵 크기 변경 감지)
+
+    var resizeRafId = null;
+    var resizeObserver = new ResizeObserver(function () {
+      // RAF로 다음 프레임에 한 번만 실행 (debounce 효과)
+      if (resizeRafId !== null) {
+        cancelAnimationFrame(resizeRafId);
+      }
+
+      resizeRafId = requestAnimationFrame(function () {
+        stage.width(mapDiv.offsetWidth);
+        stage.height(mapDiv.offsetHeight);
+        offsetCacheRef.current.clear();
+        boundingBoxCacheRef.current.clear();
+        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); // 맵 컨테이너에 mouseleave 이벤트 추가
+
+    mapDiv.addEventListener('mouseleave', handleMouseLeave);
+    renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
+
+    var componentInstance = null;
+
+    if (context) {
+      componentInstance = {
+        zIndex: currentZIndex,
+        hitTest: function (offset) {
+          return findData(offset) !== null;
+        },
+        onClick: onClick,
+        onMouseOver: onMouseOver,
+        onMouseOut: onMouseOut,
+        findData: findData,
+        setHovered: setHovered,
+        handleLocalClick: handleLocalClick,
+        getSelectedIds: function () {
+          return selectedIdsRef.current;
+        },
+        isInteractionDisabled: function () {
+          return disableInteractionRef.current;
+        } // 🚫 상호작용 비활성화 여부 반환
+
+      };
+      context.registerComponent(componentInstance);
+    } // Cleanup 함수
+
+
+    return function () {
+      // RAF 정리
+      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); // Context 정리
+
+      if (context && componentInstance) {
+        context.unregisterComponent(componentInstance);
+      } // Konva 리소스 정리
+
+
+      baseLayer.destroyChildren();
+      eventLayer.destroyChildren();
+      stage.destroy(); // 캐시 정리
+
+      offsetCacheRef.current.clear();
+      boundingBoxCacheRef.current.clear();
+      spatialIndexRef.current.clear();
+    };
+  }, []); // 초기화는 한 번만
+  // --------------------------------------------------------------------------
+  // Lifecycle: disableInteraction 동기화
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    disableInteractionRef.current = disableInteraction;
+  }, [disableInteraction]); // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItems 동기화
+  // --------------------------------------------------------------------------
+
+  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; // 렌더링
+
+    doRenderBase();
+    doRenderEvent();
+  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
+  // --------------------------------------------------------------------------
+  // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (!stageRef.current) return; // Ref 동기화
+
+    selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
+
+    doRenderEvent();
+  }, [externalSelectedItem]); // --------------------------------------------------------------------------
+  // Lifecycle: 데이터 변경 시 렌더링
+  // --------------------------------------------------------------------------
+
+  useEffect(function () {
+    if (!stageRef.current) return; // dataRef 동기화
+
+    dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
+
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+    }
+
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    }; // 캐시 정리 (새 데이터이므로 기존 캐시는 무효)
+
+    offsetCacheRef.current.clear();
+    boundingBoxCacheRef.current.clear();
+    /**
+     * 선택 상태 동기화 (최적화 버전)
+     *
+     * data가 변경되면 selectedItemsMapRef도 업데이트 필요
+     * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
+     *
+     * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
+     * - 현재 data에 있으면 최신 데이터로 업데이트
+     * - 없으면 기존 selectedItemsMapRef의 데이터 유지
+     *
+     * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
+     * - 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; // 즉시 렌더링
+
+    renderAllImmediate();
+  }, [data]);
+  return createPortal(React.createElement("div", {
+    ref: containerRef,
+    style: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%'
+    }
+  }), divElement);
+};
+
 var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
 var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
 styleInject(css_248z);
@@ -9257,4 +10405,4 @@ function MintMap(_a) {
   }), loading));
 }
 
-export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker as WoongCanvasLayer, WoongCanvasMarker, WoongCanvasProvider, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useMarkerMoving, useMintMapController, useWoongCanvasContext, waiting };
+export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasMarker, WoongCanvasPolygon, WoongCanvasProvider, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useMarkerMoving, useMintMapController, useWoongCanvasContext, waiting };