<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>g2 slider</title>
<style>
::-webkit-scrollbar {
display: none;
}
html.body {
overflow: hidden;
height: 100%;
margin: 0;
}
.m-cf-slider-wrapper{display: inline-block; position: absolute;bottom: 10px;left: 390px;right: 360px;height: 56px; }.m-cf-slider {display: inline-block;width: 100%;height: 100%; }</style>
</head>
<body>
<div class="m-cf-slider-wrapper">
<div id="m-cf-slider" class="m-cf-slider"></div>
</div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.3.2/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.9.6/dist/data-set.min.js"></script>
<script src="js/g2-plugin-slider.js"></script>
<script>
$(function () {
let myAction = {}, slider, initStart, initEnd = ' ';
$.extend(myAction, {
formatDateTime: function(inputTime) {
var date = new Date(inputTime);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
return y + '/' + m + '/' + d + ' ' + h + ':' + minute + ':' + second + ':' + date.getMilliseconds();
},
randomFn: function () {
var num = Math.random() * 30 + 20;
num = parseInt(num, 10);
return num;
},
simulateData: function(division) {
var start = 1540858202123;
var end = 1540958202666;
var space = (end - start) / division;
var result = [];
var temp = {};
var startDate = myAction.formatDateTime(start);
temp.time = startDate;
temp.value = myAction.randomFn();
result.push(temp);
var tempTime = start + space;
while (tempTime < end) {
tempTime = tempTime + space;
var temp = {};
temp.time = myAction.formatDateTime(tempTime);
temp.value = myAction.randomFn();
result.push(temp);
}
var temp = {};
var endDate = myAction.formatDateTime(end);
temp.time = endDate;
temp.value = myAction.randomFn();
result.push(temp);
return result;
},
simulateSlider: function () {
var sliderData = myAction.simulateData(100); // Simulate traffic data based on log start and stop events
var startIndex = Math.round(sliderData.length * 0.6); // What percentage of the slider has been dragged by default
if (sliderData && sliderData[startIndex] && sliderData.length > 3) {
initStart = sliderData[startIndex].time;
}
myAction.initSlider(sliderData);
},
initSlider: function (data) {
if (slider) {
slider.destroy(); / / to empty the slider
}
Reference links: / / https://antv.alipay.com/zh-cn/g2/3.x/tutorial/how-to-use-slider.html
slider = new Slider({
container: 'm-cf-slider'.height: 56.padding: [0.0.0.0]./ / [0, 160, 0, 160]
data: data,
start: initStart,
end: initEnd,
xAxis: 'time'.yAxis: 'value'.fillerStyle: {
fill: '#5AA8D8'.fillOpacity: 0.1
},
backgroundStyle: {
stroke: '#dddddd'.//border
fill: '# 000000'./ / the background color
fillOpacity: 0.005.lineWidth: 0
},
backgroundChart : {
type: [ 'interval'].// The graph type can be either a string or an array line area
color: '# 825738',},textStyle: {
fill: '#ff0000' / / 333333
},
onChange: function (obj) {
var temp = obj.startText + obj.endText;
console.log(temp); }}); slider.render(); }});let init = function () { myAction.simulateSlider(); } (); });</script>
</body>
</html>
Copy the codeg2-plugin-slider.js
/* eslint-disable */
// The modification is marked mytest
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof module= = ='object' && typeof module.exports === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports= = ='object')
exports["Slider"] = factory();
else
root["Slider"] = factory(); }) (typeofself ! = ='undefined' ? self : this.function() {
return / * * * * * * / (function(modules) { // webpackBootstrap
/ * * * * * * / // The module cache
/ * * * * * * / var installedModules = {};
/ * * * * * * /
/ * * * * * * / // The require function
/ * * * * * * / function __webpack_require__(moduleId) {
/ * * * * * * /
/ * * * * * * / // Check if module is in cache
/ * * * * * * / if(installedModules[moduleId]) {
/ * * * * * * / return installedModules[moduleId].exports;
/ * * * * * * / }
/ * * * * * * / // Create a new module (and put it into the cache)
/ * * * * * * / var module = installedModules[moduleId] = {
/ * * * * * * / i: moduleId,
/ * * * * * * / l: false./ * * * * * * / exports: {}
/ * * * * * * / };
/ * * * * * * /
/ * * * * * * / // Execute the module function
/ * * * * * * / modules[moduleId].call(module.exports, module.module.exports, __webpack_require__);
/ * * * * * * /
/ * * * * * * / // Flag the module as loaded
/ * * * * * * / module.l = true;
/ * * * * * * /
/ * * * * * * / // Return the exports of the module
/ * * * * * * / return module.exports;
/ * * * * * * / }
/ * * * * * * /
/ * * * * * * /
/ * * * * * * / // expose the modules object (__webpack_modules__)
/ * * * * * * / __webpack_require__.m = modules;
/ * * * * * * /
/ * * * * * * / // expose the module cache
/ * * * * * * / __webpack_require__.c = installedModules;
/ * * * * * * /
/ * * * * * * / // define getter function for harmony exports
/ * * * * * * / __webpack_require__.d = function(exports, name, getter) {
/ * * * * * * / if(! __webpack_require__.o(exports, name)) {
/ * * * * * * / Object.defineProperty(exports, name, {
/ * * * * * * / configurable: false./ * * * * * * / enumerable: true./ * * * * * * / get: getter
/ * * * * * * / });
/ * * * * * * / }
/ * * * * * * / };
/ * * * * * * /
/ * * * * * * / // getDefaultExport function for compatibility with non-harmony modules
/ * * * * * * / __webpack_require__.n = function(module) {
/ * * * * * * / var getter = module && module.__esModule ?
/ * * * * * * / function getDefault() { return module['default']; } :
/ * * * * * * / function getModuleExports() { return module; };
/ * * * * * * / __webpack_require__.d(getter, 'a', getter);
/ * * * * * * / return getter;
/ * * * * * * / };
/ * * * * * * /
/ * * * * * * / // Object.prototype.hasOwnProperty.call
/ * * * * * * / __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/ * * * * * * /
/ * * * * * * / // __webpack_public_path__
/ * * * * * * / __webpack_require__.p = "";
/ * * * * * * /
/ * * * * * * / // Load entry module and return exports
/ * * * * * * / return __webpack_require__(__webpack_require__.s = 0);
/ * * * * * * / })
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ * * * * * * / ([
/* 0 */
/ * * * / (function(module.exports, __webpack_require__) {
var Slider = __webpack_require__(1);
if (window&&!window.G2) {
console.err('Please load the G2 script first! ');
}
module.exports = Slider;
/ * * * / }),
/ * 1 * /
/ * * * / (function(module.exports, __webpack_require__) {
function _classCallCheck(instance, Constructor) { if(! (instanceinstanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }}/ * * *@fileOverview G2's plugin for datazoom.
* @author sima.zhang
*/
var G2 = window && window.G2;
var Chart = G2.Chart,
Util = G2.Util,
G = G2.G,
Global = G2.Global;
var Canvas = G.Canvas,
DomUtil = G2.DomUtil;
var Range = __webpack_require__(2);
var Slider = function () {
Slider.prototype._initProps = function _initProps() {
this.height = 26;
this.width = 'auto'; // Default adaptive
this.padding = Global.plotCfg.padding;
this.container = null;
this.xAxis = null;
this.yAxis = null;
// Select the style of the region
this.fillerStyle = {
fill: '#BDCCED'.fillOpacity: 0.3
};
// Slider background style
this.backgroundStyle = {
stroke: '#CCD6EC'.fill: '#CCD6EC'.fillOpacity: 0.3.lineWidth: 1
};
this.range = [0.100];
this.layout = 'horizontal';
// Text color
this.textStyle = {
fill: '# 545454'
};
// The slider style
this.handleStyle = {
img: 'data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAABCCAYAAABuOUe8AAAABGdBTUEAALGPC/xhBQAAAQtJREFUSA1jYEADyzce+w/CaMIMTOgCuPijCnGFDFh8N HjoHDyMIPvWbjsh8+vPvy6G/wwOQK4kSAwInjMwMhxgY2EqC/ayeMIIUvT7z/+LF4LIo5KMjIzvWFkY9VmgJmFVBNICMuDXn/9dTFDrUI1B5wGdBEoUMDehS yPzJUlPPcZ6KgwgDAPofBaYhKgwP4wJptH5pFuNYhwWzqiJWAIFITQygweeHl+//YgICyALnc+IrZZC0QHlkBSOz7GZgCb2nAlUbKAJYnKBaphAZQuo2MCUh YiA5EBqmEAFEKhsAZq8HCiF7AxQIbUcJAdSg2HQaH2NHCQkxTWyRpzsURNxBg1IgvrBAwC71Eh1LbC3jwAAAABJRU5ErkJggg=='.//img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png',
width: 5
};
// Background chart configuration, if false does not render
this.backgroundChart = {
type: ['area'].// The type of the graph can be either a string or an array
color: '#CCD6EC'
};
};
function Slider(cfg) {
_classCallCheck(this, Slider);
this._initProps();
Util.deepMix(this, cfg);
var container = this.container;
if(! container) {throw new Error('Please specify the container for the Slider! ');
}
if (Util.isString(container)) {
this.domContainer = document.getElementById(container);
} else {
this.domContainer = container;
}
this.handleStyle = Util.mix({
width: this.height,
height: this.height
}, this.handleStyle);
if (this.width === 'auto') {
// The width is adaptive
window.addEventListener('resize', Util.wrapBehavior(this.'_initForceFitEvent'));
}
}
Slider.prototype._initForceFitEvent = function _initForceFitEvent() {
var timer = setTimeout(Util.wrapBehavior(this.'forceFit'), 200);
clearTimeout(this.resizeTimer);
this.resizeTimer = timer;
};
Slider.prototype.forceFit = function forceFit() {
if (!this || this.destroyed) {
return;
}
var width = DomUtil.getWidth(this.domContainer);
var height = this.height;
if(width ! = =this.domWidth) {
var canvas = this.canvas;
canvas.changeSize(width, height); // Change the canvas size
this.bgChart && this.bgChart.changeWidth(width);
canvas.clear();
this._initWidth();
this._initSlider(); // Initialize the slider
this._bindEvent(); canvas.draw(); }}; Slider.prototype._initWidth =function _initWidth() {
var width = void 0;
if (this.width === 'auto') {
width = DomUtil.getWidth(this.domContainer);
} else {
width = this.width;
}
this.domWidth = width;
var padding = Util.toAllPadding(this.padding);
if (this.layout === 'horizontal') {
this.plotWidth = width - padding[1] - padding[3];
this.plotPadding = padding[3];
this.plotHeight = this.height;
} else if (this.layout === 'vertical') {
this.plotWidth = this.width;
this.plotHeight = this.height - padding[0] - padding[2];
this.plotPadding = padding[0]; }}; Slider.prototype.render =function render() {
this._initWidth();
this._initCanvas(); // Initialize canvas
this._initBackground(); // Initialize the background diagram
this._initSlider(); // Initialize the slider
this._bindEvent();
this.canvas.draw();
};
Slider.prototype.changeData = function changeData(data) {
this.data = data;
this.repaint();
};
Slider.prototype.destroy = function destroy() {
clearTimeout(this.resizeTimer);
var rangeElement = this.rangeElement;
rangeElement.off('sliderchange');
this.bgChart && this.bgChart.destroy();
this.canvas.destroy();
var container = this.domContainer;
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
window.removeEventListener('resize', Util.getWrapBehavior(this.'_initForceFitEvent'));
this.destroyed = true;
};
Slider.prototype.clear = function clear() {
this.canvas.clear();
this.bgChart && this.bgChart.destroy();
this.bgChart = null;
this.scale = null;
this.canvas.draw();
};
Slider.prototype.repaint = function repaint() {
this.clear();
this.render();
};
Slider.prototype._initCanvas = function _initCanvas() {
var width = this.domWidth;
var height = this.height;
var canvas = new Canvas({
width: width,
height: height,
containerDOM: this.domContainer,
capture: false
});
var node = canvas.get('el');
node.style.position = 'absolute';
node.style.top = 0;
node.style.left = 0;
node.style.zIndex = 3;
this.canvas = canvas;
};
Slider.prototype._initBackground = function _initBackground() {
var _Util$deepMix;
var data = this.data;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var scales = Util.deepMix((_Util$deepMix = {}, _Util$deepMix[' ' + xAxis] = {
range: [0.1]
}, _Util$deepMix), this.scales); // User column definition
if(! data) {// No data is created
throw new Error('Please specify the data! ');
}
if(! xAxis) {throw new Error('Please specify the xAxis! ');
}
if(! yAxis) {throw new Error('Please specify the yAxis! ');
}
var backgroundChart = this.backgroundChart;
var type = backgroundChart.type;
var color = backgroundChart.color;
var lineColor = backgroundChart.lineColor;
var opacity = backgroundChart.opacity || 1;
var lineOpacity = backgroundChart.lineOpacity || 1;
if(! Util.isArray(type)) { type = [type]; }var padding = Util.toAllPadding(this.padding);
var bgChart = new Chart({
container: this.container,
width: this.domWidth,
height: this.height,
padding: [0, padding[1].0, padding[3]],
animate: false
});
bgChart.source(data);
bgChart.scale(scales);
bgChart.axis(false);
bgChart.tooltip(false);
bgChart.legend(false);
Util.each(type, function (eachType) {
if (eachType === 'line') {
bgChart[eachType]().position(xAxis + The '*' + yAxis).color(lineColor).opacity(lineOpacity);
} else {
bgChart[eachType]().position(xAxis + The '*'+ yAxis).color(color).opacity(opacity); }}); bgChart.render();this.bgChart = bgChart;
this.scale = this.layout === 'horizontal' ? bgChart.getXScale() : bgChart.getYScales()[0];
if (this.layout === 'vertical') { bgChart.destroy(); }}; Slider.prototype._initRange =function _initRange() {
var start = this.start;
var end = this.end;
var scale = this.scale;
var min = 0;
var max = 1;
if (start) {
min = scale.scale(scale.translate(start));
}
if (end) {
max = scale.scale(scale.translate(end));
}
var minSpan = this.minSpan,
maxSpan = this.maxSpan;
var totalSpan = 0;
if (scale.type === 'time' || scale.type === 'timeCat') {
// The time type is sorted
var values = scale.values;
var firstValue = values[0];
var lastValue = values[values.length - 1];
totalSpan = lastValue - firstValue;
} else if (scale.isLinear) {
totalSpan = scale.max - scale.min;
}
if (totalSpan && minSpan) {
this.minRange = minSpan / totalSpan * 100;
}
if (totalSpan && maxSpan) {
this.maxRange = maxSpan / totalSpan * 100;
}
var range = [min * 100, max * 100];
this.range = range;
return range;
};
Slider.prototype._getHandleValue = function _getHandleValue(type) {
var value = void 0;
var range = this.range;
var min = range[0] / 100;
var max = range[1] / 100;
var scale = this.scale;
if (type === 'min') {
value = this.start ? this.start : scale.invert(min);
} else {
value = this.end ? this.end : scale.invert(max);
}
return value;
};
Slider.prototype._initSlider = function _initSlider() {
var canvas = this.canvas;
var range = this._initRange();
var scale = this.scale;
var rangeElement = canvas.addGroup(Range, {
middleAttr: this.fillerStyle,
range: range,
minRange: this.minRange,
maxRange: this.maxRange,
layout: this.layout,
width: this.plotWidth,
height: this.plotHeight,
backgroundStyle: this.backgroundStyle,
textStyle: this.textStyle,
handleStyle: this.handleStyle,
minText: scale.getText(this._getHandleValue('min')),
maxText: scale.getText(this._getHandleValue('max'))});if (this.layout === 'horizontal') {
rangeElement.translate(this.plotPadding, 0);
} else if (this.layout === 'vertical') {
rangeElement.translate(0.this.plotPadding);
}
this.rangeElement = rangeElement;
};
Slider.prototype._bindEvent = function _bindEvent() {
var self = this;
var rangeElement = self.rangeElement;
rangeElement.on('sliderchange'.function (ev) {
var range = ev.range;
var minRatio = range[0] / 100;
var maxRatio = range[1] / 100;
self._updateElement(minRatio, maxRatio, ev.type); //mytest
});
};
Slider.prototype._updateElement = function _updateElement(minRatio, maxRatio, type) {
var scale = this.scale;
var rangeElement = this.rangeElement;
var minTextElement = rangeElement.get('minTextElement');
var maxTextElement = rangeElement.get('maxTextElement');
var min = scale.invert(minRatio);
var max = scale.invert(maxRatio);
var minText = scale.getText(min);
var maxText = scale.getText(max);
minTextElement.attr('text', minText); //minText mytest
maxTextElement.attr('text', maxText);
if (this.domWidth * minRatio > 200) {
minTextElement.attr('textAlign'.'end');
minTextElement.attr('x', -7.5);
} else {
minTextElement.attr('textAlign'.'start');
minTextElement.attr('x'.7.5);
}
if (this.domWidth * (1 - maxRatio) > 200) {
maxTextElement.attr('textAlign'.'start');
maxTextElement.attr('x'.7.5);
} else {
maxTextElement.attr('textAlign'.'end');
maxTextElement.attr('x', -7.5);
}
if (this.domWidth * (maxRatio - minRatio) < 200) {
if (minTextElement.attr('textAlign') === maxTextElement.attr('textAlign')) {
minTextElement.attr('y'.this.height / 2 - 10);
maxTextElement.attr('y'.this.height / 2 + 10);
} else {
minTextElement.attr('y'.this.height / 2);
maxTextElement.attr('y'.this.height / 2); }}else {
minTextElement.attr('y'.this.height / 2);
maxTextElement.attr('y'.this.height / 2);
}
this.start = minText;
this.end = maxText;
if (this.onChange && type === 'mouseup') { //mytest
this.onChange({
startText: minText,
endText: maxText,
startValue: min,
endValue: max }); }};returnSlider; } ();module.exports = Slider;
/ * * * / }),
/ * 2 * /
/ * * * / (function(module.exports) {
function _classCallCheck(instance, Constructor) { if(! (instanceinstanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); }}function _possibleConstructorReturn(self, call) { if(! self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function")? call : self; }function _inherits(subClass, superClass) { if (typeofsuperClass ! = ="function"&& superClass ! = =null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false.writable: true.configurable: true}});if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/ * * *@fileOverview The class of slider
* @author sima.zhang
*/
var G2 = window && window.G2;
var Util = G2.Util,
G = G2.G;
var Group = G.Group,
DomUtil = G.DomUtil;
var OFFSET = 5;
var Range = function (_Group) {
_inherits(Range, _Group);
function Range() {
_classCallCheck(this, Range);
return _possibleConstructorReturn(this, _Group.apply(this.arguments));
}
Range.prototype.getDefaultCfg = function getDefaultCfg() {
return {
/** * range *@type {Array}* /
range: null./** * in the slider property *@type {ATTRS}* /
middleAttr: null./** * background *@type {G-Element}* /
backgroundElement: null./** * slide block *@type {G-Element}* /
minHandleElement: null./** ** upper slider *@type {G-Element}* /
maxHandleElement: null./** * middle block *@type {G-Element}* /
middleHandleElement: null./** * The current active element *@type {G-Element}* /
currentTarget: null./** * Horizontal, vertical *@type {String}* /
layout: 'vertical'./ * * * * wide@type {Number}* /
width: null./**
* 高
* @type {Number}* /
height: null./** * the current PageX *@type {Number}* /
pageX: null./** * the current PageY *@type {Number}* /
pageY: null
};
};
Range.prototype._initHandle = function _initHandle(type) {
var handle = this.addGroup();
var layout = this.get('layout');
var handleStyle = this.get('handleStyle');
var img = handleStyle.img;
var iconWidth = handleStyle.width;
var iconHeight = handleStyle.height;
var text = void 0;
var handleIcon = void 0;
var triggerCursor = void 0;
if (layout === 'horizontal') {
var _iconWidth = handleStyle.width;
triggerCursor = 'ew-resize';
handleIcon = handle.addShape('Image', {
attrs: {
x: -_iconWidth / 2.y: 0.width: _iconWidth,
height: iconHeight,
img: img,
cursor: triggerCursor
}
});
text = handle.addShape('Text', {
attrs: Util.mix({
//x: type === 'min' ? -(_iconWidth / 2 + OFFSET) : _iconWidth / 2 + OFFSET,
x: type === 'max' ? -(_iconWidth / 2 + OFFSET) : -(_iconWidth / 2 + OFFSET), //mytest
y: iconHeight / 2.//textAlign: type === 'min' ? 'end' : 'start',
textAlign: type === 'max' ? 'end' : 'end'.//mytest
textBaseline: 'middle'.text: type === 'min' ? this.get('minText') : this.get('maxText'),
//cursor: triggerCursor //mytest
}, this.get('textStyle'))}); }else {
triggerCursor = 'ns-resize';
handleIcon = handle.addShape('Image', {
attrs: {
x: 0.y: -iconHeight / 2.width: iconWidth,
height: iconHeight,
img: img,
cursor: triggerCursor
}
});
text = handle.addShape('Text', {
attrs: Util.mix({
x: iconWidth / 2.y: type === 'min' ? iconHeight / 2 + OFFSET : -(iconHeight / 2 + OFFSET),
textAlign: 'center'.textBaseline: 'middle'.text: type === 'min' ? this.get('minText') : this.get('maxText'),
cursor: triggerCursor
}, this.get('textStyle'))}); }this.set(type + 'TextElement', text);
this.set(type + 'IconElement', handleIcon);
return handle;
};
Range.prototype._initSliderBackground = function _initSliderBackground() {
var backgroundElement = this.addGroup();
backgroundElement.initTransform();
backgroundElement.translate(0.0);
backgroundElement.addShape('Rect', {
attrs: Util.mix({
x: 0.y: 0.width: this.get('width'),
height: this.get('height')},this.get('backgroundStyle'))});return backgroundElement;
};
Range.prototype._beforeRenderUI = function _beforeRenderUI() {
var backgroundElement = this._initSliderBackground();
var minHandleElement = this._initHandle('min');
var maxHandleElement = this._initHandle('max');
var middleHandleElement = this.addShape('rect', {
attrs: this.get('middleAttr')});this.set('middleHandleElement', middleHandleElement);
this.set('minHandleElement', minHandleElement);
this.set('maxHandleElement', maxHandleElement);
this.set('backgroundElement', backgroundElement);
backgroundElement.set('zIndex'.0);
middleHandleElement.set('zIndex'.1);
minHandleElement.set('zIndex'.2);
maxHandleElement.set('zIndex'.2);
middleHandleElement.attr('cursor'.'move');
this.sort();
};
Range.prototype._renderUI = function _renderUI() {
if (this.get('layout') = = ='horizontal') {
this._renderHorizontal();
} else {
this._renderVertical(); }}; Range.prototype._transform =function _transform(layout) {
var range = this.get('range');
var minRatio = range[0] / 100;
var maxRatio = range[1] / 100;
var width = this.get('width');
var height = this.get('height');
var minHandleElement = this.get('minHandleElement');
var maxHandleElement = this.get('maxHandleElement');
var middleHandleElement = this.get('middleHandleElement');
if (minHandleElement.resetMatrix) {
minHandleElement.resetMatrix();
maxHandleElement.resetMatrix();
} else {
minHandleElement.initTransform();
maxHandleElement.initTransform();
}
if (layout === 'horizontal') {
middleHandleElement.attr({
x: width * minRatio,
y: 0.width: (maxRatio - minRatio) * width,
height: height
});
minHandleElement.translate(minRatio * width, 0); //mytest
maxHandleElement.translate(maxRatio * width, 0);
} else {
middleHandleElement.attr({
x: 0.y: height * (1 - maxRatio),
width: width,
height: (maxRatio - minRatio) * height
});
minHandleElement.translate(0, (1 - minRatio) * height);
maxHandleElement.translate(0, (1- maxRatio) * height); }}; Range.prototype._renderHorizontal =function _renderHorizontal() {
this._transform('horizontal');
};
Range.prototype._renderVertical = function _renderVertical() {
this._transform('vertical');
};
Range.prototype._bindUI = function _bindUI() {
this.on('mousedown', Util.wrapBehavior(this.'_onMouseDown'));
};
Range.prototype._isElement = function _isElement(target, name) {
// Check if it is the element
var element = this.get(name);
if (target === element) {
return true;
}
if (element.isGroup) {
var elementChildren = element.get('children');
return elementChildren.indexOf(target) > -1;
}
return false;
};
Range.prototype._getRange = function _getRange(diff, range) {
var rst = diff + range;
rst = rst > 100 ? 100 : rst;
rst = rst < 0 ? 0 : rst;
return rst;
};
Range.prototype._limitRange = function _limitRange(diff, limit, range) {
range[0] = this._getRange(diff, range[0]);
range[1] = range[0] + limit;
if (range[1] > 100) {
range[1] = 100;
range[0] = range[1] - limit; }}; Range.prototype._updateStatus =function _updateStatus(dim, ev, type) {
var totalLength = dim === 'x' ? this.get('width') : this.get('height');
dim = Util.upperFirst(dim);
var range = this.get('range');
var page = this.get('page' + dim);
var currentTarget = this.get('currentTarget');
var rangeStash = this.get('rangeStash');
var layout = this.get('layout');
var sign = layout === 'vertical' ? -1 : 1;
var currentPage = ev['page' + dim];
var diffPage = currentPage - page;
var diffRange = diffPage / totalLength * 100 * sign;
var diffStashRange = void 0;
var minRange = this.get('minRange');
var maxRange = this.get('maxRange');
if (currentTarget.__cfg && currentTarget.__cfg.type === 'Text') { //mytest, forbid dragging text
return;
}
if (range[1] <= range[0]) {
if (this._isElement(currentTarget, 'minHandleElement') | |this._isElement(currentTarget, 'maxHandleElement')) {
range[0] = this._getRange(diffRange, range[0]);
range[1] = this._getRange(diffRange, range[0]); }}else {
if (this._isElement(currentTarget, 'minHandleElement')) {
range[0] = this._getRange(diffRange, range[0]);
if (minRange) {
// Set the minimum range
if (range[1] - range[0] <= minRange) {
this._limitRange(diffRange, minRange, range); }}if (maxRange) {
// Set the maximum range
if (range[1] - range[0] >= maxRange) {
this._limitRange(diffRange, maxRange, range); }}}if (this._isElement(currentTarget, 'maxHandleElement')) {
range[1] = this._getRange(diffRange, range[1]);
if (minRange) {
// Set the minimum range
if (range[1] - range[0] <= minRange) {
this._limitRange(diffRange, minRange, range); }}if (maxRange) {
// Set the maximum range
if (range[1] - range[0] >= maxRange) {
this._limitRange(diffRange, maxRange, range); }}}}if (this._isElement(currentTarget, 'middleHandleElement')) {
diffStashRange = rangeStash[1] - rangeStash[0];
this._limitRange(diffRange, diffStashRange, range);
}
//mytest
this.emit('sliderchange', {
range: range,
type : type
});
this.set('page' + dim, currentPage);
this._renderUI();
this.get('canvas').draw(); // need delete
return;
};
Range.prototype._onMouseDown = function _onMouseDown(ev) {
var currentTarget = ev.currentTarget;
var originEvent = ev.event;
var range = this.get('range');
originEvent.stopPropagation();
originEvent.preventDefault();
this.set('pageX', originEvent.pageX);
this.set('pageY', originEvent.pageY);
this.set('currentTarget', currentTarget);
this.set('rangeStash', [range[0], range[1]]);
this._bindCanvasEvents();
};
Range.prototype._bindCanvasEvents = function _bindCanvasEvents() {
var DomUtil = G2.DomUtil;
var containerDOM = this.get('canvas').get('containerDOM');
this.onMouseMoveListener = DomUtil.addEventListener(containerDOM, 'mousemove', Util.wrapBehavior(this.'_onCanvasMouseMove'));
this.onMouseUpListener = DomUtil.addEventListener(containerDOM, 'mouseup', Util.wrapBehavior(this.'_onCanvasMouseUp'));
// @2018-06-06 by blue.lb add mouseleave event listener, so that the user can operate out of the slider area after a "normal" effect, can normally trigger the slider operation process again
this.onMouseLeaveListener = DomUtil.addEventListener(containerDOM, 'mouseleave', Util.wrapBehavior(this.'_onCanvasMouseUp'));
};
Range.prototype._onCanvasMouseMove = function _onCanvasMouseMove(ev) {
var layout = this.get('layout');
if (layout === 'horizontal') {
this._updateStatus('x', ev, 'mousemove'); //mytest
} else {
this._updateStatus('y', ev); }}; Range.prototype._onCanvasMouseUp =function _onCanvasMouseUp(ev) {
this._removeDocumentEvents();
//mytest
var layout = this.get('layout');
if (layout === 'horizontal') {
this._updateStatus('x', ev, 'mouseup'); //mytest
} else {
this._updateStatus('y', ev); }}; Range.prototype._removeDocumentEvents =function _removeDocumentEvents() {
this.onMouseMoveListener.remove();
this.onMouseUpListener.remove();
this.onMouseLeaveListener.remove();
};
return Range;
}(Group);
module.exports = Range;
/ * * * / })
/ * * * * * * / ]);
});
Copy the code