@mint-ui/map 1.2.0-test.49 → 1.2.0-test.50
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/CLAUDE.md +0 -1
- package/dist/components/mint-map/core/MintMapCore.js +1 -1
- package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/CanvasMarkerLayer/CanvasMarkerLayer.js +2 -2
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/CanvasPolygonLayer.js +2 -2
- package/dist/components/mint-map/core/advanced/CanvasPolygonLayer/renderer.js +6 -2
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarker.d.ts +7 -0
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerClaude.js +7 -7
- package/dist/components/mint-map/core/advanced/canvas/index.d.ts +0 -1
- package/dist/components/mint-map/core/advanced/shared/context.d.ts +8 -8
- package/dist/components/mint-map/core/advanced/shared/context.js +11 -11
- package/dist/components/mint-map/core/advanced/shared/helpers.d.ts +1 -1
- package/dist/components/mint-map/core/advanced/shared/helpers.js +1 -1
- package/dist/index.es.js +27 -536
- package/dist/index.js +2 -4
- package/dist/index.umd.js +28 -538
- package/package.json +1 -1
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.d.ts +0 -22
- package/dist/components/mint-map/core/advanced/canvas/CanvasMarkerHanquf.js +0 -413
- package/dist/components/mint-map/core/util/geohash.js +0 -125
package/dist/index.umd.js
CHANGED
|
@@ -1082,14 +1082,14 @@
|
|
|
1082
1082
|
CanvasDataType["POLYGON"] = "POLYGON";
|
|
1083
1083
|
})(exports.CanvasDataType || (exports.CanvasDataType = {}));
|
|
1084
1084
|
|
|
1085
|
-
var
|
|
1085
|
+
var CanvasContext = React.createContext(null);
|
|
1086
1086
|
/**
|
|
1087
|
-
*
|
|
1087
|
+
* CanvasProvider 컴포넌트
|
|
1088
1088
|
*
|
|
1089
|
-
* 다중
|
|
1089
|
+
* 다중 Canvas 인스턴스를 관리하고 zIndex 기반 이벤트 우선순위를 처리합니다.
|
|
1090
1090
|
*/
|
|
1091
1091
|
|
|
1092
|
-
var
|
|
1092
|
+
var CanvasProvider = function (_a) {
|
|
1093
1093
|
var children = _a.children;
|
|
1094
1094
|
var controller = useMintMapController();
|
|
1095
1095
|
var componentsRef = React.useRef([]);
|
|
@@ -1202,18 +1202,18 @@
|
|
|
1202
1202
|
unregisterComponent: unregisterComponent
|
|
1203
1203
|
};
|
|
1204
1204
|
}, [registerComponent, unregisterComponent]);
|
|
1205
|
-
return React__default["default"].createElement(
|
|
1205
|
+
return React__default["default"].createElement(CanvasContext.Provider, {
|
|
1206
1206
|
value: contextValue
|
|
1207
1207
|
}, children);
|
|
1208
1208
|
};
|
|
1209
1209
|
/**
|
|
1210
|
-
*
|
|
1210
|
+
* Canvas Context Hook
|
|
1211
1211
|
*
|
|
1212
|
-
* @returns
|
|
1212
|
+
* @returns CanvasContextValue 또는 null (Provider 없으면)
|
|
1213
1213
|
*/
|
|
1214
1214
|
|
|
1215
|
-
var
|
|
1216
|
-
return React.useContext(
|
|
1215
|
+
var useCanvasContext = function () {
|
|
1216
|
+
return React.useContext(CanvasContext);
|
|
1217
1217
|
};
|
|
1218
1218
|
|
|
1219
1219
|
/**
|
|
@@ -1697,7 +1697,7 @@
|
|
|
1697
1697
|
* 이벤트 유효성 검증 및 좌표 변환
|
|
1698
1698
|
*
|
|
1699
1699
|
* @param event 이벤트 파라미터
|
|
1700
|
-
* @param context CanvasContext 인스턴스
|
|
1700
|
+
* @param context CanvasContext 인스턴스
|
|
1701
1701
|
* @param controller MintMapController 인스턴스
|
|
1702
1702
|
* @returns 유효한 화면 좌표 또는 null
|
|
1703
1703
|
*/
|
|
@@ -1809,7 +1809,7 @@
|
|
|
1809
1809
|
}, [center]);
|
|
1810
1810
|
return React__default["default"].createElement("div", {
|
|
1811
1811
|
className: cn$3('mint-map-root')
|
|
1812
|
-
}, mapInitialized && React__default["default"].createElement(
|
|
1812
|
+
}, mapInitialized && React__default["default"].createElement(CanvasProvider, null, children), React__default["default"].createElement("div", {
|
|
1813
1813
|
className: cn$3('mint-map-container'),
|
|
1814
1814
|
style: {
|
|
1815
1815
|
visibility: visible ? 'inherit' : 'hidden'
|
|
@@ -3642,519 +3642,6 @@
|
|
|
3642
3642
|
})), divElement);
|
|
3643
3643
|
}
|
|
3644
3644
|
|
|
3645
|
-
// Lightweight Geohash encoder and neighbor utilities
|
|
3646
|
-
var BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
|
|
3647
|
-
var NEIGHBORS = {
|
|
3648
|
-
n: {
|
|
3649
|
-
even: {
|
|
3650
|
-
border: 'prxz',
|
|
3651
|
-
neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
|
|
3652
|
-
},
|
|
3653
|
-
odd: {
|
|
3654
|
-
border: 'bcfguvyz',
|
|
3655
|
-
neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
|
|
3656
|
-
}
|
|
3657
|
-
},
|
|
3658
|
-
s: {
|
|
3659
|
-
even: {
|
|
3660
|
-
border: '028b',
|
|
3661
|
-
neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
|
|
3662
|
-
},
|
|
3663
|
-
odd: {
|
|
3664
|
-
border: '0145hjnp',
|
|
3665
|
-
neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
|
|
3666
|
-
}
|
|
3667
|
-
},
|
|
3668
|
-
e: {
|
|
3669
|
-
even: {
|
|
3670
|
-
border: 'bcfguvyz',
|
|
3671
|
-
neighbor: '14365h7k9dcfesgujnmqp0r2twvyx8zb'
|
|
3672
|
-
},
|
|
3673
|
-
odd: {
|
|
3674
|
-
border: 'prxz',
|
|
3675
|
-
neighbor: 'bc01fg45238967deuvhjyznpkmstqrwx'
|
|
3676
|
-
}
|
|
3677
|
-
},
|
|
3678
|
-
w: {
|
|
3679
|
-
even: {
|
|
3680
|
-
border: '0145hjnp',
|
|
3681
|
-
neighbor: '238967debc01fg45kmstqrwxuvhjyznp'
|
|
3682
|
-
},
|
|
3683
|
-
odd: {
|
|
3684
|
-
border: '028b',
|
|
3685
|
-
neighbor: 'p0r21436x8zb9dcf5h7kjnmqesgutwvy'
|
|
3686
|
-
}
|
|
3687
|
-
}
|
|
3688
|
-
};
|
|
3689
|
-
function geohashEncode(lat, lon, precision) {
|
|
3690
|
-
if (precision === void 0) {
|
|
3691
|
-
precision = 6;
|
|
3692
|
-
}
|
|
3693
|
-
|
|
3694
|
-
var idx = 0;
|
|
3695
|
-
var bit = 0;
|
|
3696
|
-
var evenBit = true;
|
|
3697
|
-
var geohash = '';
|
|
3698
|
-
var latMin = -90,
|
|
3699
|
-
latMax = 90;
|
|
3700
|
-
var lonMin = -180,
|
|
3701
|
-
lonMax = 180;
|
|
3702
|
-
|
|
3703
|
-
while (geohash.length < precision) {
|
|
3704
|
-
if (evenBit) {
|
|
3705
|
-
var lonMid = (lonMin + lonMax) / 2;
|
|
3706
|
-
|
|
3707
|
-
if (lon >= lonMid) {
|
|
3708
|
-
idx = idx * 2 + 1;
|
|
3709
|
-
lonMin = lonMid;
|
|
3710
|
-
} else {
|
|
3711
|
-
idx = idx * 2;
|
|
3712
|
-
lonMax = lonMid;
|
|
3713
|
-
}
|
|
3714
|
-
} else {
|
|
3715
|
-
var latMid = (latMin + latMax) / 2;
|
|
3716
|
-
|
|
3717
|
-
if (lat >= latMid) {
|
|
3718
|
-
idx = idx * 2 + 1;
|
|
3719
|
-
latMin = latMid;
|
|
3720
|
-
} else {
|
|
3721
|
-
idx = idx * 2;
|
|
3722
|
-
latMax = latMid;
|
|
3723
|
-
}
|
|
3724
|
-
}
|
|
3725
|
-
|
|
3726
|
-
evenBit = !evenBit;
|
|
3727
|
-
|
|
3728
|
-
if (++bit == 5) {
|
|
3729
|
-
geohash += BASE32.charAt(idx);
|
|
3730
|
-
bit = 0;
|
|
3731
|
-
idx = 0;
|
|
3732
|
-
}
|
|
3733
|
-
}
|
|
3734
|
-
|
|
3735
|
-
return geohash;
|
|
3736
|
-
}
|
|
3737
|
-
|
|
3738
|
-
function adjacent(hash, dir) {
|
|
3739
|
-
var lastChr = hash[hash.length - 1];
|
|
3740
|
-
var type = hash.length % 2 ? 'odd' : 'even'; // @ts-ignore
|
|
3741
|
-
|
|
3742
|
-
var border = NEIGHBORS[dir][type].border; // @ts-ignore
|
|
3743
|
-
|
|
3744
|
-
var neighbor = NEIGHBORS[dir][type].neighbor;
|
|
3745
|
-
var base = hash.substring(0, hash.length - 1);
|
|
3746
|
-
|
|
3747
|
-
if (border.indexOf(lastChr) !== -1) {
|
|
3748
|
-
base = adjacent(base, dir);
|
|
3749
|
-
}
|
|
3750
|
-
|
|
3751
|
-
var pos = neighbor.indexOf(lastChr);
|
|
3752
|
-
var nextChr = BASE32.charAt(pos);
|
|
3753
|
-
return base + nextChr;
|
|
3754
|
-
}
|
|
3755
|
-
|
|
3756
|
-
function geohashNeighbors(hash) {
|
|
3757
|
-
var n = adjacent(hash, 'n');
|
|
3758
|
-
var s = adjacent(hash, 's');
|
|
3759
|
-
var e = adjacent(hash, 'e');
|
|
3760
|
-
var w = adjacent(hash, 'w');
|
|
3761
|
-
return [hash, n, s, e, w, adjacent(n, 'e'), adjacent(n, 'w'), adjacent(s, 'e'), adjacent(s, 'w')];
|
|
3762
|
-
}
|
|
3763
|
-
|
|
3764
|
-
function CanvasMarkerHanquf(_a) {
|
|
3765
|
-
var renderer = _a.renderer,
|
|
3766
|
-
data = _a.data,
|
|
3767
|
-
onMouseOver = _a.onMouseOver,
|
|
3768
|
-
onMouseOut = _a.onMouseOut,
|
|
3769
|
-
onClick = _a.onClick,
|
|
3770
|
-
options = tslib.__rest(_a, ["renderer", "data", "onMouseOver", "onMouseOut", "onClick"]); //controller
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
var controller = useMintMapController(); //element
|
|
3774
|
-
|
|
3775
|
-
var divRef = React.useRef(document.createElement('div'));
|
|
3776
|
-
var divElement = divRef.current; //canvas container ref
|
|
3777
|
-
|
|
3778
|
-
var containerRef = React.useRef(null); //canvas ref
|
|
3779
|
-
|
|
3780
|
-
var canvasRef = React.useRef(null); //canvas context
|
|
3781
|
-
|
|
3782
|
-
var contextRef = React.useRef(); //marker
|
|
3783
|
-
|
|
3784
|
-
var markerRef = React.useRef(); // interaction states
|
|
3785
|
-
|
|
3786
|
-
var hoveredRef = React.useRef(null);
|
|
3787
|
-
var clickedRef = React.useRef(null); // geohash index: hash -> items
|
|
3788
|
-
|
|
3789
|
-
var geoIndexRef = React.useRef(new Map());
|
|
3790
|
-
var geoPrecisionRef = React.useRef(6); // drag translate state
|
|
3791
|
-
|
|
3792
|
-
var prevCenterOffsetRef = React.useRef(null);
|
|
3793
|
-
var accumTranslateRef = React.useRef({
|
|
3794
|
-
x: 0,
|
|
3795
|
-
y: 0
|
|
3796
|
-
});
|
|
3797
|
-
var draggingRef = React.useRef(false); //create object
|
|
3798
|
-
|
|
3799
|
-
React.useEffect(function () {
|
|
3800
|
-
divElement.style.width = 'fit-content';
|
|
3801
|
-
divElement.style.pointerEvents = 'none';
|
|
3802
|
-
return function () {
|
|
3803
|
-
if (markerRef.current) {
|
|
3804
|
-
controller.clearDrawable(markerRef.current);
|
|
3805
|
-
markerRef.current = undefined;
|
|
3806
|
-
}
|
|
3807
|
-
};
|
|
3808
|
-
}, []); //create / update object
|
|
3809
|
-
|
|
3810
|
-
React.useEffect(function () {
|
|
3811
|
-
if (options) {
|
|
3812
|
-
var bounds = controller.getCurrBounds();
|
|
3813
|
-
|
|
3814
|
-
var markerOptions = tslib.__assign({
|
|
3815
|
-
position: bounds.nw
|
|
3816
|
-
}, options);
|
|
3817
|
-
|
|
3818
|
-
if (markerRef.current) {
|
|
3819
|
-
controller.updateMarker(markerRef.current, markerOptions);
|
|
3820
|
-
} else {
|
|
3821
|
-
markerRef.current = new Marker(markerOptions);
|
|
3822
|
-
markerRef.current.element = divElement;
|
|
3823
|
-
controller.createMarker(markerRef.current); //disablePointerEvent 처리
|
|
3824
|
-
|
|
3825
|
-
if (divElement.parentElement) {
|
|
3826
|
-
divElement.style.pointerEvents = 'none';
|
|
3827
|
-
divElement.parentElement.style.pointerEvents = 'none';
|
|
3828
|
-
} //z-index 처리
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
if (options.zIndex !== undefined) {
|
|
3832
|
-
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
3833
|
-
}
|
|
3834
|
-
}
|
|
3835
|
-
}
|
|
3836
|
-
}, [options]);
|
|
3837
|
-
|
|
3838
|
-
var handleIdle = function () {
|
|
3839
|
-
// 클리어
|
|
3840
|
-
clearRect(canvasRef.current, contextRef.current); // 표시 복구 (드래그/줌 중 숨김 처리 복원)
|
|
3841
|
-
|
|
3842
|
-
containerRef.current && (containerRef.current.style.visibility = ''); // 드래그 종료 처리: 변환 초기화 및 기준 위치 갱신
|
|
3843
|
-
|
|
3844
|
-
draggingRef.current = false;
|
|
3845
|
-
prevCenterOffsetRef.current = null;
|
|
3846
|
-
accumTranslateRef.current = {
|
|
3847
|
-
x: 0,
|
|
3848
|
-
y: 0
|
|
3849
|
-
};
|
|
3850
|
-
|
|
3851
|
-
if (containerRef.current) {
|
|
3852
|
-
containerRef.current.style.transform = '';
|
|
3853
|
-
} // 마커 이동
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
var bounds = controller.getCurrBounds();
|
|
3857
|
-
|
|
3858
|
-
var markerOptions = tslib.__assign({
|
|
3859
|
-
position: bounds.nw
|
|
3860
|
-
}, options);
|
|
3861
|
-
|
|
3862
|
-
markerRef.current && controller.updateMarker(markerRef.current, markerOptions); // 렌더링 (hover/click item last)
|
|
3863
|
-
|
|
3864
|
-
renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
3865
|
-
};
|
|
3866
|
-
|
|
3867
|
-
var handleZoomStart = function () {
|
|
3868
|
-
containerRef.current && (containerRef.current.style.visibility = 'hidden');
|
|
3869
|
-
};
|
|
3870
|
-
|
|
3871
|
-
var handleZoomEnd = function () {
|
|
3872
|
-
containerRef.current && (containerRef.current.style.visibility = '');
|
|
3873
|
-
}; //initialize
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
React.useEffect(function () {
|
|
3877
|
-
var resizeObserver; // hover/out 공통 처리기 (mouse 좌표 기반)
|
|
3878
|
-
|
|
3879
|
-
var updateHoverByMouseXY = function (mouseX, mouseY) {
|
|
3880
|
-
var hit = hitTest(mouseX, mouseY);
|
|
3881
|
-
|
|
3882
|
-
if ((hit === null || hit === void 0 ? void 0 : hit.item) !== hoveredRef.current) {
|
|
3883
|
-
if (hoveredRef.current && onMouseOut) {
|
|
3884
|
-
onMouseOut(hoveredRef.current);
|
|
3885
|
-
}
|
|
3886
|
-
|
|
3887
|
-
hoveredRef.current = (hit === null || hit === void 0 ? void 0 : hit.item) || null;
|
|
3888
|
-
|
|
3889
|
-
if ((hit === null || hit === void 0 ? void 0 : hit.item) && onMouseOver) {
|
|
3890
|
-
onMouseOver(hit.item);
|
|
3891
|
-
}
|
|
3892
|
-
|
|
3893
|
-
clearRect(canvasRef.current, contextRef.current);
|
|
3894
|
-
renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
3895
|
-
}
|
|
3896
|
-
};
|
|
3897
|
-
|
|
3898
|
-
var handleMouseLeave = function () {
|
|
3899
|
-
console.log('handleMouseLeave');
|
|
3900
|
-
|
|
3901
|
-
if (hoveredRef.current && onMouseOut) {
|
|
3902
|
-
onMouseOut(hoveredRef.current);
|
|
3903
|
-
}
|
|
3904
|
-
|
|
3905
|
-
hoveredRef.current = null;
|
|
3906
|
-
clearRect(canvasRef.current, contextRef.current);
|
|
3907
|
-
renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
3908
|
-
}; // 지도 이벤트 → 화면 좌표 변환
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
var parseEventToOffset = function (e) {
|
|
3912
|
-
var mapType = controller.getMapType();
|
|
3913
|
-
var latlng = (e === null || e === void 0 ? void 0 : e.latlng) || (e === null || e === void 0 ? void 0 : e.latLng);
|
|
3914
|
-
|
|
3915
|
-
if (!latlng) {
|
|
3916
|
-
return null;
|
|
3917
|
-
}
|
|
3918
|
-
|
|
3919
|
-
var pos = {
|
|
3920
|
-
lat: 0,
|
|
3921
|
-
lng: 0
|
|
3922
|
-
}; //@ts-ignore
|
|
3923
|
-
|
|
3924
|
-
if (mapType === 'naver') {
|
|
3925
|
-
pos.lat = latlng._lat;
|
|
3926
|
-
pos.lng = latlng._lng; //@ts-ignore
|
|
3927
|
-
} else if (mapType === 'google') {
|
|
3928
|
-
pos.lat = latlng.lat();
|
|
3929
|
-
pos.lng = latlng.lng(); //@ts-ignore
|
|
3930
|
-
} else if (mapType === 'kakao') {
|
|
3931
|
-
pos.lat = latlng.Ma;
|
|
3932
|
-
pos.lng = latlng.La;
|
|
3933
|
-
} else {
|
|
3934
|
-
return null;
|
|
3935
|
-
}
|
|
3936
|
-
|
|
3937
|
-
var offset = controller.positionToOffset(pos);
|
|
3938
|
-
return offset;
|
|
3939
|
-
};
|
|
3940
|
-
|
|
3941
|
-
var handleMapMouseMove = function (e) {
|
|
3942
|
-
if (draggingRef.current) {
|
|
3943
|
-
return;
|
|
3944
|
-
}
|
|
3945
|
-
|
|
3946
|
-
var offset = parseEventToOffset(e);
|
|
3947
|
-
if (!offset) return;
|
|
3948
|
-
updateHoverByMouseXY(offset.x, offset.y);
|
|
3949
|
-
};
|
|
3950
|
-
|
|
3951
|
-
var handleMapClick = function (e) {
|
|
3952
|
-
console.log('handleClick');
|
|
3953
|
-
var offset = parseEventToOffset(e);
|
|
3954
|
-
if (!offset) return;
|
|
3955
|
-
var hit = hitTest(offset.x, offset.y);
|
|
3956
|
-
|
|
3957
|
-
if (hit === null || hit === void 0 ? void 0 : hit.item) {
|
|
3958
|
-
clickedRef.current = hit.item;
|
|
3959
|
-
onClick && onClick(hit.item);
|
|
3960
|
-
clearRect(canvasRef.current, contextRef.current);
|
|
3961
|
-
renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
3962
|
-
}
|
|
3963
|
-
};
|
|
3964
|
-
|
|
3965
|
-
if (canvasRef.current && containerRef.current) {
|
|
3966
|
-
// 리사이즈 처리
|
|
3967
|
-
resizeObserver = new ResizeObserver(function () {
|
|
3968
|
-
// 클리어
|
|
3969
|
-
clearRect(canvasRef.current, contextRef.current); // 스케일링
|
|
3970
|
-
|
|
3971
|
-
canvasRef.current && contextRef.current && scaleCanvas(controller, canvasRef.current, contextRef.current); // 렌더링 (respect hover/click ordering)
|
|
3972
|
-
|
|
3973
|
-
renderMain(controller, rendererRef.current, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
3974
|
-
});
|
|
3975
|
-
resizeObserver.observe(controller.mapDivElement); // IDLE 이벤트 등록
|
|
3976
|
-
|
|
3977
|
-
controller.addEventListener('IDLE', handleIdle); // 줌 처리
|
|
3978
|
-
|
|
3979
|
-
controller.addEventListener('ZOOMSTART', handleZoomStart);
|
|
3980
|
-
controller.addEventListener('ZOOM_CHANGED', handleZoomEnd); // 2d 컨텍스트
|
|
3981
|
-
|
|
3982
|
-
contextRef.current = canvasRef.current.getContext('2d'); // 스케일링
|
|
3983
|
-
|
|
3984
|
-
if (contextRef.current) {
|
|
3985
|
-
scaleCanvas(controller, canvasRef.current, contextRef.current);
|
|
3986
|
-
} // 지도 이벤트 구독 (부모 pointer-events:none 이어도 동작)
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
var map = controller.getMap();
|
|
3990
|
-
|
|
3991
|
-
if (map) {
|
|
3992
|
-
//@ts-ignore
|
|
3993
|
-
map.addListener('mousemove', handleMapMouseMove); //@ts-ignore
|
|
3994
|
-
|
|
3995
|
-
map.addListener('click', handleMapClick); //@ts-ignore
|
|
3996
|
-
|
|
3997
|
-
map.addListener('center_changed', function () {
|
|
3998
|
-
// 드래그 중에는 리렌더 대신 transform 으로만 추종
|
|
3999
|
-
var center = controller.getCurrBounds().getCenter();
|
|
4000
|
-
var curr = controller.positionToOffset(center);
|
|
4001
|
-
var prev = prevCenterOffsetRef.current;
|
|
4002
|
-
|
|
4003
|
-
if (!prev) {
|
|
4004
|
-
prevCenterOffsetRef.current = {
|
|
4005
|
-
x: curr.x,
|
|
4006
|
-
y: curr.y
|
|
4007
|
-
};
|
|
4008
|
-
draggingRef.current = true;
|
|
4009
|
-
return;
|
|
4010
|
-
}
|
|
4011
|
-
|
|
4012
|
-
var dx = prev.x - curr.x;
|
|
4013
|
-
var dy = prev.y - curr.y;
|
|
4014
|
-
accumTranslateRef.current = {
|
|
4015
|
-
x: accumTranslateRef.current.x + dx,
|
|
4016
|
-
y: accumTranslateRef.current.y + dy
|
|
4017
|
-
};
|
|
4018
|
-
prevCenterOffsetRef.current = {
|
|
4019
|
-
x: curr.x,
|
|
4020
|
-
y: curr.y
|
|
4021
|
-
};
|
|
4022
|
-
draggingRef.current = true;
|
|
4023
|
-
|
|
4024
|
-
if (containerRef.current) {
|
|
4025
|
-
containerRef.current.style.transform = "translate(".concat(accumTranslateRef.current.x, "px, ").concat(accumTranslateRef.current.y, "px)");
|
|
4026
|
-
}
|
|
4027
|
-
}); //@ts-ignore
|
|
4028
|
-
|
|
4029
|
-
map.addListener('idle', handleIdle);
|
|
4030
|
-
} // 마우스가 지도 영역을 벗어나는 경우 처리
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
controller.mapDivElement.addEventListener('mouseleave', handleMouseLeave);
|
|
4034
|
-
}
|
|
4035
|
-
|
|
4036
|
-
return function () {
|
|
4037
|
-
resizeObserver && resizeObserver.disconnect();
|
|
4038
|
-
controller.mapDivElement && controller.mapDivElement.removeEventListener('mouseleave', handleMouseLeave);
|
|
4039
|
-
controller.removeEventListener('IDLE', handleIdle);
|
|
4040
|
-
controller.removeEventListener('ZOOMSTART', handleZoomStart);
|
|
4041
|
-
controller.removeEventListener('ZOOM_CHANGED', handleZoomEnd);
|
|
4042
|
-
};
|
|
4043
|
-
}, []); // data ref
|
|
4044
|
-
|
|
4045
|
-
var dataRef = React.useRef(data);
|
|
4046
|
-
React.useEffect(function () {
|
|
4047
|
-
dataRef.current = data; // rebuild geohash index
|
|
4048
|
-
|
|
4049
|
-
var map = new Map();
|
|
4050
|
-
var precision = geoPrecisionRef.current;
|
|
4051
|
-
|
|
4052
|
-
for (var _i = 0, _a = data || []; _i < _a.length; _i++) {
|
|
4053
|
-
var item = _a[_i];
|
|
4054
|
-
var pos = item.position && item.position[0];
|
|
4055
|
-
if (!pos) continue;
|
|
4056
|
-
var hash = geohashEncode(pos.lat, pos.lng, precision);
|
|
4057
|
-
var list = map.get(hash) || [];
|
|
4058
|
-
list.push(item);
|
|
4059
|
-
map.set(hash, list);
|
|
4060
|
-
}
|
|
4061
|
-
|
|
4062
|
-
geoIndexRef.current = map;
|
|
4063
|
-
}, [data]); // renderer ref
|
|
4064
|
-
|
|
4065
|
-
var rendererRef = React.useRef(renderer);
|
|
4066
|
-
React.useEffect(function () {
|
|
4067
|
-
rendererRef.current = renderer;
|
|
4068
|
-
}, [renderer]); // Build ordered list so hovered/clicked items render last (on top) within this canvas layer
|
|
4069
|
-
|
|
4070
|
-
var buildOrderedData = function () {
|
|
4071
|
-
var base = dataRef.current || [];
|
|
4072
|
-
var result = [];
|
|
4073
|
-
var hoverItem;
|
|
4074
|
-
var clickItem;
|
|
4075
|
-
|
|
4076
|
-
for (var _i = 0, base_1 = base; _i < base_1.length; _i++) {
|
|
4077
|
-
var item = base_1[_i];
|
|
4078
|
-
|
|
4079
|
-
if (clickedRef.current && item === clickedRef.current) {
|
|
4080
|
-
clickItem = item;
|
|
4081
|
-
} else if (hoveredRef.current && item === hoveredRef.current) {
|
|
4082
|
-
hoverItem = item;
|
|
4083
|
-
} else {
|
|
4084
|
-
result.push(item);
|
|
4085
|
-
}
|
|
4086
|
-
}
|
|
4087
|
-
|
|
4088
|
-
if (hoverItem) result.push(hoverItem);
|
|
4089
|
-
if (clickItem) result.push(clickItem);
|
|
4090
|
-
return result;
|
|
4091
|
-
}; // Geohash-accelerated hit-test
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
var hitTest = function (mouseX, mouseY) {
|
|
4095
|
-
// convert mouse offset -> lat/lng then geohash it
|
|
4096
|
-
var pos = controller.offsetToPosition({
|
|
4097
|
-
x: mouseX,
|
|
4098
|
-
y: mouseY
|
|
4099
|
-
});
|
|
4100
|
-
var precision = geoPrecisionRef.current;
|
|
4101
|
-
var baseHash = geohashEncode(pos.lat, pos.lng, precision);
|
|
4102
|
-
var buckets = geohashNeighbors(baseHash); // collect candidates from buckets (preserve ordering for top-most first)
|
|
4103
|
-
|
|
4104
|
-
var set = new Set();
|
|
4105
|
-
var ordered = buildOrderedData();
|
|
4106
|
-
|
|
4107
|
-
for (var _i = 0, buckets_1 = buckets; _i < buckets_1.length; _i++) {
|
|
4108
|
-
var b = buckets_1[_i];
|
|
4109
|
-
var list = geoIndexRef.current.get(b);
|
|
4110
|
-
if (!list) continue;
|
|
4111
|
-
|
|
4112
|
-
for (var _a = 0, list_1 = list; _a < list_1.length; _a++) {
|
|
4113
|
-
var it = list_1[_a];
|
|
4114
|
-
set.add(it);
|
|
4115
|
-
}
|
|
4116
|
-
} // iterate from top-most
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
for (var i = ordered.length - 1; i >= 0; i--) {
|
|
4120
|
-
var item = ordered[i];
|
|
4121
|
-
if (!set.has(item)) continue;
|
|
4122
|
-
if (item.visible === false) continue;
|
|
4123
|
-
var p = item.position && item.position[0];
|
|
4124
|
-
if (!p) continue;
|
|
4125
|
-
var off = controller.positionToOffset(p);
|
|
4126
|
-
var r = Math.max(2, item.hitRadius || 20);
|
|
4127
|
-
var dx = mouseX - off.x;
|
|
4128
|
-
var dy = mouseY - off.y;
|
|
4129
|
-
|
|
4130
|
-
if (dx * dx + dy * dy <= r * r) {
|
|
4131
|
-
return {
|
|
4132
|
-
item: item
|
|
4133
|
-
};
|
|
4134
|
-
}
|
|
4135
|
-
}
|
|
4136
|
-
|
|
4137
|
-
return null;
|
|
4138
|
-
}; // Initial render
|
|
4139
|
-
|
|
4140
|
-
|
|
4141
|
-
renderMain(controller, renderer, containerRef.current, canvasRef.current, contextRef.current, buildOrderedData());
|
|
4142
|
-
return reactDom.createPortal(React__default["default"].createElement("div", {
|
|
4143
|
-
ref: containerRef,
|
|
4144
|
-
style: {
|
|
4145
|
-
position: 'absolute',
|
|
4146
|
-
width: '100%',
|
|
4147
|
-
height: '100%',
|
|
4148
|
-
pointerEvents: 'none'
|
|
4149
|
-
}
|
|
4150
|
-
}, React__default["default"].createElement("canvas", {
|
|
4151
|
-
ref: canvasRef,
|
|
4152
|
-
style: {
|
|
4153
|
-
pointerEvents: 'revert-layer'
|
|
4154
|
-
}
|
|
4155
|
-
})), divElement);
|
|
4156
|
-
}
|
|
4157
|
-
|
|
4158
3645
|
var defaultPolygonRenderer = function (_a) {
|
|
4159
3646
|
var context = _a.context,
|
|
4160
3647
|
offsets = _a.offsets,
|
|
@@ -4247,12 +3734,12 @@
|
|
|
4247
3734
|
var hoveredPolygonRef = React.useRef(null);
|
|
4248
3735
|
var clickedPolygonRef = React.useRef(null);
|
|
4249
3736
|
var hoveredMarkerRef = React.useRef(null);
|
|
4250
|
-
var clickedMarkerRef = React.useRef(null); // 🚀
|
|
3737
|
+
var clickedMarkerRef = React.useRef(null); // 🚀 CanvasMarker 방식: 단순한 data ref (geohash 제거)
|
|
4251
3738
|
|
|
4252
3739
|
var polygonsRef = React.useRef([]);
|
|
4253
3740
|
var markersRef = React.useRef([]); // 마커 경계 정보 저장 (hit-test용)
|
|
4254
3741
|
|
|
4255
|
-
var markerBoundsRef = React.useRef(new Map()); // 🚀 드래그 추적용 (
|
|
3742
|
+
var markerBoundsRef = React.useRef(new Map()); // 🚀 드래그 추적용 (CanvasMarker 방식)
|
|
4256
3743
|
|
|
4257
3744
|
var draggingRef = React.useRef(false);
|
|
4258
3745
|
var prevCenterOffsetRef = React.useRef(null);
|
|
@@ -4312,7 +3799,7 @@
|
|
|
4312
3799
|
if (!baseContextRef.current || !polygonsRef.current || polygonsRef.current.length === 0) return;
|
|
4313
3800
|
clearRect(baseCanvasRef.current, baseContextRef.current);
|
|
4314
3801
|
var cacheMissCount = 0; // 캐시 미스 카운트
|
|
4315
|
-
// 🚀
|
|
3802
|
+
// 🚀 CanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
|
|
4316
3803
|
|
|
4317
3804
|
polygonsRef.current.forEach(function (polygon) {
|
|
4318
3805
|
if (polygon.visible === false) return; // 🚀 캐시 확인 (ID 기반으로 변경)
|
|
@@ -4383,7 +3870,7 @@
|
|
|
4383
3870
|
if (!markersRef.current || markersRef.current.length === 0) return;
|
|
4384
3871
|
clearRect(baseMarkerCanvasRef.current, baseMarkerContextRef.current); // 마커 경계 정보 초기화
|
|
4385
3872
|
|
|
4386
|
-
markerBoundsRef.current.clear(); // 🚀
|
|
3873
|
+
markerBoundsRef.current.clear(); // 🚀 CanvasMarker 방식: 전체 데이터 순회 (필터링 제거)
|
|
4387
3874
|
|
|
4388
3875
|
markersRef.current.forEach(function (marker) {
|
|
4389
3876
|
var _a, _b;
|
|
@@ -4706,7 +4193,7 @@
|
|
|
4706
4193
|
}
|
|
4707
4194
|
|
|
4708
4195
|
return null;
|
|
4709
|
-
}; // IDLE 이벤트 핸들러 (
|
|
4196
|
+
}; // IDLE 이벤트 핸들러 (CanvasMarker 최적화 적용)
|
|
4710
4197
|
|
|
4711
4198
|
|
|
4712
4199
|
var handleIdle = function () {
|
|
@@ -4772,7 +4259,7 @@
|
|
|
4772
4259
|
x: event.clientX - rect.left,
|
|
4773
4260
|
y: event.clientY - rect.top
|
|
4774
4261
|
};
|
|
4775
|
-
}; // 🚀 지도 클릭 이벤트 핸들러 (
|
|
4262
|
+
}; // 🚀 지도 클릭 이벤트 핸들러 (CanvasMarker 방식 - controller.addEventListener)
|
|
4776
4263
|
|
|
4777
4264
|
|
|
4778
4265
|
var handleMapClick = function (event) {
|
|
@@ -4864,7 +4351,7 @@
|
|
|
4864
4351
|
var rafIdRef = React.useRef(); // 마우스 이벤트 핸들러 (requestAnimationFrame으로 최적화)
|
|
4865
4352
|
|
|
4866
4353
|
var handleMouseMove = function (e) {
|
|
4867
|
-
// 🚀 드래그 중이면 호버 처리 스킵 (
|
|
4354
|
+
// 🚀 드래그 중이면 호버 처리 스킵 (CanvasMarker 방식)
|
|
4868
4355
|
if (draggingRef.current) return; // 이미 RAF가 대기 중이면 스킵
|
|
4869
4356
|
|
|
4870
4357
|
if (rafIdRef.current) return;
|
|
@@ -5691,7 +5178,7 @@
|
|
|
5691
5178
|
options = tslib.__rest(props, ["data", "onClick", "onMouseOver", "onMouseOut", "enableMultiSelect", "topOnHover", "enableViewportCulling", "cullingMargin", "maxCacheSize", "selectedItems", "selectedItem", "disableInteraction", "renderBase", "renderEvent"]);
|
|
5692
5179
|
|
|
5693
5180
|
var controller = useMintMapController();
|
|
5694
|
-
var context =
|
|
5181
|
+
var context = useCanvasContext();
|
|
5695
5182
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
|
|
5696
5183
|
|
|
5697
5184
|
var divRef = React.useRef(document.createElement('div'));
|
|
@@ -6719,10 +6206,14 @@
|
|
|
6719
6206
|
// hover된 항목이 선택되어 있는지 확인
|
|
6720
6207
|
|
|
6721
6208
|
var isSelected = selectedIdsSet.has(hoveredItem.id);
|
|
6209
|
+
var isActive = isSelected && hoveredItem.id === selectedItemId; // 개별 props 방식과 동일한 로직: 선택된 항목이 hover되면 active 스타일을 사용
|
|
6210
|
+
// 따라서 선택된 항목이 hover될 때는 isHovered를 false로 설정하여
|
|
6211
|
+
// renderStyle 함수에서 isActive를 우선적으로 체크할 수 있도록 함
|
|
6212
|
+
|
|
6722
6213
|
var context = {
|
|
6723
6214
|
isSelected: isSelected,
|
|
6724
|
-
isHovered:
|
|
6725
|
-
isActive:
|
|
6215
|
+
isHovered: !isSelected,
|
|
6216
|
+
isActive: isActive
|
|
6726
6217
|
};
|
|
6727
6218
|
var style = renderStyle(hoveredItem, context);
|
|
6728
6219
|
drawPolygon({
|
|
@@ -6763,7 +6254,7 @@
|
|
|
6763
6254
|
// --------------------------------------------------------------------------
|
|
6764
6255
|
|
|
6765
6256
|
var controller = useMintMapController();
|
|
6766
|
-
var context =
|
|
6257
|
+
var context = useCanvasContext();
|
|
6767
6258
|
var currentZIndex = options.zIndex !== undefined ? options.zIndex : 0; // DOM Refs
|
|
6768
6259
|
|
|
6769
6260
|
var divRef = React.useRef(document.createElement('div'));
|
|
@@ -10135,9 +9626,9 @@
|
|
|
10135
9626
|
exports.Bounds = Bounds;
|
|
10136
9627
|
exports.CanvasMarker = CanvasMarker;
|
|
10137
9628
|
exports.CanvasMarkerClaude = CanvasMarkerClaude;
|
|
10138
|
-
exports.CanvasMarkerHanquf = CanvasMarkerHanquf;
|
|
10139
9629
|
exports.CanvasMarkerLayer = CanvasMarkerLayer;
|
|
10140
9630
|
exports.CanvasPolygonLayer = CanvasPolygonLayer;
|
|
9631
|
+
exports.CanvasProvider = CanvasProvider;
|
|
10141
9632
|
exports.CircleMarker = CircleMarker;
|
|
10142
9633
|
exports.DEFAULT_CULLING_MARGIN = DEFAULT_CULLING_MARGIN;
|
|
10143
9634
|
exports.DEFAULT_MAX_CACHE_SIZE = DEFAULT_MAX_CACHE_SIZE;
|
|
@@ -10176,7 +9667,6 @@
|
|
|
10176
9667
|
exports.Spacing = Spacing;
|
|
10177
9668
|
exports.SpatialHashGrid = SpatialHashGrid;
|
|
10178
9669
|
exports.Status = Status;
|
|
10179
|
-
exports.WoongCanvasProvider = WoongCanvasProvider;
|
|
10180
9670
|
exports.buildSpatialIndex = buildSpatialIndex;
|
|
10181
9671
|
exports.calculateTextBoxWidth = calculateTextBoxWidth;
|
|
10182
9672
|
exports.computeMarkerOffset = computeMarkerOffset;
|
|
@@ -10196,9 +9686,9 @@
|
|
|
10196
9686
|
exports.syncExternalSelectedItems = syncExternalSelectedItems;
|
|
10197
9687
|
exports.syncSelectedItems = syncSelectedItems;
|
|
10198
9688
|
exports.updateViewport = updateViewport;
|
|
9689
|
+
exports.useCanvasContext = useCanvasContext;
|
|
10199
9690
|
exports.useMarkerMoving = useMarkerMoving;
|
|
10200
9691
|
exports.useMintMapController = useMintMapController;
|
|
10201
|
-
exports.useWoongCanvasContext = useWoongCanvasContext;
|
|
10202
9692
|
exports.validateEvent = validateEvent;
|
|
10203
9693
|
exports.waiting = waiting;
|
|
10204
9694
|
|