@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.
Files changed (27) hide show
  1. package/dist/components/mint-map/core/MintMapCore.js +5 -5
  2. package/dist/components/mint-map/core/advanced/index.d.ts +1 -1
  3. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.d.ts +5 -5
  4. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/context.js +8 -8
  5. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.d.ts +1 -1
  6. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/performance.js +1 -1
  7. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/types.d.ts +8 -11
  8. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.d.ts +2 -2
  9. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/utils.js +3 -3
  10. package/dist/components/mint-map/core/advanced/woongCanvasMarker/WoongCanvasMarker.d.ts +97 -0
  11. package/dist/components/mint-map/core/advanced/{woongCanvas/WoongCanvasLayer.js → woongCanvasMarker/WoongCanvasMarker.js} +42 -123
  12. package/dist/components/mint-map/core/advanced/woongCanvasMarker/index.d.ts +4 -0
  13. package/dist/components/mint-map/core/advanced/woongCanvasPolygon/WoongCanvasPolygon.d.ts +113 -0
  14. package/dist/components/mint-map/core/advanced/woongCanvasPolygon/index.d.ts +3 -0
  15. package/dist/components/mint-map/core/advanced/{woongCanvas/shared → woongCanvasPolygon}/renderer.d.ts +1 -1
  16. package/dist/components/mint-map/google/GoogleMintMapController.js +4 -4
  17. package/dist/components/mint-map/kakao/KakaoMintMapController.js +4 -4
  18. package/dist/components/mint-map/naver/NaverMintMapController.js +4 -4
  19. package/dist/index.es.js +43 -350
  20. package/dist/index.js +9 -8
  21. package/dist/index.umd.js +46 -352
  22. package/package.json +1 -1
  23. package/dist/components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.d.ts +0 -162
  24. package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +0 -3
  25. package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +0 -234
  26. /package/dist/components/mint-map/core/advanced/{woongCanvas/shared → shared}/index.d.ts +0 -0
  27. /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 KonvaMarkerContext = React.createContext(null);
1000
- var KonvaMarkerProvider = function (_a) {
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(KonvaMarkerContext.Provider, {
1145
+ return React__default["default"].createElement(WoongCanvasContext.Provider, {
1146
1146
  value: contextValue
1147
1147
  }, children);
1148
1148
  };
1149
- var useKonvaMarkerContext = function () {
1150
- var context = React.useContext(KonvaMarkerContext);
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
- * WoongKonvaMarker 사용 사례에 최적:
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(KonvaMarkerProvider, null, children), React__default["default"].createElement("div", {
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 WoongCanvasLayer = function (props) {
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
- options = tslib.__rest(props, ["data", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
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 = useKonvaMarkerContext();
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
- if (dataType === exports.CanvasDataType.POLYGON) {
5867
- // 폴리곤: 모든 좌표의 최소/최대값 계산
5868
- var offsets = getOrComputePolygonOffsets(item);
5869
- if (!offsets) return null;
5870
- var minX = Infinity,
5871
- minY = Infinity,
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
- return {
5894
- minX: minX,
5895
- minY: minY,
5896
- maxX: maxX,
5897
- maxY: maxY
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: 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
- * 특정 좌표의 마커/폴리곤 데이터 찾기 (Spatial Index 사용)
5950
+ * 특정 좌표의 마커 데이터 찾기 (Spatial Index 사용)
6239
5951
  *
6240
5952
  * topOnHover가 true일 때:
6241
5953
  * - 현재 hover된 항목을 최우선으로 체크
6242
5954
  * - 시각적으로 최상단에 있는 항목이 hit test에서도 우선됨
6243
5955
  *
6244
5956
  * @param offset 검사할 좌표
6245
- * @returns 찾은 마커/폴리곤 데이터 또는 null
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 (dataType === exports.CanvasDataType.POLYGON) {
6255
- if (isPointInPolygonData(offset, hovered, getOrComputePolygonOffsets)) {
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
- if (isPointInMarkerData(offset, item, getOrComputeMarkerOffset)) {
6275
- return item;
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
- if (isPointInPolygonData(offset, item, getOrComputePolygonOffsets)) {
6284
- return item;
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('[WoongKonvaMarker] handleClick error:', 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('[WoongKonvaMarker] handleMouseMove error:', 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 = 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 });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mint-ui/map",
3
- "version": "1.2.0-test.31",
3
+ "version": "1.2.0-test.32",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",