@mint-ui/map 0.1.1-beta → 0.1.2-beta

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -0,0 +1,431 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var MintMapController = require('../core/MintMapController.js');
+var waiting = require('../core/util/waiting.js');
+var MintMap = require('../MintMap.js');
+
+var GoogleMintMapController = function (_super) {
+  tslib.__extends(GoogleMintMapController, _super);
+
+  function GoogleMintMapController(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.type = 'google';
+    _this.map = null;
+    _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
+    _this.scriptModules = ['marker'];
+    _this.polylineEvents = ['mouseover', 'mouseout'];
+    _this.polygonEvents = ['mouseover', 'mouseout'];
+    _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+    _this.dragged = false;
+
+    _this.destroyMap = function () {
+      console.log("".concat(_this.type, " map destroy feature is not supported"));
+    };
+
+    console.log("".concat(_this.type, " controller loadded"));
+    return _this;
+  }
+
+  GoogleMintMapController.prototype.createPolyline = function (polyline) {
+    var _this = this;
+
+    var _a = polyline.options,
+        position = _a.position,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'blue' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.visible,
+        visible = _e === void 0 ? true : _e,
+        _f = _a.editable,
+        editable = _f === void 0 ? false : _f,
+        event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var path = position.map(function (elem) {
+        return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+      });
+      var pol_1 = new google.maps.Polyline({
+        map: this.map,
+        path: path,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        clickable: true,
+        visible: visible,
+        editable: editable
+      });
+      polyline.native = pol_1;
+      event && event.forEach(function (handler, key) {
+        if (_this.polylineEvents.includes(key)) {
+          pol_1.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updatePolyline = function (polyline, options) {
+    if (polyline && polyline.native && polyline.native instanceof google.maps.Polyline) {
+      var polylineOption = this.getValidOptions(options);
+
+      if (this.map && Array.isArray(options.position)) {
+        var path = options.position.map(function (elem) {
+          return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+        });
+        polylineOption.path = path;
+      }
+
+      polyline.native.setOptions(polylineOption);
+    }
+  };
+
+  GoogleMintMapController.prototype.createPolygon = function (polygon) {
+    var _this = this;
+
+    var _a = polygon.options,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'green' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.fillColor,
+        fillColor = _e === void 0 ? 'lightgreen' : _e,
+        _f = _a.fillOpacity,
+        fillOpacity = _f === void 0 ? 0.5 : _f,
+        _g = _a.visible,
+        visible = _g === void 0 ? true : _g,
+        _h = _a.editable,
+        editable = _h === void 0 ? false : _h,
+        event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var outLine = position.map(function (elem) {
+        return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+      });
+      var paths = innerPositions ? tslib.__spreadArray([outLine], innerPositions, true) : [outLine];
+      var pol_2 = new google.maps.Polygon({
+        map: this.map,
+        paths: paths,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+        clickable: true,
+        visible: visible,
+        editable: editable
+      });
+      polygon.native = pol_2;
+      event && event.forEach(function (handler, key) {
+        if (_this.polygonEvents.includes(key)) {
+          pol_2.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updatePolygon = function (polygon, options) {
+    if (polygon && polygon.native && polygon.native instanceof google.maps.Polygon) {
+      var polygonOption = this.getValidOptions(options);
+      polygon.native.setOptions(polygonOption);
+    }
+  };
+
+  GoogleMintMapController.prototype.getValidOptions = function (options) {
+    var target = {};
+
+    for (var _i = 0, _a = Object.getOwnPropertyNames(options); _i < _a.length; _i++) {
+      var name_1 = _a[_i];
+
+      if (options[name_1] !== undefined) {
+        target[name_1] = options[name_1];
+      }
+    }
+
+    return target;
+  };
+
+  GoogleMintMapController.prototype.createMarker = function (marker) {
+    var _this = this;
+
+    var _a;
+
+    if (this.map) {
+      var googleMarker_1;
+
+      if (marker.element) {
+        var options = {
+          map: this.map,
+          position: marker.options.position
+        };
+        options.content = marker.element;
+        googleMarker_1 = new google.maps.marker.AdvancedMarkerView(options);
+      } else {
+        var options = {
+          map: this.map,
+          position: marker.options.position,
+          visible: marker.options.visible === undefined || marker.options.visible,
+          anchorPoint: marker.options.anchor
+        };
+        googleMarker_1 = new google.maps.Marker(options);
+      }
+
+      marker.native = googleMarker_1;
+      ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
+        if (_this.markerEvents.includes(key)) {
+          googleMarker_1.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+    var _a, _b;
+
+    if (marker && marker.native) {
+      if (marker.native instanceof google.maps.Marker) {
+        var map = marker.native.getMap();
+
+        if (map) {
+          marker.native.setOptions({
+            map: map,
+            position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
+            visible: options.visible === undefined || options.visible
+          });
+        }
+      } else if (marker.native instanceof google.maps.marker.AdvancedMarkerView) {
+        if (options.visible !== undefined && marker.native.element) {
+          marker.native.element.style.visibility = options.visible ? 'visible' : 'hidden';
+        }
+
+        if (options.position instanceof MintMap.Position && (((_a = marker.native.position) === null || _a === void 0 ? void 0 : _a.lat) != options.position.lat || ((_b = marker.native.position) === null || _b === void 0 ? void 0 : _b.lng) != options.position.lng)) {
+          marker.native.position = options.position;
+        }
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.getMaxZIndex = function (increment, parent) {
+    if (increment === void 0) {
+      increment = 0;
+    }
+
+    if (this.map) {
+      var targetPane = parent;
+      var max = 0;
+
+      for (var i = 0; i < targetPane.childElementCount; i++) {
+        var elem = targetPane.children[i];
+
+        if (elem instanceof HTMLElement) {
+          var index = Number(elem.style.zIndex);
+
+          if (!isNaN(index) && index > max) {
+            max = index;
+          }
+        }
+      }
+
+      this.markerMaxZIndex = max + increment;
+      return this.markerMaxZIndex;
+    } else {
+      return this.markerMaxZIndex || 1;
+    }
+  };
+
+  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_1 = marker.element.parentElement;
+
+      if (parent_1) {
+        parent_1.style.zIndex = String(this.getMaxZIndex(1, parent_1));
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
+    if (drawable && drawable.native) {
+      if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
+        drawable.native.setMap(null);
+        return true;
+      } else if (drawable.native instanceof google.maps.marker.AdvancedMarkerView) {
+        drawable.native.map = null;
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  GoogleMintMapController.prototype.isMapDragged = function () {
+    return this.dragged;
+  };
+
+  GoogleMintMapController.prototype.setMapDragged = function (value) {
+    this.dragged = false;
+  };
+
+  GoogleMintMapController.prototype.loadMapApi = function () {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return tslib.__generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            var callbackName, loaded, params, ok;
+            return tslib.__generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  callbackName = "load".concat(new Date().getTime());
+                  loaded = false;
+
+                  window[callbackName] = function () {
+                    console.log('google api loaded');
+                    loaded = true;
+                    delete window[callbackName];
+                  };
+
+                  params = {
+                    key: this.mapProps.mapKey,
+                    libraries: this.scriptModules.join(','),
+                    v: 'beta',
+                    callback: callbackName
+                  };
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'googlescript')];
+
+                case 1:
+                  _a.sent();
+
+                  return [4, waiting.waiting(function () {
+                    return loaded;
+                  })];
+
+                case 2:
+                  ok = _a.sent();
+
+                  if (!ok) {
+                    throw new Error('google script api load failed!!');
+                  }
+
+                  this.mapApiLoaded = true;
+                  resolve(true);
+                  console.log("".concat(this.type, " map script api loaded"));
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  GoogleMintMapController.prototype.initializingMap = function (divElement) {
+    return tslib.__awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return tslib.__generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return tslib.__awaiter(_this, void 0, void 0, function () {
+            var map;
+
+            var _this = this;
+
+            var _a, _b;
+
+            return tslib.__generator(this, function (_c) {
+              switch (_c.label) {
+                case 0:
+                  if (this.mapInitialized && this.map) {
+                    if (this.map.getDiv() === divElement) {
+                      resolve(this.map);
+                      return [2];
+                    }
+                  }
+
+                  if (!!this.mapApiLoaded) return [3, 2];
+                  return [4, this.loadMapApi()];
+
+                case 1:
+                  _c.sent();
+
+                  _c.label = 2;
+
+                case 2:
+                  map = new google.maps.Map(divElement, {
+                    mapId: this.mapProps.mapId,
+                    center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
+                    maxZoom: 21,
+                    minZoom: 1,
+                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
+                  });
+                  map.addListener('dragend', function () {
+                    console.log('map dragend');
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('zoom_changed', function () {
+                    console.log('zoom_changed');
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('click', function (e) {
+                    console.log('map click', e);
+                    var pos = new MintMap.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MintMap.Offset(e.pixel.x, e.pixel.y);
+                    _this.mapProps.onClick && _this.mapProps.onClick(pos);
+                  });
+                  this.map = map;
+                  this.mapInitialized = true;
+                  console.log("".concat(this.type, " map script initialized"), divElement);
+                  resolve(map);
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  GoogleMintMapController.prototype.fromGoogleBounds = function (bounds) {
+    return new MintMap.Bounds(new MintMap.Position(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()), new MintMap.Position(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
+  };
+
+  GoogleMintMapController.prototype.getCurrBounds = function () {
+    if (!this.map) {
+      throw new Error('Map is not initialized!!');
+    }
+
+    var bounds = this.map.getBounds();
+
+    if (bounds) {
+      return this.fromGoogleBounds(bounds);
+    } else {
+      throw new Error('bounds is not found!!!');
+    }
+  };
+
+  GoogleMintMapController.prototype.panningTo = function (targetCenter) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.panTo(targetCenter);
+  };
+
+  GoogleMintMapController.prototype.getZoomLevel = function () {
+    var _a;
+
+    return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
+  };
+
+  return GoogleMintMapController;
+}(MintMapController.MintMapController);
+
+exports.GoogleMintMapController = GoogleMintMapController;

package/dist/components/mint-map/index.d.ts

@@ -1,2 +1,4 @@
-export { default as MintMap } from './MintMap';
+export * from './MintMap';
 export * from './core';
+export * from './naver/NaverMintMapController';
+export * from './google/GoogleMintMapController';

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="navermaps" />
-import MintMapController from "../core/MintMapController";
+import { MintMapController } from "../core/MintMapController";
 import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
-export default class NaverMintMapController extends MintMapController {
+export declare class NaverMintMapController extends MintMapController {
     type: MapType;
     map: naver.maps.Map | null;
     scriptUrl: string;