@mint-ui/map 1.2.0-test.71 → 1.2.0-test.72

package/dist/index.es.js

@@ -650,692 +650,721 @@ var css_248z$1 = ".MintMapCore-module_mint-map-root__SMfwn {\n  position: relati
 var styles$1 = {"mint-map-root":"MintMapCore-module_mint-map-root__SMfwn","mint-map-container":"MintMapCore-module_mint-map-container__8MIIr"};
 styleInject(css_248z$1);
 
-var CanvasContext = createContext(null);
+/* eslint-disable max-classes-per-file */
+
+/* eslint-disable no-restricted-syntax */
+
 /**
- * CanvasProvider 컴포넌트
+ * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
  *
- * 다중 Canvas 인스턴스를 관리하고 zIndex 기반 이벤트 우선순위를 처리합니다.
+ * @default 200
+ *
+ * @remarks
+ * 셀 크기는 평균 마커 크기의 1.5~2배가 적절합니다.
+ * - 마커가 50px 이하: 50px 권장
+ * - 마커가 60-80px: 100px 권장
+ * - 마커가 100px 이상: 150-200px 권장 (현재 설정)
+ *
+ * 셀 크기가 너무 작으면:
+ * - 한 마커가 여러 셀에 등록되어 메모리 사용량 증가
+ * - 인덱스 빌드 비용 증가
+ *
+ * 셀 크기가 너무 크면:
+ * - 한 셀에 많은 마커가 들어가서 Hit Test 시 후보 항목이 많아짐
+ * - Hit Test 성능 저하
+ */
+var SPATIAL_GRID_CELL_SIZE = 200;
+/**
+ * 뷰포트 컬링 여유 공간 (픽셀 단위)
+ *
+ * @default 100
  */
 
-/* eslint-disable no-restricted-syntax */
+var DEFAULT_CULLING_MARGIN = 100;
+/**
+ * Queue 캐시 최대 항목 수
+ *
+ * @default 30000
+ */
 
-/* eslint-disable no-continue */
+var DEFAULT_MAX_CACHE_SIZE = 30000;
+/**
+ * Queue Cache (FIFO - First In First Out)
+ *
+ * 좌표 변환 결과를 캐싱하기 위한 캐시 구현
+ * FIFO 방식으로 가장 먼저 저장된 항목부터 제거합니다.
+ *
+ * @template K 캐시 키 타입
+ * @template V 캐시 값 타입
+ */
 
-var CanvasProvider = function (_a) {
-  var children = _a.children;
-  var controller = useMintMapController(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+var QueueCache =
+/** @class */
+function () {
+  function QueueCache(maxSize) {
+    if (maxSize === void 0) {
+      maxSize = 10000;
+    }
 
-  var componentsRef = useRef([]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.cache = new Map();
+    this.maxSize = maxSize;
+  } // 캐시에서 값 조회
 
-  var currentHoveredRef = useRef(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-  var currentHoveredDataRef = useRef(null);
-  var draggingRef = useRef(false); // 컴포넌트 등록 (zIndex 내림차순 정렬)
+  QueueCache.prototype.get = function (key) {
+    return this.cache.get(key);
+  }; // 캐시에 값 저장 (FIFO eviction)
 
-  var registerComponent = useCallback(function (instance) {
-    componentsRef.current.push(instance);
-    componentsRef.current.sort(function (a, b) {
-      return b.zIndex - a.zIndex;
-    });
-  }, []); // 컴포넌트 등록 해제
 
-  var unregisterComponent = useCallback(function (instance) {
-    if (currentHoveredRef.current === instance) {
-      currentHoveredRef.current = null;
-      currentHoveredDataRef.current = null;
+  QueueCache.prototype.set = function (key, value) {
+    var exists = this.cache.has(key);
+
+    if (exists) {
+      this.cache.set(key, value);
+      return;
     }
 
-    componentsRef.current = componentsRef.current.filter(function (c) {
-      return c !== instance;
-    });
-  }, []); // 전역 클릭 핸들러 (zIndex 우선순위)
+    if (this.cache.size >= this.maxSize) {
+      var firstKey = this.cache.keys().next().value;
 
-  var handleGlobalClick = useCallback(function (event) {
-    var _a, _b;
+      if (firstKey !== undefined) {
+        this.cache.delete(firstKey);
+      }
+    }
 
-    try {
-      if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-      var clickedOffset = void 0;
+    this.cache.set(key, value);
+  }; // 캐시 초기화
 
-      try {
-        clickedOffset = controller.positionToOffset(event.param.position);
-      } catch (error) {
-        // positionToOffset 실패 시 조용히 종료 (기존 동작 보장)
-        console.warn('[CanvasProvider] positionToOffset failed:', error);
-        return;
-      } // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
+  QueueCache.prototype.clear = function () {
+    this.cache.clear();
+  }; // 캐시 크기 반환
 
-      for (var _i = 0, _c = componentsRef.current; _i < _c.length; _i++) {
-        var component = _c[_i];
 
-        try {
-          if (component.isInteractionDisabled()) continue;
-          var data = component.findData(clickedOffset);
-          if (!data) continue; // 첫 번째로 찾은 항목만 처리하고 종료 (zIndex 우선순위)
+  QueueCache.prototype.size = function () {
+    return this.cache.size;
+  }; // 키 존재 여부 확인
 
-          component.handleLocalClick(data);
-          (_b = component.onClick) === null || _b === void 0 ? void 0 : _b.call(component, data, component.getSelectedIds());
-          return;
-        } catch (error) {
-          // 개별 컴포넌트 처리 중 에러 발생 시 다음 컴포넌트로 계속 진행
-          console.warn('[CanvasProvider] Component click handler error:', error);
-          continue;
-        }
-      }
-    } catch (error) {
-      // 전체 핸들러 에러 시 조용히 종료 (앱 크래시 방지)
-      console.error('[CanvasProvider] handleGlobalClick error:', error);
-    }
-  }, [controller]); // 전역 마우스 이동 핸들러 (zIndex 우선순위)
 
-  var handleGlobalMouseMove = useCallback(function (event) {
-    var _a;
+  QueueCache.prototype.has = function (key) {
+    return this.cache.has(key);
+  }; // 모든 캐시 키 반환 (디버깅/모니터링용)
 
-    try {
-      if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-      var mouseOffset = void 0;
 
-      try {
-        mouseOffset = controller.positionToOffset(event.param.position);
-      } catch (error) {
-        // positionToOffset 실패 시 조용히 종료 (기존 동작 보장)
-        console.warn('[CanvasProvider] positionToOffset failed:', error);
-        return;
-      } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  QueueCache.prototype.getAllKeys = function () {
+    return Array.from(this.cache.keys());
+  }; // 모든 캐시 항목 반환 (디버깅/모니터링용)
 
 
-      var newHoveredComponent = null; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  QueueCache.prototype.getAllEntries = function () {
+    return Array.from(this.cache.entries());
+  };
 
-      var newHoveredData = null; // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
+  return QueueCache;
+}();
+/**
+ * Spatial Hash Grid (공간 해시 그리드)
+ *
+ * 빠른 Hit Test를 위한 그리드 기반 공간 인덱싱 자료구조
+ *
+ * @template T 인덱싱할 항목 타입
+ */
 
-      for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
-        var component = _b[_i];
+var SpatialHashGrid =
+/** @class */
+function () {
+  function SpatialHashGrid(cellSize) {
+    if (cellSize === void 0) {
+      cellSize = SPATIAL_GRID_CELL_SIZE;
+    }
 
-        try {
-          if (component.isInteractionDisabled()) continue;
-          var data = component.findData(mouseOffset);
-          if (!data) continue; // 첫 번째로 찾은 항목만 hover 처리 (zIndex 우선순위)
+    this.cellSize = cellSize;
+    this.grid = new Map();
+    this.itemToCells = new Map();
+  } // 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
 
-          newHoveredComponent = component;
-          newHoveredData = data;
-          break;
-        } catch (error) {
-          // 개별 컴포넌트 처리 중 에러 발생 시 다음 컴포넌트로 계속 진행
-          console.warn('[CanvasProvider] Component mouse move handler error:', error);
-          continue;
-        }
-      } // hover 상태가 변경되지 않았으면 종료 (불필요한 렌더링 방지)
 
+  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);
+  }; // 바운딩 박스가 걸치는 모든 셀 키 배열 반환
 
-      if (currentHoveredRef.current === newHoveredComponent && currentHoveredDataRef.current === newHoveredData) {
-        return;
-      } // 기존 hover 항목에 mouseOut 이벤트 발생
 
+  SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
+    var cells = []; // 바운딩 박스가 걸치는 셀 범위 계산
 
-      if (currentHoveredRef.current) {
-        try {
-          currentHoveredRef.current.setHovered(null);
+    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); // 바운딩 박스가 걸치는 모든 셀을 배열에 추가
 
-          if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
-            currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
-          }
-        } catch (error) {
-          // mouseOut 이벤트 에러 시 조용히 처리 (기존 동작 보장)
-          console.warn('[CanvasProvider] mouseOut handler error:', error);
-        }
-      } // 새 hover 항목에 mouseOver 이벤트 발생
+    for (var x = startCellX; x <= endCellX; x++) {
+      for (var y = startCellY; y <= endCellY; y++) {
+        cells.push("".concat(x, ",").concat(y));
+      }
+    }
 
+    return cells;
+  }; // 항목 추가 (바운딩 박스 기반, 중복 삽입 방지)
 
-      if (newHoveredComponent && newHoveredData) {
-        try {
-          newHoveredComponent.setHovered(newHoveredData);
 
-          if (newHoveredComponent.onMouseOver) {
-            newHoveredComponent.onMouseOver(newHoveredData);
-          }
-        } catch (error) {
-          // mouseOver 이벤트 에러 시 조용히 처리 (기존 동작 보장)
-          console.warn('[CanvasProvider] mouseOver handler error:', error);
-        }
+  SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
+    // 기존 항목 제거 (중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전)
+    this.remove(item); // 바운딩 박스가 걸치는 모든 셀에 항목 등록
+
+    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, []);
       }
 
-      currentHoveredRef.current = newHoveredComponent;
-      currentHoveredDataRef.current = newHoveredData;
-    } catch (error) {
-      // 전체 핸들러 에러 시 조용히 종료 (앱 크래시 방지)
-      console.error('[CanvasProvider] handleGlobalMouseMove error:', error);
+      this.grid.get(cell).push(item);
     }
-  }, [controller]);
-  var handleZoomStart = useCallback(function () {
-    draggingRef.current = true;
-  }, []);
-  var handleIdle = useCallback(function () {
-    draggingRef.current = false;
-  }, []);
-  useEffect(function () {
-    try {
-      controller.addEventListener('CLICK', handleGlobalClick);
-      controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
-      controller.addEventListener('ZOOMSTART', handleZoomStart);
-      controller.addEventListener('IDLE', handleIdle);
-    } catch (error) {
-      // 이벤트 리스너 등록 실패 시 경고만 출력 (기존 동작 보장)
-      console.warn('[CanvasProvider] Failed to add event listeners:', error);
-    }
-
-    return function () {
-      try {
-        controller.removeEventListener('CLICK', handleGlobalClick);
-        controller.removeEventListener('MOUSEMOVE', handleGlobalMouseMove);
-        controller.removeEventListener('ZOOMSTART', handleZoomStart);
-        controller.removeEventListener('IDLE', handleIdle);
-      } catch (error) {
-        // cleanup 중 에러 발생 시 조용히 처리 (controller가 이미 destroy된 경우 등)
-        // 에러를 무시해도 메모리 누수는 발생하지 않음 (이벤트 리스너는 자동으로 정리됨)
-        console.warn('[CanvasProvider] Failed to remove event listeners:', error);
-      }
-    };
-  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]);
-  var contextValue = useMemo(function () {
-    return {
-      registerComponent: registerComponent,
-      unregisterComponent: unregisterComponent
-    };
-  }, [registerComponent, unregisterComponent]);
-  return React.createElement(CanvasContext.Provider, {
-    value: contextValue
-  }, children);
-};
-/**
- * Canvas Context Hook
- *
- * @returns CanvasContextValue 또는 null (Provider 없으면)
- */
+  }; // 항목 제거 (모든 셀에서 참조 제거)
 
-var useCanvasContext = function () {
-  return useContext(CanvasContext);
-};
 
-/**
- * 이벤트 유효성 검증 및 좌표 변환
- *
- * @param event 이벤트 파라미터
- * @param context CanvasContext 인스턴스
- * @param controller MintMapController 인스턴스
- * @returns 유효한 화면 좌표 또는 null
- */
-var validateEvent = function (event, // eslint-disable-next-line @typescript-eslint/no-explicit-any
-context, controller) {
-  var _a;
+  SpatialHashGrid.prototype.remove = function (item) {
+    var prevCells = this.itemToCells.get(item);
+    if (!prevCells) return; // 항목이 등록된 모든 셀에서 참조 제거 (메모리 누수 방지)
 
-  if (context) return null;
-  if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return null;
+    for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
+      var cell = prevCells_1[_i];
+      var cellItems = this.grid.get(cell);
 
-  try {
-    return controller.positionToOffset(event.param.position);
-  } catch (error) {
-    console.error('[CanvasLayer] validateEvent error:', error);
-    return null;
-  }
-};
-/**
- * Map의 values를 배열로 변환
- *
- * @template T Map 값의 타입
- * @param map 변환할 Map
- * @returns Map의 값 배열
- */
+      if (cellItems) {
+        var index = cellItems.indexOf(item);
 
-var mapValuesToArray = function (map) {
-  if (map.size === 0) return [];
-  return Array.from(map.values());
-};
+        if (index !== -1) {
+          cellItems.splice(index, 1);
+        } // 빈 셀 정리 (메모리 효율: 사용하지 않는 셀 제거)
 
-/**
- * 지도 이벤트 핸들러 생성 함수
- *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- * @param deps 이벤트 핸들러 생성에 필요한 의존성
- * @returns 지도 이벤트 핸들러 객체
- */
 
-/* eslint-disable no-restricted-syntax */
+        if (cellItems.length === 0) {
+          this.grid.delete(cell);
+        }
+      }
+    } // 항목과 셀의 매핑 제거
 
-var createMapEventHandlers = function (deps) {
-  var accumTranslateRef = deps.accumTranslateRef,
-      boundingBoxCacheRef = deps.boundingBoxCacheRef,
-      containerRef = deps.containerRef,
-      controller = deps.controller,
-      markerRef = deps.markerRef,
-      offsetCacheRef = deps.offsetCacheRef,
-      options = deps.options,
-      prevCenterOffsetRef = deps.prevCenterOffsetRef,
-      renderAllImmediate = deps.renderAllImmediate; // 지도 이동/줌 완료 시 처리 (캐시 초기화 및 렌더링)
 
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
+    this.itemToCells.delete(item);
+  }; // 항목 위치 업데이트 (remove + insert)
 
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 마커 위치 업데이트
 
-    var bounds = controller.getCurrBounds();
+  SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
+    this.insert(item, minX, minY, maxX, maxY);
+  }; // 점 주변의 항목 조회 (Hit Test용)
 
-    var markerOptions = __assign(__assign({}, options), {
-      position: bounds.nw
-    });
 
-    if (markerRef.current) {
-      controller.updateMarker(markerRef.current, markerOptions);
-    } // transform 제거 전에 새 데이터로 즉시 렌더링 (transform 제거 시 잠깐 빈 화면이 보이는 것 방지)
+  SpatialHashGrid.prototype.queryPoint = function (x, y) {
+    // 클릭 위치가 속한 셀의 모든 항목 조회 (O(1) 수준의 빠른 조회)
+    var cellKey = this.getCellKey(x, y);
+    var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
 
+    return items || [];
+  }; // 영역 내 항목 조회 (Viewport Culling용)
 
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 새 위치에서 렌더링 (캐시는 이미 초기화됨)
 
+  SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
+    // 영역이 걸치는 모든 셀 찾기
+    var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
+    var results = new Set(); // 중복 제거를 위해 Set 사용
+    // 각 셀의 모든 항목을 결과에 추가
 
-    renderAllImmediate();
-  }; // 줌 시작 시 처리 (일시적으로 숨김)
+    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); // Set이므로 중복 자동 제거
+        }
+      }
+    }
 
-  var handleZoomStart = function () {
-    if (!containerRef.current) return;
-    containerRef.current.style.visibility = 'hidden';
-  }; // 줌 종료 시 처리 (다시 표시)
+    return Array.from(results);
+  }; // 항목 존재 여부 확인
 
 
-  var handleZoomEnd = function () {
-    if (!containerRef.current) return;
-    containerRef.current.style.visibility = '';
-  }; // 지도 중심 변경 시 처리 (transform으로 이동 추적, 캐시 유지)
+  SpatialHashGrid.prototype.has = function (item) {
+    return this.itemToCells.has(item);
+  }; // 전체 초기화
 
 
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current; // 첫 번째 호출 시 이전 위치 저장만 하고 종료
+  SpatialHashGrid.prototype.clear = function () {
+    this.grid.clear();
+    this.itemToCells.clear();
+  }; // 통계 정보 반환
 
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      return;
-    } // 이전 위치와 현재 위치의 차이 계산 (이동 거리)
 
+  SpatialHashGrid.prototype.stats = function () {
+    var totalCellItems = 0;
+    this.grid.forEach(function (items) {
+      totalCellItems += items.length;
+    });
+    return {
+      // 고유 항목 수 (정확)
+      avgItemsPerCell: this.grid.size > 0 ? totalCellItems / this.grid.size : 0,
+      totalCells: this.grid.size,
+      totalItems: this.itemToCells.size
+    };
+  }; // 모든 그리드 셀 데이터 반환 (디버깅/모니터링용)
 
-    var dx = prev.x - curr.x;
-    var dy = prev.y - curr.y; // 누적 이동 거리 저장 (transform으로 화면만 이동, 캐시는 유지하여 성능 최적화)
 
-    accumTranslateRef.current = {
-      x: accumTranslateRef.current.x + dx,
-      y: accumTranslateRef.current.y + dy
-    };
-    prevCenterOffsetRef.current = {
-      x: curr.x,
-      y: curr.y
-    }; // CSS transform으로 컨테이너 이동 (캐시된 좌표는 그대로 유지)
+  SpatialHashGrid.prototype.getAllCells = function () {
+    return new Map(this.grid);
+  }; // 특정 셀의 항목 조회
 
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
-  };
 
-  var handleDragStart = function () {// 커서는 각 컴포넌트에서 처리
+  SpatialHashGrid.prototype.getCellItems = function (cellKey) {
+    return this.grid.get(cellKey) || [];
   };
 
-  var handleDragEnd = function () {// 커서는 각 컴포넌트에서 처리
-  };
+  return SpatialHashGrid;
+}();
 
-  return {
-    handleCenterChanged: handleCenterChanged,
-    handleDragEnd: handleDragEnd,
-    handleDragStart: handleDragStart,
-    handleIdle: handleIdle,
-    handleZoomEnd: handleZoomEnd,
-    handleZoomStart: handleZoomStart
-  };
-};
+var CanvasContext = createContext(null);
 /**
- * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+ * CanvasProvider 컴포넌트
  *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- * @param data 공간 인덱스에 삽입할 데이터 배열
- * @param spatialIndex Spatial Hash Grid 인스턴스
- * @param computeBoundingBox 바운딩 박스 계산 함수
+ * 다중 Canvas 인스턴스를 관리하고 zIndex 기반 이벤트 우선순위를 처리합니다.
  */
 
-var buildSpatialIndex = function (data, spatialIndex, computeBoundingBox) {
-  spatialIndex.clear();
+/* eslint-disable no-restricted-syntax */
 
-  for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
-    var item = data_1[_i];
-    var bbox = computeBoundingBox(item);
+/* eslint-disable no-continue */
 
-    if (bbox) {
-      spatialIndex.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
-    }
-  }
-};
-/**
- * 선택 상태 동기화 (화면 밖 데이터도 선택 상태 유지)
- *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- * @param data 최신 데이터 배열
- * @param selectedIds 선택된 항목 ID Set
- * @param selectedItemsMap 현재 선택된 항목 Map
- * @returns 업데이트된 선택된 항목 Map
- */
+var CanvasProvider = function (_a) {
+  var children = _a.children,
+      _b = _a.markerMaxCacheSize,
+      markerMaxCacheSize = _b === void 0 ? 5000 : _b,
+      _c = _a.polygonMaxCacheSize,
+      polygonMaxCacheSize = _c === void 0 ? 30000 : _c;
+  var controller = useMintMapController(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var syncSelectedItems = function (data, selectedIds, selectedItemsMap) {
-  var dataMap = new Map(data.map(function (m) {
-    return [m.id, m];
-  }));
-  var newSelectedItemsMap = new Map();
-  selectedIds.forEach(function (id) {
-    // 현재 data에 있으면 최신 데이터 사용
-    var currentItem = dataMap.get(id);
+  var componentsRef = useRef([]); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    if (currentItem) {
-      newSelectedItemsMap.set(id, currentItem);
-    } else {
-      // 화면 밖이면 기존 데이터 유지
-      var prevItem = selectedItemsMap.get(id);
+  var currentHoveredRef = useRef(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-      if (prevItem) {
-        newSelectedItemsMap.set(id, prevItem);
-      }
-    }
-  });
-  return newSelectedItemsMap;
-};
-/**
- * 외부 selectedItems를 내부 상태로 동기화
- *
- * @template T 마커/폴리곤 데이터의 추가 속성 타입
- * @param externalSelectedItems 외부에서 전달된 선택된 항목 배열
- * @param selectedIdsRef 선택된 ID Set ref
- * @param selectedItemsMapRef 선택된 항목 Map ref
- */
+  var currentHoveredDataRef = useRef(null);
+  var draggingRef = useRef(false); // 공유 캐시 (모든 레이어가 공유)
 
-var syncExternalSelectedItems = function (externalSelectedItems, selectedIdsRef, selectedItemsMapRef) {
-  if (externalSelectedItems === undefined) return;
-  var newSelectedIds = new Set();
-  var newSelectedItemsMap = new Map();
-  externalSelectedItems.forEach(function (item) {
-    newSelectedIds.add(item.id);
-    newSelectedItemsMap.set(item.id, item);
-  }); // eslint-disable-next-line no-param-reassign
+  var sharedMarkerCacheRef = useRef(new QueueCache(markerMaxCacheSize));
+  var sharedPolygonCacheRef = useRef(new QueueCache(polygonMaxCacheSize)); // 컴포넌트 등록 (zIndex 내림차순 정렬)
 
-  selectedIdsRef.current = newSelectedIds; // eslint-disable-next-line no-param-reassign
+  var registerComponent = useCallback(function (instance) {
+    componentsRef.current.push(instance);
+    componentsRef.current.sort(function (a, b) {
+      return b.zIndex - a.zIndex;
+    });
+  }, []); // 컴포넌트 등록 해제
 
-  selectedItemsMapRef.current = newSelectedItemsMap;
-};
+  var unregisterComponent = useCallback(function (instance) {
+    if (currentHoveredRef.current === instance) {
+      currentHoveredRef.current = null;
+      currentHoveredDataRef.current = null;
+    }
 
-/* eslint-disable max-classes-per-file */
+    componentsRef.current = componentsRef.current.filter(function (c) {
+      return c !== instance;
+    });
+  }, []); // 전역 클릭 핸들러 (zIndex 우선순위)
 
-/* eslint-disable no-restricted-syntax */
+  var handleGlobalClick = useCallback(function (event) {
+    var _a, _b;
 
-/**
- * 공간 인덱스 그리드 셀 크기 (픽셀 단위)
- *
- * @default 100
- *
- * @remarks
- * 셀 크기는 평균 마커 크기의 1.5~2배가 적절합니다.
- * - 마커가 50px 이하: 50px 권장
- * - 마커가 60-80px: 100px 권장 (현재 설정)
- * - 마커가 100px 이상: 150-200px 권장
- *
- * 셀 크기가 너무 작으면:
- * - 한 마커가 여러 셀에 등록되어 메모리 사용량 증가
- * - 인덱스 빌드 비용 증가
- *
- * 셀 크기가 너무 크면:
- * - 한 셀에 많은 마커가 들어가서 Hit Test 시 후보 항목이 많아짐
- * - Hit Test 성능 저하
- */
-var SPATIAL_GRID_CELL_SIZE = 100;
-/**
- * 뷰포트 컬링 여유 공간 (픽셀 단위)
- *
- * @default 100
- */
+    try {
+      if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+      var clickedOffset = void 0;
 
-var DEFAULT_CULLING_MARGIN = 100;
-/**
- * Queue 캐시 최대 항목 수
- *
- * @default 30000
- */
+      try {
+        clickedOffset = controller.positionToOffset(event.param.position);
+      } catch (error) {
+        // positionToOffset 실패 시 조용히 종료 (기존 동작 보장)
+        console.warn('[CanvasProvider] positionToOffset failed:', error);
+        return;
+      } // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
-var DEFAULT_MAX_CACHE_SIZE = 30000;
-/**
- * Queue Cache (FIFO - First In First Out)
- *
- * 좌표 변환 결과를 캐싱하기 위한 캐시 구현
- * FIFO 방식으로 가장 먼저 저장된 항목부터 제거합니다.
- *
- * @template K 캐시 키 타입
- * @template V 캐시 값 타입
- */
 
-var QueueCache =
-/** @class */
-function () {
-  function QueueCache(maxSize) {
-    if (maxSize === void 0) {
-      maxSize = 10000;
+      for (var _i = 0, _c = componentsRef.current; _i < _c.length; _i++) {
+        var component = _c[_i];
+
+        try {
+          if (component.isInteractionDisabled()) continue;
+          var data = component.findData(clickedOffset);
+          if (!data) continue; // 첫 번째로 찾은 항목만 처리하고 종료 (zIndex 우선순위)
+
+          component.handleLocalClick(data);
+          (_b = component.onClick) === null || _b === void 0 ? void 0 : _b.call(component, data, component.getSelectedIds());
+          return;
+        } catch (error) {
+          // 개별 컴포넌트 처리 중 에러 발생 시 다음 컴포넌트로 계속 진행
+          console.warn('[CanvasProvider] Component click handler error:', error);
+          continue;
+        }
+      }
+    } catch (error) {
+      // 전체 핸들러 에러 시 조용히 종료 (앱 크래시 방지)
+      console.error('[CanvasProvider] handleGlobalClick error:', error);
     }
+  }, [controller]); // 전역 마우스 이동 핸들러 (zIndex 우선순위)
 
-    this.cache = new Map();
-    this.maxSize = maxSize;
-  } // 캐시에서 값 조회
+  var handleGlobalMouseMove = useCallback(function (event) {
+    var _a;
 
+    try {
+      if (draggingRef.current || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
+      var mouseOffset = void 0;
 
-  QueueCache.prototype.get = function (key) {
-    return this.cache.get(key);
-  }; // 캐시에 값 저장 (FIFO eviction)
+      try {
+        mouseOffset = controller.positionToOffset(event.param.position);
+      } catch (error) {
+        // positionToOffset 실패 시 조용히 종료 (기존 동작 보장)
+        console.warn('[CanvasProvider] positionToOffset failed:', error);
+        return;
+      } // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
-  QueueCache.prototype.set = function (key, value) {
-    var exists = this.cache.has(key);
+      var newHoveredComponent = null; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-    if (exists) {
-      this.cache.set(key, value);
-      return;
-    }
+      var newHoveredData = null; // zIndex 내림차순으로 정렬된 컴포넌트 순회 (높은 zIndex가 먼저 처리)
 
-    if (this.cache.size >= this.maxSize) {
-      var firstKey = this.cache.keys().next().value;
+      for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
+        var component = _b[_i];
 
-      if (firstKey !== undefined) {
-        this.cache.delete(firstKey);
-      }
-    }
+        try {
+          if (component.isInteractionDisabled()) continue;
+          var data = component.findData(mouseOffset);
+          if (!data) continue; // 첫 번째로 찾은 항목만 hover 처리 (zIndex 우선순위)
 
-    this.cache.set(key, value);
-  }; // 캐시 초기화
+          newHoveredComponent = component;
+          newHoveredData = data;
+          break;
+        } catch (error) {
+          // 개별 컴포넌트 처리 중 에러 발생 시 다음 컴포넌트로 계속 진행
+          console.warn('[CanvasProvider] Component mouse move handler error:', error);
+          continue;
+        }
+      } // hover 상태가 변경되지 않았으면 종료 (불필요한 렌더링 방지)
 
 
-  QueueCache.prototype.clear = function () {
-    this.cache.clear();
-  }; // 캐시 크기 반환
+      if (currentHoveredRef.current === newHoveredComponent && currentHoveredDataRef.current === newHoveredData) {
+        return;
+      } // 기존 hover 항목에 mouseOut 이벤트 발생
 
 
-  QueueCache.prototype.size = function () {
-    return this.cache.size;
-  }; // 키 존재 여부 확인
+      if (currentHoveredRef.current) {
+        try {
+          currentHoveredRef.current.setHovered(null);
+
+          if (currentHoveredRef.current.onMouseOut && currentHoveredDataRef.current) {
+            currentHoveredRef.current.onMouseOut(currentHoveredDataRef.current);
+          }
+        } catch (error) {
+          // mouseOut 이벤트 에러 시 조용히 처리 (기존 동작 보장)
+          console.warn('[CanvasProvider] mouseOut handler error:', error);
+        }
+      } // 새 hover 항목에 mouseOver 이벤트 발생
 
 
-  QueueCache.prototype.has = function (key) {
-    return this.cache.has(key);
-  };
+      if (newHoveredComponent && newHoveredData) {
+        try {
+          newHoveredComponent.setHovered(newHoveredData);
 
-  return QueueCache;
-}();
+          if (newHoveredComponent.onMouseOver) {
+            newHoveredComponent.onMouseOver(newHoveredData);
+          }
+        } catch (error) {
+          // mouseOver 이벤트 에러 시 조용히 처리 (기존 동작 보장)
+          console.warn('[CanvasProvider] mouseOver handler error:', error);
+        }
+      }
+
+      currentHoveredRef.current = newHoveredComponent;
+      currentHoveredDataRef.current = newHoveredData;
+    } catch (error) {
+      // 전체 핸들러 에러 시 조용히 종료 (앱 크래시 방지)
+      console.error('[CanvasProvider] handleGlobalMouseMove error:', error);
+    }
+  }, [controller]);
+  var handleZoomStart = useCallback(function () {
+    draggingRef.current = true;
+  }, []);
+  var handleIdle = useCallback(function () {
+    draggingRef.current = false;
+  }, []);
+  useEffect(function () {
+    try {
+      controller.addEventListener('CLICK', handleGlobalClick);
+      controller.addEventListener('MOUSEMOVE', handleGlobalMouseMove);
+      controller.addEventListener('ZOOMSTART', handleZoomStart);
+      controller.addEventListener('IDLE', handleIdle);
+    } catch (error) {
+      // 이벤트 리스너 등록 실패 시 경고만 출력 (기존 동작 보장)
+      console.warn('[CanvasProvider] Failed to add event listeners:', error);
+    }
+
+    return function () {
+      try {
+        controller.removeEventListener('CLICK', handleGlobalClick);
+        controller.removeEventListener('MOUSEMOVE', handleGlobalMouseMove);
+        controller.removeEventListener('ZOOMSTART', handleZoomStart);
+        controller.removeEventListener('IDLE', handleIdle);
+      } catch (error) {
+        // cleanup 중 에러 발생 시 조용히 처리 (controller가 이미 destroy된 경우 등)
+        // 에러를 무시해도 메모리 누수는 발생하지 않음 (이벤트 리스너는 자동으로 정리됨)
+        console.warn('[CanvasProvider] Failed to remove event listeners:', error);
+      }
+    };
+  }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]);
+  var contextValue = useMemo(function () {
+    return {
+      registerComponent: registerComponent,
+      sharedMarkerCache: sharedMarkerCacheRef.current,
+      sharedPolygonCache: sharedPolygonCacheRef.current,
+      unregisterComponent: unregisterComponent
+    };
+  }, [registerComponent, unregisterComponent]);
+  return React.createElement(CanvasContext.Provider, {
+    value: contextValue
+  }, children);
+};
 /**
- * Spatial Hash Grid (공간 해시 그리드)
+ * Canvas Context Hook
  *
- * 빠른 Hit Test를 위한 그리드 기반 공간 인덱싱 자료구조
+ * @returns CanvasContextValue 또는 null (Provider 없으면)
+ */
+
+var useCanvasContext = function () {
+  return useContext(CanvasContext);
+};
+
+/**
+ * 이벤트 유효성 검증 및 좌표 변환
  *
- * @template T 인덱싱할 항목 타입
+ * @param event 이벤트 파라미터
+ * @param context CanvasContext 인스턴스
+ * @param controller MintMapController 인스턴스
+ * @returns 유효한 화면 좌표 또는 null
  */
+var validateEvent = function (event, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+context, controller) {
+  var _a;
 
-var SpatialHashGrid =
-/** @class */
-function () {
-  function SpatialHashGrid(cellSize) {
-    if (cellSize === void 0) {
-      cellSize = SPATIAL_GRID_CELL_SIZE;
-    }
+  if (context) return null;
+  if (!((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return null;
 
-    this.cellSize = cellSize;
-    this.grid = new Map();
-    this.itemToCells = new Map();
-  } // 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
+  try {
+    return controller.positionToOffset(event.param.position);
+  } catch (error) {
+    console.error('[CanvasLayer] validateEvent error:', error);
+    return null;
+  }
+};
+/**
+ * Map의 values를 배열로 변환
+ *
+ * @template T Map 값의 타입
+ * @param map 변환할 Map
+ * @returns Map의 값 배열
+ */
 
+var mapValuesToArray = function (map) {
+  if (map.size === 0) return [];
+  return Array.from(map.values());
+};
 
-  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);
-  }; // 바운딩 박스가 걸치는 모든 셀 키 배열 반환
+/**
+ * 지도 이벤트 핸들러 생성 함수
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param deps 이벤트 핸들러 생성에 필요한 의존성
+ * @returns 지도 이벤트 핸들러 객체
+ */
+
+/* eslint-disable no-restricted-syntax */
+
+var createMapEventHandlers = function (deps) {
+  var accumTranslateRef = deps.accumTranslateRef,
+      boundingBoxCacheRef = deps.boundingBoxCacheRef,
+      clearCache = deps.clearCache,
+      containerRef = deps.containerRef,
+      controller = deps.controller,
+      markerRef = deps.markerRef,
+      options = deps.options,
+      prevCenterOffsetRef = deps.prevCenterOffsetRef,
+      renderAllImmediate = deps.renderAllImmediate; // 지도 이동/줌 완료 시 처리 (캐시 초기화 및 렌더링)
 
+  var handleIdle = function () {
+    prevCenterOffsetRef.current = null;
+    accumTranslateRef.current = {
+      x: 0,
+      y: 0
+    }; // 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
 
-  SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
-    var cells = []; // 바운딩 박스가 걸치는 셀 범위 계산
+    clearCache();
+    boundingBoxCacheRef.current.clear(); // 마커 위치 업데이트
 
-    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); // 바운딩 박스가 걸치는 모든 셀을 배열에 추가
+    var bounds = controller.getCurrBounds();
 
-    for (var x = startCellX; x <= endCellX; x++) {
-      for (var y = startCellY; y <= endCellY; y++) {
-        cells.push("".concat(x, ",").concat(y));
-      }
-    }
+    var markerOptions = __assign(__assign({}, options), {
+      position: bounds.nw
+    });
 
-    return cells;
-  }; // 항목 추가 (바운딩 박스 기반, 중복 삽입 방지)
+    if (markerRef.current) {
+      controller.updateMarker(markerRef.current, markerOptions);
+    } // transform 제거 전에 새 데이터로 즉시 렌더링 (transform 제거 시 잠깐 빈 화면이 보이는 것 방지)
 
 
-  SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
-    // 기존 항목 제거 (중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전)
-    this.remove(item); // 바운딩 박스가 걸치는 모든 셀에 항목 등록
+    if (containerRef.current) {
+      containerRef.current.style.transform = '';
+      containerRef.current.style.visibility = '';
+    } // 새 위치에서 렌더링 (캐시는 이미 초기화됨)
 
-    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];
+    renderAllImmediate();
+  }; // 줌 시작 시 처리 (일시적으로 숨김)
 
-      if (!this.grid.has(cell)) {
-        this.grid.set(cell, []);
-      }
 
-      this.grid.get(cell).push(item);
-    }
-  }; // 항목 제거 (모든 셀에서 참조 제거)
+  var handleZoomStart = function () {
+    if (!containerRef.current) return;
+    containerRef.current.style.visibility = 'hidden';
+  }; // 줌 종료 시 처리 (다시 표시)
 
 
-  SpatialHashGrid.prototype.remove = function (item) {
-    var prevCells = this.itemToCells.get(item);
-    if (!prevCells) return; // 항목이 등록된 모든 셀에서 참조 제거 (메모리 누수 방지)
+  var handleZoomEnd = function () {
+    if (!containerRef.current) return;
+    containerRef.current.style.visibility = '';
+  }; // 지도 중심 변경 시 처리 (transform으로 이동 추적, 캐시 유지)
 
-    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);
+  var handleCenterChanged = function () {
+    var center = controller.getCurrBounds().getCenter();
+    var curr = controller.positionToOffset(center);
+    var prev = prevCenterOffsetRef.current; // 첫 번째 호출 시 이전 위치 저장만 하고 종료
 
-        if (index !== -1) {
-          cellItems.splice(index, 1);
-        } // 빈 셀 정리 (메모리 효율: 사용하지 않는 셀 제거)
+    if (!prev) {
+      prevCenterOffsetRef.current = {
+        x: curr.x,
+        y: curr.y
+      };
+      return;
+    } // 이전 위치와 현재 위치의 차이 계산 (이동 거리)
 
 
-        if (cellItems.length === 0) {
-          this.grid.delete(cell);
-        }
-      }
-    } // 항목과 셀의 매핑 제거
+    var dx = prev.x - curr.x;
+    var dy = prev.y - curr.y; // 누적 이동 거리 저장 (transform으로 화면만 이동, 캐시는 유지하여 성능 최적화)
 
+    accumTranslateRef.current = {
+      x: accumTranslateRef.current.x + dx,
+      y: accumTranslateRef.current.y + dy
+    };
+    prevCenterOffsetRef.current = {
+      x: curr.x,
+      y: curr.y
+    }; // CSS transform으로 컨테이너 이동 (캐시된 좌표는 그대로 유지)
 
-    this.itemToCells.delete(item);
-  }; // 항목 위치 업데이트 (remove + insert)
+    if (containerRef.current) {
+      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
+    }
+  };
 
+  var handleDragStart = function () {// 커서는 각 컴포넌트에서 처리
+  };
 
-  SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
-    this.insert(item, minX, minY, maxX, maxY);
-  }; // 점 주변의 항목 조회 (Hit Test용)
+  var handleDragEnd = function () {// 커서는 각 컴포넌트에서 처리
+  };
 
+  return {
+    handleCenterChanged: handleCenterChanged,
+    handleDragEnd: handleDragEnd,
+    handleDragStart: handleDragStart,
+    handleIdle: handleIdle,
+    handleZoomEnd: handleZoomEnd,
+    handleZoomStart: handleZoomStart
+  };
+};
+/**
+ * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param data 공간 인덱스에 삽입할 데이터 배열
+ * @param spatialIndex Spatial Hash Grid 인스턴스
+ * @param computeBoundingBox 바운딩 박스 계산 함수
+ */
 
-  SpatialHashGrid.prototype.queryPoint = function (x, y) {
-    // 클릭 위치가 속한 셀의 모든 항목 조회 (O(1) 수준의 빠른 조회)
-    var cellKey = this.getCellKey(x, y);
-    var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
+var buildSpatialIndex = function (data, spatialIndex, computeBoundingBox) {
+  spatialIndex.clear();
 
-    return items || [];
-  }; // 영역 내 항목 조회 (Viewport Culling용)
+  for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+    var item = data_1[_i];
+    var bbox = computeBoundingBox(item);
 
+    if (bbox) {
+      spatialIndex.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
+    }
+  }
+};
+/**
+ * 선택 상태 동기화 (화면 밖 데이터도 선택 상태 유지)
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param data 최신 데이터 배열
+ * @param selectedIds 선택된 항목 ID Set
+ * @param selectedItemsMap 현재 선택된 항목 Map
+ * @returns 업데이트된 선택된 항목 Map
+ */
 
-  SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
-    // 영역이 걸치는 모든 셀 찾기
-    var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
-    var results = new Set(); // 중복 제거를 위해 Set 사용
-    // 각 셀의 모든 항목을 결과에 추가
+var syncSelectedItems = function (data, selectedIds, selectedItemsMap) {
+  var dataMap = new Map(data.map(function (m) {
+    return [m.id, m];
+  }));
+  var newSelectedItemsMap = new Map();
+  selectedIds.forEach(function (id) {
+    // 현재 data에 있으면 최신 데이터 사용
+    var currentItem = dataMap.get(id);
 
-    for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
-      var cell = cells_2[_i];
-      var items = this.grid.get(cell);
+    if (currentItem) {
+      newSelectedItemsMap.set(id, currentItem);
+    } else {
+      // 화면 밖이면 기존 데이터 유지
+      var prevItem = selectedItemsMap.get(id);
 
-      if (items) {
-        for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
-          var item = items_1[_a];
-          results.add(item); // Set이므로 중복 자동 제거
-        }
+      if (prevItem) {
+        newSelectedItemsMap.set(id, prevItem);
       }
     }
+  });
+  return newSelectedItemsMap;
+};
+/**
+ * 외부 selectedItems를 내부 상태로 동기화
+ *
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
+ * @param externalSelectedItems 외부에서 전달된 선택된 항목 배열
+ * @param selectedIdsRef 선택된 ID Set ref
+ * @param selectedItemsMapRef 선택된 항목 Map ref
+ */
 
-    return Array.from(results);
-  }; // 항목 존재 여부 확인
-
-
-  SpatialHashGrid.prototype.has = function (item) {
-    return this.itemToCells.has(item);
-  }; // 전체 초기화
-
-
-  SpatialHashGrid.prototype.clear = function () {
-    this.grid.clear();
-    this.itemToCells.clear();
-  }; // 통계 정보 반환
-
+var syncExternalSelectedItems = function (externalSelectedItems, selectedIdsRef, selectedItemsMapRef) {
+  if (externalSelectedItems === undefined) return;
+  var newSelectedIds = new Set();
+  var newSelectedItemsMap = new Map();
+  externalSelectedItems.forEach(function (item) {
+    newSelectedIds.add(item.id);
+    newSelectedItemsMap.set(item.id, item);
+  }); // eslint-disable-next-line no-param-reassign
 
-  SpatialHashGrid.prototype.stats = function () {
-    var totalCellItems = 0;
-    this.grid.forEach(function (items) {
-      totalCellItems += items.length;
-    });
-    return {
-      // 고유 항목 수 (정확)
-      avgItemsPerCell: this.grid.size > 0 ? totalCellItems / this.grid.size : 0,
-      totalCells: this.grid.size,
-      totalItems: this.itemToCells.size
-    };
-  };
+  selectedIdsRef.current = newSelectedIds; // eslint-disable-next-line no-param-reassign
 
-  return SpatialHashGrid;
-}();
+  selectedItemsMapRef.current = newSelectedItemsMap;
+};
 
 var Drawable =
 /** @class */
@@ -3954,13 +3983,12 @@ var CanvasMarkerLayer = function (props) {
   var data = props.data,
       _a = props.cullingMargin,
       cullingMargin = _a === void 0 ? DEFAULT_CULLING_MARGIN : _a,
-      _b = props.maxCacheSize,
-      maxCacheSize = _b === void 0 ? DEFAULT_MAX_CACHE_SIZE : _b,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       renderBase = props.renderBase,
-      options = __rest(props, ["data", "cullingMargin", "maxCacheSize", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+      options = __rest(props, ["data", "cullingMargin", "onOptimizationDataUpdate", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
 
 
-  var _c = hasRenderEvent && 'renderEvent' in props ? props : {
+  var _b = hasRenderEvent && 'renderEvent' in props ? props : {
     disableInteraction: false,
     onClick: undefined,
     onMouseOut: undefined,
@@ -3970,15 +3998,15 @@ var CanvasMarkerLayer = function (props) {
     selectedItems: undefined,
     topStageZIndex: undefined
   },
-      _d = _c.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
-      onClick = _c.onClick,
-      onMouseOut = _c.onMouseOut,
-      onMouseOver = _c.onMouseOver,
-      renderEvent = _c.renderEvent,
-      externalSelectedItem = _c.selectedItem,
-      externalSelectedItems = _c.selectedItems,
-      rawTopStageZIndex = _c.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
+      _c = _b.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      onClick = _b.onClick,
+      onMouseOut = _b.onMouseOut,
+      onMouseOver = _b.onMouseOver,
+      renderEvent = _b.renderEvent,
+      externalSelectedItem = _b.selectedItem,
+      externalSelectedItems = _b.selectedItems,
+      rawTopStageZIndex = _b.topStageZIndex; // topStageZIndex가 있으면 hover 최상단 표시 활성화, 없으면 비활성화 (성능 우선)
 
 
   var topStageZIndex = rawTopStageZIndex;
@@ -4016,24 +4044,30 @@ var CanvasMarkerLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = useRef(null); // 공유 캐시 사용 (모든 마커 레이어가 공유)
+
+  var sharedMarkerCache = context === null || context === void 0 ? void 0 : context.sharedMarkerCache;
+
+  if (!sharedMarkerCache) {
+    throw new Error('CanvasMarkerLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = useRef(new QueueCache(maxCacheSize));
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = useRef(new Map());
   var viewportRef = useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
   var updateViewport$1 = function () {
     updateViewport(stageRef.current, cullingMargin, viewportRef);
-  }; // 마커 좌표 변환 (위경도 → 화면 좌표, Queue 캐시 사용)
+  }; // 마커 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
 
   var getOrComputeMarkerOffset = function (markerData) {
-    var cached = offsetCacheRef.current.get(markerData.id);
-    if (cached && !Array.isArray(cached)) return cached;
+    var cached = sharedMarkerCache.get(markerData.id);
+    if (cached) return cached;
     var result = computeMarkerOffset(markerData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(markerData.id, result);
+    sharedMarkerCache.set(markerData.id, result);
     return result;
   }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
 
@@ -4230,6 +4264,24 @@ var CanvasMarkerLayer = function (props) {
       }
     });
     layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 마커 타입 항목만 필터링 (Offset 타입만)
+
+    var allCacheEntries = sharedMarkerCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedMarkerCache.size(),
+      spatialGridCells: spatialGridCells
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -4245,27 +4297,32 @@ var CanvasMarkerLayer = function (props) {
 
     if (topStageZIndex !== undefined) {
       doRenderTop();
-    }
+    } // 최적화 데이터 업데이트 콜백 호출
+
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = createMapEventHandlers({
+  var _d = createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedMarkerCache.clear();
+    },
     containerRef: containerRef,
     controller: controller,
     markerRef: markerRef,
-    offsetCacheRef: offsetCacheRef,
     options: options,
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdleShared = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChangedShared = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
+      handleIdleShared = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChangedShared = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd; // handleIdle 래핑: topStage transform 제거 추가
 
 
   var handleIdle = function () {
@@ -4530,7 +4587,7 @@ var CanvasMarkerLayer = function (props) {
       resizeRafId = requestAnimationFrame(function () {
         stage.width(mapDiv.offsetWidth);
         stage.height(mapDiv.offsetHeight);
-        offsetCacheRef.current.clear();
+        sharedMarkerCache.clear();
         boundingBoxCacheRef.current.clear();
         updateViewport$1();
         renderAllImmediate();
@@ -4605,8 +4662,8 @@ var CanvasMarkerLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -4822,7 +4879,7 @@ var CanvasMarkerLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedMarkerCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();
@@ -5922,18 +5979,17 @@ var renderPolygonEventWithHybridObject = function (customStyle, renderStyle) {
 
 var CanvasPolygonLayer = function (props) {
   var data = props.data,
-      onClick = props.onClick,
       _a = props.enableMultiSelect,
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.cullingMargin,
       cullingMargin = _b === void 0 ? DEFAULT_CULLING_MARGIN : _b,
-      _c = props.maxCacheSize,
-      maxCacheSize = _c === void 0 ? DEFAULT_MAX_CACHE_SIZE : _c,
+      onClick = props.onClick,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _d = props.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
-      options = __rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+      _c = props.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      options = __rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
   var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -5976,19 +6032,25 @@ var CanvasPolygonLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = useRef(null); // 공유 캐시 사용 (모든 폴리곤 레이어가 공유)
+
+  var sharedPolygonCache = context === null || context === void 0 ? void 0 : context.sharedPolygonCache;
+
+  if (!sharedPolygonCache) {
+    throw new Error('CanvasPolygonLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = useRef(new QueueCache(maxCacheSize));
   var spatialIndexRef = useRef(new SpatialHashGrid(SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = useRef(new Map());
-  var viewportRef = useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, Queue 캐시 사용)
+  var viewportRef = useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, 공유 캐시 사용)
 
   var getOrComputePolygonOffsets = function (polygonData) {
-    var cached = offsetCacheRef.current.get(polygonData.id);
-    if (cached && Array.isArray(cached)) return cached;
+    var cached = sharedPolygonCache.get(polygonData.id);
+    if (cached) return cached;
     var result = computePolygonOffsets(polygonData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(polygonData.id, result);
+    sharedPolygonCache.set(polygonData.id, result);
     return result;
   }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
@@ -6147,6 +6209,24 @@ var CanvasPolygonLayer = function (props) {
     }
 
     layer.batchDraw();
+  }; // 최적화 데이터 업데이트 콜백 호출
+
+
+  var notifyOptimizationData = function () {
+    if (!onOptimizationDataUpdate) return; // 공유 캐시에서 폴리곤 타입 항목만 필터링 (number[][][][] 타입만)
+
+    var allCacheEntries = sharedPolygonCache.getAllEntries();
+    var cacheEntries = allCacheEntries.map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      return [key, value];
+    });
+    var spatialGridCells = spatialIndexRef.current.getAllCells();
+    onOptimizationDataUpdate({
+      cacheEntries: cacheEntries,
+      cacheSize: sharedPolygonCache.size(),
+      spatialGridCells: spatialGridCells
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -6154,27 +6234,31 @@ var CanvasPolygonLayer = function (props) {
     updateViewport$1();
     buildSpatialIndex$1();
     doRenderBase();
-    doRenderEvent();
+    doRenderEvent(); // 최적화 데이터 업데이트 콜백 호출
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = createMapEventHandlers({
+  var _d = createMapEventHandlers({
     accumTranslateRef: accumTranslateRef,
     boundingBoxCacheRef: boundingBoxCacheRef,
+    clearCache: function () {
+      return sharedPolygonCache.clear();
+    },
     containerRef: containerRef,
     controller: controller,
     markerRef: markerRef,
-    offsetCacheRef: offsetCacheRef,
     options: options,
     prevCenterOffsetRef: prevCenterOffsetRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChanged = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd;
+      handleIdle = _d.handleIdle,
+      handleZoomStart = _d.handleZoomStart,
+      handleZoomEnd = _d.handleZoomEnd,
+      handleCenterChanged = _d.handleCenterChanged,
+      handleDragStartShared = _d.handleDragStart,
+      handleDragEndShared = _d.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
@@ -6358,7 +6442,7 @@ var CanvasPolygonLayer = function (props) {
       resizeRafId = requestAnimationFrame(function () {
         stage.width(mapDiv.offsetWidth);
         stage.height(mapDiv.offsetHeight);
-        offsetCacheRef.current.clear();
+        sharedPolygonCache.clear();
         boundingBoxCacheRef.current.clear();
         updateViewport$1();
         renderAllImmediate();
@@ -6421,8 +6505,8 @@ var CanvasPolygonLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -6458,7 +6542,7 @@ var CanvasPolygonLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedPolygonCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();