@antv/f6-plugin
Version:
F6 plugin
198 lines (159 loc) • 7.05 kB
JavaScript
import { __awaiter, __extends, __generator } from "tslib";
import Base from '../base';
import { createUI } from '@antv/f6-ui';
/**
* 滑块缩放工具
*/
var ZoomSlider =
/** @class */
function (_super) {
__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 = 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 __awaiter(this, void 0, void 0, function () {
var zoomSliderUI, clearHandle;
var _this = this;
return __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);
export default ZoomSlider;