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

最新推荐文章于 2022-05-02 07:30:00 发布

六卿

最新推荐文章于 2022-05-02 07:30:00 发布

阅读量475

点赞数 1

分类专栏： # Twaver HTML5 2d基础文章标签： twaver html5 拓扑 react 网元 subnetwork

本文链接：https://blog.csdn.net/qq_43291759/article/details/124351983

版权

Twaver HTML5 2d基础专栏收录该内容

41 篇文章 10 订阅

订阅专栏

本文介绍了如何在TWaver HTML5的拓扑图中使用子网接口进行网络元素组织，并通过React代码展示了如何设置和切换子网。重点讲解了`SubNetwork`类的用法和`setCurrentSubnetwork`和`upSubNetwork`方法的应用。

摘要由CSDN通过智能技术生成

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