页管理容器(TabBox)
页管理容器主要用来管理Tab(twaver.Tab)页。
var tablePane = new twaver.controls.TablePane(table);
...
var tab = new twaver.Tab(name);
tab.setName(name);
tab.setView(view);
tabPane.getTabBox().add(tab);
tabBox还不太会用。…
选中模型(SelectionModel)
选中模型服务于DataBox,用于管理元素选中信息、元素的选中、清除选中都通过SelectionModel实现。那么如何操作SelectionModel呢？
(1).构建选中模型
默认情况下DataBox自带一个选中模型,获取方式:databox.getSelectionModel()。
视图对象中的默认就是data
box的选中模型,可通过view.getSelectionModel()获取,
如：network.getSelectionModel()或者tree.getSelectionModel();
如果用户想设置自己的选中模型,可通过下面方式设置。
//创建模型对象
var myselectionModel = new twaver.SelectionModel(databox);
//构造参数传入需要绑定的databox即可，设置到databox或者视图组件
databox.setSelectionModel(mySelectionModel);
network.setSelectionModel(mySelectionModel);
tree.setSelectionModel(mySelectionModel);
...
(2).使用SelectionModel功能
//追加选中元素,传入参数可以是单个元素,也可以是元素集合
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)
选中模型管理元素的选中状态,当选中状态发生变化时，派发相应的选中变化事件，如调用追加元素选中函数会派发类型为”append”的选中变化事件。
selectionModel.addSelectionChangeListener(function(e){
console.log("Kind:"+e.kind+',datas:'+e.datas.toString());
});
事件对象中包含两个属性’kind’,’datas’，分别代表选中事件类型，事件数据，其中选中变化事件有五种子类型:append、set、remove、all、clear，分别对应选中模型上的五种操作元素选中状态的函数:appendSelection、setSelection、removeSelection、selectAll、clearSelection。
选中三种模式
另外TWaver还提供了三中选择模式:多选(mutipleSelection)、单选(‘singleSelection’)、不可选(‘noneSelection’),用于控制选中效果,也为视图组件选择模式提供了数据层支持,默认为多选模式。
//设置选择模式
selectionModel.setSelectionMode('singleSelection');
Note:当选择模式发生切换的时候，TWaber内部会首先调用清除所有元素的选中状态。
react代码
/*
* @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
学习参考：TWaver Documents
