@mint-ui/map 1.2.0-test.31 → 1.2.0-test.32

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

@@ -0,0 +1,113 @@
+import React from "react";
+import { MarkerOptions } from "../../../types";
+import { KonvaCanvasData } from "../shared";
+export { WoongCanvasProvider, LRUCache, SpatialHashGrid } from "../shared";
+export type { KonvaCanvasOption, KonvaCanvasData, RenderUtils } from "../shared";
+/**
+ * WoongCanvasPolygon Props - 폴리곤 전용
+ */
+export interface WoongCanvasPolygonProps<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) */
+    enableMultiSelect?: boolean;
+    /** 뷰포트 컬링 활성화 여부 (기본: true) */
+    enableViewportCulling?: boolean;
+    /** 뷰포트 컬링 여유 공간 (기본: 100px) */
+    cullingMargin?: number;
+    /** LRU 캐시 최대 크기 (기본: 10000) */
+    maxCacheSize?: number;
+    /** 외부에서 제어하는 선택된 항목 배열 (선택) */
+    selectedItems?: KonvaCanvasData<T>[];
+    /** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
+    selectedItem?: KonvaCanvasData<T> | null;
+    /** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
+    disableInteraction?: boolean;
+    /** 기본 폴리곤 채우기 색상 (필수) */
+    baseFillColor: string;
+    /** 기본 폴리곤 테두리 색상 (필수) */
+    baseStrokeColor: string;
+    /** 기본 폴리곤 테두리 두께 (필수) */
+    baseLineWidth: number;
+    /** 선택된 폴리곤 채우기 색상 (선택) */
+    selectedFillColor?: string;
+    /** 선택된 폴리곤 테두리 색상 (선택) */
+    selectedStrokeColor?: string;
+    /** 선택된 폴리곤 테두리 두께 (선택) */
+    selectedLineWidth?: number;
+    /** 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    activeFillColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    activeStrokeColor?: string;
+    /** 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    activeLineWidth?: number;
+    /** Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor) */
+    hoveredFillColor?: string;
+    /** Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor) */
+    hoveredStrokeColor?: string;
+    /** Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth) */
+    hoveredLineWidth?: number;
+}
+declare const WoongCanvasPolygon: <T>(props: WoongCanvasPolygonProps<T>) => React.ReactPortal;
+/**
+ * 🚀 WoongCanvasPolygon - Konva 기반 초고성능 폴리곤 렌더링 컴포넌트
+ *
+ * ## 📌 주요 특징
+ * - **30,000개 이상의 폴리곤을 60fps로 렌더링**
+ * - **Multi-Layer 아키텍처**: Base/Event 레이어 분리
+ * - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
+ * - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
+ * - **Viewport Culling**: 화면에 보이는 영역만 렌더링
+ * - **자동 렌더링**: 스타일 props만 전달하면 내부에서 자동으로 렌더링
+ *
+ * ## 🎯 사용 방법
+ *
+ * ```tsx
+ * <WoongCanvasPolygon
+ *   data={polygons}
+ *   baseFillColor="rgba(255, 100, 100, 0.5)"
+ *   baseStrokeColor="rgba(200, 50, 50, 0.8)"
+ *   baseLineWidth={2}
+ *   selectedFillColor="rgba(255, 193, 7, 0.7)"
+ *   selectedStrokeColor="rgba(255, 152, 0, 1)"
+ *   selectedLineWidth={4}
+ *   hoveredFillColor="rgba(100, 150, 255, 0.8)"  // optional
+ *   hoveredStrokeColor="rgba(0, 100, 200, 1)"    // optional
+ *   hoveredLineWidth={3}                         // optional
+ *   enableMultiSelect={true}
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * ## 📊 데이터 형식
+ * ```typescript
+ * const data: KonvaCanvasData<T>[] = [
+ *   {
+ *     id: 'unique-id',
+ *     position: new Position(lat, lng),
+ *     paths: {
+ *       type: 'MultiPolygon',
+ *       coordinates: [[[[lng, lat], [lng, lat], ...]]]
+ *     },
+ *     isDonutPolygon: false,  // optional
+ *     // 커스텀 데이터
+ *     ...customData
+ *   }
+ * ];
+ * ```
+ *
+ * ## ⚡ 성능 최적화 팁
+ * 1. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
+ * 2. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
+ *
+ * @template T 폴리곤 데이터의 추가 속성 타입
+ *
+ * @see {@link https://github.com/your-repo/docs/WoongCanvasPolygon.md} 전체 문서
+ */
+export default WoongCanvasPolygon;

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

@@ -0,0 +1,3 @@
+export { default as WoongCanvasPolygon } from "./WoongCanvasPolygon";
+export * from "./WoongCanvasPolygon";
+export * from "../shared";

package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.d.ts

@@ -3,7 +3,7 @@
  *
  * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
  */
-import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "./types";
+import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "../shared/types";
 /**
  * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
  */

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -21,10 +21,10 @@ require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('konva');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/utils.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('../core/advanced/shared/context.js');
+require('../core/advanced/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var GoogleMintMapController =

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -22,10 +22,10 @@ require('../naver/NaverMintMapController.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('konva');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/utils.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('../core/advanced/shared/context.js');
+require('../core/advanced/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var KakaoMintMapController =

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -21,10 +21,10 @@ var polygon = require('../core/util/polygon.js');
 require('../core/advanced/canvas/CanvasMarkerClaude.js');
 require('../core/advanced/MapLoadingComponents.js');
 require('konva');
-require('../core/advanced/woongCanvas/shared/types.js');
-require('../core/advanced/woongCanvas/shared/utils.js');
-require('../core/advanced/woongCanvas/shared/context.js');
-require('../core/advanced/woongCanvas/shared/performance.js');
+require('../core/advanced/shared/types.js');
+require('../core/advanced/shared/utils.js');
+require('../core/advanced/shared/context.js');
+require('../core/advanced/shared/performance.js');
 require('../core/wrapper/MapControlWrapper.js');
 
 var NaverMintMapController =