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

学习到什么：

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

其他功能函数

//获取所有子网元getChildren:function()getChildSize:function()//获取符合macthFunction的所有childs组成的ListtoChildren: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