Twaver-HTML5基础学习(27)过滤器

过滤器

延续TWaver的一贯风格，TWaver
HTML5提供了一系列过滤器，包括可见过滤器、可移动过滤器、可编辑过滤器，通过设置过滤器可以实现同一数据模型，不同信息的显示以及不同的操作模式，通常用于按用户权限或者网元类型产生不同的交互和视图。

Network的过滤器包括

//可见过滤器
get/setVisibleFunction:function(filter)
//可移动过滤器
get/setMovableFunction:function(filter)
//可编辑过滤器
get/setEditableFunction:function(filter)

过滤器的使用示例，注意传入参数类型是Element,返回参数为Boolean。

通过network的三个过滤方法，过滤每一个元素，判断自定义属性即可：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 15:25:39
 */
import React, { useEffect, useState } from 'react'
import {
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
    returnRegisterImage,
    returnGroupFun
} 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 });
        // network.getView().style.backgroundColor = "#fff"
        network.getView().style.border = "2px solid #ccc"
        init()
        function init() { initNetwork(); initDataBox(); }
        function initNetwork() {

            network.setVisibleFunction(function (element) {
                if (element.getClient("visible") == false) {
                    return false;
                }
                return true;
            });
            network.setEditableFunction(function (element) {
                if (element.getClient('editable') == false) {
                    return false;
                }
                return true;
            });
            network.setMovableFunction(function (element) {
                if (element.getClient('movable') == false) {
                    return false;
                } return true;
            });
        }
        function initDataBox() {
            var node = new twaver.Node();
            node.setName("unmovable");
            node.setLocation(50, 60);
            // false不能移动  true可移动的
            node.setClient('movable', false);
            box.add(node);

            var node1 = new twaver.Node();
            node1.setName("visible");
            node1.setLocation(60, 90);
            // false不可见   true可见
            node1.setClient("visible", true);
            box.add(node1);

            var node2 = new twaver.Node();
            node2.setName("node2");
            node2.setLocation(80, 100);
            box.add(node2);

            var node3 = new twaver.Node();
            node3.setName("node3");
            node3.setLocation(120, 210);
            box.add(node3);

            var link = new twaver.Link(node2, node3);
            box.add(link);

            var group = new twaver.Group();
            group.setName('unEditable');
            //设置是否收缩
            // group.isExpanded = function () { return true; }
            group.addChild(node3);
            group.addChild(node2);
            // false不能编辑    true可编辑的
            group.setClient('editable', true);
            group.s('group.fill.color', '#ef8200');
            box.add(group);
        }
    }
    useEffect(init, [])
    return (
        <>
            <p style={{ fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={{ fontSize: "20px", paddingLeft: "50px" }}>
                <li>过滤器</li>
            </ul>
            {/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={{ width: "800px", height: "800px", border: "1px solid #ccc", position: "relative", margin: "0 auto" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents