@mint-ui/map 1.2.0-test.3 → 1.2.0-test.31

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/index.es.js CHANGED
@@ -860,18 +860,67 @@ var isPointInPolygon = function (point, polygon) {
860
860
  return inside;
861
861
  };
862
862
  /**
863
- * 폴리곤 히트 테스트
863
+ * 폴리곤 히트 테스트 (도넛 폴리곤 지원)
864
+ *
865
+ * 로직:
866
+ * 1. 외부 폴리곤(첫 번째): 내부에 있어야 함
867
+ * 2. 내부 구멍들(나머지): 내부에 있으면 안 됨 (evenodd 규칙)
868
+ *
869
+ * 중요: 도넛 폴리곤과 내부 폴리곤은 별개의 polygonData로 처리됨
870
+ * - 도넛 폴리곤 A: isDonutPolygon=true
871
+ * - 내부 폴리곤 B: isDonutPolygon=false (별도 데이터)
864
872
  */
865
873
 
866
874
  var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffsets) {
867
875
  var polygonOffsets = getPolygonOffsets(polygonData);
868
- if (!polygonOffsets) return false;
876
+ if (!polygonOffsets) return false; // 🍩 도넛 폴리곤 처리 (isDonutPolygon === true)
869
877
 
870
- for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
871
- var multiPolygon = polygonOffsets_1[_i];
878
+ if (polygonData.isDonutPolygon) {
879
+ for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
880
+ var multiPolygon = polygonOffsets_1[_i];
881
+ if (multiPolygon.length === 0) continue; // 외부 폴리곤만 있는 경우 (구멍 없음) - 일반 폴리곤처럼 처리
882
+
883
+ if (multiPolygon.length === 1) {
884
+ if (isPointInPolygon(clickedOffset, multiPolygon[0])) {
885
+ return true;
886
+ }
887
+
888
+ continue;
889
+ } // 1. 외부 폴리곤(첫 번째)에 포함되는지 확인
890
+
891
+
892
+ var outerPolygon = multiPolygon[0];
893
+
894
+ if (!isPointInPolygon(clickedOffset, outerPolygon)) {
895
+ continue; // 외부 폴리곤 밖이면 다음 multiPolygon 확인
896
+ } // 2. 내부 구멍들(나머지)에 포함되는지 확인
897
+
898
+
899
+ for (var i = 1; i < multiPolygon.length; i++) {
900
+ var hole = multiPolygon[i];
901
+
902
+ if (isPointInPolygon(clickedOffset, hole)) {
903
+ // ❌ 구멍 안에 있음 → 이 도넛 폴리곤은 히트 안 됨
904
+ // 다른 multiPolygon 체크하지 않고 바로 false 반환
905
+ // (도넛 폴리곤의 구멍 안은 무조건 클릭 불가)
906
+ return false;
907
+ }
908
+ } // ✅ 외부 폴리곤 안 + 구멍 밖 = 히트!
872
909
 
873
- for (var _a = 0, multiPolygon_2 = multiPolygon; _a < multiPolygon_2.length; _a++) {
874
- var polygonGroup = multiPolygon_2[_a];
910
+
911
+ return true;
912
+ }
913
+
914
+ return false;
915
+ } // 일반 폴리곤 처리 (isDonutPolygon === false 또는 undefined)
916
+
917
+
918
+ for (var _a = 0, polygonOffsets_2 = polygonOffsets; _a < polygonOffsets_2.length; _a++) {
919
+ var multiPolygon = polygonOffsets_2[_a];
920
+
921
+ for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
922
+ var polygonGroup = multiPolygon_2[_b];
923
+ if (polygonGroup.length === 0) continue;
875
924
 
876
925
  if (isPointInPolygon(clickedOffset, polygonGroup)) {
877
926
  return true;
@@ -882,7 +931,12 @@ var isPointInPolygonData = function (clickedOffset, polygonData, getPolygonOffse
882
931
  return false;
883
932
  };
884
933
  /**
885
- * 마커 히트 테스트
934
+ * 마커 히트 테스트 (클릭/hover 영역 체크)
935
+ *
936
+ * 🎯 중요: 꼬리(tail)는 Hit Test 영역에서 제외됩니다!
937
+ * - markerOffset.y는 마커 최하단(꼬리 끝) 좌표
938
+ * - boxHeight는 마커 본체만 포함 (꼬리 제외)
939
+ * - tailHeight만큼 위로 올려서 본체만 Hit Test 영역으로 사용
886
940
  */
887
941
 
888
942
  var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset) {
@@ -890,11 +944,53 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
890
944
  if (!markerOffset) return false;
891
945
  var boxWidth = markerData.boxWidth || 50;
892
946
  var boxHeight = markerData.boxHeight || 28;
893
- var tailHeight = 6;
947
+ var tailHeight = markerData.tailHeight || 0; // 🎯 tailHeight 사용!
948
+
894
949
  var x = markerOffset.x - boxWidth / 2;
895
- var y = markerOffset.y - boxHeight - tailHeight;
950
+ var y = markerOffset.y - boxHeight - tailHeight; // 🔥 꼬리만큼 위로!
951
+
896
952
  return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
897
953
  };
954
+ var hexToRgba = function (hexColor, alpha) {
955
+ if (alpha === void 0) {
956
+ alpha = 1;
957
+ } // NOTE: 입력된 hexColor에서 "#" 제거
958
+
959
+
960
+ var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
961
+
962
+ if (hex.length === 6) {
963
+ var r = parseInt(hex.substring(0, 2), 16);
964
+ var g = parseInt(hex.substring(2, 4), 16);
965
+ var b = parseInt(hex.substring(4, 6), 16);
966
+ return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
967
+ }
968
+
969
+ throw new Error('Invalid hex color format');
970
+ };
971
+ var tempCanvas = document.createElement('canvas');
972
+ var tempCtx = tempCanvas.getContext('2d');
973
+ /**
974
+ * 텍스트 박스의 너비를 계산합니다.
975
+ *
976
+ * @param {Object} params - 파라미터 객체
977
+ * @param {string} params.text - 측정할 텍스트
978
+ * @param {string} params.fontConfig - 폰트 설정 (예: 'bold 16px Arial')
979
+ * @param {number} params.padding - 텍스트 박스에 적용할 패딩 값
980
+ * @param {number} params.minWidth - 최소 너비
981
+ * @returns {number} 계산된 텍스트 박스의 너비
982
+ */
983
+
984
+ var calculateTextBoxWidth = function (_a) {
985
+ var text = _a.text,
986
+ fontConfig = _a.fontConfig,
987
+ padding = _a.padding,
988
+ minWidth = _a.minWidth;
989
+ if (!tempCtx) return 0;
990
+ tempCtx.font = fontConfig;
991
+ var textWidth = tempCtx.measureText(text).width;
992
+ return Math.max(minWidth, textWidth + padding);
993
+ };
898
994
 
899
995
  var KonvaMarkerContext = createContext(null);
900
996
  var KonvaMarkerProvider = function (_a) {
@@ -942,7 +1038,9 @@ var KonvaMarkerProvider = function (_a) {
942
1038
  var clickedOffset = controller.positionToOffset(event.param.position); // zIndex 순서대로 순회 (높은 것부터)
943
1039
 
944
1040
  for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
945
- var component = _b[_i];
1041
+ var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
1042
+
1043
+ if (component.isInteractionDisabled()) continue;
946
1044
  var data = component.findData(clickedOffset);
947
1045
 
948
1046
  if (data) {
@@ -970,7 +1068,9 @@ var KonvaMarkerProvider = function (_a) {
970
1068
  var newHoveredData = null;
971
1069
 
972
1070
  for (var _i = 0, _b = componentsRef.current; _i < _b.length; _i++) {
973
- var component = _b[_i];
1071
+ var component = _b[_i]; // 🚫 상호작용이 비활성화된 컴포넌트는 스킵
1072
+
1073
+ if (component.isInteractionDisabled()) continue;
974
1074
  var data = component.findData(mouseOffset);
975
1075
 
976
1076
  if (data) {
@@ -5321,42 +5421,257 @@ function LoadingImage(_a) {
5321
5421
  }))));
5322
5422
  }
5323
5423
 
5324
- // 메인 컴포넌트
5325
- // ============================================================================
5424
+ /**
5425
+ * 폴리곤 렌더링 유틸리티
5426
+ *
5427
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
5428
+ */
5326
5429
 
5327
5430
  /**
5328
- * Konva 기반 고성능 마커/폴리곤 렌더링 컴포넌트
5431
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
5432
+ */
5433
+ var drawPolygon = function (_a) {
5434
+ var ctx = _a.ctx,
5435
+ polygonOffsets = _a.polygonOffsets,
5436
+ isDonutPolygon = _a.isDonutPolygon,
5437
+ fillColor = _a.fillColor,
5438
+ strokeColor = _a.strokeColor,
5439
+ lineWidth = _a.lineWidth;
5440
+
5441
+ for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
5442
+ var multiPolygon = polygonOffsets_1[_i];
5443
+
5444
+ if (isDonutPolygon) {
5445
+ ctx.beginPath(); // 1. 외부 폴리곤 그리기
5446
+
5447
+ if (multiPolygon[0] && multiPolygon[0].length > 0) {
5448
+ ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
5449
+
5450
+ for (var i = 1; i < multiPolygon[0].length; i++) {
5451
+ ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
5452
+ }
5453
+
5454
+ ctx.closePath();
5455
+ } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
5456
+
5457
+
5458
+ for (var j = 1; j < multiPolygon.length; j++) {
5459
+ var innerPolygon = multiPolygon[j];
5460
+ if (innerPolygon.length === 0) continue;
5461
+ ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
5462
+
5463
+ for (var i = 1; i < innerPolygon.length; i++) {
5464
+ ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
5465
+ }
5466
+
5467
+ ctx.closePath();
5468
+ } // 3. evenodd fill rule로 구멍 뚫기
5469
+
5470
+
5471
+ ctx.fillStyle = fillColor;
5472
+ ctx.fill('evenodd'); // 4. 외곽선 그리기
5473
+
5474
+ ctx.strokeStyle = strokeColor;
5475
+ ctx.lineWidth = lineWidth;
5476
+ ctx.stroke();
5477
+ } else {
5478
+ // 일반 폴리곤
5479
+ for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
5480
+ var polygonGroup = multiPolygon_1[_b];
5481
+ if (!polygonGroup.length) continue;
5482
+ ctx.beginPath();
5483
+ var firstPoint = polygonGroup[0];
5484
+ ctx.moveTo(firstPoint[0], firstPoint[1]);
5485
+
5486
+ for (var i = 1; i < polygonGroup.length; i++) {
5487
+ var point = polygonGroup[i];
5488
+ ctx.lineTo(point[0], point[1]);
5489
+ }
5490
+
5491
+ ctx.closePath();
5492
+ ctx.fillStyle = fillColor;
5493
+ ctx.strokeStyle = strokeColor;
5494
+ ctx.lineWidth = lineWidth;
5495
+ ctx.fill();
5496
+ ctx.stroke();
5497
+ }
5498
+ }
5499
+ }
5500
+ };
5501
+ /**
5502
+ * 폴리곤 Base 렌더링 함수
5329
5503
  *
5330
- * 특징:
5331
- * - Base/Event 레이어 분리로 성능 최적화
5332
- * - LRU 캐시로 좌표 변환 결과 캐싱
5333
- * - Spatial Hash Grid로 빠른 Hit Test
5334
- * - Viewport Culling으로 보이는 영역만 렌더링
5504
+ * @param baseFillColor 기본 폴리곤 채우기 색상
5505
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
5506
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
5507
+ * @returns Base Layer 렌더링 함수
5335
5508
  *
5336
- * @template T 마커 데이터의 추가 속성 타입
5509
+ * @example
5510
+ * const renderBase = renderPolygonBase(
5511
+ * 'rgba(255, 100, 100, 0.5)',
5512
+ * 'rgba(200, 50, 50, 0.8)',
5513
+ * 2
5514
+ * );
5337
5515
  */
5338
5516
 
5339
- var WoongKonvaMarkerComponent = function (_a) {
5340
- var markers = _a.markers,
5341
- dataType = _a.dataType,
5342
- onClick = _a.onClick,
5343
- onMouseOver = _a.onMouseOver,
5344
- onMouseOut = _a.onMouseOut,
5345
- renderBase = _a.renderBase,
5346
- renderAnimation = _a.renderAnimation,
5347
- renderEvent = _a.renderEvent,
5348
- _b = _a.enableMultiSelect,
5349
- enableMultiSelect = _b === void 0 ? false : _b,
5350
- _c = _a.topOnHover,
5351
- topOnHover = _c === void 0 ? false : _c,
5352
- _d = _a.enableViewportCulling,
5353
- enableViewportCulling = _d === void 0 ? true : _d,
5354
- _e = _a.cullingMargin,
5355
- cullingMargin = _e === void 0 ? DEFAULT_CULLING_MARGIN : _e,
5356
- _f = _a.maxCacheSize,
5357
- maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
5358
- externalSelectedItems = _a.selectedItems,
5359
- options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems"]); // --------------------------------------------------------------------------
5517
+ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
5518
+ return function (_a) {
5519
+ var ctx = _a.ctx,
5520
+ items = _a.items,
5521
+ selectedIds = _a.selectedIds,
5522
+ utils = _a.utils;
5523
+
5524
+ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
5525
+ var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
5526
+
5527
+ if (selectedIds.has(item.id)) continue;
5528
+ if (!item.paths) continue;
5529
+ var polygonOffsets = utils.getOrComputePolygonOffsets(item);
5530
+ if (!polygonOffsets) continue;
5531
+ drawPolygon({
5532
+ ctx: ctx,
5533
+ polygonOffsets: polygonOffsets,
5534
+ isDonutPolygon: item.isDonutPolygon || false,
5535
+ fillColor: baseFillColor,
5536
+ strokeColor: baseStrokeColor,
5537
+ lineWidth: baseLineWidth
5538
+ });
5539
+ }
5540
+ };
5541
+ };
5542
+ /**
5543
+ * 폴리곤 Event 렌더링 함수
5544
+ *
5545
+ * @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
5546
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
5547
+ * @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
5548
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
5549
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
5550
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
5551
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
5552
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
5553
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
5554
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
5555
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
5556
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
5557
+ * @returns Event Layer 렌더링 함수
5558
+ *
5559
+ * @example
5560
+ * const renderEvent = renderPolygonEvent(
5561
+ * 'rgba(255, 100, 100, 0.5)', // baseFillColor
5562
+ * 'rgba(200, 50, 50, 0.8)', // baseStrokeColor
5563
+ * 2, // baseLineWidth
5564
+ * 'rgba(255, 193, 7, 0.7)', // selectedFillColor
5565
+ * 'rgba(255, 152, 0, 1)', // selectedStrokeColor
5566
+ * 4 // selectedLineWidth
5567
+ * );
5568
+ */
5569
+
5570
+ var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
5571
+ // 기본값 설정 (base 기준)
5572
+ var _selectedFillColor = selectedFillColor || baseFillColor;
5573
+
5574
+ var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
5575
+
5576
+ var _selectedLineWidth = selectedLineWidth || baseLineWidth;
5577
+
5578
+ var _activeFillColor = activeFillColor || _selectedFillColor;
5579
+
5580
+ var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
5581
+
5582
+ var _activeLineWidth = activeLineWidth || _selectedLineWidth;
5583
+
5584
+ var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
5585
+
5586
+ var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
5587
+
5588
+ var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
5589
+
5590
+ return function (_a) {
5591
+ var ctx = _a.ctx,
5592
+ hoveredItem = _a.hoveredItem,
5593
+ utils = _a.utils,
5594
+ selectedItems = _a.selectedItems,
5595
+ selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
5596
+
5597
+ if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
5598
+ for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
5599
+ var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
5600
+
5601
+ if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
5602
+ if (!item.paths) continue;
5603
+ var polygonOffsets = utils.getOrComputePolygonOffsets(item);
5604
+ if (!polygonOffsets) continue;
5605
+ drawPolygon({
5606
+ ctx: ctx,
5607
+ polygonOffsets: polygonOffsets,
5608
+ isDonutPolygon: item.isDonutPolygon || false,
5609
+ fillColor: _selectedFillColor,
5610
+ strokeColor: _selectedStrokeColor,
5611
+ lineWidth: _selectedLineWidth
5612
+ });
5613
+ }
5614
+ } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
5615
+
5616
+
5617
+ if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
5618
+ var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
5619
+
5620
+ if (polygonOffsets) {
5621
+ drawPolygon({
5622
+ ctx: ctx,
5623
+ polygonOffsets: polygonOffsets,
5624
+ isDonutPolygon: selectedItem.isDonutPolygon || false,
5625
+ fillColor: _activeFillColor,
5626
+ strokeColor: _activeStrokeColor,
5627
+ lineWidth: _activeLineWidth
5628
+ });
5629
+ }
5630
+ } // 3. 호버된 항목 그리기 (가장 위에 표시)
5631
+
5632
+
5633
+ if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
5634
+ var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
5635
+ if (!polygonOffsets) return;
5636
+ var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
5637
+ return item.id === hoveredItem.id;
5638
+ });
5639
+ drawPolygon({
5640
+ ctx: ctx,
5641
+ polygonOffsets: polygonOffsets,
5642
+ isDonutPolygon: hoveredItem.isDonutPolygon || false,
5643
+ fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
5644
+ strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
5645
+ lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
5646
+ });
5647
+ }
5648
+ };
5649
+ };
5650
+
5651
+ // 메인 컴포넌트
5652
+ // ============================================================================
5653
+
5654
+ var WoongCanvasLayer = function (props) {
5655
+ var data = props.data,
5656
+ dataType = props.dataType,
5657
+ onClick = props.onClick,
5658
+ onMouseOver = props.onMouseOver,
5659
+ onMouseOut = props.onMouseOut,
5660
+ _a = props.enableMultiSelect,
5661
+ enableMultiSelect = _a === void 0 ? false : _a,
5662
+ _b = props.topOnHover,
5663
+ topOnHover = _b === void 0 ? false : _b,
5664
+ _c = props.enableViewportCulling,
5665
+ enableViewportCulling = _c === void 0 ? true : _c,
5666
+ _d = props.cullingMargin,
5667
+ cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
5668
+ _e = props.maxCacheSize,
5669
+ maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
5670
+ externalSelectedItems = props.selectedItems,
5671
+ externalSelectedItem = props.selectedItem,
5672
+ _f = props.disableInteraction,
5673
+ disableInteraction = _f === void 0 ? false : _f,
5674
+ options = __rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
5360
5675
  // Hooks & Context
5361
5676
  // --------------------------------------------------------------------------
5362
5677
 
@@ -5381,18 +5696,21 @@ var WoongKonvaMarkerComponent = function (_a) {
5381
5696
  // Data Refs - 선택 및 Hover 상태 관리
5382
5697
  // --------------------------------------------------------------------------
5383
5698
 
5384
- /** markers prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
5699
+ /** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
5385
5700
 
5386
- var markersRef = useRef(markers); // --------------------------------------------------------------------------
5701
+ var dataRef = useRef(data); // --------------------------------------------------------------------------
5387
5702
  // State Refs - 선택 및 Hover 상태 관리
5388
5703
  // --------------------------------------------------------------------------
5389
5704
 
5705
+ /** 상호작용 비활성화 상태 (Ref로 관리하여 클로저 문제 해결) */
5706
+
5707
+ var disableInteractionRef = useRef(disableInteraction);
5390
5708
  /** 현재 Hover 중인 항목 */
5391
5709
 
5392
5710
  var hoveredItemRef = useRef(null);
5393
- /** 마지막으로 클릭된 항목 */
5711
+ /** 외부에서 전달된 선택 항목 (Ref로 관리하여 클로저 문제 해결) */
5394
5712
 
5395
- var lastClickedItemRef = useRef(null);
5713
+ var selectedItemRef = useRef(externalSelectedItem);
5396
5714
  /**
5397
5715
  * 선택된 항목의 ID Set
5398
5716
  *
@@ -5475,55 +5793,11 @@ var WoongKonvaMarkerComponent = function (_a) {
5475
5793
  var bbox = boundingBoxCacheRef.current.get(item.id);
5476
5794
 
5477
5795
  if (!bbox) {
5478
- // 폴리곤인 경우
5479
- if (dataType === CanvasDataType.POLYGON) {
5480
- var offsets = getOrComputePolygonOffsets(item);
5481
- if (!offsets) return false; // 바운딩 박스 계산 (최적화: 직접 비교)
5482
-
5483
- var minX = Infinity,
5484
- minY = Infinity,
5485
- maxX = -Infinity,
5486
- maxY = -Infinity;
5487
-
5488
- for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
5489
- var multiPolygon = offsets_1[_i];
5490
-
5491
- for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
5492
- var polygonGroup = multiPolygon_1[_a];
5493
-
5494
- for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
5495
- var _c = polygonGroup_1[_b],
5496
- x = _c[0],
5497
- y = _c[1];
5498
- if (x < minX) minX = x;
5499
- if (y < minY) minY = y;
5500
- if (x > maxX) maxX = x;
5501
- if (y > maxY) maxY = y;
5502
- }
5503
- }
5504
- }
5505
-
5506
- bbox = {
5507
- minX: minX,
5508
- minY: minY,
5509
- maxX: maxX,
5510
- maxY: maxY
5511
- };
5512
- boundingBoxCacheRef.current.set(item.id, bbox);
5513
- } // 마커인 경우
5514
- else {
5515
- var offset = getOrComputeMarkerOffset(item);
5516
- if (!offset) return false;
5517
- var boxWidth = item.boxWidth || 50;
5518
- var boxHeight = item.boxHeight || 28;
5519
- bbox = {
5520
- minX: offset.x - boxWidth / 2,
5521
- minY: offset.y - boxHeight - 6,
5522
- maxX: offset.x + boxWidth / 2,
5523
- maxY: offset.y
5524
- };
5525
- boundingBoxCacheRef.current.set(item.id, bbox);
5526
- }
5796
+ // 바운딩 박스 계산 (공통 함수 사용)
5797
+ var computed = computeBoundingBox(item);
5798
+ if (!computed) return false;
5799
+ bbox = computed;
5800
+ boundingBoxCacheRef.current.set(item.id, bbox);
5527
5801
  } // 바운딩 박스와 viewport 교차 체크
5528
5802
 
5529
5803
 
@@ -5552,6 +5826,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5552
5826
  };
5553
5827
  /**
5554
5828
  * 마커 좌표 변환 결과를 캐시하고 반환
5829
+ *
5555
5830
  * @param markerData 마커 데이터
5556
5831
  * @returns 변환된 좌표 또는 null
5557
5832
  */
@@ -5568,6 +5843,71 @@ var WoongKonvaMarkerComponent = function (_a) {
5568
5843
 
5569
5844
  return result;
5570
5845
  }; // --------------------------------------------------------------------------
5846
+ // 유틸리티 함수: 바운딩 박스 계산
5847
+ // --------------------------------------------------------------------------
5848
+
5849
+ /**
5850
+ * 아이템의 바운딩 박스 계산 (폴리곤/마커 공통)
5851
+ *
5852
+ * 🎯 마커의 경우:
5853
+ * - boxHeight: 본체만 (Hit Test 영역)
5854
+ * - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
5855
+ *
5856
+ * @param item 마커 또는 폴리곤 데이터
5857
+ * @returns 바운딩 박스 또는 null
5858
+ */
5859
+
5860
+
5861
+ var computeBoundingBox = function (item) {
5862
+ if (dataType === CanvasDataType.POLYGON) {
5863
+ // 폴리곤: 모든 좌표의 최소/최대값 계산
5864
+ var offsets = getOrComputePolygonOffsets(item);
5865
+ if (!offsets) return null;
5866
+ var minX = Infinity,
5867
+ minY = Infinity,
5868
+ maxX = -Infinity,
5869
+ maxY = -Infinity;
5870
+
5871
+ for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
5872
+ var multiPolygon = offsets_1[_i];
5873
+
5874
+ for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
5875
+ var polygonGroup = multiPolygon_1[_a];
5876
+
5877
+ for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
5878
+ var _c = polygonGroup_1[_b],
5879
+ x = _c[0],
5880
+ y = _c[1];
5881
+ if (x < minX) minX = x;
5882
+ if (y < minY) minY = y;
5883
+ if (x > maxX) maxX = x;
5884
+ if (y > maxY) maxY = y;
5885
+ }
5886
+ }
5887
+ }
5888
+
5889
+ return {
5890
+ minX: minX,
5891
+ minY: minY,
5892
+ maxX: maxX,
5893
+ maxY: maxY
5894
+ };
5895
+ } else {
5896
+ // 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
5897
+ var offset = getOrComputeMarkerOffset(item);
5898
+ if (!offset) return null;
5899
+ var boxWidth = item.boxWidth || 50;
5900
+ var boxHeight = item.boxHeight || 28;
5901
+ var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
5902
+
5903
+ return {
5904
+ minX: offset.x - boxWidth / 2,
5905
+ minY: offset.y - boxHeight - tailHeight,
5906
+ maxX: offset.x + boxWidth / 2,
5907
+ maxY: offset.y
5908
+ };
5909
+ }
5910
+ }; // --------------------------------------------------------------------------
5571
5911
  // 유틸리티 함수: 공간 인덱싱
5572
5912
  // --------------------------------------------------------------------------
5573
5913
 
@@ -5579,59 +5919,19 @@ var WoongKonvaMarkerComponent = function (_a) {
5579
5919
  var buildSpatialIndex = function () {
5580
5920
  var spatial = spatialIndexRef.current;
5581
5921
  spatial.clear();
5582
- var currentMarkers = markersRef.current;
5922
+ var currentData = dataRef.current;
5583
5923
 
5584
- for (var _i = 0, currentMarkers_1 = currentMarkers; _i < currentMarkers_1.length; _i++) {
5585
- var item = currentMarkers_1[_i];
5924
+ for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
5925
+ var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
5586
5926
 
5587
- if (dataType === CanvasDataType.POLYGON) {
5588
- // 폴리곤: 바운딩 박스 계산 (최적화: 직접 비교)
5589
- var offsets = getOrComputePolygonOffsets(item);
5590
-
5591
- if (offsets) {
5592
- var minX = Infinity,
5593
- minY = Infinity,
5594
- maxX = -Infinity,
5595
- maxY = -Infinity;
5596
-
5597
- for (var _a = 0, offsets_2 = offsets; _a < offsets_2.length; _a++) {
5598
- var multiPolygon = offsets_2[_a];
5599
-
5600
- for (var _b = 0, multiPolygon_2 = multiPolygon; _b < multiPolygon_2.length; _b++) {
5601
- var polygonGroup = multiPolygon_2[_b];
5602
-
5603
- for (var _c = 0, polygonGroup_2 = polygonGroup; _c < polygonGroup_2.length; _c++) {
5604
- var _d = polygonGroup_2[_c],
5605
- x = _d[0],
5606
- y = _d[1];
5607
- if (x < minX) minX = x;
5608
- if (y < minY) minY = y;
5609
- if (x > maxX) maxX = x;
5610
- if (y > maxY) maxY = y;
5611
- }
5612
- }
5613
- }
5927
+ var bbox = computeBoundingBox(item);
5614
5928
 
5615
- spatial.insert(item, minX, minY, maxX, maxY);
5616
- }
5617
- } else {
5618
- // 마커: 점 기반 바운딩 박스
5619
- var offset = getOrComputeMarkerOffset(item);
5620
-
5621
- if (offset) {
5622
- var boxWidth = item.boxWidth || 50;
5623
- var boxHeight = item.boxHeight || 28;
5624
- var tailHeight = 6;
5625
- var minX = offset.x - boxWidth / 2;
5626
- var minY = offset.y - boxHeight - tailHeight;
5627
- var maxX = offset.x + boxWidth / 2;
5628
- var maxY = offset.y;
5629
- spatial.insert(item, minX, minY, maxX, maxY);
5630
- }
5929
+ if (bbox) {
5930
+ spatial.insert(item, bbox.minX, bbox.minY, bbox.maxX, bbox.maxY);
5631
5931
  }
5632
5932
  }
5633
5933
  }; // --------------------------------------------------------------------------
5634
- // 렌더링 함수
5934
+ // 렌더링 함수 결정 (dataType에 따라)
5635
5935
  // --------------------------------------------------------------------------
5636
5936
 
5637
5937
  /**
@@ -5646,6 +5946,18 @@ var WoongKonvaMarkerComponent = function (_a) {
5646
5946
  /** Base Layer에서 사용할 빈 Set (재사용) */
5647
5947
 
5648
5948
  useRef(new Set());
5949
+ /**
5950
+ * 실제 사용할 렌더링 함수 결정
5951
+ * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
5952
+ * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
5953
+ */
5954
+
5955
+ var renderBase = dataType === CanvasDataType.MARKER ? props.renderBase : renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
5956
+ var renderAnimation = dataType === CanvasDataType.MARKER ? props.renderAnimation : undefined;
5957
+ var renderEvent = dataType === CanvasDataType.MARKER ? props.renderEvent : function () {
5958
+ var polygonProps = props;
5959
+ return 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);
5960
+ }();
5649
5961
  /**
5650
5962
  * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
5651
5963
  *
@@ -5653,6 +5965,10 @@ var WoongKonvaMarkerComponent = function (_a) {
5653
5965
  * 1. Shape 재사용으로 객체 생성/파괴 오버헤드 제거
5654
5966
  * 2. sceneFunc 한 번만 설정 (함수 재생성 제거)
5655
5967
  * 3. 클로저로 최신 데이터 참조
5968
+ *
5969
+ * 🎯 topOnHover 지원:
5970
+ * - renderEvent가 없을 때 Base Layer에서 hover 처리 (fallback)
5971
+ * - renderEvent가 있으면 Event Layer에서 처리 (성능 최적화)
5656
5972
  */
5657
5973
 
5658
5974
  var doRenderBase = function () {
@@ -5667,17 +5983,42 @@ var WoongKonvaMarkerComponent = function (_a) {
5667
5983
  shape = new Konva.Shape({
5668
5984
  name: 'base-render-shape',
5669
5985
  sceneFunc: function (context, shape) {
5670
- var ctx = context; // 클로저로 최신 ref 값 참조
5986
+ var ctx = context;
5987
+ var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
5671
5988
 
5672
- var visibleMarkers = enableViewportCulling ? markersRef.current.filter(function (item) {
5989
+ var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
5673
5990
  return isInViewport(item);
5674
- }) : markersRef.current;
5991
+ }) : dataRef.current; // topOnHover가 true이고 renderEvent가 없으면 Base Layer에서 hover 처리
5992
+
5993
+ if (topOnHover && !renderEvent && hovered) {
5994
+ // hover된 항목 제외하고 렌더링
5995
+ visibleItems = visibleItems.filter(function (item) {
5996
+ return item.id !== hovered.id;
5997
+ });
5998
+ } // 일반 항목 렌더링
5999
+
6000
+
5675
6001
  renderBase({
5676
6002
  ctx: ctx,
5677
- items: visibleMarkers,
6003
+ items: visibleItems,
5678
6004
  selectedIds: selectedIdsRef.current,
6005
+ hoveredItem: hovered,
5679
6006
  utils: renderUtils
5680
- });
6007
+ }); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
6008
+
6009
+ if (topOnHover && !renderEvent && hovered) {
6010
+ var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
6011
+
6012
+ if (isHoveredInViewport) {
6013
+ renderBase({
6014
+ ctx: ctx,
6015
+ items: [hovered],
6016
+ selectedIds: selectedIdsRef.current,
6017
+ hoveredItem: hovered,
6018
+ utils: renderUtils
6019
+ });
6020
+ }
6021
+ }
5681
6022
  },
5682
6023
  perfectDrawEnabled: false,
5683
6024
  listening: false,
@@ -5705,7 +6046,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5705
6046
  renderAnimation({
5706
6047
  layer: layer,
5707
6048
  selectedIds: selectedIdsRef.current,
5708
- items: markersRef.current,
6049
+ items: dataRef.current,
5709
6050
  utils: renderUtils
5710
6051
  });
5711
6052
  };
@@ -5720,9 +6061,9 @@ var WoongKonvaMarkerComponent = function (_a) {
5720
6061
 
5721
6062
 
5722
6063
  var doRenderEvent = function () {
5723
- if (!renderEvent) return;
5724
6064
  var layer = eventLayerRef.current;
5725
- if (!layer) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
6065
+ if (!layer) return;
6066
+ if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
5726
6067
 
5727
6068
  var shape = layer.findOne('.event-render-shape');
5728
6069
 
@@ -5735,13 +6076,47 @@ var WoongKonvaMarkerComponent = function (_a) {
5735
6076
  var ctx = context; // 클로저로 최신 ref 값 참조
5736
6077
 
5737
6078
  var selectedItems = Array.from(selectedItemsMapRef.current.values());
5738
- renderEvent({
5739
- ctx: ctx,
5740
- hoveredItem: hoveredItemRef.current,
5741
- utils: renderUtils,
5742
- selectedItems: selectedItems,
5743
- lastClickedItem: lastClickedItemRef.current
5744
- });
6079
+ var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
6080
+
6081
+ if (topOnHover && hovered) {
6082
+ // 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
6083
+ renderEvent({
6084
+ ctx: ctx,
6085
+ hoveredItem: null,
6086
+ utils: renderUtils,
6087
+ selectedItems: selectedItems.filter(function (item) {
6088
+ return item.id !== hovered.id;
6089
+ }),
6090
+ selectedItem: selectedItemRef.current
6091
+ }); // 2. hover된 항목을 최상단에 렌더링
6092
+
6093
+ var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
6094
+
6095
+ if (isHoveredInViewport) {
6096
+ // hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서
6097
+ // renderEvent에서 hover 스타일만 적용되도록 함
6098
+ var hoveredIsSelected = selectedItems.some(function (item) {
6099
+ return item.id === hovered.id;
6100
+ });
6101
+ var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
6102
+ renderEvent({
6103
+ ctx: ctx,
6104
+ hoveredItem: hovered,
6105
+ utils: renderUtils,
6106
+ selectedItems: hoverSelectedItems,
6107
+ selectedItem: selectedItemRef.current
6108
+ });
6109
+ }
6110
+ } else {
6111
+ // topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
6112
+ renderEvent({
6113
+ ctx: ctx,
6114
+ hoveredItem: hovered,
6115
+ utils: renderUtils,
6116
+ selectedItems: selectedItems,
6117
+ selectedItem: selectedItemRef.current
6118
+ });
6119
+ }
5745
6120
  },
5746
6121
  perfectDrawEnabled: false,
5747
6122
  listening: false,
@@ -5910,12 +6285,15 @@ var WoongKonvaMarkerComponent = function (_a) {
5910
6285
  return null;
5911
6286
  };
5912
6287
  /**
5913
- * Hover 상태 설정 및 Event 레이어 렌더링
6288
+ * Hover 상태 설정 및 레이어 렌더링
5914
6289
  *
5915
6290
  * @param data hover된 마커/폴리곤 데이터 또는 null
5916
6291
  *
5917
6292
  * 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
5918
- * topOnHover가 true일 때는 Base 레이어도 다시 그려서 z-order 변경
6293
+ *
6294
+ * 🎯 topOnHover 지원:
6295
+ * - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
6296
+ * - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
5919
6297
  */
5920
6298
 
5921
6299
 
@@ -5927,10 +6305,15 @@ var WoongKonvaMarkerComponent = function (_a) {
5927
6305
  } else {
5928
6306
  controller.setMapCursor(data ? 'pointer' : 'grab');
5929
6307
  } // 즉시 렌더링 (RAF 없이)
5930
- // topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
5931
6308
 
5932
6309
 
5933
- doRenderEvent();
6310
+ if (renderEvent) {
6311
+ // renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
6312
+ doRenderEvent();
6313
+ } else if (topOnHover) {
6314
+ // renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
6315
+ doRenderBase();
6316
+ }
5934
6317
  };
5935
6318
  /**
5936
6319
  * 클릭 처리 (단일/다중 선택)
@@ -5944,9 +6327,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5944
6327
 
5945
6328
 
5946
6329
  var handleLocalClick = function (data) {
5947
- // 0. 마지막 클릭 항목 저장
5948
- lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
5949
-
6330
+ // 1. 선택 상태 업데이트
5950
6331
  if (enableMultiSelect) {
5951
6332
  // 다중 선택: Set과 Map 동시 업데이트
5952
6333
  var newSelected = new Set(selectedIdsRef.current);
@@ -5996,15 +6377,20 @@ var WoongKonvaMarkerComponent = function (_a) {
5996
6377
  var handleClick = function (event) {
5997
6378
  var _a;
5998
6379
 
6380
+ if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
6381
+
5999
6382
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6000
6383
 
6001
6384
  try {
6002
6385
  var clickedOffset = controller.positionToOffset(event.param.position);
6003
- var data = findData(clickedOffset);
6386
+ var data_1 = findData(clickedOffset);
6004
6387
 
6005
- if (data) {
6006
- handleLocalClick(data);
6007
- if (onClick) onClick(data, selectedIdsRef.current);
6388
+ if (data_1) {
6389
+ handleLocalClick(data_1);
6390
+
6391
+ if (onClick) {
6392
+ onClick(data_1, selectedIdsRef.current);
6393
+ }
6008
6394
  }
6009
6395
  } catch (error) {
6010
6396
  console.error('[WoongKonvaMarker] handleClick error:', error);
@@ -6018,6 +6404,8 @@ var WoongKonvaMarkerComponent = function (_a) {
6018
6404
  var handleMouseMove = function (event) {
6019
6405
  var _a;
6020
6406
 
6407
+ if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
6408
+
6021
6409
  if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
6022
6410
 
6023
6411
  try {
@@ -6058,6 +6446,8 @@ var WoongKonvaMarkerComponent = function (_a) {
6058
6446
 
6059
6447
 
6060
6448
  var handleMouseLeave = function () {
6449
+ if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
6450
+
6061
6451
  var prevHovered = hoveredItemRef.current;
6062
6452
 
6063
6453
  if (prevHovered) {
@@ -6192,7 +6582,11 @@ var WoongKonvaMarkerComponent = function (_a) {
6192
6582
  handleLocalClick: handleLocalClick,
6193
6583
  getSelectedIds: function () {
6194
6584
  return selectedIdsRef.current;
6195
- }
6585
+ },
6586
+ isInteractionDisabled: function () {
6587
+ return disableInteractionRef.current;
6588
+ } // 🚫 상호작용 비활성화 여부 반환
6589
+
6196
6590
  };
6197
6591
  context.registerComponent(componentInstance);
6198
6592
  } // Cleanup 함수
@@ -6231,7 +6625,14 @@ var WoongKonvaMarkerComponent = function (_a) {
6231
6625
  boundingBoxCacheRef.current.clear();
6232
6626
  spatialIndexRef.current.clear();
6233
6627
  };
6234
- }, []); // --------------------------------------------------------------------------
6628
+ }, []); // 초기화는 한 번만
6629
+ // --------------------------------------------------------------------------
6630
+ // Lifecycle: disableInteraction 동기화
6631
+ // --------------------------------------------------------------------------
6632
+
6633
+ useEffect(function () {
6634
+ disableInteractionRef.current = disableInteraction;
6635
+ }, [disableInteraction]); // --------------------------------------------------------------------------
6235
6636
  // Lifecycle: 외부 selectedItems 동기화
6236
6637
  // --------------------------------------------------------------------------
6237
6638
 
@@ -6254,13 +6655,23 @@ var WoongKonvaMarkerComponent = function (_a) {
6254
6655
  doRenderEvent();
6255
6656
  }, [externalSelectedItems]); // 배열 자체를 dependency로 사용
6256
6657
  // --------------------------------------------------------------------------
6257
- // Lifecycle: 마커 데이터 변경 시 렌더링
6658
+ // Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
6258
6659
  // --------------------------------------------------------------------------
6259
6660
 
6260
6661
  useEffect(function () {
6261
- if (!stageRef.current) return; // markersRef 동기화
6662
+ if (!stageRef.current) return; // Ref 동기화
6262
6663
 
6263
- markersRef.current = markers; // 데이터 변경 즉시 transform 제거 및 캐시 정리 (겹침 방지)
6664
+ selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
6665
+
6666
+ doRenderEvent();
6667
+ }, [externalSelectedItem]); // --------------------------------------------------------------------------
6668
+ // Lifecycle: 데이터 변경 시 렌더링
6669
+ // --------------------------------------------------------------------------
6670
+
6671
+ useEffect(function () {
6672
+ if (!stageRef.current) return; // dataRef 동기화
6673
+
6674
+ dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
6264
6675
 
6265
6676
  if (containerRef.current) {
6266
6677
  containerRef.current.style.transform = '';
@@ -6277,24 +6688,24 @@ var WoongKonvaMarkerComponent = function (_a) {
6277
6688
  /**
6278
6689
  * 선택 상태 동기화 (최적화 버전)
6279
6690
  *
6280
- * markers가 변경되면 selectedItemsMapRef도 업데이트 필요
6691
+ * data가 변경되면 selectedItemsMapRef도 업데이트 필요
6281
6692
  * (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
6282
6693
  *
6283
- * 🔥 중요: 화면 밖 마커도 선택 상태 유지!
6284
- * - 현재 markers에 있으면 최신 데이터로 업데이트
6694
+ * 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
6695
+ * - 현재 data에 있으면 최신 데이터로 업데이트
6285
6696
  * - 없으면 기존 selectedItemsMapRef의 데이터 유지
6286
6697
  *
6287
- * 최적화: markers를 Map으로 먼저 변환하여 find() 순회 제거
6288
- * - O(전체 마커 수 + 선택된 개수) - 매우 효율적
6698
+ * 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
6699
+ * - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
6289
6700
  */
6290
6701
 
6291
- var markersMap = new Map(markers.map(function (m) {
6702
+ var dataMap = new Map(data.map(function (m) {
6292
6703
  return [m.id, m];
6293
6704
  }));
6294
6705
  var newSelectedItemsMap = new Map();
6295
6706
  selectedIdsRef.current.forEach(function (id) {
6296
- // 현재 markers에 있으면 최신 데이터 사용
6297
- var currentItem = markersMap.get(id);
6707
+ // 현재 data에 있으면 최신 데이터 사용
6708
+ var currentItem = dataMap.get(id);
6298
6709
 
6299
6710
  if (currentItem) {
6300
6711
  newSelectedItemsMap.set(id, currentItem);
@@ -6306,12 +6717,12 @@ var WoongKonvaMarkerComponent = function (_a) {
6306
6717
  newSelectedItemsMap.set(id, prevItem);
6307
6718
  }
6308
6719
  }
6309
- }); // selectedIdsRef는 그대로 유지 (화면 밖 마커도 선택 상태 유지)
6720
+ }); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
6310
6721
 
6311
6722
  selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
6312
6723
 
6313
6724
  renderAllImmediate();
6314
- }, [markers]);
6725
+ }, [data]);
6315
6726
  return createPortal(React.createElement("div", {
6316
6727
  ref: containerRef,
6317
6728
  style: {
@@ -6321,40 +6732,6 @@ var WoongKonvaMarkerComponent = function (_a) {
6321
6732
  }
6322
6733
  }), divElement);
6323
6734
  };
6324
- /**
6325
- * 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
6326
- *
6327
- * 비교 전략:
6328
- * 1. markers 배열 비교
6329
- * 2. selectedItems 배열 비교 (외부 제어)
6330
- *
6331
- * 주의: JSON.stringify() 사용 금지! (매우 느림)
6332
- */
6333
-
6334
-
6335
- React.memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
6336
- // 1. markers 비교
6337
- var prevMarkers = prevProps.markers;
6338
- var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
6339
-
6340
- if (prevMarkers !== nextMarkers) {
6341
- // 길이가 다르면 변경됨
6342
- if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
6343
-
6344
- for (var i = 0; i < prevMarkers.length; i++) {
6345
- if (prevMarkers[i].id !== nextMarkers[i].id) {
6346
- return false; // 변경됨 → 리렌더링
6347
- }
6348
- }
6349
- } // 2. selectedItems 비교 (참조만 비교)
6350
-
6351
-
6352
- if (prevProps.selectedItems !== nextProps.selectedItems) {
6353
- return false; // 변경됨 → 리렌더링
6354
- }
6355
-
6356
- return true; // 같음 → 리렌더링 스킵
6357
- });
6358
6735
 
6359
6736
  var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n position: absolute;\n z-index: 1;\n}";
6360
6737
  var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-map-control-wrapper-container__DONh7","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
@@ -9187,4 +9564,4 @@ function MintMap(_a) {
9187
9564
  }), loading));
9188
9565
  }
9189
9566
 
9190
- export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };
9567
+ export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasLayer, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };