@mint-ui/map 1.2.0-test.5 → 1.2.0-test.50
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/CLAUDE.md +0 -1
- package/dist/components/mint-map/core/MintMapCore.js +5 -6
- package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.d.ts +47 -0
- package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js +634 -0
- package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.d.ts +183 -0
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js +593 -0
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.d.ts +183 -0
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.js +482 -0
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.d.ts +7 -0
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerClaude.js +7 -7
- package/dist/components/mint-map/core/advanced/canvas/index.d.ts +0 -1
- package/dist/components/mint-map/core/advanced/index.d.ts +3 -1
- package/dist/components/mint-map/core/advanced/shared/context.d.ts +39 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.js +62 -79
- 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/{woongCanvas/shared → shared}/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/shared/performance.d.ts +77 -0
- package/dist/components/mint-map/core/advanced/shared/performance.js +262 -0
- package/dist/components/mint-map/core/advanced/shared/types.d.ts +127 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.js +5 -1
- package/dist/components/mint-map/core/advanced/shared/utils.d.ts +130 -0
- package/dist/components/mint-map/core/advanced/shared/utils.js +303 -0
- 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/google/GoogleMintMapController.js +5 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +5 -4
- package/dist/components/mint-map/naver/NaverMintMapController.js +5 -4
- package/dist/index.es.js +3064 -2682
- package/dist/index.js +25 -10
- package/dist/index.umd.js +3078 -2684
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.d.ts +0 -22
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.js +0 -413
- 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 -50
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.js +0 -1065
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +0 -31
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +0 -161
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +0 -343
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +0 -131
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +0 -31
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +0 -164
- package/dist/components/mint-map/core/util/geohash.js +0 -125
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Offset } from "../../../../types";
|
|
3
|
-
import { KonvaCanvasMarkerData } from "./types";
|
|
4
|
-
/**
|
|
5
|
-
* 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
|
|
6
|
-
*
|
|
7
|
-
* 용도:
|
|
8
|
-
* - zIndex 기반 이벤트 우선순위 처리
|
|
9
|
-
* - 전역 클릭/호버 이벤트 조정
|
|
10
|
-
* - 여러 레이어 간 상호작용 관리
|
|
11
|
-
*/
|
|
12
|
-
export interface ComponentInstance<T> {
|
|
13
|
-
zIndex: number;
|
|
14
|
-
hitTest: (offset: Offset) => boolean;
|
|
15
|
-
onClick?: (payload: KonvaCanvasMarkerData<T>, selectedIds: Set<string>) => void;
|
|
16
|
-
onMouseOver?: (payload: KonvaCanvasMarkerData<T>) => void;
|
|
17
|
-
onMouseOut?: (payload: KonvaCanvasMarkerData<T>) => void;
|
|
18
|
-
findData: (offset: Offset) => KonvaCanvasMarkerData<T> | null;
|
|
19
|
-
setHovered: (data: KonvaCanvasMarkerData<T> | null) => void;
|
|
20
|
-
handleLocalClick: (data: KonvaCanvasMarkerData<T>) => void;
|
|
21
|
-
getSelectedIds: () => Set<string>;
|
|
22
|
-
}
|
|
23
|
-
interface KonvaMarkerContextValue {
|
|
24
|
-
registerComponent: <T>(instance: ComponentInstance<T>) => void;
|
|
25
|
-
unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
|
|
26
|
-
}
|
|
27
|
-
export declare const KonvaMarkerProvider: React.FC<{
|
|
28
|
-
children: React.ReactNode;
|
|
29
|
-
}>;
|
|
30
|
-
export declare const useKonvaMarkerContext: () => KonvaMarkerContextValue | null;
|
|
31
|
-
export {};
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 공간 인덱스 그리드 셀 크기 (px)
|
|
3
|
-
*
|
|
4
|
-
* 최적값 계산:
|
|
5
|
-
* - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
|
|
6
|
-
* - 화면 크기: 1920×1080 기준
|
|
7
|
-
* - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
|
|
8
|
-
*
|
|
9
|
-
* 성능 비교 (30,000개 기준):
|
|
10
|
-
* - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
|
|
11
|
-
* - 50px: 셀당 ~37개 → Hit Test O(37) ✅ 15배 빠름!
|
|
12
|
-
*
|
|
13
|
-
* 트레이드오프:
|
|
14
|
-
* - 작을수록: Hit Test 빠름, 메모리 사용량 증가
|
|
15
|
-
* - 클수록: 메모리 효율적, Hit Test 느림
|
|
16
|
-
*/
|
|
17
|
-
export declare const SPATIAL_GRID_CELL_SIZE = 50;
|
|
18
|
-
/**
|
|
19
|
-
* 뷰포트 컬링 여유 공간 (px)
|
|
20
|
-
*
|
|
21
|
-
* 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
|
|
22
|
-
* 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
|
|
23
|
-
*/
|
|
24
|
-
export declare const DEFAULT_CULLING_MARGIN = 100;
|
|
25
|
-
/**
|
|
26
|
-
* LRU 캐시 최대 항목 수
|
|
27
|
-
*
|
|
28
|
-
* 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
|
|
29
|
-
*
|
|
30
|
-
* 최적값 계산:
|
|
31
|
-
* - 전체 항목: 30,000개
|
|
32
|
-
* - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
|
|
33
|
-
*
|
|
34
|
-
* 메모리 사용량 (항목당 ~80 bytes):
|
|
35
|
-
* - 10,000개: ~800KB → 캐시 히트율 33% ❌
|
|
36
|
-
* - 30,000개: ~2.4MB → 캐시 히트율 100% ✅
|
|
37
|
-
*
|
|
38
|
-
* zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
|
|
39
|
-
*/
|
|
40
|
-
export declare const DEFAULT_MAX_CACHE_SIZE = 30000;
|
|
41
|
-
/**
|
|
42
|
-
* LRU (Least Recently Used) Cache
|
|
43
|
-
* 메모리 제한을 위한 캐시 구현 (최적화 버전)
|
|
44
|
-
*
|
|
45
|
-
* 개선 사항:
|
|
46
|
-
* 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
|
|
47
|
-
* 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
|
|
48
|
-
* 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
|
|
49
|
-
*/
|
|
50
|
-
export declare class LRUCache<K, V> {
|
|
51
|
-
private cache;
|
|
52
|
-
private maxSize;
|
|
53
|
-
constructor(maxSize?: number);
|
|
54
|
-
/**
|
|
55
|
-
* 캐시에서 값 조회
|
|
56
|
-
*
|
|
57
|
-
* 최적화: delete+set 제거
|
|
58
|
-
* - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
|
|
59
|
-
* - 현재: 단순 조회만 수행 (O(1) 해시 조회)
|
|
60
|
-
*
|
|
61
|
-
* 트레이드오프:
|
|
62
|
-
* - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
|
|
63
|
-
* - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
|
|
64
|
-
*
|
|
65
|
-
* WoongKonvaMarker 사용 사례에 최적:
|
|
66
|
-
* - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
|
|
67
|
-
* - 접근 빈도 추적보다 빠른 조회가 더 중요
|
|
68
|
-
*/
|
|
69
|
-
get(key: K): V | undefined;
|
|
70
|
-
/**
|
|
71
|
-
* 캐시에 값 저장 (버그 수정 + 최적화)
|
|
72
|
-
*
|
|
73
|
-
* 수정 사항:
|
|
74
|
-
* 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
|
|
75
|
-
* 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
|
|
76
|
-
*/
|
|
77
|
-
set(key: K, value: V): void;
|
|
78
|
-
clear(): void;
|
|
79
|
-
size(): number;
|
|
80
|
-
has(key: K): boolean;
|
|
81
|
-
}
|
|
82
|
-
/**
|
|
83
|
-
* Spatial Hash Grid (공간 해시 그리드)
|
|
84
|
-
* 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
|
|
85
|
-
*
|
|
86
|
-
* 개선 사항:
|
|
87
|
-
* 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
|
|
88
|
-
* 2. 메모리 누수 방지: 기존 항목 자동 제거
|
|
89
|
-
* 3. 성능 최적화: 불필요한 배열 생성 최소화
|
|
90
|
-
*
|
|
91
|
-
* 사용 사례:
|
|
92
|
-
* - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
|
|
93
|
-
* - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
|
|
94
|
-
*/
|
|
95
|
-
export declare class SpatialHashGrid<T> {
|
|
96
|
-
private cellSize;
|
|
97
|
-
private grid;
|
|
98
|
-
private itemToCells;
|
|
99
|
-
constructor(cellSize?: number);
|
|
100
|
-
/**
|
|
101
|
-
* 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
|
|
102
|
-
*/
|
|
103
|
-
private getCellKey;
|
|
104
|
-
/**
|
|
105
|
-
* 바운딩 박스가 걸치는 모든 셀 키 배열 반환
|
|
106
|
-
*/
|
|
107
|
-
private getCellsForBounds;
|
|
108
|
-
/**
|
|
109
|
-
* 항목 추가 (바운딩 박스 기반)
|
|
110
|
-
*
|
|
111
|
-
* 개선 사항:
|
|
112
|
-
* - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
|
|
113
|
-
* - 메모리 누수 방지: 이전 셀 참조 완전 제거
|
|
114
|
-
*/
|
|
115
|
-
insert(item: T, minX: number, minY: number, maxX: number, maxY: number): void;
|
|
116
|
-
/**
|
|
117
|
-
* 항목 제거
|
|
118
|
-
*
|
|
119
|
-
* 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
|
|
120
|
-
*/
|
|
121
|
-
remove(item: T): void;
|
|
122
|
-
/**
|
|
123
|
-
* 항목 위치 업데이트
|
|
124
|
-
*
|
|
125
|
-
* 추가된 메서드: remove + insert의 편의 함수
|
|
126
|
-
*/
|
|
127
|
-
update(item: T, minX: number, minY: number, maxX: number, maxY: number): void;
|
|
128
|
-
/**
|
|
129
|
-
* 점 주변의 항목 조회 (1개 셀만)
|
|
130
|
-
*
|
|
131
|
-
* 성능: O(해당 셀의 항목 수) - 보통 ~10개
|
|
132
|
-
*/
|
|
133
|
-
queryPoint(x: number, y: number): T[];
|
|
134
|
-
/**
|
|
135
|
-
* 영역 내 항목 조회
|
|
136
|
-
*
|
|
137
|
-
* 성능: O(셀 개수 × 셀당 평균 항목 수)
|
|
138
|
-
* Set으로 중복 제거 보장
|
|
139
|
-
*/
|
|
140
|
-
queryBounds(minX: number, minY: number, maxX: number, maxY: number): T[];
|
|
141
|
-
/**
|
|
142
|
-
* 항목 존재 여부 확인
|
|
143
|
-
*
|
|
144
|
-
* 추가된 메서드: 빠른 존재 여부 체크
|
|
145
|
-
*/
|
|
146
|
-
has(item: T): boolean;
|
|
147
|
-
/**
|
|
148
|
-
* 전체 초기화
|
|
149
|
-
*/
|
|
150
|
-
clear(): void;
|
|
151
|
-
/**
|
|
152
|
-
* 통계 정보
|
|
153
|
-
*
|
|
154
|
-
* 개선: totalItems는 실제 고유 항목 수를 정확히 반환
|
|
155
|
-
*/
|
|
156
|
-
stats(): {
|
|
157
|
-
totalCells: number;
|
|
158
|
-
totalItems: number;
|
|
159
|
-
avgItemsPerCell: number;
|
|
160
|
-
};
|
|
161
|
-
}
|
|
@@ -1,343 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
// ============================================================================
|
|
6
|
-
// 성능 최적화 상수 (30,000개 마커/폴리곤 기준 최적화)
|
|
7
|
-
// ============================================================================
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* 공간 인덱스 그리드 셀 크기 (px)
|
|
11
|
-
*
|
|
12
|
-
* 최적값 계산:
|
|
13
|
-
* - 목표: 클릭 시 셀당 10~30개 항목만 체크 (빠른 Hit Test)
|
|
14
|
-
* - 화면 크기: 1920×1080 기준
|
|
15
|
-
* - 30,000개 항목 → 50px 셀 크기 = 약 800개 셀 = 셀당 ~37개
|
|
16
|
-
*
|
|
17
|
-
* 성능 비교 (30,000개 기준):
|
|
18
|
-
* - 200px: 셀당 ~577개 → Hit Test O(577) ❌ 느림
|
|
19
|
-
* - 50px: 셀당 ~37개 → Hit Test O(37) ✅ 15배 빠름!
|
|
20
|
-
*
|
|
21
|
-
* 트레이드오프:
|
|
22
|
-
* - 작을수록: Hit Test 빠름, 메모리 사용량 증가
|
|
23
|
-
* - 클수록: 메모리 효율적, Hit Test 느림
|
|
24
|
-
*/
|
|
25
|
-
var SPATIAL_GRID_CELL_SIZE = 50;
|
|
26
|
-
/**
|
|
27
|
-
* 뷰포트 컬링 여유 공간 (px)
|
|
28
|
-
*
|
|
29
|
-
* 화면 밖 100px까지 렌더링하여 스크롤 시 부드러운 전환
|
|
30
|
-
* 30,000개 중 실제 렌더링: 화면에 보이는 1,000~3,000개만
|
|
31
|
-
*/
|
|
32
|
-
|
|
33
|
-
var DEFAULT_CULLING_MARGIN = 100;
|
|
34
|
-
/**
|
|
35
|
-
* LRU 캐시 최대 항목 수
|
|
36
|
-
*
|
|
37
|
-
* 좌표 변환 결과 캐싱 (positionToOffset 연산 비용 절약)
|
|
38
|
-
*
|
|
39
|
-
* 최적값 계산:
|
|
40
|
-
* - 전체 항목: 30,000개
|
|
41
|
-
* - 캐시 크기: 30,000개 → 100% 히트율 (메모리: ~2.4MB)
|
|
42
|
-
*
|
|
43
|
-
* 메모리 사용량 (항목당 ~80 bytes):
|
|
44
|
-
* - 10,000개: ~800KB → 캐시 히트율 33% ❌
|
|
45
|
-
* - 30,000개: ~2.4MB → 캐시 히트율 100% ✅
|
|
46
|
-
*
|
|
47
|
-
* zoom/pan 시 어차피 clear() 호출되므로 메모리 누적 없음
|
|
48
|
-
*/
|
|
49
|
-
|
|
50
|
-
var DEFAULT_MAX_CACHE_SIZE = 30000;
|
|
51
|
-
/**
|
|
52
|
-
* LRU (Least Recently Used) Cache
|
|
53
|
-
* 메모리 제한을 위한 캐시 구현 (최적화 버전)
|
|
54
|
-
*
|
|
55
|
-
* 개선 사항:
|
|
56
|
-
* 1. get() 성능 향상: 접근 빈도 추적 없이 단순 조회만 수행 (delete+set 제거)
|
|
57
|
-
* 2. set() 버그 수정: 기존 키 업데이트 시 maxSize 체크 로직 개선
|
|
58
|
-
* 3. 메모리 효율: 단순 FIFO 캐시로 동작하여 오버헤드 최소화
|
|
59
|
-
*/
|
|
60
|
-
|
|
61
|
-
var LRUCache =
|
|
62
|
-
/** @class */
|
|
63
|
-
function () {
|
|
64
|
-
function LRUCache(maxSize) {
|
|
65
|
-
if (maxSize === void 0) {
|
|
66
|
-
maxSize = 10000;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
this.cache = new Map();
|
|
70
|
-
this.maxSize = maxSize;
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* 캐시에서 값 조회
|
|
74
|
-
*
|
|
75
|
-
* 최적화: delete+set 제거
|
|
76
|
-
* - 이전: 매번 delete+set으로 LRU 갱신 (해시 재계산 비용)
|
|
77
|
-
* - 현재: 단순 조회만 수행 (O(1) 해시 조회)
|
|
78
|
-
*
|
|
79
|
-
* 트레이드오프:
|
|
80
|
-
* - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
|
|
81
|
-
* - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
|
|
82
|
-
*
|
|
83
|
-
* WoongKonvaMarker 사용 사례에 최적:
|
|
84
|
-
* - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
|
|
85
|
-
* - 접근 빈도 추적보다 빠른 조회가 더 중요
|
|
86
|
-
*/
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
LRUCache.prototype.get = function (key) {
|
|
90
|
-
return this.cache.get(key);
|
|
91
|
-
};
|
|
92
|
-
/**
|
|
93
|
-
* 캐시에 값 저장 (버그 수정 + 최적화)
|
|
94
|
-
*
|
|
95
|
-
* 수정 사항:
|
|
96
|
-
* 1. 기존 키 업데이트 시 크기 체크 누락 버그 수정
|
|
97
|
-
* 2. 로직 명확화: 기존 항목/신규 항목 분리 처리
|
|
98
|
-
*/
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
LRUCache.prototype.set = function (key, value) {
|
|
102
|
-
var exists = this.cache.has(key);
|
|
103
|
-
|
|
104
|
-
if (exists) {
|
|
105
|
-
// 기존 항목 업데이트: 단순 덮어쓰기 (크기 변화 없음)
|
|
106
|
-
this.cache.set(key, value);
|
|
107
|
-
} else {
|
|
108
|
-
// 신규 항목 추가: 크기 체크 필요
|
|
109
|
-
if (this.cache.size >= this.maxSize) {
|
|
110
|
-
// 가장 오래된 항목 제거 (Map의 첫 번째 항목)
|
|
111
|
-
var firstKey = this.cache.keys().next().value;
|
|
112
|
-
|
|
113
|
-
if (firstKey !== undefined) {
|
|
114
|
-
this.cache.delete(firstKey);
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
this.cache.set(key, value);
|
|
119
|
-
}
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
LRUCache.prototype.clear = function () {
|
|
123
|
-
this.cache.clear();
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
LRUCache.prototype.size = function () {
|
|
127
|
-
return this.cache.size;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
LRUCache.prototype.has = function (key) {
|
|
131
|
-
return this.cache.has(key);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
return LRUCache;
|
|
135
|
-
}();
|
|
136
|
-
/**
|
|
137
|
-
* Spatial Hash Grid (공간 해시 그리드)
|
|
138
|
-
* 공간 인덱싱을 위한 그리드 기반 자료구조 (개선 버전)
|
|
139
|
-
*
|
|
140
|
-
* 개선 사항:
|
|
141
|
-
* 1. 중복 삽입 방지: 같은 항목을 여러 번 insert 해도 안전
|
|
142
|
-
* 2. 메모리 누수 방지: 기존 항목 자동 제거
|
|
143
|
-
* 3. 성능 최적화: 불필요한 배열 생성 최소화
|
|
144
|
-
*
|
|
145
|
-
* 사용 사례:
|
|
146
|
-
* - 빠른 Hit Test (마우스 클릭 시 어떤 마커/폴리곤인지 찾기)
|
|
147
|
-
* - 30,000개 항목 → 클릭 위치 주변 ~10개만 체크 (3,000배 빠름)
|
|
148
|
-
*/
|
|
149
|
-
|
|
150
|
-
var SpatialHashGrid =
|
|
151
|
-
/** @class */
|
|
152
|
-
function () {
|
|
153
|
-
function SpatialHashGrid(cellSize) {
|
|
154
|
-
if (cellSize === void 0) {
|
|
155
|
-
cellSize = 200;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
this.cellSize = cellSize;
|
|
159
|
-
this.grid = new Map();
|
|
160
|
-
this.itemToCells = new Map();
|
|
161
|
-
}
|
|
162
|
-
/**
|
|
163
|
-
* 셀 키 생성 (x, y 좌표 → 그리드 셀 ID)
|
|
164
|
-
*/
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
SpatialHashGrid.prototype.getCellKey = function (x, y) {
|
|
168
|
-
var cellX = Math.floor(x / this.cellSize);
|
|
169
|
-
var cellY = Math.floor(y / this.cellSize);
|
|
170
|
-
return "".concat(cellX, ",").concat(cellY);
|
|
171
|
-
};
|
|
172
|
-
/**
|
|
173
|
-
* 바운딩 박스가 걸치는 모든 셀 키 배열 반환
|
|
174
|
-
*/
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
SpatialHashGrid.prototype.getCellsForBounds = function (minX, minY, maxX, maxY) {
|
|
178
|
-
var cells = [];
|
|
179
|
-
var startCellX = Math.floor(minX / this.cellSize);
|
|
180
|
-
var startCellY = Math.floor(minY / this.cellSize);
|
|
181
|
-
var endCellX = Math.floor(maxX / this.cellSize);
|
|
182
|
-
var endCellY = Math.floor(maxY / this.cellSize);
|
|
183
|
-
|
|
184
|
-
for (var x = startCellX; x <= endCellX; x++) {
|
|
185
|
-
for (var y = startCellY; y <= endCellY; y++) {
|
|
186
|
-
cells.push("".concat(x, ",").concat(y));
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
return cells;
|
|
191
|
-
};
|
|
192
|
-
/**
|
|
193
|
-
* 항목 추가 (바운딩 박스 기반)
|
|
194
|
-
*
|
|
195
|
-
* 개선 사항:
|
|
196
|
-
* - 중복 삽입 방지: 기존 항목이 있으면 먼저 제거 후 재삽입
|
|
197
|
-
* - 메모리 누수 방지: 이전 셀 참조 완전 제거
|
|
198
|
-
*/
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
SpatialHashGrid.prototype.insert = function (item, minX, minY, maxX, maxY) {
|
|
202
|
-
// 1. 기존 항목 제거 (중복 방지)
|
|
203
|
-
this.remove(item); // 2. 새 위치에 삽입
|
|
204
|
-
|
|
205
|
-
var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
|
|
206
|
-
this.itemToCells.set(item, cells);
|
|
207
|
-
|
|
208
|
-
for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
|
|
209
|
-
var cell = cells_1[_i];
|
|
210
|
-
|
|
211
|
-
if (!this.grid.has(cell)) {
|
|
212
|
-
this.grid.set(cell, []);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
this.grid.get(cell).push(item);
|
|
216
|
-
}
|
|
217
|
-
};
|
|
218
|
-
/**
|
|
219
|
-
* 항목 제거
|
|
220
|
-
*
|
|
221
|
-
* 추가된 메서드: 메모리 누수 방지 및 업데이트 지원
|
|
222
|
-
*/
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
SpatialHashGrid.prototype.remove = function (item) {
|
|
226
|
-
var prevCells = this.itemToCells.get(item);
|
|
227
|
-
if (!prevCells) return; // 각 셀에서 항목 제거
|
|
228
|
-
|
|
229
|
-
for (var _i = 0, prevCells_1 = prevCells; _i < prevCells_1.length; _i++) {
|
|
230
|
-
var cell = prevCells_1[_i];
|
|
231
|
-
var cellItems = this.grid.get(cell);
|
|
232
|
-
|
|
233
|
-
if (cellItems) {
|
|
234
|
-
var index = cellItems.indexOf(item);
|
|
235
|
-
|
|
236
|
-
if (index !== -1) {
|
|
237
|
-
cellItems.splice(index, 1);
|
|
238
|
-
} // 빈 셀 정리 (메모리 효율)
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
if (cellItems.length === 0) {
|
|
242
|
-
this.grid.delete(cell);
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
this.itemToCells.delete(item);
|
|
248
|
-
};
|
|
249
|
-
/**
|
|
250
|
-
* 항목 위치 업데이트
|
|
251
|
-
*
|
|
252
|
-
* 추가된 메서드: remove + insert의 편의 함수
|
|
253
|
-
*/
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
SpatialHashGrid.prototype.update = function (item, minX, minY, maxX, maxY) {
|
|
257
|
-
this.insert(item, minX, minY, maxX, maxY);
|
|
258
|
-
};
|
|
259
|
-
/**
|
|
260
|
-
* 점 주변의 항목 조회 (1개 셀만)
|
|
261
|
-
*
|
|
262
|
-
* 성능: O(해당 셀의 항목 수) - 보통 ~10개
|
|
263
|
-
*/
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
SpatialHashGrid.prototype.queryPoint = function (x, y) {
|
|
267
|
-
var cellKey = this.getCellKey(x, y);
|
|
268
|
-
var items = this.grid.get(cellKey); // 빈 배열 재사용 (메모리 할당 최소화)
|
|
269
|
-
|
|
270
|
-
return items || [];
|
|
271
|
-
};
|
|
272
|
-
/**
|
|
273
|
-
* 영역 내 항목 조회
|
|
274
|
-
*
|
|
275
|
-
* 성능: O(셀 개수 × 셀당 평균 항목 수)
|
|
276
|
-
* Set으로 중복 제거 보장
|
|
277
|
-
*/
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
SpatialHashGrid.prototype.queryBounds = function (minX, minY, maxX, maxY) {
|
|
281
|
-
var cells = this.getCellsForBounds(minX, minY, maxX, maxY);
|
|
282
|
-
var results = new Set();
|
|
283
|
-
|
|
284
|
-
for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
|
|
285
|
-
var cell = cells_2[_i];
|
|
286
|
-
var items = this.grid.get(cell);
|
|
287
|
-
|
|
288
|
-
if (items) {
|
|
289
|
-
for (var _a = 0, items_1 = items; _a < items_1.length; _a++) {
|
|
290
|
-
var item = items_1[_a];
|
|
291
|
-
results.add(item);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
return Array.from(results);
|
|
297
|
-
};
|
|
298
|
-
/**
|
|
299
|
-
* 항목 존재 여부 확인
|
|
300
|
-
*
|
|
301
|
-
* 추가된 메서드: 빠른 존재 여부 체크
|
|
302
|
-
*/
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
SpatialHashGrid.prototype.has = function (item) {
|
|
306
|
-
return this.itemToCells.has(item);
|
|
307
|
-
};
|
|
308
|
-
/**
|
|
309
|
-
* 전체 초기화
|
|
310
|
-
*/
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
SpatialHashGrid.prototype.clear = function () {
|
|
314
|
-
this.grid.clear();
|
|
315
|
-
this.itemToCells.clear();
|
|
316
|
-
};
|
|
317
|
-
/**
|
|
318
|
-
* 통계 정보
|
|
319
|
-
*
|
|
320
|
-
* 개선: totalItems는 실제 고유 항목 수를 정확히 반환
|
|
321
|
-
*/
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
SpatialHashGrid.prototype.stats = function () {
|
|
325
|
-
var totalCellItems = 0;
|
|
326
|
-
this.grid.forEach(function (items) {
|
|
327
|
-
totalCellItems += items.length;
|
|
328
|
-
});
|
|
329
|
-
return {
|
|
330
|
-
totalCells: this.grid.size,
|
|
331
|
-
totalItems: this.itemToCells.size,
|
|
332
|
-
avgItemsPerCell: this.grid.size > 0 ? totalCellItems / this.grid.size : 0
|
|
333
|
-
};
|
|
334
|
-
};
|
|
335
|
-
|
|
336
|
-
return SpatialHashGrid;
|
|
337
|
-
}();
|
|
338
|
-
|
|
339
|
-
exports.DEFAULT_CULLING_MARGIN = DEFAULT_CULLING_MARGIN;
|
|
340
|
-
exports.DEFAULT_MAX_CACHE_SIZE = DEFAULT_MAX_CACHE_SIZE;
|
|
341
|
-
exports.LRUCache = LRUCache;
|
|
342
|
-
exports.SPATIAL_GRID_CELL_SIZE = SPATIAL_GRID_CELL_SIZE;
|
|
343
|
-
exports.SpatialHashGrid = SpatialHashGrid;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import Konva from "konva";
|
|
2
|
-
import { Position, Offset } from "../../../../types";
|
|
3
|
-
/**
|
|
4
|
-
* 캔버스 데이터 타입 Enum
|
|
5
|
-
* 마커인지 폴리곤인지 구분하는 상수
|
|
6
|
-
*/
|
|
7
|
-
export declare enum CanvasDataType {
|
|
8
|
-
MARKER = "MARKER",
|
|
9
|
-
POLYGON = "POLYGON"
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* 폴리곤 경로 정의
|
|
13
|
-
*/
|
|
14
|
-
export interface Paths {
|
|
15
|
-
type: string;
|
|
16
|
-
coordinates: number[][][][];
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* 캔버스 마커/폴리곤 기본 옵션
|
|
20
|
-
*/
|
|
21
|
-
/**
|
|
22
|
-
* Konva 캔버스 마커/폴리곤의 기본 필수 속성
|
|
23
|
-
* (렌더링에 필요한 최소 정보)
|
|
24
|
-
*/
|
|
25
|
-
export interface KonvaCanvasMarkerOption {
|
|
26
|
-
id: string;
|
|
27
|
-
position: Position;
|
|
28
|
-
boxWidth?: number;
|
|
29
|
-
boxHeight?: number;
|
|
30
|
-
paths?: Paths;
|
|
31
|
-
isDonutPolygon?: boolean;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* 서버 데이터와 캔버스 옵션을 결합한 타입
|
|
35
|
-
* @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
|
|
36
|
-
* @example
|
|
37
|
-
* // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
|
|
38
|
-
* type MarkerWithCanvas = KonvaCanvasMarkerData<Marker>
|
|
39
|
-
* // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
|
|
40
|
-
*/
|
|
41
|
-
export declare type KonvaCanvasMarkerData<T = {}> = T & KonvaCanvasMarkerOption;
|
|
42
|
-
/**
|
|
43
|
-
* 렌더링 유틸리티 함수들
|
|
44
|
-
*/
|
|
45
|
-
export interface RenderUtils<T> {
|
|
46
|
-
getOrComputePolygonOffsets: (polygonData: KonvaCanvasMarkerData<T>) => number[][][][] | null;
|
|
47
|
-
getOrComputeMarkerOffset: (markerData: KonvaCanvasMarkerData<T>) => Offset | null;
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* 커스텀 렌더링 함수 파라미터 - Base Layer
|
|
51
|
-
*/
|
|
52
|
-
export interface RenderBaseParams<T> {
|
|
53
|
-
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
54
|
-
ctx: CanvasRenderingContext2D;
|
|
55
|
-
/** 렌더링할 마커 데이터 배열 */
|
|
56
|
-
items: KonvaCanvasMarkerData<T>[];
|
|
57
|
-
/** 현재 선택된 마커 ID Set */
|
|
58
|
-
selectedIds: Set<string>;
|
|
59
|
-
/** 렌더링 유틸리티 함수들 */
|
|
60
|
-
utils: RenderUtils<T>;
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* 커스텀 렌더링 함수 타입 - Base Layer
|
|
64
|
-
*
|
|
65
|
-
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
66
|
-
*
|
|
67
|
-
* @example
|
|
68
|
-
* const renderBase = ({ ctx, items, selectedIds, utils }) => {
|
|
69
|
-
* for (const item of items) {
|
|
70
|
-
* if (selectedIds.has(item.id)) continue;
|
|
71
|
-
* const pos = utils.getOrComputeMarkerOffset(item);
|
|
72
|
-
* ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
|
|
73
|
-
* }
|
|
74
|
-
* };
|
|
75
|
-
*/
|
|
76
|
-
export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
|
|
77
|
-
/**
|
|
78
|
-
* 커스텀 렌더링 함수 파라미터 - Animation Layer
|
|
79
|
-
*/
|
|
80
|
-
export interface RenderAnimationParams<T> {
|
|
81
|
-
/** Konva Layer 인스턴스 */
|
|
82
|
-
layer: Konva.Layer;
|
|
83
|
-
/** 현재 선택된 마커 ID Set */
|
|
84
|
-
selectedIds: Set<string>;
|
|
85
|
-
/** 전체 마커 데이터 배열 */
|
|
86
|
-
items: KonvaCanvasMarkerData<T>[];
|
|
87
|
-
/** 렌더링 유틸리티 함수들 */
|
|
88
|
-
utils: RenderUtils<T>;
|
|
89
|
-
}
|
|
90
|
-
/**
|
|
91
|
-
* 커스텀 렌더링 함수 타입 - Animation Layer (선택)
|
|
92
|
-
*
|
|
93
|
-
* @example
|
|
94
|
-
* const renderAnimation = ({ layer, selectedIds, items, utils }) => {
|
|
95
|
-
* for (const id of selectedIds) {
|
|
96
|
-
* const item = items.find(i => i.id === id);
|
|
97
|
-
* // Konva 애니메이션 구현
|
|
98
|
-
* }
|
|
99
|
-
* };
|
|
100
|
-
*/
|
|
101
|
-
export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
|
|
102
|
-
/**
|
|
103
|
-
* 커스텀 렌더링 함수 파라미터 - Event Layer
|
|
104
|
-
*/
|
|
105
|
-
export interface RenderEventParams<T> {
|
|
106
|
-
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
107
|
-
ctx: CanvasRenderingContext2D;
|
|
108
|
-
/** 현재 hover된 마커 데이터 */
|
|
109
|
-
hoveredItem: KonvaCanvasMarkerData<T> | null;
|
|
110
|
-
/** 렌더링 유틸리티 함수들 */
|
|
111
|
-
utils: RenderUtils<T>;
|
|
112
|
-
/** 현재 선택된 마커 데이터 배열 (선택 강조용) */
|
|
113
|
-
selectedItems?: KonvaCanvasMarkerData<T>[];
|
|
114
|
-
/** 마지막으로 클릭된 마커 데이터 */
|
|
115
|
-
lastClickedItem: KonvaCanvasMarkerData<T> | null;
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* 커스텀 렌더링 함수 타입 - Event Layer
|
|
119
|
-
*
|
|
120
|
-
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
121
|
-
*
|
|
122
|
-
* @example
|
|
123
|
-
* const renderEvent = ({ ctx, hoveredItem, utils, selectedItems }) => {
|
|
124
|
-
* if (hoveredItem) {
|
|
125
|
-
* const pos = utils.getOrComputeMarkerOffset(hoveredItem);
|
|
126
|
-
* ctx.fillStyle = 'red';
|
|
127
|
-
* ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
|
|
128
|
-
* }
|
|
129
|
-
* };
|
|
130
|
-
*/
|
|
131
|
-
export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { Offset } from "../../../../types";
|
|
2
|
-
import { MintMapController } from "../../../MintMapController";
|
|
3
|
-
import { KonvaCanvasMarkerData } from "./types";
|
|
4
|
-
/**
|
|
5
|
-
* 폴리곤 offset 계산
|
|
6
|
-
*/
|
|
7
|
-
export declare const computePolygonOffsets: (polygonData: KonvaCanvasMarkerData<any>, controller: MintMapController) => number[][][][] | null;
|
|
8
|
-
/**
|
|
9
|
-
* 마커 offset 계산
|
|
10
|
-
*/
|
|
11
|
-
export declare const computeMarkerOffset: (markerData: KonvaCanvasMarkerData<any>, controller: MintMapController) => Offset | null;
|
|
12
|
-
/**
|
|
13
|
-
* Point-in-Polygon 알고리즘
|
|
14
|
-
*/
|
|
15
|
-
export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => boolean;
|
|
16
|
-
/**
|
|
17
|
-
* 폴리곤 히트 테스트 (도넛 폴리곤 지원)
|
|
18
|
-
*
|
|
19
|
-
* 로직:
|
|
20
|
-
* 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
|
|
21
|
-
* 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
|
|
22
|
-
*
|
|
23
|
-
* 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
|
|
24
|
-
* - 도넛 폴리곤 A: isDonutPolygon=true
|
|
25
|
-
* - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
|
|
26
|
-
*/
|
|
27
|
-
export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasMarkerData<any>, getPolygonOffsets: (data: KonvaCanvasMarkerData<any>) => number[][][][] | null) => boolean;
|
|
28
|
-
/**
|
|
29
|
-
* 마커 히트 테스트
|
|
30
|
-
*/
|
|
31
|
-
export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasMarkerData<any>, getMarkerOffset: (data: KonvaCanvasMarkerData<any>) => Offset | null) => boolean;
|