Merge branch 'master' of https://github.com/FlowingCode/OrgChartAddon

Author: paodb

README.md

@@ -48,6 +48,11 @@ To see the demo, navigate to http://localhost:8080/
 - Drag and Drop Version. This version allows to Drag and Drop OrgChart nodes. 
 ### Version 2.0.2
 - Add support for node styling (e.g. change node colors)
+### Version 2.0.3
+- Update OrgChart library to version [2.1.3](https://github.com/dabeng/OrgChart/releases/tag/v2.1.3)
+- Add support for [node templates](https://rawgit.com/dabeng/OrgChart/master/demo/custom-template.html)
+- Fix options chartDepth and chartVerticalDepth
+- Fix export support in IE
 
 ## Roadmap
 
@@ -89,7 +94,7 @@ Here is a simple example on how to try out the add-on component:
   item1.setChildren(Arrays.asList(item2, item3));
 
   OrgChart orgChart = new OrgChart(item1);
-  orgChart.setChartTitle("A Ttile");    
+  orgChart.setChartTitle("A Title");
   orgChart.setChartNodeContent("title");
   orgChart.setChartExportButton(true);
   orgChart.setZoom(true);

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

@@ -27,6 +27,7 @@
 import com.flowingcode.vaadin.addons.orgchart.OrgChart;
 import com.flowingcode.vaadin.addons.orgchart.OrgChartItem;
 import com.flowingcode.vaadin.addons.orgchart.client.enums.ChartDirectionEnum;
+import com.flowingcode.vaadin.addons.orgchart.extra.TemplateLiteralRewriter;
 import com.vaadin.annotations.Theme;
 import com.vaadin.annotations.Title;
 import com.vaadin.annotations.VaadinServletConfiguration;
@@ -49,8 +50,13 @@ public static class Servlet extends VaadinServlet {
     @Override
     protected void init(VaadinRequest request) {
     	// org chart 1
-        OrgChart component1 = getExample1();        
-        component1.setChartTitle("My Organization Chart Demo - Example 1 - CHART EXPORT AS PICTURE AND DRAG & DROP");    
+        OrgChart component1 = getExample1();
+        String nodeTemplate = "<div class='title'>${item.title}</div>"+
+        		"<div class='middle content'>${item.name}</div>" +
+        		"${item.data.mail?`<div class='custom content'>${item.data.mail}</div>`:''}";
+		component1.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));		
+				
+        component1.setChartTitle("My Organization Chart Demo - Example 1 - CHART EXPORT AS PICTURE AND DRAG & DROP, CUSTOM TEMPLATE");    
         component1.setChartNodeContent("title");
         component1.setChartExportButton(true);
         component1.setChartExpandCollapse(true);        
@@ -69,18 +75,24 @@ protected void init(VaadinRequest request) {
 
     public OrgChart getExample1() {
     	OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
+    	item1.setData("mail", "[email protected]");
     	item1.setClassName("blue-node");
         OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
+        item2.setData("mail", "[email protected]");
         item2.setClassName("blue-node");
-        OrgChartItem item3 = new OrgChartItem(3, "Timothy Jones", "Sub-Director");        
+        OrgChartItem item3 = new OrgChartItem(3, "Timothy Jones", "Sub-Director");
+        item3.setData("mail", "[email protected]");
         item1.setChildren(Arrays.asList(item2, item3));        
         OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Department 1");
+        item4.setData("mail", "[email protected]");
         OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Department 2");
+        item5.setData("mail", "[email protected]");
         OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Department 3");
+        item6.setData("mail", "[email protected]");
         item2.setChildren(Arrays.asList(item4, item5, item6));
         OrgChartItem item7 = new OrgChartItem(7, "Michael Wood", "Section 3.1");
         OrgChartItem item8 = new OrgChartItem(8, "Martha Brown", "Section 3.2");
-        OrgChartItem item9 = new OrgChartItem(9, "Mary Parker", "Section 3.3");
+        OrgChartItem item9 = new OrgChartItem(9, "Mary Parker", "Section 3.3");        
         OrgChartItem item10 = new OrgChartItem(10, "Mary Williamson", "Section 3.4");
         item6.setChildren(Arrays.asList(item7, item8, item9, item10));
         return new OrgChart(item1);

orgchart-addon-demo/src/main/webapp/VAADIN/themes/demo/styles.scss

@@ -38,4 +38,19 @@ $darkgreen: darken($green, 30%);
 		.title   {background-color: blue;}
 		.content {border-color: blue;}
 	}
+		
+	.orgchart .node .content {
+		& { border-radius: 0; border-bottom-width: 0; }
+		&:first-of-type { 
+			border-top-width: 1px;
+			border-top-right-radius: 4px;
+			border-top-left-radius: 4px;
+		}
+		&:last-of-type{ 
+			border-bottom-width: 1px;
+			border-bottom-right-radius: 4px;
+			border-bottom-left-radius: 4px;
+		}
+	}
+		
 }

orgchart-addon/pom.xml

@@ -76,13 +76,18 @@
 			<scope>provided</scope>
 		</dependency>
 
-		<!-- This can be replaced with TestNG or some other test framework supported by the surefire plugin -->
 		<dependency>
 			<groupId>junit</groupId>
 			<artifactId>junit</artifactId>
 			<version>4.8.1</version>
 			<scope>test</scope>
 		</dependency>
+		<dependency>
+      		<groupId>org.assertj</groupId>
+      		<artifactId>assertj-core</artifactId>
+      		<version>2.5.0</version>
+    	</dependency>
+    
 		<dependency>
 			<groupId>com.fasterxml.jackson.core</groupId>
 			<artifactId>jackson-databind</artifactId>
@@ -178,6 +183,15 @@
 				<version>1.14</version>
 				<configuration>
 				  <licenseName>apache_v2</licenseName>
+				  <failOnMissingHeader>true</failOnMissingHeader>
+				  <failOnNotUptodateHeader>true</failOnNotUptodateHeader>
+				  <excludes>
+					<exclude>**/font-awesome.css</exclude>
+					<exclude>**/html2canvas.js</exclude>
+					<exclude>**/jquery-*.js</exclude>
+					<exclude>**/jquery.orgchart.css</exclude>
+					<exclude>**/jquery.orgchart.js</exclude>
+				  </excludes>
 				</configuration>
 			</plugin>
 		</plugins>

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

@@ -198,6 +198,33 @@ private OrgChartItem getChildItemById(Integer id, List<OrgChartItem> children) {
 		}
 		return result;
 	}
+		
+	/**
+	 * Sets the template generation function used to customize the internal structure of nodes. 
+	 * {@code functionBody} is the body of a javascript function that recieves one parameter 
+	 * (the JSON datasoure representing a node) and returns an HTML snippet. 
+	 * The name of this parameter is given by {@code parameterName}.
+	 * 
+	 * Example:
+	 * <code>
+	 * setNodeTemplate("item","return '<span>'+item.name+'</span>';")
+	 * </code>
+	 * configures the following JS function as node template:
+	 * <code>
+	 * function(item) { return '<span>'+item.name+'</span>'; }
+	 * </code>
+	 * 
+	 * {@linkplain OrgChartItem#setData(String, String) custom properties} 
+	 * are accessible through {@code item.data}
+	 * <br>
+	 * 
+	 * @param parameterName the name of the parameter of a javascript function
+	 * @param functionBody the body of a javascript function
+	 */
+	public void setNodeTemplate(String parameterName, String functionBody) {
+		getState().nodeTemplateParam = parameterName;
+		getState().nodeTemplate = functionBody;
+	}
 
 	/**
 	 * Adds a {@link DragAndDropListener} to the component.
@@ -253,4 +280,5 @@ public interface DragAndDropListener extends Serializable {
 
 		public void onDragAndDropNode(DragAndDropEvent event);
 	}
+	
 }

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

@@ -22,7 +22,11 @@
 
 import java.io.Serializable;
 import java.util.ArrayList;
+import java.util.Collections;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
+import java.util.Optional;
 
 
 /**
@@ -44,6 +48,8 @@ public class OrgChartItem implements Serializable{
 
 	private List<OrgChartItem> children = new ArrayList<>();
 
+	private Map<String,String> data;
+	
 	public OrgChartItem(Integer id, String name, String title) {
 		super();
 		this.id = id;
@@ -57,7 +63,26 @@ public OrgChartItem(OrgChartItem original) {
 			orgChartCopy.addChildren(new OrgChartItem(child));
 		} 
 	}
+		
+	/**Return the map of {@linkplain #setData(String, String) custom properties}.*/
+	public Map<String, String> getData() {
+		return Optional.ofNullable(data).map(Collections::unmodifiableMap).orElse(Collections.emptyMap());
+	}
 
+	/**Add or remove a custom property.
+	 * @param name the name of the custom property
+	 * @param value the value of the custom property */ 
+	public void setData(String name, String value) {
+        if (data==null) {
+            data = new HashMap<>();
+        }
+		if (value!=null) {
+			data.put(name, value);
+		} else {
+			data.remove(name);
+		}
+	}
+
 	public String getName() {
 		return name;
 	}

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

@@ -68,4 +68,8 @@ public class OrgChartState extends JavaScriptComponentState {
 
 	public String chartNodeId = ChartConstants.CHART_NODE_ID_DEFAULT;  
 
+	public String nodeTemplate;
+	
+	public String nodeTemplateParam = "item";	
+	
 }

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

@@ -0,0 +1,160 @@
+package com.flowingcode.vaadin.addons.orgchart.extra;
+
+/**
+ * ES6 template literal parser that rewrites the literal as an ES5 expression.
+ * This class is experimental and subject to change, with no guarantee of completeness
+ * (but it should work for simple expressions).
+ *  
+ * @author Javier Godoy / Flowing Code
+ */
+public class TemplateLiteralRewriter {
+	
+	//https://www.ecma-international.org/ecma-262/6.0/#sec-template-literal-lexical-components
+	
+	public static String rewriteFunction(String s) {
+		return "return "+rewrite(s)+";";
+	}
+	
+	// rewrites an ES6 template literal as an ES5 expression
+	public static String rewrite(String s) {
+		StringBuilder sb = new StringBuilder();
+		sb.ensureCapacity(s.length()+1);
+		rewriteTemplate(s, 0, sb, true);
+		return sb.toString();
+	}	
+	
+	/**Parse a Template literal in {@code s} starting at index {@code i} and rewrite it into {@code sb}.
+	@param s The ES6 template literal
+	@param i The index into {@code s} where the expression begins.
+	@param sb The result buffer 
+	@throws IllegalArgumentException if the template literal is not closed with a backtick
+	@return the index of the closing backtick that ends the Template literal
+	*/
+	private static int rewriteTemplate(String s, int i, StringBuilder sb, boolean implicit) {
+		int begin = i;
+		sb.append('"');
+		//https://www.ecma-international.org/ecma-262/6.0/#sec-static-semantics-templatestrings	
+		outer: for (;i<s.length();i++) {
+			char c = s.charAt(i);
+			switch (c) {
+				case '"':
+					//escape quotes in TemplateCharacters since we are using them for the string literals 
+					sb.append('\\').append('"');
+					break;
+				case '\r':
+					//The TV of TemplateCharacter :: LineTerminatorSequence is the TRV of LineTerminatorSequence.
+					//The TRV of LineTerminatorSequence :: <CR><LF> is the sequence consisting of the code unit value 0x000A.
+					//The TRV of LineTerminatorSequence :: <CR> is the code unit value 0x000A.
+					if (i<s.length()-1 && s.charAt(i+1)=='\n') {
+						++i;
+					}
+					//fallthrough
+				case '\n':
+					//The TRV of LineTerminatorSequence :: <LF> is the code unit value 0x000A.
+					sb.append("\\n");
+					continue;
+				case '\u2028':
+					//The TRV of LineTerminatorSequence :: <LS> is the code unit value 0x2028.
+					sb.append("\\u2028");
+					continue;
+				case '\u2029':
+					//The TRV of LineTerminatorSequence :: <PS> is the code unit value 0x2029.
+					sb.append("\\u2029");
+					continue;
+				case '\\':
+					if (++i==s.length()) {
+						throw new IllegalArgumentException("Unterminated escape sequence at index "+i);
+					}
+					c = s.charAt(i);
+					if (c=='\r' || c=='\n' || c=='\u2028' || c=='\u2029') {
+						if (i<s.length()-1 && s.charAt(i+1)=='\n') {
+							++i;
+						}
+						//LineTerminator :: <LF> | <CR> | <LS> | <PS>
+						//The TV of LineContinuation :: \ LineTerminatorSequence is the empty code unit sequence.
+						continue;
+					} else {
+						//EscapeSequence
+						sb.append('\\').append(c);
+						continue;
+					}
+				case '$': {
+					if (i==s.length()-1 || s.charAt(i+1)!='{') {
+						//this was a dangling dollar sign
+						sb.append(c);
+						continue; 
+					}
+									
+					sb.append("\"+(");
+					//expression substitution
+					i = rewriteExpression(s,i+2,sb);
+					sb.append(")+\"");
+					continue;
+				}
+				case '`': {
+					if (implicit) {
+						throw new IllegalArgumentException("Unexpected backtick at index "+i);
+					} else {
+						break outer;
+					}
+				}
+				default:
+					sb.append(c);
+			}
+		}
+
+		if (!implicit && i>=s.length()) {
+			throw new IllegalArgumentException("Unterminated template at index "+begin);
+		}
+		
+		//end of Template 
+		sb.append('"');
+		return i;
+	}
+	
+	/**Parse a Expression in {@code s} starting at index {@code i} and rewrite it into {@code sb}.
+	@param s The ES6 template literal
+	@param i The index into {@code s} where the expression begins.
+	@param sb The result buffer 
+	@return the index where the corresponding TemplateSubstitutionTail starts.
+	*/
+	private static int rewriteExpression(String s, int i, StringBuilder sb) {
+		int begin = i;
+
+		if (begin==s.length()) {
+			throw new IllegalArgumentException("Expected expression at index "+begin);
+		}
+		if (s.charAt(begin)=='}') {
+			throw new IllegalArgumentException("Unexpected token } at index "+begin);
+		}
+		
+		for (;i<s.length();i++) {
+			char c = s.charAt(i);
+			switch (c) {
+				case '}':
+					//TemplateSubstitutionTail
+					return i;
+				case '`':
+					//nested template literal
+					sb.append("(");
+					i = rewriteTemplate(s, i+1, sb, false);
+					sb.append(")");
+					continue;
+				case '"':
+					//fallthrough
+				case '\'':
+					int end = s.indexOf(c, i+1);
+					if (end<0) 
+						throw new IllegalArgumentException("Unterminated string literal at index "+i);
+					sb.append(s.substring(i,end)).append(c);
+					i = end;
+					continue;
+				default:
+					sb.append(c);
+			}
+		}
+		
+		throw new IllegalArgumentException("Expected TemplateSubstitutionTail at index "+begin);
+	}	
+	
+}