Page management container (TabBox)
The page management container is mainly used to manage Tab (twaver.Tab) pages.
var tablePane = new twaver.controls.TablePane(table);
...
var tab = new twaver.Tab(name);
tab.setName(name);
tab.setView(view);
tabPane.getTabBox().add(tab);
tabBox is not very useful yet. …
SelectionModel
The selection model serves the DataBox, and is used to manage element selection information, element selection, and clear selection through the SelectionModel. So how to operate the SelectionModel?
(1). Build the selected model
By default, DataBox comes with a selection model, which is obtained by: databox.getSelectionModel().
The default in the view object is
the selected model of the data box, which can be obtained through view.getSelectionModel(),
such as: network.getSelectionModel() or tree.getSelectionModel();
If the user wants to set his own selected model, he can set it in the following way.
//创建模型对象
var myselectionModel = new twaver.SelectionModel(databox);
//构造参数传入需要绑定的databox即可，设置到databox或者视图组件
databox.setSelectionModel(mySelectionModel);
network.setSelectionModel(mySelectionModel);
tree.setSelectionModel(mySelectionModel);
...
(2). Use the SelectionModel function
//追加选中元素,传入参数可以是单个元素,也可以是元素集合
appendSelection:function(datas)
//设置选中元素,与追加选中不同,此方法会清除原始选中状态
setSelection():function(datas)
//选中databox中所有元素
selectAll:function()
//取消元素选中状态,传入参数可以是单个元素,也可以是元素集合
removeSelection:function(datas)
//清除所有元素的选中状态
clearSelection:function()
//获取选中元素集合,注意此方法返回的是SelectionModel内部选中元素集合对象的引用,直接对这个集合操作会影响到选中模型,所以不要对这个集合做修改操作
getSelection:function()
/**获取当前选中元素集合,注意此方法与上个函数有区别,此方法返回的是新构建的集合类,而不是SelectionModel中原始的选中元素
*元素集合对象引用
*matchFunction:匹配函数，传入IData,返回true或者false,false表示排除
*/
toSelection:function(matchFunction,scope)
//选中数量
size:function()
//元素是否选中
contains:function(data)
//选中集合中的最后一个元素
getLastData:function()
//选中集合中的第一个元素
getFirstData:function()
//是否允许选中
isSelectable:function(data)
The selected state of the model management element is selected. When the selected state changes, the corresponding selected change event is dispatched. For example, calling the append element selection function will dispatch the selected change event of type "append".
selectionModel.addSelectionChangeListener(function(e){
console.log("Kind:"+e.kind+',datas:'+e.datas.toString());
});
The event object contains two attributes 'kind' and 'datas', which represent the selected event type and event data respectively. The selected change event has five subtypes: append、set、remove、all、clear，functions corresponding to the selected states of the five operating elements on the selected model: appendSelection、setSelection、removeSelection、selectAll、clearSelection.
Select three modes
In addition, TWaver also provides three selection modes: 多选(mutipleSelection)、单选(‘singleSelection’)、不可选(‘noneSelection’),used to control the selection effect, and also provides data layer support for the view component selection mode. The default is multi-selection mode.
//设置选择模式
selectionModel.setSelectionMode('singleSelection');
Note:当选择模式发生切换的时候，TWaber内部会首先调用清除所有元素的选中状态。
react code
/*
* @Descripttion:
* @version:
* @Author: ZhangJunQing
* @Date: 2022-04-18 14:44:05
* @LastEditors: ZhangJunQing
* @LastEditTime: 2022-04-26 17:35:08
*/
import React, {
useEffect, useState } from 'react'
import {
returnElementBoxAndNetworkFun,
returnNodeFun,
returnLineFun,
} 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 });
var selectionModel = box.getSelectionModel();
initListener();
initDataBox();
function initDataBox() {
for (var i = 0; i < 10; i++) {
var node = new twaver.Node(i);
node.setLocation((i + 1) * 50, (i + 1) * 50)
node.setName('node-' + i);
node.setClient('NO', i % 4);
box.add(node);
}
selectionModel.appendSelection([box.getDataById(0)]);
selectionModel.appendSelection(box.getDataById(1));
selectionModel.removeSelection(box.getDataById(0));
// 此方法会清除原始选中状态
selectionModel.setSelection([box.getDataById(2), box.getDataById(6)]);
// 不会清除之前选中
selectionModel.appendSelection([box.getDataById(2), box.getDataById(3), box.getDataById(4)]);
// return
//single selection mode
console.log('设置单选模式,首先清除当前的选中状态,以后每次只选择最多一个元素');
selectionModel.setSelectionMode('singleSelection');
// singleSelection 会选中最后一个网元
selectionModel.appendSelection([box.getDataById(2),
box.getDataById(3), box.getDataById(5)]);
// return false
// 当前选中的个数
console.log('selection size:' + selectionModel.size()); //none selection mode
console.log('设置不可选模式,会清除当前的选中状态');
selectionModel.setSelectionMode('noneSelection');
selectionModel.appendSelection([box.getDataById(2), box.getDataById(3), box.getDataById(4)]); //multiple selection mode
// return false
console.log('默认是多选模式');
selectionModel.setSelectionMode('multipleSelection');
console.log('\n设置过滤器,所有id大于5的都不可选');
selectionModel.setFilterFunction(function (data) {
return data.getId() > 5;
});
// return false;
// 选中全部元素
selectionModel.selectAll();
}
function initListener() {
selectionModel.addSelectionChangeListener(function (e) {
console.log(e);
//console.log('kind:' + e.kind + ',datas:' + e.datas.toString());
});
}
}
useEffect(init, [])
return (
<>
<p style={
{
fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
<ul style={
{
fontSize: "20px", paddingLeft: "50px" }}>
<li>selectionModel</li>
</ul>
{
/* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
<div id="testID" style={
{
width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
</>
)
}
export default Demo
Learning reference: TWaver Documents