@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.
- package/dist/components/mint-map/core/MintMapController.d.ts +1 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.d.ts → WoongCanvasLayer.d.ts} +52 -13
- package/dist/components/mint-map/core/advanced/woongCanvas/{WoongKonvaMarker.js → WoongCanvasLayer.js} +39 -31
- package/dist/components/mint-map/core/advanced/woongCanvas/index.d.ts +2 -2
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.d.ts +59 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/renderer.js +226 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.d.ts +1 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/shared/utils.js +18 -0
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +22 -1
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +1 -0
- package/dist/components/mint-map/google/GoogleMintMapController.js +5 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +1 -0
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +5 -1
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +3 -0
- package/dist/components/mint-map/naver/NaverMintMapController.js +38 -4
- package/dist/index.es.js +341 -35
- package/dist/index.js +3 -2
- package/dist/index.umd.js +342 -35
- package/package.json +1 -1
|
@@ -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/
|
|
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.
|
|
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
|
-
|
|
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;
|
|
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
|
|
5372
|
-
var markers =
|
|
5373
|
-
dataType =
|
|
5374
|
-
onClick =
|
|
5375
|
-
onMouseOver =
|
|
5376
|
-
onMouseOut =
|
|
5377
|
-
|
|
5378
|
-
|
|
5379
|
-
|
|
5380
|
-
|
|
5381
|
-
|
|
5382
|
-
|
|
5383
|
-
|
|
5384
|
-
|
|
5385
|
-
|
|
5386
|
-
|
|
5387
|
-
|
|
5388
|
-
|
|
5389
|
-
|
|
5390
|
-
|
|
5391
|
-
|
|
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:
|
|
6658
|
+
style: {
|
|
6393
6659
|
position: 'absolute',
|
|
6394
6660
|
width: '100%',
|
|
6395
6661
|
height: '100%'
|
|
6396
|
-
}
|
|
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
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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
|
|
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.
|
|
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;
|