工具条(添加自定义按钮_自定义事件)
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