@mint-ui/map 1.2.0-test.2 → 1.2.0-test.21

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.
Files changed (32) hide show
  1. package/README.md +7 -7
  2. package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
  3. package/dist/components/mint-map/core/MintMapCore.js +2 -2
  4. package/dist/components/mint-map/core/advanced/index.d.ts +1 -4
  5. package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +227 -0
  6. package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js} +338 -237
  7. package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +12 -1
  8. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +81 -12
  9. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +85 -14
  10. package/dist/components/mint-map/core/advanced/woongCanvas/shared/index.d.ts +11 -0
  11. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +62 -13
  12. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +62 -13
  13. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +115 -0
  14. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +288 -0
  15. package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +138 -16
  16. package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.js +20 -0
  17. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +162 -10
  18. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +235 -14
  19. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +22 -1
  20. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
  21. package/dist/components/mint-map/google/GoogleMintMapController.js +7 -1
  22. package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +1 -0
  23. package/dist/components/mint-map/kakao/KakaoMintMapController.js +7 -1
  24. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +3 -0
  25. package/dist/components/mint-map/naver/NaverMintMapController.js +40 -4
  26. package/dist/index.es.js +1078 -283
  27. package/dist/index.js +35 -15
  28. package/dist/index.umd.js +1091 -283
  29. package/package.json +1 -1
  30. package/.claude/settings.local.json +0 -16
  31. package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts +0 -11
  32. package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +0 -48
@@ -1,2 +1,13 @@
1
- export * from "./WoongKonvaMarker";
1
+ /**
2
+ * @fileoverview WoongCanvasLayer 모듈의 메인 엔트리 포인트
3
+ *
4
+ * 이 파일은 WoongCanvasLayer 컴포넌트와 관련된 모든 타입, 유틸리티,
5
+ * 성능 최적화 클래스들을 외부로 노출합니다.
6
+ *
7
+ * @version 2.2.1
8
+ * @since 2.0.0
9
+ * @author 박건웅
10
+ */
11
+ export { default as WoongCanvasLayer } from "./WoongCanvasLayer";
12
+ export * from "./WoongCanvasLayer";
2
13
  export * from "./shared";
@@ -1,31 +1,100 @@
1
1
  import React from "react";
2
2
  import { Offset } from "../../../../types";
3
- import { CanvasMarkerData } from "./types";
3
+ import { KonvaCanvasData } from "./types";
4
4
  /**
5
- * 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
5
+ * @fileoverview 다중 WoongCanvasLayer 인스턴스를 관리하기 위한 React Context
6
6
  *
7
- * 용도:
8
- * - zIndex 기반 이벤트 우선순위 처리
9
- * - 전역 클릭/호버 이벤트 조정
10
- * - 여러 레이어 간 상호작용 관리
7
+ * 이 Context는 여러 개의 WoongCanvasLayer가 동시에 사용될 때 이벤트 우선순위를
8
+ * 관리하고 전역 클릭/호버 이벤트를 조정합니다.
9
+ *
10
+ * ## 주요 기능
11
+ * - **zIndex 기반 이벤트 우선순위**: 높은 zIndex를 가진 레이어가 먼저 이벤트 처리
12
+ * - **전역 이벤트 관리**: 지도 전체의 클릭/호버 이벤트를 중앙에서 관리
13
+ * - **다중 레이어 상호작용**: 여러 레이어 간의 이벤트 충돌 방지
14
+ * - **상호작용 비활성화 지원**: disableInteraction prop 지원
15
+ *
16
+ * ## 사용 방법
17
+ * ```tsx
18
+ * <KonvaMarkerProvider>
19
+ * <WoongCanvasLayer zIndex={1} ... />
20
+ * <WoongCanvasLayer zIndex={2} ... />
21
+ * </KonvaMarkerProvider>
22
+ * ```
23
+ *
24
+ * @version 2.2.1
25
+ * @since 2.0.0
26
+ * @author 박건웅
27
+ */
28
+ /**
29
+ * WoongCanvasLayer 컴포넌트 인스턴스 인터페이스
30
+ *
31
+ * Context에서 관리하는 각 WoongCanvasLayer 인스턴스가 구현해야 하는 메서드들입니다.
32
+ *
33
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
11
34
  */
12
35
  export interface ComponentInstance<T> {
36
+ /** 레이어 순서 (높을수록 우선순위 높음) */
13
37
  zIndex: number;
38
+ /** 특정 좌표에서 히트 테스트 수행 */
14
39
  hitTest: (offset: Offset) => boolean;
15
- onClick?: (payload: CanvasMarkerData<T>, selectedIds: Set<string>) => void;
16
- onMouseOver?: (payload: CanvasMarkerData<T>) => void;
17
- onMouseOut?: (payload: CanvasMarkerData<T>) => void;
18
- findData: (offset: Offset) => CanvasMarkerData<T> | null;
19
- setHovered: (data: CanvasMarkerData<T> | null) => void;
20
- handleLocalClick: (data: CanvasMarkerData<T>) => void;
40
+ /** 클릭 이벤트 핸들러 */
41
+ onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
42
+ /** 마우스 오버 이벤트 핸들러 */
43
+ onMouseOver?: (payload: KonvaCanvasData<T>) => void;
44
+ /** 마우스 아웃 이벤트 핸들러 */
45
+ onMouseOut?: (payload: KonvaCanvasData<T>) => void;
46
+ /** 특정 좌표에서 데이터 찾기 */
47
+ findData: (offset: Offset) => KonvaCanvasData<T> | null;
48
+ /** 호버 상태 설정 */
49
+ setHovered: (data: KonvaCanvasData<T> | null) => void;
50
+ /** 로컬 클릭 처리 */
51
+ handleLocalClick: (data: KonvaCanvasData<T>) => void;
52
+ /** 선택된 항목 ID 목록 반환 */
21
53
  getSelectedIds: () => Set<string>;
54
+ /** 상호작용 비활성화 여부 체크 */
55
+ isInteractionDisabled: () => boolean;
22
56
  }
57
+ /**
58
+ * KonvaMarkerContext의 값 타입
59
+ */
23
60
  interface KonvaMarkerContextValue {
61
+ /** 컴포넌트 인스턴스 등록 */
24
62
  registerComponent: <T>(instance: ComponentInstance<T>) => void;
63
+ /** 컴포넌트 인스턴스 등록 해제 */
25
64
  unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
26
65
  }
66
+ /**
67
+ * 다중 WoongCanvasLayer 관리를 위한 Context Provider
68
+ *
69
+ * 여러 개의 WoongCanvasLayer가 동시에 사용될 때 이벤트 우선순위를 관리하고
70
+ * 전역 클릭/호버 이벤트를 조정합니다.
71
+ *
72
+ * @param children - Provider로 감쌀 React 컴포넌트들
73
+ * @returns Context Provider 컴포넌트
74
+ *
75
+ * @example
76
+ * ```tsx
77
+ * <KonvaMarkerProvider>
78
+ * <WoongCanvasLayer zIndex={1} data={markers1} ... />
79
+ * <WoongCanvasLayer zIndex={2} data={markers2} ... />
80
+ * </KonvaMarkerProvider>
81
+ * ```
82
+ */
27
83
  export declare const KonvaMarkerProvider: React.FC<{
28
84
  children: React.ReactNode;
29
85
  }>;
86
+ /**
87
+ * KonvaMarkerContext를 사용하기 위한 Hook
88
+ *
89
+ * @returns Context 값 또는 null (Provider 외부에서 사용 시)
90
+ *
91
+ * @example
92
+ * ```tsx
93
+ * const context = useKonvaMarkerContext();
94
+ * if (context) {
95
+ * context.registerComponent(instance);
96
+ * }
97
+ * ```
98
+ */
30
99
  export declare const useKonvaMarkerContext: () => KonvaMarkerContextValue | null;
31
100
  export {};
@@ -9,18 +9,50 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
11
11
 
12
+ /** 다중 레이어 관리를 위한 React Context */
13
+
12
14
  var KonvaMarkerContext = React.createContext(null);
15
+ /**
16
+ * 다중 WoongCanvasLayer 관리를 위한 Context Provider
17
+ *
18
+ * 여러 개의 WoongCanvasLayer가 동시에 사용될 때 이벤트 우선순위를 관리하고
19
+ * 전역 클릭/호버 이벤트를 조정합니다.
20
+ *
21
+ * @param children - Provider로 감쌀 React 컴포넌트들
22
+ * @returns Context Provider 컴포넌트
23
+ *
24
+ * @example
25
+ * ```tsx
26
+ * <KonvaMarkerProvider>
27
+ * <WoongCanvasLayer zIndex={1} data={markers1} ... />
28
+ * <WoongCanvasLayer zIndex={2} data={markers2} ... />
29
+ * </KonvaMarkerProvider>
30
+ * ```
31
+ */
32
+
13
33
  var KonvaMarkerProvider = function (_a) {
14
34
  var children = _a.children;
15
- var controller = MintMapProvider.useMintMapController(); // Refs
35
+ var controller = MintMapProvider.useMintMapController(); // === Refs ===
36
+
37
+ /** 등록된 모든 컴포넌트 인스턴스들 (zIndex 내림차순 정렬) */
16
38
 
17
39
  var componentsRef = React.useRef([]);
40
+ /** 현재 호버된 컴포넌트 인스턴스 */
41
+
18
42
  var currentHoveredRef = React.useRef(null);
43
+ /** 현재 호버된 데이터 */
44
+
19
45
  var currentHoveredDataRef = React.useRef(null);
20
- var draggingRef = React.useRef(false);
46
+ /** 드래그/줌 여부 (마우스 이동 이벤트 무시용) */
47
+
48
+ var draggingRef = React.useRef(false); // === 컴포넌트 관리 함수들 ===
49
+
21
50
  /**
22
- * 컴포넌트 등록 (zIndex 내림차순 정렬)
23
- * 높은 zIndex가 먼저 처리됨
51
+ * 컴포넌트 인스턴스 등록
52
+ *
53
+ * zIndex 내림차순으로 정렬하여 높은 우선순위의 컴포넌트가 먼저 이벤트를 처리하도록 합니다.
54
+ *
55
+ * @param instance - 등록할 컴포넌트 인스턴스
24
56
  */
25
57
 
26
58
  var registerComponent = React.useCallback(function (instance) {
@@ -30,7 +62,12 @@ var KonvaMarkerProvider = function (_a) {
30
62
  });
31
63
  }, []);
32
64
  /**
33
- * 컴포넌트 등록 해제
65
+ * 컴포넌트 인스턴스 등록 해제
66
+ *
67
+ * 컴포넌트가 언마운트될 때 호출되어 Context에서 제거합니다.
68
+ * 현재 호버 중인 컴포넌트라면 호버 상태도 초기화합니다.
69
+ *
70
+ * @param instance - 등록 해제할 컴포넌트 인스턴스
34
71
  */
35
72
 
36
73
  var unregisterComponent = React.useCallback(function (instance) {
@@ -43,9 +80,15 @@ var KonvaMarkerProvider = function (_a) {
43
80
  componentsRef.current = componentsRef.current.filter(function (c) {
44
81
  return c !== instance;
45
82
  });
46
- }, []);
83
+ }, []); // === 전역 이벤트 핸들러들 ===
84
+
47
85
  /**
48
- * 전역 클릭 핸들러 (zIndex 우선순위)
86
+ * 전역 클릭 이벤트 핸들러
87
+ *
88
+ * zIndex 우선순위에 따라 등록된 컴포넌트들을 순회하며 클릭된 데이터를 찾습니다.
89
+ * 첫 번째로 히트된 컴포넌트의 이벤트만 처리합니다.
90
+ *
91
+ * @param event - 지도 클릭 이벤트 파라미터
49
92
  */
50
93
 
51
94
  var handleGlobalClick = React.useCallback(function (event) {
@@ -55,7 +98,9 @@ var KonvaMarkerProvider = function (_a) {
55
98
  var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
56
99
 
57
100
  for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
58
- var component = _b[_i];
101
+ var component = _b[_i]; // 상호작용이 비활성화된 컴포넌트는 스킵
102
+
103
+ if (component.isInteractionDisabled()) continue;
59
104
  var data = component.findData(clickedOffset);
60
105
 
61
106
  if (data) {
@@ -70,7 +115,12 @@ var KonvaMarkerProvider = function (_a) {
70
115
  }
71
116
  }, [controller]);
72
117
  /**
73
- * 전역 마우스 이동 핸들러 (zIndex 우선순위)
118
+ * 전역 마우스 이동 이벤트 핸들러
119
+ *
120
+ * zIndex 우선순위에 따라 호버된 데이터를 찾고, 호버 상태가 변경되면
121
+ * 이전 호버를 해제하고 새로운 호버를 설정합니다.
122
+ *
123
+ * @param event - 지도 마우스 이동 이벤트 파라미터
74
124
  */
75
125
 
76
126
  var handleGlobalMouseMove = React.useCallback(function (event) {
@@ -83,7 +133,9 @@ var KonvaMarkerProvider = function (_a) {
83
133
  var newHoveredData = null;
84
134
 
85
135
  for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
86
- var component = _b[_i];
136
+ var component = _b[_i]; // 상호작용이 비활성화된 컴포넌트는 스킵
137
+
138
+ if (component.isInteractionDisabled()) continue;
87
139
  var data = component.findData(mouseOffset);
88
140
 
89
141
  if (data) {
@@ -118,19 +170,24 @@ var KonvaMarkerProvider = function (_a) {
118
170
  }
119
171
  }, [controller]);
120
172
  /**
121
- * 줌/드래그 시작 (마우스 이동 이벤트 무시)
173
+ * 줌/드래그 시작 이벤트 핸들러
174
+ *
175
+ * 지도가 줌이나 드래그를 시작할 때 마우스 이동 이벤트를 무시하도록 설정합니다.
176
+ * 이는 성능 최적화와 불필요한 호버 이벤트 방지를 위한 것입니다.
122
177
  */
123
178
 
124
179
  var handleZoomStart = React.useCallback(function () {
125
180
  draggingRef.current = true;
126
181
  }, []);
127
182
  /**
128
- * 지도 idle (마우스 이동 이벤트 재개)
183
+ * 지도 idle 이벤트 핸들러
184
+ *
185
+ * 지도가 idle 상태가 되면 마우스 이동 이벤트를 다시 활성화합니다.
129
186
  */
130
187
 
131
188
  var handleIdle = React.useCallback(function () {
132
189
  draggingRef.current = false;
133
- }, []); // 이벤트 리스너 등록
190
+ }, []); // === 이벤트 리스너 등록 ===
134
191
 
135
192
  React.useEffect(function () {
136
193
  controller.addEventListener('CLICK', handleGlobalClick);
@@ -143,7 +200,7 @@ var KonvaMarkerProvider = function (_a) {
143
200
  controller.removeEventListener('ZOOMSTART', handleZoomStart);
144
201
  controller.removeEventListener('IDLE', handleIdle);
145
202
  };
146
- }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // Context value 메모이제이션
203
+ }, [controller, handleGlobalClick, handleGlobalMouseMove, handleZoomStart, handleIdle]); // === Context value 메모이제이션 ===
147
204
 
148
205
  var contextValue = React.useMemo(function () {
149
206
  return {
@@ -155,6 +212,20 @@ var KonvaMarkerProvider = function (_a) {
155
212
  value: contextValue
156
213
  }, children);
157
214
  };
215
+ /**
216
+ * KonvaMarkerContext를 사용하기 위한 Hook
217
+ *
218
+ * @returns Context 값 또는 null (Provider 외부에서 사용 시)
219
+ *
220
+ * @example
221
+ * ```tsx
222
+ * const context = useKonvaMarkerContext();
223
+ * if (context) {
224
+ * context.registerComponent(instance);
225
+ * }
226
+ * ```
227
+ */
228
+
158
229
  var useKonvaMarkerContext = function () {
159
230
  var context = React.useContext(KonvaMarkerContext);
160
231
  return context;
@@ -1,4 +1,15 @@
1
+ /**
2
+ * @fileoverview WoongCanvasLayer의 공유 유틸리티 모듈
3
+ *
4
+ * 이 파일은 WoongCanvasLayer에서 사용하는 모든 공통 타입, 유틸리티 함수,
5
+ * 성능 최적화 클래스, Context Provider를 외부로 노출합니다.
6
+ *
7
+ * @version 2.2.1
8
+ * @since 2.0.0
9
+ * @author 박건웅
10
+ */
1
11
  export * from './types';
2
12
  export * from './utils';
3
13
  export * from './context';
4
14
  export * from './performance';
15
+ export * from './renderer';
@@ -1,3 +1,18 @@
1
+ /**
2
+ * @fileoverview WoongCanvasLayer 성능 최적화를 위한 상수 및 클래스
3
+ *
4
+ * 이 파일은 30,000개 이상의 마커/폴리곤을 60fps로 렌더링하기 위한
5
+ * 성능 최적화 상수와 최적화된 자료구조들을 제공합니다.
6
+ *
7
+ * ## 주요 구성 요소
8
+ * - **성능 최적화 상수**: 그리드 셀 크기, 캐시 크기, 컬링 여유 공간
9
+ * - **LRUCache**: 좌표 변환 결과 캐싱을 위한 LRU 캐시 구현
10
+ * - **SpatialHashGrid**: O(1) 수준의 빠른 Hit Test를 위한 공간 해시 그리드
11
+ *
12
+ * @version 2.2.1
13
+ * @since 2.0.0
14
+ * @author 박건웅
15
+ */
1
16
  /**
2
17
  * 공간 인덱스 그리드 셀 크기 (px)
3
18
  *
@@ -40,12 +55,29 @@ export declare const DEFAULT_CULLING_MARGIN = 100;
40
55
  export declare const DEFAULT_MAX_CACHE_SIZE = 30000;
41
56
  /**
42
57
  * LRU (Least Recently Used) Cache
43
- * 메모리 제한을 위한 캐시 구현 (최적화 버전)
44
58
  *
45
- * 개선 사항:
46
- * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
47
- * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
48
- * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
59
+ * 메모리 제한을 위한 캐시 구현으로, 좌표 변환 결과를 캐싱하여
60
+ * 성능을 최적화합니다. WoongCanvasLayer의 특성에 맞게 최적화되었습니다.
61
+ *
62
+ * ## 주요 특징
63
+ * - **빠른 조회**: O(1) 해시 조회로 성능 최적화
64
+ * - **메모리 제한**: 최대 크기 초과 시 자동 eviction
65
+ * - **FIFO 방식**: 삽입 순서 기반 eviction (접근 빈도 추적 없음)
66
+ *
67
+ * ## 개선 사항
68
+ * 1. **get() 성능 향상**: 접근 빈도 추적 없이 단순 조회만 수행
69
+ * 2. **set() 버그 수정**: 기존 키 업데이트 시 maxSize 체크 로직 개선
70
+ * 3. **메모리 효율**: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
71
+ *
72
+ * @template K 캐시 키 타입
73
+ * @template V 캐시 값 타입
74
+ *
75
+ * @example
76
+ * ```typescript
77
+ * const cache = new LRUCache<string, Offset>(1000);
78
+ * cache.set('marker-1', { x: 100, y: 200 });
79
+ * const offset = cache.get('marker-1'); // { x: 100, y: 200 }
80
+ * ```
49
81
  */
50
82
  export declare class LRUCache<K, V> {
51
83
  private cache;
@@ -81,16 +113,33 @@ export declare class LRUCache<K, V> {
81
113
  }
82
114
  /**
83
115
  * Spatial Hash Grid (공간 해시 그리드)
84
- * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
85
116
  *
86
- * 개선 사항:
87
- * 1. 중복 삽입 방지: 같은 항목을 여러 insert 해도 안전
88
- * 2. 메모리 누수 방지: 기존 항목 자동 제거
89
- * 3. 성능 최적화: 불필요한 배열 생성 최소화
117
+ * 공간 인덱싱을 위한 그리드 기반 자료구조로, 2D 공간을 격자로 나누어
118
+ * 특정 영역에 있는 객체들을 빠르게 찾을 있게 해줍니다.
119
+ *
120
+ * ## 주요 특징
121
+ * - **O(1) 조회**: 클릭 위치 주변의 객체들만 체크하여 성능 최적화
122
+ * - **메모리 효율**: 격자 기반으로 필요한 영역만 인덱싱
123
+ * - **중복 방지**: 같은 항목을 여러 번 삽입해도 안전
124
+ *
125
+ * ## 성능 비교
126
+ * - **일반 검색**: 30,000개 항목 전체 체크 → O(n)
127
+ * - **Spatial Hash**: 클릭 위치 주변 ~10개만 체크 → O(1) + O(10)
128
+ * - **성능 향상**: 약 3,000배 빠름! 🚀
129
+ *
130
+ * ## 개선 사항
131
+ * 1. **중복 삽입 방지**: 같은 항목을 여러 번 insert 해도 안전
132
+ * 2. **메모리 누수 방지**: 기존 항목 자동 제거
133
+ * 3. **성능 최적화**: 불필요한 배열 생성 최소화
134
+ *
135
+ * @template T 그리드에 저장할 객체 타입
90
136
  *
91
- * 사용 사례:
92
- * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
93
- * - 30,000개 항목 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
137
+ * @example
138
+ * ```typescript
139
+ * const grid = new SpatialHashGrid<Marker>(50);
140
+ * grid.insert(marker, { x: 100, y: 200, width: 30, height: 40 });
141
+ * const nearby = grid.query(105, 205, 10); // (105, 205) 주변 10px 반경
142
+ * ```
94
143
  */
95
144
  export declare class SpatialHashGrid<T> {
96
145
  private cellSize;
@@ -2,6 +2,21 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ /**
6
+ * @fileoverview WoongCanvasLayer 성능 최적화를 위한 상수 및 클래스
7
+ *
8
+ * 이 파일은 30,000개 이상의 마커/폴리곤을 60fps로 렌더링하기 위한
9
+ * 성능 최적화 상수와 최적화된 자료구조들을 제공합니다.
10
+ *
11
+ * ## 주요 구성 요소
12
+ * - **성능 최적화 상수**: 그리드 셀 크기, 캐시 크기, 컬링 여유 공간
13
+ * - **LRUCache**: 좌표 변환 결과 캐싱을 위한 LRU 캐시 구현
14
+ * - **SpatialHashGrid**: O(1) 수준의 빠른 Hit Test를 위한 공간 해시 그리드
15
+ *
16
+ * @version 2.2.1
17
+ * @since 2.0.0
18
+ * @author 박건웅
19
+ */
5
20
  // ============================================================================
6
21
  // 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
7
22
  // ============================================================================
@@ -50,12 +65,29 @@ var DEFAULT_CULLING_MARGIN = 100;
50
65
  var DEFAULT_MAX_CACHE_SIZE = 30000;
51
66
  /**
52
67
  * LRU (Least Recently Used) Cache
53
- * 메모리 제한을 위한 캐시 구현 (최적화 버전)
54
68
  *
55
- * 개선 사항:
56
- * 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
57
- * 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
58
- * 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
69
+ * 메모리 제한을 위한 캐시 구현으로, 좌표 변환 결과를 캐싱하여
70
+ * 성능을 최적화합니다. WoongCanvasLayer의 특성에 맞게 최적화되었습니다.
71
+ *
72
+ * ## 주요 특징
73
+ * - **빠른 조회**: O(1) 해시 조회로 성능 최적화
74
+ * - **메모리 제한**: 최대 크기 초과 시 자동 eviction
75
+ * - **FIFO 방식**: 삽입 순서 기반 eviction (접근 빈도 추적 없음)
76
+ *
77
+ * ## 개선 사항
78
+ * 1. **get() 성능 향상**: 접근 빈도 추적 없이 단순 조회만 수행
79
+ * 2. **set() 버그 수정**: 기존 키 업데이트 시 maxSize 체크 로직 개선
80
+ * 3. **메모리 효율**: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
81
+ *
82
+ * @template K 캐시 키 타입
83
+ * @template V 캐시 값 타입
84
+ *
85
+ * @example
86
+ * ```typescript
87
+ * const cache = new LRUCache<string, Offset>(1000);
88
+ * cache.set('marker-1', { x: 100, y: 200 });
89
+ * const offset = cache.get('marker-1'); // { x: 100, y: 200 }
90
+ * ```
59
91
  */
60
92
 
61
93
  var LRUCache =
@@ -135,16 +167,33 @@ function () {
135
167
  }();
136
168
  /**
137
169
  * Spatial Hash Grid (공간 해시 그리드)
138
- * 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
139
170
  *
140
- * 개선 사항:
141
- * 1. 중복 삽입 방지: 같은 항목을 여러 insert 해도 안전
142
- * 2. 메모리 누수 방지: 기존 항목 자동 제거
143
- * 3. 성능 최적화: 불필요한 배열 생성 최소화
171
+ * 공간 인덱싱을 위한 그리드 기반 자료구조로, 2D 공간을 격자로 나누어
172
+ * 특정 영역에 있는 객체들을 빠르게 찾을 있게 해줍니다.
173
+ *
174
+ * ## 주요 특징
175
+ * - **O(1) 조회**: 클릭 위치 주변의 객체들만 체크하여 성능 최적화
176
+ * - **메모리 효율**: 격자 기반으로 필요한 영역만 인덱싱
177
+ * - **중복 방지**: 같은 항목을 여러 번 삽입해도 안전
178
+ *
179
+ * ## 성능 비교
180
+ * - **일반 검색**: 30,000개 항목 전체 체크 → O(n)
181
+ * - **Spatial Hash**: 클릭 위치 주변 ~10개만 체크 → O(1) + O(10)
182
+ * - **성능 향상**: 약 3,000배 빠름! 🚀
183
+ *
184
+ * ## 개선 사항
185
+ * 1. **중복 삽입 방지**: 같은 항목을 여러 번 insert 해도 안전
186
+ * 2. **메모리 누수 방지**: 기존 항목 자동 제거
187
+ * 3. **성능 최적화**: 불필요한 배열 생성 최소화
188
+ *
189
+ * @template T 그리드에 저장할 객체 타입
144
190
  *
145
- * 사용 사례:
146
- * - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
147
- * - 30,000개 항목 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
191
+ * @example
192
+ * ```typescript
193
+ * const grid = new SpatialHashGrid<Marker>(50);
194
+ * grid.insert(marker, { x: 100, y: 200, width: 30, height: 40 });
195
+ * const nearby = grid.query(105, 205, 10); // (105, 205) 주변 10px 반경
196
+ * ```
148
197
  */
149
198
 
150
199
  var SpatialHashGrid =
@@ -0,0 +1,115 @@
1
+ /**
2
+ * @fileoverview 폴리곤 렌더링을 위한 유틸리티 및 팩토리 함수
3
+ *
4
+ * 이 파일은 WoongCanvasLayer의 POLYGON 모드에서 사용하는 폴리곤 렌더링
5
+ * 함수들을 제공합니다. 다양한 상태(기본, 선택, 호버)에 따른 렌더링과
6
+ * 도넛 폴리곤(구멍이 있는 폴리곤) 지원을 포함합니다.
7
+ *
8
+ * ## 주요 기능
9
+ * - **폴리곤 그리기**: Canvas 2D API를 사용한 폴리곤 렌더링
10
+ * - **도넛 폴리곤 지원**: evenodd fill rule을 사용한 구멍 처리
11
+ * - **상태별 렌더링**: 기본/선택/호버 상태에 따른 색상 및 스타일 적용
12
+ * - **팩토리 함수**: 렌더링 함수를 쉽게 생성할 수 있는 헬퍼
13
+ *
14
+ * @version 2.2.1
15
+ * @since 2.0.0
16
+ * @author 박건웅
17
+ */
18
+ import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "./types";
19
+ /**
20
+ * 폴리곤 그리기 헬퍼 함수
21
+ *
22
+ * Canvas 2D API를 사용하여 폴리곤을 그리는 핵심 함수입니다.
23
+ * 도넛 폴리곤(구멍이 있는 폴리곤)도 지원합니다.
24
+ *
25
+ * @param ctx - Canvas 2D 렌더링 컨텍스트
26
+ * @param polygonOffsets - 변환된 폴리곤 좌표 배열
27
+ * @param isDonutPolygon - 도넛 폴리곤 여부
28
+ * @param fillColor - 채우기 색상
29
+ * @param strokeColor - 테두리 색상
30
+ * @param lineWidth - 테두리 두께
31
+ *
32
+ * @example
33
+ * ```typescript
34
+ * drawPolygon({
35
+ * ctx,
36
+ * polygonOffsets: [[[[100, 200], [200, 200], [200, 300], [100, 300]]]],
37
+ * isDonutPolygon: false,
38
+ * fillColor: 'rgba(255, 0, 0, 0.5)',
39
+ * strokeColor: 'rgba(255, 0, 0, 1)',
40
+ * lineWidth: 2
41
+ * });
42
+ * ```
43
+ */
44
+ export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillColor, strokeColor, lineWidth }: {
45
+ ctx: CanvasRenderingContext2D;
46
+ polygonOffsets: number[][][][];
47
+ isDonutPolygon: boolean;
48
+ fillColor: string;
49
+ strokeColor: string;
50
+ lineWidth: number;
51
+ }) => void;
52
+ /**
53
+ * 폴리곤 Base Layer 렌더링 함수 팩토리
54
+ *
55
+ * 기본 상태의 폴리곤들을 렌더링하는 함수를 생성합니다.
56
+ * 선택된 폴리곤들은 Event Layer에서 렌더링되므로 제외됩니다.
57
+ *
58
+ * @param baseFillColor - 기본 폴리곤 채우기 색상
59
+ * @param baseStrokeColor - 기본 폴리곤 테두리 색상
60
+ * @param baseLineWidth - 기본 폴리곤 테두리 두께
61
+ * @returns Base Layer 렌더링 함수
62
+ *
63
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
64
+ *
65
+ * @example
66
+ * ```typescript
67
+ * const renderBase = renderPolygonBase(
68
+ * 'rgba(255, 100, 100, 0.5)', // 기본 채우기 색상
69
+ * 'rgba(200, 50, 50, 0.8)', // 기본 테두리 색상
70
+ * 2 // 기본 테두리 두께
71
+ * );
72
+ * ```
73
+ */
74
+ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasData<T>>;
75
+ /**
76
+ * 폴리곤 Event Layer 렌더링 함수 팩토리
77
+ *
78
+ * 선택, 호버, 활성 상태의 폴리곤들을 렌더링하는 함수를 생성합니다.
79
+ * 다양한 상태에 따른 색상과 스타일을 지원하며, fallback 메커니즘을 제공합니다.
80
+ *
81
+ * ## 상태별 렌더링 우선순위
82
+ * 1. **Hovered**: 마우스가 올라간 폴리곤 (최우선)
83
+ * 2. **Active**: 마지막으로 선택된 폴리곤
84
+ * 3. **Selected**: 선택된 폴리곤들
85
+ * 4. **Base**: 기본 상태 (fallback)
86
+ *
87
+ * @param baseFillColor - 기본 폴리곤 채우기 색상 (필수, fallback용)
88
+ * @param baseStrokeColor - 기본 폴리곤 테두리 색상 (필수, fallback용)
89
+ * @param baseLineWidth - 기본 폴리곤 테두리 두께 (필수, fallback용)
90
+ * @param selectedFillColor - 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
91
+ * @param selectedStrokeColor - 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
92
+ * @param selectedLineWidth - 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
93
+ * @param activeFillColor - 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
94
+ * @param activeStrokeColor - 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
95
+ * @param activeLineWidth - 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
96
+ * @param hoveredFillColor - Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
97
+ * @param hoveredStrokeColor - Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
98
+ * @param hoveredLineWidth - Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
99
+ * @returns Event Layer 렌더링 함수
100
+ *
101
+ * @template T 마커/폴리곤 데이터의 추가 속성 타입
102
+ *
103
+ * @example
104
+ * ```typescript
105
+ * const renderEvent = renderPolygonEvent(
106
+ * 'rgba(255, 100, 100, 0.5)', // baseFillColor
107
+ * 'rgba(200, 50, 50, 0.8)', // baseStrokeColor
108
+ * 2, // baseLineWidth
109
+ * 'rgba(255, 193, 7, 0.7)', // selectedFillColor
110
+ * 'rgba(255, 152, 0, 1)', // selectedStrokeColor
111
+ * 4 // selectedLineWidth
112
+ * );
113
+ * ```
114
+ */
115
+ 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<KonvaCanvasData<T>>;