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

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js

@@ -30,13 +30,12 @@ var CanvasMarkerLayer = function (props) {
   var data = props.data,
       _a = props.cullingMargin,
       cullingMargin = _a === void 0 ? performance.DEFAULT_CULLING_MARGIN : _a,
-      _b = props.maxCacheSize,
-      maxCacheSize = _b === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _b,
+      onOptimizationDataUpdate = props.onOptimizationDataUpdate,
       renderBase = props.renderBase,
-      options = tslib.__rest(props, ["data", "cullingMargin", "maxCacheSize", "renderBase"]); // renderEvent가 있는 경우에만 인터랙션 관련 props 추출
+      options = tslib.__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,
@@ -46,15 +45,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;
@@ -92,24 +91,30 @@ var CanvasMarkerLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 마커 레이어가 공유)
+
+  var sharedMarkerCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedMarkerCache;
+
+  if (!sharedMarkerCache) {
+    throw new Error('CanvasMarkerLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = React.useRef(new performance.QueueCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = React.useRef(new Map());
   var viewportRef = React.useRef(null); // 뷰포트 영역 계산 (Viewport Culling용)
 
   var updateViewport = function () {
     viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
-  }; // 마커 좌표 변환 (위경도 → 화면 좌표, 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 = utils.computeMarkerOffset(markerData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(markerData.id, result);
+    sharedMarkerCache.set(markerData.id, result);
     return result;
   }; // 마커 바운딩 박스 계산 (Viewport Culling 및 Hit Test용, 오프셋 지원)
 
@@ -306,6 +311,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
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -321,27 +344,32 @@ var CanvasMarkerLayer = function (props) {
 
     if (topStageZIndex !== undefined) {
       doRenderTop();
-    }
+    } // 최적화 데이터 업데이트 콜백 호출
+
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = hooks.createMapEventHandlers({
+  var _d = hooks.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 () {
@@ -606,7 +634,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();
         renderAllImmediate();
@@ -681,8 +709,8 @@ var CanvasMarkerLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -898,7 +926,7 @@ var CanvasMarkerLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedMarkerCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();

package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/types.d.ts

@@ -1,4 +1,4 @@
-import type { MarkerOptions } from '../../../types';
+import type { MarkerOptions, Offset } from '../../../types';
 import type { CanvasData, CustomRenderBase, CustomRenderEvent } from '../shared';
 /**
  * CanvasMarkerLayer Props (renderEvent가 없는 경우 - 인터랙션 불가)
@@ -25,6 +25,12 @@ export interface CanvasMarkerLayerPropsWithoutEvent<T> extends Pick<MarkerOption
     selectedItem?: never;
     disableInteraction?: never;
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -57,6 +63,12 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItem<T> extends Pick
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -89,6 +101,12 @@ export interface CanvasMarkerLayerPropsWithEventWithSelectedItems<T> extends Pic
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -121,6 +139,12 @@ export interface CanvasMarkerLayerPropsWithEventWithoutSelection<T> extends Pick
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex?: never;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -154,6 +178,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItem<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -187,6 +217,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithSelectedItems<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)
@@ -220,6 +256,12 @@ export interface CanvasMarkerLayerPropsWithEventWithTopStageWithoutSelection<T>
     renderEvent: CustomRenderEvent<T>;
     /** Top Layer의 zIndex (hover된 항목을 최상단에 렌더링하기 위한 레이어) */
     topStageZIndex: number;
+    /** 최적화 데이터 콜백 (디버깅/모니터링용) */
+    onOptimizationDataUpdate?: (data: {
+        cacheSize: number;
+        cacheEntries: Array<[string, number[][][][] | Offset]>;
+        spatialGridCells: Map<string, CanvasData<T>[]>;
+    }) => void;
 }
 /**
  * CanvasMarkerLayer Props (renderEvent가 있는 경우 - 인터랙션 가능)

package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js

@@ -26,18 +26,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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 ? performance.DEFAULT_CULLING_MARGIN : _b,
-      _c = props.maxCacheSize,
-      maxCacheSize = _c === void 0 ? performance.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 = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
+      _c = props.disableInteraction,
+      disableInteraction = _c === void 0 ? false : _c,
+      options = tslib.__rest(props, ["data", "enableMultiSelect", "cullingMargin", "onClick", "onOptimizationDataUpdate", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
 
 
   var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
@@ -80,19 +79,25 @@ var CanvasPolygonLayer = function (props) {
     y: 0
   }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
 
-  var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
+  var dragStartHoveredItemRef = React.useRef(null); // 공유 캐시 사용 (모든 폴리곤 레이어가 공유)
+
+  var sharedPolygonCache = context$1 === null || context$1 === void 0 ? void 0 : context$1.sharedPolygonCache;
+
+  if (!sharedPolygonCache) {
+    throw new Error('CanvasPolygonLayer must be used within CanvasProvider');
+  } // 성능 최적화 Refs
+
 
-  var offsetCacheRef = React.useRef(new performance.QueueCache(maxCacheSize));
   var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
   var boundingBoxCacheRef = React.useRef(new Map());
-  var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, Queue 캐시 사용)
+  var viewportRef = React.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 = utils.computePolygonOffsets(polygonData, controller);
     if (!result) return null;
-    offsetCacheRef.current.set(polygonData.id, result);
+    sharedPolygonCache.set(polygonData.id, result);
     return result;
   }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
 
@@ -251,6 +256,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
+    });
   }; // 전체 즉시 렌더링
 
 
@@ -258,27 +281,31 @@ var CanvasPolygonLayer = function (props) {
     updateViewport();
     buildSpatialIndex();
     doRenderBase();
-    doRenderEvent();
+    doRenderEvent(); // 최적화 데이터 업데이트 콜백 호출
+
+    notifyOptimizationData();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = hooks.createMapEventHandlers({
+  var _d = hooks.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 상태 저장
@@ -462,7 +489,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();
         renderAllImmediate();
@@ -525,8 +552,8 @@ var CanvasPolygonLayer = function (props) {
 
       baseLayer.destroyChildren();
       eventLayer.destroyChildren();
-      stage.destroy();
-      offsetCacheRef.current.clear();
+      stage.destroy(); // 공유 캐시는 cleanup 시 clear하지 않음 (다른 레이어가 사용 중일 수 있음)
+
       boundingBoxCacheRef.current.clear();
       spatialIndexRef.current.clear();
     };
@@ -562,7 +589,7 @@ var CanvasPolygonLayer = function (props) {
       x: 0,
       y: 0
     };
-    offsetCacheRef.current.clear();
+    sharedPolygonCache.clear();
     boundingBoxCacheRef.current.clear();
     selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
     renderAllImmediate();