@mint-ui/map 1.2.0-test.34 → 1.2.0-test.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/mint-map/core/advanced/shared/context.d.ts +19 -12
- package/dist/components/mint-map/core/advanced/shared/context.js +54 -75
- package/dist/components/mint-map/core/advanced/shared/helpers.d.ts +20 -0
- package/dist/components/mint-map/core/advanced/shared/helpers.js +40 -0
- package/dist/components/mint-map/core/advanced/shared/hooks.d.ts +74 -0
- package/dist/components/mint-map/core/advanced/shared/hooks.js +189 -0
- package/dist/components/mint-map/core/advanced/shared/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/shared/performance.d.ts +12 -110
- package/dist/components/mint-map/core/advanced/shared/performance.js +56 -151
- package/dist/components/mint-map/core/advanced/shared/types.d.ts +18 -153
- package/dist/components/mint-map/core/advanced/shared/types.js +0 -1
- package/dist/components/mint-map/core/advanced/shared/utils.d.ts +36 -27
- package/dist/components/mint-map/core/advanced/shared/utils.js +58 -52
- package/dist/components/mint-map/core/advanced/shared/viewport.d.ts +42 -0
- package/dist/components/mint-map/core/advanced/shared/viewport.js +51 -0
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts +22 -74
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.js +156 -617
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.d.ts +26 -76
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.js +152 -551
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/renderer.d.ts +67 -8
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/renderer.js +81 -20
- package/dist/index.es.js +917 -1575
- package/dist/index.js +11 -0
- package/dist/index.umd.js +923 -1573
- package/package.json +1 -1
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarkerOptions } from "../../../types";
|
|
3
|
-
import {
|
|
3
|
+
import { CanvasData } from "../shared";
|
|
4
4
|
export { WoongCanvasProvider, LRUCache, SpatialHashGrid } from "../shared";
|
|
5
|
-
export type {
|
|
5
|
+
export type { CanvasOption, CanvasData, RenderUtils } from "../shared";
|
|
6
6
|
/**
|
|
7
|
-
* WoongCanvasPolygon Props
|
|
7
|
+
* WoongCanvasPolygon Props
|
|
8
|
+
*
|
|
9
|
+
* @template T 폴리곤 데이터의 추가 속성 타입
|
|
8
10
|
*/
|
|
9
11
|
export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
|
|
10
12
|
/** 렌더링할 폴리곤 데이터 배열 */
|
|
11
|
-
data:
|
|
12
|
-
/** 폴리곤 클릭 시 호출되는 콜백
|
|
13
|
-
onClick?: (payload:
|
|
14
|
-
/** 다중 선택 활성화 여부 (
|
|
13
|
+
data: CanvasData<T>[];
|
|
14
|
+
/** 폴리곤 클릭 시 호출되는 콜백 함수 */
|
|
15
|
+
onClick?: (payload: CanvasData<T>, selectedIds: Set<string>) => void;
|
|
16
|
+
/** 다중 선택 활성화 여부 (기본값: false) */
|
|
15
17
|
enableMultiSelect?: boolean;
|
|
16
|
-
/** 뷰포트 컬링
|
|
17
|
-
enableViewportCulling?: boolean;
|
|
18
|
-
/** 뷰포트 컬링 여유 공간 (기본: 100px) */
|
|
18
|
+
/** 뷰포트 컬링 여유 공간 (픽셀 단위, 기본값: 100) */
|
|
19
19
|
cullingMargin?: number;
|
|
20
|
-
/** LRU 캐시 최대 크기 (
|
|
20
|
+
/** LRU 캐시 최대 크기 (기본값: 10000) */
|
|
21
21
|
maxCacheSize?: number;
|
|
22
|
-
/** 외부에서 제어하는 선택된 항목 배열
|
|
23
|
-
selectedItems?:
|
|
24
|
-
/** 외부에서 전달된 단일 선택 아이템
|
|
25
|
-
selectedItem?:
|
|
26
|
-
/** 상호작용 비활성화 (
|
|
22
|
+
/** 외부에서 제어하는 선택된 항목 배열 */
|
|
23
|
+
selectedItems?: CanvasData<T>[];
|
|
24
|
+
/** 외부에서 전달된 단일 선택 아이템 */
|
|
25
|
+
selectedItem?: CanvasData<T> | null;
|
|
26
|
+
/** 상호작용 비활성화 여부 (기본값: false) */
|
|
27
27
|
disableInteraction?: boolean;
|
|
28
28
|
/** 기본 폴리곤 채우기 색상 (필수) */
|
|
29
29
|
baseFillColor: string;
|
|
@@ -31,79 +31,29 @@ export interface WoongCanvasPolygonProps<T> extends Pick<MarkerOptions, 'zIndex'
|
|
|
31
31
|
baseStrokeColor: string;
|
|
32
32
|
/** 기본 폴리곤 테두리 두께 (필수) */
|
|
33
33
|
baseLineWidth: number;
|
|
34
|
-
/** 선택된 폴리곤 채우기 색상
|
|
34
|
+
/** 선택된 폴리곤 채우기 색상 */
|
|
35
35
|
selectedFillColor?: string;
|
|
36
|
-
/** 선택된 폴리곤 테두리 색상
|
|
36
|
+
/** 선택된 폴리곤 테두리 색상 */
|
|
37
37
|
selectedStrokeColor?: string;
|
|
38
|
-
/** 선택된 폴리곤 테두리 두께
|
|
38
|
+
/** 선택된 폴리곤 테두리 두께 */
|
|
39
39
|
selectedLineWidth?: number;
|
|
40
|
-
/** 마지막 선택된 폴리곤 채우기 색상
|
|
40
|
+
/** 마지막 선택된 폴리곤(Active) 채우기 색상 */
|
|
41
41
|
activeFillColor?: string;
|
|
42
|
-
/** 마지막 선택된 폴리곤 테두리 색상
|
|
42
|
+
/** 마지막 선택된 폴리곤(Active) 테두리 색상 */
|
|
43
43
|
activeStrokeColor?: string;
|
|
44
|
-
/** 마지막 선택된 폴리곤 테두리 두께
|
|
44
|
+
/** 마지막 선택된 폴리곤(Active) 테두리 두께 */
|
|
45
45
|
activeLineWidth?: number;
|
|
46
|
-
/** Hover 시 폴리곤 채우기 색상
|
|
46
|
+
/** Hover 시 폴리곤 채우기 색상 */
|
|
47
47
|
hoveredFillColor?: string;
|
|
48
|
-
/** Hover 시 폴리곤 테두리 색상
|
|
48
|
+
/** Hover 시 폴리곤 테두리 색상 */
|
|
49
49
|
hoveredStrokeColor?: string;
|
|
50
|
-
/** Hover 시 폴리곤 테두리 두께
|
|
50
|
+
/** Hover 시 폴리곤 테두리 두께 */
|
|
51
51
|
hoveredLineWidth?: number;
|
|
52
52
|
}
|
|
53
53
|
declare const WoongCanvasPolygon: <T>(props: WoongCanvasPolygonProps<T>) => React.ReactPortal;
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* ## 📌 주요 특징
|
|
58
|
-
* - **30,000개 이상의 폴리곤을 60fps로 렌더링**
|
|
59
|
-
* - **Multi-Layer 아키텍처**: Base/Event 레이어 분리
|
|
60
|
-
* - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
|
|
61
|
-
* - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
|
|
62
|
-
* - **Viewport Culling**: 화면에 보이는 영역만 렌더링
|
|
63
|
-
* - **자동 렌더링**: 스타일 props만 전달하면 내부에서 자동으로 렌더링
|
|
64
|
-
*
|
|
65
|
-
* ## 🎯 사용 방법
|
|
66
|
-
*
|
|
67
|
-
* ```tsx
|
|
68
|
-
* <WoongCanvasPolygon
|
|
69
|
-
* data={polygons}
|
|
70
|
-
* baseFillColor="rgba(255, 100, 100, 0.5)"
|
|
71
|
-
* baseStrokeColor="rgba(200, 50, 50, 0.8)"
|
|
72
|
-
* baseLineWidth={2}
|
|
73
|
-
* selectedFillColor="rgba(255, 193, 7, 0.7)"
|
|
74
|
-
* selectedStrokeColor="rgba(255, 152, 0, 1)"
|
|
75
|
-
* selectedLineWidth={4}
|
|
76
|
-
* hoveredFillColor="rgba(100, 150, 255, 0.8)" // optional
|
|
77
|
-
* hoveredStrokeColor="rgba(0, 100, 200, 1)" // optional
|
|
78
|
-
* hoveredLineWidth={3} // optional
|
|
79
|
-
* enableMultiSelect={true}
|
|
80
|
-
* onClick={handleClick}
|
|
81
|
-
* />
|
|
82
|
-
* ```
|
|
83
|
-
*
|
|
84
|
-
* ## 📊 데이터 형식
|
|
85
|
-
* ```typescript
|
|
86
|
-
* const data: KonvaCanvasData<T>[] = [
|
|
87
|
-
* {
|
|
88
|
-
* id: 'unique-id',
|
|
89
|
-
* position: new Position(lat, lng),
|
|
90
|
-
* paths: {
|
|
91
|
-
* type: 'MultiPolygon',
|
|
92
|
-
* coordinates: [[[[lng, lat], [lng, lat], ...]]]
|
|
93
|
-
* },
|
|
94
|
-
* isDonutPolygon: false, // optional
|
|
95
|
-
* // 커스텀 데이터
|
|
96
|
-
* ...customData
|
|
97
|
-
* }
|
|
98
|
-
* ];
|
|
99
|
-
* ```
|
|
100
|
-
*
|
|
101
|
-
* ## ⚡ 성능 최적화 팁
|
|
102
|
-
* 1. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
|
|
103
|
-
* 2. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
|
|
55
|
+
* WoongCanvasPolygon - Konva 기반 고성능 폴리곤 렌더링 컴포넌트
|
|
104
56
|
*
|
|
105
57
|
* @template T 폴리곤 데이터의 추가 속성 타입
|
|
106
|
-
*
|
|
107
|
-
* @see {@link https://github.com/your-repo/docs/WoongCanvasPolygon.md} 전체 문서
|
|
108
58
|
*/
|
|
109
59
|
export default WoongCanvasPolygon;
|