feat(demo): add new demo using node template and image in title

Author: paodb

src/test/java/com/flowingcode/vaadin/addons/orgchart/ImageInTitleDemo.java

@@ -0,0 +1,97 @@
+/*-
+ * #%L
+ * OrgChart Add-on
+ * %%
+ * Copyright (C) 2017 - 2020 Flowing Code S.A.
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.orgchart;
+
+import java.util.Arrays;
+
+import com.flowingcode.vaadin.addons.orgchart.extra.TemplateLiteralRewriter;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+
+@SuppressWarnings("serial")
+public class ImageInTitleDemo extends VerticalLayout {
+
+  public ImageInTitleDemo() {
+    OrgChart component = getOrgChartData();
+    String nodeTemplate =
+        "<div class='title'>"
+    		+ "${item.data.imageUrl?`<img src=${item.data.imageUrl}></img>`:''}"
+        	+ "${item.title}</div>"	
+            + "<div class='middle content'>${item.name}</div>"
+            + "${item.data.mail?`<div class='custom content'>${item.data.mail}</div>`:''}";
+    component.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));
+    component.addClassNames("chart-container", "image-title-demo");
+
+    component.setChartTitle(
+        "My Organization Chart Demo - Example 3 - CUSTOM TEMPLATE WITH IMAGE IN TITLE");
+    component.setChartNodeContent("title");
+    component.setChartExportButton(true);
+    component.setChartExpandCollapse(true);
+    
+    setSizeFull();
+    add(component);
+  }
+
+  private OrgChart getOrgChartData() {
+    OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
+    item1.setData("mail", "[email protected]");
+    item1.setData("imageUrl", "images/users.png");
+    
+    OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
+    item2.setData("mail", "[email protected]");
+    item2.setData("imageUrl", "images/users.png");
+    
+    OrgChartItem item3 =
+        new OrgChartItem(
+            3, "Timothy Albert Henry Jones ", "Sub-Director of Administration Department");
+    item3.setData("mail", "[email protected]");
+    item3.setData("imageUrl", "images/user.png");
+    
+    item1.setChildren(Arrays.asList(item2, item3));
+    
+    OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Department 1");
+    item4.setData("mail", "[email protected]");
+    item4.setData("imageUrl", "images/user.png");
+    
+    OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Department 2");
+    item5.setData("mail", "[email protected]");
+    item5.setData("imageUrl", "images/user.png");
+    
+    OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Department 3");
+    item6.setData("mail", "[email protected]");
+    item6.setData("imageUrl", "images/users.png");
+    
+    item2.setChildren(Arrays.asList(item4, item5, item6));
+    
+    OrgChartItem item7 = new OrgChartItem(7, "Michael Wood", "Section 3.1");
+    item7.setData("imageUrl", "images/user.png");
+    
+    OrgChartItem item8 = new OrgChartItem(8, "Martha Brown", "Section 3.2");
+    item8.setData("imageUrl", "images/user.png");
+    
+    OrgChartItem item9 = new OrgChartItem(9, "Mary Parker", "Section 3.3");
+    item9.setData("imageUrl", "images/user.png");
+    OrgChartItem item10 = new OrgChartItem(10, "Mary Williamson", "Section 3.4");
+    item10.setData("imageUrl", "images/user.png");
+    
+    item6.setChildren(Arrays.asList(item7, item8, item9, item10));
+    
+    return new OrgChart(item1);
+  }
+}

src/test/java/com/flowingcode/vaadin/addons/orgchart/OrgchartDemoView.java

@@ -38,9 +38,13 @@ public class OrgchartDemoView extends TabbedDemo {
       "https://github.com/FlowingCode/OrgChartAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/orgchart/DragAndDropExportDemo.java";
   private static final String BOTTOMTOP_SOURCE =
       "https://github.com/FlowingCode/OrgChartAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/orgchart/BottomTopDemo.java";
+  private static final String IMAGETITILE_DEMO = "Image in Title";
+  private static final String IMAGETITILE_SOURCE =     
+	  "https://github.com/FlowingCode/OrgChartAddon/blob/master/src/test/java/com/flowingcode/vaadin/addons/orgchart/ImageInTitleDemo.java";
 
   public OrgchartDemoView() {
     addDemo(new DragAndDropExportDemo(), DRAGNDROP_DEMO, DRAGNDROP_SOURCE);
     addDemo(new BottomTopDemo(), BOTTOMTOP_DEMO, BOTTOMTOP_SOURCE);
+    addDemo(new ImageInTitleDemo(), IMAGETITILE_DEMO, IMAGETITILE_SOURCE);
   }
 }

src/test/resources/META-INF/resources/frontend/styles/orgchart/demo-styles.css

@@ -58,3 +58,13 @@ vaadin-checkbox.smallcheckbox {
 fc-orgchart p {
 	max-width:70%;
 }
+
+.image-title-demo .orgchart .title .symbol {
+	display:none
+}
+
+.image-title-demo img {
+	float: left;
+	margin-top: 4px;
+    margin-left: 2px;
+}