@mint-ui/map 1.2.0-test.15 → 1.2.0-test.17
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 +12 -17
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js +78 -241
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +14 -12
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +29 -21
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +16 -72
- package/dist/components/mint-map/google/GoogleMintMapController.js +1 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +1 -1
- package/dist/components/mint-map/naver/NaverMintMapController.js +1 -1
- package/dist/index.es.js +107 -262
- package/dist/index.umd.js +107 -262
- package/package.json +1 -1
|
@@ -142,11 +142,8 @@ export interface RenderUtils<T> {
|
|
|
142
142
|
}
|
|
143
143
|
/**
|
|
144
144
|
* 커스텀 렌더링 함수 파라미터 - Base Layer
|
|
145
|
-
*
|
|
146
|
-
* @template T 데이터 타입
|
|
147
|
-
* @template C 설정(Config) 타입 (선택)
|
|
148
145
|
*/
|
|
149
|
-
export interface RenderBaseParams<T
|
|
146
|
+
export interface RenderBaseParams<T> {
|
|
150
147
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
151
148
|
ctx: CanvasRenderingContext2D;
|
|
152
149
|
/** 렌더링할 마커 데이터 배열 */
|
|
@@ -155,56 +152,26 @@ export interface RenderBaseParams<T, C = any> {
|
|
|
155
152
|
selectedIds: Set<string>;
|
|
156
153
|
/** 렌더링 유틸리티 함수들 */
|
|
157
154
|
utils: RenderUtils<T>;
|
|
158
|
-
/** 렌더링 설정 (색상, 표시 여부, 모양 등) */
|
|
159
|
-
config?: C;
|
|
160
155
|
}
|
|
161
156
|
/**
|
|
162
157
|
* 커스텀 렌더링 함수 타입 - Base Layer
|
|
163
158
|
*
|
|
164
159
|
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
165
160
|
*
|
|
166
|
-
* @template T 데이터 타입
|
|
167
|
-
* @template C 설정(Config) 타입 - 렌더링 옵션 (색상, 표시 여부, 모양 등)
|
|
168
|
-
*
|
|
169
161
|
* @example
|
|
170
|
-
*
|
|
171
|
-
* const renderBase: CustomRenderBase<Marker> = ({ ctx, items, selectedIds, utils }) => {
|
|
162
|
+
* const renderBase = ({ ctx, items, selectedIds, utils }) => {
|
|
172
163
|
* for (const item of items) {
|
|
173
164
|
* if (selectedIds.has(item.id)) continue;
|
|
174
165
|
* const pos = utils.getOrComputeMarkerOffset(item);
|
|
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();
|
|
166
|
+
* ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
|
|
197
167
|
* }
|
|
198
168
|
* };
|
|
199
169
|
*/
|
|
200
|
-
export declare type CustomRenderBase<T
|
|
170
|
+
export declare type CustomRenderBase<T> = (params: RenderBaseParams<T>) => void;
|
|
201
171
|
/**
|
|
202
172
|
* 커스텀 렌더링 함수 파라미터 - Animation Layer
|
|
203
|
-
*
|
|
204
|
-
* @template T 데이터 타입
|
|
205
|
-
* @template C 설정(Config) 타입 (선택)
|
|
206
173
|
*/
|
|
207
|
-
export interface RenderAnimationParams<T
|
|
174
|
+
export interface RenderAnimationParams<T> {
|
|
208
175
|
/** Konva Layer 인스턴스 */
|
|
209
176
|
layer: Konva.Layer;
|
|
210
177
|
/** 현재 선택된 마커 ID Set */
|
|
@@ -213,35 +180,23 @@ export interface RenderAnimationParams<T, C = any> {
|
|
|
213
180
|
items: KonvaCanvasData<T>[];
|
|
214
181
|
/** 렌더링 유틸리티 함수들 */
|
|
215
182
|
utils: RenderUtils<T>;
|
|
216
|
-
/** 렌더링 설정 (애니메이션 속도, 효과 등) */
|
|
217
|
-
config?: C;
|
|
218
183
|
}
|
|
219
184
|
/**
|
|
220
185
|
* 커스텀 렌더링 함수 타입 - Animation Layer (선택)
|
|
221
186
|
*
|
|
222
|
-
* @template T 데이터 타입
|
|
223
|
-
* @template C 설정(Config) 타입 - 애니메이션 옵션
|
|
224
|
-
*
|
|
225
187
|
* @example
|
|
226
|
-
*
|
|
227
|
-
*
|
|
228
|
-
*
|
|
229
|
-
*
|
|
230
|
-
*
|
|
231
|
-
*
|
|
232
|
-
* const renderAnimation: CustomRenderAnimation<Marker, AnimationConfig> = ({ layer, selectedIds, items, config, utils }) => {
|
|
233
|
-
* const bounceHeight = config?.bounceHeight || 15;
|
|
234
|
-
* // Konva 애니메이션 구현
|
|
188
|
+
* const renderAnimation = ({ layer, selectedIds, items, utils }) => {
|
|
189
|
+
* for (const id of selectedIds) {
|
|
190
|
+
* const item = items.find(i => i.id === id);
|
|
191
|
+
* // Konva 애니메이션 구현
|
|
192
|
+
* }
|
|
235
193
|
* };
|
|
236
194
|
*/
|
|
237
|
-
export declare type CustomRenderAnimation<T
|
|
195
|
+
export declare type CustomRenderAnimation<T> = (params: RenderAnimationParams<T>) => void;
|
|
238
196
|
/**
|
|
239
197
|
* 커스텀 렌더링 함수 파라미터 - Event Layer
|
|
240
|
-
*
|
|
241
|
-
* @template T 데이터 타입
|
|
242
|
-
* @template C 설정(Config) 타입 (선택)
|
|
243
198
|
*/
|
|
244
|
-
export interface RenderEventParams<T
|
|
199
|
+
export interface RenderEventParams<T> {
|
|
245
200
|
/** Canvas 2D 렌더링 컨텍스트 (순수 Canvas API) */
|
|
246
201
|
ctx: CanvasRenderingContext2D;
|
|
247
202
|
/** 현재 hover된 마커 데이터 */
|
|
@@ -252,30 +207,19 @@ export interface RenderEventParams<T, C = any> {
|
|
|
252
207
|
selectedItems?: KonvaCanvasData<T>[];
|
|
253
208
|
/** 외부에서 전달된 단일 선택 아이템 (특별한 효과용) */
|
|
254
209
|
selectedItem?: KonvaCanvasData<T> | null;
|
|
255
|
-
/** 렌더링 설정 (hover 색상, 선택 효과 등) */
|
|
256
|
-
config?: C;
|
|
257
210
|
}
|
|
258
211
|
/**
|
|
259
212
|
* 커스텀 렌더링 함수 타입 - Event Layer
|
|
260
213
|
*
|
|
261
214
|
* 🔥 순수 Canvas API 사용 (Konva 지식 불필요!)
|
|
262
215
|
*
|
|
263
|
-
* @template T 데이터 타입
|
|
264
|
-
* @template C 설정(Config) 타입 - 이벤트 렌더링 옵션
|
|
265
|
-
*
|
|
266
216
|
* @example
|
|
267
|
-
*
|
|
268
|
-
* interface EventRenderConfig {
|
|
269
|
-
* hoverColor: string;
|
|
270
|
-
* selectedColor: string;
|
|
271
|
-
* }
|
|
272
|
-
*
|
|
273
|
-
* const renderEvent: CustomRenderEvent<Marker, EventRenderConfig> = ({ ctx, hoveredItem, config, utils }) => {
|
|
217
|
+
* const renderEvent = ({ ctx, hoveredItem, utils, selectedItems }) => {
|
|
274
218
|
* if (hoveredItem) {
|
|
275
219
|
* const pos = utils.getOrComputeMarkerOffset(hoveredItem);
|
|
276
|
-
* ctx.fillStyle =
|
|
277
|
-
* ctx.fillRect(pos.x, pos.y, 50, 50);
|
|
220
|
+
* ctx.fillStyle = 'red';
|
|
221
|
+
* ctx.fillRect(pos.x, pos.y, 50, 50); // 순수 Canvas API!
|
|
278
222
|
* }
|
|
279
223
|
* };
|
|
280
224
|
*/
|
|
281
|
-
export declare type CustomRenderEvent<T
|
|
225
|
+
export declare type CustomRenderEvent<T> = (params: RenderEventParams<T>) => void;
|
|
@@ -20,7 +20,7 @@ var polygon = require('../core/util/polygon.js');
|
|
|
20
20
|
require('../naver/NaverMintMapController.js');
|
|
21
21
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
22
22
|
require('../core/advanced/MapLoadingComponents.js');
|
|
23
|
-
require('
|
|
23
|
+
require('konva');
|
|
24
24
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
25
25
|
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
26
26
|
require('../core/advanced/woongCanvas/shared/context.js');
|
|
@@ -21,7 +21,7 @@ var polygon = require('../core/util/polygon.js');
|
|
|
21
21
|
require('../naver/NaverMintMapController.js');
|
|
22
22
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
23
23
|
require('../core/advanced/MapLoadingComponents.js');
|
|
24
|
-
require('
|
|
24
|
+
require('konva');
|
|
25
25
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
26
26
|
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
27
27
|
require('../core/advanced/woongCanvas/shared/context.js');
|
|
@@ -20,7 +20,7 @@ require('../core/util/geo.js');
|
|
|
20
20
|
var polygon = require('../core/util/polygon.js');
|
|
21
21
|
require('../core/advanced/canvas/CanvasMarkerClaude.js');
|
|
22
22
|
require('../core/advanced/MapLoadingComponents.js');
|
|
23
|
-
require('
|
|
23
|
+
require('konva');
|
|
24
24
|
require('../core/advanced/woongCanvas/shared/types.js');
|
|
25
25
|
require('../core/advanced/woongCanvas/shared/utils.js');
|
|
26
26
|
require('../core/advanced/woongCanvas/shared/context.js');
|