@antv/l7-component 2.25.7 → 2.25.10

package/lib/control/zoom.d.ts

@@ -0,0 +1,39 @@
+import { PositionType } from '@antv/l7-core';
+import { DOM } from '@antv/l7-utils';
+import type { IControlOption } from './baseControl';
+import { Control } from './baseControl';
+export interface IZoomControlOption extends IControlOption {
+    zoomInText: DOM.ELType | string;
+    zoomInTitle: string;
+    zoomOutText: DOM.ELType | string;
+    zoomOutTitle: string;
+    showZoom: boolean;
+}
+export { Zoom };
+export default class Zoom extends Control<IZoomControlOption> {
+    private disabled;
+    private zoomInButton;
+    private zoomOutButton;
+    private zoomNumDiv;
+    getDefault(option: Partial<IZoomControlOption>): {
+        position: PositionType;
+        name: string;
+        zoomInText: SVGSVGElement;
+        zoomInTitle: string;
+        zoomOutText: SVGSVGElement;
+        zoomOutTitle: string;
+        showZoom: boolean;
+        className?: string | undefined;
+        style?: string | undefined;
+    };
+    setOptions(newOptions: Partial<IZoomControlOption>): void;
+    onAdd(): HTMLElement;
+    onRemove(): void;
+    disable(): this;
+    enable(): this;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    private resetButtonGroup;
+    private createButton;
+    private updateDisabled;
+}

package/lib/control/zoom.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Zoom = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _l7Core = require("@antv/l7-core");
+var _l7Utils = require("@antv/l7-utils");
+var _icon = require("../utils/icon");
+var _baseControl = require("./baseControl");
+class Zoom extends _baseControl.Control {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "disabled", void 0);
+    (0, _defineProperty2.default)(this, "zoomInButton", void 0);
+    (0, _defineProperty2.default)(this, "zoomOutButton", void 0);
+    (0, _defineProperty2.default)(this, "zoomNumDiv", void 0);
+    (0, _defineProperty2.default)(this, "zoomIn", () => {
+      if (!this.disabled && this.mapsService.getZoom() < this.mapsService.getMaxZoom()) {
+        this.mapsService.zoomIn();
+      }
+    });
+    (0, _defineProperty2.default)(this, "zoomOut", () => {
+      if (!this.disabled && this.mapsService.getZoom() > this.mapsService.getMinZoom()) {
+        this.mapsService.zoomOut();
+      }
+    });
+    (0, _defineProperty2.default)(this, "updateDisabled", () => {
+      const mapsService = this.mapsService;
+      this.zoomInButton.removeAttribute('disabled');
+      this.zoomOutButton.removeAttribute('disabled');
+      if (this.disabled || mapsService.getZoom() <= mapsService.getMinZoom()) {
+        this.zoomOutButton.setAttribute('disabled', 'true');
+      }
+      if (this.controlOption.showZoom && this.zoomNumDiv) {
+        this.zoomNumDiv.innerText = String(Math.floor(mapsService.getZoom()));
+      }
+      if (this.disabled || mapsService.getZoom() >= mapsService.getMaxZoom()) {
+        this.zoomInButton.setAttribute('disabled', 'true');
+      }
+    });
+  }
+  getDefault(option) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, super.getDefault(option)), {}, {
+      position: _l7Core.PositionType.BOTTOMRIGHT,
+      name: 'zoom',
+      zoomInText: (0, _icon.createL7Icon)('l7-icon-enlarge'),
+      zoomInTitle: 'Zoom in',
+      zoomOutText: (0, _icon.createL7Icon)('l7-icon-narrow'),
+      zoomOutTitle: 'Zoom out',
+      showZoom: false
+    });
+  }
+  setOptions(newOptions) {
+    super.setOptions(newOptions);
+    if (this.checkUpdateOption(newOptions, ['zoomInText', 'zoomInTitle', 'zoomOutText', 'zoomOutTitle', 'showZoom'])) {
+      this.resetButtonGroup(this.container);
+    }
+  }
+  onAdd() {
+    const container = _l7Utils.DOM.create('div', 'l7-control-zoom');
+    this.resetButtonGroup(container);
+    this.mapsService.on('zoomend', this.updateDisabled);
+    this.mapsService.on('zoomchange', this.updateDisabled);
+    return container;
+  }
+  onRemove() {
+    this.mapsService.off('zoomend', this.updateDisabled);
+    this.mapsService.off('zoomchange', this.updateDisabled);
+  }
+  disable() {
+    this.disabled = true;
+    this.updateDisabled();
+    return this;
+  }
+  enable() {
+    this.disabled = false;
+    this.updateDisabled();
+    return this;
+  }
+  resetButtonGroup(container) {
+    _l7Utils.DOM.clearChildren(container);
+    this.zoomInButton = this.createButton(this.controlOption.zoomInText, this.controlOption.zoomInTitle, 'l7-button-control', container, this.zoomIn);
+    if (this.controlOption.showZoom) {
+      this.zoomNumDiv = this.createButton('0', '', 'l7-button-control l7-control-zoom__number', container);
+    }
+    this.zoomOutButton = this.createButton(this.controlOption.zoomOutText, this.controlOption.zoomOutTitle, 'l7-button-control', container, this.zoomOut);
+    this.updateDisabled();
+  }
+  createButton(html, tile, className, container, fn) {
+    const link = _l7Utils.DOM.create('button', className, container);
+    if (typeof html === 'string') {
+      link.innerHTML = html;
+    } else {
+      link.append(html);
+    }
+    link.title = tile;
+    if (fn) {
+      link.addEventListener('click', fn);
+    }
+    return link;
+  }
+}
+exports.default = exports.Zoom = Zoom;

package/lib/css/button.less

@@ -0,0 +1,77 @@
+@import url('variables.less');
+
+.l7-button-control {
+  min-width: @l7-btn-control-size;
+  height: @l7-btn-control-size;
+  background-color: @l7-control-bg-color;
+  border-width: 0;
+  border-radius: @l7-btn-control-border-radius;
+  outline: 0;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 ((@l7-btn-control-size - @l7-btn-icon-size) / 2);
+  box-shadow: @l7-control-shadow;
+  line-height: 16px;
+
+  .l7-iconfont {
+    fill: @l7-control-font-color;
+    color: @l7-control-font-color;
+    width: @l7-btn-icon-size;
+    height: @l7-btn-icon-size;
+  }
+
+  &.l7-button-control--row {
+    padding: 0 16px 0 13px;
+
+    * + .l7-button-control__text {
+      margin-left: 8px;
+    }
+  }
+
+  &.l7-button-control--column {
+    height: @l7-btn-column-height;
+    flex-direction: column;
+
+    .l7-iconfont {
+      margin-top: 3px;
+    }
+
+    .l7-button-control__text {
+      margin-top: 3px;
+      font-size: 10px;
+      transform: scale(0.83333);
+    }
+  }
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: @l7-btn-control-bg-hover-color;
+    }
+
+    &:active {
+      background-color: @l7-btn-control-bg-active-color;
+    }
+  }
+
+  &:disabled {
+    background-color: @l7-btn-control-disabled-bg-color;
+    color: @l7-btn-control-disabled-font-color;
+    cursor: not-allowed;
+
+    .l7-iconfont {
+      fill: @l7-btn-control-disabled-font-color;
+      color: @l7-btn-control-disabled-font-color;
+    }
+
+    &:hover {
+      background-color: @l7-btn-control-disabled-bg-color;
+    }
+
+    &:active {
+      background-color: @l7-btn-control-disabled-bg-color;
+    }
+  }
+}

package/lib/css/control.less

@@ -0,0 +1,82 @@
+@import url('variables.less');
+
+.l7-control-container {
+  font:
+    12px/1.5 'Helvetica Neue',
+    Arial,
+    Helvetica,
+    sans-serif;
+
+  .l7-control {
+    position: relative;
+    z-index: @l7-control-z-index;
+    float: left;
+    clear: both;
+    color: @l7-control-font-color;
+    font-size: @l7-control-font-size;
+    pointer-events: visiblepainted; /* IE 9-10 doesn't have auto */
+    pointer-events: auto;
+
+    &.l7-control--hide {
+      display: none;
+    }
+  }
+
+  each(@position-list,{
+    .l7-@{value} {
+        @{value}: 0;
+      display: flex;
+      position: absolute;
+      z-index: @l7-control-z-index;
+      pointer-events: none;
+      .l7-control:not(.l7-control--hide) {
+        margin-@{value}: @l7-control-space;
+      }
+    }
+  });
+
+  .l7-center {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+
+    &.l7-top,
+    &.l7-bottom {
+      width: 100%;
+    }
+
+    &.l7-left,
+    &.l7-right {
+      height: 100%;
+    }
+
+    .l7-control {
+      margin-right: @l7-control-space;
+      margin-bottom: @l7-control-space;
+    }
+  }
+
+  .l7-row {
+    flex-direction: row;
+
+    &.l7-top {
+      align-items: flex-start;
+    }
+
+    &.l7-bottom {
+      align-items: flex-end;
+    }
+  }
+
+  .l7-column {
+    flex-direction: column;
+
+    &.l7-left {
+      align-items: flex-start;
+    }
+
+    &.l7-right {
+      align-items: flex-end;
+    }
+  }
+}