Twaver-HTML5基础学习(41)列表可视化视图组件

列表可视化视图组件(List)

效果图：

可以生成一个列表，将box中的元素全部展示出来
添加组元素：


ctrl加点击 多选

twaver.controls.List

以列表的形式来展示数据容器中的数据

官方文档链接：http://doc.servasoft.com/uploads/twaver-html5-5.9.0-api/classes/twaver.controls.List.html

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-05-11 16:00:53
 */
import React, { useEffect, useState } from 'react'

const twaver = require('twaver');

// const demo = require('demo');
const Demo = () => {
    const [network, setnetwork] = useState({})
    const init = () => {
        var box = new twaver.ElementBox();
        var network = new twaver.vector.Network(box);
        var list = new twaver.controls.List(box);
        init()
        initNetwork()
        function init() { initTable(); initDataBox(); }
        function initTable() {
            var listPan = list.getView();
            listPan.style.width = "200px";
            listPan.style.height = "100%";
            document.getElementById("testID").appendChild(listPan);
            // 间隔宽度
            list.setRowLineWidth(10);
            // 行高
            list.setRowHeight(50);
            // 间隔颜色
            list.setRowLineColor(twaver.Colors.blue_dark);
            // 排序
            list.setSortFunction(function (node1, node2) {
                if (!node1) { return -1; }
                if (!node2) { return 1; }
                return node2.getId() - node1.getId();
            });
        }
        function initNetwork() {
            var view = network.getView();
            document.getElementById("testID").appendChild(view);
            network.adjustBounds({ x: 0, y: 0, width: 1300, height: 600 });
        }
        function initDataBox() {
            var from = new twaver.Node({ name: 'from', location: { x: 300, y: 300 } });
            box.add(from);
            var to = new twaver.Node({ name: 'to', location: { x: 500, y: 500 } });
            box.add(to);
            var link = new twaver.Link(from, to);
            box.add(link);
            var i = 10; 
            let group = new twaver.Group({name:"group",location:{x:400,y:400}})
            box.add(group)
            while (i-- > 0) {
                var data = new twaver.Node();
                data.setName("TWaver-" + i);
                data.setParent(from);
                data.setLocation(i*40 + 200,i*40)
                data.s('inner.color', randomColor());
                group.addChild(data)
                box.add(data);
            }

        }

        function randomColor() {
            var r = randomInt(255);
            var g = randomInt(255);
            var b = randomInt(255);
            return '#' + formatNumber((r << 16) | (g << 8) | b);
        }

        function randomInt(n) {
            return Math.floor(Math.random() * n);
        }

        function formatNumber(value) {
            var result = value.toString(16);
            while (result.length < 6) { result = '0' + result; } return result;
        }
    }
    useEffect(init, [])


    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>List</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents