Twaver-HTML5基础学习(33)自动布局

自动布局

拓扑应用有时需要一些常规的布局规则，TWaver Network组件支持布局模型和使用方法分别如下:

//创建Autolayouter并绑定DataBox
var autoLayouter = new twaver.layout.AutoLayouter(box);
//开始布局,参数分别为布局类型和回调函数 
autoLayouter.doLayout(type,callback);

type为类型，callback回调函数
类型分类：

 var items = ['round', 'symmetry', 'topbottom', 'bottomtop', 'leftright', 'rightleft', 'hierarchic'];

例子：

react代码：

/*
 * @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,
    returnAlarmFun, ALARM4
} from './utils'
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 toolbar = document.createElement('div');
        network.invalidateElementUIs();
        // network.adjustBounds({ x: 0, y: 0, width: 800, height: 800 });
        // document.getElementById("testID").appendChild(network.getView());
        var autoLayouter = new twaver.layout.AutoLayouter(box);

        var pane = new twaver.controls.BorderPane(network, toolbar);
        // // pane.setTopHeight(25);
        var view = pane.getView();
        view.style.left = '0px';
        view.style.top = '0px';
        view.style.right = '0px';
        view.style.bottom = '0px';
        document.getElementById("testID").appendChild(view);


        var from1 = new twaver.Node();
        from1.setName('from1');
        box.add(from1);
        var to = new twaver.Node();
        to.setName('To');
        box.add(to);
        var from2 = new twaver.Node();
        from2.setName('from2');
        box.add(from2);
        var from3 = new twaver.Node();
        from3.setName('from3');
        box.add(from3);
        var from4 = new twaver.Node();
        from4.setName('from4');
        box.add(from4);
        var link = new twaver.Link(from1, to);
        var link2 = new twaver.Link(from2, to);
        var link3 = new twaver.Link(from3, to);
        var link4 = new twaver.Link(from4, to);
        link.setName('Link');
        link2.setName('link2');
        link3.setName('link3');
        link4.setName('link4');
        box.add(link);
        box.add(link2);
        box.add(link3);
        box.add(link4);
        autoLayouter.doLayout('round', function () {
            network.zoomOverview(false);
        });
        // initNetwork();
        // return
        initToolbar();


        function initToolbar() {
            var autoLayouterType = document.createElement('select');
            var items = ['round', 'symmetry', 'topbottom', 'bottomtop', 'leftright', 'rightleft', 'hierarchic'];
            items.forEach(function (item) {
                var option = document.createElement('option');
                option.appendChild(document.createTextNode(item));
                option.setAttribute('value', item);
                autoLayouterType.appendChild(option);
            });
            autoLayouterType.addEventListener('change', function () {
                doLayout(autoLayouterType.value);
            }, false);
            toolbar.appendChild(autoLayouterType);
        }

        function doLayout(type) {
            autoLayouter.doLayout(type, function () {
                network.zoomOverview(false);
            });
        }

        function addCheckBox(div, checked, name, callback) {
            var checkBox = document.createElement('input');
            checkBox.id = name;
            checkBox.type = 'checkbox';
            checkBox.style.padding = '4px 4px 4px 4px';
            checkBox.style.border = '4px solid red';
            checkBox.checked = checked;
            if (callback) checkBox.addEventListener('click', callback, false);
            div.appendChild(checkBox);
            var label = document.createElement('label');
            label.htmlFor = name;
            label.innerHTML = name;
            div.appendChild(label);
            return checkBox;
        }


    }
    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

BorderPane使用

学习参考：TWaver Documents