/*******************************************************************************
This file is part of the Shellfish UI toolkit.
Copyright (c) 2023 Martin Grimme <martin.grimme@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*******************************************************************************/
require "shellfish/ui";
/**
* Element representing a tree branch for showing a tree node in a list view.
*
* This element may, for instance, be used in the delegate of a {@link html.ListView}
* with a {@link core.TreeModelAdapter} as model for adding a tree view UI.
*
* Example:
* ```
* ListView {
* fill: true
*
* model: treeModel
* cellWidth: bboxWidth
* cellHeight: theme.itemHeightSmall
*
* delegate: template Box {
* layout: "center-row"
*
* TreeBranch {
fillHeight: true
* level: modelData.value.level
* nodeStatus: modelData.value.nodeStatus
* nodeType: modelData.value.nodeType
* }
*
* Label {
* marginLeft: theme.paddingSmall
* text: modelData.value.text
* }
* }
* }
* ```
*
* @memberof ui
* @name TreeBranch
* @class
* @extends html.Box
*
* @property {bool} branchLines - (default: `true`) Whether to show the branch lines.
* @property {core.Color} branchLinesColor - (default: `theme.borderColor`) The color of the branch lines.
* @property {string} collapsedIcon - (default: `"core-arrow_right"`) The icon to use for collapsed non-leaf nodes.
* @property {core.Color} iconColor - (default: `theme.borderColor`) The color of the icon.
* @property {string} leafIcon - (default: `"core-file-empty"`) The icon to use for leaf nodes.
* @property {number} level - (default: `0`) The depth level of this node.
* @property {object} nodeStatus - (default: `{ }`) The node status object for this node.
* @property {string} nodeType - (default: `node`) The type of this node. One of `node|leaf`
* @property {string} uncollapsedIcon - (default: `"core-arrow_down"`) The icon to use for uncollapsed non-leaf nodes.
*/
Box {
id: branch
// the depth level in the tree
property level: 0
// the type of node
property nodeType: "node"
property nodeStatus: ({ })
property branchLines: true
property branchLinesColor: theme.borderColor
property leafIcon: "core-file-empty"
property collapsedIcon: "core-arrow_right"
property uncollapsedIcon: "core-arrow_down"
property iconColor: theme.primaryColor
/**
* Is triggered when the user clicked the collapse/uncollapse button.
*
* @memberof ui.TreeBranch.prototype
* @name click
* @event
* @param {html.MouseBox.PointerEvent} event - The pointer event of the click.
*/
event click
layout: "row"
// indentation with branch lines
Box {
fillHeight: true
layout: "row"
Repeater {
model: branch.level
delegate: template Box {
property verticalLine: branch.nodeStatus.verticals[modelData.index];
property drawLine: true
width: theme.itemWidthSmall
fillHeight: true
color: drawLine ? "transparent" : "red"
// upper vertical line
Box {
visible: branch.branchLines && parent.verticalLine !== 0
position: "free"
x: parent.bboxWidth / 2
width: 1
height: parent.bboxHeight / 2
color: branch.branchLinesColor
}
// lower vertical line
Box {
visible: branch.branchLines && parent.verticalLine === 2
position: "free"
x: parent.bboxWidth / 2
y: parent.bboxHeight / 2
width: 1
height: parent.bboxHeight / 2
color: branch.branchLinesColor
}
// horizontal line
Box {
visible: branch.branchLines && modelData.index === thisRepeater.count - 1
position: "free"
x: parent.bboxWidth / 2
y: parent.bboxHeight / 2
width: parent.bboxWidth / 2
height: 1
color: branch.branchLinesColor
}
}
}
}
Button {
id: collapseButton
visible: branch.nodeType === "node"
width: bboxHeight
fillHeight: true
flat: true
icon: branch.nodeStatus.collapsed ? branch.collapsedIcon
: branch.uncollapsedIcon
labelProfile: Object {
property color: branch.iconColor
}
onClick: ev =>
{
branch.click(ev);
}
}
Box {
visible: branch.nodeType === "leaf"
width: bboxHeight
fillHeight: true
layout: "center"
Label {
color: branch.iconColor
text: "[icon:" + branch.leafIcon + "]"
}
}
}