@mint-ui/map 1.2.0-test.31 → 1.2.0-test.33
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/MintMapCore.js +5 -5
- package/dist/components/mint-map/core/advanced/index.d.ts +2 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.d.ts +5 -5
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.js +8 -8
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.js +1 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.d.ts +9 -12
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.d.ts +2 -2
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.js +3 -3
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts +97 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/WoongCanvasLayer.js → woongCanvasMarker/WoongCanvasMarker.js} +42 -123
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.d.ts +113 -0
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.js +948 -0
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.d.ts +1 -1
- package/dist/components/mint-map/google/GoogleMintMapController.js +4 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -4
- package/dist/components/mint-map/naver/NaverMintMapController.js +4 -4
- package/dist/index.es.js +1101 -260
- package/dist/index.js +10 -8
- package/dist/index.umd.js +1104 -262
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +0 -162
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
- /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/index.d.ts +0 -0
- /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.js +0 -0
- /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.js +0 -0
|
@@ -8,10 +8,10 @@ var React = require('react');
|
|
|
8
8
|
var MapTypes = require('../types/MapTypes.js');
|
|
9
9
|
var MintMapProvider = require('./provider/MintMapProvider.js');
|
|
10
10
|
var MintMapCore_module = require('./MintMapCore.module.scss.js');
|
|
11
|
-
require('./advanced/
|
|
12
|
-
require('./advanced/
|
|
13
|
-
var context = require('./advanced/
|
|
14
|
-
require('./advanced/
|
|
11
|
+
require('./advanced/shared/types.js');
|
|
12
|
+
require('./advanced/shared/utils.js');
|
|
13
|
+
var context = require('./advanced/shared/context.js');
|
|
14
|
+
require('./advanced/shared/performance.js');
|
|
15
15
|
|
|
16
16
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
17
|
|
|
@@ -100,7 +100,7 @@ function MintMapCore(_a) {
|
|
|
100
100
|
}, [center]);
|
|
101
101
|
return React__default["default"].createElement("div", {
|
|
102
102
|
className: cn('mint-map-root')
|
|
103
|
-
}, mapInitialized && React__default["default"].createElement(context.
|
|
103
|
+
}, mapInitialized && React__default["default"].createElement(context.WoongCanvasProvider, null, children), React__default["default"].createElement("div", {
|
|
104
104
|
className: cn('mint-map-container'),
|
|
105
105
|
style: {
|
|
106
106
|
visibility: visible ? 'inherit' : 'hidden'
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Offset } from "
|
|
2
|
+
import { Offset } from "../../../types";
|
|
3
3
|
import { KonvaCanvasData } from "./types";
|
|
4
4
|
/**
|
|
5
|
-
* 다중
|
|
5
|
+
* 다중 WoongCanvasMarker/WoongCanvasPolygon 인스턴스를 관리하기 위한 Context
|
|
6
6
|
*
|
|
7
7
|
* 용도:
|
|
8
8
|
* - zIndex 기반 이벤트 우선순위 처리
|
|
@@ -21,12 +21,12 @@ export interface ComponentInstance<T> {
|
|
|
21
21
|
getSelectedIds: () => Set<string>;
|
|
22
22
|
isInteractionDisabled: () => boolean;
|
|
23
23
|
}
|
|
24
|
-
interface
|
|
24
|
+
interface WoongCanvasContextValue {
|
|
25
25
|
registerComponent: <T>(instance: ComponentInstance<T>) => void;
|
|
26
26
|
unregisterComponent: <T>(instance: ComponentInstance<T>) => void;
|
|
27
27
|
}
|
|
28
|
-
export declare const
|
|
28
|
+
export declare const WoongCanvasProvider: React.FC<{
|
|
29
29
|
children: React.ReactNode;
|
|
30
30
|
}>;
|
|
31
|
-
export declare const
|
|
31
|
+
export declare const useWoongCanvasContext: () => WoongCanvasContextValue | null;
|
|
32
32
|
export {};
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var MintMapProvider = require('
|
|
6
|
+
var MintMapProvider = require('../../provider/MintMapProvider.js');
|
|
7
7
|
|
|
8
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
9
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
|
|
12
|
-
var
|
|
13
|
-
var
|
|
12
|
+
var WoongCanvasContext = React.createContext(null);
|
|
13
|
+
var WoongCanvasProvider = function (_a) {
|
|
14
14
|
var children = _a.children;
|
|
15
15
|
var controller = MintMapProvider.useMintMapController(); // Refs
|
|
16
16
|
|
|
@@ -155,14 +155,14 @@ var KonvaMarkerProvider = function (_a) {
|
|
|
155
155
|
unregisterComponent: unregisterComponent
|
|
156
156
|
};
|
|
157
157
|
}, [registerComponent, unregisterComponent]);
|
|
158
|
-
return React__default["default"].createElement(
|
|
158
|
+
return React__default["default"].createElement(WoongCanvasContext.Provider, {
|
|
159
159
|
value: contextValue
|
|
160
160
|
}, children);
|
|
161
161
|
};
|
|
162
|
-
var
|
|
163
|
-
var context = React.useContext(
|
|
162
|
+
var useWoongCanvasContext = function () {
|
|
163
|
+
var context = React.useContext(WoongCanvasContext);
|
|
164
164
|
return context;
|
|
165
165
|
};
|
|
166
166
|
|
|
167
|
-
exports.
|
|
168
|
-
exports.
|
|
167
|
+
exports.WoongCanvasProvider = WoongCanvasProvider;
|
|
168
|
+
exports.useWoongCanvasContext = useWoongCanvasContext;
|
package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.d.ts
RENAMED
|
@@ -62,7 +62,7 @@ export declare class LRUCache<K, V> {
|
|
|
62
62
|
* - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
|
|
63
63
|
* - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
|
|
64
64
|
*
|
|
65
|
-
*
|
|
65
|
+
* WoongCanvasMarker 사용 사례에 최적:
|
|
66
66
|
* - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
|
|
67
67
|
* - 접근 빈도 추적보다 빠른 조회가 더 중요
|
|
68
68
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Konva from "konva";
|
|
2
|
-
import { Position, Offset } from "
|
|
2
|
+
import { Position, Offset } from "../../../types";
|
|
3
3
|
/**
|
|
4
4
|
* 캔버스 데이터 타입 Enum
|
|
5
5
|
* 마커인지 폴리곤인지 구분하는 상수
|
|
@@ -15,9 +15,6 @@ export interface Paths {
|
|
|
15
15
|
type: string;
|
|
16
16
|
coordinates: number[][][][];
|
|
17
17
|
}
|
|
18
|
-
/**
|
|
19
|
-
* 캔버스 마커/폴리곤 기본 옵션
|
|
20
|
-
*/
|
|
21
18
|
/**
|
|
22
19
|
* Konva 캔버스 마커/폴리곤의 기본 필수 속성
|
|
23
20
|
* (렌더링에 필요한 최소 정보)
|
|
@@ -43,7 +40,7 @@ export declare type KonvaCanvasData<T = {}> = T & KonvaCanvasOption;
|
|
|
43
40
|
/**
|
|
44
41
|
* 🛠️ 렌더링 유틸리티 함수들
|
|
45
42
|
*
|
|
46
|
-
*
|
|
43
|
+
* WoongCanvasMarker/WoongCanvasPolygon이 제공하는 헬퍼 함수 모음입니다.
|
|
47
44
|
* 커스텀 렌더링 함수 내에서 좌표 변환 시 사용하세요.
|
|
48
45
|
*
|
|
49
46
|
* ## 주요 기능
|
|
@@ -147,11 +144,11 @@ export interface RenderUtils<T> {
|
|
|
147
144
|
export interface RenderBaseParams<T> {
|
|
148
145
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
149
146
|
ctx: CanvasRenderingContext2D;
|
|
150
|
-
/** 렌더링할
|
|
147
|
+
/** 렌더링할 마커/폴리곤 데이터 배열 */
|
|
151
148
|
items: KonvaCanvasData<T>[];
|
|
152
|
-
/** 현재 선택된
|
|
149
|
+
/** 현재 선택된 마커/폴리곤 ID Set */
|
|
153
150
|
selectedIds: Set<string>;
|
|
154
|
-
/** 현재 hover된
|
|
151
|
+
/** 현재 hover된 마커/폴리곤 데이터 (선택) */
|
|
155
152
|
hoveredItem?: KonvaCanvasData<T> | null;
|
|
156
153
|
/** 렌더링 유틸리티 함수들 */
|
|
157
154
|
utils: RenderUtils<T>;
|
|
@@ -177,9 +174,9 @@ export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
|
|
|
177
174
|
export interface RenderAnimationParams<T> {
|
|
178
175
|
/** Konva Layer 인스턴스 */
|
|
179
176
|
layer: Konva.Layer;
|
|
180
|
-
/** 현재 선택된
|
|
177
|
+
/** 현재 선택된 마커/폴리곤 ID Set */
|
|
181
178
|
selectedIds: Set<string>;
|
|
182
|
-
/** 전체
|
|
179
|
+
/** 전체 마커/폴리곤 데이터 배열 */
|
|
183
180
|
items: KonvaCanvasData<T>[];
|
|
184
181
|
/** 렌더링 유틸리티 함수들 */
|
|
185
182
|
utils: RenderUtils<T>;
|
|
@@ -202,11 +199,11 @@ export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>
|
|
|
202
199
|
export interface RenderEventParams<T> {
|
|
203
200
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
204
201
|
ctx: CanvasRenderingContext2D;
|
|
205
|
-
/** 현재 hover된
|
|
202
|
+
/** 현재 hover된 마커/폴리곤 데이터 */
|
|
206
203
|
hoveredItem: KonvaCanvasData<T> | null;
|
|
207
204
|
/** 렌더링 유틸리티 함수들 */
|
|
208
205
|
utils: RenderUtils<T>;
|
|
209
|
-
/** 현재 선택된
|
|
206
|
+
/** 현재 선택된 마커/폴리곤 데이터 배열 (선택 강조용) */
|
|
210
207
|
selectedItems?: KonvaCanvasData<T>[];
|
|
211
208
|
/** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
|
|
212
209
|
selectedItem?: KonvaCanvasData<T> | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Offset } from "
|
|
2
|
-
import { MintMapController } from "
|
|
1
|
+
import { Offset } from "../../../types";
|
|
2
|
+
import { MintMapController } from "../../MintMapController";
|
|
3
3
|
import { KonvaCanvasData } from "./types";
|
|
4
4
|
/**
|
|
5
5
|
* 폴리곤 offset 계산
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
require('
|
|
6
|
-
var MapTypes = require('
|
|
7
|
-
require('
|
|
5
|
+
require('../../../types/MapDrawables.js');
|
|
6
|
+
var MapTypes = require('../../../types/MapTypes.js');
|
|
7
|
+
require('../../../types/MapEventTypes.js');
|
|
8
8
|
|
|
9
9
|
/**
|
|
10
10
|
* 폴리곤 offset 계산
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { MarkerOptions } from "../../../types";
|
|
3
|
+
import { KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "../shared";
|
|
4
|
+
export { WoongCanvasProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "../shared";
|
|
5
|
+
export type { KonvaCanvasOption, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "../shared";
|
|
6
|
+
/**
|
|
7
|
+
* WoongCanvasMarker Props - 마커 전용
|
|
8
|
+
*/
|
|
9
|
+
export interface WoongCanvasMarkerProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
|
|
10
|
+
/** 렌더링할 마커 데이터 배열 */
|
|
11
|
+
data: KonvaCanvasData<T>[];
|
|
12
|
+
/** 마커 클릭 시 호출되는 콜백 (선택) */
|
|
13
|
+
onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
|
|
14
|
+
/** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
|
|
15
|
+
onMouseOver?: (payload: KonvaCanvasData<T>) => void;
|
|
16
|
+
/** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
|
|
17
|
+
onMouseOut?: (payload: KonvaCanvasData<T>) => void;
|
|
18
|
+
/** 다중 선택 활성화 여부 (기본: false) */
|
|
19
|
+
enableMultiSelect?: boolean;
|
|
20
|
+
/** hover 시 마커를 최상단으로 표시 (기본: false) */
|
|
21
|
+
topOnHover?: boolean;
|
|
22
|
+
/** 뷰포트 컬링 활성화 여부 (기본: true) */
|
|
23
|
+
enableViewportCulling?: boolean;
|
|
24
|
+
/** 뷰포트 컬링 여유 공간 (기본: 100px) */
|
|
25
|
+
cullingMargin?: number;
|
|
26
|
+
/** LRU 캐시 최대 크기 (기본: 10000) */
|
|
27
|
+
maxCacheSize?: number;
|
|
28
|
+
/** 외부에서 제어하는 선택된 항목 배열 (선택) */
|
|
29
|
+
selectedItems?: KonvaCanvasData<T>[];
|
|
30
|
+
/** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
|
|
31
|
+
selectedItem?: KonvaCanvasData<T> | null;
|
|
32
|
+
/** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
|
|
33
|
+
disableInteraction?: boolean;
|
|
34
|
+
/** Base Layer 렌더링 함수 (필수) */
|
|
35
|
+
renderBase: CustomRenderBase<T>;
|
|
36
|
+
/** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
|
|
37
|
+
renderAnimation?: CustomRenderAnimation<T>;
|
|
38
|
+
/** Event Layer 렌더링 함수 (선택) */
|
|
39
|
+
renderEvent?: CustomRenderEvent<T>;
|
|
40
|
+
}
|
|
41
|
+
declare const WoongCanvasMarker: <T>(props: WoongCanvasMarkerProps<T>) => React.ReactPortal;
|
|
42
|
+
/**
|
|
43
|
+
* 🚀 WoongCanvasMarker - Konva 기반 초고성능 마커 렌더링 컴포넌트
|
|
44
|
+
*
|
|
45
|
+
* ## 📌 주요 특징
|
|
46
|
+
* - **30,000개 이상의 마커를 60fps로 렌더링**
|
|
47
|
+
* - **Multi-Layer 아키텍처**: Base/Animation/Event 레이어 분리
|
|
48
|
+
* - **Spatial Hash Grid**: O(1) 수준의 빠른 Hit Test
|
|
49
|
+
* - **LRU 캐시**: 좌표 변환 결과 캐싱으로 성능 최적화
|
|
50
|
+
* - **Viewport Culling**: 화면에 보이는 영역만 렌더링
|
|
51
|
+
* - **커스텀 렌더링**: renderBase, renderAnimation, renderEvent로 완전한 커스터마이징 가능
|
|
52
|
+
*
|
|
53
|
+
* ## 🎯 사용 방법
|
|
54
|
+
*
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <WoongCanvasMarker
|
|
57
|
+
* data={markers}
|
|
58
|
+
* renderBase={renderMarkerBase} // required
|
|
59
|
+
* renderAnimation={renderMarkerAnimation} // optional
|
|
60
|
+
* renderEvent={renderMarkerEvent} // optional
|
|
61
|
+
* topOnHover={true}
|
|
62
|
+
* onClick={handleClick}
|
|
63
|
+
* />
|
|
64
|
+
* ```
|
|
65
|
+
*
|
|
66
|
+
* ## 📊 데이터 형식
|
|
67
|
+
* ```typescript
|
|
68
|
+
* const data: KonvaCanvasData<T>[] = [
|
|
69
|
+
* {
|
|
70
|
+
* id: 'unique-id',
|
|
71
|
+
* position: new Position(lat, lng),
|
|
72
|
+
* // MARKER: boxWidth/boxHeight 권장 (Hit Test 정확도)
|
|
73
|
+
* boxWidth: 60,
|
|
74
|
+
* boxHeight: 75,
|
|
75
|
+
* tailHeight: 9, // optional (Viewport Culling용)
|
|
76
|
+
* // 커스텀 데이터
|
|
77
|
+
* ...customData
|
|
78
|
+
* }
|
|
79
|
+
* ];
|
|
80
|
+
* ```
|
|
81
|
+
*
|
|
82
|
+
* ## ⚡ 성능 최적화 팁
|
|
83
|
+
* 1. **동적 boxWidth 계산**: `measureText()`로 실제 너비 계산 후 전달
|
|
84
|
+
* 2. **enableViewportCulling**: 대량 데이터 시 필수 (기본 true)
|
|
85
|
+
* 3. **selectedItems 외부 관리**: 상태를 외부에서 관리하여 리렌더링 최소화
|
|
86
|
+
*
|
|
87
|
+
* @template T 마커 데이터의 추가 속성 타입
|
|
88
|
+
*
|
|
89
|
+
* @example
|
|
90
|
+
* // 동적 boxWidth 계산 예시
|
|
91
|
+
* const tempCtx = document.createElement('canvas').getContext('2d');
|
|
92
|
+
* tempCtx.font = 'bold 15px Arial';
|
|
93
|
+
* const boxWidth = Math.max(60, tempCtx.measureText(text).width + 20);
|
|
94
|
+
*
|
|
95
|
+
* @see {@link https://github.com/your-repo/docs/WoongCanvasMarker.md} 전체 문서
|
|
96
|
+
*/
|
|
97
|
+
export default WoongCanvasMarker;
|
|
@@ -10,11 +10,10 @@ var MapDrawables = require('../../../types/MapDrawables.js');
|
|
|
10
10
|
require('../../../types/MapTypes.js');
|
|
11
11
|
require('../../../types/MapEventTypes.js');
|
|
12
12
|
var reactDom = require('react-dom');
|
|
13
|
-
var types = require('
|
|
14
|
-
var utils = require('
|
|
15
|
-
var context = require('
|
|
16
|
-
var performance = require('
|
|
17
|
-
var renderer = require('./shared/renderer.js');
|
|
13
|
+
var types = require('../shared/types.js');
|
|
14
|
+
var utils = require('../shared/utils.js');
|
|
15
|
+
var context = require('../shared/context.js');
|
|
16
|
+
var performance = require('../shared/performance.js');
|
|
18
17
|
|
|
19
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
19
|
|
|
@@ -24,9 +23,8 @@ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
|
|
|
24
23
|
// 메인 컴포넌트
|
|
25
24
|
// ============================================================================
|
|
26
25
|
|
|
27
|
-
var
|
|
26
|
+
var WoongCanvasMarker = function (props) {
|
|
28
27
|
var data = props.data,
|
|
29
|
-
dataType = props.dataType,
|
|
30
28
|
onClick = props.onClick,
|
|
31
29
|
onMouseOver = props.onMouseOver,
|
|
32
30
|
onMouseOut = props.onMouseOut,
|
|
@@ -44,13 +42,16 @@ var WoongCanvasLayer = function (props) {
|
|
|
44
42
|
externalSelectedItem = props.selectedItem,
|
|
45
43
|
_f = props.disableInteraction,
|
|
46
44
|
disableInteraction = _f === void 0 ? false : _f,
|
|
47
|
-
|
|
45
|
+
renderBase = props.renderBase,
|
|
46
|
+
renderAnimation = props.renderAnimation,
|
|
47
|
+
renderEvent = props.renderEvent,
|
|
48
|
+
options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
|
|
48
49
|
// Hooks & Context
|
|
49
50
|
// --------------------------------------------------------------------------
|
|
50
51
|
|
|
51
52
|
|
|
52
53
|
var controller = MintMapProvider.useMintMapController();
|
|
53
|
-
var context$1 = context.
|
|
54
|
+
var context$1 = context.useWoongCanvasContext();
|
|
54
55
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
55
56
|
// DOM Refs
|
|
56
57
|
// --------------------------------------------------------------------------
|
|
@@ -179,24 +180,6 @@ var WoongCanvasLayer = function (props) {
|
|
|
179
180
|
// 유틸리티 함수: 좌표 변환 캐싱
|
|
180
181
|
// --------------------------------------------------------------------------
|
|
181
182
|
|
|
182
|
-
/**
|
|
183
|
-
* 폴리곤 좌표 변환 결과를 캐시하고 반환
|
|
184
|
-
* @param polygonData 폴리곤 데이터
|
|
185
|
-
* @returns 변환된 좌표 배열 또는 null
|
|
186
|
-
*/
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
var getOrComputePolygonOffsets = function (polygonData) {
|
|
190
|
-
var cached = offsetCacheRef.current.get(polygonData.id);
|
|
191
|
-
if (cached && Array.isArray(cached)) return cached;
|
|
192
|
-
var result = utils.computePolygonOffsets(polygonData, controller);
|
|
193
|
-
|
|
194
|
-
if (result) {
|
|
195
|
-
offsetCacheRef.current.set(polygonData.id, result);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
return result;
|
|
199
|
-
};
|
|
200
183
|
/**
|
|
201
184
|
* 마커 좌표 변환 결과를 캐시하고 반환
|
|
202
185
|
*
|
|
@@ -220,66 +203,31 @@ var WoongCanvasLayer = function (props) {
|
|
|
220
203
|
// --------------------------------------------------------------------------
|
|
221
204
|
|
|
222
205
|
/**
|
|
223
|
-
*
|
|
206
|
+
* 마커의 바운딩 박스 계산
|
|
224
207
|
*
|
|
225
208
|
* 🎯 마커의 경우:
|
|
226
209
|
* - boxHeight: 본체만 (Hit Test 영역)
|
|
227
210
|
* - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
|
|
228
211
|
*
|
|
229
|
-
* @param item 마커
|
|
212
|
+
* @param item 마커 데이터
|
|
230
213
|
* @returns 바운딩 박스 또는 null
|
|
231
214
|
*/
|
|
232
215
|
|
|
233
216
|
|
|
234
217
|
var computeBoundingBox = function (item) {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
var polygonGroup = multiPolygon_1[_a];
|
|
249
|
-
|
|
250
|
-
for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
|
|
251
|
-
var _c = polygonGroup_1[_b],
|
|
252
|
-
x = _c[0],
|
|
253
|
-
y = _c[1];
|
|
254
|
-
if (x < minX) minX = x;
|
|
255
|
-
if (y < minY) minY = y;
|
|
256
|
-
if (x > maxX) maxX = x;
|
|
257
|
-
if (y > maxY) maxY = y;
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
return {
|
|
263
|
-
minX: minX,
|
|
264
|
-
minY: minY,
|
|
265
|
-
maxX: maxX,
|
|
266
|
-
maxY: maxY
|
|
267
|
-
};
|
|
268
|
-
} else {
|
|
269
|
-
// 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
|
|
270
|
-
var offset = getOrComputeMarkerOffset(item);
|
|
271
|
-
if (!offset) return null;
|
|
272
|
-
var boxWidth = item.boxWidth || 50;
|
|
273
|
-
var boxHeight = item.boxHeight || 28;
|
|
274
|
-
var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
|
|
275
|
-
|
|
276
|
-
return {
|
|
277
|
-
minX: offset.x - boxWidth / 2,
|
|
278
|
-
minY: offset.y - boxHeight - tailHeight,
|
|
279
|
-
maxX: offset.x + boxWidth / 2,
|
|
280
|
-
maxY: offset.y
|
|
281
|
-
};
|
|
282
|
-
}
|
|
218
|
+
// 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
|
|
219
|
+
var offset = getOrComputeMarkerOffset(item);
|
|
220
|
+
if (!offset) return null;
|
|
221
|
+
var boxWidth = item.boxWidth || 50;
|
|
222
|
+
var boxHeight = item.boxHeight || 28;
|
|
223
|
+
var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
|
|
224
|
+
|
|
225
|
+
return {
|
|
226
|
+
minX: offset.x - boxWidth / 2,
|
|
227
|
+
minY: offset.y - boxHeight - tailHeight,
|
|
228
|
+
maxX: offset.x + boxWidth / 2,
|
|
229
|
+
maxY: offset.y
|
|
230
|
+
};
|
|
283
231
|
}; // --------------------------------------------------------------------------
|
|
284
232
|
// 유틸리티 함수: 공간 인덱싱
|
|
285
233
|
// --------------------------------------------------------------------------
|
|
@@ -313,24 +261,14 @@ var WoongCanvasLayer = function (props) {
|
|
|
313
261
|
|
|
314
262
|
|
|
315
263
|
var renderUtils = {
|
|
316
|
-
getOrComputePolygonOffsets:
|
|
264
|
+
getOrComputePolygonOffsets: function () {
|
|
265
|
+
return null;
|
|
266
|
+
},
|
|
317
267
|
getOrComputeMarkerOffset: getOrComputeMarkerOffset
|
|
318
268
|
};
|
|
319
269
|
/** Base Layer에서 사용할 빈 Set (재사용) */
|
|
320
270
|
|
|
321
271
|
React.useRef(new Set());
|
|
322
|
-
/**
|
|
323
|
-
* 실제 사용할 렌더링 함수 결정
|
|
324
|
-
* - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
|
|
325
|
-
* - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
|
|
326
|
-
*/
|
|
327
|
-
|
|
328
|
-
var renderBase = dataType === types.CanvasDataType.MARKER ? props.renderBase : renderer.renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
|
|
329
|
-
var renderAnimation = dataType === types.CanvasDataType.MARKER ? props.renderAnimation : undefined;
|
|
330
|
-
var renderEvent = dataType === types.CanvasDataType.MARKER ? props.renderEvent : function () {
|
|
331
|
-
var polygonProps = props;
|
|
332
|
-
return renderer.renderPolygonEvent(polygonProps.baseFillColor, polygonProps.baseStrokeColor, polygonProps.baseLineWidth, polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
|
|
333
|
-
}();
|
|
334
272
|
/**
|
|
335
273
|
* Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
|
|
336
274
|
*
|
|
@@ -604,54 +542,35 @@ var WoongCanvasLayer = function (props) {
|
|
|
604
542
|
// --------------------------------------------------------------------------
|
|
605
543
|
|
|
606
544
|
/**
|
|
607
|
-
* 특정 좌표의
|
|
545
|
+
* 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
|
|
608
546
|
*
|
|
609
547
|
* topOnHover가 true일 때:
|
|
610
548
|
* - 현재 hover된 항목을 최우선으로 체크
|
|
611
549
|
* - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
|
|
612
550
|
*
|
|
613
551
|
* @param offset 검사할 좌표
|
|
614
|
-
* @returns 찾은
|
|
552
|
+
* @returns 찾은 마커 데이터 또는 null
|
|
615
553
|
*/
|
|
616
554
|
|
|
617
555
|
|
|
618
556
|
var findData = function (offset) {
|
|
619
557
|
// topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
|
|
620
558
|
if (topOnHover && hoveredItemRef.current) {
|
|
621
|
-
var hovered = hoveredItemRef.current;
|
|
559
|
+
var hovered = hoveredItemRef.current;
|
|
622
560
|
|
|
623
|
-
if (
|
|
624
|
-
|
|
625
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
626
|
-
}
|
|
627
|
-
} // 마커인 경우
|
|
628
|
-
else {
|
|
629
|
-
if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
630
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
631
|
-
}
|
|
561
|
+
if (utils.isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
562
|
+
return hovered; // 여전히 hover된 항목 위에 있음
|
|
632
563
|
}
|
|
633
564
|
} // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
|
|
634
565
|
|
|
635
566
|
|
|
636
|
-
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); //
|
|
567
|
+
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
|
|
637
568
|
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
641
|
-
var item = candidates[i];
|
|
569
|
+
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
570
|
+
var item = candidates[i];
|
|
642
571
|
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
}
|
|
646
|
-
}
|
|
647
|
-
} else {
|
|
648
|
-
// 폴리곤 체크
|
|
649
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
650
|
-
var item = candidates[i];
|
|
651
|
-
|
|
652
|
-
if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
|
|
653
|
-
return item;
|
|
654
|
-
}
|
|
572
|
+
if (utils.isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
|
|
573
|
+
return item;
|
|
655
574
|
}
|
|
656
575
|
}
|
|
657
576
|
|
|
@@ -766,7 +685,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
766
685
|
}
|
|
767
686
|
}
|
|
768
687
|
} catch (error) {
|
|
769
|
-
console.error('[
|
|
688
|
+
console.error('[WoongCanvasMarker] handleClick error:', error);
|
|
770
689
|
}
|
|
771
690
|
};
|
|
772
691
|
/**
|
|
@@ -792,7 +711,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
792
711
|
if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
|
|
793
712
|
}
|
|
794
713
|
} catch (error) {
|
|
795
|
-
console.error('[
|
|
714
|
+
console.error('[WoongCanvasMarker] handleMouseMove error:', error);
|
|
796
715
|
}
|
|
797
716
|
};
|
|
798
717
|
/**
|
|
@@ -1110,7 +1029,7 @@ Object.defineProperty(exports, 'CanvasDataType', {
|
|
|
1110
1029
|
enumerable: true,
|
|
1111
1030
|
get: function () { return types.CanvasDataType; }
|
|
1112
1031
|
});
|
|
1113
|
-
exports.
|
|
1032
|
+
exports.WoongCanvasProvider = context.WoongCanvasProvider;
|
|
1114
1033
|
exports.LRUCache = performance.LRUCache;
|
|
1115
1034
|
exports.SpatialHashGrid = performance.SpatialHashGrid;
|
|
1116
|
-
exports["default"] =
|
|
1035
|
+
exports["default"] = WoongCanvasMarker;
|