@antv/f6-plugin/lib/zoom-slider/index.js

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _tslib = require("tslib");

var _base = _interopRequireDefault(require("../base"));

var _f6Ui = require("@antv/f6-ui");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * 滑块缩放工具
 */
var ZoomSlider =
/** @class */
function (_super) {
  (0, _tslib.__extends)(ZoomSlider, _super);

  function ZoomSlider(props) {
    return _super.call(this, props) || this;
  }

  ZoomSlider.prototype.getDefaultCfgs = function () {
    var _this = this;

    return {
      minZoom: 0.5,
      maxZoom: 3,
      sliderWidthPercent: 0.3,
      dragTimestamp: +new Date(),
      sliderPosition: 'bottom',
      customizedStyle: '',
      getContent: function getContent() {
        return "\n          <root class=\"f6-zoom-slider\">\n            <div class=\"rail\"></div>\n            <div class=\"track\"></div>\n            <div class=\"handle\">\n              <div class=\"text\">1 times</div>\n              <div class=\"circle\"></div>\n            </div>\n          </root>\n        ";
      },
      getCss: function getCss() {
        var graph = _this.get('graph');

        var graphWidth = graph.get('width');
        var graphHeight = graph.get('height');

        var minZoom = _this.get('minZoom');

        var maxZoom = _this.get('maxZoom');

        var sliderWidthPercent = _this.get('sliderWidthPercent');

        var containerWidth = Math.floor(graphWidth * sliderWidthPercent);
        var resultX = containerWidth * ((1 - minZoom) / (maxZoom - minZoom));

        var sliderPosition = _this.get('sliderPosition');

        var sliderToTop = sliderPosition === 'top' ? 30 : graphHeight - 60;

        var customizedStyle = _this.get('customizedStyle');

        return "\n          .f6-zoom-slider {\n            width: " + containerWidth + ";\n            height: 30;\n            margin-left: " + Math.floor(graphWidth * (1 - sliderWidthPercent) / 2) + ";\n            padding: 13 0;\n            top: " + sliderToTop + ";\n            position: relative;\n            opacity: 0;\n          }\n\n          .rail {\n            width: " + containerWidth + ";\n            height: 4;\n            background-color: #bcbcbc;\n            border-radius: 2;\n            opacity: 1;\n          }\n\n          .track {\n            width: " + (resultX + 2) + ";\n            height: 4;\n            background-color: #91d5ff;\n            position: absolute;\n            top: 13;\n            border-radius: 2;\n            opacity: 1;\n          }\n\n          .handle {\n            height: 30;\n            width: 40;\n            position: absolute;\n            top: 0;\n            left: " + (resultX - 9) + ";\n            padding: 9;\n            opacity: 0;\n          }\n\n          .circle {\n            height: 13;\n            width: 13;\n            border-radius: 6.5;\n            border: 2px solid #1890ff;\n            background-color: #fff;\n            opacity: 1;\n          }\n\n          .text  {\n            position: absolute;\n            top: -9;\n            margin-left: -12;\n            color: #666;\n            width: 45;\n          }\n        " + customizedStyle;
      }
    };
  };

  ZoomSlider.prototype.getEvents = function () {
    return {
      dragstart: 'onDragStart',
      dragend: 'onDragEnd',
      pinchmove: 'onDragStart',
      pinchend: 'onDragEnd'
    };
  };

  ZoomSlider.prototype.init = function () {
    var _this = this;

    setTimeout(function () {
      _this.initSlider();
    });
  };
  /**
   * 初始化滑块视图
   */


  ZoomSlider.prototype.initSlider = function () {
    var _this = this;

    console.log('initSlider', this);
    var graph = this.get('graph');
    var uiGroup = graph.get('uiGroup');
    var html = this.get('getContent')();
    var css = this.get('getCss')();
    var zoomSliderUI = (0, _f6Ui.createUI)(html, css, uiGroup);
    var handleUI = zoomSliderUI.query('.handle');
    var startX = 0;
    handleUI.on('panstart', function (e) {
      startX = e.clientX;
    });
    handleUI.on('panmove', function (e) {
      var distance = e.clientX - startX;
      startX = e.clientX;

      _this.set('dragTimestamp', +new Date());

      _this.updateHandlePosition(distance);
    });
    zoomSliderUI.setStyle('display', 'none');
    this.set('zoomSlider', zoomSliderUI);
  };
  /**
   * 开始拖动画布
   */


  ZoomSlider.prototype.onDragStart = function () {
    // 同步画布缩放比例到滑块工具
    var graph = this.get('graph');
    var scale = graph.getZoom();
    var graphWidth = graph.get('width');
    var zoomSliderUI = this.get('zoomSlider');
    var minZoom = this.get('minZoom');
    var maxZoom = this.get('maxZoom');
    var sliderWidthPercent = this.get('sliderWidthPercent');
    var trackUI = zoomSliderUI.query('.track');
    var containerWidth = Math.floor(graphWidth * sliderWidthPercent);
    var distance = containerWidth * ((scale - minZoom) / (maxZoom - minZoom)) - trackUI.getStyle('width');
    this.updateHandlePosition(distance); // 显示滑块工具

    clearInterval(this.get('clearHandle'));
    zoomSliderUI.setStyle('display', 'block');
  };
  /**
   * 停止拖动画布
   */


  ZoomSlider.prototype.onDragEnd = function () {
    return (0, _tslib.__awaiter)(this, void 0, void 0, function () {
      var zoomSliderUI, clearHandle;

      var _this = this;

      return (0, _tslib.__generator)(this, function (_a) {
        zoomSliderUI = this.get('zoomSlider');
        clearInterval(this.get('clearHandle'));
        clearHandle = setInterval(function () {
          var dragBefore = +new Date() - _this.get('dragTimestamp');

          if (dragBefore > 3000) {
            clearInterval(_this.get('clearHandle'));
            zoomSliderUI.setStyle('display', 'none');
          }
        }, 3000);
        this.set('clearHandle', clearHandle);
        return [2
        /*return*/
        ];
      });
    });
  };
  /**
   * 更新滑块拖动的位置
   */


  ZoomSlider.prototype.updateHandlePosition = function (distance) {
    var graph = this.get('graph');
    var zoomSliderUI = this.get('zoomSlider');
    var sliderWidthPercent = this.get('sliderWidthPercent');
    var minZoom = this.get('minZoom');
    var maxZoom = this.get('maxZoom');
    var trackUI = zoomSliderUI.query('.track');
    var handleUI = zoomSliderUI.query('.handle');
    var clientX = trackUI.getStyle('width');
    var containerWidth = graph.get('width') * sliderWidthPercent;
    var resultX = clientX + distance;

    if (resultX < 0) {
      resultX = 0;
    }

    if (resultX > containerWidth) {
      resultX = containerWidth;
    }

    var scaleRatio = (maxZoom - minZoom) * (resultX / containerWidth) + minZoom;
    trackUI.setStyle('width', resultX);
    handleUI.setStyle('left', resultX - 9); // 9: handle 的 padding left

    handleUI.setText(Math.round(scaleRatio * 10) / 10 + " times");
    this.updateScale(scaleRatio);
  };
  /**
   * 更新画布缩放
   */


  ZoomSlider.prototype.updateScale = function (scaleRatio) {
    var graph = this.get('graph');
    graph.zoom(scaleRatio / graph.getZoom());
  };

  return ZoomSlider;
}(_base.default);

var _default = ZoomSlider;
exports.default = _default;