@mint-ui/map 1.2.0-test.31 → 1.2.0-test.32
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 +5 -5
- package/dist/components/mint-map/core/advanced/index.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.d.ts +5 -5
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.js +8 -8
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.js +1 -1
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.d.ts +8 -11
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.d.ts +2 -2
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.js +3 -3
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts +97 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/WoongCanvasLayer.js → woongCanvasMarker/WoongCanvasMarker.js} +42 -123
- package/dist/components/mint-map/core/advanced/woongCanvasMarker/index.d.ts +4 -0
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.d.ts +113 -0
- package/dist/components/mint-map/core/advanced/woongCanvasPolygon/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.d.ts +1 -1
- package/dist/components/mint-map/google/GoogleMintMapController.js +4 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -4
- package/dist/components/mint-map/naver/NaverMintMapController.js +4 -4
- package/dist/index.es.js +43 -350
- package/dist/index.js +9 -8
- package/dist/index.umd.js +46 -352
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +0 -162
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +0 -234
- /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/index.d.ts +0 -0
- /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.js +0 -0
package/dist/index.umd.js
CHANGED
|
@@ -996,8 +996,8 @@
|
|
|
996
996
|
return Math.max(minWidth, textWidth + padding);
|
|
997
997
|
};
|
|
998
998
|
|
|
999
|
-
var
|
|
1000
|
-
var
|
|
999
|
+
var WoongCanvasContext = React.createContext(null);
|
|
1000
|
+
var WoongCanvasProvider = function (_a) {
|
|
1001
1001
|
var children = _a.children;
|
|
1002
1002
|
var controller = useMintMapController(); // Refs
|
|
1003
1003
|
|
|
@@ -1142,12 +1142,12 @@
|
|
|
1142
1142
|
unregisterComponent: unregisterComponent
|
|
1143
1143
|
};
|
|
1144
1144
|
}, [registerComponent, unregisterComponent]);
|
|
1145
|
-
return React__default["default"].createElement(
|
|
1145
|
+
return React__default["default"].createElement(WoongCanvasContext.Provider, {
|
|
1146
1146
|
value: contextValue
|
|
1147
1147
|
}, children);
|
|
1148
1148
|
};
|
|
1149
|
-
var
|
|
1150
|
-
var context = React.useContext(
|
|
1149
|
+
var useWoongCanvasContext = function () {
|
|
1150
|
+
var context = React.useContext(WoongCanvasContext);
|
|
1151
1151
|
return context;
|
|
1152
1152
|
};
|
|
1153
1153
|
|
|
@@ -1229,7 +1229,7 @@
|
|
|
1229
1229
|
* - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
|
|
1230
1230
|
* - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
|
|
1231
1231
|
*
|
|
1232
|
-
*
|
|
1232
|
+
* WoongCanvasMarker 사용 사례에 최적:
|
|
1233
1233
|
* - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
|
|
1234
1234
|
* - 접근 빈도 추적보다 빠른 조회가 더 중요
|
|
1235
1235
|
*/
|
|
@@ -1567,7 +1567,7 @@
|
|
|
1567
1567
|
}, [center]);
|
|
1568
1568
|
return React__default["default"].createElement("div", {
|
|
1569
1569
|
className: cn$3('mint-map-root')
|
|
1570
|
-
}, mapInitialized && React__default["default"].createElement(
|
|
1570
|
+
}, mapInitialized && React__default["default"].createElement(WoongCanvasProvider, null, children), React__default["default"].createElement("div", {
|
|
1571
1571
|
className: cn$3('mint-map-container'),
|
|
1572
1572
|
style: {
|
|
1573
1573
|
visibility: visible ? 'inherit' : 'hidden'
|
|
@@ -5425,239 +5425,11 @@
|
|
|
5425
5425
|
}))));
|
|
5426
5426
|
}
|
|
5427
5427
|
|
|
5428
|
-
/**
|
|
5429
|
-
* 폴리곤 렌더링 유틸리티
|
|
5430
|
-
*
|
|
5431
|
-
* 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
|
|
5432
|
-
*/
|
|
5433
|
-
|
|
5434
|
-
/**
|
|
5435
|
-
* 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
|
|
5436
|
-
*/
|
|
5437
|
-
var drawPolygon = function (_a) {
|
|
5438
|
-
var ctx = _a.ctx,
|
|
5439
|
-
polygonOffsets = _a.polygonOffsets,
|
|
5440
|
-
isDonutPolygon = _a.isDonutPolygon,
|
|
5441
|
-
fillColor = _a.fillColor,
|
|
5442
|
-
strokeColor = _a.strokeColor,
|
|
5443
|
-
lineWidth = _a.lineWidth;
|
|
5444
|
-
|
|
5445
|
-
for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
|
|
5446
|
-
var multiPolygon = polygonOffsets_1[_i];
|
|
5447
|
-
|
|
5448
|
-
if (isDonutPolygon) {
|
|
5449
|
-
ctx.beginPath(); // 1. 외부 폴리곤 그리기
|
|
5450
|
-
|
|
5451
|
-
if (multiPolygon[0] && multiPolygon[0].length > 0) {
|
|
5452
|
-
ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
|
|
5453
|
-
|
|
5454
|
-
for (var i = 1; i < multiPolygon[0].length; i++) {
|
|
5455
|
-
ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
|
|
5456
|
-
}
|
|
5457
|
-
|
|
5458
|
-
ctx.closePath();
|
|
5459
|
-
} // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
|
|
5460
|
-
|
|
5461
|
-
|
|
5462
|
-
for (var j = 1; j < multiPolygon.length; j++) {
|
|
5463
|
-
var innerPolygon = multiPolygon[j];
|
|
5464
|
-
if (innerPolygon.length === 0) continue;
|
|
5465
|
-
ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
|
|
5466
|
-
|
|
5467
|
-
for (var i = 1; i < innerPolygon.length; i++) {
|
|
5468
|
-
ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
|
|
5469
|
-
}
|
|
5470
|
-
|
|
5471
|
-
ctx.closePath();
|
|
5472
|
-
} // 3. evenodd fill rule로 구멍 뚫기
|
|
5473
|
-
|
|
5474
|
-
|
|
5475
|
-
ctx.fillStyle = fillColor;
|
|
5476
|
-
ctx.fill('evenodd'); // 4. 외곽선 그리기
|
|
5477
|
-
|
|
5478
|
-
ctx.strokeStyle = strokeColor;
|
|
5479
|
-
ctx.lineWidth = lineWidth;
|
|
5480
|
-
ctx.stroke();
|
|
5481
|
-
} else {
|
|
5482
|
-
// 일반 폴리곤
|
|
5483
|
-
for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
|
|
5484
|
-
var polygonGroup = multiPolygon_1[_b];
|
|
5485
|
-
if (!polygonGroup.length) continue;
|
|
5486
|
-
ctx.beginPath();
|
|
5487
|
-
var firstPoint = polygonGroup[0];
|
|
5488
|
-
ctx.moveTo(firstPoint[0], firstPoint[1]);
|
|
5489
|
-
|
|
5490
|
-
for (var i = 1; i < polygonGroup.length; i++) {
|
|
5491
|
-
var point = polygonGroup[i];
|
|
5492
|
-
ctx.lineTo(point[0], point[1]);
|
|
5493
|
-
}
|
|
5494
|
-
|
|
5495
|
-
ctx.closePath();
|
|
5496
|
-
ctx.fillStyle = fillColor;
|
|
5497
|
-
ctx.strokeStyle = strokeColor;
|
|
5498
|
-
ctx.lineWidth = lineWidth;
|
|
5499
|
-
ctx.fill();
|
|
5500
|
-
ctx.stroke();
|
|
5501
|
-
}
|
|
5502
|
-
}
|
|
5503
|
-
}
|
|
5504
|
-
};
|
|
5505
|
-
/**
|
|
5506
|
-
* 폴리곤 Base 렌더링 함수
|
|
5507
|
-
*
|
|
5508
|
-
* @param baseFillColor 기본 폴리곤 채우기 색상
|
|
5509
|
-
* @param baseStrokeColor 기본 폴리곤 테두리 색상
|
|
5510
|
-
* @param baseLineWidth 기본 폴리곤 테두리 두께
|
|
5511
|
-
* @returns Base Layer 렌더링 함수
|
|
5512
|
-
*
|
|
5513
|
-
* @example
|
|
5514
|
-
* const renderBase = renderPolygonBase(
|
|
5515
|
-
* 'rgba(255, 100, 100, 0.5)',
|
|
5516
|
-
* 'rgba(200, 50, 50, 0.8)',
|
|
5517
|
-
* 2
|
|
5518
|
-
* );
|
|
5519
|
-
*/
|
|
5520
|
-
|
|
5521
|
-
var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
|
|
5522
|
-
return function (_a) {
|
|
5523
|
-
var ctx = _a.ctx,
|
|
5524
|
-
items = _a.items,
|
|
5525
|
-
selectedIds = _a.selectedIds,
|
|
5526
|
-
utils = _a.utils;
|
|
5527
|
-
|
|
5528
|
-
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
|
|
5529
|
-
var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
|
|
5530
|
-
|
|
5531
|
-
if (selectedIds.has(item.id)) continue;
|
|
5532
|
-
if (!item.paths) continue;
|
|
5533
|
-
var polygonOffsets = utils.getOrComputePolygonOffsets(item);
|
|
5534
|
-
if (!polygonOffsets) continue;
|
|
5535
|
-
drawPolygon({
|
|
5536
|
-
ctx: ctx,
|
|
5537
|
-
polygonOffsets: polygonOffsets,
|
|
5538
|
-
isDonutPolygon: item.isDonutPolygon || false,
|
|
5539
|
-
fillColor: baseFillColor,
|
|
5540
|
-
strokeColor: baseStrokeColor,
|
|
5541
|
-
lineWidth: baseLineWidth
|
|
5542
|
-
});
|
|
5543
|
-
}
|
|
5544
|
-
};
|
|
5545
|
-
};
|
|
5546
|
-
/**
|
|
5547
|
-
* 폴리곤 Event 렌더링 함수
|
|
5548
|
-
*
|
|
5549
|
-
* @param baseFillColor 기본 폴리곤 채우기 색상 (필수, fallback용)
|
|
5550
|
-
* @param baseStrokeColor 기본 폴리곤 테두리 색상 (필수, fallback용)
|
|
5551
|
-
* @param baseLineWidth 기본 폴리곤 테두리 두께 (필수, fallback용)
|
|
5552
|
-
* @param selectedFillColor 선택된 폴리곤 채우기 색상 (선택, 기본값: baseFillColor)
|
|
5553
|
-
* @param selectedStrokeColor 선택된 폴리곤 테두리 색상 (선택, 기본값: baseStrokeColor)
|
|
5554
|
-
* @param selectedLineWidth 선택된 폴리곤 테두리 두께 (선택, 기본값: baseLineWidth)
|
|
5555
|
-
* @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
|
|
5556
|
-
* @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
|
|
5557
|
-
* @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
|
|
5558
|
-
* @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
|
|
5559
|
-
* @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
|
|
5560
|
-
* @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
|
|
5561
|
-
* @returns Event Layer 렌더링 함수
|
|
5562
|
-
*
|
|
5563
|
-
* @example
|
|
5564
|
-
* const renderEvent = renderPolygonEvent(
|
|
5565
|
-
* 'rgba(255, 100, 100, 0.5)', // baseFillColor
|
|
5566
|
-
* 'rgba(200, 50, 50, 0.8)', // baseStrokeColor
|
|
5567
|
-
* 2, // baseLineWidth
|
|
5568
|
-
* 'rgba(255, 193, 7, 0.7)', // selectedFillColor
|
|
5569
|
-
* 'rgba(255, 152, 0, 1)', // selectedStrokeColor
|
|
5570
|
-
* 4 // selectedLineWidth
|
|
5571
|
-
* );
|
|
5572
|
-
*/
|
|
5573
|
-
|
|
5574
|
-
var renderPolygonEvent = function (baseFillColor, baseStrokeColor, baseLineWidth, selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
|
|
5575
|
-
// 기본값 설정 (base 기준)
|
|
5576
|
-
var _selectedFillColor = selectedFillColor || baseFillColor;
|
|
5577
|
-
|
|
5578
|
-
var _selectedStrokeColor = selectedStrokeColor || baseStrokeColor;
|
|
5579
|
-
|
|
5580
|
-
var _selectedLineWidth = selectedLineWidth || baseLineWidth;
|
|
5581
|
-
|
|
5582
|
-
var _activeFillColor = activeFillColor || _selectedFillColor;
|
|
5583
|
-
|
|
5584
|
-
var _activeStrokeColor = activeStrokeColor || _selectedStrokeColor;
|
|
5585
|
-
|
|
5586
|
-
var _activeLineWidth = activeLineWidth || _selectedLineWidth;
|
|
5587
|
-
|
|
5588
|
-
var _hoveredFillColor = hoveredFillColor || _selectedFillColor;
|
|
5589
|
-
|
|
5590
|
-
var _hoveredStrokeColor = hoveredStrokeColor || _selectedStrokeColor;
|
|
5591
|
-
|
|
5592
|
-
var _hoveredLineWidth = hoveredLineWidth || _selectedLineWidth;
|
|
5593
|
-
|
|
5594
|
-
return function (_a) {
|
|
5595
|
-
var ctx = _a.ctx,
|
|
5596
|
-
hoveredItem = _a.hoveredItem,
|
|
5597
|
-
utils = _a.utils,
|
|
5598
|
-
selectedItems = _a.selectedItems,
|
|
5599
|
-
selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
|
|
5600
|
-
|
|
5601
|
-
if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
|
|
5602
|
-
for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
|
|
5603
|
-
var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
|
|
5604
|
-
|
|
5605
|
-
if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
|
|
5606
|
-
if (!item.paths) continue;
|
|
5607
|
-
var polygonOffsets = utils.getOrComputePolygonOffsets(item);
|
|
5608
|
-
if (!polygonOffsets) continue;
|
|
5609
|
-
drawPolygon({
|
|
5610
|
-
ctx: ctx,
|
|
5611
|
-
polygonOffsets: polygonOffsets,
|
|
5612
|
-
isDonutPolygon: item.isDonutPolygon || false,
|
|
5613
|
-
fillColor: _selectedFillColor,
|
|
5614
|
-
strokeColor: _selectedStrokeColor,
|
|
5615
|
-
lineWidth: _selectedLineWidth
|
|
5616
|
-
});
|
|
5617
|
-
}
|
|
5618
|
-
} // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
|
|
5619
|
-
|
|
5620
|
-
|
|
5621
|
-
if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
|
|
5622
|
-
var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
|
|
5623
|
-
|
|
5624
|
-
if (polygonOffsets) {
|
|
5625
|
-
drawPolygon({
|
|
5626
|
-
ctx: ctx,
|
|
5627
|
-
polygonOffsets: polygonOffsets,
|
|
5628
|
-
isDonutPolygon: selectedItem.isDonutPolygon || false,
|
|
5629
|
-
fillColor: _activeFillColor,
|
|
5630
|
-
strokeColor: _activeStrokeColor,
|
|
5631
|
-
lineWidth: _activeLineWidth
|
|
5632
|
-
});
|
|
5633
|
-
}
|
|
5634
|
-
} // 3. 호버된 항목 그리기 (가장 위에 표시)
|
|
5635
|
-
|
|
5636
|
-
|
|
5637
|
-
if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
|
|
5638
|
-
var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
|
|
5639
|
-
if (!polygonOffsets) return;
|
|
5640
|
-
var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
|
|
5641
|
-
return item.id === hoveredItem.id;
|
|
5642
|
-
});
|
|
5643
|
-
drawPolygon({
|
|
5644
|
-
ctx: ctx,
|
|
5645
|
-
polygonOffsets: polygonOffsets,
|
|
5646
|
-
isDonutPolygon: hoveredItem.isDonutPolygon || false,
|
|
5647
|
-
fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
|
|
5648
|
-
strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
|
|
5649
|
-
lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
|
|
5650
|
-
});
|
|
5651
|
-
}
|
|
5652
|
-
};
|
|
5653
|
-
};
|
|
5654
|
-
|
|
5655
5428
|
// 메인 컴포넌트
|
|
5656
5429
|
// ============================================================================
|
|
5657
5430
|
|
|
5658
|
-
var
|
|
5431
|
+
var WoongCanvasMarker = function (props) {
|
|
5659
5432
|
var data = props.data,
|
|
5660
|
-
dataType = props.dataType,
|
|
5661
5433
|
onClick = props.onClick,
|
|
5662
5434
|
onMouseOver = props.onMouseOver,
|
|
5663
5435
|
onMouseOut = props.onMouseOut,
|
|
@@ -5675,13 +5447,16 @@
|
|
|
5675
5447
|
externalSelectedItem = props.selectedItem,
|
|
5676
5448
|
_f = props.disableInteraction,
|
|
5677
5449
|
disableInteraction = _f === void 0 ? false : _f,
|
|
5678
|
-
|
|
5450
|
+
renderBase = props.renderBase,
|
|
5451
|
+
renderAnimation = props.renderAnimation,
|
|
5452
|
+
renderEvent = props.renderEvent,
|
|
5453
|
+
options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
|
|
5679
5454
|
// Hooks & Context
|
|
5680
5455
|
// --------------------------------------------------------------------------
|
|
5681
5456
|
|
|
5682
5457
|
|
|
5683
5458
|
var controller = useMintMapController();
|
|
5684
|
-
var context =
|
|
5459
|
+
var context = useWoongCanvasContext();
|
|
5685
5460
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
5686
5461
|
// DOM Refs
|
|
5687
5462
|
// --------------------------------------------------------------------------
|
|
@@ -5810,24 +5585,6 @@
|
|
|
5810
5585
|
// 유틸리티 함수: 좌표 변환 캐싱
|
|
5811
5586
|
// --------------------------------------------------------------------------
|
|
5812
5587
|
|
|
5813
|
-
/**
|
|
5814
|
-
* 폴리곤 좌표 변환 결과를 캐시하고 반환
|
|
5815
|
-
* @param polygonData 폴리곤 데이터
|
|
5816
|
-
* @returns 변환된 좌표 배열 또는 null
|
|
5817
|
-
*/
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
var getOrComputePolygonOffsets = function (polygonData) {
|
|
5821
|
-
var cached = offsetCacheRef.current.get(polygonData.id);
|
|
5822
|
-
if (cached && Array.isArray(cached)) return cached;
|
|
5823
|
-
var result = computePolygonOffsets(polygonData, controller);
|
|
5824
|
-
|
|
5825
|
-
if (result) {
|
|
5826
|
-
offsetCacheRef.current.set(polygonData.id, result);
|
|
5827
|
-
}
|
|
5828
|
-
|
|
5829
|
-
return result;
|
|
5830
|
-
};
|
|
5831
5588
|
/**
|
|
5832
5589
|
* 마커 좌표 변환 결과를 캐시하고 반환
|
|
5833
5590
|
*
|
|
@@ -5851,66 +5608,31 @@
|
|
|
5851
5608
|
// --------------------------------------------------------------------------
|
|
5852
5609
|
|
|
5853
5610
|
/**
|
|
5854
|
-
*
|
|
5611
|
+
* 마커의 바운딩 박스 계산
|
|
5855
5612
|
*
|
|
5856
5613
|
* 🎯 마커의 경우:
|
|
5857
5614
|
* - boxHeight: 본체만 (Hit Test 영역)
|
|
5858
5615
|
* - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
|
|
5859
5616
|
*
|
|
5860
|
-
* @param item 마커
|
|
5617
|
+
* @param item 마커 데이터
|
|
5861
5618
|
* @returns 바운딩 박스 또는 null
|
|
5862
5619
|
*/
|
|
5863
5620
|
|
|
5864
5621
|
|
|
5865
5622
|
var computeBoundingBox = function (item) {
|
|
5866
|
-
|
|
5867
|
-
|
|
5868
|
-
|
|
5869
|
-
|
|
5870
|
-
|
|
5871
|
-
|
|
5872
|
-
maxX = -Infinity,
|
|
5873
|
-
maxY = -Infinity;
|
|
5874
|
-
|
|
5875
|
-
for (var _i = 0, offsets_1 = offsets; _i < offsets_1.length; _i++) {
|
|
5876
|
-
var multiPolygon = offsets_1[_i];
|
|
5877
|
-
|
|
5878
|
-
for (var _a = 0, multiPolygon_1 = multiPolygon; _a < multiPolygon_1.length; _a++) {
|
|
5879
|
-
var polygonGroup = multiPolygon_1[_a];
|
|
5880
|
-
|
|
5881
|
-
for (var _b = 0, polygonGroup_1 = polygonGroup; _b < polygonGroup_1.length; _b++) {
|
|
5882
|
-
var _c = polygonGroup_1[_b],
|
|
5883
|
-
x = _c[0],
|
|
5884
|
-
y = _c[1];
|
|
5885
|
-
if (x < minX) minX = x;
|
|
5886
|
-
if (y < minY) minY = y;
|
|
5887
|
-
if (x > maxX) maxX = x;
|
|
5888
|
-
if (y > maxY) maxY = y;
|
|
5889
|
-
}
|
|
5890
|
-
}
|
|
5891
|
-
}
|
|
5623
|
+
// 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
|
|
5624
|
+
var offset = getOrComputeMarkerOffset(item);
|
|
5625
|
+
if (!offset) return null;
|
|
5626
|
+
var boxWidth = item.boxWidth || 50;
|
|
5627
|
+
var boxHeight = item.boxHeight || 28;
|
|
5628
|
+
var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
|
|
5892
5629
|
|
|
5893
|
-
|
|
5894
|
-
|
|
5895
|
-
|
|
5896
|
-
|
|
5897
|
-
|
|
5898
|
-
|
|
5899
|
-
} else {
|
|
5900
|
-
// 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
|
|
5901
|
-
var offset = getOrComputeMarkerOffset(item);
|
|
5902
|
-
if (!offset) return null;
|
|
5903
|
-
var boxWidth = item.boxWidth || 50;
|
|
5904
|
-
var boxHeight = item.boxHeight || 28;
|
|
5905
|
-
var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
|
|
5906
|
-
|
|
5907
|
-
return {
|
|
5908
|
-
minX: offset.x - boxWidth / 2,
|
|
5909
|
-
minY: offset.y - boxHeight - tailHeight,
|
|
5910
|
-
maxX: offset.x + boxWidth / 2,
|
|
5911
|
-
maxY: offset.y
|
|
5912
|
-
};
|
|
5913
|
-
}
|
|
5630
|
+
return {
|
|
5631
|
+
minX: offset.x - boxWidth / 2,
|
|
5632
|
+
minY: offset.y - boxHeight - tailHeight,
|
|
5633
|
+
maxX: offset.x + boxWidth / 2,
|
|
5634
|
+
maxY: offset.y
|
|
5635
|
+
};
|
|
5914
5636
|
}; // --------------------------------------------------------------------------
|
|
5915
5637
|
// 유틸리티 함수: 공간 인덱싱
|
|
5916
5638
|
// --------------------------------------------------------------------------
|
|
@@ -5944,24 +5666,14 @@
|
|
|
5944
5666
|
|
|
5945
5667
|
|
|
5946
5668
|
var renderUtils = {
|
|
5947
|
-
getOrComputePolygonOffsets:
|
|
5669
|
+
getOrComputePolygonOffsets: function () {
|
|
5670
|
+
return null;
|
|
5671
|
+
},
|
|
5948
5672
|
getOrComputeMarkerOffset: getOrComputeMarkerOffset
|
|
5949
5673
|
};
|
|
5950
5674
|
/** Base Layer에서 사용할 빈 Set (재사용) */
|
|
5951
5675
|
|
|
5952
5676
|
React.useRef(new Set());
|
|
5953
|
-
/**
|
|
5954
|
-
* 실제 사용할 렌더링 함수 결정
|
|
5955
|
-
* - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
|
|
5956
|
-
* - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
|
|
5957
|
-
*/
|
|
5958
|
-
|
|
5959
|
-
var renderBase = dataType === exports.CanvasDataType.MARKER ? props.renderBase : renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
|
|
5960
|
-
var renderAnimation = dataType === exports.CanvasDataType.MARKER ? props.renderAnimation : undefined;
|
|
5961
|
-
var renderEvent = dataType === exports.CanvasDataType.MARKER ? props.renderEvent : function () {
|
|
5962
|
-
var polygonProps = props;
|
|
5963
|
-
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);
|
|
5964
|
-
}();
|
|
5965
5677
|
/**
|
|
5966
5678
|
* Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
|
|
5967
5679
|
*
|
|
@@ -6235,54 +5947,35 @@
|
|
|
6235
5947
|
// --------------------------------------------------------------------------
|
|
6236
5948
|
|
|
6237
5949
|
/**
|
|
6238
|
-
* 특정 좌표의
|
|
5950
|
+
* 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
|
|
6239
5951
|
*
|
|
6240
5952
|
* topOnHover가 true일 때:
|
|
6241
5953
|
* - 현재 hover된 항목을 최우선으로 체크
|
|
6242
5954
|
* - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
|
|
6243
5955
|
*
|
|
6244
5956
|
* @param offset 검사할 좌표
|
|
6245
|
-
* @returns 찾은
|
|
5957
|
+
* @returns 찾은 마커 데이터 또는 null
|
|
6246
5958
|
*/
|
|
6247
5959
|
|
|
6248
5960
|
|
|
6249
5961
|
var findData = function (offset) {
|
|
6250
5962
|
// topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
|
|
6251
5963
|
if (topOnHover && hoveredItemRef.current) {
|
|
6252
|
-
var hovered = hoveredItemRef.current;
|
|
5964
|
+
var hovered = hoveredItemRef.current;
|
|
6253
5965
|
|
|
6254
|
-
if (
|
|
6255
|
-
|
|
6256
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6257
|
-
}
|
|
6258
|
-
} // 마커인 경우
|
|
6259
|
-
else {
|
|
6260
|
-
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
6261
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6262
|
-
}
|
|
5966
|
+
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
5967
|
+
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6263
5968
|
}
|
|
6264
5969
|
} // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
|
|
6265
5970
|
|
|
6266
5971
|
|
|
6267
|
-
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); //
|
|
6268
|
-
|
|
6269
|
-
if (dataType === exports.CanvasDataType.MARKER) {
|
|
6270
|
-
// 마커 체크
|
|
6271
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6272
|
-
var item = candidates[i];
|
|
5972
|
+
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
|
|
6273
5973
|
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
}
|
|
6277
|
-
}
|
|
6278
|
-
} else {
|
|
6279
|
-
// 폴리곤 체크
|
|
6280
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6281
|
-
var item = candidates[i];
|
|
5974
|
+
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
5975
|
+
var item = candidates[i];
|
|
6282
5976
|
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
}
|
|
5977
|
+
if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
|
|
5978
|
+
return item;
|
|
6286
5979
|
}
|
|
6287
5980
|
}
|
|
6288
5981
|
|
|
@@ -6397,7 +6090,7 @@
|
|
|
6397
6090
|
}
|
|
6398
6091
|
}
|
|
6399
6092
|
} catch (error) {
|
|
6400
|
-
console.error('[
|
|
6093
|
+
console.error('[WoongCanvasMarker] handleClick error:', error);
|
|
6401
6094
|
}
|
|
6402
6095
|
};
|
|
6403
6096
|
/**
|
|
@@ -6423,7 +6116,7 @@
|
|
|
6423
6116
|
if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
|
|
6424
6117
|
}
|
|
6425
6118
|
} catch (error) {
|
|
6426
|
-
console.error('[
|
|
6119
|
+
console.error('[WoongCanvasMarker] handleMouseMove error:', error);
|
|
6427
6120
|
}
|
|
6428
6121
|
};
|
|
6429
6122
|
/**
|
|
@@ -9579,7 +9272,6 @@
|
|
|
9579
9272
|
exports.Drawable = Drawable;
|
|
9580
9273
|
exports.GeoCalulator = GeoCalulator;
|
|
9581
9274
|
exports.GoogleMintMapController = GoogleMintMapController;
|
|
9582
|
-
exports.KonvaMarkerProvider = KonvaMarkerProvider;
|
|
9583
9275
|
exports.LRUCache = LRUCache;
|
|
9584
9276
|
exports.MapBuildingProjection = MapBuildingProjection;
|
|
9585
9277
|
exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
|
|
@@ -9612,7 +9304,9 @@
|
|
|
9612
9304
|
exports.Spacing = Spacing;
|
|
9613
9305
|
exports.SpatialHashGrid = SpatialHashGrid;
|
|
9614
9306
|
exports.Status = Status;
|
|
9615
|
-
exports.WoongCanvasLayer =
|
|
9307
|
+
exports.WoongCanvasLayer = WoongCanvasMarker;
|
|
9308
|
+
exports.WoongCanvasMarker = WoongCanvasMarker;
|
|
9309
|
+
exports.WoongCanvasProvider = WoongCanvasProvider;
|
|
9616
9310
|
exports.calculateTextBoxWidth = calculateTextBoxWidth;
|
|
9617
9311
|
exports.computeMarkerOffset = computeMarkerOffset;
|
|
9618
9312
|
exports.computePolygonOffsets = computePolygonOffsets;
|
|
@@ -9623,9 +9317,9 @@
|
|
|
9623
9317
|
exports.isPointInPolygon = isPointInPolygon;
|
|
9624
9318
|
exports.isPointInPolygonData = isPointInPolygonData;
|
|
9625
9319
|
exports.log = log;
|
|
9626
|
-
exports.useKonvaMarkerContext = useKonvaMarkerContext;
|
|
9627
9320
|
exports.useMarkerMoving = useMarkerMoving;
|
|
9628
9321
|
exports.useMintMapController = useMintMapController;
|
|
9322
|
+
exports.useWoongCanvasContext = useWoongCanvasContext;
|
|
9629
9323
|
exports.waiting = waiting;
|
|
9630
9324
|
|
|
9631
9325
|
Object.defineProperty(exports, '__esModule', { value: true });
|