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

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 (4) hide show
  1. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +29 -24
  2. package/dist/index.es.js +29 -24
  3. package/dist/index.umd.js +29 -24
  4. package/package.json +1 -1
package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js CHANGED
@@ -11,23 +11,28 @@ var MapDrawables = require('../../types/MapDrawables.js');
11
11
 
12
12
  var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, 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, 50);
24
29
  } else {
25
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
30
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
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, 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, maxTryCount, tryCount);
43
48
  } else {
44
- transformToFit(divElement, mapDivElement, anchorAdjust);
49
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
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) {
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 * -1 : toRight ? rect.width : 0;
68
+ var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 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
 
@@ -184,10 +188,11 @@ function MapMarkerWrapper(_a) {
184
188
 
185
189
  React.useEffect(function () {
186
190
  // 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';
191
+ // divElement.style.display = 'flex'
192
+ // divElement.style.justifyContent = 'flex-start'
193
+ // divElement.style.alignItems = 'flex-start'
194
+ // divElement.style.flexDirection = 'column'
195
+ divElement.style.width = 'fit-content';
191
196
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
192
197
  divElement.addEventListener('click', onClickHandler);
193
198
  divElement.addEventListener('mousedown', onMousedownHandler, {
package/dist/index.es.js CHANGED
@@ -4173,23 +4173,28 @@ function useMarkerMoving(_a) {
4173
4173
 
4174
4174
  var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, 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, 50);
4186
4191
  } else {
4187
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
4192
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
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, 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, maxTryCount, tryCount);
4205
4210
  } else {
4206
- transformToFit(divElement, mapDivElement, anchorAdjust);
4211
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
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) {
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 * -1 : toRight ? rect.width : 0;
4230
+ var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 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
 
@@ -4346,10 +4350,11 @@ function MapMarkerWrapper(_a) {
4346
4350
 
4347
4351
  useEffect(function () {
4348
4352
  // 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';
4353
+ // divElement.style.display = 'flex'
4354
+ // divElement.style.justifyContent = 'flex-start'
4355
+ // divElement.style.alignItems = 'flex-start'
4356
+ // divElement.style.flexDirection = 'column'
4357
+ divElement.style.width = 'fit-content';
4353
4358
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
4354
4359
  divElement.addEventListener('click', onClickHandler);
4355
4360
  divElement.addEventListener('mousedown', onMousedownHandler, {
package/dist/index.umd.js CHANGED
@@ -4177,23 +4177,28 @@
4177
4177
 
4178
4178
  var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, 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, 50);
4190
4195
  } else {
4191
- transformToFit(divElement, mapDivElement, autoAdjustAnchor);
4196
+ transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
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, 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, maxTryCount, tryCount);
4209
4214
  } else {
4210
- transformToFit(divElement, mapDivElement, anchorAdjust);
4215
+ transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
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) {
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 * -1 : toRight ? rect.width : 0;
4234
+ var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 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
 
@@ -4350,10 +4354,11 @@
4350
4354
 
4351
4355
  React.useEffect(function () {
4352
4356
  // 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';
4357
+ // divElement.style.display = 'flex'
4358
+ // divElement.style.justifyContent = 'flex-start'
4359
+ // divElement.style.alignItems = 'flex-start'
4360
+ // divElement.style.flexDirection = 'column'
4361
+ divElement.style.width = 'fit-content';
4357
4362
  divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
4358
4363
  divElement.addEventListener('click', onClickHandler);
4359
4364
  divElement.addEventListener('mousedown', onMousedownHandler, {
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-test4",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",