Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group

学习到什么：

可以学习到twaver.Data身上除了基础属性以外的其他方法；
学习组的概念，Group；
学习通过变量组得到满足条件的图元；

其他功能函数

//获取所有子网元
getChildren:function()
getChildSize:function()
//获取符合macthFunction的所有childs组成的List
toChildren:function(macthFunction,scope)
addChild:function(child,index)
removeChild:function(child)
getChildAt:function(index)
clearChildren:function()
getParent:function()
setParent:function(parent)
hasChildren:function()
isRelatedTo:function(data)// 是否有关联
isParentOf:function(data)
isDescendantOf:function(data) //是否是后代

toChildren函数的使用

parent为组对象

//toChildren:function(macthFunction,scope)的使用方法
parent.toChildren(function(e){
   
    return e.getName() === 'vector';
});

例子：

封装JS工具类（本例子用到的）；

const twaver = require('twaver');
// 设置每个图元name的颜色
twaver.Styles.setStyle('label.color', '#ec6c00');
// 设置每个图元name2的颜色
twaver.Styles.setStyle('label2.color', '#57ab9a');
//选中颜色
twaver.Styles.setStyle('select.color', '#ef8200');

/**
 * 创建一个dataBox容器
 * 容器中可以add图元
 */
export const returnElementBoxFun = () => new twaver.ElementBox()


/**
 * 创建一个画布 network对象
 * @param {ElementBox} box  创建一个画布 network对象
 */
export const returnNetworkFun = (box) => new twaver.vector.Network(box)

/**
 * 创建一个Group
 * 用于包裹图元
 */
export const returnGroupFun = (box,obj = {
   }) => {
   
    let group = new twaver.Group(obj) 
    box.add(group)
    return group
}



/**
 * 创建一个容器dataBox和一个画布
 * 并将容器实例化画布
 * @returns [box,network] box network
 */
export const returnElementBoxAndNetworkFun = () => {
   
    let box = returnElementBoxFun();
    let network = returnNetworkFun(box);
    return [box, network]
}

/**
 * 用于创建一个节点
 * @param {ElementBox} box dataBox 
 * @param {String} name 当前节点的name
 * @param {Number} x   当前节点的x坐标
 * @param {Number} y 当前节点的y坐标
 * @returns {Node} Node
 */
export const returnNodeFun = (box, Obj = {
   }) => {
   
    let node = new twaver.Node(Obj);
    // node.setName(name);
    // node.setLocation(x, y);
    box.add(node);
    return node
}

/**
 * 
 * @param {Node} node1 节点1
 * @param {Node} node2 节点2
 */
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

/**
 * 注册图片 用于设置图元的img setImage
 * @param {String} url 图片 url
 * @param {NetWork} svg  NetWork对象
 */
export function returnRegisterImage(url, svg) {
   
    var image = new Image();
    image.src = url;
    var views = arguments;
    image.onload = function () {
   
        // getImageName 获取到的图片name用做 node节点的显示img
        twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true);
        image.onload = null;
        for (var i = 1; i < views.length; i++) {
   
            var view = views[i];
            if (view.invalidateElementUIs) {
   
                view.invalidateElementUIs();
            }
            if (view.invalidateDisplay) {
   
                view.invalidateDisplay();
            }
        }
    };
    // getImageName 获取到的图片name用做 node节点的显示img
    const getImageName = (url) => {
   
        var index = url.lastIndexOf('/');
        var name = url;
        if (index >= 0) {
   
            name = url.substring(index + 1);
        }
        index = name.lastIndexOf('.');
        if (index >= 0) {
   
            name = name.substring(0, index);
        }
        return name;
    }
}

react页面

import React, {
    useEffect, useState } from 'react'
import {
   
    // returnElementBoxFun,
    // returnNetworkFun,
    returnGroupFun,
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
} from './utils'
// const demo = require('demo');
const Demo = () => {
   
    const [network, setnetwork] = useState({
   })
    const init = () => {
   
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        // network.style.position = 'absolute';
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({
    x: 0, y: 0, width: 800, height: 800 });

        let node1 = returnNodeFun(box, {
    id: "六卿", name: '节点1', name2: "节点1name2", location: {
    x: 100, y: 100 } })
        let node2 = returnNodeFun(box, {
    name: '节点2', name2: "节点2name2", location: {
    x: 500, y: 100 } })
        let node3 = returnNodeFun(box, {
    name: '节点3', name2: "节点3name2", location: {
    x:500, y: 500 } })
        let node4 = returnNodeFun(box, {
    name: '节点4', name2: "节点4name2", location: {
    x:100, y: 500 } })
        // 设置
        returnRegisterImage("/static/topoimages/dev1.png", network);
        returnRegisterImage("../../static/topoimages/dev2.png", network);
        returnRegisterImage("../../static/topoimages/dev3.png", network);
        returnRegisterImage("../../static/topoimages/dev31.png", network);
        node1.setImage('dev1');
        node2.setImage('dev2');
        node3.setImage('dev3');
        node4.setImage('dev31');
        node1.setClient('flag',true)
        node3.setClient('flag',true)
        // 创建组
        let group = returnGroupFun(box,{
    name: "group", location: {
    x: 300, y: 400 },})
        // 将图元添加到组中
        group.addChild(node1)
        group.addChild(node2)
        group.addChild(node3)
        group.addChild(node4)
        console.log(node1.getParent()._name ==='group') //true
        // 获取child 条件为 自定义属性flag的值为true的
        let childrenMatch = group.toChildren((e) =>e.getClient('flag'))
        console.log(childrenMatch,'childrenMatch')
        childrenMatch.forEach(item=>{
   
            item.setImage('dev1')
            item.setName("flag is true")
        })
        // console.log(group.getChildSize(),'size')
        //绘制连线 参数为两个node节点
        let link = returnLineFun(node1, node3);
        let link2 = returnLineFun(node2, node4);
        // link.setName("line1");
        // link.setName("line2");
        // 如果需要设置其他属性，可以通过setClient() / getClient()方法设置自定义的属性(包括对象)。
        link.setClient('clientProperty', "其他属性");
        box.add(link);
        box.add(link2);
    }
    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>twaver.Data的其他功能函数 </li>
                <li>
                   //获取所有子网元
                    getChildren:function()<br/>
                    getChildSize:function()<br/>
                    //获取符合macthFunction的所有childs组成的List
                    toChildren:function(macthFunction,scope)<br/>
                    addChild:function(child,index)<br/>
                    removeChild:function(child)<br/>
                    getChildAt:function(index)<br/>
                    clearChildren:function()<br/>
                    getParent:function()<br/>
                    setParent:function(parent)<br/>
                    hasChildren:function()<br/>
                    isRelatedTo:function(data)<br/>
                    isParentOf:function(data)<br/>
                    isDescendantOf:function(data)</li>
                <li>如果需要设置其他属性，可以通过setClient() / getClient()方法设置自定义的属性(包括对象)。</li>
                <li> </li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

tips:
首先创建dataBox容器，将容器加入到network画布；
创建node节点，给node节点添加自定义属性flag
创建连线；
创建组实例；
将node节点append到group中；
将组group add到容器dataBox中；
在页面双击组图标即可看到整个组的状态；

      // 获取child 条件为 自定义属性flag的值为true的
        let childrenMatch = group.toChildren((e) =>e.getClient('flag'))
        console.log(childrenMatch,'childrenMatch')
        childrenMatch.forEach(item=>{
   
            item.setImage('dev1')
            item.setName("flag is true")
        })

通过toChildren函数，传入过滤条件函数，将含有自定义属性flag的图元返回出来放置数组中，
通过遍历返回的数据重新设置属性；展示不同的属性。
学习参考：TWaver Documents