@mint-ui/map 1.2.0-test.6 → 1.2.0-test.60

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.
Files changed (52) hide show
  1. package/.eslintrc.js +11 -4
  2. package/.vscode/settings.json +32 -9
  3. package/CLAUDE.md +0 -1
  4. package/dist/components/mint-map/core/MintMapCore.js +5 -6
  5. package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.d.ts +52 -0
  6. package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js +678 -0
  7. package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/index.d.ts +3 -0
  8. package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.d.ts +273 -0
  9. package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js +621 -0
  10. package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/index.d.ts +3 -0
  11. package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.d.ts +303 -0
  12. package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.js +1091 -0
  13. package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.d.ts +7 -0
  14. package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerClaude.js +7 -7
  15. package/dist/components/mint-map/core/advanced/canvas/index.d.ts +0 -1
  16. package/dist/components/mint-map/core/advanced/index.d.ts +4 -2
  17. package/dist/components/mint-map/core/advanced/shared/context.d.ts +39 -0
  18. package/dist/components/mint-map/core/advanced/shared/context.js +220 -0
  19. package/dist/components/mint-map/core/advanced/shared/helpers.d.ts +20 -0
  20. package/dist/components/mint-map/core/advanced/shared/helpers.js +41 -0
  21. package/dist/components/mint-map/core/advanced/shared/hooks.d.ts +74 -0
  22. package/dist/components/mint-map/core/advanced/shared/hooks.js +196 -0
  23. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/index.d.ts +5 -2
  24. package/dist/components/mint-map/core/advanced/shared/performance.d.ts +77 -0
  25. package/dist/components/mint-map/core/advanced/shared/performance.js +267 -0
  26. package/dist/components/mint-map/core/advanced/shared/types.d.ts +127 -0
  27. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.js +6 -1
  28. package/dist/components/mint-map/core/advanced/shared/utils.d.ts +130 -0
  29. package/dist/components/mint-map/core/advanced/shared/utils.js +311 -0
  30. package/dist/components/mint-map/core/advanced/shared/viewport.d.ts +42 -0
  31. package/dist/components/mint-map/core/advanced/shared/viewport.js +52 -0
  32. package/dist/components/mint-map/google/GoogleMintMapController.js +9 -8
  33. package/dist/components/mint-map/kakao/KakaoMintMapController.js +9 -8
  34. package/dist/components/mint-map/naver/NaverMintMapController.js +9 -8
  35. package/dist/index.es.js +5537 -4393
  36. package/dist/index.js +42 -27
  37. package/dist/index.umd.js +5551 -4395
  38. package/package.json +1 -1
  39. package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.d.ts +0 -22
  40. package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.js +0 -413
  41. package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts +0 -11
  42. package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +0 -52
  43. package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.js +0 -1074
  44. package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
  45. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +0 -31
  46. package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +0 -164
  47. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.d.ts +0 -161
  48. package/dist/components/mint-map/core/advanced/woongCanvas/shared/performance.js +0 -343
  49. package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +0 -131
  50. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +0 -31
  51. package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +0 -164
  52. package/dist/components/mint-map/core/util/geohash.js +0 -125
@@ -0,0 +1,621 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var tslib = require('tslib');
6
+ var Konva = require('konva');
7
+ var React = require('react');
8
+ var reactDom = require('react-dom');
9
+ var renderer = require('./renderer.js');
10
+ var MapDrawables = require('../../../types/MapDrawables.js');
11
+ require('../../../types/MapTypes.js');
12
+ require('../../../types/MapEventTypes.js');
13
+ var MintMapProvider = require('../../provider/MintMapProvider.js');
14
+ var context = require('../shared/context.js');
15
+ var helpers = require('../shared/helpers.js');
16
+ var hooks = require('../shared/hooks.js');
17
+ var performance = require('../shared/performance.js');
18
+ require('../shared/types.js');
19
+ var utils = require('../shared/utils.js');
20
+ var viewport = require('../shared/viewport.js');
21
+
22
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
23
+
24
+ var Konva__default = /*#__PURE__*/_interopDefaultLegacy(Konva);
25
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
26
+
27
+ var CanvasPolygonLayer = function (props) {
28
+ var data = props.data,
29
+ onClick = props.onClick,
30
+ _a = props.enableMultiSelect,
31
+ enableMultiSelect = _a === void 0 ? false : _a,
32
+ _b = props.enableViewportCulling,
33
+ enableViewportCulling = _b === void 0 ? false : _b,
34
+ _c = props.cullingMargin,
35
+ cullingMargin = _c === void 0 ? performance.DEFAULT_CULLING_MARGIN : _c,
36
+ _d = props.maxCacheSize,
37
+ maxCacheSize = _d === void 0 ? performance.DEFAULT_MAX_CACHE_SIZE : _d,
38
+ externalSelectedItems = props.selectedItems,
39
+ externalSelectedItem = props.selectedItem,
40
+ _e = props.disableInteraction,
41
+ disableInteraction = _e === void 0 ? false : _e,
42
+ options = tslib.__rest(props, ["data", "onClick", "enableMultiSelect", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // customStyle은 다른 방식과 함께 사용 가능
43
+
44
+
45
+ var hasCustomStyle = 'customStyle' in props && props.customStyle !== undefined;
46
+ var isObjectMode = 'renderStyle' in props && props.renderStyle !== undefined;
47
+ var isIndividualMode = 'baseFillColor' in props && props.baseFillColor !== undefined; // 각 방식별 props 추출
48
+
49
+ var customStyle = hasCustomStyle ? props.customStyle : undefined;
50
+ var individualProps = isIndividualMode ? props : undefined;
51
+ var objectProps = isObjectMode ? props : undefined; // --------------------------------------------------------------------------
52
+ // Hooks & Context
53
+ // --------------------------------------------------------------------------
54
+
55
+ var controller = MintMapProvider.useMintMapController();
56
+ var context$1 = context.useCanvasContext();
57
+ var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
58
+
59
+ var divRef = React.useRef(document.createElement('div'));
60
+ var divElement = divRef.current;
61
+ var containerRef = React.useRef(null);
62
+ var markerRef = React.useRef(); // Konva Refs
63
+
64
+ var stageRef = React.useRef(null);
65
+ var baseLayerRef = React.useRef(null);
66
+ var eventLayerRef = React.useRef(null); // 상태 관리 Refs (React 리렌더링 최소화)
67
+
68
+ var dataRef = React.useRef(data);
69
+ var disableInteractionRef = React.useRef(disableInteraction);
70
+ var enableViewportCullingRef = React.useRef(enableViewportCulling);
71
+ var hoveredItemRef = React.useRef(null);
72
+ var selectedItemRef = React.useRef(externalSelectedItem);
73
+ var selectedIdsRef = React.useRef(new Set());
74
+ var selectedItemsMapRef = React.useRef(new Map()); // 드래그 상태 Refs
75
+
76
+ var draggingRef = React.useRef(false);
77
+ var prevCenterOffsetRef = React.useRef(null);
78
+ var accumTranslateRef = React.useRef({
79
+ x: 0,
80
+ y: 0
81
+ }); // 드래그 시작 시점의 hover 상태 저장 (드래그 중 hover 고정용)
82
+
83
+ var dragStartHoveredItemRef = React.useRef(null); // 성능 최적화 Refs
84
+
85
+ var offsetCacheRef = React.useRef(new performance.LRUCache(maxCacheSize));
86
+ var spatialIndexRef = React.useRef(new performance.SpatialHashGrid(performance.SPATIAL_GRID_CELL_SIZE));
87
+ var boundingBoxCacheRef = React.useRef(new Map());
88
+ var viewportRef = React.useRef(null); // 폴리곤 좌표 변환 (위경도 → 화면 좌표, LRU 캐시 사용)
89
+
90
+ var getOrComputePolygonOffsets = function (polygonData) {
91
+ var cached = offsetCacheRef.current.get(polygonData.id);
92
+ if (cached && Array.isArray(cached)) return cached;
93
+ var result = utils.computePolygonOffsets(polygonData, controller);
94
+ if (!result) return null;
95
+ offsetCacheRef.current.set(polygonData.id, result);
96
+ return result;
97
+ }; // 폴리곤 바운딩 박스 계산 (Viewport Culling 및 Hit Test용)
98
+
99
+
100
+ var computeBoundingBox = function (item) {
101
+ var offsets = getOrComputePolygonOffsets(item);
102
+ if (!offsets) return null; // 모든 좌표를 순회하며 최소/최대값 찾기
103
+
104
+ var maxX = -Infinity;
105
+ var maxY = -Infinity;
106
+ var minX = Infinity;
107
+ var minY = Infinity;
108
+
109
+ for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
110
+ var multiPolygon = offsets_1[_i];
111
+
112
+ for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
113
+ var polygonGroup = multiPolygon_1[_a];
114
+
115
+ for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
116
+ var _c = polygonGroup_1[_b],
117
+ x = _c[0],
118
+ y = _c[1];
119
+ if (x < minX) minX = x;
120
+ if (y < minY) minY = y;
121
+ if (x > maxX) maxX = x;
122
+ if (y > maxY) maxY = y;
123
+ }
124
+ }
125
+ }
126
+
127
+ return {
128
+ maxX: maxX,
129
+ maxY: maxY,
130
+ minX: minX,
131
+ minY: minY
132
+ };
133
+ }; // 뷰포트 영역 계산 (Viewport Culling용)
134
+
135
+
136
+ var updateViewport = function () {
137
+ viewport.updateViewport(stageRef.current, cullingMargin, viewportRef);
138
+ }; // 뷰포트 내부 여부 확인 (바운딩 박스 캐싱)
139
+
140
+
141
+ var isInViewport = function (item) {
142
+ return viewport.isInViewport(item, viewportRef, boundingBoxCacheRef, computeBoundingBox);
143
+ }; // 공간 인덱스 빌드 (빠른 Hit Test용)
144
+
145
+
146
+ var buildSpatialIndex = function () {
147
+ hooks.buildSpatialIndex(dataRef.current, spatialIndexRef.current, computeBoundingBox);
148
+ }; // 렌더링 유틸리티 객체
149
+
150
+
151
+ var renderUtils = {
152
+ getOrComputeMarkerOffset: function () {
153
+ return null;
154
+ },
155
+ getOrComputePolygonOffsets: getOrComputePolygonOffsets
156
+ }; // 렌더링 함수 생성 (스타일 지정 방식에 따라 분기)
157
+
158
+ var renderBase;
159
+ var renderEvent; // customStyle이 있으면 하이브리드 방식 사용, 없으면 기존 방식 사용
160
+
161
+ if (isObjectMode && objectProps) {
162
+ if (hasCustomStyle) {
163
+ // customStyle + renderStyle 하이브리드
164
+ renderBase = renderer.renderPolygonBaseWithHybridObject(customStyle, objectProps.renderStyle);
165
+ renderEvent = renderer.renderPolygonEventWithHybridObject(customStyle, objectProps.renderStyle);
166
+ } else {
167
+ // renderStyle만 사용
168
+ renderBase = renderer.renderPolygonBaseWithObject(objectProps.renderStyle);
169
+ renderEvent = renderer.renderPolygonEventWithObject(objectProps.renderStyle);
170
+ }
171
+ } else if (isIndividualMode && individualProps) {
172
+ if (hasCustomStyle) {
173
+ // customStyle + 개별 props 하이브리드
174
+ renderBase = renderer.renderPolygonBaseWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
175
+ renderEvent = renderer.renderPolygonEventWithHybrid(customStyle, individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
176
+ } else {
177
+ // 개별 props만 사용
178
+ renderBase = renderer.renderPolygonBase(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth);
179
+ renderEvent = renderer.renderPolygonEvent(individualProps.baseFillColor, individualProps.baseStrokeColor, individualProps.baseLineWidth, individualProps.selectedFillColor, individualProps.selectedStrokeColor, individualProps.selectedLineWidth, individualProps.activeFillColor, individualProps.activeStrokeColor, individualProps.activeLineWidth, individualProps.hoveredFillColor, individualProps.hoveredStrokeColor, individualProps.hoveredLineWidth);
180
+ }
181
+ } else if (hasCustomStyle && customStyle) {
182
+ // customStyle만 사용 (기존 방식)
183
+ renderBase = renderer.renderPolygonBaseWithCustomStyle(customStyle);
184
+ renderEvent = renderer.renderPolygonEventWithCustomStyle(customStyle);
185
+ } else {
186
+ throw new Error('Invalid props: one of customStyle, renderStyle, or individual style props must be provided');
187
+ } // Base Layer 렌더링 (뷰포트 컬링 적용)
188
+
189
+
190
+ var doRenderBase = function () {
191
+ var layer = baseLayerRef.current;
192
+ if (!layer) return;
193
+ var shape = layer.findOne('.base-render-shape');
194
+
195
+ if (!shape) {
196
+ shape = new Konva__default["default"].Shape({
197
+ hitStrokeWidth: 0,
198
+ listening: false,
199
+ name: 'base-render-shape',
200
+ perfectDrawEnabled: false,
201
+ sceneFunc: function (konvaContext) {
202
+ var ctx = konvaContext;
203
+ var hovered = hoveredItemRef.current; // 뷰포트 컬링: 화면에 보이는 항목만 필터링
204
+
205
+ var visibleItems = enableViewportCullingRef.current ? dataRef.current.filter(function (item) {
206
+ return isInViewport(item);
207
+ }) : dataRef.current;
208
+ renderBase({
209
+ ctx: ctx,
210
+ hoveredItem: hovered,
211
+ items: visibleItems,
212
+ selectedIds: selectedIdsRef.current,
213
+ utils: renderUtils
214
+ });
215
+ }
216
+ });
217
+ layer.add(shape);
218
+ }
219
+
220
+ layer.batchDraw();
221
+ }; // Event Layer 렌더링 (hover 효과 및 선택 상태 표시)
222
+
223
+
224
+ var doRenderEvent = function () {
225
+ var layer = eventLayerRef.current;
226
+ if (!layer) return;
227
+ var shape = layer.findOne('.event-render-shape');
228
+
229
+ if (!shape) {
230
+ shape = new Konva__default["default"].Shape({
231
+ hitStrokeWidth: 0,
232
+ listening: false,
233
+ name: 'event-render-shape',
234
+ perfectDrawEnabled: false,
235
+ sceneFunc: function (konvaContext) {
236
+ var ctx = konvaContext;
237
+ var hovered = hoveredItemRef.current;
238
+ var selectedItems = helpers.mapValuesToArray(selectedItemsMapRef.current);
239
+ renderEvent({
240
+ ctx: ctx,
241
+ hoveredItem: hovered,
242
+ selectedItem: selectedItemRef.current,
243
+ selectedItems: selectedItems,
244
+ utils: renderUtils
245
+ });
246
+ }
247
+ });
248
+ layer.add(shape);
249
+ }
250
+
251
+ layer.batchDraw();
252
+ }; // 전체 즉시 렌더링
253
+
254
+
255
+ var renderAllImmediate = function () {
256
+ if (enableViewportCullingRef.current) {
257
+ updateViewport();
258
+ }
259
+
260
+ buildSpatialIndex();
261
+ doRenderBase();
262
+ doRenderEvent();
263
+ }; // 지도 이벤트 핸들러 생성
264
+
265
+
266
+ var _f = hooks.createMapEventHandlers({
267
+ accumTranslateRef: accumTranslateRef,
268
+ boundingBoxCacheRef: boundingBoxCacheRef,
269
+ containerRef: containerRef,
270
+ controller: controller,
271
+ markerRef: markerRef,
272
+ offsetCacheRef: offsetCacheRef,
273
+ options: options,
274
+ prevCenterOffsetRef: prevCenterOffsetRef,
275
+ renderAllImmediate: renderAllImmediate
276
+ }),
277
+ handleIdle = _f.handleIdle,
278
+ handleZoomStart = _f.handleZoomStart,
279
+ handleZoomEnd = _f.handleZoomEnd,
280
+ handleCenterChanged = _f.handleCenterChanged,
281
+ handleDragStartShared = _f.handleDragStart,
282
+ handleDragEndShared = _f.handleDragEnd;
283
+
284
+ var handleDragStart = function () {
285
+ handleDragStartShared(); // 드래그 시작 시점의 hover 상태 저장
286
+
287
+ dragStartHoveredItemRef.current = hoveredItemRef.current;
288
+ draggingRef.current = true;
289
+ controller.setMapCursor('grabbing');
290
+ };
291
+
292
+ var handleDragEnd = function () {
293
+ handleDragEndShared();
294
+ draggingRef.current = false; // 드래그 종료 후 hover 상태 초기화 (다음 MOUSEMOVE에서 업데이트됨)
295
+
296
+ dragStartHoveredItemRef.current = null;
297
+ controller.setMapCursor('grab');
298
+ }; // Hit Test: 특정 좌표의 폴리곤 찾기
299
+
300
+
301
+ var findData = function (offset) {
302
+ // 공간 인덱스에서 후보 항목 조회 (O(1) 수준의 빠른 조회)
303
+ var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 역순 순회: 나중에 추가된 항목(최상위)이 먼저 선택되도록
304
+
305
+ for (var i = candidates.length - 1; i >= 0; i--) {
306
+ var item = candidates[i]; // 정확한 Hit Test: Ray Casting 알고리즘으로 폴리곤 내부 여부 확인
307
+
308
+ if (utils.isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
309
+ return item;
310
+ }
311
+ }
312
+
313
+ return null;
314
+ }; // Hover 상태 설정 및 렌더링
315
+
316
+
317
+ var setHovered = function (hoveredData) {
318
+ // 드래그 중에는 hover 상태 변경을 무시하고 드래그 시작 시점의 상태 유지
319
+ if (draggingRef.current) {
320
+ return;
321
+ }
322
+
323
+ hoveredItemRef.current = hoveredData;
324
+
325
+ if (draggingRef.current) {
326
+ controller.setMapCursor('grabbing');
327
+ } else {
328
+ controller.setMapCursor(hoveredData ? 'pointer' : 'grab');
329
+ }
330
+
331
+ doRenderEvent();
332
+ }; // 클릭 처리: 선택 상태 업데이트
333
+
334
+
335
+ var handleLocalClick = function (clickedData) {
336
+ if (enableMultiSelect) {
337
+ var newSelected = new Set(selectedIdsRef.current);
338
+
339
+ if (newSelected.has(clickedData.id)) {
340
+ newSelected.delete(clickedData.id);
341
+ selectedItemsMapRef.current.delete(clickedData.id);
342
+ } else {
343
+ newSelected.add(clickedData.id);
344
+ selectedItemsMapRef.current.set(clickedData.id, clickedData);
345
+ }
346
+
347
+ selectedIdsRef.current = newSelected;
348
+ } else {
349
+ var newSelected = new Set();
350
+
351
+ if (!selectedIdsRef.current.has(clickedData.id)) {
352
+ newSelected.add(clickedData.id);
353
+ selectedItemsMapRef.current.clear();
354
+ selectedItemsMapRef.current.set(clickedData.id, clickedData);
355
+ } else {
356
+ selectedItemsMapRef.current.clear();
357
+ }
358
+
359
+ selectedIdsRef.current = newSelected;
360
+ } // Event Layer 업데이트 (선택된 항목 표시)
361
+
362
+
363
+ doRenderEvent();
364
+ }; // 클릭 이벤트 핸들러
365
+
366
+
367
+ var handleClick = function (event) {
368
+ if (controller.isMapDragged()) return;
369
+ if (disableInteractionRef.current) return;
370
+ var clickedOffset = helpers.validateEvent(event, context$1, controller);
371
+ if (!clickedOffset) return;
372
+ var clickedData = findData(clickedOffset);
373
+ if (!clickedData) return;
374
+ handleLocalClick(clickedData);
375
+ onClick === null || onClick === void 0 ? void 0 : onClick(clickedData, selectedIdsRef.current);
376
+ }; // 마우스 이동 이벤트 핸들러 (hover 감지)
377
+
378
+
379
+ var handleMouseMove = function (event) {
380
+ if (disableInteractionRef.current) return; // 드래그 중에는 hover 상태를 업데이트하지 않음 (드래그 시작 시점의 hover 상태 유지)
381
+
382
+ if (draggingRef.current) return;
383
+ var mouseOffset = helpers.validateEvent(event, context$1, controller);
384
+ if (!mouseOffset) return;
385
+ var hoveredItem = findData(mouseOffset);
386
+ var prevHovered = hoveredItemRef.current;
387
+ if (prevHovered === hoveredItem) return;
388
+ setHovered(hoveredItem);
389
+ }; // 마우스가 맵 영역을 벗어날 때 hover 상태 초기화
390
+
391
+
392
+ var handleMouseLeave = function () {
393
+ if (disableInteractionRef.current) return;
394
+ var prevHovered = hoveredItemRef.current;
395
+ if (!prevHovered) return;
396
+ hoveredItemRef.current = null;
397
+ controller.setMapCursor('grab');
398
+ doRenderEvent();
399
+ }; // DOM 초기화
400
+
401
+
402
+ React.useEffect(function () {
403
+ divElement.style.width = 'fit-content';
404
+ return function () {
405
+ if (!markerRef.current) return;
406
+ controller.clearDrawable(markerRef.current);
407
+ markerRef.current = undefined;
408
+ };
409
+ }, []); // 마커 생성/업데이트
410
+
411
+ React.useEffect(function () {
412
+ if (!options) return;
413
+ var bounds = controller.getCurrBounds();
414
+
415
+ var markerOptions = tslib.__assign({
416
+ position: bounds.nw
417
+ }, options);
418
+
419
+ if (markerRef.current) {
420
+ controller.updateMarker(markerRef.current, markerOptions);
421
+ return;
422
+ }
423
+
424
+ markerRef.current = new MapDrawables.Marker(markerOptions);
425
+ markerRef.current.element = divElement;
426
+ controller.createMarker(markerRef.current);
427
+
428
+ if (divElement.parentElement) {
429
+ divElement.parentElement.style.pointerEvents = 'none';
430
+ }
431
+
432
+ if (options.zIndex !== undefined) {
433
+ controller.setMarkerZIndex(markerRef.current, options.zIndex);
434
+ }
435
+ }, [options]); // Konva 초기화 및 이벤트 리스너 등록
436
+
437
+ React.useEffect(function () {
438
+ var mapDiv = controller.mapDivElement;
439
+ var stage = new Konva__default["default"].Stage({
440
+ container: containerRef.current,
441
+ height: mapDiv.offsetHeight,
442
+ width: mapDiv.offsetWidth
443
+ });
444
+ stageRef.current = stage;
445
+ var baseLayer = new Konva__default["default"].Layer({
446
+ listening: false
447
+ });
448
+ var eventLayer = new Konva__default["default"].Layer({
449
+ listening: false
450
+ });
451
+ baseLayerRef.current = baseLayer;
452
+ eventLayerRef.current = eventLayer;
453
+ stage.add(baseLayer);
454
+ stage.add(eventLayer);
455
+
456
+ if (enableViewportCulling) {
457
+ updateViewport();
458
+ } // ResizeObserver: 맵 크기 변경 감지 (RAF로 debounce)
459
+
460
+
461
+ var resizeRafId = null;
462
+ var resizeObserver = new ResizeObserver(function () {
463
+ if (resizeRafId !== null) {
464
+ cancelAnimationFrame(resizeRafId);
465
+ }
466
+
467
+ resizeRafId = requestAnimationFrame(function () {
468
+ stage.width(mapDiv.offsetWidth);
469
+ stage.height(mapDiv.offsetHeight);
470
+ offsetCacheRef.current.clear();
471
+ boundingBoxCacheRef.current.clear();
472
+
473
+ if (enableViewportCullingRef.current) {
474
+ updateViewport();
475
+ }
476
+
477
+ renderAllImmediate();
478
+ resizeRafId = null;
479
+ });
480
+ });
481
+ resizeObserver.observe(mapDiv);
482
+ controller.addEventListener('IDLE', handleIdle);
483
+ controller.addEventListener('ZOOMSTART', handleZoomStart);
484
+ controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
485
+ controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
486
+ controller.addEventListener('CLICK', handleClick);
487
+ controller.addEventListener('MOUSEMOVE', handleMouseMove);
488
+ controller.addEventListener('DRAGSTART', handleDragStart);
489
+ controller.addEventListener('DRAGEND', handleDragEnd);
490
+ mapDiv.addEventListener('mouseleave', handleMouseLeave);
491
+ renderAllImmediate(); // Context 사용 시 컴포넌트 등록
492
+
493
+ var componentInstance = null;
494
+
495
+ if (context$1) {
496
+ componentInstance = {
497
+ findData: findData,
498
+ getSelectedIds: function () {
499
+ return selectedIdsRef.current;
500
+ },
501
+ handleLocalClick: handleLocalClick,
502
+ hitTest: function (offset) {
503
+ return findData(offset) !== null;
504
+ },
505
+ isInteractionDisabled: function () {
506
+ return disableInteractionRef.current;
507
+ },
508
+ onClick: onClick,
509
+ setHovered: setHovered,
510
+ zIndex: currentZIndex
511
+ };
512
+ context$1.registerComponent(componentInstance);
513
+ }
514
+
515
+ return function () {
516
+ if (resizeRafId !== null) {
517
+ cancelAnimationFrame(resizeRafId);
518
+ }
519
+
520
+ resizeObserver.disconnect();
521
+ controller.removeEventListener('IDLE', handleIdle);
522
+ controller.removeEventListener('ZOOMSTART', handleZoomStart);
523
+ controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
524
+ controller.removeEventListener('CENTER_CHANGED', handleCenterChanged);
525
+ controller.removeEventListener('CLICK', handleClick);
526
+ controller.removeEventListener('MOUSEMOVE', handleMouseMove);
527
+ controller.removeEventListener('DRAGSTART', handleDragStart);
528
+ controller.removeEventListener('DRAGEND', handleDragEnd);
529
+ mapDiv.removeEventListener('mouseleave', handleMouseLeave);
530
+
531
+ if (context$1 && componentInstance) {
532
+ context$1.unregisterComponent(componentInstance);
533
+ }
534
+
535
+ baseLayer.destroyChildren();
536
+ eventLayer.destroyChildren();
537
+ stage.destroy();
538
+ offsetCacheRef.current.clear();
539
+ boundingBoxCacheRef.current.clear();
540
+ spatialIndexRef.current.clear();
541
+ };
542
+ }, []); // disableInteraction 동기화
543
+
544
+ React.useEffect(function () {
545
+ disableInteractionRef.current = disableInteraction;
546
+ }, [disableInteraction]); // enableViewportCulling 동기화
547
+
548
+ React.useEffect(function () {
549
+ enableViewportCullingRef.current = enableViewportCulling;
550
+
551
+ if (stageRef.current) {
552
+ // 뷰포트 컬링 설정이 변경되면 shape 재생성 필요
553
+ var baseLayer = baseLayerRef.current;
554
+
555
+ if (baseLayer) {
556
+ var shape = baseLayer.findOne('.base-render-shape');
557
+
558
+ if (shape) {
559
+ shape.destroy();
560
+ }
561
+ }
562
+
563
+ var eventLayer = eventLayerRef.current;
564
+
565
+ if (eventLayer) {
566
+ var shape = eventLayer.findOne('.event-render-shape');
567
+
568
+ if (shape) {
569
+ shape.destroy();
570
+ }
571
+ }
572
+
573
+ renderAllImmediate();
574
+ }
575
+ }, [enableViewportCulling]); // 외부 selectedItems 동기화
576
+
577
+ React.useEffect(function () {
578
+ if (!stageRef.current) return;
579
+ hooks.syncExternalSelectedItems(externalSelectedItems, selectedIdsRef, selectedItemsMapRef);
580
+ doRenderBase();
581
+ doRenderEvent();
582
+ }, [externalSelectedItems]); // 외부 selectedItem 변경 시 Event Layer 리렌더링
583
+
584
+ React.useEffect(function () {
585
+ if (!stageRef.current) return;
586
+ selectedItemRef.current = externalSelectedItem;
587
+ doRenderEvent();
588
+ }, [externalSelectedItem]); // 데이터 변경 시 렌더링 (캐시 정리 및 선택 상태 동기화)
589
+
590
+ React.useEffect(function () {
591
+ if (!stageRef.current) return;
592
+ dataRef.current = data;
593
+
594
+ if (containerRef.current) {
595
+ containerRef.current.style.transform = '';
596
+ }
597
+
598
+ prevCenterOffsetRef.current = null;
599
+ accumTranslateRef.current = {
600
+ x: 0,
601
+ y: 0
602
+ };
603
+ offsetCacheRef.current.clear();
604
+ boundingBoxCacheRef.current.clear();
605
+ selectedItemsMapRef.current = hooks.syncSelectedItems(data, selectedIdsRef.current, selectedItemsMapRef.current);
606
+ renderAllImmediate();
607
+ }, [data]);
608
+ return reactDom.createPortal(React__default["default"].createElement("div", {
609
+ ref: containerRef,
610
+ style: {
611
+ height: '100%',
612
+ position: 'absolute',
613
+ width: '100%'
614
+ }
615
+ }), divElement);
616
+ };
617
+
618
+ exports.CanvasProvider = context.CanvasProvider;
619
+ exports.LRUCache = performance.LRUCache;
620
+ exports.SpatialHashGrid = performance.SpatialHashGrid;
621
+ exports["default"] = CanvasPolygonLayer;
@@ -0,0 +1,3 @@
1
+ export * from '../shared';
2
+ export * from './CanvasPolygonLayer';
3
+ export { default as CanvasPolygonLayer } from './CanvasPolygonLayer';