@mint-ui/map 0.5.4-beta → 0.5.6-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.
Files changed (65) hide show
  1. package/.eslintrc.js +109 -109
  2. package/LICENSE +21 -21
  3. package/README.md +73 -73
  4. package/dist/components/mint-map/MintMap.d.ts +10 -10
  5. package/dist/components/mint-map/MintMap.js +6 -6
  6. package/dist/components/mint-map/core/MintMapCanvasRenderer.d.ts +4 -4
  7. package/dist/components/mint-map/core/MintMapController.d.ts +64 -64
  8. package/dist/components/mint-map/core/MintMapController.js +9 -9
  9. package/dist/components/mint-map/core/MintMapCore.d.ts +3 -3
  10. package/dist/components/mint-map/core/advanced/MapBuildingProjection.d.ts +15 -15
  11. package/dist/components/mint-map/core/advanced/MapLoadingComponents.d.ts +17 -17
  12. package/dist/components/mint-map/core/advanced/index.d.ts +3 -3
  13. package/dist/components/mint-map/core/advanced/shapes/CircleMarker.d.ts +20 -20
  14. package/dist/components/mint-map/core/advanced/shapes/CircleMarker.js +6 -6
  15. package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.d.ts +26 -23
  16. package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.js +12 -9
  17. package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.d.ts +8 -8
  18. package/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.d.ts +12 -12
  19. package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.d.ts +10 -10
  20. package/dist/components/mint-map/core/advanced/shapes/base/index.d.ts +3 -3
  21. package/dist/components/mint-map/core/advanced/shapes/index.d.ts +3 -3
  22. package/dist/components/mint-map/core/hooks/MarkerMovingHook.d.ts +6 -6
  23. package/dist/components/mint-map/core/hooks/index.d.ts +1 -1
  24. package/dist/components/mint-map/core/index.d.ts +8 -8
  25. package/dist/components/mint-map/core/provider/MintMapProvider.d.ts +8 -8
  26. package/dist/components/mint-map/core/provider/index.d.ts +1 -1
  27. package/dist/components/mint-map/core/util/animation.d.ts +16 -16
  28. package/dist/components/mint-map/core/util/cluster.d.ts +18 -18
  29. package/dist/components/mint-map/core/util/geo.d.ts +38 -38
  30. package/dist/components/mint-map/core/util/index.d.ts +5 -5
  31. package/dist/components/mint-map/core/util/polygon.d.ts +42 -40
  32. package/dist/components/mint-map/core/util/polygon.js +37 -8
  33. package/dist/components/mint-map/core/util/waiting.d.ts +1 -1
  34. package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.d.ts +27 -27
  35. package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js +6 -6
  36. package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.d.ts +11 -11
  37. package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.js +10 -26
  38. package/dist/components/mint-map/core/wrapper/MapControlWrapper.d.ts +18 -18
  39. package/dist/components/mint-map/core/wrapper/MapControlWrapper.js +6 -6
  40. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts +42 -42
  41. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +6 -6
  42. package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.d.ts +12 -12
  43. package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.js +6 -6
  44. package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.d.ts +12 -12
  45. package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js +6 -6
  46. package/dist/components/mint-map/core/wrapper/index.d.ts +6 -6
  47. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +51 -51
  48. package/dist/components/mint-map/index.d.ts +5 -5
  49. package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +56 -56
  50. package/dist/components/mint-map/kakao/KakaoMintMapController.js +7 -7
  51. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +54 -54
  52. package/dist/components/mint-map/naver/NaverMintMapController.js +6 -6
  53. package/dist/components/mint-map/types/CommonTypes.d.ts +11 -11
  54. package/dist/components/mint-map/types/MapDrawables.d.ts +110 -110
  55. package/dist/components/mint-map/types/MapDrawables.js +8 -8
  56. package/dist/components/mint-map/types/MapEventTypes.d.ts +44 -44
  57. package/dist/components/mint-map/types/MapTypes.d.ts +60 -60
  58. package/dist/components/mint-map/types/MapTypes.js +13 -13
  59. package/dist/components/mint-map/types/MintMapEvents.d.ts +25 -25
  60. package/dist/components/mint-map/types/MintMapProps.d.ts +92 -92
  61. package/dist/components/mint-map/types/index.d.ts +6 -6
  62. package/dist/index.d.ts +7 -7
  63. package/dist/index.es.js +143 -128
  64. package/dist/index.umd.js +143 -128
  65. package/package.json +77 -77
package/dist/index.umd.js CHANGED
@@ -365,9 +365,30 @@
365
365
  return false;
366
366
  };
367
367
 
368
- PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
369
- var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
370
- return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
368
+ PolygonCalculator.simplifyPoints = function (polygon, tolerance, _lastRepeated) {
369
+ return this.simplify(this.pathCleaning(polygon), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
370
+ };
371
+
372
+ PolygonCalculator.pathCleaning = function (polygon) {
373
+ if (polygon.length < 3) {
374
+ return polygon;
375
+ }
376
+
377
+ var main = polygon[0];
378
+ var delCount = 0;
379
+
380
+ for (var i = polygon.length - 1; i >= 0; i--) {
381
+ if (main.equals(polygon[i])) {
382
+ delCount += 1;
383
+ } else {
384
+ break;
385
+ }
386
+ }
387
+
388
+ delCount > 0 && polygon.splice(polygon.length - delCount, delCount);
389
+ var out = [];
390
+ out.push.apply(out, polygon);
391
+ return out;
371
392
  };
372
393
 
373
394
  PolygonCalculator.simplify = function (points, tolerance) {
@@ -378,8 +399,10 @@
378
399
  var dMax = 0;
379
400
  var index = 0; // Find the point with the maximum distance from the line segment
380
401
 
402
+ var denominator = this.perpendicularDistanceDenominator(points[0], points[points.length - 1]);
403
+
381
404
  for (var i = 1; i < points.length - 1; i++) {
382
- var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
405
+ var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1], denominator);
383
406
 
384
407
  if (d > dMax) {
385
408
  dMax = d;
@@ -397,19 +420,25 @@
397
420
  // If the maximum distance is less than or equal to the tolerance, return the endpoints
398
421
  return [points[0], points[points.length - 1]];
399
422
  }
423
+ };
424
+
425
+ PolygonCalculator.perpendicularDistanceDenominator = function (lineStart, lineEnd) {
426
+ var x1 = lineStart.x,
427
+ y1 = lineStart.y;
428
+ var x2 = lineEnd.x,
429
+ y2 = lineEnd.y;
430
+ return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
400
431
  }; // Calculate the perpendicular distance from a point to a line segment
401
432
 
402
433
 
403
- PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
434
+ PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd, denominator) {
404
435
  var x = point.x;
405
436
  var y = point.y;
406
437
  var x1 = lineStart.x;
407
438
  var y1 = lineStart.y;
408
439
  var x2 = lineEnd.x;
409
440
  var y2 = lineEnd.y;
410
- var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
411
- var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
412
- return numerator / denominator;
441
+ return Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1) / denominator;
413
442
  };
414
443
 
415
444
  PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
@@ -448,23 +477,23 @@
448
477
  return PolygonCalculator;
449
478
  }();
450
479
 
451
- /**
452
- * 좌표값
453
- * @description 위도/경도, DOM 상의 X/Y 좌표
480
+ /**
481
+ * 좌표값
482
+ * @description 위도/경도, DOM 상의 X/Y 좌표
454
483
  */
455
484
 
456
485
  var Position =
457
486
  /** @class */
458
487
  function () {
459
488
  function Position(lat, lng) {
460
- /**
461
- * 위도
462
- * @description 위도(latitude)
489
+ /**
490
+ * 위도
491
+ * @description 위도(latitude)
463
492
  */
464
493
  this.lat = 0;
465
- /**
466
- * 경도
467
- * @description 경도(longitude)
494
+ /**
495
+ * 경도
496
+ * @description 경도(longitude)
468
497
  */
469
498
 
470
499
  this.lng = 0;
@@ -572,15 +601,15 @@
572
601
 
573
602
  return Bounds;
574
603
  }();
575
- /**
576
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
604
+ /**
605
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
577
606
  */
578
607
 
579
608
  var Offset =
580
609
  /** @class */
581
610
  function () {
582
- /**
583
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
611
+ /**
612
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
584
613
  */
585
614
  function Offset(x, y) {
586
615
  this.x = x;
@@ -808,12 +837,12 @@
808
837
  MintMapController.prototype.getRandomFunctionName = function (prefix) {
809
838
  return "".concat(prefix, "_").concat(uuid.v4().replace(/-/g, '_'));
810
839
  };
811
- /**
812
- * URL 빌더 메서드
813
- *
814
- * @param {string} baseUrl: 기본 URL
815
- * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
816
- * @returns {string} URL
840
+ /**
841
+ * URL 빌더 메서드
842
+ *
843
+ * @param {string} baseUrl: 기본 URL
844
+ * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
845
+ * @returns {string} URL
817
846
  */
818
847
 
819
848
 
@@ -826,9 +855,9 @@
826
855
  }).join('&');
827
856
  return "".concat(baseUrl, "?").concat(params);
828
857
  };
829
- /**
830
- * 쓰로틀링 처리
831
- * @returns
858
+ /**
859
+ * 쓰로틀링 처리
860
+ * @returns
832
861
  */
833
862
 
834
863
 
@@ -1389,11 +1418,11 @@
1389
1418
  var map = marker.native.getMap();
1390
1419
 
1391
1420
  if (map) {
1392
- /** 중요!!!!
1393
- * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
1394
- * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
1395
- * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
1396
- * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
1421
+ /** 중요!!!!
1422
+ * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
1423
+ * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
1424
+ * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
1425
+ * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
1397
1426
  */
1398
1427
  //Position
1399
1428
  if (options.position && options.position instanceof Position) {
@@ -1772,7 +1801,7 @@
1772
1801
  (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
1773
1802
  };
1774
1803
 
1775
- NaverMintMapController.prototype.positionToOffset = function (position) {
1804
+ NaverMintMapController.prototype.naverPositionToOffset = function (position) {
1776
1805
  if (!this.map) {
1777
1806
  return new Offset(0, 0);
1778
1807
  }
@@ -3075,13 +3104,13 @@
3075
3104
  };
3076
3105
 
3077
3106
  KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
3078
- /**
3079
- * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
3080
- * - 가장 확대된 값 : 1
3081
- * - 가장 축소된 값 : 14
3082
- *
3083
- * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
3084
- * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
3107
+ /**
3108
+ * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
3109
+ * - 가장 확대된 값 : 1
3110
+ * - 가장 축소된 값 : 14
3111
+ *
3112
+ * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
3113
+ * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
3085
3114
  */
3086
3115
  var mapValue = this.getBaseToMapZoom(value);
3087
3116
 
@@ -3266,12 +3295,12 @@
3266
3295
  lat: 37.5036845,
3267
3296
  lng: 127.0448698
3268
3297
  };
3269
- /**
3270
- * Mint Map 컴포넌트
3271
- *
3272
- * @param {MintMapProps} MintMapProps
3273
- *
3274
- * @returns {JSX.Element} JSX
3298
+ /**
3299
+ * Mint Map 컴포넌트
3300
+ *
3301
+ * @param {MintMapProps} MintMapProps
3302
+ *
3303
+ * @returns {JSX.Element} JSX
3275
3304
  */
3276
3305
 
3277
3306
  function MintMap(_a) {
@@ -3694,8 +3723,8 @@
3694
3723
  /** @class */
3695
3724
  function (_super) {
3696
3725
  tslib.__extends(Marker, _super);
3697
- /**
3698
- * 지도에 표시할 마커정보
3726
+ /**
3727
+ * 지도에 표시할 마커정보
3699
3728
  */
3700
3729
 
3701
3730
 
@@ -3713,8 +3742,8 @@
3713
3742
  /** @class */
3714
3743
  function (_super) {
3715
3744
  tslib.__extends(Polyline, _super);
3716
- /**
3717
- * 지도에 표시할 폴리곤정보
3745
+ /**
3746
+ * 지도에 표시할 폴리곤정보
3718
3747
  */
3719
3748
 
3720
3749
 
@@ -3732,8 +3761,8 @@
3732
3761
  /** @class */
3733
3762
  function (_super) {
3734
3763
  tslib.__extends(Polygon, _super);
3735
- /**
3736
- * 지도에 표시할 폴리곤정보
3764
+ /**
3765
+ * 지도에 표시할 폴리곤정보
3737
3766
  */
3738
3767
 
3739
3768
 
@@ -3743,8 +3772,8 @@
3743
3772
  _this.options = options;
3744
3773
  return _this;
3745
3774
  }
3746
- /**
3747
- * 폴리곤의 중점을 구한다.
3775
+ /**
3776
+ * 폴리곤의 중점을 구한다.
3748
3777
  */
3749
3778
 
3750
3779
 
@@ -3914,12 +3943,12 @@
3914
3943
  divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
3915
3944
  }
3916
3945
  };
3917
- /**
3918
- * Mint Map 컴포넌트
3919
- *
3920
- * @param {MapControlWrapperProps} MapControlWrapperProps
3921
- *
3922
- * @returns {JSX.Element} JSX
3946
+ /**
3947
+ * Mint Map 컴포넌트
3948
+ *
3949
+ * @param {MapControlWrapperProps} MapControlWrapperProps
3950
+ *
3951
+ * @returns {JSX.Element} JSX
3923
3952
  */
3924
3953
 
3925
3954
 
@@ -4207,12 +4236,12 @@
4207
4236
  return Number((sum / nums.length).toFixed(7));
4208
4237
  };
4209
4238
 
4210
- /**
4211
- * CircleMarker
4212
- *
4213
- * @param {CircleMarkerProps} CircleMarkerProps
4214
- *
4215
- * @returns {JSX.Element} JSX
4239
+ /**
4240
+ * CircleMarker
4241
+ *
4242
+ * @param {CircleMarkerProps} CircleMarkerProps
4243
+ *
4244
+ * @returns {JSX.Element} JSX
4216
4245
  */
4217
4246
 
4218
4247
  function CircleMarker(_a) {
@@ -4324,12 +4353,12 @@
4324
4353
  }, children)));
4325
4354
  }
4326
4355
 
4327
- /**
4328
- *PolygonMarker
4329
- *
4330
- * @param {PolygonMarkerProps} PolygonMarkerProps
4331
- *
4332
- * @returns {JSX.Element} JSX
4356
+ /**
4357
+ *PolygonMarker
4358
+ *
4359
+ * @param {PolygonMarkerProps} PolygonMarkerProps
4360
+ *
4361
+ * @returns {JSX.Element} JSX
4333
4362
  */
4334
4363
 
4335
4364
  function PolygonMarker(_a) {
@@ -4437,9 +4466,10 @@
4437
4466
 
4438
4467
  if (minLng === undefined || minLng > pos.lng) {
4439
4468
  minLng = pos.lng;
4440
- }
4469
+ } //offset 계산 정확도를 위해 네이버 맵은 전용 projection 베이스의 function 을 사용한다.
4441
4470
 
4442
- return controller.positionToOffset(pos);
4471
+
4472
+ return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
4443
4473
  });
4444
4474
  var simplified = simplifyPath ? PolygonCalculator.simplifyPoints(offsets, simplifyTolerance, lastReapeated) : offsets;
4445
4475
  setOffsets(simplified); //inner path
@@ -4450,7 +4480,8 @@
4450
4480
  for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
4451
4481
  var innerPosition = innerPositions_1[_i];
4452
4482
  var offsets_1 = innerPosition.map(function (pos) {
4453
- return controller.positionToOffset(pos);
4483
+ //offset 계산 정확도를 위해 네이버 맵은 전용 projection 베이스의 function 을 사용한다.
4484
+ return controller instanceof NaverMintMapController ? controller.naverPositionToOffset(pos) : controller.positionToOffset(pos);
4454
4485
  });
4455
4486
  var simplified_1 = simplifyPath ? PolygonCalculator.simplifyPoints(offsets_1, simplifyTolerance, lastReapeated) : offsets_1;
4456
4487
  innerPath.push(simplified_1);
@@ -4478,12 +4509,12 @@
4478
4509
  }, children)));
4479
4510
  }
4480
4511
 
4481
- /**
4482
- * Mint Map 컴포넌트
4483
- *
4484
- * @param {MapControlWrapperProps} MapControlWrapperProps
4485
- *
4486
- * @returns {JSX.Element} JSX
4512
+ /**
4513
+ * Mint Map 컴포넌트
4514
+ *
4515
+ * @param {MapControlWrapperProps} MapControlWrapperProps
4516
+ *
4517
+ * @returns {JSX.Element} JSX
4487
4518
  */
4488
4519
 
4489
4520
  function MapPolygonWrapper(_a) {
@@ -4971,12 +5002,12 @@
4971
5002
 
4972
5003
  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
4973
5004
  };
4974
- /**
4975
- * Mint Map 컴포넌트
4976
- *
4977
- * @param {MapControlWrapperProps} MapControlWrapperProps
4978
- *
4979
- * @returns {JSX.Element} JSX
5005
+ /**
5006
+ * Mint Map 컴포넌트
5007
+ *
5008
+ * @param {MapControlWrapperProps} MapControlWrapperProps
5009
+ *
5010
+ * @returns {JSX.Element} JSX
4980
5011
  */
4981
5012
 
4982
5013
 
@@ -5001,12 +5032,12 @@
5001
5032
  }, children);
5002
5033
  }
5003
5034
 
5004
- /**
5005
- * Mint Map 컴포넌트
5006
- *
5007
- * @param {MapControlWrapperProps} MapControlWrapperProps
5008
- *
5009
- * @returns {JSX.Element} JSX
5035
+ /**
5036
+ * Mint Map 컴포넌트
5037
+ *
5038
+ * @param {MapControlWrapperProps} MapControlWrapperProps
5039
+ *
5040
+ * @returns {JSX.Element} JSX
5010
5041
  */
5011
5042
 
5012
5043
  function MapPolylineWrapper(_a) {
@@ -5047,12 +5078,12 @@
5047
5078
  log: function () {
5048
5079
  }
5049
5080
  };
5050
- /**
5051
- * Mint Map 컴포넌트
5052
- *
5053
- * @param {MapControlWrapperProps} MapControlWrapperProps
5054
- *
5055
- * @returns {JSX.Element} JSX
5081
+ /**
5082
+ * Mint Map 컴포넌트
5083
+ *
5084
+ * @param {MapControlWrapperProps} MapControlWrapperProps
5085
+ *
5086
+ * @returns {JSX.Element} JSX
5056
5087
  */
5057
5088
 
5058
5089
  function MapCanvasWrapper(_a) {
@@ -5161,7 +5192,7 @@
5161
5192
  var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
5162
5193
 
5163
5194
  if (pos && !pos.offset) {
5164
- pos.offset = positionToOffset(pos);
5195
+ pos.offset = controller.positionToOffset(pos);
5165
5196
  }
5166
5197
 
5167
5198
  if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
@@ -5240,7 +5271,7 @@
5240
5271
 
5241
5272
  map.addListener('mousemove', function (e) {
5242
5273
  var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
5243
- var clickedOffset = positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
5274
+ var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
5244
5275
 
5245
5276
  var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
5246
5277
 
@@ -5254,7 +5285,7 @@
5254
5285
 
5255
5286
  map.addListener('click', function (e) {
5256
5287
  var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
5257
- var clickedOffset = positionToOffset(clickPosition);
5288
+ var clickedOffset = controller.positionToOffset(clickPosition);
5258
5289
  processMouseEvent(clickedOffset, 'onClick');
5259
5290
  });
5260
5291
  }
@@ -5325,7 +5356,7 @@
5325
5356
  if (item.visible === undefined || item.visible) {
5326
5357
  var pos = item.position; //위치 변환
5327
5358
 
5328
- pos.offset = positionToOffset(pos);
5359
+ pos.offset = controller.positionToOffset(pos);
5329
5360
 
5330
5361
  if (item.anchor) {
5331
5362
  pos.offset.x += item.anchor.x;
@@ -5354,22 +5385,6 @@
5354
5385
  }, []); //render!!!
5355
5386
 
5356
5387
  renderMain();
5357
-
5358
- var positionToOffset = React.useCallback(function (position) {
5359
- var div = controller.mapDivElement;
5360
- var w = div === null || div === void 0 ? void 0 : div.offsetWidth;
5361
- var h = div === null || div === void 0 ? void 0 : div.offsetHeight;
5362
- var bounds = controller.getCurrBounds();
5363
- var maxLng = bounds.ne.lng;
5364
- var minLng = bounds.sw.lng;
5365
- var lng = Math.abs(maxLng - minLng);
5366
- var x = w * (position.lng - minLng) / lng;
5367
- var maxLat = bounds.ne.lat;
5368
- var minLat = bounds.sw.lat;
5369
- var lat = Math.abs(maxLat - minLat);
5370
- var y = h * (maxLat - position.lat) / lat;
5371
- return new Offset(x, y);
5372
- }, []);
5373
5388
  return React__default["default"].createElement("div", {
5374
5389
  ref: containerRef,
5375
5390
  style: {
@@ -5387,12 +5402,12 @@
5387
5402
  }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
5388
5403
  }
5389
5404
 
5390
- /**
5391
- * Mint Map 컴포넌트
5392
- *
5393
- * @param {MapControlWrapperProps} MapControlWrapperProps
5394
- *
5395
- * @returns {JSX.Element} JSX
5405
+ /**
5406
+ * Mint Map 컴포넌트
5407
+ *
5408
+ * @param {MapControlWrapperProps} MapControlWrapperProps
5409
+ *
5410
+ * @returns {JSX.Element} JSX
5396
5411
  */
5397
5412
 
5398
5413
  function MapCanvasMarkerWrapper(_props) {
package/package.json CHANGED
@@ -1,77 +1,77 @@
1
- {
2
- "name": "@mint-ui/map",
3
- "version": "0.5.4-beta",
4
- "main": "./dist/index.js",
5
- "module": "./dist/index.es.js",
6
- "browser": "./dist/index.umd.js",
7
- "types": "./dist/index.d.ts",
8
- "repository": "https://github.com/dev-rsquare/mint-ui-map",
9
- "author": "RSQUARE",
10
- "keywords": ["react", "react map", "map", "google", "naver", "kakao", "library", "typescript", "canvas", "marker"],
11
- "license": "MIT",
12
- "private": false,
13
- "devDependencies": {
14
- "@babel/core": "^7.18.2",
15
- "@rollup/plugin-babel": "^5.3.1",
16
- "@rollup/plugin-commonjs": "^22.0.0",
17
- "@rollup/plugin-node-resolve": "^13.3.0",
18
- "@rollup/plugin-typescript": "^8.3.2",
19
- "@storybook/addon-actions": "^6.5.7",
20
- "@storybook/addon-essentials": "^6.5.7",
21
- "@storybook/addon-interactions": "^6.5.7",
22
- "@storybook/addon-links": "^6.5.7",
23
- "@storybook/builder-webpack5": "^6.5.7",
24
- "@storybook/manager-webpack5": "^6.5.7",
25
- "@storybook/preset-scss": "^1.0.3",
26
- "@storybook/react": "^6.5.7",
27
- "@storybook/testing-library": "^0.0.11",
28
- "@types/classnames": "^2.3.1",
29
- "@types/react": "^18.0.12",
30
- "@types/react-dom": "^18.0.9",
31
- "@types/uuid": "^9.0.0",
32
- "@typescript-eslint/eslint-plugin": "^5.27.0",
33
- "@typescript-eslint/parser": "^5.27.0",
34
- "babel-loader": "^8.2.5",
35
- "babel-plugin-react-icons": "^0.1.1",
36
- "css-loader": "^6.7.1",
37
- "eslint": "^8.17.0",
38
- "eslint-config-airbnb": "^19.0.4",
39
- "eslint-config-prettier": "^8.5.0",
40
- "eslint-plugin-import": "^2.26.0",
41
- "eslint-plugin-jsx-a11y": "^6.5.1",
42
- "eslint-plugin-prettier": "^4.0.0",
43
- "eslint-plugin-react": "^7.30.0",
44
- "eslint-plugin-react-hooks": "^4.5.0",
45
- "eslint-plugin-sort-keys-fix": "^1.1.2",
46
- "eslint-plugin-storybook": "^0.5.12",
47
- "postcss": "^8.4.14",
48
- "react": "^18.1.0",
49
- "react-dom": "^18.1.0",
50
- "rollup": "^2.75.5",
51
- "rollup-plugin-peer-deps-external": "^2.2.4",
52
- "rollup-plugin-postcss": "^4.0.2",
53
- "sass": "^1.52.2",
54
- "sass-loader": "^13.0.0",
55
- "shx": "^0.3.4",
56
- "style-loader": "^3.3.1",
57
- "typescript": "^4.7.3"
58
- },
59
- "dependencies": {
60
- "@types/google.maps": "^3.50.5",
61
- "@types/navermaps": "^3.6.1",
62
- "@types/kakaomaps": "1.1.2",
63
- "@mint-ui/tools":"1.0.3",
64
- "axios": "^1.2.0",
65
- "classnames": "^2.3.1",
66
- "style-inject": "^0.3.0",
67
- "uuid": "^9.0.0",
68
- "xml-js": "^1.6.11"
69
- },
70
- "scripts": {
71
- "storybook": "start-storybook -p 3000",
72
- "build-storybook": "build-storybook",
73
- "prebuild": "shx rm -rf ./dist",
74
- "build": "rollup -c",
75
- "postbuild": "shx rm -rf ./dist/dist"
76
- }
77
- }
1
+ {
2
+ "name": "@mint-ui/map",
3
+ "version": "0.5.6-beta",
4
+ "main": "./dist/index.js",
5
+ "module": "./dist/index.es.js",
6
+ "browser": "./dist/index.umd.js",
7
+ "types": "./dist/index.d.ts",
8
+ "repository": "https://github.com/dev-rsquare/mint-ui-map",
9
+ "author": "RSQUARE",
10
+ "keywords": ["react", "react map", "map", "google", "naver", "kakao", "library", "typescript", "canvas", "marker"],
11
+ "license": "MIT",
12
+ "private": false,
13
+ "devDependencies": {
14
+ "@babel/core": "^7.18.2",
15
+ "@rollup/plugin-babel": "^5.3.1",
16
+ "@rollup/plugin-commonjs": "^22.0.0",
17
+ "@rollup/plugin-node-resolve": "^13.3.0",
18
+ "@rollup/plugin-typescript": "^8.3.2",
19
+ "@storybook/addon-actions": "^6.5.7",
20
+ "@storybook/addon-essentials": "^6.5.7",
21
+ "@storybook/addon-interactions": "^6.5.7",
22
+ "@storybook/addon-links": "^6.5.7",
23
+ "@storybook/builder-webpack5": "^6.5.7",
24
+ "@storybook/manager-webpack5": "^6.5.7",
25
+ "@storybook/preset-scss": "^1.0.3",
26
+ "@storybook/react": "^6.5.7",
27
+ "@storybook/testing-library": "^0.0.11",
28
+ "@types/classnames": "^2.3.1",
29
+ "@types/react": "^18.0.12",
30
+ "@types/react-dom": "^18.0.9",
31
+ "@types/uuid": "^9.0.0",
32
+ "@typescript-eslint/eslint-plugin": "^5.27.0",
33
+ "@typescript-eslint/parser": "^5.27.0",
34
+ "babel-loader": "^8.2.5",
35
+ "babel-plugin-react-icons": "^0.1.1",
36
+ "css-loader": "^6.7.1",
37
+ "eslint": "^8.17.0",
38
+ "eslint-config-airbnb": "^19.0.4",
39
+ "eslint-config-prettier": "^8.5.0",
40
+ "eslint-plugin-import": "^2.26.0",
41
+ "eslint-plugin-jsx-a11y": "^6.5.1",
42
+ "eslint-plugin-prettier": "^4.0.0",
43
+ "eslint-plugin-react": "^7.30.0",
44
+ "eslint-plugin-react-hooks": "^4.5.0",
45
+ "eslint-plugin-sort-keys-fix": "^1.1.2",
46
+ "eslint-plugin-storybook": "^0.5.12",
47
+ "postcss": "^8.4.14",
48
+ "react": "^18.1.0",
49
+ "react-dom": "^18.1.0",
50
+ "rollup": "^2.75.5",
51
+ "rollup-plugin-peer-deps-external": "^2.2.4",
52
+ "rollup-plugin-postcss": "^4.0.2",
53
+ "sass": "^1.52.2",
54
+ "sass-loader": "^13.0.0",
55
+ "shx": "^0.3.4",
56
+ "style-loader": "^3.3.1",
57
+ "typescript": "^4.7.3"
58
+ },
59
+ "dependencies": {
60
+ "@types/google.maps": "^3.50.5",
61
+ "@types/navermaps": "^3.6.1",
62
+ "@types/kakaomaps": "1.1.2",
63
+ "@mint-ui/tools":"1.0.3",
64
+ "axios": "^1.2.0",
65
+ "classnames": "^2.3.1",
66
+ "style-inject": "^0.3.0",
67
+ "uuid": "^9.0.0",
68
+ "xml-js": "^1.6.11"
69
+ },
70
+ "scripts": {
71
+ "storybook": "start-storybook -p 3000",
72
+ "build-storybook": "build-storybook",
73
+ "prebuild": "shx rm -rf ./dist",
74
+ "build": "rollup -c",
75
+ "postbuild": "shx rm -rf ./dist/dist"
76
+ }
77
+ }