@mint-ui/map 1.2.0-test.3 → 1.2.0-test.30
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} +258 -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 +107 -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 +592 -217
- package/dist/index.js +4 -1
- package/dist/index.umd.js +594 -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
|
+
*/
|
|
5429
|
+
|
|
5430
|
+
/**
|
|
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에 추가
|
|
5326
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
|
+
};
|
|
5327
5501
|
/**
|
|
5328
|
-
*
|
|
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,40 @@ 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,
|
|
5679
6005
|
utils: renderUtils
|
|
5680
|
-
});
|
|
6006
|
+
}); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
|
|
6007
|
+
|
|
6008
|
+
if (topOnHover && !renderEvent && hovered) {
|
|
6009
|
+
var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
|
|
6010
|
+
|
|
6011
|
+
if (isHoveredInViewport) {
|
|
6012
|
+
renderBase({
|
|
6013
|
+
ctx: ctx,
|
|
6014
|
+
items: [hovered],
|
|
6015
|
+
selectedIds: selectedIdsRef.current,
|
|
6016
|
+
utils: renderUtils
|
|
6017
|
+
});
|
|
6018
|
+
}
|
|
6019
|
+
}
|
|
5681
6020
|
},
|
|
5682
6021
|
perfectDrawEnabled: false,
|
|
5683
6022
|
listening: false,
|
|
@@ -5705,7 +6044,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5705
6044
|
renderAnimation({
|
|
5706
6045
|
layer: layer,
|
|
5707
6046
|
selectedIds: selectedIdsRef.current,
|
|
5708
|
-
items:
|
|
6047
|
+
items: dataRef.current,
|
|
5709
6048
|
utils: renderUtils
|
|
5710
6049
|
});
|
|
5711
6050
|
};
|
|
@@ -5720,9 +6059,9 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5720
6059
|
|
|
5721
6060
|
|
|
5722
6061
|
var doRenderEvent = function () {
|
|
5723
|
-
if (!renderEvent) return;
|
|
5724
6062
|
var layer = eventLayerRef.current;
|
|
5725
|
-
if (!layer) return;
|
|
6063
|
+
if (!layer) return;
|
|
6064
|
+
if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
|
|
5726
6065
|
|
|
5727
6066
|
var shape = layer.findOne('.event-render-shape');
|
|
5728
6067
|
|
|
@@ -5735,13 +6074,47 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5735
6074
|
var ctx = context; // 클로저로 최신 ref 값 참조
|
|
5736
6075
|
|
|
5737
6076
|
var selectedItems = Array.from(selectedItemsMapRef.current.values());
|
|
5738
|
-
|
|
5739
|
-
|
|
5740
|
-
|
|
5741
|
-
|
|
5742
|
-
|
|
5743
|
-
|
|
5744
|
-
|
|
6077
|
+
var hovered = hoveredItemRef.current; // topOnHover가 true이면 hover된 항목을 최상단에 렌더링
|
|
6078
|
+
|
|
6079
|
+
if (topOnHover && hovered) {
|
|
6080
|
+
// 1. 먼저 일반 항목들 렌더링 (hover된 항목 제외)
|
|
6081
|
+
renderEvent({
|
|
6082
|
+
ctx: ctx,
|
|
6083
|
+
hoveredItem: null,
|
|
6084
|
+
utils: renderUtils,
|
|
6085
|
+
selectedItems: selectedItems.filter(function (item) {
|
|
6086
|
+
return item.id !== hovered.id;
|
|
6087
|
+
}),
|
|
6088
|
+
selectedItem: selectedItemRef.current
|
|
6089
|
+
}); // 2. hover된 항목을 최상단에 렌더링
|
|
6090
|
+
|
|
6091
|
+
var isHoveredInViewport = enableViewportCulling ? isInViewport(hovered) : true;
|
|
6092
|
+
|
|
6093
|
+
if (isHoveredInViewport) {
|
|
6094
|
+
// hover된 항목이 선택되어 있다면 hoverSelectedItems에 포함시켜서
|
|
6095
|
+
// renderEvent에서 hover 스타일만 적용되도록 함
|
|
6096
|
+
var hoveredIsSelected = selectedItems.some(function (item) {
|
|
6097
|
+
return item.id === hovered.id;
|
|
6098
|
+
});
|
|
6099
|
+
var hoverSelectedItems = hoveredIsSelected ? [hovered] : [];
|
|
6100
|
+
renderEvent({
|
|
6101
|
+
ctx: ctx,
|
|
6102
|
+
hoveredItem: hovered,
|
|
6103
|
+
utils: renderUtils,
|
|
6104
|
+
selectedItems: hoverSelectedItems,
|
|
6105
|
+
selectedItem: selectedItemRef.current
|
|
6106
|
+
});
|
|
6107
|
+
}
|
|
6108
|
+
} else {
|
|
6109
|
+
// topOnHover가 false이거나 hover된 항목이 없으면 일반 렌더링
|
|
6110
|
+
renderEvent({
|
|
6111
|
+
ctx: ctx,
|
|
6112
|
+
hoveredItem: hovered,
|
|
6113
|
+
utils: renderUtils,
|
|
6114
|
+
selectedItems: selectedItems,
|
|
6115
|
+
selectedItem: selectedItemRef.current
|
|
6116
|
+
});
|
|
6117
|
+
}
|
|
5745
6118
|
},
|
|
5746
6119
|
perfectDrawEnabled: false,
|
|
5747
6120
|
listening: false,
|
|
@@ -5910,12 +6283,15 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5910
6283
|
return null;
|
|
5911
6284
|
};
|
|
5912
6285
|
/**
|
|
5913
|
-
* Hover 상태 설정 및
|
|
6286
|
+
* Hover 상태 설정 및 레이어 렌더링
|
|
5914
6287
|
*
|
|
5915
6288
|
* @param data hover된 마커/폴리곤 데이터 또는 null
|
|
5916
6289
|
*
|
|
5917
6290
|
* 최적화: RAF 제거하여 즉시 렌더링 (16ms 지연 제거)
|
|
5918
|
-
*
|
|
6291
|
+
*
|
|
6292
|
+
* 🎯 topOnHover 지원:
|
|
6293
|
+
* - renderEvent가 있으면: Event Layer에서만 처리 (성능 최적화)
|
|
6294
|
+
* - renderEvent가 없고 topOnHover=true면: Base Layer에서 처리
|
|
5919
6295
|
*/
|
|
5920
6296
|
|
|
5921
6297
|
|
|
@@ -5927,10 +6303,15 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5927
6303
|
} else {
|
|
5928
6304
|
controller.setMapCursor(data ? 'pointer' : 'grab');
|
|
5929
6305
|
} // 즉시 렌더링 (RAF 없이)
|
|
5930
|
-
// topOnHover는 Event Layer에서만 처리 (Base Layer 재렌더링 제거로 성능 향상)
|
|
5931
6306
|
|
|
5932
6307
|
|
|
5933
|
-
|
|
6308
|
+
if (renderEvent) {
|
|
6309
|
+
// renderEvent가 있으면 Event Layer에서만 처리 (성능 최적화)
|
|
6310
|
+
doRenderEvent();
|
|
6311
|
+
} else if (topOnHover) {
|
|
6312
|
+
// renderEvent가 없고 topOnHover가 true면 Base Layer에서 처리
|
|
6313
|
+
doRenderBase();
|
|
6314
|
+
}
|
|
5934
6315
|
};
|
|
5935
6316
|
/**
|
|
5936
6317
|
* 클릭 처리 (단일/다중 선택)
|
|
@@ -5944,9 +6325,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5944
6325
|
|
|
5945
6326
|
|
|
5946
6327
|
var handleLocalClick = function (data) {
|
|
5947
|
-
//
|
|
5948
|
-
lastClickedItemRef.current = data; // 1. 선택 상태 업데이트
|
|
5949
|
-
|
|
6328
|
+
// 1. 선택 상태 업데이트
|
|
5950
6329
|
if (enableMultiSelect) {
|
|
5951
6330
|
// 다중 선택: Set과 Map 동시 업데이트
|
|
5952
6331
|
var newSelected = new Set(selectedIdsRef.current);
|
|
@@ -5996,15 +6375,20 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5996
6375
|
var handleClick = function (event) {
|
|
5997
6376
|
var _a;
|
|
5998
6377
|
|
|
6378
|
+
if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
|
|
6379
|
+
|
|
5999
6380
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6000
6381
|
|
|
6001
6382
|
try {
|
|
6002
6383
|
var clickedOffset = controller.positionToOffset(event.param.position);
|
|
6003
|
-
var
|
|
6384
|
+
var data_1 = findData(clickedOffset);
|
|
6004
6385
|
|
|
6005
|
-
if (
|
|
6006
|
-
handleLocalClick(
|
|
6007
|
-
|
|
6386
|
+
if (data_1) {
|
|
6387
|
+
handleLocalClick(data_1);
|
|
6388
|
+
|
|
6389
|
+
if (onClick) {
|
|
6390
|
+
onClick(data_1, selectedIdsRef.current);
|
|
6391
|
+
}
|
|
6008
6392
|
}
|
|
6009
6393
|
} catch (error) {
|
|
6010
6394
|
console.error('[WoongKonvaMarker] handleClick error:', error);
|
|
@@ -6018,6 +6402,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6018
6402
|
var handleMouseMove = function (event) {
|
|
6019
6403
|
var _a;
|
|
6020
6404
|
|
|
6405
|
+
if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
|
|
6406
|
+
|
|
6021
6407
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6022
6408
|
|
|
6023
6409
|
try {
|
|
@@ -6058,6 +6444,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6058
6444
|
|
|
6059
6445
|
|
|
6060
6446
|
var handleMouseLeave = function () {
|
|
6447
|
+
if (disableInteractionRef.current) return; // 🚫 상호작용 비활성화 시 즉시 반환
|
|
6448
|
+
|
|
6061
6449
|
var prevHovered = hoveredItemRef.current;
|
|
6062
6450
|
|
|
6063
6451
|
if (prevHovered) {
|
|
@@ -6192,7 +6580,11 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6192
6580
|
handleLocalClick: handleLocalClick,
|
|
6193
6581
|
getSelectedIds: function () {
|
|
6194
6582
|
return selectedIdsRef.current;
|
|
6195
|
-
}
|
|
6583
|
+
},
|
|
6584
|
+
isInteractionDisabled: function () {
|
|
6585
|
+
return disableInteractionRef.current;
|
|
6586
|
+
} // 🚫 상호작용 비활성화 여부 반환
|
|
6587
|
+
|
|
6196
6588
|
};
|
|
6197
6589
|
context.registerComponent(componentInstance);
|
|
6198
6590
|
} // Cleanup 함수
|
|
@@ -6231,7 +6623,14 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6231
6623
|
boundingBoxCacheRef.current.clear();
|
|
6232
6624
|
spatialIndexRef.current.clear();
|
|
6233
6625
|
};
|
|
6234
|
-
}, []); //
|
|
6626
|
+
}, []); // 초기화는 한 번만
|
|
6627
|
+
// --------------------------------------------------------------------------
|
|
6628
|
+
// Lifecycle: disableInteraction 동기화
|
|
6629
|
+
// --------------------------------------------------------------------------
|
|
6630
|
+
|
|
6631
|
+
useEffect(function () {
|
|
6632
|
+
disableInteractionRef.current = disableInteraction;
|
|
6633
|
+
}, [disableInteraction]); // --------------------------------------------------------------------------
|
|
6235
6634
|
// Lifecycle: 외부 selectedItems 동기화
|
|
6236
6635
|
// --------------------------------------------------------------------------
|
|
6237
6636
|
|
|
@@ -6254,13 +6653,23 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6254
6653
|
doRenderEvent();
|
|
6255
6654
|
}, [externalSelectedItems]); // 배열 자체를 dependency로 사용
|
|
6256
6655
|
// --------------------------------------------------------------------------
|
|
6257
|
-
// Lifecycle:
|
|
6656
|
+
// Lifecycle: 외부 selectedItem 변경 시 Event Layer 리렌더링
|
|
6258
6657
|
// --------------------------------------------------------------------------
|
|
6259
6658
|
|
|
6260
6659
|
useEffect(function () {
|
|
6261
|
-
if (!stageRef.current) return; //
|
|
6660
|
+
if (!stageRef.current) return; // Ref 동기화
|
|
6262
6661
|
|
|
6263
|
-
|
|
6662
|
+
selectedItemRef.current = externalSelectedItem; // selectedItem이 변경되면 Event Layer만 다시 그림
|
|
6663
|
+
|
|
6664
|
+
doRenderEvent();
|
|
6665
|
+
}, [externalSelectedItem]); // --------------------------------------------------------------------------
|
|
6666
|
+
// Lifecycle: 데이터 변경 시 렌더링
|
|
6667
|
+
// --------------------------------------------------------------------------
|
|
6668
|
+
|
|
6669
|
+
useEffect(function () {
|
|
6670
|
+
if (!stageRef.current) return; // dataRef 동기화
|
|
6671
|
+
|
|
6672
|
+
dataRef.current = data; // 데이터 변경 시 즉시 transform 제거 및 캐시 정리 (겹침 방지)
|
|
6264
6673
|
|
|
6265
6674
|
if (containerRef.current) {
|
|
6266
6675
|
containerRef.current.style.transform = '';
|
|
@@ -6277,24 +6686,24 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6277
6686
|
/**
|
|
6278
6687
|
* 선택 상태 동기화 (최적화 버전)
|
|
6279
6688
|
*
|
|
6280
|
-
*
|
|
6689
|
+
* data가 변경되면 selectedItemsMapRef도 업데이트 필요
|
|
6281
6690
|
* (참조가 바뀌므로 기존 Map의 데이터는 stale 상태)
|
|
6282
6691
|
*
|
|
6283
|
-
* 🔥 중요: 화면 밖
|
|
6284
|
-
* - 현재
|
|
6692
|
+
* 🔥 중요: 화면 밖 데이터도 선택 상태 유지!
|
|
6693
|
+
* - 현재 data에 있으면 최신 데이터로 업데이트
|
|
6285
6694
|
* - 없으면 기존 selectedItemsMapRef의 데이터 유지
|
|
6286
6695
|
*
|
|
6287
|
-
* 최적화:
|
|
6288
|
-
* - O(전체
|
|
6696
|
+
* 최적화: data를 Map으로 먼저 변환하여 find() 순회 제거
|
|
6697
|
+
* - O(전체 데이터 수 + 선택된 개수) - 매우 효율적
|
|
6289
6698
|
*/
|
|
6290
6699
|
|
|
6291
|
-
var
|
|
6700
|
+
var dataMap = new Map(data.map(function (m) {
|
|
6292
6701
|
return [m.id, m];
|
|
6293
6702
|
}));
|
|
6294
6703
|
var newSelectedItemsMap = new Map();
|
|
6295
6704
|
selectedIdsRef.current.forEach(function (id) {
|
|
6296
|
-
// 현재
|
|
6297
|
-
var currentItem =
|
|
6705
|
+
// 현재 data에 있으면 최신 데이터 사용
|
|
6706
|
+
var currentItem = dataMap.get(id);
|
|
6298
6707
|
|
|
6299
6708
|
if (currentItem) {
|
|
6300
6709
|
newSelectedItemsMap.set(id, currentItem);
|
|
@@ -6306,12 +6715,12 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6306
6715
|
newSelectedItemsMap.set(id, prevItem);
|
|
6307
6716
|
}
|
|
6308
6717
|
}
|
|
6309
|
-
}); // selectedIdsRef는 그대로 유지 (화면 밖
|
|
6718
|
+
}); // selectedIdsRef는 그대로 유지 (화면 밖 항목도 선택 상태 유지)
|
|
6310
6719
|
|
|
6311
6720
|
selectedItemsMapRef.current = newSelectedItemsMap; // 즉시 렌더링
|
|
6312
6721
|
|
|
6313
6722
|
renderAllImmediate();
|
|
6314
|
-
}, [
|
|
6723
|
+
}, [data]);
|
|
6315
6724
|
return createPortal(React.createElement("div", {
|
|
6316
6725
|
ref: containerRef,
|
|
6317
6726
|
style: {
|
|
@@ -6321,40 +6730,6 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6321
6730
|
}
|
|
6322
6731
|
}), divElement);
|
|
6323
6732
|
};
|
|
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
6733
|
|
|
6359
6734
|
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
6735
|
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 +9562,4 @@ function MintMap(_a) {
|
|
|
9187
9562
|
}), loading));
|
|
9188
9563
|
}
|
|
9189
9564
|
|
|
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 };
|
|
9565
|
+
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 };
|