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

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

@@ -1,97 +1,45 @@
 import React from "react";
 import { MarkerOptions } from "../../../types";
-import { KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "../shared";
+import { CanvasData, CustomRenderBase, CustomRenderEvent } from "../shared";
 export { WoongCanvasProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "../shared";
-export type { KonvaCanvasOption, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "../shared";
+export type { CanvasOption, CanvasData, CustomRenderBase, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderEventParams } from "../shared";
 /**
- * WoongCanvasMarker Props - 마커 전용
+ * WoongCanvasMarker Props
+ *
+ * @template T 마커 데이터의 추가 속성 타입
  */
 export interface WoongCanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
     /** 렌더링할 마커 데이터 배열 */
-    data: KonvaCanvasData<T>[];
-    /** 마커 클릭 시 호출되는 콜백 (선택) */
-    onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
-    /** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
-    onMouseOver?: (payload: KonvaCanvasData<T>) => void;
-    /** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
-    onMouseOut?: (payload: KonvaCanvasData<T>) => void;
-    /** 다중 선택 활성화 여부 (기본: false) */
+    data: CanvasData<T>[];
+    /** 마커 클릭 시 호출되는 콜백 함수 */
+    onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
+    /** 마커에 마우스 오버 시 호출되는 콜백 함수 */
+    onMouseOver?: (payload: CanvasData<T>) => void;
+    /** 마커에서 마우스 아웃 시 호출되는 콜백 함수 */
+    onMouseOut?: (payload: CanvasData<T>) => void;
+    /** 다중 선택 활성화 여부 (기본값: false) */
     enableMultiSelect?: boolean;
-    /** hover 시 마커를 최상단으로 표시 (기본: false) */
+    /** hover 시 마커를 최상단으로 표시할지 여부 (기본값: false) */
     topOnHover?: boolean;
-    /** 뷰포트 컬링 활성화 여부 (기본: true) */
-    enableViewportCulling?: boolean;
-    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
+    /** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
     cullingMargin?: number;
-    /** LRU 캐시 최대 크기 (기본: 10000) */
+    /** LRU 캐시 최대 크기 (기본값: 10000) */
     maxCacheSize?: number;
-    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
-    selectedItems?: KonvaCanvasData<T>[];
-    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
-    selectedItem?: KonvaCanvasData<T> | null;
-    /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
+    /** 외부에서 제어하는 선택된 항목 배열 */
+    selectedItems?: CanvasData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 */
+    selectedItem?: CanvasData<T> | null;
+    /** 상호작용 비활성화 여부 (기본값: false) */
     disableInteraction?: boolean;
     /** Base Layer 렌더링 함수 (필수) */
     renderBase: CustomRenderBase<T>;
-    /** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
-    renderAnimation?: CustomRenderAnimation<T>;
     /** Event Layer 렌더링 함수 (선택) */
     renderEvent?: CustomRenderEvent<T>;
 }
 declare const WoongCanvasMarker: <T>(props: WoongCanvasMarkerProps<T>) => React.ReactPortal;
 /**
- * 🚀 WoongCanvasMarker - Konva 기반 초고성능 마커 렌더링 컴포넌트
- *
- * ## 📌 주요 특징
- * - **30,000개 이상의 마커를 60fps로 렌더링**
- * - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
- * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
- * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
- * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
- * - **커스텀 렌더링**: renderBase, renderAnimation, renderEvent로 완전한 커스터마이징 가능
- *
- * ## 🎯 사용 방법
- *
- * ```tsx
- * <WoongCanvasMarker
- *   data={markers}
- *   renderBase={renderMarkerBase}              // required
- *   renderAnimation={renderMarkerAnimation}    // optional
- *   renderEvent={renderMarkerEvent}            // optional
- *   topOnHover={true}
- *   onClick={handleClick}
- * />
- * ```
- *
- * ## 📊 데이터 형식
- * ```typescript
- * const data: KonvaCanvasData<T>[] = [
- *   {
- *     id: 'unique-id',
- *     position: new Position(lat, lng),
- *     // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
- *     boxWidth: 60,
- *     boxHeight: 75,
- *     tailHeight: 9,  // optional (Viewport Culling용)
- *     // 커스텀 데이터
- *     ...customData
- *   }
- * ];
- * ```
- *
- * ## ⚡ 성능 최적화 팁
- * 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
- * 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
- * 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
+ * WoongCanvasMarker - Konva 기반 고성능 마커 렌더링 컴포넌트
  *
  * @template T 마커 데이터의 추가 속성 타입
- *
- * @example
- * // 동적 boxWidth 계산 예시
- * const tempCtx = document.createElement('canvas').getContext('2d');
- * tempCtx.font = 'bold 15px Arial';
- * const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
- *
- * @see {@link https://github.com/your-repo/docs/WoongCanvasMarker.md} 전체 문서
  */
 export default WoongCanvasMarker;