bundles/org.eclipse.rap.rwt.visualization.jit/src/org/eclipse/rap/rwt/visualization/jit/internal/rgraphkit/RGraph.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.RGraph",
{ 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 rgraph.");
				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(),
			        //Optional: create a background canvas and plot
			        //concentric circles in it.
			        'backgroundCanvas': {
			            'styles': {
			                'strokeStyle': '#555'
			            },
			            
			            'impl': {
			                'init': function(){},
			                'plot': function(canvas, ctx){
			                    var times = 6, d = 100;
			                    var pi2 = Math.PI * 2;
			                    for (var i = 1; i <= times; i++) {
			                        ctx.beginPath();
			                        ctx.arc(0, 0, i * d, 0, pi2, true);
			                        ctx.stroke();
			                        ctx.closePath();
			                    }
			                }
			            }
				    }
			    });
				qParent._canvas = canvas;

				var widgetId = this._id;
				vizParent.width = this.getWidth();
				vizParent.height = this.getHeight();
			    var rg = new RGraph(canvas, {
			    	 //interpolation type, can be linear or polar  
			        //interpolation: 'linear',  
			        //parent-children distance  
			        //levelDistance: 100,  
			          //withLabels: true,
			    	  duration: 1000,  
			    	  fps: 25,
			          Node: {  
//			            overridable: false,  
//			            type: 'circle',
			            color: '#ccddee'
//			            lineWidth: 1,  
//			            height: 5,  
//			            width: 5,  
//			            dim: 3  
			          },  
			          Edge: {  
//			            overridable: false,  
//			            type: 'line',  
			            color: '#772277' 
//			            lineWidth: 1  
			          },  
			          onBeforeCompute: function(node) {  
			            //do something onBeforeCompute  
			          },  
			          onAfterCompute: function(){
			        	  var node = Graph.Util.getClosestNodeToOrigin(rg.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();
			          },  
			        //Change some label dom properties.
			          //This method is called each time a label is plotted.
			          onPlaceLabel: function(domElement, node){
			              var style = domElement.style;
			              style.display = '';
			              style.cursor = 'pointer';
			              var font = parent.getFont();
			              style.fontFamily = font.getFamily();
			              style.fontStyle = font.generateStyle();
			              var color = parent.getTextColor();
			              if (node._depth <= 1) {
			            	  style.fontSize = font.getSize();
			            	  style.color = color;
			            	  
			              } else if(node._depth == 2){
			            	  style.fontSize = font.getSize()-2;
			            	  style.color = "#555";
			            	  
			              } else {
			            	  style.display = 'none';
			              }
			              
			              var left = parseInt(style.left);
			              var w = domElement.offsetWidth;
			              style.left = (left - w / 2) + 'px';
			          }, 
			          
			          //Add a controller to make the tree move on click.  
			          onCreateLabel: function(domElement, node) {  
			        	  domElement.innerHTML = node.name;
			        	  domElement.onclick = function() {
			        		  rg.onClick(node.id);  
			        	  };  
			          },   
			          onBeforePlotNode:function(node) {  
			            //do something onBeforePlotNode  
			          },  
			          onAfterPlotNode: function(node) {  
			            //do something onAfterPlotNode  
			          },  
			          onBeforePlotLine:function(adj) {  
			            //do something onBeforePlotLine  
			          },  
			          onAfterPlotLine: function(adj) {  
			            //do something onAfterPlotLine  
			          }  
			    });
			    
			    this.addEventListener("changeWidth", function(e) {
					if (canvas != null) {
						canvas.width = e.getValue();
						vizParent.width = e.getValue();
						canvas.resize(vizParent.width, vizParent.height);
	             		rg.refresh();
					}
				});
				this.addEventListener("changeHeight", function(e) {
					if (canvas != null) {
						canvas.height = e.getValue();
						vizParent.height = e.getValue();
						canvas.resize(vizParent.width, vizParent.height);
						rg.refresh();
					}
				});
			    
				this._viz = rg;
				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 rg = this._viz;
		      if (rg != null) {
		    	  var data = this.getWidgetData();
		    	  if (data != null) {
		    		this.info("Loading rgraph data.");
	//	    	    this.info(data);
		    	    rg.loadJSON(data);
		    	    this.info("Refreshing rgraph.");
				    rg.refresh();
				    ht.controller.onAfterCompute();
		    	  }
		      }
			}
			catch (e) {
				this.info(e);
			}
		},
		
		applyNodeColor : function (color) {
			try {
				var rg = this._viz;
				if (rg != null) {
					rg.controller.Node.color = color;
					rg.refresh();
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		applyEdgeColor : function (color) {
			try {
				var rg = this._viz;
				if (rg != null) {
					rg.controller.Edge.color = color;
					rg.refresh();
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		selectNode : function (id) {
			try {
				var rg = this._viz;
				if (rg != null) {
					rg.onClick(id);
				}
			}
			catch (e) {
				this.info(e);
			}
		},
		
		_doResize : function() {
			qx.ui.core.Widget.flushGlobalQueues();
			
		}
	}
});