Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)

工具条(添加自定义按钮_自定义事件)

react代码

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-29 15:27:48
 */
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"
        var toolbar = document.createElement('div');

        const initNetwork=() =>{
    
    
            var networkPane = new twaver.controls.BorderPane(network, toolbar);
            networkPane.setTopHeight(50);
            var view = networkPane.getView();
            view.style.left = '0px';
            view.style.top = '0px';
            view.style.right = '0px';
            view.style.bottom = '0px';

            document.getElementById("testID").appendChild(view);
            window.onresize = function () {
    
    
                networkPane.invalidate();
                };
        }

        const   initToolbar=()=> {
    
    
            //自定义事件
            addButton(toolbar, '自定义事件', function () {
    
    
                alert('哈哈哈')
            });
                    //zoom in放大 
            addButton(toolbar, '放大', function () {
    
    
                    network.zoomIn();
            });
            // zoom out缩小
                addButton(toolbar, '缩小',  function () {
    
    
                    network.zoomOut();
            });
            // 沾满当前视图
                addButton(toolbar, '占满屏幕',  function () {
    
    
                    network.zoomOverview();
            });
            // 重置到默认大小
                addButton(toolbar, '重置',  function () {
    
    
                    network.zoomReset();
            });
}

        function addButton(toolbar, label,  handler) {
    
    
            var button = document.createElement('input');
            button.value = label;
            button.onclick = handler;
            // button.setAttribute('type', src ? 'image' : 'button');
            button.setAttribute('type', 'button');
            button.setAttribute('style', 'padding-left:20px;line-height:50px;cursor:pointer;');
            button.value = label; 
            toolbar.appendChild(button); 
        } 
        function initBox() {
    
    
            var from = new twaver.Node(); 
            from.setName('From');
            from.setLocation(100, 100); 
            box.add(from); 
            var to = new twaver.Node(); 
            to.setName('To'); 
            to.setLocation(300, 300); 
            box.add(to); 
            var link = new twaver.Link(from, to); 
            link.setName('Link');
            box.add(link);
            }
        init()
                function init() {
    
    
                initToolbar();
                initNetwork();
                initBox();
        }

    }
    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

1.创建BorderPane
2.定位
3.var toolbar = document.createElement(‘div’);中添加按钮元素，添加click事件

network.zoomIn();放大
network.zoomOut();缩小
network.zoomOverview();占满屏幕
network.zoomReset();重置画布大小

学习参考：TWaver Documents