bundles/org.eclipse.rap.rwt.visualization.jit/src/org/eclipse/rap/rwt/visualization/jit/internal/spacetreekit/SpaceTree.js

/******************************************************************************
 * Copyright � 2010-2011 Texas Center for Applied Technology
 * Texas Engineering Experiment Station
 * The Texas A&M University System
 * All Rights Reserved.
 * 
 * This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     Austin Riddle (Texas Center for Applied Technology) -
 *       initial API and implementation
 * 
 *****************************************************************************/
qx.Class.define("org.eclipse.rap.rwt.visualization.jit.SpaceTree",
{ extend :qx.ui.layout.CanvasLayout,
	
	construct : function(id) {
		this.base(arguments);
		this.setHtmlProperty("id", id);
		this._id = id;
		this._viz = null;
	},

	properties : {
		visible : {
			init :"",
			apply :"load"
	    },
	    widgetData : {
	    	init :"",
			apply :"refreshData"
	    },
	    nodeColor : {
	    	init :"",
			apply :"applyNodeColor"
	    },
	    edgeColor : {
	    	init :"",
			apply :"applyEdgeColor"
	    }
	},

	destruct : function() {

	},

	members : {

		_doActivate : function() {
			var shell = null;
			var parent = this.getParent();
			while (shell == null && parent != null) {
				if (parent.classname == "org.eclipse.swt.widgets.Shell") {
					shell = parent;
				}
				parent = parent.getParent();
			}
			if (shell != null) {
				shell.setActiveChild(this);
			}
		},
		
		load : function() {
	      var parent = this;
		  try {
			var vis = this.getVisible();
			if (vis == "false") {
				// make invisible
				return;
			}
			qx.ui.core.Widget.flushGlobalQueues();
			if (this._viz == null) {
				this.info("Creating spacetree.");
				var qParent = document.getElementById(this._id);
				var vizParent = document.createElement("div");
				var vizId = "vizParent"+this._id;
				vizParent.setAttribute("id", vizId);
				qParent.appendChild(vizParent);
				/* style for node labels */
//				var vizStyle = ".node {color: white;background-color:transparent;cursor:pointer;font-weight:bold;opacity:0.9;} .node:hover {cursor:pointer;color: #222;background-color:white;font-weight:bold;opacity:1;}";
//				qx.html.StyleSheet.createElement(vizStyle);
				
				var canvas = new Canvas('vizCanvas'+this._id, {
			        'injectInto': "vizParent"+this._id,
			        'width': this.getWidth(),
			        'height': this.getHeight()
			    });
				qParent._canvas = canvas;

				var widgetId = this._id;
				vizParent.width = this.getWidth();
				vizParent.height = this.getHeight();
			    var st = new ST(canvas, {
			    	orientation: "left",  
			    	  levelsToShow: 2,  
			    	  subtreeOffset: 8,  
			    	  siblingOffset: 5,  
			    	  levelDistance: 30,  
			    	  withLabels: true,  
			    	  align: "center",  
			    	  multitree: false,  
			    	  indent: 10,  
			    	  //set distance between node and its children
			          levelDistance: 50,
			    	  Node: {  
			    	    overridable: true,  
			    	    type: 'rectangle',  
			    	    color: '#ccb',  
			    	    lineWidth: 1,  
			    	    height: 20,  
			    	    width: 90,  
			    	    dim: 15,  
			    	    align: "center"  
			    	  },  
			    	  Edge: {  
			    	    overridable: true,  
			    	    type: 'bezier',  
			    	    color: '#ccc',  
			    	    dim: 15,  
			    	    lineWidth: 1  
			    	  },  
			    	  duration: 700,  
			    	  fps: 25,  
			    	  transition: Trans.Quart.easeInOut,  
			    	  clearCanvas: true,  
			    	  
			    	  onBeforeCompute: function(node) {  
			    	    //do something onBeforeCompute  
			    	  },  
			    	  onAfterCompute: function(){
			        	  var node = Graph.Util.getClosestNodeToOrigin(st.graph, "pos");
			        	  qParent.selection = node;
			        	  //fire selection event
			        	  var req = org.eclipse.swt.Request.getInstance();
			        	  req.addParameter(widgetId + ".selectedNode", node.id);
			        	  req.addEvent( "org.eclipse.swt.events.widgetSelected", widgetId );
			        	  req.send();
			          },  
			    	  onCreateLabel:   function(domElement, node) {  
			    		  domElement.id = node.id;            
			    		  domElement.innerHTML = node.name;
			    		  domElement.onclick = function(){
			                  st.onClick(node.id);
			              };
			              //set label styles
			              var style = domElement.style;
			              var font = parent.getFont();
			              style.fontFamily = font.getFamily();
			              style.fontStyle = font.generateStyle();
			              style.fontSize = font.getSize();
			              style.width = 60 + 'px';
			              style.height = 17 + 'px';            
			              style.cursor = 'pointer';
			              style.textAlign= 'center';
			              style.paddingTop = '3px';  
			              var color = parent.getTextColor();
		            	  style.color = color;
			    	  },  
			    	  onPlaceLabel:    function(domElement, node) {  
			    	    //do something onPlaceLabel  
			    	  },  
			    	  onBeforePlotNode:function(node) {  
			    		//add some color to the nodes in the path between the
			              //root node and the selected node.
			              if (node.selected) {
			                  node.data.$color = "#ff7";
			              }
			              else {
			                  delete node.data.$color;
			                  var GUtil = Graph.Util;
			                  //if the node belongs to the last plotted level
			                  if(!GUtil.anySubnode(node, "exist")) {
			                      //count children number
			                      var count = 0;
			                      GUtil.eachSubnode(node, function(n) { count++; });
			                      //assign a node color based on
			                      //how many children it has
			                      node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
			                  }
			              }  
			    	  },  
			    	  onAfterPlotNode: function(node) {  
			    	    //do something onAfterPlotNode  
			    	  },  
			    	  onBeforePlotLine:function(adj) {  
			    		  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
			                  adj.data.$color = "#eed";
			                  adj.data.$lineWidth = 3;
			              }
			              else {
			                  delete adj.data.$color;
			                  delete adj.data.$lineWidth;
			              }  
			    	  },  
			    	  onAfterPlotLine: function(adj) {  
			    	    //do something onAfterPlotLine  
			    	  },
			    	  request:         false
			    });
			    
			    this.addEventListener("changeWidth", function(e) {
					if (canvas != null) {
						canvas.width = e.getValue();
						vizParent.width = e.getValue();
						canvas.resize(vizParent.width, vizParent.height);
	             		st.refresh();
					}
				});
				this.addEventListener("changeHeight", function(e) {
					if (canvas != null) {
						canvas.height = e.getValue();
						vizParent.height = e.getValue();
						canvas.resize(vizParent.width, vizParent.height);
						st.refresh();
					}
				});
			    
				this._viz = st;
				this._vizParent = vizParent;
			}
		  }
		  catch (e) {
			 this.info(e);
		  }
		},
		
		addTreeEvent : function (obj, type, fn) {
		    if (obj.addEventListener) obj.addEventListener(type, fn, false);
		    else obj.attachEvent('on' + type, fn);
		},
		
		refreshData : function () {
			try {
		      var st = this._viz;
		      if (st != null) {
		    	  this.info("Loading spacetree data.");
		    	  var data = this.getWidgetData();
		    	  if (data != null) {
	//	    	    this.info(data);
		    	    st.loadJSON(data);
		    	    this.info("Refreshing spacetree.");
		    	    //compute node positions and layout  
		    	    st.compute();  
		    	    //Emulate a click on the root node.  
		    	    st.onClick(st.root); 
//				    st.refresh();
//	  		        ht.controller.onAfterCompute();
		    	  }
		      }
			}
			catch (e) {
				this.info(e);
			}
		},
		
		applyNodeColor : function (color) {
			try {
				var st = this._viz;
				if (st != null) {
					st.controller.Node.color = color;
					st.refresh();
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		applyEdgeColor : function (color) {
			try {
				var st = this._viz;
				if (st != null) {
					st.controller.Edge.color = color;
					st.refresh();
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		selectNode : function (id) {
			try {
				var st = this._viz;
				if (st != null) {
					st.onClick(id);
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		_doResize : function() {
			qx.ui.core.Widget.flushGlobalQueues();
			
		}
	}
});