Twaver-HTML5基础学习(17)子网(SubNetwork)

子网(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