@mint-ui/map 1.2.0-test.30 → 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 +9 -10
- 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} +44 -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 +45 -350
- package/dist/index.js +9 -8
- package/dist/index.umd.js +48 -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
|
*
|
|
@@ -6006,6 +5718,7 @@
|
|
|
6006
5718
|
ctx: ctx,
|
|
6007
5719
|
items: visibleItems,
|
|
6008
5720
|
selectedIds: selectedIdsRef.current,
|
|
5721
|
+
hoveredItem: hovered,
|
|
6009
5722
|
utils: renderUtils
|
|
6010
5723
|
}); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
|
|
6011
5724
|
|
|
@@ -6017,6 +5730,7 @@
|
|
|
6017
5730
|
ctx: ctx,
|
|
6018
5731
|
items: [hovered],
|
|
6019
5732
|
selectedIds: selectedIdsRef.current,
|
|
5733
|
+
hoveredItem: hovered,
|
|
6020
5734
|
utils: renderUtils
|
|
6021
5735
|
});
|
|
6022
5736
|
}
|
|
@@ -6233,54 +5947,35 @@
|
|
|
6233
5947
|
// --------------------------------------------------------------------------
|
|
6234
5948
|
|
|
6235
5949
|
/**
|
|
6236
|
-
* 특정 좌표의
|
|
5950
|
+
* 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
|
|
6237
5951
|
*
|
|
6238
5952
|
* topOnHover가 true일 때:
|
|
6239
5953
|
* - 현재 hover된 항목을 최우선으로 체크
|
|
6240
5954
|
* - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
|
|
6241
5955
|
*
|
|
6242
5956
|
* @param offset 검사할 좌표
|
|
6243
|
-
* @returns 찾은
|
|
5957
|
+
* @returns 찾은 마커 데이터 또는 null
|
|
6244
5958
|
*/
|
|
6245
5959
|
|
|
6246
5960
|
|
|
6247
5961
|
var findData = function (offset) {
|
|
6248
5962
|
// topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
|
|
6249
5963
|
if (topOnHover && hoveredItemRef.current) {
|
|
6250
|
-
var hovered = hoveredItemRef.current;
|
|
5964
|
+
var hovered = hoveredItemRef.current;
|
|
6251
5965
|
|
|
6252
|
-
if (
|
|
6253
|
-
|
|
6254
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6255
|
-
}
|
|
6256
|
-
} // 마커인 경우
|
|
6257
|
-
else {
|
|
6258
|
-
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
6259
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6260
|
-
}
|
|
5966
|
+
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
5967
|
+
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6261
5968
|
}
|
|
6262
5969
|
} // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
|
|
6263
5970
|
|
|
6264
5971
|
|
|
6265
|
-
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); //
|
|
6266
|
-
|
|
6267
|
-
if (dataType === exports.CanvasDataType.MARKER) {
|
|
6268
|
-
// 마커 체크
|
|
6269
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6270
|
-
var item = candidates[i];
|
|
5972
|
+
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
|
|
6271
5973
|
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
}
|
|
6275
|
-
}
|
|
6276
|
-
} else {
|
|
6277
|
-
// 폴리곤 체크
|
|
6278
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6279
|
-
var item = candidates[i];
|
|
5974
|
+
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
5975
|
+
var item = candidates[i];
|
|
6280
5976
|
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
}
|
|
5977
|
+
if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
|
|
5978
|
+
return item;
|
|
6284
5979
|
}
|
|
6285
5980
|
}
|
|
6286
5981
|
|
|
@@ -6395,7 +6090,7 @@
|
|
|
6395
6090
|
}
|
|
6396
6091
|
}
|
|
6397
6092
|
} catch (error) {
|
|
6398
|
-
console.error('[
|
|
6093
|
+
console.error('[WoongCanvasMarker] handleClick error:', error);
|
|
6399
6094
|
}
|
|
6400
6095
|
};
|
|
6401
6096
|
/**
|
|
@@ -6421,7 +6116,7 @@
|
|
|
6421
6116
|
if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
|
|
6422
6117
|
}
|
|
6423
6118
|
} catch (error) {
|
|
6424
|
-
console.error('[
|
|
6119
|
+
console.error('[WoongCanvasMarker] handleMouseMove error:', error);
|
|
6425
6120
|
}
|
|
6426
6121
|
};
|
|
6427
6122
|
/**
|
|
@@ -9577,7 +9272,6 @@
|
|
|
9577
9272
|
exports.Drawable = Drawable;
|
|
9578
9273
|
exports.GeoCalulator = GeoCalulator;
|
|
9579
9274
|
exports.GoogleMintMapController = GoogleMintMapController;
|
|
9580
|
-
exports.KonvaMarkerProvider = KonvaMarkerProvider;
|
|
9581
9275
|
exports.LRUCache = LRUCache;
|
|
9582
9276
|
exports.MapBuildingProjection = MapBuildingProjection;
|
|
9583
9277
|
exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
|
|
@@ -9610,7 +9304,9 @@
|
|
|
9610
9304
|
exports.Spacing = Spacing;
|
|
9611
9305
|
exports.SpatialHashGrid = SpatialHashGrid;
|
|
9612
9306
|
exports.Status = Status;
|
|
9613
|
-
exports.WoongCanvasLayer =
|
|
9307
|
+
exports.WoongCanvasLayer = WoongCanvasMarker;
|
|
9308
|
+
exports.WoongCanvasMarker = WoongCanvasMarker;
|
|
9309
|
+
exports.WoongCanvasProvider = WoongCanvasProvider;
|
|
9614
9310
|
exports.calculateTextBoxWidth = calculateTextBoxWidth;
|
|
9615
9311
|
exports.computeMarkerOffset = computeMarkerOffset;
|
|
9616
9312
|
exports.computePolygonOffsets = computePolygonOffsets;
|
|
@@ -9621,9 +9317,9 @@
|
|
|
9621
9317
|
exports.isPointInPolygon = isPointInPolygon;
|
|
9622
9318
|
exports.isPointInPolygonData = isPointInPolygonData;
|
|
9623
9319
|
exports.log = log;
|
|
9624
|
-
exports.useKonvaMarkerContext = useKonvaMarkerContext;
|
|
9625
9320
|
exports.useMarkerMoving = useMarkerMoving;
|
|
9626
9321
|
exports.useMintMapController = useMintMapController;
|
|
9322
|
+
exports.useWoongCanvasContext = useWoongCanvasContext;
|
|
9627
9323
|
exports.waiting = waiting;
|
|
9628
9324
|
|
|
9629
9325
|
Object.defineProperty(exports, '__esModule', { value: true });
|