Add support to react to click events on nodes.

Author: paodb

orgchart-addon-demo/src/main/java/com/flowingcode/vaadin/addons/orgchart/demo/DemoUI.java

@@ -33,6 +33,7 @@
 import com.vaadin.annotations.VaadinServletConfiguration;
 import com.vaadin.server.VaadinRequest;
 import com.vaadin.server.VaadinServlet;
+import com.vaadin.ui.Notification;
 import com.vaadin.ui.UI;
 import com.vaadin.ui.VerticalSplitPanel;
 
@@ -64,6 +65,8 @@ protected void init(VaadinRequest request) {
 
         component1.addDragAndDropListener(e -> System.out.println("------ OrgChart updated - Item dragged: " + e.getDraggedItem().getName() + "------\n" +  e.getOrgChart().getOrgChartItem().toString()));
 
+        component1.addOnNodeClickListener(e -> Notification.show("Item clicked: " + e.getClickedItem().getName()));
+        
         OrgChart component2 = getExample2();
         component2.setChartTitle("My Organization Chart Demo - Example 2 - BOTTOM TO TOP DIRECTION");    
         component2.setChartNodeContent("title");

orgchart-addon/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChart.java

@@ -62,6 +62,11 @@ public OrgChart(OrgChartItem orgChartItem) {
 			public void updateChart(String draggedNode, String dragZone, String dropZone) {
 				updateDraggedNode(draggedNode, dragZone, dropZone);
 			}
+
+			@Override
+			public void onNodeClick(String nodeId) {
+				onClick(nodeId);				
+			}
 
 		});
 	}
@@ -86,7 +91,7 @@ private String convertToJsonObj(OrgChartItem orgChartItem) {
 		}
 		return result;
 	}
-
+		
 	public void setChartNodeTitle(String chartNodeTitle) {
 		getState().chartNodeTitle = chartNodeTitle;
 	}
@@ -164,6 +169,25 @@ public OrgChartItem getOrgChartItem() {
 		return orgChartItem;
 	}
 
+	/**
+	 * Fires event on node click.
+	 * 
+	 * @param nodeId
+	 */
+	private void onClick(String nodeId) {		
+		Integer clickedNodeId = Integer.valueOf(nodeId);
+		OrgChartItem clickedItem = getById(clickedNodeId, orgChartItem);
+	
+		fireNodeClickEvent(clickedItem);
+	}
+	
+	/**
+	 * Updates chart after drag and drop event.
+	 * 
+	 * @param draggedNode
+	 * @param dragZone
+	 * @param dropZone
+	 */
 	private void updateDraggedNode(String draggedNode, String dragZone, String dropZone) {
 
 		Integer draggedNodeId = Integer.valueOf(draggedNode);
@@ -281,4 +305,60 @@ public interface DragAndDropListener extends Serializable {
 		public void onDragAndDropNode(DragAndDropEvent event);
 	}
 
+	
+	/**
+	 * Adds a {@link OnNodeClickListener} to the component.
+	 * 
+	 * @param onNodeClickListener
+	 * 						the listener to be added.
+	 */
+	public void addOnNodeClickListener (OnNodeClickListener onNodeClickListener) {
+		 addListener(NodeClickEvent.class, onNodeClickListener,
+				 OnNodeClickListener.ON_CLICK_METHOD);
+	}
+
+	/**
+	 * Fires a {@link NodeClickEvent}.
+	 * 
+	 * @param clickedItem
+	 * 			the item being clicked.
+	 */
+	protected void fireNodeClickEvent(OrgChartItem clickedItem) {
+        fireEvent(new NodeClickEvent(this, clickedItem));
+    }	
+	
+	/**
+	 * Event thrown when a node is clicked. 
+	 */
+	public static class NodeClickEvent extends Component.Event {
+		
+		private final OrgChartItem clickedItem;
+						
+		public NodeClickEvent(Component source, OrgChartItem clickedItem) {	
+			super(source);
+			this.clickedItem = clickedItem;
+		}
+
+		public OrgChartItem getClickedItem() {
+			return clickedItem;
+		}
+		
+		public OrgChart getOrgChart() {
+			return (OrgChart)source;
+		}
+				
+	}
+	
+	/**
+     * Interface for listening for a {@link NodeClickEvent}.
+     */
+	public interface OnNodeClickListener extends Serializable {
+		
+		public static final Method ON_CLICK_METHOD = ReflectTools
+                .findMethod(OnNodeClickListener.class, "onNodeClick",
+                		NodeClickEvent.class);
+		
+		public void onNodeClick(NodeClickEvent event);
+	}
+		
 }

orgchart-addon/src/main/java/com/flowingcode/vaadin/addons/orgchart/client/OrgChartServerRpc.java

@@ -24,6 +24,20 @@
 
 public interface OrgChartServerRpc extends ServerRpc {
 
+	/**
+	 * Updates chart after a node has been dragged.
+	 * 
+	 * @param draggedNode
+	 * @param dragZone
+	 * @param dropZone
+	 */
 	void updateChart(String draggedNode, String dragZone, String dropZone);
 
+	/**
+	 * Fires event on node click.
+	 * 
+	 * @param nodeId
+	 */
+	void onNodeClick(String nodeId);
+	
 }

orgchart-addon/src/main/resources/com/flowingcode/vaadin/addons/orgchart/orgchart-connector.js

@@ -42,8 +42,10 @@ function() {
         	nodeTemplate = Function(state.nodeTemplateParam, state.nodeTemplate);
         }
 
+        var jsonData = jQuery.parseJSON(value)
+               
         var orgchart = $(element).orgchart({
-        	'data' : jQuery.parseJSON(value),
+        	'data' : jsonData,
         	'nodeContent': state.chartNodeContent,
         	'nodeTitle': state.chartNodeTitle,
         	'zoom': state.chartZoom,
@@ -60,6 +62,11 @@ function() {
         	'draggable': state.chartDraggable,
         	'nodeId': state.chartNodeId,
         	'nodeTemplate': nodeTemplate,
+        	'createNode': function($node, data) {
+    	        $node.on('click', function() {
+    	        	rpcProxy.onNodeClick(data.id); 
+    	        });
+    	      }
         });  
 
         // add title
@@ -98,6 +105,7 @@ function() {
   				rpcProxy.updateChart(draggedNode, dragZone, dropZone);  				
   			  });  				
   		} 			
+  		
     }
 
 };