Tree
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-29 15:27:48
*/
import React, {
useEffect, useState } from 'react'
import {
returnElementBoxAndNetworkFun,
returnNodeFun,
returnLineFun,
returnRegisterImage,
returnGroupFun
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
const [network, setnetwork] = useState({
})
const init = () => {
const [box, network] = returnElementBoxAndNetworkFun()
setnetwork(_ => network)
network.invalidateElementUIs();
document.getElementById("testID").appendChild(network.getView());
// 设置最初的大小
network.adjustBounds({
x: 0, y: 0, width: 800, height: 800 });
// network.getView().style.backgroundColor = "#fff"
network.getView().style.border = "2px solid #ccc"
// var toolbar = document.createElement('div');
var from = new twaver.Node();
from.setName('From');
from.setLocation(100, 100);
box.add(from);
var to = new twaver.Node();
to.setName('To');
to.setLocation(300, 300);
to.setToolTip("哈哈哈")
box.add(to);
var liuqing = new twaver.Node();
liuqing.setName('liuqing');
liuqing.setLocation(500, 300);
box.add(liuqing);
var link = new twaver.Link(from, to);
link.setName('Link');
box.add(link);
let treeObj = new twaver.controls.Tree(box)
let treeDiv = treeObj.getView()
treeDiv.style.width = "200px";
treeDiv.style.height = "100%";
document.getElementById("testID").appendChild(treeDiv);
treeObj.getInnerColor = function (data) {
return twaver.Colors.blue_dark;
};
// 树节点边框颜色
treeObj.getOuterColor = function (data) {
return "#00ff00";
// return twaver.Colors.orange_dark;
};
}
useEffect(init, [])
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>过滤器</li>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
</>
)
}
export default Demo
首先将box传入new twaver.controls.Tree(box)；
得到的treeObj需要我们设置宽高，通过getView获取dom元素，设置宽高，将dom添加至页面上document.getElementById(“testID”).appendChild(treeDiv);
另外树组件还支持勾选模式，通过树节点前面的勾选框表示节点的选中状态。设置勾选模式的方法如下：
/**
* Tree提供四种勾选模式：
* default:默认勾选模式,所有节点均可以勾选
* children:孩子勾选模式,所有的分支节点可以勾选
* descendant:子孙勾选模式,父节点被勾选,则其子孙节点自动被勾选
* descendantAncestor:子孙祖先勾选模式,父节点被勾选，则子孙节点自动被勾选，子孙节点被勾选，则其祖先节点也自动勾选
*/
Tree.setCheckMode(v);//如tree.setCheckMode('descendantAncestor');
Tree引导线
在树中显示引导线，不仅美观，而且使得层次感清晰。TWaver中的Tree加入引导线的方法如下：
tree.setLineType(type)//type的值为'none'、'dotted'、'solid'
设置线条样式的方法有：
tree.setLineType('solid');//线条类型
tree.setLineColor('#000000');//线条颜色
tree.setLineAlpha(1);//线条透明度
tree.setLineThickness(1);//线条厚度
tree.setLineDash([10,2]);//线条虚线样式，在linetype为'dotted'情况下有效。
常见问题
修改tree展开闭合图标
twaver默认情况下，tree的toggle图标定义如下:
tree.getToggleImage = function (data) {
if (data.getChildrenSize() > 0) {
return this.isExpanded(data) ? this._expandIcon : this._collapseIcon;
}
return null;
};
我们欲实现自定义的图标样式，以及控制网元是否显示Toggle图标，只需要重新实现该方法。
示例：tree中所有行均显示Toggle图标。
p.getToggleImage = function (data) {
return twaver.Defaults.TREE_COLLAPSE_ICON;
};
当然我们也可以使用自己的图标，记得要先注册图标。
tree监听事件
tree.addInteractionListener(function(evt) {
console.log(evt);
if(evt.kind == "doubleClick") {
console.log(evt.data.getName());
}
});
tree监听勾选事件
tree.getView().addEventListener('change', function (e) {
var data = e.target._checkData;
console.log(data);
}, false);
控制显示复选框
//重写isCheckabke方法实现自定义复选框显示状态
tree.isCheckable = function(element) {
if(element.getChildrenSize() == 0) {
return true;
}
return false;};
是否显示当前被选中的网元
tree.setMakeVisibleOnSelected(false);
学习参考：TWaver Documents
