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

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

@@ -14,6 +14,9 @@ var types = require('../shared/types.js');
 var utils = require('../shared/utils.js');
 var context = require('../shared/context.js');
 var performance = require('../shared/performance.js');
+var viewport = require('../shared/viewport.js');
+var hooks = require('../shared/hooks.js');
+var helpers = require('../shared/helpers.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -146,14 +149,7 @@ var WoongCanvasMarker = function (props) {
    */
 
   var updateViewport = function () {
-    if (!stageRef.current) return;
-    var stage = stageRef.current;
-    viewportRef.current = {
-      minX: -cullingMargin,
-      maxX: stage.width() + cullingMargin,
-      minY: -cullingMargin,
-      maxY: stage.height() + cullingMargin
-    };
+    viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
   };
   /**
    * 아이템이 현재 뷰포트 안에 있는지 확인 (바운딩 박스 캐싱)
@@ -161,21 +157,7 @@ var WoongCanvasMarker = function (props) {
 
 
   var isInViewport = function (item) {
-    if (!enableViewportCulling || !viewportRef.current) return true;
-    var viewport = viewportRef.current; // 캐시된 바운딩 박스 확인
-
-    var bbox = boundingBoxCacheRef.current.get(item.id);
-
-    if (!bbox) {
-      // 바운딩 박스 계산 (공통 함수 사용)
-      var computed = computeBoundingBox(item);
-      if (!computed) return false;
-      bbox = computed;
-      boundingBoxCacheRef.current.set(item.id, bbox);
-    } // 바운딩 박스와 viewport 교차 체크
-
-
-    return !(bbox.maxX < viewport.minX || bbox.minX > viewport.maxX || bbox.maxY < viewport.minY || bbox.minY > viewport.maxY);
+    return viewport.isInViewport(item, enableViewportCulling, viewportRef, boundingBoxCacheRef, computeBoundingBox);
   }; // --------------------------------------------------------------------------
   // 유틸리티 함수: 좌표 변환 캐싱
   // --------------------------------------------------------------------------
@@ -205,12 +187,23 @@ var WoongCanvasMarker = function (props) {
   /**
    * 마커의 바운딩 박스 계산
    *
-   * 🎯 마커의 경우:
-   * - boxHeight: 본체만 (Hit Test 영역)
-   * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
+   * 마커의 화면 상 위치와 크기를 기반으로 바운딩 박스를 계산합니다.
+   * Viewport Culling에 사용되며, tailHeight를 포함하여 전체 표시 영역을 계산합니다.
    *
    * @param item 마커 데이터
-   * @returns 바운딩 박스 또는 null
+   * @returns 바운딩 박스 (minX, minY, maxX, maxY) 또는 null (좌표 변환 실패 시)
+   *
+   * @remarks
+   * - **boxHeight**: 마커 본체만 포함 (Hit Test 영역)
+   * - **tailHeight**: 마커 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역 포함)
+   * - 바운딩 박스는 캐시되어 성능 최적화
+   *
+   * @example
+   * ```typescript
+   * const bbox = computeBoundingBox(item);
+   * if (!bbox) return; // 계산 실패
+   * // bbox.minX, bbox.minY, bbox.maxX, bbox.maxY 사용
+   * ```
    */
 
 
@@ -234,29 +227,32 @@ var WoongCanvasMarker = function (props) {
 
   /**
    * 공간 인덱스 빌드 (빠른 Hit Test를 위한 자료구조)
+   *
+   * 모든 마커의 바운딩 박스를 Spatial Hash Grid에 삽입합니다.
+   * 이를 통해 클릭/호버 시 해당 위치 주변의 마커만 빠르게 조회할 수 있습니다.
+   *
+   * @remarks
+   * - 호출 시점: 데이터 변경 시 또는 지도 이동/줌 완료 시
+   * - 성능: O(n) 시간복잡도, n은 마커 개수
+   * - Hit Test 성능: O(1) 수준 (30,000개 → ~10개 후보만 체크)
    */
 
 
   var buildSpatialIndex = function () {
-    var spatial = spatialIndexRef.current;
-    spatial.clear();
-    var currentData = dataRef.current;
-
-    for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
-      var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
-
-      var bbox = computeBoundingBox(item);
-
-      if (bbox) {
-        spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
-      }
-    }
+    hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
   }; // --------------------------------------------------------------------------
-  // 렌더링 함수 결정 (dataType에 따라)
+  // 렌더링 함수 결정
   // --------------------------------------------------------------------------
 
   /**
    * 외부 렌더링 함수에 전달할 유틸리티 객체
+   *
+   * 커스텀 렌더링 함수(renderBase, renderAnimation, renderEvent)에서 사용할
+   * 좌표 변환 등의 헬퍼 함수들을 제공합니다.
+   *
+   * @remarks
+   * - getOrComputeMarkerOffset: 마커 좌표 변환 (자동 캐싱)
+   * - getOrComputePolygonOffsets: 폴리곤 좌표 변환 (마커에서는 사용 안 함)
    */
 
 
@@ -344,7 +340,11 @@ var WoongCanvasMarker = function (props) {
   /**
    * Animation 레이어 렌더링 (선택된 마커 애니메이션)
    *
-   * 🔥 최적화: sceneFunc 내부에서 최신 items 참조
+   * 선택된 마커에 대한 애니메이션 효과를 렌더링합니다.
+   * renderAnimation prop이 제공된 경우에만 실행됩니다.
+   *
+   * @remarks
+   * - **성능 최적화**: sceneFunc 내부에서 최신 items 참조
    * - 선택 변경 시에만 재생성
    * - 지도 이동 시에는 기존 Animation 계속 실행
    */
@@ -364,10 +364,16 @@ var WoongCanvasMarker = function (props) {
   /**
    * Event 레이어 렌더링 (hover + 선택 상태 표시)
    *
-   * 🔥 최적화:
-   * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
-   * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
-   * 3. 클로저로 최신 데이터 참조
+   * 마커의 hover 효과 및 선택 상태를 표시합니다.
+   * renderEvent prop이 제공된 경우에만 실행됩니다.
+   *
+   * @remarks
+   * - **성능 최적화**:
+   *   1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
+   *   2. sceneFunc 한 번만 설정 (함수 재생성 제거)
+   *   3. 클로저로 최신 데이터 참조
+   * - **topOnHover 지원**: hover된 항목을 최상단에 렌더링
+   * - 선택된 항목은 Map에서 O(1)로 조회하여 성능 최적화
    */
 
 
@@ -385,8 +391,9 @@ var WoongCanvasMarker = function (props) {
         name: 'event-render-shape',
         sceneFunc: function (context, shape) {
           var ctx = context; // 클로저로 최신 ref 값 참조
+          // 성능 최적화: Array.from 대신 직접 변환 (메모리 할당 최소화)
 
-          var selectedItems = Array.from(selectedItemsMapRef.current.values());
+          var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
           var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
 
           if (topOnHover && hovered) {
@@ -454,89 +461,43 @@ var WoongCanvasMarker = function (props) {
   // 이벤트 핸들러: 지도 이벤트
   // --------------------------------------------------------------------------
 
-  /**
-   * 지도 이동/줌 완료 시 처리
-   */
-
-
-  var handleIdle = function () {
-    prevCenterOffsetRef.current = null;
-    accumTranslateRef.current = {
-      x: 0,
-      y: 0
-    }; // 2. 캐시 정리 (지도 이동/줌으로 좌표 변환 결과가 바뀜)
-
-    offsetCacheRef.current.clear();
-    boundingBoxCacheRef.current.clear(); // 3. 마커 위치 업데이트
-
-    var bounds = controller.getCurrBounds();
-
-    var markerOptions = tslib.__assign({
-      position: bounds.nw
-    }, options);
-
-    markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 4. transform 제거 전에 새 데이터로 즉시 렌더링 (겹침 방지)
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = '';
-      containerRef.current.style.visibility = '';
-    } // 5. 새 위치에서 렌더링
-
-
-    renderAllImmediate();
-  };
-  /**
-   * 줌 시작 시 처리 (일시적으로 숨김)
-   */
-
 
-  var handleZoomStart = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = 'hidden';
-    }
-  };
+  var _g = hooks.createMapEventHandlers({
+    controller: controller,
+    containerRef: containerRef,
+    markerRef: markerRef,
+    options: options,
+    prevCenterOffsetRef: prevCenterOffsetRef,
+    accumTranslateRef: accumTranslateRef,
+    offsetCacheRef: offsetCacheRef,
+    boundingBoxCacheRef: boundingBoxCacheRef,
+    renderAllImmediate: renderAllImmediate
+  }),
+      handleIdle = _g.handleIdle,
+      handleZoomStart = _g.handleZoomStart,
+      handleZoomEnd = _g.handleZoomEnd,
+      handleCenterChanged = _g.handleCenterChanged,
+      handleDragStartShared = _g.handleDragStart,
+      handleDragEndShared = _g.handleDragEnd;
   /**
-   * 줌 종료 시 처리 (다시 표시)
+   * 드래그 시작 처리 (커서를 grabbing으로 변경)
    */
 
 
-  var handleZoomEnd = function () {
-    if (containerRef.current) {
-      containerRef.current.style.visibility = '';
-    }
+  var handleDragStart = function () {
+    handleDragStartShared();
+    draggingRef.current = true;
+    controller.setMapCursor('grabbing');
   };
   /**
-   * 지도 중심 변경 시 처리 (transform으로 이동 추적)
+   * 드래그 종료 처리 (커서를 기본으로 복원)
    */
 
 
-  var handleCenterChanged = function () {
-    var center = controller.getCurrBounds().getCenter();
-    var curr = controller.positionToOffset(center);
-    var prev = prevCenterOffsetRef.current;
-
-    if (!prev) {
-      prevCenterOffsetRef.current = {
-        x: curr.x,
-        y: curr.y
-      };
-      return;
-    }
-
-    var dx = prev.x - curr.x;
-    var dy = prev.y - curr.y;
-    accumTranslateRef.current = {
-      x: accumTranslateRef.current.x + dx,
-      y: accumTranslateRef.current.y + dy
-    };
-    prevCenterOffsetRef.current = {
-      x: curr.x,
-      y: curr.y
-    };
-
-    if (containerRef.current) {
-      containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
-    }
+  var handleDragEnd = function () {
+    handleDragEndShared();
+    draggingRef.current = false;
+    controller.setMapCursor('grab');
   }; // --------------------------------------------------------------------------
   // Hit Test & 상태 관리
   // --------------------------------------------------------------------------
@@ -544,12 +505,26 @@ var WoongCanvasMarker = function (props) {
   /**
    * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
    *
-   * topOnHover가 true일 때:
-   * - 현재 hover된 항목을 최우선으로 체크
-   * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
+   * 클릭/호버 이벤트 시 해당 위치에 있는 마커를 찾습니다.
+   * Spatial Hash Grid를 사용하여 O(1) 수준의 빠른 Hit Test를 수행합니다.
+   *
+   * @param offset 검사할 화면 좌표 (픽셀 단위)
+   * @returns 찾은 마커 데이터 또는 null (없으면)
    *
-   * @param offset 검사할 좌표
-   * @returns 찾은 마커 데이터 또는 null
+   * @remarks
+   * - **topOnHover 지원**: topOnHover가 true일 때 현재 hover된 항목을 최우선으로 체크
+   *   - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
+   * - **성능**: O(후보 항목 수) - 보통 ~10개 (30,000개 전체를 체크하지 않음)
+   * - Spatial Index를 통해 해당 위치 주변의 후보만 추출 후 정확한 Hit Test 수행
+   *
+   * @example
+   * ```typescript
+   * const clickedOffset = controller.positionToOffset(event.param.position);
+   * const data = findData(clickedOffset);
+   * if (data) {
+   *   // 마커를 찾음
+   * }
+   * ```
    */
 
 
@@ -610,11 +585,17 @@ var WoongCanvasMarker = function (props) {
   /**
    * 클릭 처리 (단일/다중 선택)
    *
-   * @param data 클릭된 마커/폴리곤 데이터
+   * 마커 클릭 시 선택 상태를 업데이트하고 렌더링을 수행합니다.
+   *
+   * @param data 클릭된 마커 데이터
    *
-   * 🔥 최적화: 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
-   * - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
-   * - 객체 생성 오버헤드 제거로 1000개 이상도 부드럽게 처리
+   * @remarks
+   * - **단일 선택**: 기존 선택 해제 후 새로 선택 (토글 가능)
+   * - **다중 선택**: enableMultiSelect가 true면 기존 선택 유지하며 추가/제거
+   * - **성능 최적화**:
+   *   - 단일 Shape 렌더링으로 Base Layer 재렌더링 속도 향상
+   *   - sceneFunc에서 selectedIds를 체크하여 선택된 마커만 스킵
+   *   - 객체 생성 오버헤드 제거로 1,000개 이상도 부드럽게 처리
    */
 
 
@@ -663,75 +644,57 @@ var WoongCanvasMarker = function (props) {
 
   /**
    * 클릭 이벤트 처리
+   *
+   * @param event 클릭 이벤트 파라미터
+   *
+   * @remarks
+   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
+   * - 상호작용이 비활성화되어 있으면 스킵
+   * - Spatial Index를 사용하여 빠른 Hit Test 수행
    */
 
 
   var handleClick = function (event) {
-    var _a;
-
     if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var clickedOffset = controller.positionToOffset(event.param.position);
-      var data_1 = findData(clickedOffset);
+    var clickedOffset = helpers.validateEvent(event, context$1, controller);
+    if (!clickedOffset) return;
+    var data = findData(clickedOffset);
 
-      if (data_1) {
-        handleLocalClick(data_1);
+    if (data) {
+      handleLocalClick(data);
 
-        if (onClick) {
-          onClick(data_1, selectedIdsRef.current);
-        }
+      if (onClick) {
+        onClick(data, selectedIdsRef.current);
       }
-    } catch (error) {
-      console.error('[WoongCanvasMarker] handleClick error:', error);
     }
   };
   /**
    * 마우스 이동 이벤트 처리 (hover 감지)
+   *
+   * @param event 마우스 이동 이벤트 파라미터
+   *
+   * @remarks
+   * - Context가 있으면 전역 이벤트 핸들러가 처리하므로 스킵
+   * - 상호작용이 비활성화되어 있으면 스킵
+   * - hover 상태 변경 시에만 렌더링 및 콜백 호출 (최적화)
    */
 
 
   var handleMouseMove = function (event) {
-    var _a;
-
     if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
 
-    if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
-
-    try {
-      var mouseOffset = controller.positionToOffset(event.param.position);
-      var hoveredItem = findData(mouseOffset);
-      var prevHovered = hoveredItemRef.current;
+    var mouseOffset = helpers.validateEvent(event, context$1, controller);
+    if (!mouseOffset) return;
+    var hoveredItem = findData(mouseOffset);
+    var prevHovered = hoveredItemRef.current;
 
-      if (prevHovered !== hoveredItem) {
-        setHovered(hoveredItem);
-        if (prevHovered && onMouseOut) onMouseOut(prevHovered);
-        if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
-      }
-    } catch (error) {
-      console.error('[WoongCanvasMarker] handleMouseMove error:', error);
+    if (prevHovered !== hoveredItem) {
+      setHovered(hoveredItem);
+      if (prevHovered && onMouseOut) onMouseOut(prevHovered);
+      if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
     }
   };
-  /**
-   * 드래그 시작 처리 (커서를 grabbing으로 변경)
-   */
-
-
-  var handleDragStart = function () {
-    draggingRef.current = true;
-    controller.setMapCursor('grabbing');
-  };
-  /**
-   * 드래그 종료 처리 (커서를 기본으로 복원)
-   */
-
-
-  var handleDragEnd = function () {
-    draggingRef.current = false;
-    controller.setMapCursor('grab');
-  };
   /**
    * 마우스가 canvas를 벗어날 때 hover cleanup
    */
@@ -929,18 +892,8 @@ var WoongCanvasMarker = function (props) {
   // --------------------------------------------------------------------------
 
   React.useEffect(function () {
-    if (!stageRef.current) return; // externalSelectedItems가 undefined면 외부 제어 안 함
-
-    if (externalSelectedItems === undefined) return; // 외부에서 전달된 selectedItems로 동기화
-
-    var newSelectedIds = new Set();
-    var newSelectedItemsMap = new Map();
-    externalSelectedItems.forEach(function (item) {
-      newSelectedIds.add(item.id);
-      newSelectedItemsMap.set(item.id, item);
-    });
-    selectedIdsRef.current = newSelectedIds;
-    selectedItemsMapRef.current = newSelectedItemsMap; // 렌더링
+    if (!stageRef.current) return;
+    hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef); // 렌더링
 
     doRenderBase();
     doRenderAnimation();
@@ -991,27 +944,7 @@ var WoongCanvasMarker = function (props) {
      * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
      */
 
-    var dataMap = new Map(data.map(function (m) {
-      return [m.id, m];
-    }));
-    var newSelectedItemsMap = new Map();
-    selectedIdsRef.current.forEach(function (id) {
-      // 현재 data에 있으면 최신 데이터 사용
-      var currentItem = dataMap.get(id);
-
-      if (currentItem) {
-        newSelectedItemsMap.set(id, currentItem);
-      } else {
-        // 화면 밖이면 기존 데이터 유지
-        var prevItem = selectedItemsMapRef.current.get(id);
-
-        if (prevItem) {
-          newSelectedItemsMap.set(id, prevItem);
-        }
-      }
-    }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
-
-    selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
+    selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current); // 즉시 렌더링
 
     renderAllImmediate();
   }, [data]);

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

@@ -11,10 +11,6 @@ export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex'
     data: KonvaCanvasData<T>[];
     /** 폴리곤 클릭 시 호출되는 콜백 (선택) */
     onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
-    /** 폴리곤에 마우스 오버 시 호출되는 콜백 (선택) */
-    onMouseOver?: (payload: KonvaCanvasData<T>) => void;
-    /** 폴리곤에서 마우스 아웃 시 호출되는 콜백 (선택) */
-    onMouseOut?: (payload: KonvaCanvasData<T>) => void;
     /** 다중 선택 활성화 여부 (기본: false) */
     enableMultiSelect?: boolean;
     /** 뷰포트 컬링 활성화 여부 (기본: true) */