@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.es.js
CHANGED
|
@@ -992,8 +992,8 @@ var calculateTextBoxWidth = function (_a) {
|
|
|
992
992
|
return Math.max(minWidth, textWidth + padding);
|
|
993
993
|
};
|
|
994
994
|
|
|
995
|
-
var
|
|
996
|
-
var
|
|
995
|
+
var WoongCanvasContext = createContext(null);
|
|
996
|
+
var WoongCanvasProvider = function (_a) {
|
|
997
997
|
var children = _a.children;
|
|
998
998
|
var controller = useMintMapController(); // Refs
|
|
999
999
|
|
|
@@ -1138,12 +1138,12 @@ var KonvaMarkerProvider = function (_a) {
|
|
|
1138
1138
|
unregisterComponent: unregisterComponent
|
|
1139
1139
|
};
|
|
1140
1140
|
}, [registerComponent, unregisterComponent]);
|
|
1141
|
-
return React.createElement(
|
|
1141
|
+
return React.createElement(WoongCanvasContext.Provider, {
|
|
1142
1142
|
value: contextValue
|
|
1143
1143
|
}, children);
|
|
1144
1144
|
};
|
|
1145
|
-
var
|
|
1146
|
-
var context = useContext(
|
|
1145
|
+
var useWoongCanvasContext = function () {
|
|
1146
|
+
var context = useContext(WoongCanvasContext);
|
|
1147
1147
|
return context;
|
|
1148
1148
|
};
|
|
1149
1149
|
|
|
@@ -1225,7 +1225,7 @@ function () {
|
|
|
1225
1225
|
* - 장점: 읽기 성능 대폭 향상 (10,000번 get → 이전보다 2배 빠름)
|
|
1226
1226
|
* - 단점: 접근 빈도가 아닌 삽입 순서 기반 eviction (FIFO)
|
|
1227
1227
|
*
|
|
1228
|
-
*
|
|
1228
|
+
* WoongCanvasMarker 사용 사례에 최적:
|
|
1229
1229
|
* - 좌표 변환 결과는 zoom/pan 시 어차피 전체 초기화
|
|
1230
1230
|
* - 접근 빈도 추적보다 빠른 조회가 더 중요
|
|
1231
1231
|
*/
|
|
@@ -1563,7 +1563,7 @@ function MintMapCore(_a) {
|
|
|
1563
1563
|
}, [center]);
|
|
1564
1564
|
return React.createElement("div", {
|
|
1565
1565
|
className: cn$3('mint-map-root')
|
|
1566
|
-
}, mapInitialized && React.createElement(
|
|
1566
|
+
}, mapInitialized && React.createElement(WoongCanvasProvider, null, children), React.createElement("div", {
|
|
1567
1567
|
className: cn$3('mint-map-container'),
|
|
1568
1568
|
style: {
|
|
1569
1569
|
visibility: visible ? 'inherit' : 'hidden'
|
|
@@ -5421,239 +5421,11 @@ function LoadingImage(_a) {
|
|
|
5421
5421
|
}))));
|
|
5422
5422
|
}
|
|
5423
5423
|
|
|
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에 추가
|
|
5456
|
-
|
|
5457
|
-
|
|
5458
|
-
for (var j = 1; j < multiPolygon.length; j++) {
|
|
5459
|
-
var innerPolygon = multiPolygon[j];
|
|
5460
|
-
if (innerPolygon.length === 0) continue;
|
|
5461
|
-
ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
|
|
5462
|
-
|
|
5463
|
-
for (var i = 1; i < innerPolygon.length; i++) {
|
|
5464
|
-
ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
|
|
5465
|
-
}
|
|
5466
|
-
|
|
5467
|
-
ctx.closePath();
|
|
5468
|
-
} // 3. evenodd fill rule로 구멍 뚫기
|
|
5469
|
-
|
|
5470
|
-
|
|
5471
|
-
ctx.fillStyle = fillColor;
|
|
5472
|
-
ctx.fill('evenodd'); // 4. 외곽선 그리기
|
|
5473
|
-
|
|
5474
|
-
ctx.strokeStyle = strokeColor;
|
|
5475
|
-
ctx.lineWidth = lineWidth;
|
|
5476
|
-
ctx.stroke();
|
|
5477
|
-
} else {
|
|
5478
|
-
// 일반 폴리곤
|
|
5479
|
-
for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
|
|
5480
|
-
var polygonGroup = multiPolygon_1[_b];
|
|
5481
|
-
if (!polygonGroup.length) continue;
|
|
5482
|
-
ctx.beginPath();
|
|
5483
|
-
var firstPoint = polygonGroup[0];
|
|
5484
|
-
ctx.moveTo(firstPoint[0], firstPoint[1]);
|
|
5485
|
-
|
|
5486
|
-
for (var i = 1; i < polygonGroup.length; i++) {
|
|
5487
|
-
var point = polygonGroup[i];
|
|
5488
|
-
ctx.lineTo(point[0], point[1]);
|
|
5489
|
-
}
|
|
5490
|
-
|
|
5491
|
-
ctx.closePath();
|
|
5492
|
-
ctx.fillStyle = fillColor;
|
|
5493
|
-
ctx.strokeStyle = strokeColor;
|
|
5494
|
-
ctx.lineWidth = lineWidth;
|
|
5495
|
-
ctx.fill();
|
|
5496
|
-
ctx.stroke();
|
|
5497
|
-
}
|
|
5498
|
-
}
|
|
5499
|
-
}
|
|
5500
|
-
};
|
|
5501
|
-
/**
|
|
5502
|
-
* 폴리곤 Base 렌더링 함수
|
|
5503
|
-
*
|
|
5504
|
-
* @param baseFillColor 기본 폴리곤 채우기 색상
|
|
5505
|
-
* @param baseStrokeColor 기본 폴리곤 테두리 색상
|
|
5506
|
-
* @param baseLineWidth 기본 폴리곤 테두리 두께
|
|
5507
|
-
* @returns Base Layer 렌더링 함수
|
|
5508
|
-
*
|
|
5509
|
-
* @example
|
|
5510
|
-
* const renderBase = renderPolygonBase(
|
|
5511
|
-
* 'rgba(255, 100, 100, 0.5)',
|
|
5512
|
-
* 'rgba(200, 50, 50, 0.8)',
|
|
5513
|
-
* 2
|
|
5514
|
-
* );
|
|
5515
|
-
*/
|
|
5516
|
-
|
|
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
5424
|
// 메인 컴포넌트
|
|
5652
5425
|
// ============================================================================
|
|
5653
5426
|
|
|
5654
|
-
var
|
|
5427
|
+
var WoongCanvasMarker = function (props) {
|
|
5655
5428
|
var data = props.data,
|
|
5656
|
-
dataType = props.dataType,
|
|
5657
5429
|
onClick = props.onClick,
|
|
5658
5430
|
onMouseOver = props.onMouseOver,
|
|
5659
5431
|
onMouseOut = props.onMouseOut,
|
|
@@ -5671,13 +5443,16 @@ var WoongCanvasLayer = function (props) {
|
|
|
5671
5443
|
externalSelectedItem = props.selectedItem,
|
|
5672
5444
|
_f = props.disableInteraction,
|
|
5673
5445
|
disableInteraction = _f === void 0 ? false : _f,
|
|
5674
|
-
|
|
5446
|
+
renderBase = props.renderBase,
|
|
5447
|
+
renderAnimation = props.renderAnimation,
|
|
5448
|
+
renderEvent = props.renderEvent,
|
|
5449
|
+
options = __rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderAnimation", "renderEvent"]); // --------------------------------------------------------------------------
|
|
5675
5450
|
// Hooks & Context
|
|
5676
5451
|
// --------------------------------------------------------------------------
|
|
5677
5452
|
|
|
5678
5453
|
|
|
5679
5454
|
var controller = useMintMapController();
|
|
5680
|
-
var context =
|
|
5455
|
+
var context = useWoongCanvasContext();
|
|
5681
5456
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // --------------------------------------------------------------------------
|
|
5682
5457
|
// DOM Refs
|
|
5683
5458
|
// --------------------------------------------------------------------------
|
|
@@ -5806,24 +5581,6 @@ var WoongCanvasLayer = function (props) {
|
|
|
5806
5581
|
// 유틸리티 함수: 좌표 변환 캐싱
|
|
5807
5582
|
// --------------------------------------------------------------------------
|
|
5808
5583
|
|
|
5809
|
-
/**
|
|
5810
|
-
* 폴리곤 좌표 변환 결과를 캐시하고 반환
|
|
5811
|
-
* @param polygonData 폴리곤 데이터
|
|
5812
|
-
* @returns 변환된 좌표 배열 또는 null
|
|
5813
|
-
*/
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
var getOrComputePolygonOffsets = function (polygonData) {
|
|
5817
|
-
var cached = offsetCacheRef.current.get(polygonData.id);
|
|
5818
|
-
if (cached && Array.isArray(cached)) return cached;
|
|
5819
|
-
var result = computePolygonOffsets(polygonData, controller);
|
|
5820
|
-
|
|
5821
|
-
if (result) {
|
|
5822
|
-
offsetCacheRef.current.set(polygonData.id, result);
|
|
5823
|
-
}
|
|
5824
|
-
|
|
5825
|
-
return result;
|
|
5826
|
-
};
|
|
5827
5584
|
/**
|
|
5828
5585
|
* 마커 좌표 변환 결과를 캐시하고 반환
|
|
5829
5586
|
*
|
|
@@ -5847,66 +5604,31 @@ var WoongCanvasLayer = function (props) {
|
|
|
5847
5604
|
// --------------------------------------------------------------------------
|
|
5848
5605
|
|
|
5849
5606
|
/**
|
|
5850
|
-
*
|
|
5607
|
+
* 마커의 바운딩 박스 계산
|
|
5851
5608
|
*
|
|
5852
5609
|
* 🎯 마커의 경우:
|
|
5853
5610
|
* - boxHeight: 본체만 (Hit Test 영역)
|
|
5854
5611
|
* - tailHeight: 꼬리 높이 (Viewport Culling용, 화면에 보이는 전체 영역)
|
|
5855
5612
|
*
|
|
5856
|
-
* @param item 마커
|
|
5613
|
+
* @param item 마커 데이터
|
|
5857
5614
|
* @returns 바운딩 박스 또는 null
|
|
5858
5615
|
*/
|
|
5859
5616
|
|
|
5860
5617
|
|
|
5861
5618
|
var computeBoundingBox = function (item) {
|
|
5862
|
-
|
|
5863
|
-
|
|
5864
|
-
|
|
5865
|
-
|
|
5866
|
-
|
|
5867
|
-
|
|
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
|
-
}
|
|
5619
|
+
// 마커: 중심점 기준 박스 크기 계산 (꼬리 포함)
|
|
5620
|
+
var offset = getOrComputeMarkerOffset(item);
|
|
5621
|
+
if (!offset) return null;
|
|
5622
|
+
var boxWidth = item.boxWidth || 50;
|
|
5623
|
+
var boxHeight = item.boxHeight || 28;
|
|
5624
|
+
var tailHeight = item.tailHeight || 0; // 🎯 tailHeight 사용 (Viewport Culling용)
|
|
5888
5625
|
|
|
5889
|
-
|
|
5890
|
-
|
|
5891
|
-
|
|
5892
|
-
|
|
5893
|
-
|
|
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
|
-
}
|
|
5626
|
+
return {
|
|
5627
|
+
minX: offset.x - boxWidth / 2,
|
|
5628
|
+
minY: offset.y - boxHeight - tailHeight,
|
|
5629
|
+
maxX: offset.x + boxWidth / 2,
|
|
5630
|
+
maxY: offset.y
|
|
5631
|
+
};
|
|
5910
5632
|
}; // --------------------------------------------------------------------------
|
|
5911
5633
|
// 유틸리티 함수: 공간 인덱싱
|
|
5912
5634
|
// --------------------------------------------------------------------------
|
|
@@ -5940,24 +5662,14 @@ var WoongCanvasLayer = function (props) {
|
|
|
5940
5662
|
|
|
5941
5663
|
|
|
5942
5664
|
var renderUtils = {
|
|
5943
|
-
getOrComputePolygonOffsets:
|
|
5665
|
+
getOrComputePolygonOffsets: function () {
|
|
5666
|
+
return null;
|
|
5667
|
+
},
|
|
5944
5668
|
getOrComputeMarkerOffset: getOrComputeMarkerOffset
|
|
5945
5669
|
};
|
|
5946
5670
|
/** Base Layer에서 사용할 빈 Set (재사용) */
|
|
5947
5671
|
|
|
5948
5672
|
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
|
-
}();
|
|
5961
5673
|
/**
|
|
5962
5674
|
* Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
|
|
5963
5675
|
*
|
|
@@ -6002,6 +5714,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
6002
5714
|
ctx: ctx,
|
|
6003
5715
|
items: visibleItems,
|
|
6004
5716
|
selectedIds: selectedIdsRef.current,
|
|
5717
|
+
hoveredItem: hovered,
|
|
6005
5718
|
utils: renderUtils
|
|
6006
5719
|
}); // hover된 항목을 최상단에 렌더링 (renderEvent가 없을 때만)
|
|
6007
5720
|
|
|
@@ -6013,6 +5726,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
6013
5726
|
ctx: ctx,
|
|
6014
5727
|
items: [hovered],
|
|
6015
5728
|
selectedIds: selectedIdsRef.current,
|
|
5729
|
+
hoveredItem: hovered,
|
|
6016
5730
|
utils: renderUtils
|
|
6017
5731
|
});
|
|
6018
5732
|
}
|
|
@@ -6229,54 +5943,35 @@ var WoongCanvasLayer = function (props) {
|
|
|
6229
5943
|
// --------------------------------------------------------------------------
|
|
6230
5944
|
|
|
6231
5945
|
/**
|
|
6232
|
-
* 특정 좌표의
|
|
5946
|
+
* 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
|
|
6233
5947
|
*
|
|
6234
5948
|
* topOnHover가 true일 때:
|
|
6235
5949
|
* - 현재 hover된 항목을 최우선으로 체크
|
|
6236
5950
|
* - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
|
|
6237
5951
|
*
|
|
6238
5952
|
* @param offset 검사할 좌표
|
|
6239
|
-
* @returns 찾은
|
|
5953
|
+
* @returns 찾은 마커 데이터 또는 null
|
|
6240
5954
|
*/
|
|
6241
5955
|
|
|
6242
5956
|
|
|
6243
5957
|
var findData = function (offset) {
|
|
6244
5958
|
// topOnHover가 true이고 현재 hover된 항목이 있으면, 그것을 먼저 체크
|
|
6245
5959
|
if (topOnHover && hoveredItemRef.current) {
|
|
6246
|
-
var hovered = hoveredItemRef.current;
|
|
5960
|
+
var hovered = hoveredItemRef.current;
|
|
6247
5961
|
|
|
6248
|
-
if (
|
|
6249
|
-
|
|
6250
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6251
|
-
}
|
|
6252
|
-
} // 마커인 경우
|
|
6253
|
-
else {
|
|
6254
|
-
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
6255
|
-
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6256
|
-
}
|
|
5962
|
+
if (isPointInMarkerData(offset, hovered, getOrComputeMarkerOffset)) {
|
|
5963
|
+
return hovered; // 여전히 hover된 항목 위에 있음
|
|
6257
5964
|
}
|
|
6258
5965
|
} // Spatial Index로 후보 항목만 빠르게 추출 (30,000개 → ~10개)
|
|
6259
5966
|
|
|
6260
5967
|
|
|
6261
|
-
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); //
|
|
6262
|
-
|
|
6263
|
-
if (dataType === CanvasDataType.MARKER) {
|
|
6264
|
-
// 마커 체크
|
|
6265
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6266
|
-
var item = candidates[i];
|
|
5968
|
+
var candidates = spatialIndexRef.current.queryPoint(offset.x, offset.y); // 마커 체크
|
|
6267
5969
|
|
|
6268
|
-
|
|
6269
|
-
|
|
6270
|
-
}
|
|
6271
|
-
}
|
|
6272
|
-
} else {
|
|
6273
|
-
// 폴리곤 체크
|
|
6274
|
-
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
6275
|
-
var item = candidates[i];
|
|
5970
|
+
for (var i = candidates.length - 1; i >= 0; i--) {
|
|
5971
|
+
var item = candidates[i];
|
|
6276
5972
|
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
}
|
|
5973
|
+
if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
|
|
5974
|
+
return item;
|
|
6280
5975
|
}
|
|
6281
5976
|
}
|
|
6282
5977
|
|
|
@@ -6391,7 +6086,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
6391
6086
|
}
|
|
6392
6087
|
}
|
|
6393
6088
|
} catch (error) {
|
|
6394
|
-
console.error('[
|
|
6089
|
+
console.error('[WoongCanvasMarker] handleClick error:', error);
|
|
6395
6090
|
}
|
|
6396
6091
|
};
|
|
6397
6092
|
/**
|
|
@@ -6417,7 +6112,7 @@ var WoongCanvasLayer = function (props) {
|
|
|
6417
6112
|
if (hoveredItem && onMouseOver) onMouseOver(hoveredItem);
|
|
6418
6113
|
}
|
|
6419
6114
|
} catch (error) {
|
|
6420
|
-
console.error('[
|
|
6115
|
+
console.error('[WoongCanvasMarker] handleMouseMove error:', error);
|
|
6421
6116
|
}
|
|
6422
6117
|
};
|
|
6423
6118
|
/**
|
|
@@ -9562,4 +9257,4 @@ function MintMap(_a) {
|
|
|
9562
9257
|
}), loading));
|
|
9563
9258
|
}
|
|
9564
9259
|
|
|
9565
|
-
export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController,
|
|
9260
|
+
export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, 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, WoongCanvasMarker as WoongCanvasLayer, WoongCanvasMarker, WoongCanvasProvider, calculateTextBoxWidth, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useMarkerMoving, useMintMapController, useWoongCanvasContext, waiting };
|
package/dist/index.js
CHANGED
|
@@ -16,11 +16,11 @@ var CanvasMarkerHanquf = require('./components/mint-map/core/advanced/canvas/Can
|
|
|
16
16
|
var CanvasMarkerClaude = require('./components/mint-map/core/advanced/canvas/CanvasMarkerClaude.js');
|
|
17
17
|
var MapBuildingProjection = require('./components/mint-map/core/advanced/MapBuildingProjection.js');
|
|
18
18
|
var MapLoadingComponents = require('./components/mint-map/core/advanced/MapLoadingComponents.js');
|
|
19
|
-
var
|
|
20
|
-
var types = require('./components/mint-map/core/advanced/
|
|
21
|
-
var utils = require('./components/mint-map/core/advanced/
|
|
22
|
-
var context = require('./components/mint-map/core/advanced/
|
|
23
|
-
var performance = require('./components/mint-map/core/advanced/
|
|
19
|
+
var WoongCanvasMarker = require('./components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.js');
|
|
20
|
+
var types = require('./components/mint-map/core/advanced/shared/types.js');
|
|
21
|
+
var utils = require('./components/mint-map/core/advanced/shared/utils.js');
|
|
22
|
+
var context = require('./components/mint-map/core/advanced/shared/context.js');
|
|
23
|
+
var performance = require('./components/mint-map/core/advanced/shared/performance.js');
|
|
24
24
|
var MarkerMovingHook = require('./components/mint-map/core/hooks/MarkerMovingHook.js');
|
|
25
25
|
var MintMapProvider = require('./components/mint-map/core/provider/MintMapProvider.js');
|
|
26
26
|
var animation = require('./components/mint-map/core/util/animation.js');
|
|
@@ -60,7 +60,8 @@ exports.CanvasMarkerClaude = CanvasMarkerClaude.CanvasMarkerClaude;
|
|
|
60
60
|
exports.MapBuildingProjection = MapBuildingProjection.MapBuildingProjection;
|
|
61
61
|
exports.MapLoadingWithImage = MapLoadingComponents.MapLoadingWithImage;
|
|
62
62
|
exports.PointLoading = MapLoadingComponents.PointLoading;
|
|
63
|
-
exports.WoongCanvasLayer =
|
|
63
|
+
exports.WoongCanvasLayer = WoongCanvasMarker["default"];
|
|
64
|
+
exports.WoongCanvasMarker = WoongCanvasMarker["default"];
|
|
64
65
|
Object.defineProperty(exports, 'CanvasDataType', {
|
|
65
66
|
enumerable: true,
|
|
66
67
|
get: function () { return types.CanvasDataType; }
|
|
@@ -72,8 +73,8 @@ exports.hexToRgba = utils.hexToRgba;
|
|
|
72
73
|
exports.isPointInMarkerData = utils.isPointInMarkerData;
|
|
73
74
|
exports.isPointInPolygon = utils.isPointInPolygon;
|
|
74
75
|
exports.isPointInPolygonData = utils.isPointInPolygonData;
|
|
75
|
-
exports.
|
|
76
|
-
exports.
|
|
76
|
+
exports.WoongCanvasProvider = context.WoongCanvasProvider;
|
|
77
|
+
exports.useWoongCanvasContext = context.useWoongCanvasContext;
|
|
77
78
|
exports.DEFAULT_CULLING_MARGIN = performance.DEFAULT_CULLING_MARGIN;
|
|
78
79
|
exports.DEFAULT_MAX_CACHE_SIZE = performance.DEFAULT_MAX_CACHE_SIZE;
|
|
79
80
|
exports.LRUCache = performance.LRUCache;
|