@mint-ui/map 1.2.0-test.10 → 1.2.0-test.11

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.
@@ -27,9 +27,12 @@ export declare class NaverMintMapController extends MintMapController {
27
27
  createMarker(marker: Marker): void;
28
28
  updateMarker(marker: Marker, options: MarkerOptions): void;
29
29
  private markerMaxZIndex;
30
+ private markerOriginalZIndex;
30
31
  private getMaxZIndex;
32
+ private getCurrentZIndex;
31
33
  setMarkerZIndex(marker: Marker, zIndex: number): void;
32
34
  markerToTheTop(marker: Marker): void;
35
+ restoreMarkerZIndex(marker: Marker): void;
33
36
  clearDrawable(drawable: Drawable): boolean;
34
37
  private dragged;
35
38
  isMapDragged(): boolean;
@@ -20,7 +20,7 @@ require('../core/util/geo.js');
20
20
  var polygon = require('../core/util/polygon.js');
21
21
  require('../core/advanced/canvas/CanvasMarkerClaude.js');
22
22
  require('../core/advanced/MapLoadingComponents.js');
23
- require('../core/advanced/woongCanvas/WoongKonvaMarker.js');
23
+ require('../core/advanced/woongCanvas/WoongCanvasLayer.js');
24
24
  require('../core/advanced/woongCanvas/shared/types.js');
25
25
  require('../core/advanced/woongCanvas/shared/context.js');
26
26
  require('../core/advanced/woongCanvas/shared/performance.js');
@@ -340,20 +340,54 @@ function (_super) {
340
340
  }
341
341
  };
342
342
 
343
- NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
343
+ NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
344
344
  if (this.map && marker.element && marker.element instanceof HTMLElement) {
345
345
  var parent_1 = marker.element.parentElement;
346
346
 
347
- if (parent_1) {
348
- parent_1.style.zIndex = String(zIndex);
347
+ if (parent_1 && parent_1.style.zIndex) {
348
+ var zIndex = Number(parent_1.style.zIndex);
349
+ return isNaN(zIndex) ? undefined : zIndex;
350
+ }
351
+ }
352
+
353
+ return undefined;
354
+ };
355
+
356
+ NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
357
+ if (this.map && marker.element && marker.element instanceof HTMLElement) {
358
+ var parent_2 = marker.element.parentElement;
359
+
360
+ if (parent_2) {
361
+ parent_2.style.zIndex = String(zIndex);
349
362
  }
350
363
  }
351
364
  };
352
365
 
353
366
  NaverMintMapController.prototype.markerToTheTop = function (marker) {
367
+ // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
368
+ if (this.markerOriginalZIndex !== undefined) {
369
+ return;
370
+ }
371
+
372
+ var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
373
+
374
+ this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
354
375
  this.setMarkerZIndex(marker, this.getMaxZIndex(1));
355
376
  };
356
377
 
378
+ NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
379
+ if (this.markerOriginalZIndex !== undefined) {
380
+ if (this.markerOriginalZIndex === null) {
381
+ // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
382
+ this.setMarkerZIndex(marker, 0);
383
+ } else {
384
+ this.setMarkerZIndex(marker, this.markerOriginalZIndex);
385
+ }
386
+
387
+ this.markerOriginalZIndex = undefined;
388
+ }
389
+ };
390
+
357
391
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
358
392
  var _a;
359
393
 
package/dist/index.es.js CHANGED
@@ -944,6 +944,23 @@ var isPointInMarkerData = function (clickedOffset, markerData, getMarkerOffset)
944
944
  var y = markerOffset.y - boxHeight - tailHeight;
945
945
  return clickedOffset.x >= x && clickedOffset.x <= x + boxWidth && clickedOffset.y >= y && clickedOffset.y <= y + boxHeight;
946
946
  };
947
+ var hexToRgba = function (hexColor, alpha) {
948
+ if (alpha === void 0) {
949
+ alpha = 1;
950
+ } // NOTE: 입력된 hexColor에서 "#" 제거
951
+
952
+
953
+ var hex = hexColor.replace('#', ''); // NOTE: 6자리일 경우 알파 값은 사용자가 제공한 alpha 값으로 설정
954
+
955
+ if (hex.length === 6) {
956
+ var r = parseInt(hex.substring(0, 2), 16);
957
+ var g = parseInt(hex.substring(2, 4), 16);
958
+ var b = parseInt(hex.substring(4, 6), 16);
959
+ return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
960
+ }
961
+
962
+ throw new Error('Invalid hex color format');
963
+ };
947
964
 
948
965
  var KonvaMarkerContext = createContext(null);
949
966
  var KonvaMarkerProvider = function (_a) {
@@ -2754,7 +2771,7 @@ function MapMarkerWrapper(_a) {
2754
2771
  var onMouseOverHandler = function (e) {
2755
2772
  var _a;
2756
2773
 
2757
- var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
2774
+ var marker = markerRef.current;
2758
2775
 
2759
2776
  if (marker) {
2760
2777
  var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
@@ -2767,6 +2784,25 @@ function MapMarkerWrapper(_a) {
2767
2784
 
2768
2785
  next && topOnHover && controller.markerToTheTop(marker);
2769
2786
  }
2787
+ }; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
2788
+
2789
+
2790
+ var onMouseLeaveHandler = function (e) {
2791
+ var _a;
2792
+
2793
+ var marker = markerRef.current;
2794
+
2795
+ if (marker) {
2796
+ var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
2797
+ var next = true;
2798
+
2799
+ if (mouseOutHandler) {
2800
+ var hasNext = mouseOutHandler(e);
2801
+ hasNext !== undefined && (next = hasNext);
2802
+ }
2803
+
2804
+ next && topOnHover && controller.restoreMarkerZIndex(marker);
2805
+ }
2770
2806
  }; //create object
2771
2807
 
2772
2808
 
@@ -2784,10 +2820,12 @@ function MapMarkerWrapper(_a) {
2784
2820
  }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
2785
2821
 
2786
2822
  divElement.addEventListener('mouseover', onMouseOverHandler);
2823
+ divElement.addEventListener('mouseleave', onMouseLeaveHandler);
2787
2824
  return function () {
2788
2825
  divElement.removeEventListener('click', onClickHandler);
2789
2826
  divElement.removeEventListener('mousedown', onMousedownHandler);
2790
2827
  divElement.removeEventListener('mouseover', onMouseOverHandler);
2828
+ divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
2791
2829
 
2792
2830
  if (markerRef.current) {
2793
2831
  controller.clearDrawable(markerRef.current);
@@ -5353,6 +5391,225 @@ function LoadingImage(_a) {
5353
5391
  }))));
5354
5392
  }
5355
5393
 
5394
+ /**
5395
+ * 폴리곤 렌더링 유틸리티
5396
+ *
5397
+ * 이 파일은 폴리곤 렌더링을 위한 헬퍼 함수와 팩토리 함수를 제공합니다.
5398
+ */
5399
+
5400
+ /**
5401
+ * 폴리곤 그리기 헬퍼 함수 (도넛 폴리곤 지원)
5402
+ */
5403
+ var drawPolygon = function (_a) {
5404
+ var ctx = _a.ctx,
5405
+ polygonOffsets = _a.polygonOffsets,
5406
+ isDonutPolygon = _a.isDonutPolygon,
5407
+ fillColor = _a.fillColor,
5408
+ strokeColor = _a.strokeColor,
5409
+ lineWidth = _a.lineWidth;
5410
+
5411
+ for (var _i = 0, polygonOffsets_1 = polygonOffsets; _i < polygonOffsets_1.length; _i++) {
5412
+ var multiPolygon = polygonOffsets_1[_i];
5413
+
5414
+ if (isDonutPolygon) {
5415
+ ctx.beginPath(); // 1. 외부 폴리곤 그리기
5416
+
5417
+ if (multiPolygon[0] && multiPolygon[0].length > 0) {
5418
+ ctx.moveTo(multiPolygon[0][0][0], multiPolygon[0][0][1]);
5419
+
5420
+ for (var i = 1; i < multiPolygon[0].length; i++) {
5421
+ ctx.lineTo(multiPolygon[0][i][0], multiPolygon[0][i][1]);
5422
+ }
5423
+
5424
+ ctx.closePath();
5425
+ } // 2. 내부 폴리곤 (구멍들) 그리기 - 같은 path에 추가
5426
+
5427
+
5428
+ for (var j = 1; j < multiPolygon.length; j++) {
5429
+ var innerPolygon = multiPolygon[j];
5430
+ if (innerPolygon.length === 0) continue;
5431
+ ctx.moveTo(innerPolygon[0][0], innerPolygon[0][1]);
5432
+
5433
+ for (var i = 1; i < innerPolygon.length; i++) {
5434
+ ctx.lineTo(innerPolygon[i][0], innerPolygon[i][1]);
5435
+ }
5436
+
5437
+ ctx.closePath();
5438
+ } // 3. evenodd fill rule로 구멍 뚫기
5439
+
5440
+
5441
+ ctx.fillStyle = fillColor;
5442
+ ctx.fill('evenodd'); // 4. 외곽선 그리기
5443
+
5444
+ ctx.strokeStyle = strokeColor;
5445
+ ctx.lineWidth = lineWidth;
5446
+ ctx.stroke();
5447
+ } else {
5448
+ // 일반 폴리곤
5449
+ for (var _b = 0, multiPolygon_1 = multiPolygon; _b < multiPolygon_1.length; _b++) {
5450
+ var polygonGroup = multiPolygon_1[_b];
5451
+ if (!polygonGroup.length) continue;
5452
+ ctx.beginPath();
5453
+ var firstPoint = polygonGroup[0];
5454
+ ctx.moveTo(firstPoint[0], firstPoint[1]);
5455
+
5456
+ for (var i = 1; i < polygonGroup.length; i++) {
5457
+ var point = polygonGroup[i];
5458
+ ctx.lineTo(point[0], point[1]);
5459
+ }
5460
+
5461
+ ctx.closePath();
5462
+ ctx.fillStyle = fillColor;
5463
+ ctx.strokeStyle = strokeColor;
5464
+ ctx.lineWidth = lineWidth;
5465
+ ctx.fill();
5466
+ ctx.stroke();
5467
+ }
5468
+ }
5469
+ }
5470
+ };
5471
+ /**
5472
+ * 폴리곤 Base 렌더링 함수
5473
+ *
5474
+ * @param baseFillColor 기본 폴리곤 채우기 색상
5475
+ * @param baseStrokeColor 기본 폴리곤 테두리 색상
5476
+ * @param baseLineWidth 기본 폴리곤 테두리 두께
5477
+ * @returns Base Layer 렌더링 함수
5478
+ *
5479
+ * @example
5480
+ * const renderBase = renderPolygonBase(
5481
+ * 'rgba(255, 100, 100, 0.5)',
5482
+ * 'rgba(200, 50, 50, 0.8)',
5483
+ * 2
5484
+ * );
5485
+ */
5486
+
5487
+ var renderPolygonBase = function (baseFillColor, baseStrokeColor, baseLineWidth) {
5488
+ return function (_a) {
5489
+ var ctx = _a.ctx,
5490
+ items = _a.items,
5491
+ selectedIds = _a.selectedIds,
5492
+ utils = _a.utils;
5493
+
5494
+ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
5495
+ var item = items_1[_i]; // 선택된 항목은 Event Layer에서 그림
5496
+
5497
+ if (selectedIds.has(item.id)) continue;
5498
+ if (!item.paths) continue;
5499
+ var polygonOffsets = utils.getOrComputePolygonOffsets(item);
5500
+ if (!polygonOffsets) continue;
5501
+ drawPolygon({
5502
+ ctx: ctx,
5503
+ polygonOffsets: polygonOffsets,
5504
+ isDonutPolygon: item.isDonutPolygon || false,
5505
+ fillColor: baseFillColor,
5506
+ strokeColor: baseStrokeColor,
5507
+ lineWidth: baseLineWidth
5508
+ });
5509
+ }
5510
+ };
5511
+ };
5512
+ /**
5513
+ * 폴리곤 Event 렌더링 함수
5514
+ *
5515
+ * @param selectedFillColor 선택된 폴리곤 채우기 색상
5516
+ * @param selectedStrokeColor 선택된 폴리곤 테두리 색상
5517
+ * @param selectedLineWidth 선택된 폴리곤 테두리 두께
5518
+ * @param activeFillColor 마지막 선택된 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
5519
+ * @param activeStrokeColor 마지막 선택된 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
5520
+ * @param activeLineWidth 마지막 선택된 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
5521
+ * @param hoveredFillColor Hover 시 폴리곤 채우기 색상 (선택, 기본값: selectedFillColor)
5522
+ * @param hoveredStrokeColor Hover 시 폴리곤 테두리 색상 (선택, 기본값: selectedStrokeColor)
5523
+ * @param hoveredLineWidth Hover 시 폴리곤 테두리 두께 (선택, 기본값: selectedLineWidth)
5524
+ * @returns Event Layer 렌더링 함수
5525
+ *
5526
+ * @example
5527
+ * const renderEvent = renderPolygonEvent(
5528
+ * 'rgba(255, 193, 7, 0.7)',
5529
+ * 'rgba(255, 152, 0, 1)',
5530
+ * 4,
5531
+ * 'rgba(255, 0, 0, 0.8)',
5532
+ * undefined,
5533
+ * undefined,
5534
+ * 'rgba(100, 150, 255, 0.8)'
5535
+ * );
5536
+ */
5537
+
5538
+ var renderPolygonEvent = function (selectedFillColor, selectedStrokeColor, selectedLineWidth, activeFillColor, activeStrokeColor, activeLineWidth, hoveredFillColor, hoveredStrokeColor, hoveredLineWidth) {
5539
+ // 기본값 설정 (selected 기준)
5540
+ var _activeFillColor = activeFillColor || selectedFillColor;
5541
+
5542
+ var _activeStrokeColor = activeStrokeColor || selectedStrokeColor;
5543
+
5544
+ var _activeLineWidth = activeLineWidth || selectedLineWidth;
5545
+
5546
+ var _hoveredFillColor = hoveredFillColor || selectedFillColor;
5547
+
5548
+ var _hoveredStrokeColor = hoveredStrokeColor || selectedStrokeColor;
5549
+
5550
+ var _hoveredLineWidth = hoveredLineWidth || selectedLineWidth;
5551
+
5552
+ return function (_a) {
5553
+ var ctx = _a.ctx,
5554
+ hoveredItem = _a.hoveredItem,
5555
+ utils = _a.utils,
5556
+ selectedItems = _a.selectedItems,
5557
+ selectedItem = _a.selectedItem; // 1. 선택된 항목들 그리기 (마지막 선택 항목과 호버된 항목 제외)
5558
+
5559
+ if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
5560
+ for (var _i = 0, selectedItems_1 = selectedItems; _i < selectedItems_1.length; _i++) {
5561
+ var item = selectedItems_1[_i]; // 마지막 선택 항목과 호버된 항목은 나중에 따로 그림
5562
+
5563
+ if (item.id === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) || (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) === item.id) continue;
5564
+ if (!item.paths) continue;
5565
+ var polygonOffsets = utils.getOrComputePolygonOffsets(item);
5566
+ if (!polygonOffsets) continue;
5567
+ drawPolygon({
5568
+ ctx: ctx,
5569
+ polygonOffsets: polygonOffsets,
5570
+ isDonutPolygon: item.isDonutPolygon || false,
5571
+ fillColor: selectedFillColor,
5572
+ strokeColor: selectedStrokeColor,
5573
+ lineWidth: selectedLineWidth
5574
+ });
5575
+ }
5576
+ } // 2. 마지막 선택된 항목 그리기 (호버되지 않은 경우)
5577
+
5578
+
5579
+ if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.paths) && (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.id) !== selectedItem.id) {
5580
+ var polygonOffsets = utils.getOrComputePolygonOffsets(selectedItem);
5581
+
5582
+ if (polygonOffsets) {
5583
+ drawPolygon({
5584
+ ctx: ctx,
5585
+ polygonOffsets: polygonOffsets,
5586
+ isDonutPolygon: selectedItem.isDonutPolygon || false,
5587
+ fillColor: _activeFillColor,
5588
+ strokeColor: _activeStrokeColor,
5589
+ lineWidth: _activeLineWidth
5590
+ });
5591
+ }
5592
+ } // 3. 호버된 항목 그리기 (가장 위에 표시)
5593
+
5594
+
5595
+ if (hoveredItem === null || hoveredItem === void 0 ? void 0 : hoveredItem.paths) {
5596
+ var polygonOffsets = utils.getOrComputePolygonOffsets(hoveredItem);
5597
+ if (!polygonOffsets) return;
5598
+ var isSelected = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.some(function (item) {
5599
+ return item.id === hoveredItem.id;
5600
+ });
5601
+ drawPolygon({
5602
+ ctx: ctx,
5603
+ polygonOffsets: polygonOffsets,
5604
+ isDonutPolygon: hoveredItem.isDonutPolygon || false,
5605
+ fillColor: isSelected ? _activeFillColor : _hoveredFillColor,
5606
+ strokeColor: isSelected ? _activeStrokeColor : _hoveredStrokeColor,
5607
+ lineWidth: isSelected ? _activeLineWidth : _hoveredLineWidth
5608
+ });
5609
+ }
5610
+ };
5611
+ };
5612
+
5356
5613
  // 메인 컴포넌트
5357
5614
  // ============================================================================
5358
5615
 
@@ -5368,30 +5625,27 @@ function LoadingImage(_a) {
5368
5625
  * @template T 마커 데이터의 추가 속성 타입
5369
5626
  */
5370
5627
 
5371
- var WoongKonvaMarkerComponent = function (_a) {
5372
- var markers = _a.markers,
5373
- dataType = _a.dataType,
5374
- onClick = _a.onClick,
5375
- onMouseOver = _a.onMouseOver,
5376
- onMouseOut = _a.onMouseOut,
5377
- renderBase = _a.renderBase,
5378
- renderAnimation = _a.renderAnimation,
5379
- renderEvent = _a.renderEvent,
5380
- _b = _a.enableMultiSelect,
5381
- enableMultiSelect = _b === void 0 ? false : _b,
5382
- _c = _a.topOnHover,
5383
- topOnHover = _c === void 0 ? false : _c,
5384
- _d = _a.enableViewportCulling,
5385
- enableViewportCulling = _d === void 0 ? true : _d,
5386
- _e = _a.cullingMargin,
5387
- cullingMargin = _e === void 0 ? DEFAULT_CULLING_MARGIN : _e,
5388
- _f = _a.maxCacheSize,
5389
- maxCacheSize = _f === void 0 ? DEFAULT_MAX_CACHE_SIZE : _f,
5390
- externalSelectedItems = _a.selectedItems,
5391
- externalSelectedItem = _a.selectedItem,
5392
- _g = _a.disableInteraction,
5393
- disableInteraction = _g === void 0 ? false : _g,
5394
- options = __rest(_a, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "renderBase", "renderAnimation", "renderEvent", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
5628
+ var WoongCanvasLayerComponent = function (props) {
5629
+ var markers = props.markers,
5630
+ dataType = props.dataType,
5631
+ onClick = props.onClick,
5632
+ onMouseOver = props.onMouseOver,
5633
+ onMouseOut = props.onMouseOut,
5634
+ _a = props.enableMultiSelect,
5635
+ enableMultiSelect = _a === void 0 ? false : _a,
5636
+ _b = props.topOnHover,
5637
+ topOnHover = _b === void 0 ? false : _b,
5638
+ _c = props.enableViewportCulling,
5639
+ enableViewportCulling = _c === void 0 ? true : _c,
5640
+ _d = props.cullingMargin,
5641
+ cullingMargin = _d === void 0 ? DEFAULT_CULLING_MARGIN : _d,
5642
+ _e = props.maxCacheSize,
5643
+ maxCacheSize = _e === void 0 ? DEFAULT_MAX_CACHE_SIZE : _e,
5644
+ externalSelectedItems = props.selectedItems,
5645
+ externalSelectedItem = props.selectedItem,
5646
+ _f = props.disableInteraction,
5647
+ disableInteraction = _f === void 0 ? false : _f,
5648
+ options = __rest(props, ["markers", "dataType", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction"]); // --------------------------------------------------------------------------
5395
5649
  // Hooks & Context
5396
5650
  // --------------------------------------------------------------------------
5397
5651
 
@@ -5669,7 +5923,7 @@ var WoongKonvaMarkerComponent = function (_a) {
5669
5923
  }
5670
5924
  }
5671
5925
  }; // --------------------------------------------------------------------------
5672
- // 렌더링 함수
5926
+ // 렌더링 함수 결정 (dataType에 따라)
5673
5927
  // --------------------------------------------------------------------------
5674
5928
 
5675
5929
  /**
@@ -5684,6 +5938,18 @@ var WoongKonvaMarkerComponent = function (_a) {
5684
5938
  /** Base Layer에서 사용할 빈 Set (재사용) */
5685
5939
 
5686
5940
  useRef(new Set());
5941
+ /**
5942
+ * 실제 사용할 렌더링 함수 결정
5943
+ * - MARKER: 외부에서 전달받은 renderBase 사용 (필수)
5944
+ * - POLYGON: renderer.ts의 팩토리 함수로 생성 (props 기반)
5945
+ */
5946
+
5947
+ var renderBase = dataType === CanvasDataType.MARKER ? props.renderBase : renderPolygonBase(props.baseFillColor, props.baseStrokeColor, props.baseLineWidth);
5948
+ var renderAnimation = dataType === CanvasDataType.MARKER ? props.renderAnimation : undefined;
5949
+ var renderEvent = dataType === CanvasDataType.MARKER ? props.renderEvent : function () {
5950
+ var polygonProps = props;
5951
+ return renderPolygonEvent(polygonProps.selectedFillColor, polygonProps.selectedStrokeColor, polygonProps.selectedLineWidth, polygonProps.activeFillColor, polygonProps.activeStrokeColor, polygonProps.activeLineWidth, polygonProps.hoveredFillColor, polygonProps.hoveredStrokeColor, polygonProps.hoveredLineWidth);
5952
+ }();
5687
5953
  /**
5688
5954
  * Base 레이어 렌더링 (뷰포트 컬링 적용, 선택된 마커 제외)
5689
5955
  *
@@ -6389,13 +6655,11 @@ var WoongKonvaMarkerComponent = function (_a) {
6389
6655
  }, [markers]);
6390
6656
  return createPortal(React.createElement("div", {
6391
6657
  ref: containerRef,
6392
- style: __assign({
6658
+ style: {
6393
6659
  position: 'absolute',
6394
6660
  width: '100%',
6395
6661
  height: '100%'
6396
- }, disableInteraction && {
6397
- pointerEvents: 'none'
6398
- })
6662
+ }
6399
6663
  }), divElement);
6400
6664
  };
6401
6665
  /**
@@ -6409,7 +6673,7 @@ var WoongKonvaMarkerComponent = function (_a) {
6409
6673
  */
6410
6674
 
6411
6675
 
6412
- var WoongKonvaMarker = React.memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
6676
+ var WoongCanvasLayer = React.memo(WoongCanvasLayerComponent, function (prevProps, nextProps) {
6413
6677
  // 1. markers 비교
6414
6678
  var prevMarkers = prevProps.markers;
6415
6679
  var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
@@ -7193,20 +7457,54 @@ function (_super) {
7193
7457
  }
7194
7458
  };
7195
7459
 
7196
- NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
7460
+ NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
7197
7461
  if (this.map && marker.element && marker.element instanceof HTMLElement) {
7198
7462
  var parent_1 = marker.element.parentElement;
7199
7463
 
7200
- if (parent_1) {
7201
- parent_1.style.zIndex = String(zIndex);
7464
+ if (parent_1 && parent_1.style.zIndex) {
7465
+ var zIndex = Number(parent_1.style.zIndex);
7466
+ return isNaN(zIndex) ? undefined : zIndex;
7467
+ }
7468
+ }
7469
+
7470
+ return undefined;
7471
+ };
7472
+
7473
+ NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
7474
+ if (this.map && marker.element && marker.element instanceof HTMLElement) {
7475
+ var parent_2 = marker.element.parentElement;
7476
+
7477
+ if (parent_2) {
7478
+ parent_2.style.zIndex = String(zIndex);
7202
7479
  }
7203
7480
  }
7204
7481
  };
7205
7482
 
7206
7483
  NaverMintMapController.prototype.markerToTheTop = function (marker) {
7484
+ // 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
7485
+ if (this.markerOriginalZIndex !== undefined) {
7486
+ return;
7487
+ }
7488
+
7489
+ var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
7490
+
7491
+ this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
7207
7492
  this.setMarkerZIndex(marker, this.getMaxZIndex(1));
7208
7493
  };
7209
7494
 
7495
+ NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
7496
+ if (this.markerOriginalZIndex !== undefined) {
7497
+ if (this.markerOriginalZIndex === null) {
7498
+ // 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
7499
+ this.setMarkerZIndex(marker, 0);
7500
+ } else {
7501
+ this.setMarkerZIndex(marker, this.markerOriginalZIndex);
7502
+ }
7503
+
7504
+ this.markerOriginalZIndex = undefined;
7505
+ }
7506
+ };
7507
+
7210
7508
  NaverMintMapController.prototype.clearDrawable = function (drawable) {
7211
7509
  var _a;
7212
7510
 
@@ -7961,6 +8259,10 @@ function (_super) {
7961
8259
  }
7962
8260
  };
7963
8261
 
8262
+ GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
8263
+ // 이 기능은 Naver Maps에서만 사용 가능합니다.
8264
+ };
8265
+
7964
8266
  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
7965
8267
  if (drawable && drawable.native) {
7966
8268
  if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
@@ -8683,6 +8985,10 @@ function (_super) {
8683
8985
  }
8684
8986
  };
8685
8987
 
8988
+ KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
8989
+ // 이 기능은 Naver Maps에서만 사용 가능합니다.
8990
+ };
8991
+
8686
8992
  KakaoMintMapController.prototype.clearDrawable = function (drawable) {
8687
8993
  var _this = this;
8688
8994
 
@@ -9242,4 +9548,4 @@ function MintMap(_a) {
9242
9548
  }), loading));
9243
9549
  }
9244
9550
 
9245
- export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongKonvaMarker, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };
9551
+ export { AnimationPlayer, Bounds, CanvasDataType, CanvasMarker, CanvasMarkerClaude, CanvasMarkerHanquf, CircleMarker, DEFAULT_CULLING_MARGIN, DEFAULT_MAX_CACHE_SIZE, Drawable, GeoCalulator, GoogleMintMapController, KonvaMarkerProvider, LRUCache, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SPATIAL_GRID_CELL_SIZE, SVGCircle, SVGPolygon, SVGRect, Spacing, SpatialHashGrid, Status, WoongCanvasLayer, computeMarkerOffset, computePolygonOffsets, getClusterInfo, getMapOfType, hexToRgba, isPointInMarkerData, isPointInPolygon, isPointInPolygonData, log, useKonvaMarkerContext, useMarkerMoving, useMintMapController, waiting };
package/dist/index.js CHANGED
@@ -16,7 +16,7 @@ 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 WoongKonvaMarker = require('./components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.js');
19
+ var WoongCanvasLayer = require('./components/mint-map/core/advanced/woongCanvas/WoongCanvasLayer.js');
20
20
  var types = require('./components/mint-map/core/advanced/woongCanvas/shared/types.js');
21
21
  var utils = require('./components/mint-map/core/advanced/woongCanvas/shared/utils.js');
22
22
  var context = require('./components/mint-map/core/advanced/woongCanvas/shared/context.js');
@@ -60,13 +60,14 @@ exports.CanvasMarkerClaude = CanvasMarkerClaude.CanvasMarkerClaude;
60
60
  exports.MapBuildingProjection = MapBuildingProjection.MapBuildingProjection;
61
61
  exports.MapLoadingWithImage = MapLoadingComponents.MapLoadingWithImage;
62
62
  exports.PointLoading = MapLoadingComponents.PointLoading;
63
- exports.WoongKonvaMarker = WoongKonvaMarker["default"];
63
+ exports.WoongCanvasLayer = WoongCanvasLayer["default"];
64
64
  Object.defineProperty(exports, 'CanvasDataType', {
65
65
  enumerable: true,
66
66
  get: function () { return types.CanvasDataType; }
67
67
  });
68
68
  exports.computeMarkerOffset = utils.computeMarkerOffset;
69
69
  exports.computePolygonOffsets = utils.computePolygonOffsets;
70
+ exports.hexToRgba = utils.hexToRgba;
70
71
  exports.isPointInMarkerData = utils.isPointInMarkerData;
71
72
  exports.isPointInPolygon = utils.isPointInPolygon;
72
73
  exports.isPointInPolygonData = utils.isPointInPolygonData;