dtable-ui-component 6.0.2 → 6.0.4

package/lib/GeolocationEditor/map-editor/large-editor/index.js

@@ -0,0 +1,461 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactstrap = require("reactstrap");
+var _toaster = _interopRequireDefault(require("../../../toaster"));
+var _Loading = _interopRequireDefault(require("../../../Loading"));
+var _constants = require("../../../constants");
+var _cell = require("../../../utils/cell");
+var _mapEditorUtils = require("../../map-editor-utils");
+var _lang = require("../../../lang");
+require("./index.css");
+class LargeMapEditorDialog extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.loadMineMapCallBack = () => {
+      if (!this.timer) {
+        this.timer = setTimeout(() => {
+          const {
+            domainUrl,
+            dataDomainUrl,
+            serverDomainUrl,
+            spriteUrl,
+            serviceUrl
+          } = (0, _mapEditorUtils.getMineMapUrl)();
+          window.minemap.domainUrl = domainUrl;
+          window.minemap.dataDomainUrl = dataDomainUrl;
+          window.minemap.serverDomainUrl = serverDomainUrl;
+          window.minemap.spriteUrl = spriteUrl;
+          window.minemap.serviceUrl = serviceUrl;
+          window.minemap.key = this.mapKey;
+          window.minemap.solution = 11001;
+          this.renderMineMap();
+          clearTimeout(this.timer);
+          this.timer = null;
+        }, 1000);
+      }
+    };
+    this.renderMineMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        if (!window.minemap.key) return;
+        this.map = new window.minemap.Map({
+          container: 'geolocation-map-container-large',
+          style: 'https://service.minedata.cn/map/solu/style/11001',
+          pitch: 0,
+          maxZoom: 17,
+          minZoom: 3,
+          projection: 'MERCATOR'
+        });
+        let {
+          lng,
+          lat,
+          zoom
+        } = (0, _mapEditorUtils.getInitCenter)();
+        const {
+          value
+        } = this.state;
+        if ((0, _cell.isValidPosition)(value.lng, value.lat)) {
+          lng = value.lng;
+          lat = value.lat;
+          this.addMarkerByPosition(lng, lat);
+        }
+        this.map.setCenter([lng, lat]);
+        this.map.setZoom(zoom);
+        if (this.readOnly) return;
+        this.map.on('click', event => {
+          const point = event.lngLat;
+          this.setValue(point);
+          this.addMarkerByPosition(point.lng, point.lat);
+        });
+      });
+    };
+    this.renderBaiduMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        if (!window.BMap.Map) return;
+        this.map = new window.BMap.Map('geolocation-map-container-large');
+        let {
+          lng,
+          lat,
+          zoom
+        } = (0, _mapEditorUtils.getInitCenter)();
+        const {
+          value
+        } = this.state;
+        if ((0, _cell.isValidPosition)(value.lng, value.lat)) {
+          lng = value.lng;
+          lat = value.lat;
+          this.addMarkerByPosition(lng, lat);
+        }
+        let point = new window.BMap.Point(lng, lat);
+        this.map.centerAndZoom(point, zoom);
+        this.map.enableScrollWheelZoom(true);
+        if (this.readOnly) return;
+        this.map.addEventListener('click', event => {
+          const point = event.point;
+          this.setValue(point);
+          this.addMarkerByPosition(point.lng, point.lat);
+        });
+      });
+    };
+    this.renderGoogleMap = () => {
+      this.setState({
+        isLoading: false
+      }, () => {
+        let {
+          lng,
+          lat,
+          zoom
+        } = (0, _mapEditorUtils.getInitCenter)();
+        this.map = new window.google.maps.Map(this.ref, {
+          zoom,
+          center: {
+            lng,
+            lat
+          },
+          zoomControl: false,
+          mapTypeControl: false,
+          scaleControl: false,
+          streetViewControl: false,
+          rotateControl: false,
+          fullscreenControl: false
+        });
+        const {
+          value
+        } = this.state;
+        if (value.lng && value.lat) {
+          lng = value.lng;
+          lat = value.lat;
+          this.addMarkerByPosition(lng, lat);
+        }
+        this.map.setCenter({
+          lng,
+          lat
+        });
+        this.map.addListener('click', event => {
+          const lng = event.latLng.lng();
+          const lat = event.latLng.lat();
+          const point = {
+            lng,
+            lat
+          };
+          this.setValue(point);
+          this.addMarkerByPosition(lng, lat);
+        });
+      });
+    };
+    this.geolocationCallback = (error, point) => {
+      if (!error) {
+        this.setValue({
+          ...point
+        });
+        this.addMarkerByPosition(point.lng, point.lat);
+        if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
+          this.map.setCenter({
+            lng: point.lng,
+            lat: point.lat
+          });
+        }
+      } else {
+        _toaster.default.danger((0, _lang.getLocale)('Positioning_failed'));
+      }
+    };
+    this.setValue = point => {
+      const value = {
+        lng: point.lng,
+        lat: point.lat
+      };
+      this.setState({
+        value,
+        inputValue: _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? "".concat(point.lng, ", ").concat(point.lat) : "".concat(point.lat, ", ").concat(point.lng)
+      });
+    };
+    this.addMarkerByPosition = (lng, lat) => {
+      if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
+        let point = new window.BMap.Point(lng, lat);
+        const marker = new window.BMap.Marker(point, {
+          offset: new window.BMap.Size(-2, -5)
+        });
+        this.map && this.map.clearOverlays();
+        this.map && this.map.addOverlay(marker);
+      } else if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
+        if (!this.googleMarker) {
+          this.googleMarker = new window.google.maps.Marker({
+            position: {
+              lng,
+              lat
+            },
+            map: this.map
+          });
+          return;
+        }
+        this.googleMarker.setPosition({
+          lng,
+          lat
+        });
+      } else if (this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
+        if (!this.mineMapMarker) {
+          this.mineMapMarker = new window.minemap.Marker({
+            draggable: false,
+            anchor: 'top-left',
+            color: 'red',
+            rotation: 0,
+            pitchAlignment: 'map',
+            rotationAlignment: 'map',
+            scale: 0.8
+          }).setLngLat({
+            lng,
+            lat
+          }).addTo(this.map);
+        } else {
+          this.mineMapMarker.setLngLat({
+            lng,
+            lat
+          });
+        }
+      }
+    };
+    this.onChange = e => {
+      const inputValue = e.target.value;
+      this.setState({
+        inputValue
+      });
+      const enSplitCodeIndex = inputValue.indexOf(',');
+      const cnSplitCodeIndex = inputValue.indexOf('，');
+      if (enSplitCodeIndex > 0 || cnSplitCodeIndex > 0) {
+        let lng;
+        let lat;
+        const splitCodeIndex = enSplitCodeIndex > 0 ? enSplitCodeIndex : cnSplitCodeIndex;
+        if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
+          lat = parseFloat(inputValue.slice(0, splitCodeIndex).trim());
+          lng = parseFloat(inputValue.slice(splitCodeIndex + 1).trim());
+        } else {
+          lng = parseFloat(inputValue.slice(0, splitCodeIndex).trim());
+          lat = parseFloat(inputValue.slice(splitCodeIndex + 1).trim());
+        }
+        if (!Number.isNaN(lng) && !Number.isNaN(lat)) {
+          this.setState({
+            value: {
+              lng,
+              lat
+            }
+          }, () => {
+            this.props.setValue(this.state.value);
+          });
+          if (this.map) {
+            if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP || this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
+              this.map.setCenter({
+                lng,
+                lat
+              });
+            } else {
+              this.map.setCenter(new window.BMap.Point(lng, lat));
+            }
+          }
+          this.addMarkerByPosition(lng, lat);
+        }
+      }
+    };
+    this.onKeyDown = event => {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      if (event.keyCode === _constants.KeyCodes.Enter) {
+        this.onSubmit();
+      }
+    };
+    this.clearSearchNumerical = () => {
+      this.setState({
+        inputValue: '',
+        value: {}
+      });
+    };
+    this.onSubmit = () => {
+      const {
+        value
+      } = this.state;
+      this.props.setValue(value);
+      this.props.onSubmit();
+    };
+    this.onZoomIn = () => {
+      if (!this.map) return;
+      const currentZoom = this.map.getZoom();
+      this.map.setZoom(currentZoom + 1);
+    };
+    this.onZoomOut = () => {
+      if (!this.map) return;
+      const currentZoom = this.map.getZoom();
+      this.map.setZoom(currentZoom - 1);
+    };
+    this.onLocateCurrentPosition = () => {
+      (0, _mapEditorUtils.locateCurrentPosition)(this.map, this.mapType, this.geolocationCallback);
+    };
+    this.toggle = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      const {
+        value
+      } = this.state;
+      this.props.setValue(value);
+      this.props.toggleFullScreen(event);
+    };
+    // Because GeolocationItem component add a click event to document, so we need to stop propagation
+    this.handlerClick = e => {
+      e.nativeEvent.stopImmediatePropagation();
+      e.stopPropagation();
+    };
+    const {
+      readOnly,
+      config
+    } = props;
+    const _value = props.value || {};
+    this.readOnly = readOnly;
+    const {
+      mapType,
+      mapKey
+    } = (0, _mapEditorUtils.getMapInfo)(config);
+    this.mapType = mapType;
+    this.mapKey = mapKey;
+    const {
+      lng: _lng,
+      lat: _lat
+    } = _value;
+    const _inputValue = (0, _cell.isValidPosition)(_lng, _lat) ? _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? "".concat(_lng, ", ").concat(_lat) : "".concat(_lat, ", ").concat(_lng) : '';
+    this.map = null;
+    this.state = {
+      isLoading: true,
+      value: props.value,
+      inputValue: _inputValue
+    };
+  }
+  componentDidMount() {
+    if (this.mapType === _mapEditorUtils.MAP_TYPES.B_MAP) {
+      if (!window.BMap) {
+        window.renderBaiduMap = () => this.renderBaiduMap();
+        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey);
+      } else {
+        this.renderBaiduMap();
+      }
+      return;
+    } else if (this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
+      if (!window.google) {
+        window.renderGoogleMap = () => this.renderGoogleMap();
+        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey);
+      } else {
+        this.renderGoogleMap();
+      }
+      return;
+    } else if (this.mapType === _mapEditorUtils.MAP_TYPES.M_MAP) {
+      if (!window.minemap) {
+        (0, _mapEditorUtils.loadMapSource)(this.mapType, this.mapKey, this.loadMineMapCallBack);
+      } else {
+        this.renderMineMap();
+      }
+      return;
+    }
+  }
+  componentWillUnmount() {
+    let center = {};
+    if (this.map && _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType)) {
+      center.zoom = this.map.getZoom();
+      let coordinate = this.map.getCenter();
+      center.lng = coordinate.lng;
+      center.lat = coordinate.lat;
+      this.mineMapMarker = null;
+    } else if (this.map && this.mapType === _mapEditorUtils.MAP_TYPES.G_MAP) {
+      let zoom = this.map.getZoom();
+      let coordinate = this.map.getCenter();
+      center.zoom = zoom;
+      center.lat = coordinate.lat();
+      center.lng = coordinate.lng();
+      this.googleMarker = null;
+    }
+    localStorage.setItem('geolocation-map-center', JSON.stringify(center));
+    this.map = null;
+  }
+  render() {
+    const {
+      isLoading,
+      inputValue
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+      size: "lg",
+      isOpen: true,
+      toggle: this.toggle,
+      className: "dtable-ui-large-map-editor-dialog"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-map-editor-header",
+      onClick: this.handlerClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-map-editor-logo"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-font dtable-icon-location"
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "ml-2 dtable-ui-geolocation-map-editor-title"
+    }, (0, _lang.getLocale)('Address'))), /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-ui-geolocation-map-editor-screen dtable-font dtable-icon-full-screen",
+      onClick: this.toggle
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-map-editor-large",
+      onClick: this.handlerClick
+    }, !this.readOnly && /*#__PURE__*/_react.default.createElement("div", {
+      className: "map-editor-header"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-tables-container"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text",
+      value: inputValue,
+      onKeyDown: this.onKeyDown,
+      onChange: this.onChange,
+      className: "form-control search-tables-input",
+      placeholder: _mapEditorUtils.DOMESTIC_MAP_TYPE.includes(this.mapType) ? (0, _lang.getLocale)('Enter_longitude_and_latitude') : (0, _lang.getLocale)('Enter_latitude_and_longitude'),
+      autoFocus: true
+    }), inputValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "clear-search-numerical dtable-font dtable-icon-x-",
+      onClick: this.clearSearchNumerical
+    })), /*#__PURE__*/_react.default.createElement("span", {
+      className: "dtable-ui-geolocation-submit-map-editor",
+      onClick: this.onSubmit
+    }, (0, _lang.getLocale)('Submit'))), /*#__PURE__*/_react.default.createElement("div", {
+      className: this.readOnly ? 'geolocation-map-read-only-container' : 'geolocation-map-container-large'
+    }, this.mapType && isLoading && /*#__PURE__*/_react.default.createElement(_Loading.default, null), !this.mapType && /*#__PURE__*/_react.default.createElement("div", {
+      className: "error-message d-flex justify-content-center mt-9"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "alert-danger"
+    }, (0, _lang.getLocale)('The_map_plugin_is_not_properly_configured_contact_the_administrator'))), !isLoading && this.mapType && /*#__PURE__*/_react.default.createElement("div", {
+      className: "w-100 h-100",
+      ref: ref => this.ref = ref,
+      id: "geolocation-map-container-large"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "geolocation-map-controller"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-locate-control",
+      onClick: this.onLocateCurrentPosition
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "dtable-font dtable-icon-current-location"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-zoom-control"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-zoom-control-btn",
+      onClick: this.onZoomIn
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-enlarge"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "dtable-ui-geolocation-zoom-control-btn",
+      onClick: this.onZoomOut
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-narrow"
+    }))))));
+  }
+}
+var _default = exports.default = LargeMapEditorDialog;

package/lib/GeolocationEditor/map-editor-utils.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.locateCurrentPosition = exports.loadMapSource = exports.getMineMapUrl = exports.getMapInfo = exports.getInitCenter = exports.MAP_TYPES = exports.DOMESTIC_MAP_TYPE = void 0;
+const MAP_TYPES = exports.MAP_TYPES = {
+  B_MAP: 'b_map',
+  // baidu
+  G_MAP: 'g_map',
+  // google
+  M_MAP: 'm_map' // mineMap
+};
+
+// domestic map's format: [lng, lat], foreign map's format: [lat, lng]
+const DOMESTIC_MAP_TYPE = exports.DOMESTIC_MAP_TYPE = [MAP_TYPES.B_MAP, MAP_TYPES.M_MAP];
+const MINE_MAP_ONLINE_SERVICE = {
+  DOMAIN_URL: 'https://minemap.minedata.cn',
+  DATA_DOMAIN_URL: 'https://minemap.minedata.cn',
+  SERVER_DOMAIN_URL: 'https://sd-data.minedata.cn',
+  SPRITE_URL: 'https://minemap.minedata.cn/minemapapi/v2.1.1/sprite/sprite',
+  SERVICE_URL: 'https://service.minedata.cn/service'
+};
+const getMineMapUrl = function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    dtableMineMapCustomConfig = {}
+  } = {
+    ...window.dtable,
+    ...config
+  };
+  const {
+    domain_url = '',
+    data_domain_url = '',
+    server_domain_url = '',
+    sprite_url = '',
+    service_url = ''
+  } = dtableMineMapCustomConfig;
+  return {
+    domainUrl: domain_url || MINE_MAP_ONLINE_SERVICE.DOMAIN_URL,
+    dataDomainUrl: data_domain_url || MINE_MAP_ONLINE_SERVICE.DATA_DOMAIN_URL,
+    serverDomainUrl: server_domain_url || MINE_MAP_ONLINE_SERVICE.SERVER_DOMAIN_URL,
+    spriteUrl: sprite_url || MINE_MAP_ONLINE_SERVICE.SPRITE_URL,
+    serviceUrl: service_url || MINE_MAP_ONLINE_SERVICE.SERVICE_URL
+  };
+};
+exports.getMineMapUrl = getMineMapUrl;
+const getInitCenter = function () {
+  let isSelectionEditor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  // set beijing as default map center
+  let lng = 116.404;
+  let lat = 39.915;
+  let zoom = 5;
+  let center = isSelectionEditor ? localStorage.getItem('geolocation-map-selection-center') : localStorage.getItem('geolocation-map-center');
+  if (center) {
+    center = JSON.parse(center);
+    lng = center.lng || lng;
+    lat = center.lat || lat;
+    zoom = center.zoom || zoom;
+  }
+  return {
+    lng,
+    lat,
+    zoom
+  };
+};
+exports.getInitCenter = getInitCenter;
+const getMapInfo = function () {
+  let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    dtableBaiduMapKey: baiduMapKey,
+    dtableGoogleMapKey: googleMapKey,
+    dtableMineMapKey: mineMapKey
+  } = {
+    ...window.dtable,
+    ...config
+  };
+  let mapType;
+  let mapKey;
+  if (baiduMapKey) {
+    mapType = MAP_TYPES.B_MAP;
+    mapKey = baiduMapKey;
+  } else if (googleMapKey) {
+    mapType = MAP_TYPES.G_MAP;
+    mapKey = googleMapKey;
+  } else if (mineMapKey) {
+    mapType = MAP_TYPES.M_MAP;
+    mapKey = mineMapKey;
+  }
+  return {
+    mapType,
+    mapKey
+  };
+};
+exports.getMapInfo = getMapInfo;
+const loadMapSource = (mapType, mapKey, callback) => {
+  if (!mapType || !mapKey) return;
+  let scriptUrl = '';
+  let script = document.createElement('script');
+  script.type = 'text/javascript';
+  if (mapType === MAP_TYPES.B_MAP) {
+    scriptUrl = "https://api.map.baidu.com/api?v=3.0&ak=".concat(mapKey, "}&callback=renderBaiduMap");
+  } else if (mapType === MAP_TYPES.G_MAP) {
+    scriptUrl = "https://maps.googleapis.com/maps/api/js?key=".concat(mapKey, "&callback=renderGoogleMap&libraries=&v=weekly");
+  } else {
+    scriptUrl = 'https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.js';
+    let link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = 'https://minemap.minedata.cn/minemapapi/v2.1.1/minemap.css';
+    document.head.appendChild(link);
+  }
+  script.src = scriptUrl;
+  document.body.appendChild(script);
+  if (callback) callback();
+};
+exports.loadMapSource = loadMapSource;
+const locateCurrentPosition = (map, mapType, callback) => {
+  if (mapType === MAP_TYPES.B_MAP) {
+    const geolocation = new window.BMap.Geolocation();
+    geolocation.getCurrentPosition(result => {
+      if (result) {
+        const point = result.point;
+        map.setCenter(point);
+        callback(null, point);
+      } else {
+        // Positioning failed
+        callback(true);
+      }
+    });
+  } else {
+    if (window.navigator.geolocation) {
+      window.navigator.geolocation.getCurrentPosition(position => {
+        const lng = position.coords.longitude;
+        const lat = position.coords.latitude;
+        map.setCenter({
+          lng,
+          lat
+        });
+        callback(null, {
+          lng,
+          lat
+        });
+      }, e => {
+        // Positioning failed
+        callback(true);
+      }, {
+        timeout: 5000
+      });
+    }
+  }
+};
+exports.locateCurrentPosition = locateCurrentPosition;