1 | (function webpackUniversalModuleDefinition(root, factory) {
|
2 | if(typeof exports === 'object' && typeof module === 'object')
|
3 | module.exports = factory();
|
4 | else if(typeof define === 'function' && define.amd)
|
5 | define([], factory);
|
6 | else if(typeof exports === 'object')
|
7 | exports["Slider"] = factory();
|
8 | else
|
9 | root["Slider"] = factory();
|
10 | })(typeof self !== 'undefined' ? self : this, function() {
|
11 | return (function(modules) {
|
12 |
|
13 | var installedModules = {};
|
14 |
|
15 |
|
16 | function __webpack_require__(moduleId) {
|
17 |
|
18 |
|
19 | if(installedModules[moduleId]) {
|
20 | return installedModules[moduleId].exports;
|
21 | }
|
22 |
|
23 | var module = installedModules[moduleId] = {
|
24 | i: moduleId,
|
25 | l: false,
|
26 | exports: {}
|
27 | };
|
28 |
|
29 |
|
30 | modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
31 |
|
32 |
|
33 | module.l = true;
|
34 |
|
35 |
|
36 | return module.exports;
|
37 | }
|
38 |
|
39 |
|
40 |
|
41 | __webpack_require__.m = modules;
|
42 |
|
43 |
|
44 | __webpack_require__.c = installedModules;
|
45 |
|
46 |
|
47 | __webpack_require__.d = function(exports, name, getter) {
|
48 | if(!__webpack_require__.o(exports, name)) {
|
49 | Object.defineProperty(exports, name, {
|
50 | configurable: false,
|
51 | enumerable: true,
|
52 | get: getter
|
53 | /******/ });
|
54 | /******/ }
|
55 | /******/ };
|
56 | /******/
|
57 | /******/ // getDefaultExport function for compatibility with non-harmony modules
|
58 | /******/ __webpack_require__.n = function(module) {
|
59 | var getter = module && module.__esModule ?
|
60 | function getDefault() { return module['default']; } :
|
61 | function getModuleExports() { return module; };
|
62 | __webpack_require__.d(getter, 'a', getter);
|
63 | return getter;
|
64 | };
|
65 |
|
66 |
|
67 | __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
68 |
|
69 |
|
70 | __webpack_require__.p = "";
|
71 |
|
72 |
|
73 | return __webpack_require__(__webpack_require__.s = 0);
|
74 | })
|
75 |
|
76 | ([
|
77 |
|
78 | (function(module, exports, __webpack_require__) {
|
79 |
|
80 | var Slider = __webpack_require__(1);
|
81 | if (window && !window.G2) {
|
82 | console.err('Please load the G2 script first!');
|
83 | }
|
84 |
|
85 | module.exports = Slider;
|
86 |
|
87 | }),
|
88 |
|
89 | (function(module, exports, __webpack_require__) {
|
90 |
|
91 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 | var G2 = window && window.G2;
|
98 | var Chart = G2.Chart,
|
99 | Util = G2.Util,
|
100 | G = G2.G,
|
101 | Global = G2.Global;
|
102 | var Canvas = G.Canvas,
|
103 | DomUtil = G.DomUtil;
|
104 |
|
105 | var Range = __webpack_require__(2);
|
106 |
|
107 | var Slider = function () {
|
108 | Slider.prototype._initProps = function _initProps() {
|
109 | this.height = 26;
|
110 | this.width = 'auto';
|
111 | this.padding = Global.plotCfg.padding;
|
112 | this.container = null;
|
113 | this.xAxis = null;
|
114 | this.yAxis = null;
|
115 |
|
116 | this.fillerStyle = {
|
117 | fill: '#BDCCED',
|
118 | fillOpacity: 0.3
|
119 | };
|
120 |
|
121 | this.backgroundStyle = {
|
122 | stroke: '#CCD6EC',
|
123 | fill: '#CCD6EC',
|
124 | fillOpacity: 0.3,
|
125 | lineWidth: 1
|
126 | };
|
127 | this.range = [0, 100];
|
128 | this.layout = 'horizontal';
|
129 |
|
130 | this.textStyle = {
|
131 | fill: '#545454'
|
132 | };
|
133 |
|
134 | this.handleStyle = {
|
135 | img: 'https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png',
|
136 | width: 5
|
137 | };
|
138 |
|
139 | this.backgroundChart = {
|
140 | type: ['area'],
|
141 | color: '#CCD6EC'
|
142 | };
|
143 | };
|
144 |
|
145 | function Slider(cfg) {
|
146 | _classCallCheck(this, Slider);
|
147 |
|
148 | this._initProps();
|
149 | Util.deepMix(this, cfg);
|
150 | var container = this.container;
|
151 | if (!container) {
|
152 | throw new Error('Please specify the container for the Slider!');
|
153 | }
|
154 | if (Util.isString(container)) {
|
155 | this.domContainer = document.getElementById(container);
|
156 | } else {
|
157 | this.domContainer = container;
|
158 | }
|
159 |
|
160 | this.handleStyle = Util.mix({
|
161 | width: this.height,
|
162 | height: this.height
|
163 | }, this.handleStyle);
|
164 | if (this.width === 'auto') {
|
165 |
|
166 | window.addEventListener('resize', Util.wrapBehavior(this, '_initForceFitEvent'));
|
167 | }
|
168 | }
|
169 |
|
170 | Slider.prototype._initForceFitEvent = function _initForceFitEvent() {
|
171 | var timer = setTimeout(Util.wrapBehavior(this, 'forceFit'), 200);
|
172 | clearTimeout(this.resizeTimer);
|
173 | this.resizeTimer = timer;
|
174 | };
|
175 |
|
176 | Slider.prototype.forceFit = function forceFit() {
|
177 | if (!this || this.destroyed) {
|
178 | return;
|
179 | }
|
180 | var width = DomUtil.getWidth(this.domContainer);
|
181 | var height = this.height;
|
182 | if (width !== this.domWidth) {
|
183 | var canvas = this.canvas;
|
184 | canvas.changeSize(width, height);
|
185 | this.bgChart && this.bgChart.changeWidth(width);
|
186 | canvas.clear();
|
187 | this._initWidth();
|
188 | this._initSlider();
|
189 | this._bindEvent();
|
190 | canvas.draw();
|
191 | }
|
192 | };
|
193 |
|
194 | Slider.prototype._initWidth = function _initWidth() {
|
195 | var width = void 0;
|
196 | if (this.width === 'auto') {
|
197 | width = DomUtil.getWidth(this.domContainer);
|
198 | } else {
|
199 | width = this.width;
|
200 | }
|
201 | this.domWidth = width;
|
202 | var padding = Util.toAllPadding(this.padding);
|
203 |
|
204 | if (this.layout === 'horizontal') {
|
205 | this.plotWidth = width - padding[1] - padding[3];
|
206 | this.plotPadding = padding[3];
|
207 | this.plotHeight = this.height;
|
208 | } else if (this.layout === 'vertical') {
|
209 | this.plotWidth = this.width;
|
210 | this.plotHeight = this.height - padding[0] - padding[2];
|
211 | this.plotPadding = padding[0];
|
212 | }
|
213 | };
|
214 |
|
215 | Slider.prototype.render = function render() {
|
216 | this._initWidth();
|
217 | this._initCanvas();
|
218 | this._initBackground();
|
219 | this._initSlider();
|
220 | this._bindEvent();
|
221 | this.canvas.draw();
|
222 | };
|
223 |
|
224 | Slider.prototype.changeData = function changeData(data) {
|
225 | this.data = data;
|
226 | this.repaint();
|
227 | };
|
228 |
|
229 | Slider.prototype.destroy = function destroy() {
|
230 | clearTimeout(this.resizeTimer);
|
231 | var rangeElement = this.rangeElement;
|
232 | rangeElement.off('sliderchange');
|
233 | this.bgChart && this.bgChart.destroy();
|
234 | this.canvas.destroy();
|
235 | var container = this.domContainer;
|
236 | while (container.hasChildNodes()) {
|
237 | container.removeChild(container.firstChild);
|
238 | }
|
239 | window.removeEventListener('resize', Util.getWrapBehavior(this, '_initForceFitEvent'));
|
240 | this.destroyed = true;
|
241 | };
|
242 |
|
243 | Slider.prototype.clear = function clear() {
|
244 | this.canvas.clear();
|
245 | this.bgChart && this.bgChart.destroy();
|
246 | this.bgChart = null;
|
247 | this.scale = null;
|
248 | this.canvas.draw();
|
249 | };
|
250 |
|
251 | Slider.prototype.repaint = function repaint() {
|
252 | this.clear();
|
253 | this.render();
|
254 | };
|
255 |
|
256 | Slider.prototype._initCanvas = function _initCanvas() {
|
257 | var width = this.domWidth;
|
258 | var height = this.height;
|
259 | var canvas = new Canvas({
|
260 | width: width,
|
261 | height: height,
|
262 | containerDOM: this.domContainer,
|
263 | capture: false
|
264 | });
|
265 | var node = canvas.get('el');
|
266 | node.style.position = 'absolute';
|
267 | node.style.top = 0;
|
268 | node.style.left = 0;
|
269 | node.style.zIndex = 3;
|
270 | this.canvas = canvas;
|
271 | };
|
272 |
|
273 | Slider.prototype._initBackground = function _initBackground() {
|
274 | var _Util$deepMix;
|
275 |
|
276 | var data = this.data;
|
277 | var xAxis = this.xAxis;
|
278 | var yAxis = this.yAxis;
|
279 | var scales = Util.deepMix((_Util$deepMix = {}, _Util$deepMix['' + xAxis] = {
|
280 | range: [0, 1]
|
281 | }, _Util$deepMix), this.scales);
|
282 | if (!data) {
|
283 |
|
284 | throw new Error('Please specify the data!');
|
285 | }
|
286 | if (!xAxis) {
|
287 | throw new Error('Please specify the xAxis!');
|
288 | }
|
289 | if (!yAxis) {
|
290 | throw new Error('Please specify the yAxis!');
|
291 | }
|
292 |
|
293 | var backgroundChart = this.backgroundChart;
|
294 | var type = backgroundChart.type;
|
295 | var color = backgroundChart.color;
|
296 | if (!Util.isArray(type)) {
|
297 | type = [type];
|
298 | }
|
299 |
|
300 | var padding = Util.toAllPadding(this.padding);
|
301 | var bgChart = new Chart({
|
302 | container: this.container,
|
303 | width: this.domWidth,
|
304 | height: this.height,
|
305 | padding: [0, padding[1], 0, padding[3]],
|
306 | animate: false
|
307 | });
|
308 | bgChart.source(data);
|
309 | bgChart.scale(scales);
|
310 | bgChart.axis(false);
|
311 | bgChart.tooltip(false);
|
312 | bgChart.legend(false);
|
313 | Util.each(type, function (eachType) {
|
314 | bgChart[eachType]().position(xAxis + '*' + yAxis).color(color).opacity(1);
|
315 | });
|
316 | bgChart.render();
|
317 | this.bgChart = bgChart;
|
318 | this.scale = this.layout === 'horizontal' ? bgChart.getXScale() : bgChart.getYScales()[0];
|
319 | if (this.layout === 'vertical') {
|
320 | bgChart.destroy();
|
321 | }
|
322 | };
|
323 |
|
324 | Slider.prototype._initRange = function _initRange() {
|
325 | var start = this.start;
|
326 | var end = this.end;
|
327 | var scale = this.scale;
|
328 | var min = 0;
|
329 | var max = 1;
|
330 | if (start) {
|
331 | min = scale.scale(scale.translate(start));
|
332 | }
|
333 | if (end) {
|
334 | max = scale.scale(scale.translate(end));
|
335 | }
|
336 |
|
337 | var minSpan = this.minSpan,
|
338 | maxSpan = this.maxSpan;
|
339 |
|
340 | var totalSpan = 0;
|
341 | if (scale.type === 'time' || scale.type === 'timeCat') {
|
342 |
|
343 | var values = scale.values;
|
344 | var firstValue = values[0];
|
345 | var lastValue = values[values.length - 1];
|
346 | totalSpan = lastValue - firstValue;
|
347 | } else if (scale.isLinear) {
|
348 | totalSpan = scale.max - scale.min;
|
349 | }
|
350 |
|
351 | if (totalSpan && minSpan) {
|
352 | this.minRange = minSpan / totalSpan * 100;
|
353 | }
|
354 |
|
355 | if (totalSpan && maxSpan) {
|
356 | this.maxRange = maxSpan / totalSpan * 100;
|
357 | }
|
358 |
|
359 | var range = [min * 100, max * 100];
|
360 | this.range = range;
|
361 | return range;
|
362 | };
|
363 |
|
364 | Slider.prototype._getHandleValue = function _getHandleValue(type) {
|
365 | var value = void 0;
|
366 | var range = this.range;
|
367 | var min = range[0] / 100;
|
368 | var max = range[1] / 100;
|
369 | var scale = this.scale;
|
370 | if (type === 'min') {
|
371 | value = this.start ? this.start : scale.invert(min);
|
372 | } else {
|
373 | value = this.end ? this.end : scale.invert(max);
|
374 | }
|
375 | return value;
|
376 | };
|
377 |
|
378 | Slider.prototype._initSlider = function _initSlider() {
|
379 | var canvas = this.canvas;
|
380 | var range = this._initRange();
|
381 | var scale = this.scale;
|
382 | var rangeElement = canvas.addGroup(Range, {
|
383 | middleAttr: this.fillerStyle,
|
384 | range: range,
|
385 | minRange: this.minRange,
|
386 | maxRange: this.maxRange,
|
387 | layout: this.layout,
|
388 | width: this.plotWidth,
|
389 | height: this.plotHeight,
|
390 | backgroundStyle: this.backgroundStyle,
|
391 | textStyle: this.textStyle,
|
392 | handleStyle: this.handleStyle,
|
393 | minText: scale.getText(this._getHandleValue('min')),
|
394 | maxText: scale.getText(this._getHandleValue('max'))
|
395 | });
|
396 | if (this.layout === 'horizontal') {
|
397 | rangeElement.translate(this.plotPadding, 0);
|
398 | } else if (this.layout === 'vertical') {
|
399 | rangeElement.translate(0, this.plotPadding);
|
400 | }
|
401 | this.rangeElement = rangeElement;
|
402 | };
|
403 |
|
404 | Slider.prototype._bindEvent = function _bindEvent() {
|
405 | var self = this;
|
406 | var rangeElement = self.rangeElement;
|
407 | rangeElement.on('sliderchange', function (ev) {
|
408 | var range = ev.range;
|
409 | var minRatio = range[0] / 100;
|
410 | var maxRatio = range[1] / 100;
|
411 | self._updateElement(minRatio, maxRatio);
|
412 | });
|
413 | };
|
414 |
|
415 | Slider.prototype._updateElement = function _updateElement(minRatio, maxRatio) {
|
416 | var scale = this.scale;
|
417 | var rangeElement = this.rangeElement;
|
418 | var minTextElement = rangeElement.get('minTextElement');
|
419 | var maxTextElement = rangeElement.get('maxTextElement');
|
420 | var min = scale.invert(minRatio);
|
421 | var max = scale.invert(maxRatio);
|
422 | var minText = scale.getText(min);
|
423 | var maxText = scale.getText(max);
|
424 | minTextElement.attr('text', minText);
|
425 | maxTextElement.attr('text', maxText);
|
426 |
|
427 | this.start = minText;
|
428 | this.end = maxText;
|
429 |
|
430 | if (this.onChange) {
|
431 | this.onChange({
|
432 | startText: minText,
|
433 | endText: maxText,
|
434 | startValue: min,
|
435 | endValue: max
|
436 | });
|
437 | }
|
438 | };
|
439 |
|
440 | return Slider;
|
441 | }();
|
442 |
|
443 | module.exports = Slider;
|
444 |
|
445 | }),
|
446 |
|
447 | (function(module, exports) {
|
448 |
|
449 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
450 |
|
451 | 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; }
|
452 |
|
453 | function _inherits(subClass, superClass) { if (typeof superClass !== "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; }
|
454 |
|
455 |
|
456 |
|
457 |
|
458 |
|
459 | var G2 = window && window.G2;
|
460 | var Util = G2.Util,
|
461 | G = G2.G;
|
462 | var Group = G.Group,
|
463 | DomUtil = G.DomUtil;
|
464 |
|
465 | var OFFSET = 5;
|
466 |
|
467 | var Range = function (_Group) {
|
468 | _inherits(Range, _Group);
|
469 |
|
470 | function Range() {
|
471 | _classCallCheck(this, Range);
|
472 |
|
473 | return _possibleConstructorReturn(this, _Group.apply(this, arguments));
|
474 | }
|
475 |
|
476 | Range.prototype.getDefaultCfg = function getDefaultCfg() {
|
477 | return {
|
478 | |
479 |
|
480 |
|
481 |
|
482 | range: null,
|
483 | |
484 |
|
485 |
|
486 |
|
487 | middleAttr: null,
|
488 | |
489 |
|
490 |
|
491 |
|
492 | backgroundElement: null,
|
493 | |
494 |
|
495 |
|
496 |
|
497 | minHandleElement: null,
|
498 | |
499 |
|
500 |
|
501 |
|
502 | maxHandleElement: null,
|
503 | |
504 |
|
505 |
|
506 |
|
507 | middleHandleElement: null,
|
508 | |
509 |
|
510 |
|
511 |
|
512 | currentTarget: null,
|
513 | |
514 |
|
515 |
|
516 |
|
517 | layout: 'vertical',
|
518 | |
519 |
|
520 |
|
521 |
|
522 | width: null,
|
523 | |
524 |
|
525 |
|
526 |
|
527 | height: null,
|
528 | |
529 |
|
530 |
|
531 |
|
532 | pageX: null,
|
533 | |
534 |
|
535 |
|
536 |
|
537 | pageY: null
|
538 | };
|
539 | };
|
540 |
|
541 | Range.prototype._initHandle = function _initHandle(type) {
|
542 | var handle = this.addGroup();
|
543 | var layout = this.get('layout');
|
544 | var handleStyle = this.get('handleStyle');
|
545 | var img = handleStyle.img;
|
546 | var iconWidth = handleStyle.width;
|
547 | var iconHeight = handleStyle.height;
|
548 |
|
549 | var text = void 0;
|
550 | var handleIcon = void 0;
|
551 | var triggerCursor = void 0;
|
552 |
|
553 | if (layout === 'horizontal') {
|
554 | var _iconWidth = handleStyle.width;
|
555 | triggerCursor = 'ew-resize';
|
556 | handleIcon = handle.addShape('Image', {
|
557 | attrs: {
|
558 | x: -_iconWidth / 2,
|
559 | y: 0,
|
560 | width: _iconWidth,
|
561 | height: iconHeight,
|
562 | img: img,
|
563 | cursor: triggerCursor
|
564 | }
|
565 | });
|
566 | text = handle.addShape('Text', {
|
567 | attrs: Util.mix({
|
568 | x: type === 'min' ? -(_iconWidth / 2 + OFFSET) : _iconWidth / 2 + OFFSET,
|
569 | y: iconHeight / 2,
|
570 | textAlign: type === 'min' ? 'end' : 'start',
|
571 | textBaseline: 'middle',
|
572 | text: type === 'min' ? this.get('minText') : this.get('maxText'),
|
573 | cursor: triggerCursor
|
574 | }, this.get('textStyle'))
|
575 | });
|
576 | } else {
|
577 | triggerCursor = 'ns-resize';
|
578 | handleIcon = handle.addShape('Image', {
|
579 | attrs: {
|
580 | x: 0,
|
581 | y: -iconHeight / 2,
|
582 | width: iconWidth,
|
583 | height: iconHeight,
|
584 | img: img,
|
585 | cursor: triggerCursor
|
586 | }
|
587 | });
|
588 | text = handle.addShape('Text', {
|
589 | attrs: Util.mix({
|
590 | x: iconWidth / 2,
|
591 | y: type === 'min' ? iconHeight / 2 + OFFSET : -(iconHeight / 2 + OFFSET),
|
592 | textAlign: 'center',
|
593 | textBaseline: 'middle',
|
594 | text: type === 'min' ? this.get('minText') : this.get('maxText'),
|
595 | cursor: triggerCursor
|
596 | }, this.get('textStyle'))
|
597 | });
|
598 | }
|
599 |
|
600 | this.set(type + 'TextElement', text);
|
601 | this.set(type + 'IconElement', handleIcon);
|
602 | return handle;
|
603 | };
|
604 |
|
605 | Range.prototype._initSliderBackground = function _initSliderBackground() {
|
606 | var backgroundElement = this.addGroup();
|
607 | backgroundElement.initTransform();
|
608 | backgroundElement.translate(0, 0);
|
609 | backgroundElement.addShape('Rect', {
|
610 | attrs: Util.mix({
|
611 | x: 0,
|
612 | y: 0,
|
613 | width: this.get('width'),
|
614 | height: this.get('height')
|
615 | }, this.get('backgroundStyle'))
|
616 | });
|
617 | return backgroundElement;
|
618 | };
|
619 |
|
620 | Range.prototype._beforeRenderUI = function _beforeRenderUI() {
|
621 | var backgroundElement = this._initSliderBackground();
|
622 | var minHandleElement = this._initHandle('min');
|
623 | var maxHandleElement = this._initHandle('max');
|
624 | var middleHandleElement = this.addShape('rect', {
|
625 | attrs: this.get('middleAttr')
|
626 | });
|
627 |
|
628 | this.set('middleHandleElement', middleHandleElement);
|
629 | this.set('minHandleElement', minHandleElement);
|
630 | this.set('maxHandleElement', maxHandleElement);
|
631 | this.set('backgroundElement', backgroundElement);
|
632 | backgroundElement.set('zIndex', 0);
|
633 | middleHandleElement.set('zIndex', 1);
|
634 | minHandleElement.set('zIndex', 2);
|
635 | maxHandleElement.set('zIndex', 2);
|
636 | middleHandleElement.attr('cursor', 'move');
|
637 | this.sort();
|
638 | };
|
639 |
|
640 | Range.prototype._renderUI = function _renderUI() {
|
641 | if (this.get('layout') === 'horizontal') {
|
642 | this._renderHorizontal();
|
643 | } else {
|
644 | this._renderVertical();
|
645 | }
|
646 | };
|
647 |
|
648 | Range.prototype._transform = function _transform(layout) {
|
649 | var range = this.get('range');
|
650 | var minRatio = range[0] / 100;
|
651 | var maxRatio = range[1] / 100;
|
652 | var width = this.get('width');
|
653 | var height = this.get('height');
|
654 | var minHandleElement = this.get('minHandleElement');
|
655 | var maxHandleElement = this.get('maxHandleElement');
|
656 | var middleHandleElement = this.get('middleHandleElement');
|
657 | if (minHandleElement.resetMatrix) {
|
658 | minHandleElement.resetMatrix();
|
659 | maxHandleElement.resetMatrix();
|
660 | } else {
|
661 | minHandleElement.initTransform();
|
662 | maxHandleElement.initTransform();
|
663 | }
|
664 | if (layout === 'horizontal') {
|
665 | middleHandleElement.attr({
|
666 | x: width * minRatio,
|
667 | y: 0,
|
668 | width: (maxRatio - minRatio) * width,
|
669 | height: height
|
670 | });
|
671 |
|
672 | minHandleElement.translate(minRatio * width, 0);
|
673 | maxHandleElement.translate(maxRatio * width, 0);
|
674 | } else {
|
675 | middleHandleElement.attr({
|
676 | x: 0,
|
677 | y: height * (1 - maxRatio),
|
678 | width: width,
|
679 | height: (maxRatio - minRatio) * height
|
680 | });
|
681 | minHandleElement.translate(0, (1 - minRatio) * height);
|
682 | maxHandleElement.translate(0, (1 - maxRatio) * height);
|
683 | }
|
684 | };
|
685 |
|
686 | Range.prototype._renderHorizontal = function _renderHorizontal() {
|
687 | this._transform('horizontal');
|
688 | };
|
689 |
|
690 | Range.prototype._renderVertical = function _renderVertical() {
|
691 | this._transform('vertical');
|
692 | };
|
693 |
|
694 | Range.prototype._bindUI = function _bindUI() {
|
695 | this.on('mousedown', Util.wrapBehavior(this, '_onMouseDown'));
|
696 | };
|
697 |
|
698 | Range.prototype._isElement = function _isElement(target, name) {
|
699 |
|
700 | var element = this.get(name);
|
701 | if (target === element) {
|
702 | return true;
|
703 | }
|
704 | if (element.isGroup) {
|
705 | var elementChildren = element.get('children');
|
706 | return elementChildren.indexOf(target) > -1;
|
707 | }
|
708 | return false;
|
709 | };
|
710 |
|
711 | Range.prototype._getRange = function _getRange(diff, range) {
|
712 | var rst = diff + range;
|
713 | rst = rst > 100 ? 100 : rst;
|
714 | rst = rst < 0 ? 0 : rst;
|
715 | return rst;
|
716 | };
|
717 |
|
718 | Range.prototype._limitRange = function _limitRange(diff, limit, range) {
|
719 | range[0] = this._getRange(diff, range[0]);
|
720 | range[1] = range[0] + limit;
|
721 | if (range[1] > 100) {
|
722 | range[1] = 100;
|
723 | range[0] = range[1] - limit;
|
724 | }
|
725 | };
|
726 |
|
727 | Range.prototype._updateStatus = function _updateStatus(dim, ev) {
|
728 | var totalLength = dim === 'x' ? this.get('width') : this.get('height');
|
729 | dim = Util.upperFirst(dim);
|
730 | var range = this.get('range');
|
731 | var page = this.get('page' + dim);
|
732 | var currentTarget = this.get('currentTarget');
|
733 | var rangeStash = this.get('rangeStash');
|
734 | var layout = this.get('layout');
|
735 | var sign = layout === 'vertical' ? -1 : 1;
|
736 | var currentPage = ev['page' + dim];
|
737 | var diffPage = currentPage - page;
|
738 | var diffRange = diffPage / totalLength * 100 * sign;
|
739 | var diffStashRange = void 0;
|
740 |
|
741 | var minRange = this.get('minRange');
|
742 | var maxRange = this.get('maxRange');
|
743 |
|
744 | if (range[1] <= range[0]) {
|
745 | if (this._isElement(currentTarget, 'minHandleElement') || this._isElement(currentTarget, 'maxHandleElement')) {
|
746 | range[0] = this._getRange(diffRange, range[0]);
|
747 | range[1] = this._getRange(diffRange, range[0]);
|
748 | }
|
749 | } else {
|
750 | if (this._isElement(currentTarget, 'minHandleElement')) {
|
751 | range[0] = this._getRange(diffRange, range[0]);
|
752 | if (minRange) {
|
753 |
|
754 | if (range[1] - range[0] <= minRange) {
|
755 | this._limitRange(diffRange, minRange, range);
|
756 | }
|
757 | }
|
758 |
|
759 | if (maxRange) {
|
760 |
|
761 | if (range[1] - range[0] >= maxRange) {
|
762 | this._limitRange(diffRange, maxRange, range);
|
763 | }
|
764 | }
|
765 | }
|
766 | if (this._isElement(currentTarget, 'maxHandleElement')) {
|
767 | range[1] = this._getRange(diffRange, range[1]);
|
768 |
|
769 | if (minRange) {
|
770 |
|
771 | if (range[1] - range[0] <= minRange) {
|
772 | this._limitRange(diffRange, minRange, range);
|
773 | }
|
774 | }
|
775 |
|
776 | if (maxRange) {
|
777 |
|
778 | if (range[1] - range[0] >= maxRange) {
|
779 | this._limitRange(diffRange, maxRange, range);
|
780 | }
|
781 | }
|
782 | }
|
783 | }
|
784 |
|
785 | if (this._isElement(currentTarget, 'middleHandleElement')) {
|
786 | diffStashRange = rangeStash[1] - rangeStash[0];
|
787 | this._limitRange(diffRange, diffStashRange, range);
|
788 | }
|
789 |
|
790 | this.emit('sliderchange', {
|
791 | range: range
|
792 | });
|
793 |
|
794 | this.set('page' + dim, currentPage);
|
795 | this._renderUI();
|
796 | this.get('canvas').draw();
|
797 | return;
|
798 | };
|
799 |
|
800 | Range.prototype._onMouseDown = function _onMouseDown(ev) {
|
801 | var currentTarget = ev.currentTarget;
|
802 | var originEvent = ev.event;
|
803 | var range = this.get('range');
|
804 | originEvent.stopPropagation();
|
805 | originEvent.preventDefault();
|
806 | this.set('pageX', originEvent.pageX);
|
807 | this.set('pageY', originEvent.pageY);
|
808 | this.set('currentTarget', currentTarget);
|
809 | this.set('rangeStash', [range[0], range[1]]);
|
810 | this._bindCanvasEvents();
|
811 | };
|
812 |
|
813 | Range.prototype._bindCanvasEvents = function _bindCanvasEvents() {
|
814 | var containerDOM = this.get('canvas').get('containerDOM');
|
815 | this.onMouseMoveListener = DomUtil.addEventListener(containerDOM, 'mousemove', Util.wrapBehavior(this, '_onCanvasMouseMove'));
|
816 | this.onMouseUpListener = DomUtil.addEventListener(containerDOM, 'mouseup', Util.wrapBehavior(this, '_onCanvasMouseUp'));
|
817 |
|
818 | this.onMouseLeaveListener = DomUtil.addEventListener(containerDOM, 'mouseleave', Util.wrapBehavior(this, '_onCanvasMouseUp'));
|
819 | };
|
820 |
|
821 | Range.prototype._onCanvasMouseMove = function _onCanvasMouseMove(ev) {
|
822 | var layout = this.get('layout');
|
823 | if (layout === 'horizontal') {
|
824 | this._updateStatus('x', ev);
|
825 | } else {
|
826 | this._updateStatus('y', ev);
|
827 | }
|
828 | };
|
829 |
|
830 | Range.prototype._onCanvasMouseUp = function _onCanvasMouseUp() {
|
831 | this._removeDocumentEvents();
|
832 | };
|
833 |
|
834 | Range.prototype._removeDocumentEvents = function _removeDocumentEvents() {
|
835 | this.onMouseMoveListener.remove();
|
836 | this.onMouseUpListener.remove();
|
837 | this.onMouseLeaveListener.remove();
|
838 | };
|
839 |
|
840 | return Range;
|
841 | }(Group);
|
842 |
|
843 | module.exports = Range;
|
844 |
|
845 | })
|
846 | ]);
|
847 | }); |
\ | No newline at end of file |