自动布局
拓扑应用有时需要一些常规的布局规则,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
学习参考:TWaver Documents