Twaver-HTML5基础学习(31)Tree基本使用

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);
学习参考：TWaver Documents