Minder.min.js 19 KB

1
  1. MWF.xApplication.Execution=MWF.xApplication.Execution||{};MWF.xApplication.Execution.Minder=new Class({Extends:MWF.widget.Common,Implements:[Options,Events],options:{style:"default",template:"default",theme:"fresh-blue",hasNavi:true,align:"center"},initialize:function(container,app,data,options){this.setOptions(options);this.container=container;this.app=app;this.lp=this.app.lp.minder;this.actions=this.app.restActions;this.path="/x_component_Execution/$Minder/";this.cssPath=this.path+this.options.style+"/css.wcss";this._loadCss();this.data=data},load:function(){this.loadResource(function(){this.loadKityMinder(this.data)}.bind(this));this.attachEvent()},reload:function(data){this.container.empty();this.loadKityMinder(data||this.data)},refresh:function(){this.moveToCenter()},destroy:function(){if(this.navi){this.navi.destroy();delete this.navi}if(this.km)delete this.km;delete this},loadResource:function(callback){var kityminderPath="/x_desktop/res/framework/kityminder/";COMMON.AjaxModule.loadCss(kityminderPath+"core/src/kityminder.css",function(){COMMON.AjaxModule.load("kity",function(){COMMON.AjaxModule.load("kityminder",function(){if(callback)callback()}.bind(this))}.bind(this))}.bind(this))},loadKityMinder:function(data){var _self=this;this.isMovingCenter=true;var km=this.km=new kityminder.Minder;km.renderTo(this.container);data.theme=data.theme||this.options.theme;data.template=data.template||this.options.template;this.deepestLevel=0;km.on("import",function(e){if(!_self.alreadyBind){var nodes=km.getAllNode();nodes.forEach(function(node){var level=node.getLevel();_self.deepestLevel=level>_self.deepestLevel?level:_self.deepestLevel;_self.fireEvent("postLoadNode",node)});_self.alreadyBind=true;if(_self.options.hasNavi)_self.loadNavi();_self.fireEvent("postLoad",_self)}});km.on("layoutallfinish",function(){if(_self.templateChanged||_self.isMovingCenter){_self.moveToCenter();_self.templateChanged=false;_self.isMovingCenter=false}});km.importJson(data);km.execCommand("hand")},loadNavi:function(container){this.navi=new MWF.xApplication.Execution.Minder.Navigation(container||this.container,this,this.km,this.app,this.css);this.navi.load()},moveToCenter:function(){this._moveToCenter()},_moveToCenter:function(){if(this.options.align!="center")return;var minderView=this.km.getRenderContainer().getRenderBox("screen");var containerView=this.container.getCoordinates();var root=this.km.getRoot();var rootView=root.getRenderContainer().getRenderBox("screen");var rootClientTop=rootView.top-minderView.top;var rootClientLeft=rootView.left-minderView.left;var rootChildrenLength=root.getChildren().length;var template=this.km.queryCommandValue("template");var left,top,isCamera=false;if(minderView.width>containerView.width){if(template=="fish-bone"||rootChildrenLength<2){left=50}else{isCamera=true}}else{left=parseInt((containerView.width-minderView.width)/2+rootClientLeft+50)}if(minderView.height>containerView.height){if(rootClientTop>containerView.height){if(template=="fish-bone"){top=containerView.height-rootView.height}else if(rootChildrenLength<2){top=parseInt(containerView.width/2)}else{isCamera=true}}else{top=rootClientTop+50}}else{top=parseInt((containerView.height-minderView.height)/2)+rootClientTop}if(isCamera){this.km.execCommand("camera",this.km.getRoot(),600)}else{var dragger=this.km.getViewDragger();dragger.moveTo(new kity.Point(left,top),300)}},attachEvent:function(){this.container.addEvent("mousewheel",function(ev){if(ev.wheel==1){this.km.execCommand("zoomIn");if(this.navi&&this.navi.navZoompanIndicator){var marginTop=parseInt(this.navi.navZoompanIndicator.getStyle("margin-top"));if(marginTop>0){this.navi.navZoompanIndicator.setStyle("margin-top",marginTop-10+"px")}}}else{this.km.execCommand("zoomOut");if(this.navi&&this.navi.navZoompanIndicator){var totalHeight=parseInt(this.navi.navZoompan.getStyle("height"));var marginTop=parseInt(this.navi.navZoompanIndicator.getStyle("margin-top"));if(marginTop<totalHeight){this.navi.navZoompanIndicator.setStyle("margin-top",marginTop+10+"px")}}}}.bind(this))}});MWF.xApplication.Execution.Minder.Navigation=new Class({Implements:[Options,Events],initialize:function(container,minder,km,app,css){this.container=container;this.app=app;this.lp=this.app.lp.minder;this.actions=this.app.restActions;this.css=css;this.minder=minder;this.km=km},load:function(callback){this.createNavigation()},destroy:function(){this.node.destroy();delete this},createNavigation:function(){this.node=new Element("div",{styles:this.css.nav}).inject(this.container);this.navZoomIn=new Element("div",{styles:this.css.navButton,title:this.lp.navZoomin}).inject(this.node);new Element("div",{styles:this.css.navZoominIcon}).inject(this.navZoomIn);this.navZoomIn.addEvent("click",function(){this.km.execCommand("zoomIn");var marginTop=parseInt(this.navZoompanIndicator.getStyle("margin-top"));if(marginTop>0){this.navZoompanIndicator.setStyle("margin-top",marginTop-10+"px")}}.bind(this));this.navZoompan=new Element("div",{styles:this.css.navZoompan}).inject(this.node);this.navZoompanOrigin=new Element("div",{styles:this.css.navZoompanOrigin}).inject(this.navZoompan);this.navZoompanOrigin.addEvent("click",function(){this.km.execCommand("zoom",100);this.navZoompanIndicator.setStyle("margin-top","30px")}.bind(this));this.navZoompanIndicator=new Element("div",{styles:this.css.navZoompanIndicator}).inject(this.navZoompan);this.navZoomout=new Element("div",{styles:this.css.navButton,title:this.lp.navZoomout}).inject(this.node);new Element("div",{styles:this.css.navZoomoutIcon}).inject(this.navZoomout);this.navZoomout.addEvent("click",function(){this.km.execCommand("zoomOut");var totalHeight=parseInt(this.navZoompan.getStyle("height"));var marginTop=parseInt(this.navZoompanIndicator.getStyle("margin-top"));if(marginTop<totalHeight){this.navZoompanIndicator.setStyle("margin-top",marginTop+10+"px")}}.bind(this));this.navCameraNode=new Element("div",{styles:this.css.navButton,title:this.lp.navCamera}).inject(this.node);new Element("div",{styles:this.css.navCameraIcon}).inject(this.navCameraNode);this.navCameraNode.addEvent("click",function(){this.km.execCommand("camera",this.km.getRoot(),600)}.bind(this));this.navExpandNode=new Element("div",{styles:this.css.navButton,title:"展开节点"}).inject(this.node);new Element("div",{styles:this.css.navExpandIcon}).inject(this.navExpandNode);this.navExpandNode.addEvent("click",function(ev){this.showExpendNode(ev);ev.stopPropagation()}.bind(this));this.navTrigger=new Element("div",{styles:this.css.navButton,title:this.lp.navTrigger}).inject(this.node);new Element("div",{styles:this.css.navTriggerIcon}).inject(this.navTrigger);this.navTrigger.addEvent("click",function(){this.toggleOpenPreViewer()}.bind(this));this.createrPreViewer();this.navMoveNode=new Element("div",{styles:this.css.navButton,title:this.lp.allowDrag}).inject(this.node);this.navMoveNode.setStyles(this.css.navButton_over);this.moveOpen=true;new Element("div",{styles:this.css.navMoveIcon}).inject(this.navMoveNode);this.navMoveNode.addEvent("click",function(){this.moveOpen=!this.moveOpen;if(this.moveOpen){this.navMoveNode.setStyles(this.css.navButton_over)}else{this.navMoveNode.setStyles(this.css.navButton)}this.km.execCommand("hand")}.bind(this));this.navTemplateNode=new Element("div",{styles:this.css.navButton,title:this.lp.changeTemplate}).inject(this.node);new Element("div",{styles:this.css.navTemplateIcon}).inject(this.navTemplateNode);this.navTemplateNode.addEvent("click",function(ev){this.selectTemplate(ev);ev.stopPropagation()}.bind(this));this.navSearchNode=new Element("div",{styles:this.css.navButton,title:this.lp.search}).inject(this.node);new Element("div",{styles:this.css.navSearchIcon}).inject(this.navSearchNode);this.navSearchNode.addEvent("click",function(){if(!this.isShowedSearch){this.showSearch()}else{this.hideSearch()}}.bind(this))},toggleOpenPreViewer:function(){this.previewOpened=!this.previewOpened;if(this.previewOpened){this.navTrigger.setStyles(this.css.navButton_over)}else{this.navTrigger.setStyles(this.css.navButton)}this.preview.toggleOpen(this.previewOpened)},createrPreViewer:function(){this.preview=new MWF.xApplication.Execution.Minder.Preview(this,this.node,this.km,this.app,this.css);this.preview.load()},showSearch:function(){this.isShowedSearch=true;if(!this.searchBar){this.searchBar=new MWF.xApplication.Execution.Minder.SearchBar(this,this.node,this.km,this.app,this.css);this.searchBar.load()}else{this.searchBar.show()}this.navSearchNode.setStyles(this.css.navButton_over)},hideSearch:function(){this.isShowedSearch=false;this.searchBar.hide();this.navSearchNode.setStyles(this.css.navButton)},selectTemplate:function(){this.templateOpen=!this.templateOpen;if(this.templateOpen){if(this.templateSelectNode){this.templateSelectNode.setStyle("display","block")}else{this.createTemplateSelectNode()}this.navTemplateNode.setStyles(this.css.navButton_over)}else{this.hideTemplateSelectNode()}},hideTemplateSelectNode:function(){this.templateOpen=false;this.navTemplateNode.setStyles(this.css.navButton);if(this.templateSelectNode){this.templateSelectNode.setStyle("display","none")}},createTemplateSelectNode:function(){this.templateSelectNode=new Element("div",{styles:this.css.templateSelectNode}).inject(this.node);this.minderTemplate=new Element("div",{styles:this.css.minderTemplate,title:this.lp.minderTemplate}).inject(this.templateSelectNode);this.minderTemplate.addEvents({mouseover:function(){this.minderTemplate.setStyles(this.css.minderTemplate_over)}.bind(this),mouseout:function(){this.minderTemplate.setStyles(this.css.minderTemplate)}.bind(this),click:function(){this.minder.templateChanged=true;this.km.execCommand("template","default");this.hideTemplateSelectNode()}.bind(this)});this.fishboneTemplate=new Element("div",{styles:this.css.fishboneTemplate,title:this.lp.fishBoneTemplate}).inject(this.templateSelectNode);this.fishboneTemplate.addEvents({mouseover:function(){this.fishboneTemplate.setStyles(this.css.fishboneTemplate_over)}.bind(this),mouseout:function(){this.fishboneTemplate.setStyles(this.css.fishboneTemplate)}.bind(this),click:function(){this.minder.templateChanged=true;this.km.execCommand("template","fish-bone");this.hideTemplateSelectNode()}.bind(this)});this.app.content.addEvent("click",function(){this.hideTemplateSelectNode()}.bind(this))},showExpendNode:function(){this.expendNodeOpen=!this.expendNodeOpen;if(this.expendNodeOpen){if(this.expendArea){this.expendArea.setStyle("display","block")}else{this.createExpandArea()}this.navExpandNode.setStyles(this.css.navButton_over)}else{this.hideExpendArea()}},hideExpendArea:function(){this.expendNodeOpen=false;this.navExpandNode.setStyles(this.css.navButton);if(this.expendArea){this.expendArea.setStyle("display","none")}},createExpandArea:function(){var deepestLevel=this.minder.deepestLevel;this.expendArea=new Element("div",{styles:this.css.expendArea}).inject(this.node);this.expendArea.setStyle("height",this.css.expendNode.height*(deepestLevel+1));var expendAllNode=new Element("div",{styles:this.css.expendNode,text:"展开所有节点"}).inject(this.expendArea);expendAllNode.addEvents({mouseover:function(){this.node.setStyles(this.navi.css.expendNode_over)}.bind({navi:this,node:expendAllNode}),mouseout:function(){this.node.setStyles(this.navi.css.expendNode)}.bind({navi:this,node:expendAllNode}),click:function(){this.navi.km.execCommand("expandtolevel",deepestLevel);this.navi.hideExpendArea()}.bind({navi:this,node:expendAllNode})});for(var i=1;i<=deepestLevel;i++){var expendNode=new Element("div",{styles:this.css.expendNode,text:"展开到"+i+"级节点"}).inject(this.expendArea);expendNode.addEvents({mouseover:function(){this.node.setStyles(this.navi.css.expendNode_over)}.bind({navi:this,node:expendNode}),mouseout:function(){this.node.setStyles(this.navi.css.expendNode)}.bind({navi:this,node:expendNode}),click:function(){this.navi.km.execCommand("expandtolevel",this.level);this.navi.hideExpendArea()}.bind({navi:this,node:expendNode,level:i})})}this.app.content.addEvent("click",function(){this.hideExpendArea()}.bind(this))}});MWF.xApplication.Execution.Minder.Preview=new Class({options:{show:"true"},Implements:[Options,Events],initialize:function(navi,container,km,app,css){this.navi=navi;this.container=container;this.app=app;this.lp=this.app.lp.minder;this.actions=this.app.restActions;this.css=css;this.km=km},load:function(callback){this.navPreviewer=new Element("div",{styles:this.css.navPreviewer}).inject(this.container);this.initPreViewer();if(this.options.show)this.navi.toggleOpenPreViewer()},initPreViewer:function(){var paper=this.paper=new kity.Paper(this.navPreviewer);this.nodeThumb=paper.put(new kity.Path);this.connectionThumb=paper.put(new kity.Path);this.visibleRect=paper.put(new kity.Rect(100,100).stroke("red","1%"));this.contentView=new kity.Box;this.visibleView=new kity.Box;this.pathHandler=this.getPathHandler(this.km.getTheme());this.navigate()},getPathHandler:function(theme){switch(theme){case"tianpan":case"tianpan-compact":return function(nodePathData,x,y,width,height){var r=width>>1;nodePathData.push("M",x,y+r,"a",r,r,0,1,1,0,.01,"z")};default:{return function(nodePathData,x,y,width,height){nodePathData.push("M",x,y,"h",width,"v",height,"h",-width,"z")}}}},toggleOpen:function(open){if(open){this.navPreviewer.setStyle("display","block");this.bindPreviewerEvent();this.updateContentView();this.updateVisibleView()}else{this.navPreviewer.setStyle("display","none");this.unbindPreviewerEvent()}},bindPreviewerEvent:function(){this.updateContentViewFun=this.updateContentViewFun||this.updateContentView.bind(this);this.updateVisibleViewFun=this.updateVisibleViewFun||this.updateVisibleView.bind(this);this.km.on("layout layoutallfinish",this.updateContentViewFun);this.km.on("viewchange",this.updateVisibleViewFun)},unbindPreviewerEvent:function(){this.km.off("layout layoutallfinish",this.updateContentViewFun);this.km.off("viewchange",this.updateVisibleViewFun)},moveView:function(center,duration){var box=this.visibleView;center.x=-center.x;center.y=-center.y;var viewMatrix=this.km.getPaper().getViewPortMatrix();box=viewMatrix.transformBox(box);var targetPosition=center.offset(box.width/2,box.height/2);this.km.getViewDragger().moveTo(targetPosition,duration)},navigate:function(){var _self=this;this.dragging=false;this.paper.on("mousedown",function(e){_self.dragging=true;_self.moveView(e.getPosition("top"),200);_self.navPreviewer.setStyles(_self.css.navPreviewerGrab)});this.paper.on("mousemove",function(e){if(_self.dragging){_self.moveView(e.getPosition("top"))}});$(window).addEvent("mouseup",function(){_self.dragging=false;if(_self.navPreviewer)_self.navPreviewer.setStyles(_self.css.navPreviewerNoGrab)})},updateContentView:function(){var view=this.km.getRenderContainer().getBoundaryBox();this.contentView=view;var padding=30;this.paper.setViewBox(view.x-padding-.5,view.y-padding-.5,view.width+padding*2+1,view.height+padding*2+1);var nodePathData=[];var connectionThumbData=[];this.km.getRoot().traverse(function(node){var box=node.getLayoutBox();this.pathHandler(nodePathData,box.x,box.y,box.width,box.height);if(node.getConnection()&&node.parent&&node.parent.isExpanded()){connectionThumbData.push(node.getConnection().getPathData())}}.bind(this));this.paper.setStyle("background",this.km.getStyle("background"));if(nodePathData.length){this.nodeThumb.fill(this.km.getStyle("root-background")).setPathData(nodePathData)}else{this.nodeThumb.setPathData(null)}if(connectionThumbData.length){this.connectionThumb.stroke(this.km.getStyle("connect-color"),"0.5%").setPathData(connectionThumbData)}else{this.connectionThumb.setPathData(null)}this.updateVisibleView()},updateVisibleView:function(){this.visibleView=this.km.getViewDragger().getView();this.visibleRect.setBox(this.visibleView.intersect(this.contentView))}});MWF.xApplication.Execution.Minder.SearchBar=new Class({Implements:[Options,Events],initialize:function(navi,container,km,app,css){this.navi=navi;this.container=container;this.app=app;this.lp=this.app.lp.minder;this.actions=this.app.restActions;this.css=css;this.km=km},load:function(callback){this.createSearchBar();this.nodeSequence=[];this.searchSequence=[];this.km.on("contentchange",this.makeNodeSequence.bind(this));this.makeNodeSequence()},show:function(){this.node.setStyle("display","block")},hide:function(){this.node.setStyle("display","none")},createSearchBar:function(){this.node=new Element("div",{styles:this.css.searchBar}).inject(this.container);this.searchInput=new Element("input",{type:"text",styles:this.css.searchInput,value:this.lp.searchText}).inject(this.node);this.searchInput.addEvents({focus:function(ev){if(this.searchInput.get("value")==this.lp.searchText){this.searchInput.set("value","")}}.bind(this),blur:function(ev){if(this.searchInput.get("value").trim()==""){this.searchInput.set("value",this.lp.searchText)}}.bind(this),keyup:function(){this.doSearch(this.searchInput.get("value"),"next")}.bind(this)});this.resultInforNode=new Element("div",{styles:this.css.resultInforNode,text:"0/0"}).inject(this.node);this.prevButton=new Element("div",{styles:this.css.prevButton,title:this.lp.prev}).inject(this.node);this.prevButton.addEvent("click",function(){this.goPrev()}.bind(this));this.nextButton=new Element("div",{styles:this.css.nextButton,title:this.lp.next}).inject(this.node);this.nextButton.addEvent("click",function(){this.goNext()}.bind(this));this.closeButton=new Element("div",{styles:this.css.closeButton,title:this.lp.close}).inject(this.node);this.closeButton.addEvent("click",function(){this.close()}.bind(this))},goNext:function(){this.doSearch(this.searchInput.get("value"),"next")},goPrev:function(){this.doSearch(this.searchInput.get("value"),"prev")},close:function(){this.navi.hideSearch()},makeNodeSequence:function(){this.nodeSequence=[];this.km.getRoot().traverse(function(node){this.nodeSequence.push(node)}.bind(this))},makeSearchSequence:function(keyword){this.searchSequence=[];for(var i=0;i<this.nodeSequence.length;i++){var node=this.nodeSequence[i];var text=node.getText().toLowerCase();if(text.indexOf(keyword)!=-1){this.searchSequence.push({node:node})}var note=node.getData("note");if(note&&note.toLowerCase().indexOf(keyword)!=-1){this.searchSequence.push({node:node,keyword:keyword})}}},doSearch:function(keyword,direction){this.km.fire("hidenoterequest");if(!keyword||!/\S/.exec(keyword)){this.searchInput.focus();return}this.curIndex=0;this.resultNum=0;keyword=keyword.toLowerCase();var newSearch=this.lastKeyword!=keyword;this.lastKeyword=keyword;if(newSearch){this.makeSearchSequence(keyword)}this.resultNum=this.searchSequence.length;if(this.searchSequence.length){var curIndex=newSearch?0:(direction==="next"?this.lastIndex+1:this.lastIndex-1)||0;curIndex=(this.searchSequence.length+curIndex)%this.searchSequence.length;this.setSearchResult(this.searchSequence[curIndex].node,this.searchSequence[curIndex].keyword);this.lastIndex=curIndex;this.curIndex=curIndex+1;this.resultInforNode.set("text",this.curIndex+"/"+this.searchSequence.length)}},setSearchResult:function(node,previewKeyword){setTimeout(function(){if(previewKeyword){this.km.fire("shownoterequest",{node:node,keyword:previewKeyword})}if(!node.isExpanded()){this.km.select(node,true);this.km.execCommand("expand",true)}else{this.km.select(node,true);this.km.execCommand("camera",node,50)}}.bind(this),60)}});