@mint-ui/map 0.6.2-beta-test3 → 0.6.2-beta-test5

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.
Files changed (5) hide show
  1. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts +8 -1
  2. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +44 -37
  3. package/dist/index.es.js +44 -37
  4. package/dist/index.umd.js +44 -37
  5. package/package.json +1 -1
package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts CHANGED
@@ -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;
package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js CHANGED
@@ -9,25 +9,30 @@ 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
+ var baseTransform = '';
15
+
14
16
  if (mapType === 'google') {
15
- divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
17
+ baseTransform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
16
18
  } else if (mapType === 'kakao') {
17
- divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
19
+ baseTransform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
18
20
  }
19
21
 
22
+ divElement.style.transform = baseTransform;
23
+
20
24
  if (autoFitToViewport || autoAdjustAnchor) {
21
25
  // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
22
26
  if (mapType === 'google') {
23
- transformToFitWithNextTick(divElement, mapDivElement, autoAdjustAnchor, 50);
27
+ divElement.style.visibility = 'hidden';
28
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
24
29
  } else {
25
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
30
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
26
31
  }
27
32
  }
28
33
  };
29
34
 
30
- var transformToFitWithNextTick = function (divElement, mapDivElement, anchorAdjust, maxTryCount, nextCount) {
35
+ var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
31
36
  var tryCount = nextCount || 0;
32
37
  setTimeout(function () {
33
38
  tryCount += 1;
@@ -39,32 +44,31 @@ var transformToFitWithNextTick = function (divElement, mapDivElement, anchorAdju
39
44
  var rect = divElement.getBoundingClientRect();
40
45
 
41
46
  if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
42
- transformToFitWithNextTick(divElement, mapDivElement, anchorAdjust, maxTryCount, tryCount);
47
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
43
48
  } else {
44
- transformToFit(divElement, mapDivElement, anchorAdjust);
49
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
50
+ divElement.style.visibility = 'visible';
45
51
  }
46
52
  }, 20);
47
53
  };
48
54
 
49
- var transformToFit = function (divElement, mapDivElement, anchorAdjust) {
55
+ var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
50
56
  var mapRect = mapDivElement.getBoundingClientRect();
51
57
  var rect = divElement.getBoundingClientRect(); // 보정 값 계산
52
58
 
53
59
  var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
54
60
  var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
55
61
 
56
- if (xValue !== 0 || yValue !== 0) {
57
- if (anchorAdjust) {
58
- var toLeft = xValue < 0;
59
- var toRight = xValue > 0;
60
- var toTop = yValue < 0;
61
- var toBottom = yValue > 0;
62
- var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
63
- var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
64
- divElement.style.transform = divElement.style.transform + " translate(".concat(transX, "px, ").concat(transY, "px)");
65
- } else {
66
- divElement.style.transform = divElement.style.transform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
67
- }
62
+ if (anchorAdjust) {
63
+ var toLeft = xValue < 0;
64
+ var toRight = xValue > 0;
65
+ var toTop = yValue < 0;
66
+ var toBottom = yValue > 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
+ divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
70
+ } else {
71
+ divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
68
72
  }
69
73
  };
70
74
 
@@ -98,15 +102,17 @@ function MapMarkerWrapper(_a) {
98
102
  autoFitToViewport = _b === void 0 ? false : _b,
99
103
  _c = _a.autoAdjustAnchor,
100
104
  autoAdjustAnchor = _c === void 0 ? false : _c,
101
- _d = _a.topOnClick,
102
- topOnClick = _d === void 0 ? false : _d,
103
- _e = _a.topOnHover,
104
- topOnHover = _e === void 0 ? false : _e,
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,
105
111
  movingAnimation = _a.movingAnimation,
106
- _f = _a.disablePointerEvent,
107
- disablePointerEvent = _f === void 0 ? false : _f,
112
+ _g = _a.disablePointerEvent,
113
+ disablePointerEvent = _g === void 0 ? false : _g,
108
114
  children = _a.children,
109
- 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
110
116
 
111
117
 
112
118
  var controller = MintMapProvider.useMintMapController(); //element
@@ -116,9 +122,9 @@ function MapMarkerWrapper(_a) {
116
122
 
117
123
  var markerRef = React.useRef(); //moving animation
118
124
 
119
- var _g = React.useState({}),
120
- movingState = _g[0],
121
- setMovingState = _g[1];
125
+ var _h = React.useState({}),
126
+ movingState = _h[0],
127
+ setMovingState = _h[1];
122
128
 
123
129
  React.useEffect(function () {
124
130
  // console.log('movingState', movingState);
@@ -184,10 +190,11 @@ function MapMarkerWrapper(_a) {
184
190
 
185
191
  React.useEffect(function () {
186
192
  // console.log('drawable created')
187
- divElement.style.display = 'flex';
188
- divElement.style.justifyContent = 'flex-start';
189
- divElement.style.alignItems = 'flex-start';
190
- divElement.style.flexDirection = 'column';
193
+ // divElement.style.display = 'flex'
194
+ // divElement.style.justifyContent = 'flex-start'
195
+ // divElement.style.alignItems = 'flex-start'
196
+ // divElement.style.flexDirection = 'column'
197
+ divElement.style.width = 'fit-content';
191
198
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
192
199
  divElement.addEventListener('click', onClickHandler);
193
200
  divElement.addEventListener('mousedown', onMousedownHandler, {
@@ -219,7 +226,7 @@ function MapMarkerWrapper(_a) {
219
226
  } //marker offset 보정
220
227
 
221
228
 
222
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
229
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
223
230
 
224
231
  if (options.zIndex !== undefined) {
225
232
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -236,7 +243,7 @@ function MapMarkerWrapper(_a) {
236
243
  } //marker offset 보정
237
244
 
238
245
 
239
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
246
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
240
247
 
241
248
  if (options.zIndex !== undefined) {
242
249
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
package/dist/index.es.js CHANGED
@@ -4171,25 +4171,30 @@ 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
+ var baseTransform = '';
4177
+
4176
4178
  if (mapType === 'google') {
4177
- divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4179
+ baseTransform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4178
4180
  } else if (mapType === 'kakao') {
4179
- divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4181
+ baseTransform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4180
4182
  }
4181
4183
 
4184
+ divElement.style.transform = baseTransform;
4185
+
4182
4186
  if (autoFitToViewport || autoAdjustAnchor) {
4183
4187
  // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
4184
4188
  if (mapType === 'google') {
4185
- transformToFitWithNextTick(divElement, mapDivElement, autoAdjustAnchor, 50);
4189
+ divElement.style.visibility = 'hidden';
4190
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
4186
4191
  } else {
4187
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
4192
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
4188
4193
  }
4189
4194
  }
4190
4195
  };
4191
4196
 
4192
- var transformToFitWithNextTick = function (divElement, mapDivElement, anchorAdjust, maxTryCount, nextCount) {
4197
+ var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
4193
4198
  var tryCount = nextCount || 0;
4194
4199
  setTimeout(function () {
4195
4200
  tryCount += 1;
@@ -4201,32 +4206,31 @@ var transformToFitWithNextTick = function (divElement, mapDivElement, anchorAdju
4201
4206
  var rect = divElement.getBoundingClientRect();
4202
4207
 
4203
4208
  if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
4204
- transformToFitWithNextTick(divElement, mapDivElement, anchorAdjust, maxTryCount, tryCount);
4209
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
4205
4210
  } else {
4206
- transformToFit(divElement, mapDivElement, anchorAdjust);
4211
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
4212
+ divElement.style.visibility = 'visible';
4207
4213
  }
4208
4214
  }, 20);
4209
4215
  };
4210
4216
 
4211
- var transformToFit = function (divElement, mapDivElement, anchorAdjust) {
4217
+ var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
4212
4218
  var mapRect = mapDivElement.getBoundingClientRect();
4213
4219
  var rect = divElement.getBoundingClientRect(); // 보정 값 계산
4214
4220
 
4215
4221
  var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
4216
4222
  var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
4217
4223
 
4218
- if (xValue !== 0 || yValue !== 0) {
4219
- if (anchorAdjust) {
4220
- var toLeft = xValue < 0;
4221
- var toRight = xValue > 0;
4222
- var toTop = yValue < 0;
4223
- var toBottom = yValue > 0;
4224
- var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
4225
- var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
4226
- divElement.style.transform = divElement.style.transform + " translate(".concat(transX, "px, ").concat(transY, "px)");
4227
- } else {
4228
- divElement.style.transform = divElement.style.transform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
4229
- }
4224
+ if (anchorAdjust) {
4225
+ var toLeft = xValue < 0;
4226
+ var toRight = xValue > 0;
4227
+ var toTop = yValue < 0;
4228
+ var toBottom = yValue > 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
+ divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
4232
+ } else {
4233
+ divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
4230
4234
  }
4231
4235
  };
4232
4236
 
@@ -4260,15 +4264,17 @@ function MapMarkerWrapper(_a) {
4260
4264
  autoFitToViewport = _b === void 0 ? false : _b,
4261
4265
  _c = _a.autoAdjustAnchor,
4262
4266
  autoAdjustAnchor = _c === void 0 ? false : _c,
4263
- _d = _a.topOnClick,
4264
- topOnClick = _d === void 0 ? false : _d,
4265
- _e = _a.topOnHover,
4266
- topOnHover = _e === void 0 ? false : _e,
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,
4267
4273
  movingAnimation = _a.movingAnimation,
4268
- _f = _a.disablePointerEvent,
4269
- disablePointerEvent = _f === void 0 ? false : _f,
4274
+ _g = _a.disablePointerEvent,
4275
+ disablePointerEvent = _g === void 0 ? false : _g,
4270
4276
  children = _a.children,
4271
- 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
4272
4278
 
4273
4279
 
4274
4280
  var controller = useMintMapController(); //element
@@ -4278,9 +4284,9 @@ function MapMarkerWrapper(_a) {
4278
4284
 
4279
4285
  var markerRef = useRef(); //moving animation
4280
4286
 
4281
- var _g = useState({}),
4282
- movingState = _g[0],
4283
- setMovingState = _g[1];
4287
+ var _h = useState({}),
4288
+ movingState = _h[0],
4289
+ setMovingState = _h[1];
4284
4290
 
4285
4291
  useEffect(function () {
4286
4292
  // console.log('movingState', movingState);
@@ -4346,10 +4352,11 @@ function MapMarkerWrapper(_a) {
4346
4352
 
4347
4353
  useEffect(function () {
4348
4354
  // console.log('drawable created')
4349
- divElement.style.display = 'flex';
4350
- divElement.style.justifyContent = 'flex-start';
4351
- divElement.style.alignItems = 'flex-start';
4352
- divElement.style.flexDirection = 'column';
4355
+ // divElement.style.display = 'flex'
4356
+ // divElement.style.justifyContent = 'flex-start'
4357
+ // divElement.style.alignItems = 'flex-start'
4358
+ // divElement.style.flexDirection = 'column'
4359
+ divElement.style.width = 'fit-content';
4353
4360
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
4354
4361
  divElement.addEventListener('click', onClickHandler);
4355
4362
  divElement.addEventListener('mousedown', onMousedownHandler, {
@@ -4381,7 +4388,7 @@ function MapMarkerWrapper(_a) {
4381
4388
  } //marker offset 보정
4382
4389
 
4383
4390
 
4384
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
4391
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
4385
4392
 
4386
4393
  if (options.zIndex !== undefined) {
4387
4394
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4398,7 +4405,7 @@ function MapMarkerWrapper(_a) {
4398
4405
  } //marker offset 보정
4399
4406
 
4400
4407
 
4401
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
4408
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
4402
4409
 
4403
4410
  if (options.zIndex !== undefined) {
4404
4411
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
package/dist/index.umd.js CHANGED
@@ -4175,25 +4175,30 @@
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
+ var baseTransform = '';
4181
+
4180
4182
  if (mapType === 'google') {
4181
- divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4183
+ baseTransform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4182
4184
  } else if (mapType === 'kakao') {
4183
- divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4185
+ baseTransform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4184
4186
  }
4185
4187
 
4188
+ divElement.style.transform = baseTransform;
4189
+
4186
4190
  if (autoFitToViewport || autoAdjustAnchor) {
4187
4191
  // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
4188
4192
  if (mapType === 'google') {
4189
- transformToFitWithNextTick(divElement, mapDivElement, autoAdjustAnchor, 50);
4193
+ divElement.style.visibility = 'hidden';
4194
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig, 50);
4190
4195
  } else {
4191
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
4196
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor, autoAdjustAnchorConfig);
4192
4197
  }
4193
4198
  }
4194
4199
  };
4195
4200
 
4196
- var transformToFitWithNextTick = function (divElement, mapDivElement, anchorAdjust, maxTryCount, nextCount) {
4201
+ var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, nextCount) {
4197
4202
  var tryCount = nextCount || 0;
4198
4203
  setTimeout(function () {
4199
4204
  tryCount += 1;
@@ -4205,32 +4210,31 @@
4205
4210
  var rect = divElement.getBoundingClientRect();
4206
4211
 
4207
4212
  if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
4208
- transformToFitWithNextTick(divElement, mapDivElement, anchorAdjust, maxTryCount, tryCount);
4213
+ transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig, maxTryCount, tryCount);
4209
4214
  } else {
4210
- transformToFit(divElement, mapDivElement, anchorAdjust);
4215
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig);
4216
+ divElement.style.visibility = 'visible';
4211
4217
  }
4212
4218
  }, 20);
4213
4219
  };
4214
4220
 
4215
- var transformToFit = function (divElement, mapDivElement, anchorAdjust) {
4221
+ var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust, autoAdjustAnchorConfig) {
4216
4222
  var mapRect = mapDivElement.getBoundingClientRect();
4217
4223
  var rect = divElement.getBoundingClientRect(); // 보정 값 계산
4218
4224
 
4219
4225
  var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
4220
4226
  var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
4221
4227
 
4222
- if (xValue !== 0 || yValue !== 0) {
4223
- if (anchorAdjust) {
4224
- var toLeft = xValue < 0;
4225
- var toRight = xValue > 0;
4226
- var toTop = yValue < 0;
4227
- var toBottom = yValue > 0;
4228
- var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
4229
- var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
4230
- divElement.style.transform = divElement.style.transform + " translate(".concat(transX, "px, ").concat(transY, "px)");
4231
- } else {
4232
- divElement.style.transform = divElement.style.transform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
4233
- }
4228
+ if (anchorAdjust) {
4229
+ var toLeft = xValue < 0;
4230
+ var toRight = xValue > 0;
4231
+ var toTop = yValue < 0;
4232
+ var toBottom = yValue > 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
+ divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
4236
+ } else {
4237
+ divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
4234
4238
  }
4235
4239
  };
4236
4240
 
@@ -4264,15 +4268,17 @@
4264
4268
  autoFitToViewport = _b === void 0 ? false : _b,
4265
4269
  _c = _a.autoAdjustAnchor,
4266
4270
  autoAdjustAnchor = _c === void 0 ? false : _c,
4267
- _d = _a.topOnClick,
4268
- topOnClick = _d === void 0 ? false : _d,
4269
- _e = _a.topOnHover,
4270
- topOnHover = _e === void 0 ? false : _e,
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,
4271
4277
  movingAnimation = _a.movingAnimation,
4272
- _f = _a.disablePointerEvent,
4273
- disablePointerEvent = _f === void 0 ? false : _f,
4278
+ _g = _a.disablePointerEvent,
4279
+ disablePointerEvent = _g === void 0 ? false : _g,
4274
4280
  children = _a.children,
4275
- 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
4276
4282
 
4277
4283
 
4278
4284
  var controller = useMintMapController(); //element
@@ -4282,9 +4288,9 @@
4282
4288
 
4283
4289
  var markerRef = React.useRef(); //moving animation
4284
4290
 
4285
- var _g = React.useState({}),
4286
- movingState = _g[0],
4287
- setMovingState = _g[1];
4291
+ var _h = React.useState({}),
4292
+ movingState = _h[0],
4293
+ setMovingState = _h[1];
4288
4294
 
4289
4295
  React.useEffect(function () {
4290
4296
  // console.log('movingState', movingState);
@@ -4350,10 +4356,11 @@
4350
4356
 
4351
4357
  React.useEffect(function () {
4352
4358
  // console.log('drawable created')
4353
- divElement.style.display = 'flex';
4354
- divElement.style.justifyContent = 'flex-start';
4355
- divElement.style.alignItems = 'flex-start';
4356
- divElement.style.flexDirection = 'column';
4359
+ // divElement.style.display = 'flex'
4360
+ // divElement.style.justifyContent = 'flex-start'
4361
+ // divElement.style.alignItems = 'flex-start'
4362
+ // divElement.style.flexDirection = 'column'
4363
+ divElement.style.width = 'fit-content';
4357
4364
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
4358
4365
  divElement.addEventListener('click', onClickHandler);
4359
4366
  divElement.addEventListener('mousedown', onMousedownHandler, {
@@ -4385,7 +4392,7 @@
4385
4392
  } //marker offset 보정
4386
4393
 
4387
4394
 
4388
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
4395
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
4389
4396
 
4390
4397
  if (options.zIndex !== undefined) {
4391
4398
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4402,7 +4409,7 @@
4402
4409
  } //marker offset 보정
4403
4410
 
4404
4411
 
4405
- offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
4412
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, autoAdjustAnchorConfig, controller.mapDivElement); //z-index 처리
4406
4413
 
4407
4414
  if (options.zIndex !== undefined) {
4408
4415
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mint-ui/map",
3
- "version": "0.6.2-beta-test3",
3
+ "version": "0.6.2-beta-test5",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",