子网(SubNetwork)
子网接口,表示大型网络中的一小部分网络,TWaver HTML5中拓扑图可以切换子网,呈现的即是当前子网中的网元。子网接口的默认实现类是twaver.SubNetwork,拓扑图中默认双击进入子网,双击背景返回上层子网,当前子网为Null时表示是最顶层子网。
Vector中切换子网的方法:
//设置当前子网
get/setCurrentSubnetwork: function(subnetwork,animate)
//返回上级子网
upSubNetwork: function(animate)
react代码:
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-22 17:56:09
*/
import React, { useEffect, useState } from 'react'
import {
returnElementBoxAndNetworkFun,
returnNodeFun,
returnLineFun,
} 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 });
var tree = new twaver.controls.Tree(box);
var table = new twaver.controls.Table(box);
init()
function init() {
var tablePane = new twaver.controls.TablePane(table);
var rightSplit = new twaver.controls.SplitPane(network, tablePane, 'vertical', 0.7);
var mainSplitPane = new twaver.controls.SplitPane(tree, rightSplit, 'horizontal', 0.3);
var networkDom = mainSplitPane.getView();
networkDom.style.width = "100%";
networkDom.style.height = "100%";
document.getElementById("testID").appendChild(networkDom);
network.getView().style.backgroundColor = "#f3f3f3";
network.getView().style.cursor = "hand";
window.onresize = function () { mainSplitPane.invalidate(); }
initDataBox();
}
function initDataBox() {
var subNetworkA = new twaver.SubNetwork();
subNetworkA.setName("Subnetwork A");
subNetworkA.setLocation(20, 20);
box.add(subNetworkA);
var groupA = new twaver.Group({ name: 'groupA', location: { x: 100, y: 100 } });
box.add(groupA);
var nodeA = new twaver.Node({ name: 'nodeA', location: { x: 200, y: 200 } });
box.add(nodeA);
var link = new twaver.Link(groupA, nodeA);
box.add(link);
subNetworkA.addChild(nodeA);
subNetworkA.addChild(groupA);
subNetworkA.addChild(link);
var subNetworkB = new twaver.SubNetwork();
subNetworkB.setName("Subnetwork B");
subNetworkB.setLocation(120, 20);
box.add(subNetworkB);
}
}
useEffect(init, [])
return (
<>
<p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
<li>形状连线(ShapeLink)</li>
</ul>
{/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
</>
)
}
export default Demo
里面涉及到了还没学习的知识,后面学习了再做补充。
学习参考:TWaver Documents