@mint-ui/map 0.6.1-beta → 0.6.2-beta-test1

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 +2 -1
  2. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +76 -13
  3. package/dist/index.es.js +76 -13
  4. package/dist/index.umd.js +76 -13
  5. package/package.json +1 -1
package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts CHANGED
@@ -31,6 +31,7 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
31
31
  endAnimationClassName?: string;
32
32
  movingAnimation?: MapMarkerMoving;
33
33
  disablePointerEvent?: boolean;
34
+ autoFitToViewport?: boolean;
34
35
  }
35
36
  /**
36
37
  * Mint Map 컴포넌트
@@ -39,4 +40,4 @@ export interface MapMarkerWrapperProps extends MarkerOptions {
39
40
  *
40
41
  * @returns {JSX.Element} JSX
41
42
  */
42
- export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
43
+ export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, autoFitToViewport, topOnClick, topOnHover, movingAnimation, disablePointerEvent, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js CHANGED
@@ -9,13 +9,74 @@ 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) {
12
+ var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, mapDivElement) {
13
13
  //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
14
14
  if (mapType === 'google') {
15
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)");
16
16
  } else if (mapType === 'kakao') {
17
17
  divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
18
18
  }
19
+
20
+ if (autoFitToViewport) {
21
+ // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리
22
+ if (mapType === 'google') {
23
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, 10);
24
+ } else {
25
+ transformToFit(mapType, divElement, options, mapDivElement);
26
+ }
27
+ }
28
+ };
29
+
30
+ var transformToFitWithNextTick = function (mapType, divElement, options, mapDivElement, maxTryCount, nextCount) {
31
+ var tryCount = nextCount || 0;
32
+ setTimeout(function () {
33
+ tryCount += 1;
34
+
35
+ if (tryCount > maxTryCount) {
36
+ return;
37
+ }
38
+
39
+ var rect = divElement.getBoundingClientRect();
40
+
41
+ if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
42
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, maxTryCount, tryCount);
43
+ } else {
44
+ transformToFit(mapType, divElement, options, mapDivElement);
45
+ }
46
+ }, 20);
47
+ };
48
+
49
+ var transformToFit = function (mapType, divElement, options, mapDivElement) {
50
+ var mapRect = mapDivElement.getBoundingClientRect();
51
+ var rect = divElement.getBoundingClientRect(); // 보정 값 계산
52
+
53
+ var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
54
+ var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
55
+
56
+ if (xValue !== 0 || yValue !== 0) {
57
+ if (mapType === 'google') {
58
+ divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
59
+ } else if (mapType === 'kakao') {
60
+ divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
61
+ } else {
62
+ divElement.style.transform = "translate(".concat(xValue, "px, ").concat(yValue, "px)");
63
+ }
64
+ }
65
+ };
66
+
67
+ var getMarkersFitPosition = function (containerPosition, containerSize, markerPosition, markerSize) {
68
+ var delta = markerPosition - containerPosition;
69
+ var mapSize = containerSize;
70
+ var overflowMin = delta <= 0;
71
+ var overflowMax = delta + markerSize >= mapSize; // 한쪽만 넘어간 경우 처리
72
+
73
+ if (overflowMin && !overflowMax) {
74
+ return delta;
75
+ } else if (!overflowMin && overflowMax) {
76
+ return mapSize - delta - markerSize;
77
+ }
78
+
79
+ return 0;
19
80
  };
20
81
  /**
21
82
  * Mint Map 컴포넌트
@@ -29,15 +90,17 @@ var offsetCalibration = function (mapType, divElement, options) {
29
90
  function MapMarkerWrapper(_a) {
30
91
  _a.startAnimationClassName;
31
92
  _a.endAnimationClassName;
32
- var _b = _a.topOnClick,
33
- topOnClick = _b === void 0 ? false : _b,
34
- _c = _a.topOnHover,
35
- topOnHover = _c === void 0 ? false : _c,
93
+ var _b = _a.autoFitToViewport,
94
+ autoFitToViewport = _b === void 0 ? false : _b,
95
+ _c = _a.topOnClick,
96
+ topOnClick = _c === void 0 ? false : _c,
97
+ _d = _a.topOnHover,
98
+ topOnHover = _d === void 0 ? false : _d,
36
99
  movingAnimation = _a.movingAnimation,
37
- _d = _a.disablePointerEvent,
38
- disablePointerEvent = _d === void 0 ? false : _d,
100
+ _e = _a.disablePointerEvent,
101
+ disablePointerEvent = _e === void 0 ? false : _e,
39
102
  children = _a.children,
40
- options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
103
+ options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
41
104
 
42
105
 
43
106
  var controller = MintMapProvider.useMintMapController(); //element
@@ -47,9 +110,9 @@ function MapMarkerWrapper(_a) {
47
110
 
48
111
  var markerRef = React.useRef(); //moving animation
49
112
 
50
- var _e = React.useState({}),
51
- movingState = _e[0],
52
- setMovingState = _e[1];
113
+ var _f = React.useState({}),
114
+ movingState = _f[0],
115
+ setMovingState = _f[1];
53
116
 
54
117
  React.useEffect(function () {
55
118
  // console.log('movingState', movingState);
@@ -150,7 +213,7 @@ function MapMarkerWrapper(_a) {
150
213
  } //marker offset 보정
151
214
 
152
215
 
153
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
216
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
154
217
 
155
218
  if (options.zIndex !== undefined) {
156
219
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -167,7 +230,7 @@ function MapMarkerWrapper(_a) {
167
230
  } //marker offset 보정
168
231
 
169
232
 
170
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
233
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
171
234
 
172
235
  if (options.zIndex !== undefined) {
173
236
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
package/dist/index.es.js CHANGED
@@ -4171,13 +4171,74 @@ function useMarkerMoving(_a) {
4171
4171
  return [start, stop, resume];
4172
4172
  }
4173
4173
 
4174
- var offsetCalibration = function (mapType, divElement, options) {
4174
+ var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, mapDivElement) {
4175
4175
  //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
4176
4176
  if (mapType === 'google') {
4177
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)");
4178
4178
  } else if (mapType === 'kakao') {
4179
4179
  divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4180
4180
  }
4181
+
4182
+ if (autoFitToViewport) {
4183
+ // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리
4184
+ if (mapType === 'google') {
4185
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, 10);
4186
+ } else {
4187
+ transformToFit(mapType, divElement, options, mapDivElement);
4188
+ }
4189
+ }
4190
+ };
4191
+
4192
+ var transformToFitWithNextTick = function (mapType, divElement, options, mapDivElement, maxTryCount, nextCount) {
4193
+ var tryCount = nextCount || 0;
4194
+ setTimeout(function () {
4195
+ tryCount += 1;
4196
+
4197
+ if (tryCount > maxTryCount) {
4198
+ return;
4199
+ }
4200
+
4201
+ var rect = divElement.getBoundingClientRect();
4202
+
4203
+ if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
4204
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, maxTryCount, tryCount);
4205
+ } else {
4206
+ transformToFit(mapType, divElement, options, mapDivElement);
4207
+ }
4208
+ }, 20);
4209
+ };
4210
+
4211
+ var transformToFit = function (mapType, divElement, options, mapDivElement) {
4212
+ var mapRect = mapDivElement.getBoundingClientRect();
4213
+ var rect = divElement.getBoundingClientRect(); // 보정 값 계산
4214
+
4215
+ var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
4216
+ var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
4217
+
4218
+ if (xValue !== 0 || yValue !== 0) {
4219
+ if (mapType === 'google') {
4220
+ divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
4221
+ } else if (mapType === 'kakao') {
4222
+ divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
4223
+ } else {
4224
+ divElement.style.transform = "translate(".concat(xValue, "px, ").concat(yValue, "px)");
4225
+ }
4226
+ }
4227
+ };
4228
+
4229
+ var getMarkersFitPosition = function (containerPosition, containerSize, markerPosition, markerSize) {
4230
+ var delta = markerPosition - containerPosition;
4231
+ var mapSize = containerSize;
4232
+ var overflowMin = delta <= 0;
4233
+ var overflowMax = delta + markerSize >= mapSize; // 한쪽만 넘어간 경우 처리
4234
+
4235
+ if (overflowMin && !overflowMax) {
4236
+ return delta;
4237
+ } else if (!overflowMin && overflowMax) {
4238
+ return mapSize - delta - markerSize;
4239
+ }
4240
+
4241
+ return 0;
4181
4242
  };
4182
4243
  /**
4183
4244
  * Mint Map 컴포넌트
@@ -4191,15 +4252,17 @@ var offsetCalibration = function (mapType, divElement, options) {
4191
4252
  function MapMarkerWrapper(_a) {
4192
4253
  _a.startAnimationClassName;
4193
4254
  _a.endAnimationClassName;
4194
- var _b = _a.topOnClick,
4195
- topOnClick = _b === void 0 ? false : _b,
4196
- _c = _a.topOnHover,
4197
- topOnHover = _c === void 0 ? false : _c,
4255
+ var _b = _a.autoFitToViewport,
4256
+ autoFitToViewport = _b === void 0 ? false : _b,
4257
+ _c = _a.topOnClick,
4258
+ topOnClick = _c === void 0 ? false : _c,
4259
+ _d = _a.topOnHover,
4260
+ topOnHover = _d === void 0 ? false : _d,
4198
4261
  movingAnimation = _a.movingAnimation,
4199
- _d = _a.disablePointerEvent,
4200
- disablePointerEvent = _d === void 0 ? false : _d,
4262
+ _e = _a.disablePointerEvent,
4263
+ disablePointerEvent = _e === void 0 ? false : _e,
4201
4264
  children = _a.children,
4202
- options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
4265
+ options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
4203
4266
 
4204
4267
 
4205
4268
  var controller = useMintMapController(); //element
@@ -4209,9 +4272,9 @@ function MapMarkerWrapper(_a) {
4209
4272
 
4210
4273
  var markerRef = useRef(); //moving animation
4211
4274
 
4212
- var _e = useState({}),
4213
- movingState = _e[0],
4214
- setMovingState = _e[1];
4275
+ var _f = useState({}),
4276
+ movingState = _f[0],
4277
+ setMovingState = _f[1];
4215
4278
 
4216
4279
  useEffect(function () {
4217
4280
  // console.log('movingState', movingState);
@@ -4312,7 +4375,7 @@ function MapMarkerWrapper(_a) {
4312
4375
  } //marker offset 보정
4313
4376
 
4314
4377
 
4315
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
4378
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
4316
4379
 
4317
4380
  if (options.zIndex !== undefined) {
4318
4381
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4329,7 +4392,7 @@ function MapMarkerWrapper(_a) {
4329
4392
  } //marker offset 보정
4330
4393
 
4331
4394
 
4332
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
4395
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
4333
4396
 
4334
4397
  if (options.zIndex !== undefined) {
4335
4398
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
package/dist/index.umd.js CHANGED
@@ -4175,13 +4175,74 @@
4175
4175
  return [start, stop, resume];
4176
4176
  }
4177
4177
 
4178
- var offsetCalibration = function (mapType, divElement, options) {
4178
+ var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, mapDivElement) {
4179
4179
  //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
4180
4180
  if (mapType === 'google') {
4181
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)");
4182
4182
  } else if (mapType === 'kakao') {
4183
4183
  divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
4184
4184
  }
4185
+
4186
+ if (autoFitToViewport) {
4187
+ // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리
4188
+ if (mapType === 'google') {
4189
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, 10);
4190
+ } else {
4191
+ transformToFit(mapType, divElement, options, mapDivElement);
4192
+ }
4193
+ }
4194
+ };
4195
+
4196
+ var transformToFitWithNextTick = function (mapType, divElement, options, mapDivElement, maxTryCount, nextCount) {
4197
+ var tryCount = nextCount || 0;
4198
+ setTimeout(function () {
4199
+ tryCount += 1;
4200
+
4201
+ if (tryCount > maxTryCount) {
4202
+ return;
4203
+ }
4204
+
4205
+ var rect = divElement.getBoundingClientRect();
4206
+
4207
+ if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
4208
+ transformToFitWithNextTick(mapType, divElement, options, mapDivElement, maxTryCount, tryCount);
4209
+ } else {
4210
+ transformToFit(mapType, divElement, options, mapDivElement);
4211
+ }
4212
+ }, 20);
4213
+ };
4214
+
4215
+ var transformToFit = function (mapType, divElement, options, mapDivElement) {
4216
+ var mapRect = mapDivElement.getBoundingClientRect();
4217
+ var rect = divElement.getBoundingClientRect(); // 보정 값 계산
4218
+
4219
+ var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
4220
+ var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
4221
+
4222
+ if (xValue !== 0 || yValue !== 0) {
4223
+ if (mapType === 'google') {
4224
+ divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
4225
+ } else if (mapType === 'kakao') {
4226
+ divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
4227
+ } else {
4228
+ divElement.style.transform = "translate(".concat(xValue, "px, ").concat(yValue, "px)");
4229
+ }
4230
+ }
4231
+ };
4232
+
4233
+ var getMarkersFitPosition = function (containerPosition, containerSize, markerPosition, markerSize) {
4234
+ var delta = markerPosition - containerPosition;
4235
+ var mapSize = containerSize;
4236
+ var overflowMin = delta <= 0;
4237
+ var overflowMax = delta + markerSize >= mapSize; // 한쪽만 넘어간 경우 처리
4238
+
4239
+ if (overflowMin && !overflowMax) {
4240
+ return delta;
4241
+ } else if (!overflowMin && overflowMax) {
4242
+ return mapSize - delta - markerSize;
4243
+ }
4244
+
4245
+ return 0;
4185
4246
  };
4186
4247
  /**
4187
4248
  * Mint Map 컴포넌트
@@ -4195,15 +4256,17 @@
4195
4256
  function MapMarkerWrapper(_a) {
4196
4257
  _a.startAnimationClassName;
4197
4258
  _a.endAnimationClassName;
4198
- var _b = _a.topOnClick,
4199
- topOnClick = _b === void 0 ? false : _b,
4200
- _c = _a.topOnHover,
4201
- topOnHover = _c === void 0 ? false : _c,
4259
+ var _b = _a.autoFitToViewport,
4260
+ autoFitToViewport = _b === void 0 ? false : _b,
4261
+ _c = _a.topOnClick,
4262
+ topOnClick = _c === void 0 ? false : _c,
4263
+ _d = _a.topOnHover,
4264
+ topOnHover = _d === void 0 ? false : _d,
4202
4265
  movingAnimation = _a.movingAnimation,
4203
- _d = _a.disablePointerEvent,
4204
- disablePointerEvent = _d === void 0 ? false : _d,
4266
+ _e = _a.disablePointerEvent,
4267
+ disablePointerEvent = _e === void 0 ? false : _e,
4205
4268
  children = _a.children,
4206
- options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
4269
+ options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
4207
4270
 
4208
4271
 
4209
4272
  var controller = useMintMapController(); //element
@@ -4213,9 +4276,9 @@
4213
4276
 
4214
4277
  var markerRef = React.useRef(); //moving animation
4215
4278
 
4216
- var _e = React.useState({}),
4217
- movingState = _e[0],
4218
- setMovingState = _e[1];
4279
+ var _f = React.useState({}),
4280
+ movingState = _f[0],
4281
+ setMovingState = _f[1];
4219
4282
 
4220
4283
  React.useEffect(function () {
4221
4284
  // console.log('movingState', movingState);
@@ -4316,7 +4379,7 @@
4316
4379
  } //marker offset 보정
4317
4380
 
4318
4381
 
4319
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
4382
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
4320
4383
 
4321
4384
  if (options.zIndex !== undefined) {
4322
4385
  controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4333,7 +4396,7 @@
4333
4396
  } //marker offset 보정
4334
4397
 
4335
4398
 
4336
- offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
4399
+ offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
4337
4400
 
4338
4401
  if (options.zIndex !== undefined) {
4339
4402
  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.1-beta",
3
+ "version": "0.6.2-beta-test1",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.es.js",
6
6
  "browser": "./dist/index.umd.js",