diff --git a/pom.xml b/pom.xml
index 9764001..3262471 100644
--- a/pom.xml
+++ b/pom.xml
@@ -2,7 +2,7 @@
4.0.0
com.flowingcode.vaadin.addons
orgchart-addon
- 5.1.1-SNAPSHOT
+ 5.2.0-SNAPSHOT
OrgChart Add-on
diff --git a/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChartItem.java b/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChartItem.java
index 27340cf..b781a87 100644
--- a/src/main/java/com/flowingcode/vaadin/addons/orgchart/OrgChartItem.java
+++ b/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 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;
diff --git a/src/main/resources/META-INF/frontend/fc-orgchart.js b/src/main/resources/META-INF/frontend/fc-orgchart.js
index 2173517..6071b4e 100644
--- a/src/main/resources/META-INF/frontend/fc-orgchart.js
+++ b/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;
diff --git a/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css b/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css
index 460a0ef..29c2f0e 100644
--- a/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css
+++ b/src/main/resources/META-INF/resources/frontend/fc-orgchart-styles.css
@@ -26,3 +26,7 @@
.orgchart .node .content {
overflow: hidden;
}
+
+.orgchart {
+ background-image: none;
+}
diff --git a/src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridDataPropertyDemo.java b/src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridDataPropertyDemo.java
new file mode 100644
index 0000000..556bded
--- /dev/null
+++ b/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 =
+ "${item.title}
"
+ + "${item.name}
"
+ + "${item.data.mail?`${item.data.mail}
`:''}";
+ 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);
+ }
+}
diff --git a/src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridEnhancedChartDemo.java b/src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridEnhancedChartDemo.java
index 4fa2b6f..2d404b2 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/orgchart/HybridEnhancedChartDemo.java
+++ b/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);
diff --git a/src/test/java/com/flowingcode/vaadin/addons/orgchart/OrgchartDemoView.java b/src/test/java/com/flowingcode/vaadin/addons/orgchart/OrgchartDemoView.java
index 9841a13..f714811 100644
--- a/src/test/java/com/flowingcode/vaadin/addons/orgchart/OrgchartDemoView.java
+++ b/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);
}
}