@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.
- package/README.md +7 -7
- package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
- package/dist/components/mint-map/core/MintMapCore.js +2 -2
- package/dist/components/mint-map/core/advanced/index.d.ts +1 -4
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +227 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js} +338 -237
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +12 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +81 -12
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +85 -14
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/index.d.ts +11 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +62 -13
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +62 -13
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +115 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +288 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +138 -16
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.js +20 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +162 -10
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +235 -14
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +22 -1
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
- package/dist/components/mint-map/google/GoogleMintMapController.js +7 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +1 -0
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +7 -1
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +3 -0
- package/dist/components/mint-map/naver/NaverMintMapController.js +40 -4
- package/dist/index.es.js +1078 -283
- package/dist/index.js +35 -15
- package/dist/index.umd.js +1091 -283
- package/package.json +1 -1
- package/.claude/settings.local.json +0 -16
- package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts +0 -11
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +0 -48
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
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 {
|
|
3
|
+
import { KonvaCanvasData } from "./types";
|
|
4
4
|
/**
|
|
5
|
-
* 다중
|
|
5
|
+
* @fileoverview 다중 WoongCanvasLayer 인스턴스를 관리하기 위한 React Context
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
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
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
46
|
+
/** 드래그/줌 중 여부 (마우스 이동 이벤트 무시용) */
|
|
47
|
+
|
|
48
|
+
var draggingRef = React.useRef(false); // === 컴포넌트 관리 함수들 ===
|
|
49
|
+
|
|
21
50
|
/**
|
|
22
|
-
* 컴포넌트 등록
|
|
23
|
-
*
|
|
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
|
-
* 전역 클릭 핸들러
|
|
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
|
-
* 전역 마우스 이동 핸들러
|
|
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
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
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
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
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
|
-
*
|
|
93
|
-
*
|
|
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
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
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
|
-
*
|
|
142
|
-
*
|
|
143
|
-
*
|
|
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
|
-
*
|
|
147
|
-
*
|
|
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>>;
|