@mint-ui/map 0.6.2-beta-test4 → 0.7.0-beta
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.
|
@@ -14,6 +14,12 @@ export interface MapMarkerMoving {
|
|
|
14
14
|
onMovingStart?: MovingEventFunciton;
|
|
15
15
|
onMovingEnd?: MovingEventFunciton;
|
|
16
16
|
}
|
|
17
|
+
export interface AutoAdjustAnchorConfig {
|
|
18
|
+
marginLeft?: number;
|
|
19
|
+
marginRight?: number;
|
|
20
|
+
marginTop?: number;
|
|
21
|
+
marginBottom?: number;
|
|
22
|
+
}
|
|
17
23
|
export interface MapMarkerWrapperProps extends MarkerOptions {
|
|
18
24
|
topOnClick?: boolean;
|
|
19
25
|
topOnHover?: boolean;
|
|
@@ -33,6 +39,7 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
|
|
|
33
39
|
disablePointerEvent?: boolean;
|
|
34
40
|
autoFitToViewport?: boolean;
|
|
35
41
|
autoAdjustAnchor?: boolean;
|
|
42
|
+
autoAdjustAnchorConfig?: AutoAdjustAnchorConfig;
|
|
36
43
|
}
|
|
37
44
|
/**
|
|
38
45
|
* Mint Map 컴포넌트
|
|
@@ -41,4 +48,4 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
|
|
|
41
48
|
*
|
|
42
49
|
* @returns {JSX.Element} JSX
|
|
43
50
|
*/
|
|
44
|
-
export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, autoFitToViewport, autoAdjustAnchor, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
|
|
51
|
+
export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
|
|
@@ -9,7 +9,7 @@ var MintMapProvider = require('../provider/MintMapProvider.js');
|
|
|
9
9
|
var MarkerMovingHook = require('../hooks/MarkerMovingHook.js');
|
|
10
10
|
var MapDrawables = require('../../types/MapDrawables.js');
|
|
11
11
|
|
|
12
|
-
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, mapDivElement) {
|
|
12
|
+
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
|
|
13
13
|
//google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
|
|
14
14
|
var baseTransform = '';
|
|
15
15
|
|
|
@@ -25,14 +25,14 @@ var offsetCalibration = function (mapType, divElement, options, autoFitToViewpor
|
|
|
25
25
|
// google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
|
|
26
26
|
if (mapType === 'google') {
|
|
27
27
|
divElement.style.visibility = 'hidden';
|
|
28
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, 50);
|
|
28
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
|
|
29
29
|
} else {
|
|
30
|
-
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
|
|
30
|
+
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
|
|
35
|
-
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, nextCount) {
|
|
35
|
+
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
|
|
36
36
|
var tryCount = nextCount || 0;
|
|
37
37
|
setTimeout(function () {
|
|
38
38
|
tryCount += 1;
|
|
@@ -44,15 +44,15 @@ var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransf
|
|
|
44
44
|
var rect = divElement.getBoundingClientRect();
|
|
45
45
|
|
|
46
46
|
if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
|
|
47
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, tryCount);
|
|
47
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
|
|
48
48
|
} else {
|
|
49
|
-
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
|
|
49
|
+
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
|
|
50
50
|
divElement.style.visibility = 'visible';
|
|
51
51
|
}
|
|
52
52
|
}, 20);
|
|
53
53
|
};
|
|
54
54
|
|
|
55
|
-
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust) {
|
|
55
|
+
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
|
|
56
56
|
var mapRect = mapDivElement.getBoundingClientRect();
|
|
57
57
|
var rect = divElement.getBoundingClientRect(); // 보정 값 계산
|
|
58
58
|
|
|
@@ -64,8 +64,8 @@ var transformToFit = function (divElement, mapDivElement, baseTransform, anchorA
|
|
|
64
64
|
var toRight = xValue > 0;
|
|
65
65
|
var toTop = yValue < 0;
|
|
66
66
|
var toBottom = yValue > 0;
|
|
67
|
-
var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
|
|
68
|
-
var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
|
|
67
|
+
var transX = toLeft ? (rect.width + (autoAdjustAnchorConfig.marginLeft || 0)) * -1 : toRight ? rect.width + (autoAdjustAnchorConfig.marginRight || 0) : 0;
|
|
68
|
+
var transY = toTop ? (rect.height + (autoAdjustAnchorConfig.marginTop || 0)) * -1 : toBottom ? rect.height + (autoAdjustAnchorConfig.marginBottom || 0) : 0;
|
|
69
69
|
divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
|
|
70
70
|
} else {
|
|
71
71
|
divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
|
|
@@ -102,15 +102,17 @@ function MapMarkerWrapper(_a) {
|
|
|
102
102
|
autoFitToViewport = _b === void 0 ? false : _b,
|
|
103
103
|
_c = _a.autoAdjustAnchor,
|
|
104
104
|
autoAdjustAnchor = _c === void 0 ? false : _c,
|
|
105
|
-
_d = _a.
|
|
106
|
-
|
|
107
|
-
_e = _a.
|
|
108
|
-
|
|
105
|
+
_d = _a.autoAdjustAnchorConfig,
|
|
106
|
+
autoAdjustAnchorConfig = _d === void 0 ? {} : _d,
|
|
107
|
+
_e = _a.topOnClick,
|
|
108
|
+
topOnClick = _e === void 0 ? false : _e,
|
|
109
|
+
_f = _a.topOnHover,
|
|
110
|
+
topOnHover = _f === void 0 ? false : _f,
|
|
109
111
|
movingAnimation = _a.movingAnimation,
|
|
110
|
-
|
|
111
|
-
disablePointerEvent =
|
|
112
|
+
_g = _a.disablePointerEvent,
|
|
113
|
+
disablePointerEvent = _g === void 0 ? false : _g,
|
|
112
114
|
children = _a.children,
|
|
113
|
-
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
115
|
+
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "autoAdjustAnchorConfig", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
114
116
|
|
|
115
117
|
|
|
116
118
|
var controller = MintMapProvider.useMintMapController(); //element
|
|
@@ -120,9 +122,9 @@ function MapMarkerWrapper(_a) {
|
|
|
120
122
|
|
|
121
123
|
var markerRef = React.useRef(); //moving animation
|
|
122
124
|
|
|
123
|
-
var
|
|
124
|
-
movingState =
|
|
125
|
-
setMovingState =
|
|
125
|
+
var _h = React.useState({}),
|
|
126
|
+
movingState = _h[0],
|
|
127
|
+
setMovingState = _h[1];
|
|
126
128
|
|
|
127
129
|
React.useEffect(function () {
|
|
128
130
|
// console.log('movingState', movingState);
|
|
@@ -224,7 +226,7 @@ function MapMarkerWrapper(_a) {
|
|
|
224
226
|
} //marker offset 보정
|
|
225
227
|
|
|
226
228
|
|
|
227
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
229
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
228
230
|
|
|
229
231
|
if (options.zIndex !== undefined) {
|
|
230
232
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
@@ -241,7 +243,7 @@ function MapMarkerWrapper(_a) {
|
|
|
241
243
|
} //marker offset 보정
|
|
242
244
|
|
|
243
245
|
|
|
244
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
246
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
245
247
|
|
|
246
248
|
if (options.zIndex !== undefined) {
|
|
247
249
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
package/dist/index.es.js
CHANGED
|
@@ -4171,7 +4171,7 @@ function useMarkerMoving(_a) {
|
|
|
4171
4171
|
return [start, stop, resume];
|
|
4172
4172
|
}
|
|
4173
4173
|
|
|
4174
|
-
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, mapDivElement) {
|
|
4174
|
+
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
|
|
4175
4175
|
//google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
|
|
4176
4176
|
var baseTransform = '';
|
|
4177
4177
|
|
|
@@ -4187,14 +4187,14 @@ var offsetCalibration = function (mapType, divElement, options, autoFitToViewpor
|
|
|
4187
4187
|
// google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
|
|
4188
4188
|
if (mapType === 'google') {
|
|
4189
4189
|
divElement.style.visibility = 'hidden';
|
|
4190
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, 50);
|
|
4190
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
|
|
4191
4191
|
} else {
|
|
4192
|
-
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
|
|
4192
|
+
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
|
|
4193
4193
|
}
|
|
4194
4194
|
}
|
|
4195
4195
|
};
|
|
4196
4196
|
|
|
4197
|
-
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, nextCount) {
|
|
4197
|
+
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
|
|
4198
4198
|
var tryCount = nextCount || 0;
|
|
4199
4199
|
setTimeout(function () {
|
|
4200
4200
|
tryCount += 1;
|
|
@@ -4206,15 +4206,15 @@ var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransf
|
|
|
4206
4206
|
var rect = divElement.getBoundingClientRect();
|
|
4207
4207
|
|
|
4208
4208
|
if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
|
|
4209
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, tryCount);
|
|
4209
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
|
|
4210
4210
|
} else {
|
|
4211
|
-
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
|
|
4211
|
+
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
|
|
4212
4212
|
divElement.style.visibility = 'visible';
|
|
4213
4213
|
}
|
|
4214
4214
|
}, 20);
|
|
4215
4215
|
};
|
|
4216
4216
|
|
|
4217
|
-
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust) {
|
|
4217
|
+
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
|
|
4218
4218
|
var mapRect = mapDivElement.getBoundingClientRect();
|
|
4219
4219
|
var rect = divElement.getBoundingClientRect(); // 보정 값 계산
|
|
4220
4220
|
|
|
@@ -4226,8 +4226,8 @@ var transformToFit = function (divElement, mapDivElement, baseTransform, anchorA
|
|
|
4226
4226
|
var toRight = xValue > 0;
|
|
4227
4227
|
var toTop = yValue < 0;
|
|
4228
4228
|
var toBottom = yValue > 0;
|
|
4229
|
-
var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
|
|
4230
|
-
var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
|
|
4229
|
+
var transX = toLeft ? (rect.width + (autoAdjustAnchorConfig.marginLeft || 0)) * -1 : toRight ? rect.width + (autoAdjustAnchorConfig.marginRight || 0) : 0;
|
|
4230
|
+
var transY = toTop ? (rect.height + (autoAdjustAnchorConfig.marginTop || 0)) * -1 : toBottom ? rect.height + (autoAdjustAnchorConfig.marginBottom || 0) : 0;
|
|
4231
4231
|
divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
|
|
4232
4232
|
} else {
|
|
4233
4233
|
divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
|
|
@@ -4264,15 +4264,17 @@ function MapMarkerWrapper(_a) {
|
|
|
4264
4264
|
autoFitToViewport = _b === void 0 ? false : _b,
|
|
4265
4265
|
_c = _a.autoAdjustAnchor,
|
|
4266
4266
|
autoAdjustAnchor = _c === void 0 ? false : _c,
|
|
4267
|
-
_d = _a.
|
|
4268
|
-
|
|
4269
|
-
_e = _a.
|
|
4270
|
-
|
|
4267
|
+
_d = _a.autoAdjustAnchorConfig,
|
|
4268
|
+
autoAdjustAnchorConfig = _d === void 0 ? {} : _d,
|
|
4269
|
+
_e = _a.topOnClick,
|
|
4270
|
+
topOnClick = _e === void 0 ? false : _e,
|
|
4271
|
+
_f = _a.topOnHover,
|
|
4272
|
+
topOnHover = _f === void 0 ? false : _f,
|
|
4271
4273
|
movingAnimation = _a.movingAnimation,
|
|
4272
|
-
|
|
4273
|
-
disablePointerEvent =
|
|
4274
|
+
_g = _a.disablePointerEvent,
|
|
4275
|
+
disablePointerEvent = _g === void 0 ? false : _g,
|
|
4274
4276
|
children = _a.children,
|
|
4275
|
-
options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
4277
|
+
options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "autoAdjustAnchorConfig", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
4276
4278
|
|
|
4277
4279
|
|
|
4278
4280
|
var controller = useMintMapController(); //element
|
|
@@ -4282,9 +4284,9 @@ function MapMarkerWrapper(_a) {
|
|
|
4282
4284
|
|
|
4283
4285
|
var markerRef = useRef(); //moving animation
|
|
4284
4286
|
|
|
4285
|
-
var
|
|
4286
|
-
movingState =
|
|
4287
|
-
setMovingState =
|
|
4287
|
+
var _h = useState({}),
|
|
4288
|
+
movingState = _h[0],
|
|
4289
|
+
setMovingState = _h[1];
|
|
4288
4290
|
|
|
4289
4291
|
useEffect(function () {
|
|
4290
4292
|
// console.log('movingState', movingState);
|
|
@@ -4386,7 +4388,7 @@ function MapMarkerWrapper(_a) {
|
|
|
4386
4388
|
} //marker offset 보정
|
|
4387
4389
|
|
|
4388
4390
|
|
|
4389
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
4391
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
4390
4392
|
|
|
4391
4393
|
if (options.zIndex !== undefined) {
|
|
4392
4394
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
@@ -4403,7 +4405,7 @@ function MapMarkerWrapper(_a) {
|
|
|
4403
4405
|
} //marker offset 보정
|
|
4404
4406
|
|
|
4405
4407
|
|
|
4406
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
4408
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
4407
4409
|
|
|
4408
4410
|
if (options.zIndex !== undefined) {
|
|
4409
4411
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
package/dist/index.umd.js
CHANGED
|
@@ -4175,7 +4175,7 @@
|
|
|
4175
4175
|
return [start, stop, resume];
|
|
4176
4176
|
}
|
|
4177
4177
|
|
|
4178
|
-
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, mapDivElement) {
|
|
4178
|
+
var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, mapDivElement) {
|
|
4179
4179
|
//google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
|
|
4180
4180
|
var baseTransform = '';
|
|
4181
4181
|
|
|
@@ -4191,14 +4191,14 @@
|
|
|
4191
4191
|
// google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
|
|
4192
4192
|
if (mapType === 'google') {
|
|
4193
4193
|
divElement.style.visibility = 'hidden';
|
|
4194
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, 50);
|
|
4194
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
|
|
4195
4195
|
} else {
|
|
4196
|
-
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
|
|
4196
|
+
transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
|
|
4197
4197
|
}
|
|
4198
4198
|
}
|
|
4199
4199
|
};
|
|
4200
4200
|
|
|
4201
|
-
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, nextCount) {
|
|
4201
|
+
var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
|
|
4202
4202
|
var tryCount = nextCount || 0;
|
|
4203
4203
|
setTimeout(function () {
|
|
4204
4204
|
tryCount += 1;
|
|
@@ -4210,15 +4210,15 @@
|
|
|
4210
4210
|
var rect = divElement.getBoundingClientRect();
|
|
4211
4211
|
|
|
4212
4212
|
if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
|
|
4213
|
-
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, tryCount);
|
|
4213
|
+
transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
|
|
4214
4214
|
} else {
|
|
4215
|
-
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
|
|
4215
|
+
transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
|
|
4216
4216
|
divElement.style.visibility = 'visible';
|
|
4217
4217
|
}
|
|
4218
4218
|
}, 20);
|
|
4219
4219
|
};
|
|
4220
4220
|
|
|
4221
|
-
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust) {
|
|
4221
|
+
var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
|
|
4222
4222
|
var mapRect = mapDivElement.getBoundingClientRect();
|
|
4223
4223
|
var rect = divElement.getBoundingClientRect(); // 보정 값 계산
|
|
4224
4224
|
|
|
@@ -4230,8 +4230,8 @@
|
|
|
4230
4230
|
var toRight = xValue > 0;
|
|
4231
4231
|
var toTop = yValue < 0;
|
|
4232
4232
|
var toBottom = yValue > 0;
|
|
4233
|
-
var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
|
|
4234
|
-
var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
|
|
4233
|
+
var transX = toLeft ? (rect.width + (autoAdjustAnchorConfig.marginLeft || 0)) * -1 : toRight ? rect.width + (autoAdjustAnchorConfig.marginRight || 0) : 0;
|
|
4234
|
+
var transY = toTop ? (rect.height + (autoAdjustAnchorConfig.marginTop || 0)) * -1 : toBottom ? rect.height + (autoAdjustAnchorConfig.marginBottom || 0) : 0;
|
|
4235
4235
|
divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
|
|
4236
4236
|
} else {
|
|
4237
4237
|
divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
|
|
@@ -4268,15 +4268,17 @@
|
|
|
4268
4268
|
autoFitToViewport = _b === void 0 ? false : _b,
|
|
4269
4269
|
_c = _a.autoAdjustAnchor,
|
|
4270
4270
|
autoAdjustAnchor = _c === void 0 ? false : _c,
|
|
4271
|
-
_d = _a.
|
|
4272
|
-
|
|
4273
|
-
_e = _a.
|
|
4274
|
-
|
|
4271
|
+
_d = _a.autoAdjustAnchorConfig,
|
|
4272
|
+
autoAdjustAnchorConfig = _d === void 0 ? {} : _d,
|
|
4273
|
+
_e = _a.topOnClick,
|
|
4274
|
+
topOnClick = _e === void 0 ? false : _e,
|
|
4275
|
+
_f = _a.topOnHover,
|
|
4276
|
+
topOnHover = _f === void 0 ? false : _f,
|
|
4275
4277
|
movingAnimation = _a.movingAnimation,
|
|
4276
|
-
|
|
4277
|
-
disablePointerEvent =
|
|
4278
|
+
_g = _a.disablePointerEvent,
|
|
4279
|
+
disablePointerEvent = _g === void 0 ? false : _g,
|
|
4278
4280
|
children = _a.children,
|
|
4279
|
-
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
4281
|
+
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "autoAdjustAnchorConfig", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
|
|
4280
4282
|
|
|
4281
4283
|
|
|
4282
4284
|
var controller = useMintMapController(); //element
|
|
@@ -4286,9 +4288,9 @@
|
|
|
4286
4288
|
|
|
4287
4289
|
var markerRef = React.useRef(); //moving animation
|
|
4288
4290
|
|
|
4289
|
-
var
|
|
4290
|
-
movingState =
|
|
4291
|
-
setMovingState =
|
|
4291
|
+
var _h = React.useState({}),
|
|
4292
|
+
movingState = _h[0],
|
|
4293
|
+
setMovingState = _h[1];
|
|
4292
4294
|
|
|
4293
4295
|
React.useEffect(function () {
|
|
4294
4296
|
// console.log('movingState', movingState);
|
|
@@ -4390,7 +4392,7 @@
|
|
|
4390
4392
|
} //marker offset 보정
|
|
4391
4393
|
|
|
4392
4394
|
|
|
4393
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
4395
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
4394
4396
|
|
|
4395
4397
|
if (options.zIndex !== undefined) {
|
|
4396
4398
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
@@ -4407,7 +4409,7 @@
|
|
|
4407
4409
|
} //marker offset 보정
|
|
4408
4410
|
|
|
4409
4411
|
|
|
4410
|
-
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
|
|
4412
|
+
offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
|
|
4411
4413
|
|
|
4412
4414
|
if (options.zIndex !== undefined) {
|
|
4413
4415
|
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|