Add support to make an item "hybrid"

pom.xml

@@ -2,7 +2,7 @@
 	<modelVersion>4.0.0</modelVersion>
 	<groupId>com.flowingcode.vaadin.addons</groupId>
 	<artifactId>orgchart-addon</artifactId>
-	<version>5.1.1-SNAPSHOT</version>
+	<version>5.2.0-SNAPSHOT</version>
 	<name>OrgChart Add-on</name>
 
     <properties>

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

@@ -28,6 +28,8 @@
 import java.util.Map;
 import java.util.Optional;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
+
 /** @author pbartolo */
 @SuppressWarnings("serial")
 public class OrgChartItem implements Serializable {
@@ -44,6 +46,8 @@ public class OrgChartItem implements Serializable {
 
   private Map<String, String> data;
 
+  private boolean hybrid;
+
   public OrgChartItem(Integer id, String name, String title) {
     super();
     this.id = id;
@@ -129,6 +133,30 @@ public void addChildren(OrgChartItem item) {
     this.children.add(item);
   }
 
+  /**
+   * Indicates whether this item is a hybrid node.
+   * A hybrid node arranges its descendant children vertically instead of
+   * horizontally.
+   *
+   * @return {@code true} if this item is hybrid; {@code false} otherwise
+   */
+  public boolean isHybrid() {
+    return this.hybrid;
+  }
+
+  /**
+   * Sets whether this item is a hybrid node.
+   * When {@code true}, the item's descendant children will be arranged
+   * vertically.
+   *
+   * @param hybrid {@code true} to mark this node as hybrid; {@code false}
+   *               otherwise
+   */
+  @JsonProperty("isHybrid")
+  public void setHybrid(boolean hybrid) {
+    this.hybrid = hybrid;
+  }
+
   @Override
   public int hashCode() {
     final int prime = 31;

src/main/resources/META-INF/frontend/fc-orgchart.js

@@ -118,7 +118,6 @@ class FCOrgChart extends PolymerElement {
         }
 
   		$("div.orgchart").prev().closest("div").attr("id", "chart-container");
-  		this.querySelector(".orgchart").style.setProperty("background-image","none");
 
   		// workaround  for direction b2t with node template  without content div
   		var direction = state.chartDirection;

src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css

@@ -26,3 +26,7 @@
 .orgchart .node .content {
 	overflow: hidden;
 }
+
+.orgchart {
+	background-image: none;
+}

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

@@ -0,0 +1,85 @@
+/*-
+ * #%L
+ * OrgChart Add-on
+ * %%
+ * Copyright (C) 2017 - 2025 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.demo.DemoSource;
+import com.flowingcode.vaadin.addons.orgchart.extra.TemplateLiteralRewriter;
+import com.vaadin.flow.component.orderedlayout.VerticalLayout;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+@SuppressWarnings("serial")
+@PageTitle("Hybrid Data Property")
+@DemoSource
+@Route(value = "orgchart/hybrid-data-property", layout = OrgchartDemoView.class)
+public class HybridDataPropertyDemo extends VerticalLayout {
+
+    public HybridDataPropertyDemo() {
+    OrgChart component = getExample();
+    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>`:''}";
+    component.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));
+    component.addClassName("chart-container");
+    component.setChartTitle(
+        "My Organization Chart Demo - Example 5 - HYBRID DATA PROPERTY WITH CUSTOM TEMPLATE");
+    component.setChartNodeContent("title");       
+    setSizeFull();
+    add(component);
+  }
+
+  private OrgChart getExample() {
+    OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
+    item1.setData("mail", "jwilliams@example.com");
+    item1.setClassName("blue-node");
+    OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
+    item2.setData("mail", "athomp@example.com");
+    item2.setClassName("blue-node");
+
+    // set item 2 as hybrid
+    item2.setHybrid(true);
+
+    OrgChartItem item3 =
+        new OrgChartItem(
+            3, "Timothy Albert Henry Jones ", "Sub-Director of Administration Department");
+    item3.setData("mail", "timothy.albert.jones@example.com");
+    item1.setChildren(Arrays.asList(item2, item3));
+    OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Department 1");
+    item4.setData("mail", "lnight@example.com");
+    OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Department 2");
+    item5.setData("mail", "jporter@example.com");
+    OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Department 3");
+    item6.setData("mail", "ctomas@example.com");
+
+    // set item 6 as hybrid
+    item6.setHybrid(true);
+
+    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 item10 = new OrgChartItem(10, "Mary Williamson", "Section 3.4");
+    item6.setChildren(Arrays.asList(item7, item8, item9, item10));
+    return new OrgChart(item1);
+  }
+}

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

@@ -64,7 +64,7 @@ public HybridEnhancedChartDemo() {
     iconsAnchor.setTitle("people icons");
     iconsDiv.add(iconsAnchor);
 
-    orgchart.setChartTitle("My Organization Chart Demo - Example 4 - HYBRID CHART WITH CUSTOM TEMPLATE" + iconsDiv.getElement());
+    orgchart.setChartTitle("My Organization Chart Demo - Example 4 - HYBRID CHART USING VERTICALLEVEL PROPERTY WITH CUSTOM TEMPLATE" + iconsDiv.getElement());
 
     setSizeFull();
     add(orgchart);

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

@@ -40,5 +40,6 @@ public OrgchartDemoView() {
 	addDemo(BottomTopDemo.class);
 	addDemo(ImageInTitleDemo.class);
 	addDemo(HybridEnhancedChartDemo.class);
+	addDemo(HybridDataPropertyDemo.class);
   }
 }