@antv/l7-component 2.9.37 → 2.10.0

package/lib/control/baseControl/popperControl.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PopperControl = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _popper = require("../../utils/popper");
+
+var _buttonControl = _interopRequireDefault(require("./buttonControl"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var PopperPlacementMap = {
+  topleft: 'right-start',
+  topcenter: 'bottom',
+  topright: 'left-start',
+  bottomleft: 'right-end',
+  bottomcenter: 'top',
+  bottomright: 'left-end',
+  lefttop: 'bottom-start',
+  leftcenter: 'right',
+  leftbottom: 'top-start',
+  righttop: 'bottom-end',
+  rightcenter: 'left',
+  rightbottom: 'top-end'
+};
+
+var PopperControl = /*#__PURE__*/function (_ButtonControl) {
+  (0, _inherits2.default)(PopperControl, _ButtonControl);
+
+  var _super = _createSuper(PopperControl);
+
+  function PopperControl() {
+    (0, _classCallCheck2.default)(this, PopperControl);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(PopperControl, [{
+    key: "getPopper",
+    value:
+    /**
+     * 气泡实例
+     * @protected
+     */
+    function getPopper() {
+      return this.popper;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      this.popper.hide();
+      (0, _get2.default)((0, _getPrototypeOf2.default)(PopperControl.prototype), "hide", this).call(this);
+    }
+    /**
+     * 获取默认配置
+     * @param option
+     */
+
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      var _option$position;
+
+      var defaultOption = (0, _get2.default)((0, _getPrototypeOf2.default)(PopperControl.prototype), "getDefault", this).call(this, option);
+      var position = (_option$position = option === null || option === void 0 ? void 0 : option.position) !== null && _option$position !== void 0 ? _option$position : defaultOption.position;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(PopperControl.prototype), "getDefault", this).call(this, option)), {}, {
+        popperPlacement: PopperPlacementMap[position],
+        popperTrigger: 'click'
+      });
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var button = (0, _get2.default)((0, _getPrototypeOf2.default)(PopperControl.prototype), "onAdd", this).call(this);
+      this.initPopper();
+      return button;
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.popper.destroy();
+    }
+  }, {
+    key: "initPopper",
+    value: function initPopper() {
+      var _this = this;
+
+      var _this$controlOption = this.controlOption,
+          popperClassName = _this$controlOption.popperClassName,
+          popperPlacement = _this$controlOption.popperPlacement,
+          popperTrigger = _this$controlOption.popperTrigger;
+      var popperContainer = this.mapsService.getMapContainer();
+      this.popper = new _popper.Popper(this.button, {
+        className: popperClassName,
+        placement: popperPlacement,
+        trigger: popperTrigger,
+        container: popperContainer,
+        unique: true
+      });
+      this.popper.on('show', function () {
+        _this.emit('popperShow', _this);
+      }).on('hide', function () {
+        _this.emit('popperHide', _this);
+      });
+      return this.popper;
+    }
+  }, {
+    key: "setOptions",
+    value: function setOptions(option) {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(PopperControl.prototype), "setOptions", this).call(this, option);
+
+      if (this.checkUpdateOption(option, ['popperPlacement', 'popperTrigger', 'popperClassName'])) {
+        var content = this.popper.getContent();
+        this.popper.destroy();
+        this.initPopper();
+        this.popper.setContent(content);
+      }
+    }
+  }]);
+  return PopperControl;
+}(_buttonControl.default);
+
+exports.default = exports.PopperControl = PopperControl;

package/lib/control/baseControl/selectControl.js

@@ -0,0 +1,253 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SelectControl = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _l7Utils = require("@antv/l7-utils");
+
+var _popperControl = require("./popperControl");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var SelectControlConstant;
+
+(function (SelectControlConstant) {
+  SelectControlConstant["ActiveOptionClassName"] = "l7-select-control-item-active";
+  SelectControlConstant["OptionValueAttrKey"] = "data-option-value";
+  SelectControlConstant["OptionIndexAttrKey"] = "data-option-index";
+})(SelectControlConstant || (SelectControlConstant = {}));
+
+var SelectControl = /*#__PURE__*/function (_PopperControl) {
+  (0, _inherits2.default)(SelectControl, _PopperControl);
+
+  var _super = _createSuper(SelectControl);
+
+  function SelectControl() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SelectControl);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectValue", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createNormalOption", function (option) {
+      var isSelect = _this.selectValue.includes(option.value);
+
+      var optionDOM = _l7Utils.DOM.create('div', "l7-select-control-item ".concat(isSelect ? SelectControlConstant.ActiveOptionClassName : ''));
+
+      if (_this.getIsMultiple()) {
+        optionDOM.appendChild(_this.createCheckbox(isSelect));
+      }
+
+      if (option.icon) {
+        optionDOM.appendChild(option.icon);
+      }
+
+      var textDOM = _l7Utils.DOM.create('span');
+
+      textDOM.innerText = option.text;
+      optionDOM.appendChild(textDOM);
+      return optionDOM;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemClick", function (item) {
+      if (_this.getIsMultiple()) {
+        var targetIndex = _this.selectValue.findIndex(function (value) {
+          return value === item.value;
+        });
+
+        if (targetIndex > -1) {
+          _this.selectValue.splice(targetIndex, 1);
+        } else {
+          _this.selectValue = [].concat((0, _toConsumableArray2.default)(_this.selectValue), [item.value]);
+        }
+      } else {
+        _this.selectValue = [item.value];
+      }
+
+      _this.setSelectValue(_this.selectValue);
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(SelectControl, [{
+    key: "setOptions",
+    value: function setOptions(option) {
+      (0, _get2.default)((0, _getPrototypeOf2.default)(SelectControl.prototype), "setOptions", this).call(this, option);
+      var options = option.options;
+
+      if (options) {
+        this.popper.setContent(this.getPopperContent(options));
+      }
+    }
+  }, {
+    key: "onAdd",
+    value: function onAdd() {
+      var button = (0, _get2.default)((0, _getPrototypeOf2.default)(SelectControl.prototype), "onAdd", this).call(this);
+      var defaultValue = this.controlOption.defaultValue;
+
+      if (defaultValue) {
+        this.selectValue = this.transSelectValue(defaultValue);
+      }
+
+      this.popper.setContent(this.getPopperContent(this.controlOption.options));
+      return button;
+    }
+  }, {
+    key: "getSelectValue",
+    value: function getSelectValue() {
+      return this.getIsMultiple() ? this.selectValue : this.selectValue[0];
+    }
+  }, {
+    key: "setSelectValue",
+    value: function setSelectValue(value) {
+      var _this2 = this;
+
+      var emitEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var finalValue = this.transSelectValue(value);
+      this.optionDOMList.forEach(function (optionDOM) {
+        var optionValue = optionDOM.getAttribute(SelectControlConstant.OptionValueAttrKey);
+        var checkboxDOM = _this2.getIsMultiple() ? optionDOM.querySelector('input[type=checkbox]') : undefined;
+
+        if (finalValue.includes(optionValue)) {
+          _l7Utils.DOM.addClass(optionDOM, SelectControlConstant.ActiveOptionClassName);
+
+          if (checkboxDOM) {
+            // @ts-ignore
+            _l7Utils.DOM.setChecked(checkboxDOM, true);
+          }
+        } else {
+          _l7Utils.DOM.removeClass(optionDOM, SelectControlConstant.ActiveOptionClassName);
+
+          if (checkboxDOM) {
+            // @ts-ignore
+            _l7Utils.DOM.setChecked(checkboxDOM, false);
+          }
+        }
+      });
+      this.selectValue = finalValue;
+
+      if (emitEvent) {
+        this.emit('selectChange', this.getIsMultiple() ? finalValue : finalValue[0]);
+      }
+    }
+    /**
+     * 是否为多选
+     * @protected
+     */
+
+  }, {
+    key: "getIsMultiple",
+    value: function getIsMultiple() {
+      return false;
+    }
+  }, {
+    key: "getPopperContent",
+    value: function getPopperContent(options) {
+      var _this3 = this;
+
+      var isImageOptions = this.isImageOptions();
+
+      var content = _l7Utils.DOM.create('div', isImageOptions ? 'l7-select-control--image' : 'l7-select-control--normal');
+
+      if (this.getIsMultiple()) {
+        _l7Utils.DOM.addClass(content, 'l7-select-control--multiple');
+      }
+
+      var optionsDOMList = options.map(function (option, optionIndex) {
+        var optionDOM = isImageOptions ? // @ts-ignore
+        _this3.createImageOption(option) : _this3.createNormalOption(option);
+        optionDOM.setAttribute(SelectControlConstant.OptionValueAttrKey, option.value);
+        optionDOM.setAttribute(SelectControlConstant.OptionIndexAttrKey, window.String(optionIndex));
+        optionDOM.addEventListener('click', _this3.onItemClick.bind(_this3, option));
+        return optionDOM;
+      });
+      content.append.apply(content, (0, _toConsumableArray2.default)(optionsDOMList));
+      this.optionDOMList = optionsDOMList;
+      return content;
+    }
+  }, {
+    key: "createImageOption",
+    value: function createImageOption(option) {
+      var isSelect = this.selectValue.includes(option.value);
+
+      var optionDOM = _l7Utils.DOM.create('div', "l7-select-control-item ".concat(isSelect ? SelectControlConstant.ActiveOptionClassName : ''));
+
+      var imgDOM = _l7Utils.DOM.create('img');
+
+      imgDOM.setAttribute('src', option.img);
+
+      _l7Utils.DOM.setUnDraggable(imgDOM);
+
+      optionDOM.appendChild(imgDOM);
+
+      var rowDOM = _l7Utils.DOM.create('div', 'l7-select-control-item-row');
+
+      if (this.getIsMultiple()) {
+        optionDOM.appendChild(this.createCheckbox(isSelect));
+      }
+
+      var textDOM = _l7Utils.DOM.create('span');
+
+      textDOM.innerText = option.text;
+      rowDOM.appendChild(textDOM);
+      optionDOM.appendChild(rowDOM);
+      return optionDOM;
+    }
+  }, {
+    key: "createCheckbox",
+    value: function createCheckbox(isSelect) {
+      var checkboxDOM = _l7Utils.DOM.create('input');
+
+      checkboxDOM.setAttribute('type', 'checkbox');
+
+      if (isSelect) {
+        _l7Utils.DOM.setChecked(checkboxDOM, true);
+      }
+
+      return checkboxDOM;
+    }
+  }, {
+    key: "isImageOptions",
+    value: function isImageOptions() {
+      // @ts-ignore
+      return !!this.controlOption.options.find(function (item) {
+        return item.img;
+      });
+    }
+  }, {
+    key: "transSelectValue",
+    value: function transSelectValue(value) {
+      return Array.isArray(value) ? value : [value];
+    }
+  }]);
+  return SelectControl;
+}(_popperControl.PopperControl);
+
+exports.default = exports.SelectControl = SelectControl;

package/lib/control/exportImage.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExportImage = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _icon = require("../utils/icon");
+
+var _buttonControl = _interopRequireDefault(require("./baseControl/buttonControl"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var ExportImage = /*#__PURE__*/function (_ButtonControl) {
+  (0, _inherits2.default)(ExportImage, _ButtonControl);
+
+  var _super = _createSuper(ExportImage);
+
+  function ExportImage() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ExportImage);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var onExport;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              onExport = _this.controlOption.onExport;
+
+              if (!(onExport === null || onExport === void 0)) {
+                _context.next = 5;
+                break;
+              }
+
+              void 0;
+              _context.next = 10;
+              break;
+
+            case 5:
+              _context.t0 = onExport;
+              _context.next = 8;
+              return _this.getImage();
+
+            case 8:
+              _context.t1 = _context.sent;
+              (0, _context.t0)(_context.t1);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mergeImage", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _this$mapsService$get, _this$mapsService$get2;
+
+      var imageType,
+          _ref3,
+          _ref3$width,
+          width,
+          _ref3$height,
+          height,
+          canvas,
+          context,
+          _len2,
+          base64List,
+          _key2,
+          imgList,
+          _args2 = arguments;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              imageType = _this.controlOption.imageType;
+              _ref3 = (_this$mapsService$get = (_this$mapsService$get2 = _this.mapsService.getContainer()) === null || _this$mapsService$get2 === void 0 ? void 0 : _this$mapsService$get2.getBoundingClientRect()) !== null && _this$mapsService$get !== void 0 ? _this$mapsService$get : {}, _ref3$width = _ref3.width, width = _ref3$width === void 0 ? 0 : _ref3$width, _ref3$height = _ref3.height, height = _ref3$height === void 0 ? 0 : _ref3$height;
+              canvas = document.createElement('canvas');
+              canvas.width = width;
+              canvas.height = height;
+              context = canvas.getContext('2d');
+
+              for (_len2 = _args2.length, base64List = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                base64List[_key2] = _args2[_key2];
+              }
+
+              _context2.next = 9;
+              return Promise.all(base64List.map(function (base64) {
+                return new Promise(function (resolve) {
+                  var img = new Image();
+
+                  img.onload = function () {
+                    resolve(img);
+                  };
+
+                  img.src = base64;
+                });
+              }));
+
+            case 9:
+              imgList = _context2.sent;
+              imgList.forEach(function (img) {
+                context === null || context === void 0 ? void 0 : context.drawImage(img, 0, 0, width, height);
+              });
+              return _context2.abrupt("return", canvas.toDataURL("image/".concat(imageType)));
+
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    return _this;
+  }
+
+  (0, _createClass2.default)(ExportImage, [{
+    key: "onAdd",
+    value: function onAdd() {
+      var button = (0, _get2.default)((0, _getPrototypeOf2.default)(ExportImage.prototype), "onAdd", this).call(this);
+      button.addEventListener('click', this.onClick);
+      return button;
+    }
+  }, {
+    key: "getDefault",
+    value: function getDefault(option) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(ExportImage.prototype), "getDefault", this).call(this, option)), {}, {
+        title: '导出图片',
+        btnIcon: (0, _icon.createL7Icon)('l7-icon-export-picture'),
+        imageType: 'png'
+      });
+    }
+  }, {
+    key: "getImage",
+    value: function getImage() {
+      var mapImage = this.mapsService.exportMap('png');
+      var layerImage = this.scene.exportPng('png');
+      return this.mergeImage(mapImage, layerImage);
+    }
+  }]);
+  return ExportImage;
+}(_buttonControl.default);
+
+exports.default = exports.ExportImage = ExportImage;