@mint-ui/map 1.2.0-test.39 → 1.2.0-test.40

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

@@ -33,9 +33,26 @@ export interface CanvasOption {
 /**
  * 서버 데이터와 캔버스 옵션을 결합한 타입
  *
+ * 서버 데이터의 필드가 CanvasOption과 충돌하는 경우, CanvasOption의 필드가 우선됩니다.
+ *
  * @template T 서버에서 받은 원본 데이터 타입
+ *
+ * @example
+ * // 서버 데이터에 id가 number 타입인 경우
+ * interface ServerData {
+ *   id: number;
+ *   name: string;
+ * }
+ *
+ * // CanvasData<ServerData>는 다음과 같이 됩니다:
+ * // {
+ * //   id: string;  // CanvasOption의 id가 우선
+ * //   name: string; // 서버 데이터의 name
+ * //   position: Position;
+ * //   ...CanvasOption의 다른 필드들
+ * // }
  */
-export declare type CanvasData<T = {}> = T & CanvasOption;
+export declare type CanvasData<T = {}> = Omit<T, keyof CanvasOption> & CanvasOption;
 /**
  * 렌더링 유틸리티 함수들 (좌표 변환)
  *

package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts

@@ -21,6 +21,8 @@ export interface WoongCanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex'
     enableMultiSelect?: boolean;
     /** hover 시 마커를 최상단으로 표시할지 여부 (기본값: false) */
     topOnHover?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
+    enableViewportCulling?: boolean;
     /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
     cullingMargin?: number;
     /** LRU 캐시 최대 크기 (기본값: 10000) */

package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.js

@@ -32,17 +32,19 @@ var WoongCanvasMarker = function (props) {
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.topOnHover,
       topOnHover = _b === void 0 ? false : _b,
-      _c = props.cullingMargin,
-      cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
-      _d = props.maxCacheSize,
-      maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
+      _c = props.enableViewportCulling,
+      enableViewportCulling = _c === void 0 ? false : _c,
+      _d = props.cullingMargin,
+      cullingMargin = _d === void 0 ? performance.DEFAULT_CULLING_MARGIN : _d,
+      _e = props.maxCacheSize,
+      maxCacheSize = _e === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _e,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _e = props.disableInteraction,
-      disableInteraction = _e === void 0 ? false : _e,
+      _f = props.disableInteraction,
+      disableInteraction = _f === void 0 ? false : _f,
       renderBase = props.renderBase,
       renderEvent = props.renderEvent,
-      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
+      options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = MintMapProvider.useMintMapController();
   var context$1 = context.useWoongCanvasContext();
@@ -59,6 +61,7 @@ var WoongCanvasMarker = function (props) {
 
   var dataRef = React.useRef(data);
   var disableInteractionRef = React.useRef(disableInteraction);
+  var enableViewportCullingRef = React.useRef(enableViewportCulling);
   var hoveredItemRef = React.useRef(null);
   var selectedItemRef = React.useRef(externalSelectedItem);
   var selectedIdsRef = React.useRef(new Set());
@@ -138,9 +141,9 @@ var WoongCanvasMarker = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = dataRef.current.filter(function (item) {
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          }); // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+          }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
             visibleItems = visibleItems.filter(function (item) {
@@ -158,7 +161,7 @@ var WoongCanvasMarker = function (props) {
           }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            if (isInViewport(hovered)) {
+            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
               renderBase({
                 ctx: ctx,
                 items: [hovered],
@@ -204,7 +207,7 @@ var WoongCanvasMarker = function (props) {
               selectedItem: selectedItemRef.current
             });
 
-            if (isInViewport(hovered)) {
+            if (!enableViewportCullingRef.current || isInViewport(hovered)) {
               var hoveredIsSelected = selectedItems.some(function (item) {
                 return item.id === hovered.id;
               });
@@ -239,14 +242,17 @@ var WoongCanvasMarker = function (props) {
 
 
   var renderAllImmediate = function () {
-    updateViewport();
+    if (enableViewportCullingRef.current) {
+      updateViewport();
+    }
+
     buildSpatialIndex();
     doRenderBase();
     doRenderEvent();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _f = hooks.createMapEventHandlers({
+  var _g = hooks.createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -257,12 +263,12 @@ var WoongCanvasMarker = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _f.handleIdle,
-      handleZoomStart = _f.handleZoomStart,
-      handleZoomEnd = _f.handleZoomEnd,
-      handleCenterChanged = _f.handleCenterChanged,
-      handleDragStartShared = _f.handleDragStart,
-      handleDragEndShared = _f.handleDragEnd;
+      handleIdle = _g.handleIdle,
+      handleZoomStart = _g.handleZoomStart,
+      handleZoomEnd = _g.handleZoomEnd,
+      handleCenterChanged = _g.handleCenterChanged,
+      handleDragStartShared = _g.handleDragStart,
+      handleDragEndShared = _g.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared();
@@ -439,7 +445,11 @@ var WoongCanvasMarker = function (props) {
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
     stage.add(eventLayer);
-    updateViewport(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    if (enableViewportCulling) {
+      updateViewport();
+    } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
@@ -452,7 +462,11 @@ var WoongCanvasMarker = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport();
+
+        if (enableViewportCullingRef.current) {
+          updateViewport();
+        }
+
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -524,7 +538,36 @@ var WoongCanvasMarker = function (props) {
 
   React.useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // 외부 selectedItems 동기화
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  React.useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
   React.useEffect(function () {
     if (!stageRef.current) return;

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

@@ -15,6 +15,8 @@ export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex'
     onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
     /** 다중 선택 활성화 여부 (기본값: false) */
     enableMultiSelect?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본값: false) */
+    enableViewportCulling?: boolean;
     /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
     cullingMargin?: number;
     /** LRU 캐시 최대 크기 (기본값: 10000) */

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

@@ -29,14 +29,16 @@ var WoongCanvasPolygon = function (props) {
       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,
+      _b = props.enableViewportCulling,
+      enableViewportCulling = _b === void 0 ? false : _b,
+      _c = props.cullingMargin,
+      cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
+      _d = props.maxCacheSize,
+      maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _d = props.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
       baseFillColor = props.baseFillColor,
       baseStrokeColor = props.baseStrokeColor,
       baseLineWidth = props.baseLineWidth,
@@ -49,7 +51,7 @@ var WoongCanvasPolygon = function (props) {
       hoveredFillColor = props.hoveredFillColor,
       hoveredStrokeColor = props.hoveredStrokeColor,
       hoveredLineWidth = props.hoveredLineWidth,
-      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -69,6 +71,7 @@ var WoongCanvasPolygon = function (props) {
 
   var dataRef = React.useRef(data);
   var disableInteractionRef = React.useRef(disableInteraction);
+  var enableViewportCullingRef = React.useRef(enableViewportCulling);
   var hoveredItemRef = React.useRef(null);
   var selectedItemRef = React.useRef(externalSelectedItem);
   var selectedIdsRef = React.useRef(new Set());
@@ -169,9 +172,9 @@ var WoongCanvasPolygon = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = dataRef.current.filter(function (item) {
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport(item);
-          });
+          }) : dataRef.current;
           renderBase({
             ctx: ctx,
             items: visibleItems,
@@ -223,14 +226,17 @@ var WoongCanvasPolygon = function (props) {
 
 
   var renderAllImmediate = function () {
-    updateViewport();
+    if (enableViewportCullingRef.current) {
+      updateViewport();
+    }
+
     buildSpatialIndex();
     doRenderBase();
     doRenderEvent();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = hooks.createMapEventHandlers({
+  var _f = hooks.createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -241,12 +247,12 @@ var WoongCanvasPolygon = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChanged = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd;
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared();
@@ -407,7 +413,11 @@ var WoongCanvasPolygon = function (props) {
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
     stage.add(eventLayer);
-    updateViewport(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    if (enableViewportCulling) {
+      updateViewport();
+    } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
@@ -420,7 +430,11 @@ var WoongCanvasPolygon = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport();
+
+        if (enableViewportCullingRef.current) {
+          updateViewport();
+        }
+
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -490,7 +504,36 @@ var WoongCanvasPolygon = function (props) {
 
   React.useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // 외부 selectedItems 동기화
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  React.useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
   React.useEffect(function () {
     if (!stageRef.current) return;

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

@@ -4,7 +4,7 @@
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  * GeoJSON MultiPolygon 형식을 지원하며, 도넛 폴리곤(구멍이 있는 폴리곤)도 처리할 수 있습니다.
  */
-import { CustomRenderBase, CustomRenderEvent, CanvasData } from "../shared/types";
+import { CustomRenderBase, CustomRenderEvent } from "../shared/types";
 /**
  * 폴리곤 그리기 파라미터 인터페이스
  */
@@ -76,7 +76,7 @@ export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillCo
  * );
  * ```
  */
-export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<CanvasData<T>>;
+export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<T>;
 /**
  * 폴리곤 Event 렌더링 함수 팩토리
  *
@@ -116,5 +116,5 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
  * );
  * ```
  */
-export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<CanvasData<T>>;
+export declare const renderPolygonEvent: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number, selectedFillColor?: string, selectedStrokeColor?: string, selectedLineWidth?: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<T>;
 export {};

package/dist/index.es.js

@@ -5593,17 +5593,19 @@ var WoongCanvasMarker = function (props) {
       enableMultiSelect = _a === void 0 ? false : _a,
       _b = props.topOnHover,
       topOnHover = _b === void 0 ? false : _b,
-      _c = props.cullingMargin,
-      cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
-      _d = props.maxCacheSize,
-      maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
+      _c = props.enableViewportCulling,
+      enableViewportCulling = _c === void 0 ? false : _c,
+      _d = props.cullingMargin,
+      cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
+      _e = props.maxCacheSize,
+      maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
       externalSelectedItems = props.selectedItems,
       externalSelectedItem = props.selectedItem,
-      _e = props.disableInteraction,
-      disableInteraction = _e === void 0 ? false : _e,
+      _f = props.disableInteraction,
+      disableInteraction = _f === void 0 ? false : _f,
       renderBase = props.renderBase,
       renderEvent = props.renderEvent,
-      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
+      options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
   var controller = useMintMapController();
   var context = useWoongCanvasContext();
@@ -5620,6 +5622,7 @@ var WoongCanvasMarker = function (props) {
 
   var dataRef = useRef(data);
   var disableInteractionRef = useRef(disableInteraction);
+  var enableViewportCullingRef = useRef(enableViewportCulling);
   var hoveredItemRef = useRef(null);
   var selectedItemRef = useRef(externalSelectedItem);
   var selectedIdsRef = useRef(new Set());
@@ -5699,9 +5702,9 @@ var WoongCanvasMarker = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = dataRef.current.filter(function (item) {
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport$1(item);
-          }); // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+          }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
             visibleItems = visibleItems.filter(function (item) {
@@ -5719,7 +5722,7 @@ var WoongCanvasMarker = function (props) {
           }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
           if (topOnHover && !renderEvent && hovered) {
-            if (isInViewport$1(hovered)) {
+            if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
               renderBase({
                 ctx: ctx,
                 items: [hovered],
@@ -5765,7 +5768,7 @@ var WoongCanvasMarker = function (props) {
               selectedItem: selectedItemRef.current
             });
 
-            if (isInViewport$1(hovered)) {
+            if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
               var hoveredIsSelected = selectedItems.some(function (item) {
                 return item.id === hovered.id;
               });
@@ -5800,14 +5803,17 @@ var WoongCanvasMarker = function (props) {
 
 
   var renderAllImmediate = function () {
-    updateViewport$1();
+    if (enableViewportCullingRef.current) {
+      updateViewport$1();
+    }
+
     buildSpatialIndex$1();
     doRenderBase();
     doRenderEvent();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _f = createMapEventHandlers({
+  var _g = createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -5818,12 +5824,12 @@ var WoongCanvasMarker = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _f.handleIdle,
-      handleZoomStart = _f.handleZoomStart,
-      handleZoomEnd = _f.handleZoomEnd,
-      handleCenterChanged = _f.handleCenterChanged,
-      handleDragStartShared = _f.handleDragStart,
-      handleDragEndShared = _f.handleDragEnd;
+      handleIdle = _g.handleIdle,
+      handleZoomStart = _g.handleZoomStart,
+      handleZoomEnd = _g.handleZoomEnd,
+      handleCenterChanged = _g.handleCenterChanged,
+      handleDragStartShared = _g.handleDragStart,
+      handleDragEndShared = _g.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared();
@@ -6000,7 +6006,11 @@ var WoongCanvasMarker = function (props) {
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
     stage.add(eventLayer);
-    updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    if (enableViewportCulling) {
+      updateViewport$1();
+    } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
@@ -6013,7 +6023,11 @@ var WoongCanvasMarker = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport$1();
+
+        if (enableViewportCullingRef.current) {
+          updateViewport$1();
+        }
+
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -6085,7 +6099,36 @@ var WoongCanvasMarker = function (props) {
 
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // 외부 selectedItems 동기화
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
   useEffect(function () {
     if (!stageRef.current) return;
@@ -6421,14 +6464,16 @@ var WoongCanvasPolygon = function (props) {
       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,
+      _b = props.enableViewportCulling,
+      enableViewportCulling = _b === void 0 ? false : _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,
-      _d = props.disableInteraction,
-      disableInteraction = _d === void 0 ? false : _d,
+      _e = props.disableInteraction,
+      disableInteraction = _e === void 0 ? false : _e,
       baseFillColor = props.baseFillColor,
       baseStrokeColor = props.baseStrokeColor,
       baseLineWidth = props.baseLineWidth,
@@ -6441,7 +6486,7 @@ var WoongCanvasPolygon = function (props) {
       hoveredFillColor = props.hoveredFillColor,
       hoveredStrokeColor = props.hoveredStrokeColor,
       hoveredLineWidth = props.hoveredLineWidth,
-      options = __rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+      options = __rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
   // Hooks & Context
   // --------------------------------------------------------------------------
 
@@ -6461,6 +6506,7 @@ var WoongCanvasPolygon = function (props) {
 
   var dataRef = useRef(data);
   var disableInteractionRef = useRef(disableInteraction);
+  var enableViewportCullingRef = useRef(enableViewportCulling);
   var hoveredItemRef = useRef(null);
   var selectedItemRef = useRef(externalSelectedItem);
   var selectedIdsRef = useRef(new Set());
@@ -6561,9 +6607,9 @@ var WoongCanvasPolygon = function (props) {
           var ctx = context;
           var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-          var visibleItems = dataRef.current.filter(function (item) {
+          var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
             return isInViewport$1(item);
-          });
+          }) : dataRef.current;
           renderBase({
             ctx: ctx,
             items: visibleItems,
@@ -6615,14 +6661,17 @@ var WoongCanvasPolygon = function (props) {
 
 
   var renderAllImmediate = function () {
-    updateViewport$1();
+    if (enableViewportCullingRef.current) {
+      updateViewport$1();
+    }
+
     buildSpatialIndex$1();
     doRenderBase();
     doRenderEvent();
   }; // 지도 이벤트 핸들러 생성
 
 
-  var _e = createMapEventHandlers({
+  var _f = createMapEventHandlers({
     controller: controller,
     containerRef: containerRef,
     markerRef: markerRef,
@@ -6633,12 +6682,12 @@ var WoongCanvasPolygon = function (props) {
     boundingBoxCacheRef: boundingBoxCacheRef,
     renderAllImmediate: renderAllImmediate
   }),
-      handleIdle = _e.handleIdle,
-      handleZoomStart = _e.handleZoomStart,
-      handleZoomEnd = _e.handleZoomEnd,
-      handleCenterChanged = _e.handleCenterChanged,
-      handleDragStartShared = _e.handleDragStart,
-      handleDragEndShared = _e.handleDragEnd;
+      handleIdle = _f.handleIdle,
+      handleZoomStart = _f.handleZoomStart,
+      handleZoomEnd = _f.handleZoomEnd,
+      handleCenterChanged = _f.handleCenterChanged,
+      handleDragStartShared = _f.handleDragStart,
+      handleDragEndShared = _f.handleDragEnd;
 
   var handleDragStart = function () {
     handleDragStartShared();
@@ -6799,7 +6848,11 @@ var WoongCanvasPolygon = function (props) {
     eventLayerRef.current = eventLayer;
     stage.add(baseLayer);
     stage.add(eventLayer);
-    updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+    if (enableViewportCulling) {
+      updateViewport$1();
+    } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
     var resizeRafId = null;
     var resizeObserver = new ResizeObserver(function () {
@@ -6812,7 +6865,11 @@ var WoongCanvasPolygon = function (props) {
         stage.height(mapDiv.offsetHeight);
         offsetCacheRef.current.clear();
         boundingBoxCacheRef.current.clear();
-        updateViewport$1();
+
+        if (enableViewportCullingRef.current) {
+          updateViewport$1();
+        }
+
         renderAllImmediate();
         resizeRafId = null;
       });
@@ -6882,7 +6939,36 @@ var WoongCanvasPolygon = function (props) {
 
   useEffect(function () {
     disableInteractionRef.current = disableInteraction;
-  }, [disableInteraction]); // 외부 selectedItems 동기화
+  }, [disableInteraction]); // enableViewportCulling 동기화
+
+  useEffect(function () {
+    enableViewportCullingRef.current = enableViewportCulling;
+
+    if (stageRef.current) {
+      // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+      var baseLayer = baseLayerRef.current;
+
+      if (baseLayer) {
+        var shape = baseLayer.findOne('.base-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      var eventLayer = eventLayerRef.current;
+
+      if (eventLayer) {
+        var shape = eventLayer.findOne('.event-render-shape');
+
+        if (shape) {
+          shape.destroy();
+        }
+      }
+
+      renderAllImmediate();
+    }
+  }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
   useEffect(function () {
     if (!stageRef.current) return;

package/dist/index.umd.js

@@ -5597,17 +5597,19 @@
         enableMultiSelect = _a === void 0 ? false : _a,
         _b = props.topOnHover,
         topOnHover = _b === void 0 ? false : _b,
-        _c = props.cullingMargin,
-        cullingMargin = _c === void 0 ? DEFAULT_CULLING_MARGIN : _c,
-        _d = props.maxCacheSize,
-        maxCacheSize = _d === void 0 ? DEFAULT_MAX_CACHE_SIZE : _d,
+        _c = props.enableViewportCulling,
+        enableViewportCulling = _c === void 0 ? false : _c,
+        _d = props.cullingMargin,
+        cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
+        _e = props.maxCacheSize,
+        maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
         externalSelectedItems = props.selectedItems,
         externalSelectedItem = props.selectedItem,
-        _e = props.disableInteraction,
-        disableInteraction = _e === void 0 ? false : _e,
+        _f = props.disableInteraction,
+        disableInteraction = _f === void 0 ? false : _f,
         renderBase = props.renderBase,
         renderEvent = props.renderEvent,
-        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
+        options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
 
     var controller = useMintMapController();
     var context = useWoongCanvasContext();
@@ -5624,6 +5626,7 @@
 
     var dataRef = React.useRef(data);
     var disableInteractionRef = React.useRef(disableInteraction);
+    var enableViewportCullingRef = React.useRef(enableViewportCulling);
     var hoveredItemRef = React.useRef(null);
     var selectedItemRef = React.useRef(externalSelectedItem);
     var selectedIdsRef = React.useRef(new Set());
@@ -5703,9 +5706,9 @@
             var ctx = context;
             var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-            var visibleItems = dataRef.current.filter(function (item) {
+            var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
               return isInViewport$1(item);
-            }); // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
+            }) : dataRef.current; // topOnHover 옵션: hover된 항목을 나중에 그려서 최상위에 표시
 
             if (topOnHover && !renderEvent && hovered) {
               visibleItems = visibleItems.filter(function (item) {
@@ -5723,7 +5726,7 @@
             }); // hover된 항목을 마지막에 렌더링하여 최상위에 표시
 
             if (topOnHover && !renderEvent && hovered) {
-              if (isInViewport$1(hovered)) {
+              if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
                 renderBase({
                   ctx: ctx,
                   items: [hovered],
@@ -5769,7 +5772,7 @@
                 selectedItem: selectedItemRef.current
               });
 
-              if (isInViewport$1(hovered)) {
+              if (!enableViewportCullingRef.current || isInViewport$1(hovered)) {
                 var hoveredIsSelected = selectedItems.some(function (item) {
                   return item.id === hovered.id;
                 });
@@ -5804,14 +5807,17 @@
 
 
     var renderAllImmediate = function () {
-      updateViewport$1();
+      if (enableViewportCullingRef.current) {
+        updateViewport$1();
+      }
+
       buildSpatialIndex$1();
       doRenderBase();
       doRenderEvent();
     }; // 지도 이벤트 핸들러 생성
 
 
-    var _f = createMapEventHandlers({
+    var _g = createMapEventHandlers({
       controller: controller,
       containerRef: containerRef,
       markerRef: markerRef,
@@ -5822,12 +5828,12 @@
       boundingBoxCacheRef: boundingBoxCacheRef,
       renderAllImmediate: renderAllImmediate
     }),
-        handleIdle = _f.handleIdle,
-        handleZoomStart = _f.handleZoomStart,
-        handleZoomEnd = _f.handleZoomEnd,
-        handleCenterChanged = _f.handleCenterChanged,
-        handleDragStartShared = _f.handleDragStart,
-        handleDragEndShared = _f.handleDragEnd;
+        handleIdle = _g.handleIdle,
+        handleZoomStart = _g.handleZoomStart,
+        handleZoomEnd = _g.handleZoomEnd,
+        handleCenterChanged = _g.handleCenterChanged,
+        handleDragStartShared = _g.handleDragStart,
+        handleDragEndShared = _g.handleDragEnd;
 
     var handleDragStart = function () {
       handleDragStartShared();
@@ -6004,7 +6010,11 @@
       eventLayerRef.current = eventLayer;
       stage.add(baseLayer);
       stage.add(eventLayer);
-      updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+      if (enableViewportCulling) {
+        updateViewport$1();
+      } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
       var resizeRafId = null;
       var resizeObserver = new ResizeObserver(function () {
@@ -6017,7 +6027,11 @@
           stage.height(mapDiv.offsetHeight);
           offsetCacheRef.current.clear();
           boundingBoxCacheRef.current.clear();
-          updateViewport$1();
+
+          if (enableViewportCullingRef.current) {
+            updateViewport$1();
+          }
+
           renderAllImmediate();
           resizeRafId = null;
         });
@@ -6089,7 +6103,36 @@
 
     React.useEffect(function () {
       disableInteractionRef.current = disableInteraction;
-    }, [disableInteraction]); // 외부 selectedItems 동기화
+    }, [disableInteraction]); // enableViewportCulling 동기화
+
+    React.useEffect(function () {
+      enableViewportCullingRef.current = enableViewportCulling;
+
+      if (stageRef.current) {
+        // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+        var baseLayer = baseLayerRef.current;
+
+        if (baseLayer) {
+          var shape = baseLayer.findOne('.base-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        var eventLayer = eventLayerRef.current;
+
+        if (eventLayer) {
+          var shape = eventLayer.findOne('.event-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        renderAllImmediate();
+      }
+    }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
     React.useEffect(function () {
       if (!stageRef.current) return;
@@ -6425,14 +6468,16 @@
         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,
+        _b = props.enableViewportCulling,
+        enableViewportCulling = _b === void 0 ? false : _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,
-        _d = props.disableInteraction,
-        disableInteraction = _d === void 0 ? false : _d,
+        _e = props.disableInteraction,
+        disableInteraction = _e === void 0 ? false : _e,
         baseFillColor = props.baseFillColor,
         baseStrokeColor = props.baseStrokeColor,
         baseLineWidth = props.baseLineWidth,
@@ -6445,7 +6490,7 @@
         hoveredFillColor = props.hoveredFillColor,
         hoveredStrokeColor = props.hoveredStrokeColor,
         hoveredLineWidth = props.hoveredLineWidth,
-        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
+        options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "baseFillColor", "baseStrokeColor", "baseLineWidth", "selectedFillColor", "selectedStrokeColor", "selectedLineWidth", "activeFillColor", "activeStrokeColor", "activeLineWidth", "hoveredFillColor", "hoveredStrokeColor", "hoveredLineWidth"]); // --------------------------------------------------------------------------
     // Hooks & Context
     // --------------------------------------------------------------------------
 
@@ -6465,6 +6510,7 @@
 
     var dataRef = React.useRef(data);
     var disableInteractionRef = React.useRef(disableInteraction);
+    var enableViewportCullingRef = React.useRef(enableViewportCulling);
     var hoveredItemRef = React.useRef(null);
     var selectedItemRef = React.useRef(externalSelectedItem);
     var selectedIdsRef = React.useRef(new Set());
@@ -6565,9 +6611,9 @@
             var ctx = context;
             var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
 
-            var visibleItems = dataRef.current.filter(function (item) {
+            var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
               return isInViewport$1(item);
-            });
+            }) : dataRef.current;
             renderBase({
               ctx: ctx,
               items: visibleItems,
@@ -6619,14 +6665,17 @@
 
 
     var renderAllImmediate = function () {
-      updateViewport$1();
+      if (enableViewportCullingRef.current) {
+        updateViewport$1();
+      }
+
       buildSpatialIndex$1();
       doRenderBase();
       doRenderEvent();
     }; // 지도 이벤트 핸들러 생성
 
 
-    var _e = createMapEventHandlers({
+    var _f = createMapEventHandlers({
       controller: controller,
       containerRef: containerRef,
       markerRef: markerRef,
@@ -6637,12 +6686,12 @@
       boundingBoxCacheRef: boundingBoxCacheRef,
       renderAllImmediate: renderAllImmediate
     }),
-        handleIdle = _e.handleIdle,
-        handleZoomStart = _e.handleZoomStart,
-        handleZoomEnd = _e.handleZoomEnd,
-        handleCenterChanged = _e.handleCenterChanged,
-        handleDragStartShared = _e.handleDragStart,
-        handleDragEndShared = _e.handleDragEnd;
+        handleIdle = _f.handleIdle,
+        handleZoomStart = _f.handleZoomStart,
+        handleZoomEnd = _f.handleZoomEnd,
+        handleCenterChanged = _f.handleCenterChanged,
+        handleDragStartShared = _f.handleDragStart,
+        handleDragEndShared = _f.handleDragEnd;
 
     var handleDragStart = function () {
       handleDragStartShared();
@@ -6803,7 +6852,11 @@
       eventLayerRef.current = eventLayer;
       stage.add(baseLayer);
       stage.add(eventLayer);
-      updateViewport$1(); // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
+      if (enableViewportCulling) {
+        updateViewport$1();
+      } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
+
 
       var resizeRafId = null;
       var resizeObserver = new ResizeObserver(function () {
@@ -6816,7 +6869,11 @@
           stage.height(mapDiv.offsetHeight);
           offsetCacheRef.current.clear();
           boundingBoxCacheRef.current.clear();
-          updateViewport$1();
+
+          if (enableViewportCullingRef.current) {
+            updateViewport$1();
+          }
+
           renderAllImmediate();
           resizeRafId = null;
         });
@@ -6886,7 +6943,36 @@
 
     React.useEffect(function () {
       disableInteractionRef.current = disableInteraction;
-    }, [disableInteraction]); // 외부 selectedItems 동기화
+    }, [disableInteraction]); // enableViewportCulling 동기화
+
+    React.useEffect(function () {
+      enableViewportCullingRef.current = enableViewportCulling;
+
+      if (stageRef.current) {
+        // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
+        var baseLayer = baseLayerRef.current;
+
+        if (baseLayer) {
+          var shape = baseLayer.findOne('.base-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        var eventLayer = eventLayerRef.current;
+
+        if (eventLayer) {
+          var shape = eventLayer.findOne('.event-render-shape');
+
+          if (shape) {
+            shape.destroy();
+          }
+        }
+
+        renderAllImmediate();
+      }
+    }, [enableViewportCulling]); // 외부 selectedItems 동기화
 
     React.useEffect(function () {
       if (!stageRef.current) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "1.2.0-test.39",
+  "version": "1.2.0-test.40",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",