| 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Slider=e():t.Slider=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){var n=i(1);window&&!window.G2&&console.err("Please load the G2 script first!"),t.exports=n},function(t,e,i){var n=window&&window.G2,r=n.Chart,a=n.Util,s=n.G,o=n.Global,h=s.Canvas,l=s.DomUtil,d=i(2),u=function(){t.prototype._initProps=function(){this.height=26,this.width="auto",this.padding=o.plotCfg.padding,this.container=null,this.xAxis=null,this.yAxis=null,this.fillerStyle={fill:"#BDCCED",fillOpacity:.3},this.backgroundStyle={stroke:"#CCD6EC",fill:"#CCD6EC",fillOpacity:.3,lineWidth:1},this.range=[0,100],this.layout="horizontal",this.textStyle={fill:"#545454"},this.handleStyle={img:"https://gw.alipayobjects.com/zos/rmsportal/QXtfhORGlDuRvLXFzpsQ.png",width:5},this.backgroundChart={type:["area"],color:"#CCD6EC"}};function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this._initProps(),a.deepMix(this,e);var i=this.container;if(!i)throw new Error("Please specify the container for the Slider!");a.isString(i)?this.domContainer=document.getElementById(i):this.domContainer=i,this.handleStyle=a.mix({width:this.height,height:this.height},this.handleStyle),"auto"===this.width&&window.addEventListener("resize",a.wrapBehavior(this,"_initForceFitEvent"))}return t.prototype._initForceFitEvent=function(){var t=setTimeout(a.wrapBehavior(this,"forceFit"),200);clearTimeout(this.resizeTimer),this.resizeTimer=t},t.prototype.forceFit=function(){if(this&&!this.destroyed){var t=l.getWidth(this.domContainer),e=this.height;if(t!==this.domWidth){var i=this.canvas;i.changeSize(t,e),this.bgChart&&this.bgChart.changeWidth(t),i.clear(),this._initWidth(),this._initSlider(),this._bindEvent(),i.draw()}}},t.prototype._initWidth=function(){var t=void 0;t="auto"===this.width?l.getWidth(this.domContainer):this.width,this.domWidth=t;var e=a.toAllPadding(this.padding);"horizontal"===this.layout?(this.plotWidth=t-e[1]-e[3],this.plotPadding=e[3],this.plotHeight=this.height):"vertical"===this.layout&&(this.plotWidth=this.width,this.plotHeight=this.height-e[0]-e[2],this.plotPadding=e[0])},t.prototype.render=function(){this._initWidth(),this._initCanvas(),this._initBackground(),this._initSlider(),this._bindEvent(),this.canvas.draw()},t.prototype.changeData=function(t){this.data=t,this.repaint()},t.prototype.destroy=function(){clearTimeout(this.resizeTimer);this.rangeElement.off("sliderchange"),this.bgChart&&this.bgChart.destroy(),this.canvas.destroy();for(var t=this.domContainer;t.hasChildNodes();)t.removeChild(t.firstChild);window.removeEventListener("resize",a.getWrapBehavior(this,"_initForceFitEvent")),this.destroyed=!0},t.prototype.clear=function(){this.canvas.clear(),this.bgChart&&this.bgChart.destroy(),this.bgChart=null,this.scale=null,this.canvas.draw()},t.prototype.repaint=function(){this.clear(),this.render()},t.prototype._initCanvas=function(){var t=this.domWidth,e=this.height,i=new h({width:t,height:e,containerDOM:this.domContainer,capture:!1}),n=i.get("el");n.style.position="absolute",n.style.top=0,n.style.left=0,n.style.zIndex=3,this.canvas=i},t.prototype._initBackground=function(){var t,e=this.data,i=this.xAxis,n=this.yAxis,s=a.deepMix((t={},t[""+i]={range:[0,1]},t),this.scales);if(!e)throw new Error("Please specify the data!");if(!i)throw new Error("Please specify the xAxis!");if(!n)throw new Error("Please specify the yAxis!");var o=this.backgroundChart,h=o.type,l=o.color;a.isArray(h)||(h=[h]);var d=a.toAllPadding(this.padding),u=new r({container:this.container,width:this.domWidth,height:this.height,padding:[0,d[1],0,d[3]],animate:!1});u.source(e),u.scale(s),u.axis(!1),u.tooltip(!1),u.legend(!1),a.each(h,function(t){u[t]().position(i+"*"+n).color(l).opacity(1)}),u.render(),this.bgChart=u,this.scale="horizontal"===this.layout?u.getXScale():u.getYScales()[0],"vertical"===this.layout&&u.destroy()},t.prototype._initRange=function(){var t=this.start,e=this.end,i=this.scale,n=0,r=1;t&&(n=i.scale(i.translate(t))),e&&(r=i.scale(i.translate(e)));var a=this.minSpan,s=this.maxSpan,o=0;if("time"===i.type||"timeCat"===i.type){var h=i.values,l=h[0];o=h[h.length-1]-l}else i.isLinear&&(o=i.max-i.min);o&&a&&(this.minRange=a/o*100),o&&s&&(this.maxRange=s/o*100);var d=[100*n,100*r];return this.range=d,d},t.prototype._getHandleValue=function(t){var e=this.range,i=e[0]/100,n=e[1]/100,r=this.scale;return"min"===t?this.start?this.start:r.invert(i):this.end?this.end:r.invert(n)},t.prototype._initSlider=function(){var t=this.canvas,e=this._initRange(),i=this.scale,n=t.addGroup(d,{middleAttr:this.fillerStyle,range:e,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:i.getText(this._getHandleValue("min")),maxText:i.getText(this._getHandleValue("max"))});"horizontal"===this.layout?n.translate(this.plotPadding,0):"vertical"===this.layout&&n.translate(0,this.plotPadding),this.rangeElement=n},t.prototype._bindEvent=function(){var t=this;t.rangeElement.on("sliderchange",function(e){var i=e.range,n=i[0]/100,r=i[1]/100;t._updateElement(n,r)})},t.prototype._updateElement=function(t,e){var i=this.scale,n=this.rangeElement,r=n.get("minTextElement"),a=n.get("maxTextElement"),s=i.invert(t),o=i.invert(e),h=i.getText(s),l=i.getText(o);r.attr("text",h),a.attr("text",l),this.start=h,this.end=l,this.onChange&&this.onChange({startText:h,endText:l,startValue:s,endValue:o})},t}();t.exports=u},function(t,e){var i=window&&window.G2,n=i.Util,r=i.G,a=r.Group,s=r.DomUtil,o=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t);function e(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,t.apply(this,arguments))}return e.prototype.getDefaultCfg=function(){return{range:null,middleAttr:null,backgroundElement:null,minHandleElement:null,maxHandleElement:null,middleHandleElement:null,currentTarget:null,layout:"vertical",width:null,height:null,pageX:null,pageY:null}},e.prototype._initHandle=function(t){var e=this.addGroup(),i=this.get("layout"),r=this.get("handleStyle"),a=r.img,s=r.width,o=r.height,h=void 0,l=void 0,d=void 0;if("horizontal"===i){var u=r.width;d="ew-resize",l=e.addShape("Image",{attrs:{x:-u/2,y:0,width:u,height:o,img:a,cursor:d}}),h=e.addShape("Text",{attrs:n.mix({x:"min"===t?-(u/2+5):u/2+5,y:o/2,textAlign:"min"===t?"end":"start",textBaseline:"middle",text:"min"===t?this.get("minText"):this.get("maxText"),cursor:d},this.get("textStyle"))})}else d="ns-resize",l=e.addShape("Image",{attrs:{x:0,y:-o/2,width:s,height:o,img:a,cursor:d}}),h=e.addShape("Text",{attrs:n.mix({x:s/2,y:"min"===t?o/2+5:-(o/2+5),textAlign:"center",textBaseline:"middle",text:"min"===t?this.get("minText"):this.get("maxText"),cursor:d},this.get("textStyle"))});return this.set(t+"TextElement",h),this.set(t+"IconElement",l),e},e.prototype._initSliderBackground=function(){var t=this.addGroup();return t.initTransform(),t.translate(0,0),t.addShape("Rect",{attrs:n.mix({x:0,y:0,width:this.get("width"),height:this.get("height")},this.get("backgroundStyle"))}),t},e.prototype._beforeRenderUI=function(){var t=this._initSliderBackground(),e=this._initHandle("min"),i=this._initHandle("max"),n=this.addShape("rect",{attrs:this.get("middleAttr")});this.set("middleHandleElement",n),this.set("minHandleElement",e),this.set("maxHandleElement",i),this.set("backgroundElement",t),t.set("zIndex",0),n.set("zIndex",1),e.set("zIndex",2),i.set("zIndex",2),n.attr("cursor","move"),this.sort()},e.prototype._renderUI=function(){"horizontal"===this.get("layout")?this._renderHorizontal():this._renderVertical()},e.prototype._transform=function(t){var e=this.get("range"),i=e[0]/100,n=e[1]/100,r=this.get("width"),a=this.get("height"),s=this.get("minHandleElement"),o=this.get("maxHandleElement"),h=this.get("middleHandleElement");s.resetMatrix?(s.resetMatrix(),o.resetMatrix()):(s.initTransform(),o.initTransform()),"horizontal"===t?(h.attr({x:r*i,y:0,width:(n-i)*r,height:a}),s.translate(i*r,0),o.translate(n*r,0)):(h.attr({x:0,y:a*(1-n),width:r,height:(n-i)*a}),s.translate(0,(1-i)*a),o.translate(0,(1-n)*a))},e.prototype._renderHorizontal=function(){this._transform("horizontal")},e.prototype._renderVertical=function(){this._transform("vertical")},e.prototype._bindUI=function(){this.on("mousedown",n.wrapBehavior(this,"_onMouseDown"))},e.prototype._isElement=function(t,e){var i=this.get(e);if(t===i)return!0;if(i.isGroup){return i.get("children").indexOf(t)>-1}return!1},e.prototype._getRange=function(t,e){var i=t+e;return i=(i=i>100?100:i)<0?0:i},e.prototype._limitRange=function(t,e,i){i[0]=this._getRange(t,i[0]),i[1]=i[0]+e,i[1]>100&&(i[1]=100,i[0]=i[1]-e)},e.prototype._updateStatus=function(t,e){var i="x"===t?this.get("width"):this.get("height");t=n.upperFirst(t);var r=this.get("range"),a=this.get("page"+t),s=this.get("currentTarget"),o=this.get("rangeStash"),h="vertical"===this.get("layout")?-1:1,l=e["page"+t],d=(l-a)/i*100*h,u=void 0,p=this.get("minRange"),g=this.get("maxRange");r[1]<=r[0]?(this._isElement(s,"minHandleElement")||this._isElement(s,"maxHandleElement"))&&(r[0]=this._getRange(d,r[0]),r[1]=this._getRange(d,r[0])):(this._isElement(s,"minHandleElement")&&(r[0]=this._getRange(d,r[0]),p&&r[1]-r[0]<=p&&this._limitRange(d,p,r),g&&r[1]-r[0]>=g&&this._limitRange(d,g,r)),this._isElement(s,"maxHandleElement")&&(r[1]=this._getRange(d,r[1]),p&&r[1]-r[0]<=p&&this._limitRange(d,p,r),g&&r[1]-r[0]>=g&&this._limitRange(d,g,r))),this._isElement(s,"middleHandleElement")&&(u=o[1]-o[0],this._limitRange(d,u,r)),this.emit("sliderchange",{range:r}),this.set("page"+t,l),this._renderUI(),this.get("canvas").draw()},e.prototype._onMouseDown=function(t){var e=t.currentTarget,i=t.event,n=this.get("range");i.stopPropagation(),i.preventDefault(),this.set("pageX",i.pageX),this.set("pageY",i.pageY),this.set("currentTarget",e),this.set("rangeStash",[n[0],n[1]]),this._bindCanvasEvents()},e.prototype._bindCanvasEvents=function(){var t=this.get("canvas").get("containerDOM");this.onMouseMoveListener=s.addEventListener(t,"mousemove",n.wrapBehavior(this,"_onCanvasMouseMove")),this.onMouseUpListener=s.addEventListener(t,"mouseup",n.wrapBehavior(this,"_onCanvasMouseUp")),this.onMouseLeaveListener=s.addEventListener(t,"mouseleave",n.wrapBehavior(this,"_onCanvasMouseUp"))},e.prototype._onCanvasMouseMove=function(t){"horizontal"===this.get("layout")?this._updateStatus("x",t):this._updateStatus("y",t)},e.prototype._onCanvasMouseUp=function(){this._removeDocumentEvents()},e.prototype._removeDocumentEvents=function(){this.onMouseMoveListener.remove(),this.onMouseUpListener.remove(),this.onMouseLeaveListener.remove()},e}(a);t.exports=o}])}); |