@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/components/mint-map/core/MintMapCore.js +1 -2
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +162 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js} +260 -208
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +2 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.d.ts +8 -7
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/context.js +6 -2
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +61 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +234 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/types.d.ts +109 -12
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +37 -7
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +107 -9
- package/dist/components/mint-map/google/GoogleMintMapController.js +2 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +2 -1
- package/dist/components/mint-map/naver/NaverMintMapController.js +2 -1
- package/dist/index.es.js +594 -217
- package/dist/index.js +4 -1
- package/dist/index.umd.js +596 -216
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/ClusterMarker.d.ts +0 -11
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +0 -50
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
|
-
|
|
871
|
-
var
|
|
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
|
-
|
|
874
|
-
|
|
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 =
|
|
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
|
-
*
|
|
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
|
-
*
|
|
5332
|
-
*
|
|
5333
|
-
*
|
|
5334
|
-
* - Viewport Culling으로 보이는 영역만 렌더링
|
|
5504
|
+
* @param baseFillColor 기본 폴리곤 채우기 색상
|
|
5505
|
+
* @param baseStrokeColor 기본 폴리곤 테두리 색상
|
|
5506
|
+
* @param baseLineWidth 기본 폴리곤 테두리 두께
|
|
5507
|
+
* @returns Base Layer 렌더링 함수
|
|
5335
5508
|
*
|
|
5336
|
-
* @
|
|
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
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
|
|
5343
|
-
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
|
|
5357
|
-
|
|
5358
|
-
|
|
5359
|
-
|
|
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
|
-
/**
|
|
5699
|
+
/** data prop을 ref로 추적 (stale closure 방지, useEffect에서 동기화) */
|
|
5385
5700
|
|
|
5386
|
-
var
|
|
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
|
|
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
|
-
|
|
5480
|
-
|
|
5481
|
-
|
|
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
|
|
5922
|
+
var currentData = dataRef.current;
|
|
5583
5923
|
|
|
5584
|
-
for (var _i = 0,
|
|
5585
|
-
var item =
|
|
5924
|
+
for (var _i = 0, currentData_1 = currentData; _i < currentData_1.length; _i++) {
|
|
5925
|
+
var item = currentData_1[_i]; // 바운딩 박스 계산 (공통 함수 사용)
|
|
5586
5926
|
|
|
5587
|
-
|
|
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
|
-
|
|
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;
|
|
5986
|
+
var ctx = context;
|
|
5987
|
+
var hovered = hoveredItemRef.current; // 클로저로 최신 ref 값 참조
|
|
5671
5988
|
|
|
5672
|
-
var
|
|
5989
|
+
var visibleItems = enableViewportCulling ? dataRef.current.filter(function (item) {
|
|
5673
5990
|
return isInViewport(item);
|
|
5674
|
-
}) :
|
|
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:
|
|
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:
|
|
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;
|
|
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
|
-
|
|
5739
|
-
|
|
5740
|
-
|
|
5741
|
-
|
|
5742
|
-
|
|
5743
|
-
|
|
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 상태 설정 및
|
|
6288
|
+
* Hover 상태 설정 및 레이어 렌더링
|
|
5914
6289
|
*
|
|
5915
6290
|
* @param data hover된 마커/폴리곤 데이터 또는 null
|
|
5916
6291
|
*
|
|
5917
6292
|
* 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
|
|
5918
|
-
*
|
|
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
|
-
|
|
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
|
-
//
|
|
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
|
|
6386
|
+
var data_1 = findData(clickedOffset);
|
|
6004
6387
|
|
|
6005
|
-
if (
|
|
6006
|
-
handleLocalClick(
|
|
6007
|
-
|
|
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; //
|
|
6662
|
+
if (!stageRef.current) return; // Ref 동기화
|
|
6262
6663
|
|
|
6263
|
-
|
|
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
|
-
*
|
|
6691
|
+
* data가 변경되면 selectedItemsMapRef도 업데이트 필요
|
|
6281
6692
|
* (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
|
|
6282
6693
|
*
|
|
6283
|
-
* 🔥 중요: 화면 밖
|
|
6284
|
-
* - 현재
|
|
6694
|
+
* 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
|
|
6695
|
+
* - 현재 data에 있으면 최신 데이터로 업데이트
|
|
6285
6696
|
* - 없으면 기존 selectedItemsMapRef의 데이터 유지
|
|
6286
6697
|
*
|
|
6287
|
-
* 최적화:
|
|
6288
|
-
* - O(전체
|
|
6698
|
+
* 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
|
|
6699
|
+
* - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
|
|
6289
6700
|
*/
|
|
6290
6701
|
|
|
6291
|
-
var
|
|
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
|
-
// 현재
|
|
6297
|
-
var currentItem =
|
|
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
|
-
}, [
|
|
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 };
|