@mint-ui/map 1.2.0-test.12 → 1.2.0-test.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +20 -15
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js +11 -6
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +7 -7
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +3 -3
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +82 -26
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +5 -5
- package/dist/index.es.js +11 -6
- package/dist/index.umd.js +11 -6
- package/package.json +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MarkerOptions } from "../../../types";
|
|
3
|
-
import {
|
|
3
|
+
import { KonvaCanvasData, CanvasDataType, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent } from "./shared";
|
|
4
4
|
export { KonvaMarkerProvider, LRUCache, SpatialHashGrid, CanvasDataType } from "./shared";
|
|
5
|
-
export type {
|
|
5
|
+
export type { KonvaCanvasOption, Paths, KonvaCanvasData, CustomRenderBase, CustomRenderAnimation, CustomRenderEvent, RenderUtils, RenderBaseParams, RenderAnimationParams, RenderEventParams } from "./shared";
|
|
6
6
|
/**
|
|
7
7
|
* 공통 Props (MARKER와 POLYGON 모두 사용)
|
|
8
8
|
*/
|
|
9
9
|
interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'anchor' | 'visible'> {
|
|
10
10
|
/** 렌더링할 데이터 배열 (마커 또는 폴리곤) */
|
|
11
|
-
data:
|
|
11
|
+
data: KonvaCanvasData<T>[];
|
|
12
12
|
/** 마커 클릭 시 호출되는 콜백 (선택) */
|
|
13
|
-
onClick?: (payload:
|
|
13
|
+
onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
|
|
14
14
|
/** 마커에 마우스 오버 시 호출되는 콜백 (선택) */
|
|
15
|
-
onMouseOver?: (payload:
|
|
15
|
+
onMouseOver?: (payload: KonvaCanvasData<T>) => void;
|
|
16
16
|
/** 마커에서 마우스 아웃 시 호출되는 콜백 (선택) */
|
|
17
|
-
onMouseOut?: (payload:
|
|
17
|
+
onMouseOut?: (payload: KonvaCanvasData<T>) => void;
|
|
18
18
|
/** 다중 선택 활성화 여부 (기본: false) */
|
|
19
19
|
enableMultiSelect?: boolean;
|
|
20
20
|
/** hover 시 마커를 최상단으로 표시 (기본: false) */
|
|
@@ -26,24 +26,26 @@ interface WoongCanvasLayerBaseProps<T> extends Pick<MarkerOptions, 'zIndex' | 'a
|
|
|
26
26
|
/** LRU 캐시 최대 크기 (기본: 10000) */
|
|
27
27
|
maxCacheSize?: number;
|
|
28
28
|
/** 외부에서 제어하는 선택된 항목 배열 (선택) */
|
|
29
|
-
selectedItems?:
|
|
29
|
+
selectedItems?: KonvaCanvasData<T>[];
|
|
30
30
|
/** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
|
|
31
|
-
selectedItem?:
|
|
31
|
+
selectedItem?: KonvaCanvasData<T> | null;
|
|
32
32
|
/** 상호작용 비활성화 (hover, click 등 모든 이벤트 차단) */
|
|
33
33
|
disableInteraction?: boolean;
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
36
36
|
* MARKER 타입 Props - 커스텀 렌더링 필수
|
|
37
37
|
*/
|
|
38
|
-
interface WoongCanvasLayerPropsForMarker<T> extends WoongCanvasLayerBaseProps<T> {
|
|
38
|
+
interface WoongCanvasLayerPropsForMarker<T, C = any> extends WoongCanvasLayerBaseProps<T> {
|
|
39
39
|
/** 데이터 타입 */
|
|
40
40
|
dataType: CanvasDataType.MARKER;
|
|
41
41
|
/** Base Layer 렌더링 함수 (필수) */
|
|
42
|
-
renderBase: CustomRenderBase<T>;
|
|
42
|
+
renderBase: CustomRenderBase<T, C>;
|
|
43
43
|
/** Animation Layer 렌더링 함수 (선택, 애니메이션용) */
|
|
44
|
-
renderAnimation?: CustomRenderAnimation<T>;
|
|
44
|
+
renderAnimation?: CustomRenderAnimation<T, C>;
|
|
45
45
|
/** Event Layer 렌더링 함수 (선택) */
|
|
46
|
-
renderEvent?: CustomRenderEvent<T>;
|
|
46
|
+
renderEvent?: CustomRenderEvent<T, C>;
|
|
47
|
+
/** 렌더링 설정 (색상, 표시 여부, 모양 등) */
|
|
48
|
+
renderConfig?: C;
|
|
47
49
|
}
|
|
48
50
|
/**
|
|
49
51
|
* POLYGON 타입 Props - 스타일 속성으로 내부 처리
|
|
@@ -78,8 +80,11 @@ interface WoongCanvasLayerPropsForPolygon<T> extends WoongCanvasLayerBaseProps<T
|
|
|
78
80
|
}
|
|
79
81
|
/**
|
|
80
82
|
* 최종 Props 타입 - Discriminated Union
|
|
83
|
+
*
|
|
84
|
+
* @template T 데이터 타입
|
|
85
|
+
* @template C 렌더링 설정 타입 (MARKER 모드에서만 사용)
|
|
81
86
|
*/
|
|
82
|
-
export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T> | WoongCanvasLayerPropsForPolygon<T>;
|
|
87
|
+
export declare type WoongCanvasLayerProps<T, C = any> = WoongCanvasLayerPropsForMarker<T, C> | WoongCanvasLayerPropsForPolygon<T>;
|
|
83
88
|
/**
|
|
84
89
|
* 🚀 WoongCanvasLayer - Konva 기반 초고성능 마커/폴리곤 렌더링 컴포넌트
|
|
85
90
|
*
|
|
@@ -127,7 +132,7 @@ export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T>
|
|
|
127
132
|
*
|
|
128
133
|
* ## 📊 데이터 형식
|
|
129
134
|
* ```typescript
|
|
130
|
-
* const data:
|
|
135
|
+
* const data: KonvaCanvasData<T>[] = [
|
|
131
136
|
* {
|
|
132
137
|
* id: 'unique-id',
|
|
133
138
|
* position: new Position(lat, lng),
|
|
@@ -158,5 +163,5 @@ export declare type WoongCanvasLayerProps<T> = WoongCanvasLayerPropsForMarker<T>
|
|
|
158
163
|
*
|
|
159
164
|
* @see {@link https://github.com/your-repo/docs/WoongCanvasLayer.md} 전체 문서
|
|
160
165
|
*/
|
|
161
|
-
declare const WoongCanvasLayer: <T>(props: WoongCanvasLayerProps<T>) => React.ReactPortal;
|
|
166
|
+
declare const WoongCanvasLayer: <T, C = any>(props: WoongCanvasLayerProps<T, C>) => React.ReactPortal;
|
|
162
167
|
export default WoongCanvasLayer;
|
|
@@ -44,11 +44,13 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
44
44
|
externalSelectedItem = props.selectedItem,
|
|
45
45
|
_f = props.disableInteraction,
|
|
46
46
|
disableInteraction = _f === void 0 ? false : _f,
|
|
47
|
-
options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); //
|
|
47
|
+
options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderConfig 추출 (MARKER 모드에서만 존재)
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
var renderConfig = dataType === types.CanvasDataType.MARKER ? props.renderConfig : undefined; // --------------------------------------------------------------------------
|
|
48
51
|
// Hooks & Context
|
|
49
52
|
// --------------------------------------------------------------------------
|
|
50
53
|
|
|
51
|
-
|
|
52
54
|
var controller = MintMapProvider.useMintMapController();
|
|
53
55
|
var context$1 = context.useKonvaMarkerContext();
|
|
54
56
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
@@ -380,7 +382,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
380
382
|
ctx: ctx,
|
|
381
383
|
items: visibleMarkers,
|
|
382
384
|
selectedIds: selectedIdsRef.current,
|
|
383
|
-
utils: renderUtils
|
|
385
|
+
utils: renderUtils,
|
|
386
|
+
config: renderConfig
|
|
384
387
|
});
|
|
385
388
|
},
|
|
386
389
|
perfectDrawEnabled: false,
|
|
@@ -410,7 +413,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
410
413
|
layer: layer,
|
|
411
414
|
selectedIds: selectedIdsRef.current,
|
|
412
415
|
items: markersRef.current,
|
|
413
|
-
utils: renderUtils
|
|
416
|
+
utils: renderUtils,
|
|
417
|
+
config: renderConfig
|
|
414
418
|
});
|
|
415
419
|
};
|
|
416
420
|
/**
|
|
@@ -451,7 +455,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
451
455
|
hoveredItem: hoveredItemRef.current,
|
|
452
456
|
utils: renderUtils,
|
|
453
457
|
selectedItems: selectedItems,
|
|
454
|
-
selectedItem: selectedItemRef.current
|
|
458
|
+
selectedItem: selectedItemRef.current,
|
|
459
|
+
config: renderConfig
|
|
455
460
|
});
|
|
456
461
|
},
|
|
457
462
|
perfectDrawEnabled: false,
|
|
@@ -1109,7 +1114,7 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
1109
1114
|
*
|
|
1110
1115
|
* ## 📊 데이터 형식
|
|
1111
1116
|
* ```typescript
|
|
1112
|
-
* const data:
|
|
1117
|
+
* const data: KonvaCanvasData<T>[] = [
|
|
1113
1118
|
* {
|
|
1114
1119
|
* id: 'unique-id',
|
|
1115
1120
|
* position: new Position(lat, lng),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Offset } from "../../../../types";
|
|
3
|
-
import {
|
|
3
|
+
import { KonvaCanvasData } from "./types";
|
|
4
4
|
/**
|
|
5
5
|
* 다중 WoongKonvaMarker 인스턴스를 관리하기 위한 Context
|
|
6
6
|
*
|
|
@@ -12,12 +12,12 @@ import { KonvaCanvasMarkerData } from "./types";
|
|
|
12
12
|
export interface ComponentInstance<T> {
|
|
13
13
|
zIndex: number;
|
|
14
14
|
hitTest: (offset: Offset) => boolean;
|
|
15
|
-
onClick?: (payload:
|
|
16
|
-
onMouseOver?: (payload:
|
|
17
|
-
onMouseOut?: (payload:
|
|
18
|
-
findData: (offset: Offset) =>
|
|
19
|
-
setHovered: (data:
|
|
20
|
-
handleLocalClick: (data:
|
|
15
|
+
onClick?: (payload: KonvaCanvasData<T>, selectedIds: Set<string>) => void;
|
|
16
|
+
onMouseOver?: (payload: KonvaCanvasData<T>) => void;
|
|
17
|
+
onMouseOut?: (payload: KonvaCanvasData<T>) => void;
|
|
18
|
+
findData: (offset: Offset) => KonvaCanvasData<T> | null;
|
|
19
|
+
setHovered: (data: KonvaCanvasData<T> | null) => void;
|
|
20
|
+
handleLocalClick: (data: KonvaCanvasData<T>) => void;
|
|
21
21
|
getSelectedIds: () => Set<string>;
|
|
22
22
|
isInteractionDisabled: () => boolean;
|
|
23
23
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
|
|
5
5
|
*/
|
|
6
|
-
import { CustomRenderBase, CustomRenderEvent,
|
|
6
|
+
import { CustomRenderBase, CustomRenderEvent, KonvaCanvasData } from "./types";
|
|
7
7
|
/**
|
|
8
8
|
* 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
|
|
9
9
|
*/
|
|
@@ -30,7 +30,7 @@ export declare const drawPolygon: ({ ctx, polygonOffsets, isDonutPolygon, fillCo
|
|
|
30
30
|
* 2
|
|
31
31
|
* );
|
|
32
32
|
*/
|
|
33
|
-
export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<
|
|
33
|
+
export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStrokeColor: string, baseLineWidth: number) => CustomRenderBase<KonvaCanvasData<T>, any>;
|
|
34
34
|
/**
|
|
35
35
|
* 폴리곤 Event 렌더링 함수
|
|
36
36
|
*
|
|
@@ -56,4 +56,4 @@ export declare const renderPolygonBase: <T = any>(baseFillColor: string, baseStr
|
|
|
56
56
|
* 'rgba(100, 150, 255, 0.8)'
|
|
57
57
|
* );
|
|
58
58
|
*/
|
|
59
|
-
export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<
|
|
59
|
+
export declare const renderPolygonEvent: <T = any>(selectedFillColor: string, selectedStrokeColor: string, selectedLineWidth: number, activeFillColor?: string, activeStrokeColor?: string, activeLineWidth?: number, hoveredFillColor?: string, hoveredStrokeColor?: string, hoveredLineWidth?: number) => CustomRenderEvent<KonvaCanvasData<T>, any>;
|
|
@@ -22,7 +22,7 @@ export interface Paths {
|
|
|
22
22
|
* Konva 캔버스 마커/폴리곤의 기본 필수 속성
|
|
23
23
|
* (렌더링에 필요한 최소 정보)
|
|
24
24
|
*/
|
|
25
|
-
export interface
|
|
25
|
+
export interface KonvaCanvasOption {
|
|
26
26
|
id: string;
|
|
27
27
|
position: Position;
|
|
28
28
|
boxWidth?: number;
|
|
@@ -35,10 +35,10 @@ export interface KonvaCanvasMarkerOption {
|
|
|
35
35
|
* @template T 서버에서 받은 원본 데이터 타입 (예: Marker, Polygon)
|
|
36
36
|
* @example
|
|
37
37
|
* // API에서 받은 Marker 타입을 그대로 유지하면서 캔버스 렌더링 정보 추가
|
|
38
|
-
* type MarkerWithCanvas =
|
|
38
|
+
* type MarkerWithCanvas = KonvaCanvasData<Marker>
|
|
39
39
|
* // { raId, lat, lng, buildingName, totalArea } + { id, position, boxWidth, ... }
|
|
40
40
|
*/
|
|
41
|
-
export declare type
|
|
41
|
+
export declare type KonvaCanvasData<T = {}> = T & KonvaCanvasOption;
|
|
42
42
|
/**
|
|
43
43
|
* 🛠️ 렌더링 유틸리티 함수들
|
|
44
44
|
*
|
|
@@ -112,7 +112,7 @@ export interface RenderUtils<T> {
|
|
|
112
112
|
* }
|
|
113
113
|
* }
|
|
114
114
|
*/
|
|
115
|
-
getOrComputePolygonOffsets: (polygonData:
|
|
115
|
+
getOrComputePolygonOffsets: (polygonData: KonvaCanvasData<T>) => number[][][][] | null;
|
|
116
116
|
/**
|
|
117
117
|
* 마커의 위경도 좌표를 화면 픽셀 좌표로 변환합니다.
|
|
118
118
|
*
|
|
@@ -138,88 +138,144 @@ export interface RenderUtils<T> {
|
|
|
138
138
|
* boxHeight
|
|
139
139
|
* );
|
|
140
140
|
*/
|
|
141
|
-
getOrComputeMarkerOffset: (markerData:
|
|
141
|
+
getOrComputeMarkerOffset: (markerData: KonvaCanvasData<T>) => Offset | null;
|
|
142
142
|
}
|
|
143
143
|
/**
|
|
144
144
|
* 커스텀 렌더링 함수 파라미터 - Base Layer
|
|
145
|
+
*
|
|
146
|
+
* @template T 데이터 타입
|
|
147
|
+
* @template C 설정(Config) 타입 (선택)
|
|
145
148
|
*/
|
|
146
|
-
export interface RenderBaseParams<T> {
|
|
149
|
+
export interface RenderBaseParams<T, C = any> {
|
|
147
150
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
148
151
|
ctx: CanvasRenderingContext2D;
|
|
149
152
|
/** 렌더링할 마커 데이터 배열 */
|
|
150
|
-
items:
|
|
153
|
+
items: KonvaCanvasData<T>[];
|
|
151
154
|
/** 현재 선택된 마커 ID Set */
|
|
152
155
|
selectedIds: Set<string>;
|
|
153
156
|
/** 렌더링 유틸리티 함수들 */
|
|
154
157
|
utils: RenderUtils<T>;
|
|
158
|
+
/** 렌더링 설정 (색상, 표시 여부, 모양 등) */
|
|
159
|
+
config?: C;
|
|
155
160
|
}
|
|
156
161
|
/**
|
|
157
162
|
* 커스텀 렌더링 함수 타입 - Base Layer
|
|
158
163
|
*
|
|
159
164
|
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
160
165
|
*
|
|
166
|
+
* @template T 데이터 타입
|
|
167
|
+
* @template C 설정(Config) 타입 - 렌더링 옵션 (색상, 표시 여부, 모양 등)
|
|
168
|
+
*
|
|
161
169
|
* @example
|
|
162
|
-
*
|
|
170
|
+
* // 기본 사용 (config 없이)
|
|
171
|
+
* const renderBase: CustomRenderBase<Marker> = ({ ctx, items, selectedIds, utils }) => {
|
|
163
172
|
* for (const item of items) {
|
|
164
173
|
* if (selectedIds.has(item.id)) continue;
|
|
165
174
|
* const pos = utils.getOrComputeMarkerOffset(item);
|
|
166
|
-
* ctx.fillRect(pos.x, pos.y, 50, 50);
|
|
175
|
+
* ctx.fillRect(pos.x, pos.y, 50, 50);
|
|
176
|
+
* }
|
|
177
|
+
* };
|
|
178
|
+
*
|
|
179
|
+
* @example
|
|
180
|
+
* // config 사용
|
|
181
|
+
* interface MarkerRenderConfig {
|
|
182
|
+
* showLabel: boolean;
|
|
183
|
+
* color: string;
|
|
184
|
+
* shape: 'circle' | 'square';
|
|
185
|
+
* }
|
|
186
|
+
*
|
|
187
|
+
* const renderBase: CustomRenderBase<Marker, MarkerRenderConfig> = ({ ctx, items, config, utils }) => {
|
|
188
|
+
* for (const item of items) {
|
|
189
|
+
* const pos = utils.getOrComputeMarkerOffset(item);
|
|
190
|
+
* ctx.fillStyle = config?.color || 'blue';
|
|
191
|
+
* if (config?.shape === 'circle') {
|
|
192
|
+
* ctx.arc(pos.x, pos.y, 10, 0, Math.PI * 2);
|
|
193
|
+
* } else {
|
|
194
|
+
* ctx.fillRect(pos.x, pos.y, 20, 20);
|
|
195
|
+
* }
|
|
196
|
+
* ctx.fill();
|
|
167
197
|
* }
|
|
168
198
|
* };
|
|
169
199
|
*/
|
|
170
|
-
export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
|
|
200
|
+
export declare type CustomRenderBase<T, C = any> = (params: RenderBaseParams<T, C>) => void;
|
|
171
201
|
/**
|
|
172
202
|
* 커스텀 렌더링 함수 파라미터 - Animation Layer
|
|
203
|
+
*
|
|
204
|
+
* @template T 데이터 타입
|
|
205
|
+
* @template C 설정(Config) 타입 (선택)
|
|
173
206
|
*/
|
|
174
|
-
export interface RenderAnimationParams<T> {
|
|
207
|
+
export interface RenderAnimationParams<T, C = any> {
|
|
175
208
|
/** Konva Layer 인스턴스 */
|
|
176
209
|
layer: Konva.Layer;
|
|
177
210
|
/** 현재 선택된 마커 ID Set */
|
|
178
211
|
selectedIds: Set<string>;
|
|
179
212
|
/** 전체 마커 데이터 배열 */
|
|
180
|
-
items:
|
|
213
|
+
items: KonvaCanvasData<T>[];
|
|
181
214
|
/** 렌더링 유틸리티 함수들 */
|
|
182
215
|
utils: RenderUtils<T>;
|
|
216
|
+
/** 렌더링 설정 (애니메이션 속도, 효과 등) */
|
|
217
|
+
config?: C;
|
|
183
218
|
}
|
|
184
219
|
/**
|
|
185
220
|
* 커스텀 렌더링 함수 타입 - Animation Layer (선택)
|
|
186
221
|
*
|
|
222
|
+
* @template T 데이터 타입
|
|
223
|
+
* @template C 설정(Config) 타입 - 애니메이션 옵션
|
|
224
|
+
*
|
|
187
225
|
* @example
|
|
188
|
-
*
|
|
189
|
-
*
|
|
190
|
-
*
|
|
191
|
-
*
|
|
192
|
-
*
|
|
226
|
+
* // config 사용
|
|
227
|
+
* interface AnimationConfig {
|
|
228
|
+
* speed: number;
|
|
229
|
+
* bounceHeight: number;
|
|
230
|
+
* }
|
|
231
|
+
*
|
|
232
|
+
* const renderAnimation: CustomRenderAnimation<Marker, AnimationConfig> = ({ layer, selectedIds, items, config, utils }) => {
|
|
233
|
+
* const bounceHeight = config?.bounceHeight || 15;
|
|
234
|
+
* // Konva 애니메이션 구현
|
|
193
235
|
* };
|
|
194
236
|
*/
|
|
195
|
-
export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
|
|
237
|
+
export declare type CustomRenderAnimation<T, C = any> = (params: RenderAnimationParams<T, C>) => void;
|
|
196
238
|
/**
|
|
197
239
|
* 커스텀 렌더링 함수 파라미터 - Event Layer
|
|
240
|
+
*
|
|
241
|
+
* @template T 데이터 타입
|
|
242
|
+
* @template C 설정(Config) 타입 (선택)
|
|
198
243
|
*/
|
|
199
|
-
export interface RenderEventParams<T> {
|
|
244
|
+
export interface RenderEventParams<T, C = any> {
|
|
200
245
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
201
246
|
ctx: CanvasRenderingContext2D;
|
|
202
247
|
/** 현재 hover된 마커 데이터 */
|
|
203
|
-
hoveredItem:
|
|
248
|
+
hoveredItem: KonvaCanvasData<T> | null;
|
|
204
249
|
/** 렌더링 유틸리티 함수들 */
|
|
205
250
|
utils: RenderUtils<T>;
|
|
206
251
|
/** 현재 선택된 마커 데이터 배열 (선택 강조용) */
|
|
207
|
-
selectedItems?:
|
|
252
|
+
selectedItems?: KonvaCanvasData<T>[];
|
|
208
253
|
/** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
|
|
209
|
-
selectedItem?:
|
|
254
|
+
selectedItem?: KonvaCanvasData<T> | null;
|
|
255
|
+
/** 렌더링 설정 (hover 색상, 선택 효과 등) */
|
|
256
|
+
config?: C;
|
|
210
257
|
}
|
|
211
258
|
/**
|
|
212
259
|
* 커스텀 렌더링 함수 타입 - Event Layer
|
|
213
260
|
*
|
|
214
261
|
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
215
262
|
*
|
|
263
|
+
* @template T 데이터 타입
|
|
264
|
+
* @template C 설정(Config) 타입 - 이벤트 렌더링 옵션
|
|
265
|
+
*
|
|
216
266
|
* @example
|
|
217
|
-
*
|
|
267
|
+
* // config 사용
|
|
268
|
+
* interface EventRenderConfig {
|
|
269
|
+
* hoverColor: string;
|
|
270
|
+
* selectedColor: string;
|
|
271
|
+
* }
|
|
272
|
+
*
|
|
273
|
+
* const renderEvent: CustomRenderEvent<Marker, EventRenderConfig> = ({ ctx, hoveredItem, config, utils }) => {
|
|
218
274
|
* if (hoveredItem) {
|
|
219
275
|
* const pos = utils.getOrComputeMarkerOffset(hoveredItem);
|
|
220
|
-
* ctx.fillStyle = 'red';
|
|
221
|
-
* ctx.fillRect(pos.x, pos.y, 50, 50);
|
|
276
|
+
* ctx.fillStyle = config?.hoverColor || 'red';
|
|
277
|
+
* ctx.fillRect(pos.x, pos.y, 50, 50);
|
|
222
278
|
* }
|
|
223
279
|
* };
|
|
224
280
|
*/
|
|
225
|
-
export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;
|
|
281
|
+
export declare type CustomRenderEvent<T, C = any> = (params: RenderEventParams<T, C>) => void;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { Offset } from "../../../../types";
|
|
2
2
|
import { MintMapController } from "../../../MintMapController";
|
|
3
|
-
import {
|
|
3
|
+
import { KonvaCanvasData } from "./types";
|
|
4
4
|
/**
|
|
5
5
|
* 폴리곤 offset 계산
|
|
6
6
|
*/
|
|
7
|
-
export declare const computePolygonOffsets: (polygonData:
|
|
7
|
+
export declare const computePolygonOffsets: (polygonData: KonvaCanvasData<any>, controller: MintMapController) => number[][][][] | null;
|
|
8
8
|
/**
|
|
9
9
|
* 마커 offset 계산
|
|
10
10
|
*/
|
|
11
|
-
export declare const computeMarkerOffset: (markerData:
|
|
11
|
+
export declare const computeMarkerOffset: (markerData: KonvaCanvasData<any>, controller: MintMapController) => Offset | null;
|
|
12
12
|
/**
|
|
13
13
|
* Point-in-Polygon 알고리즘
|
|
14
14
|
*/
|
|
@@ -24,11 +24,11 @@ export declare const isPointInPolygon: (point: Offset, polygon: number[][]) => b
|
|
|
24
24
|
* - 도넛 폴리곤 A: isDonutPolygon=true
|
|
25
25
|
* - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
|
|
26
26
|
*/
|
|
27
|
-
export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData:
|
|
27
|
+
export declare const isPointInPolygonData: (clickedOffset: Offset, polygonData: KonvaCanvasData<any>, getPolygonOffsets: (data: KonvaCanvasData<any>) => number[][][][] | null) => boolean;
|
|
28
28
|
/**
|
|
29
29
|
* 마커 히트 테스트
|
|
30
30
|
*/
|
|
31
|
-
export declare const isPointInMarkerData: (clickedOffset: Offset, markerData:
|
|
31
|
+
export declare const isPointInMarkerData: (clickedOffset: Offset, markerData: KonvaCanvasData<any>, getMarkerOffset: (data: KonvaCanvasData<any>) => Offset | null) => boolean;
|
|
32
32
|
export declare const hexToRgba: (hexColor: string, alpha?: number) => string;
|
|
33
33
|
/**
|
|
34
34
|
* 텍스트 박스의 너비를 계산합니다.
|
package/dist/index.es.js
CHANGED
|
@@ -5656,11 +5656,13 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
5656
5656
|
externalSelectedItem = props.selectedItem,
|
|
5657
5657
|
_f = props.disableInteraction,
|
|
5658
5658
|
disableInteraction = _f === void 0 ? false : _f,
|
|
5659
|
-
options = __rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); //
|
|
5659
|
+
options = __rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderConfig 추출 (MARKER 모드에서만 존재)
|
|
5660
|
+
|
|
5661
|
+
|
|
5662
|
+
var renderConfig = dataType === CanvasDataType.MARKER ? props.renderConfig : undefined; // --------------------------------------------------------------------------
|
|
5660
5663
|
// Hooks & Context
|
|
5661
5664
|
// --------------------------------------------------------------------------
|
|
5662
5665
|
|
|
5663
|
-
|
|
5664
5666
|
var controller = useMintMapController();
|
|
5665
5667
|
var context = useKonvaMarkerContext();
|
|
5666
5668
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
@@ -5992,7 +5994,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
5992
5994
|
ctx: ctx,
|
|
5993
5995
|
items: visibleMarkers,
|
|
5994
5996
|
selectedIds: selectedIdsRef.current,
|
|
5995
|
-
utils: renderUtils
|
|
5997
|
+
utils: renderUtils,
|
|
5998
|
+
config: renderConfig
|
|
5996
5999
|
});
|
|
5997
6000
|
},
|
|
5998
6001
|
perfectDrawEnabled: false,
|
|
@@ -6022,7 +6025,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
6022
6025
|
layer: layer,
|
|
6023
6026
|
selectedIds: selectedIdsRef.current,
|
|
6024
6027
|
items: markersRef.current,
|
|
6025
|
-
utils: renderUtils
|
|
6028
|
+
utils: renderUtils,
|
|
6029
|
+
config: renderConfig
|
|
6026
6030
|
});
|
|
6027
6031
|
};
|
|
6028
6032
|
/**
|
|
@@ -6063,7 +6067,8 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
6063
6067
|
hoveredItem: hoveredItemRef.current,
|
|
6064
6068
|
utils: renderUtils,
|
|
6065
6069
|
selectedItems: selectedItems,
|
|
6066
|
-
selectedItem: selectedItemRef.current
|
|
6070
|
+
selectedItem: selectedItemRef.current,
|
|
6071
|
+
config: renderConfig
|
|
6067
6072
|
});
|
|
6068
6073
|
},
|
|
6069
6074
|
perfectDrawEnabled: false,
|
|
@@ -6721,7 +6726,7 @@ var WoongCanvasLayerComponent = function (props) {
|
|
|
6721
6726
|
*
|
|
6722
6727
|
* ## 📊 데이터 형식
|
|
6723
6728
|
* ```typescript
|
|
6724
|
-
* const data:
|
|
6729
|
+
* const data: KonvaCanvasData<T>[] = [
|
|
6725
6730
|
* {
|
|
6726
6731
|
* id: 'unique-id',
|
|
6727
6732
|
* position: new Position(lat, lng),
|
package/dist/index.umd.js
CHANGED
|
@@ -5660,11 +5660,13 @@
|
|
|
5660
5660
|
externalSelectedItem = props.selectedItem,
|
|
5661
5661
|
_f = props.disableInteraction,
|
|
5662
5662
|
disableInteraction = _f === void 0 ? false : _f,
|
|
5663
|
-
options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); //
|
|
5663
|
+
options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // renderConfig 추출 (MARKER 모드에서만 존재)
|
|
5664
|
+
|
|
5665
|
+
|
|
5666
|
+
var renderConfig = dataType === exports.CanvasDataType.MARKER ? props.renderConfig : undefined; // --------------------------------------------------------------------------
|
|
5664
5667
|
// Hooks & Context
|
|
5665
5668
|
// --------------------------------------------------------------------------
|
|
5666
5669
|
|
|
5667
|
-
|
|
5668
5670
|
var controller = useMintMapController();
|
|
5669
5671
|
var context = useKonvaMarkerContext();
|
|
5670
5672
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
@@ -5996,7 +5998,8 @@
|
|
|
5996
5998
|
ctx: ctx,
|
|
5997
5999
|
items: visibleMarkers,
|
|
5998
6000
|
selectedIds: selectedIdsRef.current,
|
|
5999
|
-
utils: renderUtils
|
|
6001
|
+
utils: renderUtils,
|
|
6002
|
+
config: renderConfig
|
|
6000
6003
|
});
|
|
6001
6004
|
},
|
|
6002
6005
|
perfectDrawEnabled: false,
|
|
@@ -6026,7 +6029,8 @@
|
|
|
6026
6029
|
layer: layer,
|
|
6027
6030
|
selectedIds: selectedIdsRef.current,
|
|
6028
6031
|
items: markersRef.current,
|
|
6029
|
-
utils: renderUtils
|
|
6032
|
+
utils: renderUtils,
|
|
6033
|
+
config: renderConfig
|
|
6030
6034
|
});
|
|
6031
6035
|
};
|
|
6032
6036
|
/**
|
|
@@ -6067,7 +6071,8 @@
|
|
|
6067
6071
|
hoveredItem: hoveredItemRef.current,
|
|
6068
6072
|
utils: renderUtils,
|
|
6069
6073
|
selectedItems: selectedItems,
|
|
6070
|
-
selectedItem: selectedItemRef.current
|
|
6074
|
+
selectedItem: selectedItemRef.current,
|
|
6075
|
+
config: renderConfig
|
|
6071
6076
|
});
|
|
6072
6077
|
},
|
|
6073
6078
|
perfectDrawEnabled: false,
|
|
@@ -6725,7 +6730,7 @@
|
|
|
6725
6730
|
*
|
|
6726
6731
|
* ## 📊 데이터 형식
|
|
6727
6732
|
* ```typescript
|
|
6728
|
-
* const data:
|
|
6733
|
+
* const data: KonvaCanvasData<T>[] = [
|
|
6729
6734
|
* {
|
|
6730
6735
|
* id: 'unique-id',
|
|
6731
6736
|
* position: new Position(lat, lng),
|