@mint-ui/map 1.2.0-test.7 → 1.2.0-test.8
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 +0 -1
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.d.ts +1 -0
- package/dist/components/mint-map/core/advanced/woongCanvas/WoongKonvaMarker.js +78 -39
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +1 -22
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +0 -1
- package/dist/components/mint-map/google/GoogleMintMapController.js +0 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +0 -1
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +0 -4
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +0 -3
- package/dist/components/mint-map/naver/NaverMintMapController.js +3 -37
- package/dist/index.es.js +82 -106
- package/dist/index.umd.js +82 -106
- package/package.json +1 -1
|
@@ -24,7 +24,6 @@ export declare abstract class MintMapController {
|
|
|
24
24
|
abstract updateMarker(marker: Marker, options: MarkerOptions): void;
|
|
25
25
|
abstract clearDrawable(drawable: Drawable): boolean;
|
|
26
26
|
abstract markerToTheTop(marker: Marker): void;
|
|
27
|
-
abstract restoreMarkerZIndex(marker: Marker): void;
|
|
28
27
|
abstract isMapDragged(): boolean;
|
|
29
28
|
abstract setMapDragged(value: boolean): void;
|
|
30
29
|
abstract setMarkerZIndex(marker: Marker, zIndex: number): void;
|
|
@@ -131,6 +131,12 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
131
131
|
x: 0,
|
|
132
132
|
y: 0
|
|
133
133
|
}); // --------------------------------------------------------------------------
|
|
134
|
+
// Event Handler Refs (클로저 문제 방지)
|
|
135
|
+
// --------------------------------------------------------------------------
|
|
136
|
+
|
|
137
|
+
var onClickRef = React.useRef(onClick);
|
|
138
|
+
var onMouseOverRef = React.useRef(onMouseOver);
|
|
139
|
+
var onMouseOutRef = React.useRef(onMouseOut); // --------------------------------------------------------------------------
|
|
134
140
|
// Performance Refs (캐싱 & 최적화)
|
|
135
141
|
// --------------------------------------------------------------------------
|
|
136
142
|
|
|
@@ -420,10 +426,16 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
420
426
|
|
|
421
427
|
|
|
422
428
|
var doRenderEvent = function () {
|
|
423
|
-
if (!onClick && !onMouseOver && !onMouseOut) return;
|
|
424
|
-
if (!renderEvent) return;
|
|
425
429
|
var layer = eventLayerRef.current;
|
|
426
|
-
if (!layer) return; //
|
|
430
|
+
if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
|
|
431
|
+
|
|
432
|
+
if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
|
|
433
|
+
layer.destroyChildren();
|
|
434
|
+
layer.batchDraw();
|
|
435
|
+
return;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
|
|
427
439
|
|
|
428
440
|
var shape = layer.findOne('.event-render-shape');
|
|
429
441
|
|
|
@@ -621,7 +633,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
621
633
|
|
|
622
634
|
|
|
623
635
|
var setHovered = function (data) {
|
|
624
|
-
if (!
|
|
636
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
625
637
|
hoveredItemRef.current = data;
|
|
626
638
|
|
|
627
639
|
if (draggingRef.current) {
|
|
@@ -646,7 +658,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
646
658
|
|
|
647
659
|
|
|
648
660
|
var handleLocalClick = function (data) {
|
|
649
|
-
if (!
|
|
661
|
+
if (!onClickRef.current) return; // 1. 선택 상태 업데이트
|
|
650
662
|
|
|
651
663
|
if (enableMultiSelect) {
|
|
652
664
|
// 다중 선택: Set과 Map 동시 업데이트
|
|
@@ -697,7 +709,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
697
709
|
var handleClick = function (event) {
|
|
698
710
|
var _a;
|
|
699
711
|
|
|
700
|
-
if (!
|
|
712
|
+
if (!onClickRef.current) return;
|
|
701
713
|
if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
702
714
|
|
|
703
715
|
try {
|
|
@@ -706,7 +718,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
706
718
|
|
|
707
719
|
if (data) {
|
|
708
720
|
handleLocalClick(data);
|
|
709
|
-
|
|
721
|
+
onClickRef.current(data, selectedIdsRef.current);
|
|
710
722
|
}
|
|
711
723
|
} catch (error) {
|
|
712
724
|
console.error('[WoongKonvaMarker] handleClick error:', error);
|
|
@@ -720,7 +732,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
720
732
|
var handleMouseMove = function (event) {
|
|
721
733
|
var _a;
|
|
722
734
|
|
|
723
|
-
if (!
|
|
735
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
724
736
|
if (context$1 || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
725
737
|
|
|
726
738
|
try {
|
|
@@ -730,8 +742,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
730
742
|
|
|
731
743
|
if (prevHovered !== hoveredItem) {
|
|
732
744
|
setHovered(hoveredItem);
|
|
733
|
-
if (prevHovered &&
|
|
734
|
-
if (hoveredItem &&
|
|
745
|
+
if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
|
|
746
|
+
if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
|
|
735
747
|
}
|
|
736
748
|
} catch (error) {
|
|
737
749
|
console.error('[WoongKonvaMarker] handleMouseMove error:', error);
|
|
@@ -761,7 +773,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
761
773
|
|
|
762
774
|
|
|
763
775
|
var handleMouseLeave = function () {
|
|
764
|
-
if (!
|
|
776
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
765
777
|
var prevHovered = hoveredItemRef.current;
|
|
766
778
|
|
|
767
779
|
if (prevHovered) {
|
|
@@ -769,8 +781,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
769
781
|
controller.setMapCursor('grab');
|
|
770
782
|
doRenderEvent();
|
|
771
783
|
|
|
772
|
-
if (
|
|
773
|
-
|
|
784
|
+
if (onMouseOutRef.current) {
|
|
785
|
+
onMouseOutRef.current(prevHovered);
|
|
774
786
|
}
|
|
775
787
|
}
|
|
776
788
|
}; // --------------------------------------------------------------------------
|
|
@@ -871,13 +883,20 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
871
883
|
controller.addEventListener('IDLE', handleIdle);
|
|
872
884
|
controller.addEventListener('ZOOMSTART', handleZoomStart);
|
|
873
885
|
controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
|
|
874
|
-
controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
886
|
+
controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
|
|
887
|
+
|
|
888
|
+
if (onClick) {
|
|
889
|
+
controller.addEventListener('CLICK', handleClick);
|
|
890
|
+
} // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
|
|
879
891
|
|
|
880
|
-
|
|
892
|
+
|
|
893
|
+
if (onMouseOver || onMouseOut) {
|
|
894
|
+
controller.addEventListener('MOUSEMOVE', handleMouseMove);
|
|
895
|
+
mapDiv.addEventListener('mouseleave', handleMouseLeave);
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
controller.addEventListener('DRAGSTART', handleDragStart);
|
|
899
|
+
controller.addEventListener('DRAGEND', handleDragEnd);
|
|
881
900
|
renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
|
|
882
901
|
|
|
883
902
|
var componentInstance = null;
|
|
@@ -920,10 +939,13 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
920
939
|
controller.removeEventListener('CLICK', handleClick);
|
|
921
940
|
}
|
|
922
941
|
|
|
923
|
-
|
|
942
|
+
if (onMouseOver || onMouseOut) {
|
|
943
|
+
controller.removeEventListener('MOUSEMOVE', handleMouseMove);
|
|
944
|
+
mapDiv.removeEventListener('mouseleave', handleMouseLeave);
|
|
945
|
+
}
|
|
946
|
+
|
|
924
947
|
controller.removeEventListener('DRAGSTART', handleDragStart);
|
|
925
|
-
controller.removeEventListener('DRAGEND', handleDragEnd);
|
|
926
|
-
mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
|
|
948
|
+
controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
|
|
927
949
|
|
|
928
950
|
if (context$1 && componentInstance) {
|
|
929
951
|
context$1.unregisterComponent(componentInstance);
|
|
@@ -940,6 +962,18 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
940
962
|
spatialIndexRef.current.clear();
|
|
941
963
|
};
|
|
942
964
|
}, []); // --------------------------------------------------------------------------
|
|
965
|
+
// Lifecycle: 이벤트 핸들러 ref 동기화
|
|
966
|
+
// --------------------------------------------------------------------------
|
|
967
|
+
|
|
968
|
+
React.useEffect(function () {
|
|
969
|
+
onClickRef.current = onClick;
|
|
970
|
+
onMouseOverRef.current = onMouseOver;
|
|
971
|
+
onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
|
|
972
|
+
|
|
973
|
+
if (stageRef.current) {
|
|
974
|
+
doRenderEvent();
|
|
975
|
+
}
|
|
976
|
+
}, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
|
|
943
977
|
// Lifecycle: 외부 selectedItems 동기화
|
|
944
978
|
// --------------------------------------------------------------------------
|
|
945
979
|
|
|
@@ -1030,14 +1064,23 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
1030
1064
|
|
|
1031
1065
|
renderAllImmediate();
|
|
1032
1066
|
}, [markers]);
|
|
1067
|
+
var hasAnyHandler = onClick || onMouseOver || onMouseOut;
|
|
1033
1068
|
return reactDom.createPortal(React__default["default"].createElement("div", {
|
|
1069
|
+
style: {
|
|
1070
|
+
zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
|
|
1071
|
+
position: 'absolute',
|
|
1072
|
+
width: '100%',
|
|
1073
|
+
height: '100%',
|
|
1074
|
+
pointerEvents: hasAnyHandler ? 'none' : 'auto'
|
|
1075
|
+
}
|
|
1076
|
+
}, React__default["default"].createElement("div", {
|
|
1034
1077
|
ref: containerRef,
|
|
1035
1078
|
style: {
|
|
1036
1079
|
position: 'absolute',
|
|
1037
1080
|
width: '100%',
|
|
1038
1081
|
height: '100%'
|
|
1039
1082
|
}
|
|
1040
|
-
}), divElement);
|
|
1083
|
+
})), divElement);
|
|
1041
1084
|
};
|
|
1042
1085
|
/**
|
|
1043
1086
|
* 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
|
|
@@ -1045,33 +1088,29 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
1045
1088
|
* 비교 전략:
|
|
1046
1089
|
* 1. markers 배열 비교
|
|
1047
1090
|
* 2. selectedItems 배열 비교 (외부 제어)
|
|
1091
|
+
* 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
|
|
1048
1092
|
*
|
|
1049
1093
|
* 주의: JSON.stringify() 사용 금지! (매우 느림)
|
|
1050
1094
|
*/
|
|
1051
1095
|
|
|
1052
1096
|
|
|
1053
1097
|
var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
|
|
1054
|
-
//
|
|
1055
|
-
|
|
1056
|
-
var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
|
|
1098
|
+
// markers 배열 비교 (참조 비교)
|
|
1099
|
+
if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
|
|
1057
1100
|
|
|
1058
|
-
if (
|
|
1059
|
-
// 길이가 다르면 변경됨
|
|
1060
|
-
if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
|
|
1101
|
+
if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
|
|
1061
1102
|
|
|
1062
|
-
|
|
1063
|
-
if (prevMarkers[i].id !== nextMarkers[i].id) {
|
|
1064
|
-
return false; // 변경됨 → 리렌더링
|
|
1065
|
-
}
|
|
1066
|
-
}
|
|
1067
|
-
} // 2. selectedItems 비교 (참조만 비교)
|
|
1103
|
+
if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
|
|
1068
1104
|
|
|
1105
|
+
if (prevProps.onClick !== nextProps.onClick) return false;
|
|
1106
|
+
if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
|
|
1107
|
+
if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
|
|
1069
1108
|
|
|
1070
|
-
if (prevProps.
|
|
1071
|
-
|
|
1072
|
-
|
|
1109
|
+
if (prevProps.renderBase !== nextProps.renderBase) return false;
|
|
1110
|
+
if (prevProps.renderEvent !== nextProps.renderEvent) return false;
|
|
1111
|
+
if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
|
|
1073
1112
|
|
|
1074
|
-
return true;
|
|
1113
|
+
return true;
|
|
1075
1114
|
});
|
|
1076
1115
|
|
|
1077
1116
|
Object.defineProperty(exports, 'CanvasDataType', {
|
|
@@ -172,7 +172,7 @@ function MapMarkerWrapper(_a) {
|
|
|
172
172
|
var onMouseOverHandler = function (e) {
|
|
173
173
|
var _a;
|
|
174
174
|
|
|
175
|
-
var marker = markerRef.current;
|
|
175
|
+
var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
|
|
176
176
|
|
|
177
177
|
if (marker) {
|
|
178
178
|
var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
|
|
@@ -185,25 +185,6 @@ function MapMarkerWrapper(_a) {
|
|
|
185
185
|
|
|
186
186
|
next && topOnHover && controller.markerToTheTop(marker);
|
|
187
187
|
}
|
|
188
|
-
}; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
var onMouseLeaveHandler = function (e) {
|
|
192
|
-
var _a;
|
|
193
|
-
|
|
194
|
-
var marker = markerRef.current;
|
|
195
|
-
|
|
196
|
-
if (marker) {
|
|
197
|
-
var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
|
|
198
|
-
var next = true;
|
|
199
|
-
|
|
200
|
-
if (mouseOutHandler) {
|
|
201
|
-
var hasNext = mouseOutHandler(e);
|
|
202
|
-
hasNext !== undefined && (next = hasNext);
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
next && topOnHover && controller.restoreMarkerZIndex(marker);
|
|
206
|
-
}
|
|
207
188
|
}; //create object
|
|
208
189
|
|
|
209
190
|
|
|
@@ -221,12 +202,10 @@ function MapMarkerWrapper(_a) {
|
|
|
221
202
|
}); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
|
|
222
203
|
|
|
223
204
|
divElement.addEventListener('mouseover', onMouseOverHandler);
|
|
224
|
-
divElement.addEventListener('mouseleave', onMouseLeaveHandler);
|
|
225
205
|
return function () {
|
|
226
206
|
divElement.removeEventListener('click', onClickHandler);
|
|
227
207
|
divElement.removeEventListener('mousedown', onMousedownHandler);
|
|
228
208
|
divElement.removeEventListener('mouseover', onMouseOverHandler);
|
|
229
|
-
divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
|
|
230
209
|
|
|
231
210
|
if (markerRef.current) {
|
|
232
211
|
controller.clearDrawable(markerRef.current);
|
|
@@ -28,7 +28,6 @@ export declare class GoogleMintMapController extends MintMapController {
|
|
|
28
28
|
private getMaxZIndex;
|
|
29
29
|
setMarkerZIndex(marker: Marker, zIndex: number): void;
|
|
30
30
|
markerToTheTop(marker: Marker): void;
|
|
31
|
-
restoreMarkerZIndex(marker: Marker): void;
|
|
32
31
|
clearDrawable(drawable: Drawable): boolean;
|
|
33
32
|
private dragged;
|
|
34
33
|
isMapDragged(): boolean;
|
|
@@ -340,10 +340,6 @@ function (_super) {
|
|
|
340
340
|
}
|
|
341
341
|
};
|
|
342
342
|
|
|
343
|
-
GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
344
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
345
|
-
};
|
|
346
|
-
|
|
347
343
|
GoogleMintMapController.prototype.clearDrawable = function (drawable) {
|
|
348
344
|
if (drawable && drawable.native) {
|
|
349
345
|
if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
|
|
@@ -31,7 +31,6 @@ export declare class KakaoMintMapController extends MintMapController {
|
|
|
31
31
|
private getMaxZIndex;
|
|
32
32
|
setMarkerZIndex(marker: Marker, zIndex: number): void;
|
|
33
33
|
markerToTheTop(marker: Marker): void;
|
|
34
|
-
restoreMarkerZIndex(marker: Marker): void;
|
|
35
34
|
clearDrawable(drawable: Drawable): boolean;
|
|
36
35
|
private dragged;
|
|
37
36
|
isMapDragged(): boolean;
|
|
@@ -348,10 +348,6 @@ function (_super) {
|
|
|
348
348
|
}
|
|
349
349
|
};
|
|
350
350
|
|
|
351
|
-
KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
352
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
353
|
-
};
|
|
354
|
-
|
|
355
351
|
KakaoMintMapController.prototype.clearDrawable = function (drawable) {
|
|
356
352
|
var _this = this;
|
|
357
353
|
|
|
@@ -27,12 +27,9 @@ 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;
|
|
31
30
|
private getMaxZIndex;
|
|
32
|
-
private getCurrentZIndex;
|
|
33
31
|
setMarkerZIndex(marker: Marker, zIndex: number): void;
|
|
34
32
|
markerToTheTop(marker: Marker): void;
|
|
35
|
-
restoreMarkerZIndex(marker: Marker): void;
|
|
36
33
|
clearDrawable(drawable: Drawable): boolean;
|
|
37
34
|
private dragged;
|
|
38
35
|
isMapDragged(): boolean;
|
|
@@ -340,54 +340,20 @@ function (_super) {
|
|
|
340
340
|
}
|
|
341
341
|
};
|
|
342
342
|
|
|
343
|
-
NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
|
|
344
|
-
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
345
|
-
var parent_1 = marker.element.parentElement;
|
|
346
|
-
|
|
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
343
|
NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
|
|
357
344
|
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
358
|
-
var
|
|
345
|
+
var parent_1 = marker.element.parentElement;
|
|
359
346
|
|
|
360
|
-
if (
|
|
361
|
-
|
|
347
|
+
if (parent_1) {
|
|
348
|
+
parent_1.style.zIndex = String(zIndex);
|
|
362
349
|
}
|
|
363
350
|
}
|
|
364
351
|
};
|
|
365
352
|
|
|
366
353
|
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;
|
|
375
354
|
this.setMarkerZIndex(marker, this.getMaxZIndex(1));
|
|
376
355
|
};
|
|
377
356
|
|
|
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
|
-
|
|
391
357
|
NaverMintMapController.prototype.clearDrawable = function (drawable) {
|
|
392
358
|
var _a;
|
|
393
359
|
|
package/dist/index.es.js
CHANGED
|
@@ -2750,7 +2750,7 @@ function MapMarkerWrapper(_a) {
|
|
|
2750
2750
|
var onMouseOverHandler = function (e) {
|
|
2751
2751
|
var _a;
|
|
2752
2752
|
|
|
2753
|
-
var marker = markerRef.current;
|
|
2753
|
+
var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
|
|
2754
2754
|
|
|
2755
2755
|
if (marker) {
|
|
2756
2756
|
var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
|
|
@@ -2763,25 +2763,6 @@ function MapMarkerWrapper(_a) {
|
|
|
2763
2763
|
|
|
2764
2764
|
next && topOnHover && controller.markerToTheTop(marker);
|
|
2765
2765
|
}
|
|
2766
|
-
}; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
var onMouseLeaveHandler = function (e) {
|
|
2770
|
-
var _a;
|
|
2771
|
-
|
|
2772
|
-
var marker = markerRef.current;
|
|
2773
|
-
|
|
2774
|
-
if (marker) {
|
|
2775
|
-
var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
|
|
2776
|
-
var next = true;
|
|
2777
|
-
|
|
2778
|
-
if (mouseOutHandler) {
|
|
2779
|
-
var hasNext = mouseOutHandler(e);
|
|
2780
|
-
hasNext !== undefined && (next = hasNext);
|
|
2781
|
-
}
|
|
2782
|
-
|
|
2783
|
-
next && topOnHover && controller.restoreMarkerZIndex(marker);
|
|
2784
|
-
}
|
|
2785
2766
|
}; //create object
|
|
2786
2767
|
|
|
2787
2768
|
|
|
@@ -2799,12 +2780,10 @@ function MapMarkerWrapper(_a) {
|
|
|
2799
2780
|
}); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
|
|
2800
2781
|
|
|
2801
2782
|
divElement.addEventListener('mouseover', onMouseOverHandler);
|
|
2802
|
-
divElement.addEventListener('mouseleave', onMouseLeaveHandler);
|
|
2803
2783
|
return function () {
|
|
2804
2784
|
divElement.removeEventListener('click', onClickHandler);
|
|
2805
2785
|
divElement.removeEventListener('mousedown', onMousedownHandler);
|
|
2806
2786
|
divElement.removeEventListener('mouseover', onMouseOverHandler);
|
|
2807
|
-
divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
|
|
2808
2787
|
|
|
2809
2788
|
if (markerRef.current) {
|
|
2810
2789
|
controller.clearDrawable(markerRef.current);
|
|
@@ -5481,6 +5460,12 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5481
5460
|
x: 0,
|
|
5482
5461
|
y: 0
|
|
5483
5462
|
}); // --------------------------------------------------------------------------
|
|
5463
|
+
// Event Handler Refs (클로저 문제 방지)
|
|
5464
|
+
// --------------------------------------------------------------------------
|
|
5465
|
+
|
|
5466
|
+
var onClickRef = useRef(onClick);
|
|
5467
|
+
var onMouseOverRef = useRef(onMouseOver);
|
|
5468
|
+
var onMouseOutRef = useRef(onMouseOut); // --------------------------------------------------------------------------
|
|
5484
5469
|
// Performance Refs (캐싱 & 최적화)
|
|
5485
5470
|
// --------------------------------------------------------------------------
|
|
5486
5471
|
|
|
@@ -5770,10 +5755,16 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5770
5755
|
|
|
5771
5756
|
|
|
5772
5757
|
var doRenderEvent = function () {
|
|
5773
|
-
if (!onClick && !onMouseOver && !onMouseOut) return;
|
|
5774
|
-
if (!renderEvent) return;
|
|
5775
5758
|
var layer = eventLayerRef.current;
|
|
5776
|
-
if (!layer) return; //
|
|
5759
|
+
if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
|
|
5760
|
+
|
|
5761
|
+
if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
|
|
5762
|
+
layer.destroyChildren();
|
|
5763
|
+
layer.batchDraw();
|
|
5764
|
+
return;
|
|
5765
|
+
}
|
|
5766
|
+
|
|
5767
|
+
if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
|
|
5777
5768
|
|
|
5778
5769
|
var shape = layer.findOne('.event-render-shape');
|
|
5779
5770
|
|
|
@@ -5971,7 +5962,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5971
5962
|
|
|
5972
5963
|
|
|
5973
5964
|
var setHovered = function (data) {
|
|
5974
|
-
if (!
|
|
5965
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
5975
5966
|
hoveredItemRef.current = data;
|
|
5976
5967
|
|
|
5977
5968
|
if (draggingRef.current) {
|
|
@@ -5996,7 +5987,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
5996
5987
|
|
|
5997
5988
|
|
|
5998
5989
|
var handleLocalClick = function (data) {
|
|
5999
|
-
if (!
|
|
5990
|
+
if (!onClickRef.current) return; // 1. 선택 상태 업데이트
|
|
6000
5991
|
|
|
6001
5992
|
if (enableMultiSelect) {
|
|
6002
5993
|
// 다중 선택: Set과 Map 동시 업데이트
|
|
@@ -6047,7 +6038,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6047
6038
|
var handleClick = function (event) {
|
|
6048
6039
|
var _a;
|
|
6049
6040
|
|
|
6050
|
-
if (!
|
|
6041
|
+
if (!onClickRef.current) return;
|
|
6051
6042
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6052
6043
|
|
|
6053
6044
|
try {
|
|
@@ -6056,7 +6047,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6056
6047
|
|
|
6057
6048
|
if (data) {
|
|
6058
6049
|
handleLocalClick(data);
|
|
6059
|
-
|
|
6050
|
+
onClickRef.current(data, selectedIdsRef.current);
|
|
6060
6051
|
}
|
|
6061
6052
|
} catch (error) {
|
|
6062
6053
|
console.error('[WoongKonvaMarker] handleClick error:', error);
|
|
@@ -6070,7 +6061,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6070
6061
|
var handleMouseMove = function (event) {
|
|
6071
6062
|
var _a;
|
|
6072
6063
|
|
|
6073
|
-
if (!
|
|
6064
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
6074
6065
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6075
6066
|
|
|
6076
6067
|
try {
|
|
@@ -6080,8 +6071,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6080
6071
|
|
|
6081
6072
|
if (prevHovered !== hoveredItem) {
|
|
6082
6073
|
setHovered(hoveredItem);
|
|
6083
|
-
if (prevHovered &&
|
|
6084
|
-
if (hoveredItem &&
|
|
6074
|
+
if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
|
|
6075
|
+
if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
|
|
6085
6076
|
}
|
|
6086
6077
|
} catch (error) {
|
|
6087
6078
|
console.error('[WoongKonvaMarker] handleMouseMove error:', error);
|
|
@@ -6111,7 +6102,7 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6111
6102
|
|
|
6112
6103
|
|
|
6113
6104
|
var handleMouseLeave = function () {
|
|
6114
|
-
if (!
|
|
6105
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
6115
6106
|
var prevHovered = hoveredItemRef.current;
|
|
6116
6107
|
|
|
6117
6108
|
if (prevHovered) {
|
|
@@ -6119,8 +6110,8 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6119
6110
|
controller.setMapCursor('grab');
|
|
6120
6111
|
doRenderEvent();
|
|
6121
6112
|
|
|
6122
|
-
if (
|
|
6123
|
-
|
|
6113
|
+
if (onMouseOutRef.current) {
|
|
6114
|
+
onMouseOutRef.current(prevHovered);
|
|
6124
6115
|
}
|
|
6125
6116
|
}
|
|
6126
6117
|
}; // --------------------------------------------------------------------------
|
|
@@ -6221,13 +6212,20 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6221
6212
|
controller.addEventListener('IDLE', handleIdle);
|
|
6222
6213
|
controller.addEventListener('ZOOMSTART', handleZoomStart);
|
|
6223
6214
|
controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
|
|
6224
|
-
controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
|
|
6225
|
-
|
|
6226
|
-
|
|
6227
|
-
|
|
6228
|
-
|
|
6215
|
+
controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
|
|
6216
|
+
|
|
6217
|
+
if (onClick) {
|
|
6218
|
+
controller.addEventListener('CLICK', handleClick);
|
|
6219
|
+
} // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
|
|
6220
|
+
|
|
6229
6221
|
|
|
6230
|
-
|
|
6222
|
+
if (onMouseOver || onMouseOut) {
|
|
6223
|
+
controller.addEventListener('MOUSEMOVE', handleMouseMove);
|
|
6224
|
+
mapDiv.addEventListener('mouseleave', handleMouseLeave);
|
|
6225
|
+
}
|
|
6226
|
+
|
|
6227
|
+
controller.addEventListener('DRAGSTART', handleDragStart);
|
|
6228
|
+
controller.addEventListener('DRAGEND', handleDragEnd);
|
|
6231
6229
|
renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
|
|
6232
6230
|
|
|
6233
6231
|
var componentInstance = null;
|
|
@@ -6270,10 +6268,13 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6270
6268
|
controller.removeEventListener('CLICK', handleClick);
|
|
6271
6269
|
}
|
|
6272
6270
|
|
|
6273
|
-
|
|
6271
|
+
if (onMouseOver || onMouseOut) {
|
|
6272
|
+
controller.removeEventListener('MOUSEMOVE', handleMouseMove);
|
|
6273
|
+
mapDiv.removeEventListener('mouseleave', handleMouseLeave);
|
|
6274
|
+
}
|
|
6275
|
+
|
|
6274
6276
|
controller.removeEventListener('DRAGSTART', handleDragStart);
|
|
6275
|
-
controller.removeEventListener('DRAGEND', handleDragEnd);
|
|
6276
|
-
mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
|
|
6277
|
+
controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
|
|
6277
6278
|
|
|
6278
6279
|
if (context && componentInstance) {
|
|
6279
6280
|
context.unregisterComponent(componentInstance);
|
|
@@ -6290,6 +6291,18 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6290
6291
|
spatialIndexRef.current.clear();
|
|
6291
6292
|
};
|
|
6292
6293
|
}, []); // --------------------------------------------------------------------------
|
|
6294
|
+
// Lifecycle: 이벤트 핸들러 ref 동기화
|
|
6295
|
+
// --------------------------------------------------------------------------
|
|
6296
|
+
|
|
6297
|
+
useEffect(function () {
|
|
6298
|
+
onClickRef.current = onClick;
|
|
6299
|
+
onMouseOverRef.current = onMouseOver;
|
|
6300
|
+
onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
|
|
6301
|
+
|
|
6302
|
+
if (stageRef.current) {
|
|
6303
|
+
doRenderEvent();
|
|
6304
|
+
}
|
|
6305
|
+
}, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
|
|
6293
6306
|
// Lifecycle: 외부 selectedItems 동기화
|
|
6294
6307
|
// --------------------------------------------------------------------------
|
|
6295
6308
|
|
|
@@ -6380,14 +6393,23 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6380
6393
|
|
|
6381
6394
|
renderAllImmediate();
|
|
6382
6395
|
}, [markers]);
|
|
6396
|
+
var hasAnyHandler = onClick || onMouseOver || onMouseOut;
|
|
6383
6397
|
return createPortal(React.createElement("div", {
|
|
6398
|
+
style: {
|
|
6399
|
+
zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
|
|
6400
|
+
position: 'absolute',
|
|
6401
|
+
width: '100%',
|
|
6402
|
+
height: '100%',
|
|
6403
|
+
pointerEvents: hasAnyHandler ? 'none' : 'auto'
|
|
6404
|
+
}
|
|
6405
|
+
}, React.createElement("div", {
|
|
6384
6406
|
ref: containerRef,
|
|
6385
6407
|
style: {
|
|
6386
6408
|
position: 'absolute',
|
|
6387
6409
|
width: '100%',
|
|
6388
6410
|
height: '100%'
|
|
6389
6411
|
}
|
|
6390
|
-
}), divElement);
|
|
6412
|
+
})), divElement);
|
|
6391
6413
|
};
|
|
6392
6414
|
/**
|
|
6393
6415
|
* 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
|
|
@@ -6395,33 +6417,29 @@ var WoongKonvaMarkerComponent = function (_a) {
|
|
|
6395
6417
|
* 비교 전략:
|
|
6396
6418
|
* 1. markers 배열 비교
|
|
6397
6419
|
* 2. selectedItems 배열 비교 (외부 제어)
|
|
6420
|
+
* 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
|
|
6398
6421
|
*
|
|
6399
6422
|
* 주의: JSON.stringify() 사용 금지! (매우 느림)
|
|
6400
6423
|
*/
|
|
6401
6424
|
|
|
6402
6425
|
|
|
6403
6426
|
var WoongKonvaMarker = React.memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
|
|
6404
|
-
//
|
|
6405
|
-
|
|
6406
|
-
var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
|
|
6427
|
+
// markers 배열 비교 (참조 비교)
|
|
6428
|
+
if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
|
|
6407
6429
|
|
|
6408
|
-
if (
|
|
6409
|
-
// 길이가 다르면 변경됨
|
|
6410
|
-
if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
|
|
6430
|
+
if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
|
|
6411
6431
|
|
|
6412
|
-
|
|
6413
|
-
if (prevMarkers[i].id !== nextMarkers[i].id) {
|
|
6414
|
-
return false; // 변경됨 → 리렌더링
|
|
6415
|
-
}
|
|
6416
|
-
}
|
|
6417
|
-
} // 2. selectedItems 비교 (참조만 비교)
|
|
6432
|
+
if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
|
|
6418
6433
|
|
|
6434
|
+
if (prevProps.onClick !== nextProps.onClick) return false;
|
|
6435
|
+
if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
|
|
6436
|
+
if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
|
|
6419
6437
|
|
|
6420
|
-
if (prevProps.
|
|
6421
|
-
|
|
6422
|
-
|
|
6438
|
+
if (prevProps.renderBase !== nextProps.renderBase) return false;
|
|
6439
|
+
if (prevProps.renderEvent !== nextProps.renderEvent) return false;
|
|
6440
|
+
if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
|
|
6423
6441
|
|
|
6424
|
-
return true;
|
|
6442
|
+
return true;
|
|
6425
6443
|
});
|
|
6426
6444
|
|
|
6427
6445
|
var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n position: absolute;\n z-index: 1;\n}";
|
|
@@ -7164,54 +7182,20 @@ function (_super) {
|
|
|
7164
7182
|
}
|
|
7165
7183
|
};
|
|
7166
7184
|
|
|
7167
|
-
NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
|
|
7168
|
-
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
7169
|
-
var parent_1 = marker.element.parentElement;
|
|
7170
|
-
|
|
7171
|
-
if (parent_1 && parent_1.style.zIndex) {
|
|
7172
|
-
var zIndex = Number(parent_1.style.zIndex);
|
|
7173
|
-
return isNaN(zIndex) ? undefined : zIndex;
|
|
7174
|
-
}
|
|
7175
|
-
}
|
|
7176
|
-
|
|
7177
|
-
return undefined;
|
|
7178
|
-
};
|
|
7179
|
-
|
|
7180
7185
|
NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
|
|
7181
7186
|
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
7182
|
-
var
|
|
7187
|
+
var parent_1 = marker.element.parentElement;
|
|
7183
7188
|
|
|
7184
|
-
if (
|
|
7185
|
-
|
|
7189
|
+
if (parent_1) {
|
|
7190
|
+
parent_1.style.zIndex = String(zIndex);
|
|
7186
7191
|
}
|
|
7187
7192
|
}
|
|
7188
7193
|
};
|
|
7189
7194
|
|
|
7190
7195
|
NaverMintMapController.prototype.markerToTheTop = function (marker) {
|
|
7191
|
-
// 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
|
|
7192
|
-
if (this.markerOriginalZIndex !== undefined) {
|
|
7193
|
-
return;
|
|
7194
|
-
}
|
|
7195
|
-
|
|
7196
|
-
var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
|
|
7197
|
-
|
|
7198
|
-
this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
|
|
7199
7196
|
this.setMarkerZIndex(marker, this.getMaxZIndex(1));
|
|
7200
7197
|
};
|
|
7201
7198
|
|
|
7202
|
-
NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
|
|
7203
|
-
if (this.markerOriginalZIndex !== undefined) {
|
|
7204
|
-
if (this.markerOriginalZIndex === null) {
|
|
7205
|
-
// 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
|
|
7206
|
-
this.setMarkerZIndex(marker, 0);
|
|
7207
|
-
} else {
|
|
7208
|
-
this.setMarkerZIndex(marker, this.markerOriginalZIndex);
|
|
7209
|
-
}
|
|
7210
|
-
|
|
7211
|
-
this.markerOriginalZIndex = undefined;
|
|
7212
|
-
}
|
|
7213
|
-
};
|
|
7214
|
-
|
|
7215
7199
|
NaverMintMapController.prototype.clearDrawable = function (drawable) {
|
|
7216
7200
|
var _a;
|
|
7217
7201
|
|
|
@@ -7966,10 +7950,6 @@ function (_super) {
|
|
|
7966
7950
|
}
|
|
7967
7951
|
};
|
|
7968
7952
|
|
|
7969
|
-
GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
7970
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
7971
|
-
};
|
|
7972
|
-
|
|
7973
7953
|
GoogleMintMapController.prototype.clearDrawable = function (drawable) {
|
|
7974
7954
|
if (drawable && drawable.native) {
|
|
7975
7955
|
if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
|
|
@@ -8692,10 +8672,6 @@ function (_super) {
|
|
|
8692
8672
|
}
|
|
8693
8673
|
};
|
|
8694
8674
|
|
|
8695
|
-
KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
8696
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
8697
|
-
};
|
|
8698
|
-
|
|
8699
8675
|
KakaoMintMapController.prototype.clearDrawable = function (drawable) {
|
|
8700
8676
|
var _this = this;
|
|
8701
8677
|
|
package/dist/index.umd.js
CHANGED
|
@@ -2754,7 +2754,7 @@
|
|
|
2754
2754
|
var onMouseOverHandler = function (e) {
|
|
2755
2755
|
var _a;
|
|
2756
2756
|
|
|
2757
|
-
var marker = markerRef.current;
|
|
2757
|
+
var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
|
|
2758
2758
|
|
|
2759
2759
|
if (marker) {
|
|
2760
2760
|
var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
|
|
@@ -2767,25 +2767,6 @@
|
|
|
2767
2767
|
|
|
2768
2768
|
next && topOnHover && controller.markerToTheTop(marker);
|
|
2769
2769
|
}
|
|
2770
|
-
}; // 20251014 | 장한별 | mouseleave 이벤트 추가, 마우스가 마커 위에서 떠날 때 원래 zindex 를 복구하기 위함
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
var onMouseLeaveHandler = function (e) {
|
|
2774
|
-
var _a;
|
|
2775
|
-
|
|
2776
|
-
var marker = markerRef.current;
|
|
2777
|
-
|
|
2778
|
-
if (marker) {
|
|
2779
|
-
var mouseOutHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseout');
|
|
2780
|
-
var next = true;
|
|
2781
|
-
|
|
2782
|
-
if (mouseOutHandler) {
|
|
2783
|
-
var hasNext = mouseOutHandler(e);
|
|
2784
|
-
hasNext !== undefined && (next = hasNext);
|
|
2785
|
-
}
|
|
2786
|
-
|
|
2787
|
-
next && topOnHover && controller.restoreMarkerZIndex(marker);
|
|
2788
|
-
}
|
|
2789
2770
|
}; //create object
|
|
2790
2771
|
|
|
2791
2772
|
|
|
@@ -2803,12 +2784,10 @@
|
|
|
2803
2784
|
}); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
|
|
2804
2785
|
|
|
2805
2786
|
divElement.addEventListener('mouseover', onMouseOverHandler);
|
|
2806
|
-
divElement.addEventListener('mouseleave', onMouseLeaveHandler);
|
|
2807
2787
|
return function () {
|
|
2808
2788
|
divElement.removeEventListener('click', onClickHandler);
|
|
2809
2789
|
divElement.removeEventListener('mousedown', onMousedownHandler);
|
|
2810
2790
|
divElement.removeEventListener('mouseover', onMouseOverHandler);
|
|
2811
|
-
divElement.removeEventListener('mouseleave', onMouseLeaveHandler);
|
|
2812
2791
|
|
|
2813
2792
|
if (markerRef.current) {
|
|
2814
2793
|
controller.clearDrawable(markerRef.current);
|
|
@@ -5485,6 +5464,12 @@
|
|
|
5485
5464
|
x: 0,
|
|
5486
5465
|
y: 0
|
|
5487
5466
|
}); // --------------------------------------------------------------------------
|
|
5467
|
+
// Event Handler Refs (클로저 문제 방지)
|
|
5468
|
+
// --------------------------------------------------------------------------
|
|
5469
|
+
|
|
5470
|
+
var onClickRef = React.useRef(onClick);
|
|
5471
|
+
var onMouseOverRef = React.useRef(onMouseOver);
|
|
5472
|
+
var onMouseOutRef = React.useRef(onMouseOut); // --------------------------------------------------------------------------
|
|
5488
5473
|
// Performance Refs (캐싱 & 최적화)
|
|
5489
5474
|
// --------------------------------------------------------------------------
|
|
5490
5475
|
|
|
@@ -5774,10 +5759,16 @@
|
|
|
5774
5759
|
|
|
5775
5760
|
|
|
5776
5761
|
var doRenderEvent = function () {
|
|
5777
|
-
if (!onClick && !onMouseOver && !onMouseOut) return;
|
|
5778
|
-
if (!renderEvent) return;
|
|
5779
5762
|
var layer = eventLayerRef.current;
|
|
5780
|
-
if (!layer) return; //
|
|
5763
|
+
if (!layer) return; // 이벤트 핸들러가 없으면 Event Layer를 완전히 지움
|
|
5764
|
+
|
|
5765
|
+
if (!onClickRef.current && !onMouseOverRef.current && !onMouseOutRef.current) {
|
|
5766
|
+
layer.destroyChildren();
|
|
5767
|
+
layer.batchDraw();
|
|
5768
|
+
return;
|
|
5769
|
+
}
|
|
5770
|
+
|
|
5771
|
+
if (!renderEvent) return; // 🔥 Shape 재사용: 이미 존재하면 재사용, 없으면 생성
|
|
5781
5772
|
|
|
5782
5773
|
var shape = layer.findOne('.event-render-shape');
|
|
5783
5774
|
|
|
@@ -5975,7 +5966,7 @@
|
|
|
5975
5966
|
|
|
5976
5967
|
|
|
5977
5968
|
var setHovered = function (data) {
|
|
5978
|
-
if (!
|
|
5969
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
5979
5970
|
hoveredItemRef.current = data;
|
|
5980
5971
|
|
|
5981
5972
|
if (draggingRef.current) {
|
|
@@ -6000,7 +5991,7 @@
|
|
|
6000
5991
|
|
|
6001
5992
|
|
|
6002
5993
|
var handleLocalClick = function (data) {
|
|
6003
|
-
if (!
|
|
5994
|
+
if (!onClickRef.current) return; // 1. 선택 상태 업데이트
|
|
6004
5995
|
|
|
6005
5996
|
if (enableMultiSelect) {
|
|
6006
5997
|
// 다중 선택: Set과 Map 동시 업데이트
|
|
@@ -6051,7 +6042,7 @@
|
|
|
6051
6042
|
var handleClick = function (event) {
|
|
6052
6043
|
var _a;
|
|
6053
6044
|
|
|
6054
|
-
if (!
|
|
6045
|
+
if (!onClickRef.current) return;
|
|
6055
6046
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6056
6047
|
|
|
6057
6048
|
try {
|
|
@@ -6060,7 +6051,7 @@
|
|
|
6060
6051
|
|
|
6061
6052
|
if (data) {
|
|
6062
6053
|
handleLocalClick(data);
|
|
6063
|
-
|
|
6054
|
+
onClickRef.current(data, selectedIdsRef.current);
|
|
6064
6055
|
}
|
|
6065
6056
|
} catch (error) {
|
|
6066
6057
|
console.error('[WoongKonvaMarker] handleClick error:', error);
|
|
@@ -6074,7 +6065,7 @@
|
|
|
6074
6065
|
var handleMouseMove = function (event) {
|
|
6075
6066
|
var _a;
|
|
6076
6067
|
|
|
6077
|
-
if (!
|
|
6068
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
6078
6069
|
if (context || !((_a = event === null || event === void 0 ? void 0 : event.param) === null || _a === void 0 ? void 0 : _a.position)) return;
|
|
6079
6070
|
|
|
6080
6071
|
try {
|
|
@@ -6084,8 +6075,8 @@
|
|
|
6084
6075
|
|
|
6085
6076
|
if (prevHovered !== hoveredItem) {
|
|
6086
6077
|
setHovered(hoveredItem);
|
|
6087
|
-
if (prevHovered &&
|
|
6088
|
-
if (hoveredItem &&
|
|
6078
|
+
if (prevHovered && onMouseOutRef.current) onMouseOutRef.current(prevHovered);
|
|
6079
|
+
if (hoveredItem && onMouseOverRef.current) onMouseOverRef.current(hoveredItem);
|
|
6089
6080
|
}
|
|
6090
6081
|
} catch (error) {
|
|
6091
6082
|
console.error('[WoongKonvaMarker] handleMouseMove error:', error);
|
|
@@ -6115,7 +6106,7 @@
|
|
|
6115
6106
|
|
|
6116
6107
|
|
|
6117
6108
|
var handleMouseLeave = function () {
|
|
6118
|
-
if (!
|
|
6109
|
+
if (!onMouseOverRef.current && !onMouseOutRef.current) return;
|
|
6119
6110
|
var prevHovered = hoveredItemRef.current;
|
|
6120
6111
|
|
|
6121
6112
|
if (prevHovered) {
|
|
@@ -6123,8 +6114,8 @@
|
|
|
6123
6114
|
controller.setMapCursor('grab');
|
|
6124
6115
|
doRenderEvent();
|
|
6125
6116
|
|
|
6126
|
-
if (
|
|
6127
|
-
|
|
6117
|
+
if (onMouseOutRef.current) {
|
|
6118
|
+
onMouseOutRef.current(prevHovered);
|
|
6128
6119
|
}
|
|
6129
6120
|
}
|
|
6130
6121
|
}; // --------------------------------------------------------------------------
|
|
@@ -6225,13 +6216,20 @@
|
|
|
6225
6216
|
controller.addEventListener('IDLE', handleIdle);
|
|
6226
6217
|
controller.addEventListener('ZOOMSTART', handleZoomStart);
|
|
6227
6218
|
controller.addEventListener('ZOOM_CHANGED', handleZoomEnd);
|
|
6228
|
-
controller.addEventListener('CENTER_CHANGED', handleCenterChanged);
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6232
|
-
|
|
6219
|
+
controller.addEventListener('CENTER_CHANGED', handleCenterChanged); // onClick이 있을 때만 CLICK 이벤트 등록
|
|
6220
|
+
|
|
6221
|
+
if (onClick) {
|
|
6222
|
+
controller.addEventListener('CLICK', handleClick);
|
|
6223
|
+
} // onMouseOver/onMouseOut이 있을 때만 MOUSEMOVE 이벤트 등록
|
|
6224
|
+
|
|
6233
6225
|
|
|
6234
|
-
|
|
6226
|
+
if (onMouseOver || onMouseOut) {
|
|
6227
|
+
controller.addEventListener('MOUSEMOVE', handleMouseMove);
|
|
6228
|
+
mapDiv.addEventListener('mouseleave', handleMouseLeave);
|
|
6229
|
+
}
|
|
6230
|
+
|
|
6231
|
+
controller.addEventListener('DRAGSTART', handleDragStart);
|
|
6232
|
+
controller.addEventListener('DRAGEND', handleDragEnd);
|
|
6235
6233
|
renderAllImmediate(); // Context 사용 시 컴포넌트 등록 (다중 인스턴스 관리)
|
|
6236
6234
|
|
|
6237
6235
|
var componentInstance = null;
|
|
@@ -6274,10 +6272,13 @@
|
|
|
6274
6272
|
controller.removeEventListener('CLICK', handleClick);
|
|
6275
6273
|
}
|
|
6276
6274
|
|
|
6277
|
-
|
|
6275
|
+
if (onMouseOver || onMouseOut) {
|
|
6276
|
+
controller.removeEventListener('MOUSEMOVE', handleMouseMove);
|
|
6277
|
+
mapDiv.removeEventListener('mouseleave', handleMouseLeave);
|
|
6278
|
+
}
|
|
6279
|
+
|
|
6278
6280
|
controller.removeEventListener('DRAGSTART', handleDragStart);
|
|
6279
|
-
controller.removeEventListener('DRAGEND', handleDragEnd);
|
|
6280
|
-
mapDiv.removeEventListener('mouseleave', handleMouseLeave); // Context 정리
|
|
6281
|
+
controller.removeEventListener('DRAGEND', handleDragEnd); // Context 정리
|
|
6281
6282
|
|
|
6282
6283
|
if (context && componentInstance) {
|
|
6283
6284
|
context.unregisterComponent(componentInstance);
|
|
@@ -6294,6 +6295,18 @@
|
|
|
6294
6295
|
spatialIndexRef.current.clear();
|
|
6295
6296
|
};
|
|
6296
6297
|
}, []); // --------------------------------------------------------------------------
|
|
6298
|
+
// Lifecycle: 이벤트 핸들러 ref 동기화
|
|
6299
|
+
// --------------------------------------------------------------------------
|
|
6300
|
+
|
|
6301
|
+
React.useEffect(function () {
|
|
6302
|
+
onClickRef.current = onClick;
|
|
6303
|
+
onMouseOverRef.current = onMouseOver;
|
|
6304
|
+
onMouseOutRef.current = onMouseOut; // Event Layer 다시 렌더링 (이벤트 핸들러 변경 반영)
|
|
6305
|
+
|
|
6306
|
+
if (stageRef.current) {
|
|
6307
|
+
doRenderEvent();
|
|
6308
|
+
}
|
|
6309
|
+
}, [onClick, onMouseOver, onMouseOut]); // --------------------------------------------------------------------------
|
|
6297
6310
|
// Lifecycle: 외부 selectedItems 동기화
|
|
6298
6311
|
// --------------------------------------------------------------------------
|
|
6299
6312
|
|
|
@@ -6384,14 +6397,23 @@
|
|
|
6384
6397
|
|
|
6385
6398
|
renderAllImmediate();
|
|
6386
6399
|
}, [markers]);
|
|
6400
|
+
var hasAnyHandler = onClick || onMouseOver || onMouseOut;
|
|
6387
6401
|
return reactDom.createPortal(React__default["default"].createElement("div", {
|
|
6402
|
+
style: {
|
|
6403
|
+
zIndex: options.zIndex !== undefined ? options.zIndex + 1 : 9999,
|
|
6404
|
+
position: 'absolute',
|
|
6405
|
+
width: '100%',
|
|
6406
|
+
height: '100%',
|
|
6407
|
+
pointerEvents: hasAnyHandler ? 'none' : 'auto'
|
|
6408
|
+
}
|
|
6409
|
+
}, React__default["default"].createElement("div", {
|
|
6388
6410
|
ref: containerRef,
|
|
6389
6411
|
style: {
|
|
6390
6412
|
position: 'absolute',
|
|
6391
6413
|
width: '100%',
|
|
6392
6414
|
height: '100%'
|
|
6393
6415
|
}
|
|
6394
|
-
}), divElement);
|
|
6416
|
+
})), divElement);
|
|
6395
6417
|
};
|
|
6396
6418
|
/**
|
|
6397
6419
|
* 🔥 React.memo 최적화: 마커 배열과 selectedItems 변경 체크
|
|
@@ -6399,33 +6421,29 @@
|
|
|
6399
6421
|
* 비교 전략:
|
|
6400
6422
|
* 1. markers 배열 비교
|
|
6401
6423
|
* 2. selectedItems 배열 비교 (외부 제어)
|
|
6424
|
+
* 3. 이벤트 핸들러 비교 (onClick, onMouseOver, onMouseOut)
|
|
6402
6425
|
*
|
|
6403
6426
|
* 주의: JSON.stringify() 사용 금지! (매우 느림)
|
|
6404
6427
|
*/
|
|
6405
6428
|
|
|
6406
6429
|
|
|
6407
6430
|
var WoongKonvaMarker = React__default["default"].memo(WoongKonvaMarkerComponent, function (prevProps, nextProps) {
|
|
6408
|
-
//
|
|
6409
|
-
|
|
6410
|
-
var nextMarkers = nextProps.markers; // 참조가 같으면 스킵
|
|
6431
|
+
// markers 배열 비교 (참조 비교)
|
|
6432
|
+
if (prevProps.markers !== nextProps.markers) return false; // selectedItems 배열 비교 (참조 비교)
|
|
6411
6433
|
|
|
6412
|
-
if (
|
|
6413
|
-
// 길이가 다르면 변경됨
|
|
6414
|
-
if (prevMarkers.length !== nextMarkers.length) return false; // 각 마커의 ID 비교
|
|
6434
|
+
if (prevProps.selectedItems !== nextProps.selectedItems) return false; // selectedItem 비교 (참조 비교)
|
|
6415
6435
|
|
|
6416
|
-
|
|
6417
|
-
if (prevMarkers[i].id !== nextMarkers[i].id) {
|
|
6418
|
-
return false; // 변경됨 → 리렌더링
|
|
6419
|
-
}
|
|
6420
|
-
}
|
|
6421
|
-
} // 2. selectedItems 비교 (참조만 비교)
|
|
6436
|
+
if (prevProps.selectedItem !== nextProps.selectedItem) return false; // 이벤트 핸들러 비교 (참조 비교)
|
|
6422
6437
|
|
|
6438
|
+
if (prevProps.onClick !== nextProps.onClick) return false;
|
|
6439
|
+
if (prevProps.onMouseOver !== nextProps.onMouseOver) return false;
|
|
6440
|
+
if (prevProps.onMouseOut !== nextProps.onMouseOut) return false; // renderBase, renderEvent 등 함수 비교
|
|
6423
6441
|
|
|
6424
|
-
if (prevProps.
|
|
6425
|
-
|
|
6426
|
-
|
|
6442
|
+
if (prevProps.renderBase !== nextProps.renderBase) return false;
|
|
6443
|
+
if (prevProps.renderEvent !== nextProps.renderEvent) return false;
|
|
6444
|
+
if (prevProps.renderAnimation !== nextProps.renderAnimation) return false; // 나머지 props는 변경되지 않는다고 가정
|
|
6427
6445
|
|
|
6428
|
-
return true;
|
|
6446
|
+
return true;
|
|
6429
6447
|
});
|
|
6430
6448
|
|
|
6431
6449
|
var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper-container__DONh7 {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n position: absolute;\n z-index: 1;\n}";
|
|
@@ -7168,54 +7186,20 @@
|
|
|
7168
7186
|
}
|
|
7169
7187
|
};
|
|
7170
7188
|
|
|
7171
|
-
NaverMintMapController.prototype.getCurrentZIndex = function (marker) {
|
|
7172
|
-
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
7173
|
-
var parent_1 = marker.element.parentElement;
|
|
7174
|
-
|
|
7175
|
-
if (parent_1 && parent_1.style.zIndex) {
|
|
7176
|
-
var zIndex = Number(parent_1.style.zIndex);
|
|
7177
|
-
return isNaN(zIndex) ? undefined : zIndex;
|
|
7178
|
-
}
|
|
7179
|
-
}
|
|
7180
|
-
|
|
7181
|
-
return undefined;
|
|
7182
|
-
};
|
|
7183
|
-
|
|
7184
7189
|
NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
|
|
7185
7190
|
if (this.map && marker.element && marker.element instanceof HTMLElement) {
|
|
7186
|
-
var
|
|
7191
|
+
var parent_1 = marker.element.parentElement;
|
|
7187
7192
|
|
|
7188
|
-
if (
|
|
7189
|
-
|
|
7193
|
+
if (parent_1) {
|
|
7194
|
+
parent_1.style.zIndex = String(zIndex);
|
|
7190
7195
|
}
|
|
7191
7196
|
}
|
|
7192
7197
|
};
|
|
7193
7198
|
|
|
7194
7199
|
NaverMintMapController.prototype.markerToTheTop = function (marker) {
|
|
7195
|
-
// 이미 최상위로 올라간 상태면 (원래 zIndex가 이미 저장됨) 중복 실행 방지
|
|
7196
|
-
if (this.markerOriginalZIndex !== undefined) {
|
|
7197
|
-
return;
|
|
7198
|
-
}
|
|
7199
|
-
|
|
7200
|
-
var currentZIndex = this.getCurrentZIndex(marker); // undefined면 null로 저장 (원래 zIndex가 없었음을 표시)
|
|
7201
|
-
|
|
7202
|
-
this.markerOriginalZIndex = currentZIndex !== undefined ? currentZIndex : null;
|
|
7203
7200
|
this.setMarkerZIndex(marker, this.getMaxZIndex(1));
|
|
7204
7201
|
};
|
|
7205
7202
|
|
|
7206
|
-
NaverMintMapController.prototype.restoreMarkerZIndex = function (marker) {
|
|
7207
|
-
if (this.markerOriginalZIndex !== undefined) {
|
|
7208
|
-
if (this.markerOriginalZIndex === null) {
|
|
7209
|
-
// 원래 zIndex가 없었으면 제거 (또는 초기값 0으로)
|
|
7210
|
-
this.setMarkerZIndex(marker, 0);
|
|
7211
|
-
} else {
|
|
7212
|
-
this.setMarkerZIndex(marker, this.markerOriginalZIndex);
|
|
7213
|
-
}
|
|
7214
|
-
|
|
7215
|
-
this.markerOriginalZIndex = undefined;
|
|
7216
|
-
}
|
|
7217
|
-
};
|
|
7218
|
-
|
|
7219
7203
|
NaverMintMapController.prototype.clearDrawable = function (drawable) {
|
|
7220
7204
|
var _a;
|
|
7221
7205
|
|
|
@@ -7970,10 +7954,6 @@
|
|
|
7970
7954
|
}
|
|
7971
7955
|
};
|
|
7972
7956
|
|
|
7973
|
-
GoogleMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Google Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
7974
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
7975
|
-
};
|
|
7976
|
-
|
|
7977
7957
|
GoogleMintMapController.prototype.clearDrawable = function (drawable) {
|
|
7978
7958
|
if (drawable && drawable.native) {
|
|
7979
7959
|
if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
|
|
@@ -8696,10 +8676,6 @@
|
|
|
8696
8676
|
}
|
|
8697
8677
|
};
|
|
8698
8678
|
|
|
8699
|
-
KakaoMintMapController.prototype.restoreMarkerZIndex = function (marker) {// Kakao Maps에서는 restoreMarkerZIndex 기능을 지원하지 않습니다.
|
|
8700
|
-
// 이 기능은 Naver Maps에서만 사용 가능합니다.
|
|
8701
|
-
};
|
|
8702
|
-
|
|
8703
8679
|
KakaoMintMapController.prototype.clearDrawable = function (drawable) {
|
|
8704
8680
|
var _this = this;
|
|
8705
8681
|
|