From d10b3dfbe9baa6ba8ac049a526bf5e8775ee2389 Mon Sep 17 00:00:00 2001
From: rebecca0201 <rebeccalai@potix.com>
Date: Tue, 12 Sep 2023 16:38:33 +0800
Subject: [PATCH] ZK-4494: Tree shall provide enough information to decorate
 lines with CSS

---
 zkdoc/release-note                            |   1 +
 .../src/main/webapp/test2/F100-ZK-4494-1.zul  | 181 ++++++++++++++++++
 zktest/src/main/webapp/test2/F100-ZK-4494.zul |  51 +++++
 .../src/main/webapp/test2/config.properties   |   2 +
 .../webapp/test2/css/F100-ZK-4494-Style.css   |  31 +++
 .../main/resources/web/js/zul/sel/Treecell.ts |  13 +-
 .../resources/web/js/zul/sel/Treechildren.ts  |   8 +
 .../main/resources/web/js/zul/sel/Treerow.ts  |   6 +
 8 files changed, 288 insertions(+), 5 deletions(-)
 create mode 100644 zktest/src/main/webapp/test2/F100-ZK-4494-1.zul
 create mode 100644 zktest/src/main/webapp/test2/F100-ZK-4494.zul
 create mode 100644 zktest/src/main/webapp/test2/css/F100-ZK-4494-Style.css

diff --git a/zkdoc/release-note b/zkdoc/release-note
index ab0d9247560..8a15de32c9d 100644
--- a/zkdoc/release-note
+++ b/zkdoc/release-note
@@ -26,6 +26,7 @@ ZK 10.0.0
   ZK-5541: Move widget restriction check to Client MVVM
   ZK-5354: Update animation implementation to avoid iframe reloading
   ZK-4969: dropupload supports accept file type
+  ZK-4494: Tree shall provide enough information to decorate lines with CSS
 
 * Bugs
   ZK-5089: AfterSizeEvent doesn't return a correct size of a Window component
diff --git a/zktest/src/main/webapp/test2/F100-ZK-4494-1.zul b/zktest/src/main/webapp/test2/F100-ZK-4494-1.zul
new file mode 100644
index 00000000000..5a8af6291fc
--- /dev/null
+++ b/zktest/src/main/webapp/test2/F100-ZK-4494-1.zul
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+F100-ZK-4494-1.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Mon Sep 11 18:15:20 CST 2023, Created by rebeccalai
+
+Copyright (C) 2023 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+    <label multiline="true">
+        1. Click the toggle visible and move out/back button
+        2. Check that the lines decorate the tree structure correctly
+        3. Please ignore the small gaps between lines, they are caused by different row heights
+    </label>
+
+    <style src="/test2/css/F100-ZK-4494-Style.css"/>
+
+    <tree>
+        <treecols>
+            <treecol id="tcola" label="A" />
+        </treecols>
+        <treechildren>
+            <treeitem id="ti0" selected="true">
+                <treerow>
+                    <treecell label="A"/>
+                </treerow>
+                <treechildren>
+                    <treeitem selected="true">
+                        <treerow>
+                            <treecell label="A-1">
+                                <button label="toggle A-1-2 Visible" onClick="a12.setVisible(!a12.isVisible())"/>
+                            </treecell>
+                        </treerow>
+                        <treechildren>
+                            <treeitem selected="true">
+                                <treerow>
+                                    <treecell label="A-1-1">
+                                        <button label="toggle A-1-1-2 Visible" onClick="a112.setVisible(!a112.isVisible())"/>
+                                    </treecell>
+                                </treerow>
+                                <treechildren>
+                                    <treeitem selected="true">
+                                        <treerow>
+                                            <treecell label="A-1-1-1"/>
+                                        </treerow>
+                                    </treeitem>
+                                    <treeitem id="a112">
+                                        <treerow>
+                                            <treecell label="A-1-1-2" />
+                                        </treerow>
+                                    </treeitem>
+                                </treechildren>
+                            </treeitem>
+                            <treeitem id="a12">
+                                <treerow>
+                                    <treecell label="A-1-2">
+                                        <button label="toggle A-1-2-2 Visible" onClick="a122.setVisible(!a122.isVisible())"/>
+                                    </treecell>
+                                </treerow>
+                                <treechildren>
+                                    <treeitem selected="true">
+                                        <treerow>
+                                            <treecell label="A-1-2-1"/>
+                                        </treerow>
+                                    </treeitem>
+                                    <treeitem id="a122">
+                                        <treerow>
+                                            <treecell label="A-1-2-2" />
+                                        </treerow>
+                                    </treeitem>
+                                    <treeitem>
+                                        <treerow>
+                                            <treecell label="A-1-2-3">
+                                                <button label="toggle treerow A-1-2-3-1 Visible" onClick="a1231.setVisible(!a1231.isVisible())"/>
+                                            </treecell>
+                                        </treerow>
+                                        <treechildren>
+                                            <treeitem selected="true">
+                                                <treerow id="a1231">
+                                                    <treecell label="A-1-2-3-1"/>
+                                                </treerow>
+                                            </treeitem>
+                                            <treeitem>
+                                                <treerow>
+                                                    <treecell label="A-1-2-3-2" />
+                                                </treerow>
+                                            </treeitem>
+                                        </treechildren>
+                                    </treeitem>
+                                </treechildren>
+                            </treeitem>
+                        </treechildren>
+                    </treeitem>
+                    <treeitem>
+                        <treerow>
+                            <treecell label="A-2" />
+                        </treerow>
+                    </treeitem>
+                </treechildren>
+            </treeitem>
+            <treeitem>
+                <treerow>
+                    <treecell label="B" />
+                </treerow>
+                <treechildren>
+                    <treeitem selected="true">
+                        <treerow>
+                            <treecell label="B-1" />
+                        </treerow>
+                        <treechildren id="tc">
+                            <treeitem selected="true">
+                                <treerow>
+                                    <treecell label="B-1-1" />
+                                </treerow>
+                                <treechildren id="tc2">
+                                    <treeitem selected="true">
+                                        <treerow>
+                                            <treecell label="B-1-1-1" />
+                                        </treerow>
+                                    </treeitem>
+                                    <treeitem id="ti">
+                                        <treerow>
+                                            <treecell label="B-1-1-2" >
+                                                <button label="move out" onClick="ti.setParent(tc)"/>
+                                                <button label="move back" onClick="ti.setParent(tc2)"/>
+                                            </treecell>
+                                        </treerow>
+                                    </treeitem>
+                                </treechildren>
+                            </treeitem>
+                            <treeitem>
+                                <treerow>
+                                    <treecell label="B-1-2" />
+                                </treerow>
+                            </treeitem>
+                        </treechildren>
+                    </treeitem>
+                    <treeitem>
+                        <treerow>
+                            <treecell label="B-2" />
+                        </treerow>
+                    </treeitem>
+                </treechildren>
+            </treeitem>
+            <treeitem>
+                <treerow>
+                    <treecell label="C" />
+                </treerow>
+            </treeitem>
+        </treechildren>
+    </tree>
+    <tree checkmark="true" multiple="true">
+        <treecols>
+            <treecol label="A" />
+        </treecols>
+        <treechildren>
+            <treeitem selected="true">
+                <treerow>
+                    <treecell label="A" />
+                </treerow>
+                <treechildren>
+                    <treeitem selected="true">
+                        <treerow>
+                            <treecell label="A-1" />
+                        </treerow>
+                    </treeitem>
+                    <treeitem>
+                        <treerow>
+                            <treecell label="A-2" />
+                        </treerow>
+                    </treeitem>
+                </treechildren>
+            </treeitem>
+        </treechildren>
+    </tree>
+</zk>
\ No newline at end of file
diff --git a/zktest/src/main/webapp/test2/F100-ZK-4494.zul b/zktest/src/main/webapp/test2/F100-ZK-4494.zul
new file mode 100644
index 00000000000..5a64dbfb1de
--- /dev/null
+++ b/zktest/src/main/webapp/test2/F100-ZK-4494.zul
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+F100-ZK-4494.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Tue Sep 05 15:40:03 CST 2023, Created by rebeccalai
+
+Copyright (C) 2023 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+    <label multiline="true">
+        1. Check that the lines decorate the tree structure correctly
+    </label>
+
+    <style src="/test2/css/F100-ZK-4494-Style.css"/>
+
+    <tree>
+        <treechildren>
+            <treeitem label="item 1">
+                <treechildren>
+                    <treeitem label="item 1.1"/>
+                    <treeitem label="item 1.2">
+                        <treechildren>
+                            <treeitem label="item 1.2.1"/>
+                            <treeitem label="item 1.2.2">
+                                <treechildren>
+                                    <treeitem label="item 1.2.2.1"/>
+                                    <treeitem label="item 1.2.2.2"/>
+                                    <treeitem label="item 1.2.2.3"/>
+                                </treechildren>
+                            </treeitem>
+                            <treeitem label="item 1.2.3"/>
+                        </treechildren>
+                    </treeitem>
+                    <treeitem label="item 1.3">
+                        <treechildren>
+                            <treeitem label="item 1.3.1"/>
+                            <treeitem label="item 1.3.2"/>
+                        </treechildren>
+                    </treeitem>
+                </treechildren>
+            </treeitem>
+            <treeitem label="item 2"/>
+            <treeitem label="item 3"/>
+        </treechildren>
+    </tree>
+</zk>
\ No newline at end of file
diff --git a/zktest/src/main/webapp/test2/config.properties b/zktest/src/main/webapp/test2/config.properties
index c9cf694afa0..b572ca016a7 100644
--- a/zktest/src/main/webapp/test2/config.properties
+++ b/zktest/src/main/webapp/test2/config.properties
@@ -3782,6 +3782,8 @@ F86-ZK-4235.zul=A,E,datefmt,library-property
 ##zats##F100-ZK-5354.zul=A,E,Iframe,Animation,reload
 ##zats##F100-ZK-5354-2.zul=A,E,Ckeditor,Animation,reload
 ##manually##F100-ZK-4969.zul=A,E,Dropupload,accept,type
+##manually##F100-ZK-4494.zul=A,E,Tree,CSS
+##manually##F100-ZK-4494-1.zul=A,E,Tree,CSS
 
 # Complex Test Case
 #
diff --git a/zktest/src/main/webapp/test2/css/F100-ZK-4494-Style.css b/zktest/src/main/webapp/test2/css/F100-ZK-4494-Style.css
new file mode 100644
index 00000000000..1a9d3502141
--- /dev/null
+++ b/zktest/src/main/webapp/test2/css/F100-ZK-4494-Style.css
@@ -0,0 +1,31 @@
+.z-treecell-content > span {
+    position: relative;
+}
+
+.z-treerow, .z-treecell, .z-treecell-content {
+    overflow: visible !important;
+}
+
+/* vertical lines */
+span.z-tree-spacer::before {
+    left: 50%;
+    bottom: 50%;
+    width: 100%;
+    height: 280%;
+    content: "";
+    position: absolute;
+    display: inline-block;
+    border-left: 1px solid black;
+}
+
+/* horizontal lines */
+span:nth-last-of-type(3).z-tree-spacer::before,
+span:nth-last-of-type(3).z-tree-spacer + span.z-tree-spacer::before {
+    border-bottom: 1px solid black;
+}
+
+/* omitted vertical lines */
+span.z-tree-line-omit::before,
+span:nth-last-of-type(2).z-tree-spacer::before {
+    border-left: none;
+}
diff --git a/zul/src/main/resources/web/js/zul/sel/Treecell.ts b/zul/src/main/resources/web/js/zul/sel/Treecell.ts
index adb7e31b448..480adeafd7e 100644
--- a/zul/src/main/resources/web/js/zul/sel/Treecell.ts
+++ b/zul/src/main/resources/web/js/zul/sel/Treecell.ts
@@ -218,9 +218,11 @@ export class Treecell extends zul.LabelImageWidget<HTMLTableCellElement> {
 			}
 			var iconScls = tree ? tree.getZclass() : '',
 				pitems = this._getTreeitems(item, tree);
-			for (var j = 0, k = pitems.length; j < k; ++j)
-				this._appendIcon(sb, iconScls, 'spacer', false);
-
+			for (var j = 0, k = pitems.length; j < k; ++j) {
+				// ZK-4494: Add information about whether a line should be omitted when decorating
+				const omit = j < k - 1 && pitems[j + 1].treerow?.isLastVisibleChild_();
+				this._appendIcon(sb, iconScls, 'spacer', false, omit);
+			}
 			if (item.isContainer()) {
 				var name = item.isOpen() ? 'open' : 'close';
 				this._appendIcon(sb, iconScls, name, true);
@@ -251,11 +253,12 @@ export class Treecell extends zul.LabelImageWidget<HTMLTableCellElement> {
 	}
 
 	/** @internal */
-	_appendIcon(sb: string[], iconScls: string, name: string, button: boolean): void {
+	_appendIcon(sb: string[], iconScls: string, name: string, button: boolean, omit?: boolean): void {
 		var openCloseIcon = '';
 		sb.push('<span class="');
 		if (name == 'spacer') {
-			sb.push(iconScls, '-line ', iconScls, '-', name, '"');
+			// ZK-4494: Add information about whether a line should be omitted when decorating lines
+			sb.push(iconScls, '-line ', iconScls, '-', name, omit ? (' ' + iconScls + '-line-omit') : '', '"');
 		} else {
 			var id = '';
 			if (button) {
diff --git a/zul/src/main/resources/web/js/zul/sel/Treechildren.ts b/zul/src/main/resources/web/js/zul/sel/Treechildren.ts
index 8c0093eed47..cc23a132790 100644
--- a/zul/src/main/resources/web/js/zul/sel/Treechildren.ts
+++ b/zul/src/main/resources/web/js/zul/sel/Treechildren.ts
@@ -298,4 +298,12 @@ export class Treechildren extends zul.Widget {
 		}
 		child.bind(desktop, skipper);
 	}
+
+	/** @internal */
+	getLastVisibleItem_(): zul.sel.Treeitem | undefined {
+		for (let w = this.lastChild; w; w = w.previousSibling) {
+			if (w._isVisibleInTree()) return w;
+		}
+		return undefined;
+	}
 }
\ No newline at end of file
diff --git a/zul/src/main/resources/web/js/zul/sel/Treerow.ts b/zul/src/main/resources/web/js/zul/sel/Treerow.ts
index 3de15667dbb..548a04030c2 100644
--- a/zul/src/main/resources/web/js/zul/sel/Treerow.ts
+++ b/zul/src/main/resources/web/js/zul/sel/Treerow.ts
@@ -147,4 +147,10 @@ export class Treerow extends zul.Widget<HTMLTableRowElement> {
 			}
 		}
 	}
+
+	/** @internal */
+	isLastVisibleChild_(): boolean {
+		const treeitem = this.parent;
+		return !!treeitem && treeitem == treeitem.parent?.getLastVisibleItem_();
+	}
 }
\ No newline at end of file