demo.min.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function")}}var Actor=function(){function Actor(ctx,item,pre,opt){_classCallCheck(this,Actor);this.ctx=ctx;this.x=0;this.y=0;var measureText=ctx.measureText(item.valueDisplay);this.w=measureText.width;this.h=parseInt(opt.font,10);this.item=item;this.pre=pre;this.opt=opt}_createClass(Actor,[{key:"render",value:function render(){var ctx=this.ctx,item=this.item,pre=this.pre,opt=this.opt,x=this.x,y=this.y,w=this.w,h=this.h;var radius=h/2+opt.padding;var leftX=x-w/2-radius-5;var topY=y-radius;if(pre){ctx.beginPath();ctx.moveTo(pre.x,pre.y);ctx.lineTo(x,y);ctx.strokeStyle=opt.color;ctx.lineWidth=opt.lineWidth;ctx.stroke()}this.roundRect(leftX,topY,w+radius*2+10,radius*2,radius);ctx.fillStyle=opt.color;ctx.fill();ctx.textAlign="center";ctx.fillStyle=opt.valueColor;ctx.fillText(item.valueDisplay,x,y+h/3)}},{key:"roundRect",value:function roundRect(x,y,w,h,r){if(w<2*r){r=w/2}if(h<2*r){r=h/2}this.ctx.beginPath();this.ctx.moveTo(x+r,y);this.ctx.arcTo(x+w,y,x+w,y+h,r);this.ctx.arcTo(x+w,y+h,x,y+h,r);this.ctx.arcTo(x,y+h,x,y,r);this.ctx.arcTo(x,y,x+w,y,r);this.ctx.closePath()}}]);return Actor}();module.exports=Actor},{}],2:[function(require,module,exports){"use strict";var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"])_i["return"]()}finally{if(_d)throw _e}}return _arr}return function(arr,i){if(Array.isArray(arr)){return arr}else if(Symbol.iterator in Object(arr)){return sliceIterator(arr,i)}else{throw new TypeError("Invalid attempt to destructure non-iterable instance")}}}();var List2graph=require("./list2graph");var params=function(){var hash={};var pairs=window.location.search.slice(1).split("&");var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=pairs[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var x=_step.value;var _x$split=x.split("="),_x$split2=_slicedToArray(_x$split,2),k=_x$split2[0],v=_x$split2[1];hash[k]=decodeURIComponent(v)}}catch(err){_didIteratorError=true;_iteratorError=err}finally{try{if(!_iteratorNormalCompletion&&_iterator.return){_iterator.return()}}finally{if(_didIteratorError){throw _iteratorError}}}return hash}();var num=Math.max(1,params.num|0);var randomItem=function randomItem(){return{name:Math.random().toString().slice(2,8),value:(Math.random()*400|0)/100}};var main=function main(){var canvas=document.getElementById("myCanvas");var addBtn=document.getElementById("add-item");var resetBtn=document.getElementById("reset-btn");var splitBtn=document.getElementById("split-enter");var splitInput=document.getElementById("split-value");var list=[];for(var i=0;i<num;i+=1){list.push(randomItem())}var list2graph=new List2graph(canvas,list,{valueFormat:function valueFormat(x){return""+Math.floor(x*100)/100}});addBtn.onclick=function(){list2graph.add(randomItem())};splitBtn.onclick=function(){list2graph.split(splitInput.value|0)};resetBtn.onclick=function(){var ls=[];for(var _i=0;_i<num;_i+=1){ls.push(randomItem())}list2graph.reset(ls)}};main()},{"./list2graph":3}],3:[function(require,module,exports){"use strict";var Actor=require("./actor");var defineOption={range:[1,Infinity],split:2,width:1200,leftWidth:120,bottomHeight:60,maxLength:20,valueFormat:function valueFormat(x){return x},nameFormat:function nameFormat(x){return x},tableSurplus:10,tableBorderWidth:1,animationMS:1e3,color:"#43e28b",tableColor:"#363e63",nameFont:"24px serif",rangeFont:"24px serif",nameColor:"#7685bc",rangeColor:"#7685bc",valueColor:"#ffffff",padding:10,font:"24px serif",lineHeight:60,lineWidth:4};function List2graph(canvas,list,option){var opt=Object.assign({},defineOption,option);var ctx=canvas.getContext("2d");var trans=function trans(item){var obj={};obj.name=item.name;obj.value=item.value;obj.nameDisplay=opt.nameFormat(item.name,item);obj.valueDisplay=opt.valueFormat(item.value,item);return obj};var data=list.slice(0,opt.maxLength).map(trans);var actors=[];var status="ready";var lastRequestAnimationAt=Date.now();var dt=1;var distance=opt.width-opt.leftWidth>>1;var aVelocity=distance*2/(opt.animationMS*opt.animationMS);var velocity=aVelocity*opt.animationMS;var beginX=opt.leftWidth+(distance>>1);var height=opt.lineHeight*opt.maxLength+opt.bottomHeight;var nameHeight=parseInt(opt.nameFont,10);var rangeHeight=parseInt(opt.rangeFont,10);var ready=function ready(){height=opt.lineHeight*data.length+opt.bottomHeight;canvas.width=opt.width;canvas.height=height;canvas.style.width=opt.width>>1;canvas.style.height=height>>1;actors.length=0;for(var i=0;i<data.length;i+=1){var actor=new Actor(ctx,data[i],actors[i-1],opt);actor.x=beginX;actor.y=i*opt.lineHeight+(opt.lineHeight>>1);actor.isRight=opt.split<=data[i].value;actors.push(actor)}status="animation";dx=0;velocity=aVelocity*opt.animationMS};var dx=0;var update=function update(){dx+=velocity*dt;velocity-=aVelocity*dt;if(velocity<=0)dx=distance;var x=beginX+dx;for(var i=0;i<data.length;i+=1){var actor=actors[i];if(!actor.isRight)continue;actor.x=x}};var drawExtra=function drawExtra(){ctx.save();ctx.strokeStyle=opt.tableColor;ctx.lineWidth=opt.tableBorderWidth;ctx.beginPath();var leftX=opt.leftWidth;for(var i=0;i<=data.length;i+=1){ctx.moveTo(leftX-opt.tableSurplus,i*opt.lineHeight+opt.tableBorderWidth/2);ctx.lineTo(opt.width,i*opt.lineHeight+opt.tableBorderWidth/2)}ctx.moveTo(leftX,0);ctx.lineTo(leftX,opt.lineHeight*data.length+opt.tableSurplus);ctx.moveTo(opt.leftWidth+distance,0);ctx.lineTo(opt.leftWidth+distance,opt.lineHeight*data.length+opt.tableSurplus);ctx.moveTo(opt.width-(opt.tableBorderWidth>>1),0);ctx.lineTo(opt.width-(opt.tableBorderWidth>>1),opt.lineHeight*data.length+opt.tableSurplus);ctx.moveTo(beginX,data.length*opt.lineHeight);ctx.lineTo(beginX,data.length*opt.lineHeight+opt.tableSurplus);ctx.moveTo(beginX+distance,data.length*opt.lineHeight);ctx.lineTo(beginX+distance,data.length*opt.lineHeight+opt.tableSurplus);ctx.textAlign="right";ctx.font=opt.nameFont;ctx.fillStyle=opt.nameColor;for(var _i=0;_i<data.length;_i+=1){ctx.fillText(data[_i].nameDisplay,opt.leftWidth-opt.tableSurplus-6,(_i+1)*opt.lineHeight+nameHeight/3-(opt.lineHeight>>1))}ctx.fillStyle=opt.rangeColor;ctx.font=opt.rangeFont;ctx.textAlign="center";ctx.fillText("["+opt.range[0]+", "+opt.split+")",beginX,data.length*opt.lineHeight+opt.tableSurplus+rangeHeight);ctx.fillText("["+opt.split+", "+(opt.range[1]===Infinity?"♾":opt.range[1])+")",beginX+distance,data.length*opt.lineHeight+opt.tableSurplus+rangeHeight);ctx.stroke();ctx.restore()};var render=function render(){requestAnimationFrame(render);var now=Date.now();dt=now-lastRequestAnimationAt;lastRequestAnimationAt=now;if(status==="stable")return;if(status==="ready"){ready();return}update();ctx.clearRect(0,0,opt.width,height);drawExtra();ctx.save();ctx.font=opt.font;for(var i=actors.length-1;0<=i;i-=1){actors[i].render()}ctx.restore();if(velocity<=0){velocity=aVelocity*opt.animationMS;dx=0;status="stable"}};requestAnimationFrame(render);var add=function add(item){data.unshift(trans(item));if(opt.maxLength<data.length)data.length=opt.maxLength;status="ready"};var reset=function reset(ls){data=ls.slice(0,opt.maxLength).map(trans);status="ready"};var split=function split(value){if(value==null)return opt.split;if(value<opt.range[0]||opt.range[1]<value)throw Error("分割点不合法, 必须在 "+opt.range+" 之间");opt.split=value;status="ready";return value};return{add:add,split:split,reset:reset}}module.exports=List2graph},{"./actor":1}]},{},[2]);