点选/框选,默认禁用。创建画布时,通过以下配置开启选择交互,开启后可以通过点击或者套索框选节点。
const graph = new Graph({
selecting: true,
})
// 等同于
const graph = new Graph({
selecting: {
enabled: true,
},
})
创建画布后,可以调用 graph.enableSelection() 和 graph.disableSelection() 来启用和禁用选择交互。
if (graph.isSelectionEnabled()) {
graph.disableSelection()
} else {
graph.enableSelection()
}
支持的选项如下:
interface SelectionOptions {
className?: string
multiple?: boolean
rubberband?: boolean
strict?: boolean
modifiers?: string | ('alt' | 'ctrl' | 'meta' | 'shift')[] | null
movable?: boolean
content?:
| null
| false
| string
| ((
this: Graph,
selection: Selection,
contentElement: HTMLElement,
) => string)
filter?:
| null
| (string
| { id: string })[]
| ((this: Graph, cell: Cell) => boolean)
}
附加样式名,用于定制样式,默认为 undefined
。
const graph = new Graph({
selecting: {
enabled: true,
className: 'my-selecting',
},
})
是否启用点击多选,默认为 true
。启用多选后按住 ctrl
或 command
键点击节点实现多选。
是否启用框选,默认为 false
。
const graph = new Graph({
selecting: {
enabled: true,
rubberband: true, // 启用框选
},
})
创建画布后,可以调用 graph.enableRubberband() 和 graph.disableRubberband() 来启用和禁用框选。
if (graph.isRubberbandEnabled()) {
graph.disableRubberband()
} else {
graph.enableRubberband()
}
启用框选时,选框完全包围节点时才选中节点,否则只需要选框与节点的包围盒(BBox)相交即可选中节点,默认为 false
。
修饰键('alt'
、'ctrl'
、'meta'
、'shift'
),设置修饰键后需要点击鼠标并按下修饰键才能触发框选。修饰键在某些场景下非常有用,比如同时开始框选和拖拽画布时,而框选和拖拽画布的触发时机都是鼠标左键在画布空白位置按下,这时可以为框选和拖拽画布设置不一样的修饰键,达到同时开启又不冲突的效果。
支持配置单个(如 'alt'
)或多个(如 ['alt', 'ctrl']
)修饰键,通过数组形式配置的多个修饰键是或关系,比如刚刚配置的修饰键表示按下 'alt'
或 'ctrl'
,如果需要更加灵活的配置,可以使用如下这些形式:
'alt|ctrl'
表示按下 'alt'
或 'ctrl'
。'alt&ctrl'
表示同时按下 'alt'
和 'ctrl'
。'alt|ctrl&shift'
表示同时按下 'alt'
和 'shift'
或者同时按下 'ctrl'
和 'shift'
。选中的节点是否可以被移动,设置为 true
时,拖动选框触发节点移动,默认为 true
。
设置附加显示的内容。
节点过滤器,被过滤的节点将不能被选中。支持以下三种类型:
string[]
节点类型数组,指定的节点类型不参与对齐计算({ id: string })[]
节点(类节点)数组,指定的节点不参与对齐计算(this: Graph, node: Node) => boolean
返回 true
的节点不参与对齐计算const graph = new Graph({
selecting: {
enabled: true,
filter: ['rect'], // 'rect' 类型节点不能被选中
},
})
// 等同于
const graph = new Graph({
selecting: {
enabled: true,
filter(node) {
return node.shape === 'rect'
},
},
})
是否显示节点的选择框,默认为 false
。
是否显示边的选择框,默认为 false
。
select(cells: Cell | string | (Cell | string)[]): this
选中指定的节点/边。需要注意的是,该方法不会取消选中当前选中的节点/边,而是将指定的节点/边追加到选区中。如果同时需要取消选中当前选中的节点/边,请使用 resetSelection(...) 方法。
unselect(cells: Cell | string | (Cell | string)[]): this
取消选中指定的节点/边。
isSelected(cell: Cell | string): boolean
返回指定的节点/边是否被选中。
resetSelection(cells?: Cell | string | (Cell | string)[]): this
先清空选区,然后选中提供的节点/边。
getSelectedCells(): Cell[]
获取选中的节点/边。
cleanSelection(): this
清空选区。
cleanSelection(): boolean
返回选区是否为空。
isSelectionEnabled(): boolean
是否启用选择能力。
enableSelection(): this
启用选择能力。
disableSelection(): this
禁用选择能力。
toggleSelection(enabled?: boolean): this
切换选择的启用状态。
参数
名称 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
enabled | boolean | - | 是否启用选择能力,缺省时切换选择的启用状态。 |
isMultipleSelection(): boolean
是否启用了多选。
enableMultipleSelection(): this
启用多选。
disableMultipleSelection(): this
禁用多选。
toggleMultipleSelection(multiple?: boolean): this
切换多选的启用状态。
参数
名称 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
multiple | boolean | - | 是否启用多选,缺省时切换多选的启用状态。 |
isSelectionMovable(): boolean
返回选中的节点/边是否可以被移动。
enableSelectionMovable(): this
启用选中的节点/边的移动。
disableSelectionMovable(): this
禁用选中节点/边的移动。
toggleSelectionMovable(enabled?: boolean): this
切换选中节点/边是否可以被移动。
参数
名称 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
enabled | boolean | - | 是否启用选中的节点/边的移动,缺省时切换启用状态。 |
isRubberbandEnabled(): boolean
返回是否启用了框选。
enableRubberband(): this
启用框选。
disableRubberband(): this
禁用框选。
toggleRubberband(enabled?: boolean): this
切换框选的启用状态。
参数
名称 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
enabled | boolean | - | 是否启用框选,缺省时切换启用状态。 |
isStrictRubberband(): boolean
返回是否启用了严格框选。启用严格框选后,只有节点/边被选框完全包围时才会选中节点/边。
enableStrictRubberband(): this
启用严格框选。启用严格框选后,只有节点/边被选框完全包围时才会选中节点/边。
disableStrictRubberband(): this
禁用严格框选。禁用严格框选后,只需要选框与节点/边的包围盒相交即可选中节点/边。
toggleStrictRubberband(enabled?: boolean): this
切换严格框选的启用状态。
参数
名称 | 类型 | 必选 | 默认值 | 描述 |
---|---|---|---|---|
enabled | boolean | - | 是否启用严格框选,缺省时切换启用状态。 |
setSelectionFilter(
filter?:
| null
| (string | { id: string })[]
| ((this: Graph, cell: Cell) => boolean)
): this
设置选择的过滤条件,满足过滤条件的节点/边将不能被选中。
filter
为 null
、undefined
时,不过滤节点/边。filter
为 (string | { id: string })[]
时,表示具有这些 ID 的节点/边不能被选中filter
为 (this: Graph, cell: Cell) => boolean
时,返回 true
时节点/边不能被选中。setRubberbandModifiers(modifiers?: string | ModifierKey[] | null): this
设置框选的修饰键,只有同时按下修饰键时才能触发框选。
setSelectionDisplayContent(
content?:
| null
| false
| string
| ((this: Graph, selection: Selection, contentElement: HTMLElement) => string)
): this
设置选中节点/边的附加显示内容。
content
为 null
、undefined
、false
时,不显示附加内容content
为 string
时,显示一段文本。content
为 (this: Graph, selection: Selection, contentElement: HTMLElement) => string
时,动态返回显示的内容。节点/边被选中时触发。
节点被选中时触发。
边被选中时触发。
节点/边被取消选中时触发。
节点被取消选中时触发。
边被取消选中时触发。
选中的节点/边发生改变(增删)时触发。
文章浏览阅读3.6k次。4.5万6因为把圆分成360度,是自然存在规律的实在体现,而非人为意识的发明。人为意识做到的只能是发现而表现出来。要说为什么把圆分成为360度呢,实际上首先需要把圆作为36度来进行梳理,360度只是36度的细分。那么圆为什么是以36数来作为它的周长呢?因为圆象为“”态,用中国人的观点来看,它也就是人们意识中无形气的表象。而气在中华民族传统文化中则体现为5行之气。由于其存在於内,所以其(气)值则为0..._为什么圆是360度
文章浏览阅读87次。我在进行相关的尝试,用于 AVG 或卡牌手游的开发。Demo: AVG.js Demo这是我正在做的开源框架 AVG.js,近期会开源。作为面向 Web 的轻游戏框架,考虑了很多 Web 的特点,也融入了很多来自近几年面包工坊做 BKEngine 的经验。(实力广告一波:BKEngine - AVG/Galgame游戏引擎 - 免费 易用 高效 安全 跨平台)在 React 方面主要用了这些:- ..._适合做游戏的react ui组件
文章浏览阅读119次。如图。_unrecognized or represents more than one time zone springboot
文章浏览阅读1.4w次,点赞71次,收藏309次。路科验证mcdf_lab4学习笔记..._sv实验fmt_pkg代码
文章浏览阅读1.3w次。背景 刷题的时候用 ** 提示超时,就想着利用 python的 math 模块偷个懒,因为math.pow() 始终调用c语言写的那个代码,时间复杂度老低了,可能会加快速度,但是出现了错误,没办法只能手写快速幂错误原因 math.pow()函数计算幂运算,因为结果数值过大导致溢出。解决办法 _python math range error
文章浏览阅读7.8k次。文档中主要描述 Full OTA 升级和 Incremental OTA 两种升级方式。_ota 升级包 /sdcard/data/
文章浏览阅读845次。一、总线概述计算机系统是以微处理器为核心的,各器件要与微处理器相连,且必须协调工作,所以在微处理机中引入了总线的概念,各器件共同享用总线,任何时候只能有一个器件发送数据(可以有多个器件同时接收数据) 。计算机的总线分为控制总线、地址总线和数据总线等三种。而数据总线用于传送数据,控制总线用于传送控制信号, 地址总线则用于选择存储单元或外设。二、单片机的三总线结构51系列单片机具有完善的总线接口时序,..._数据总线 地址总线 io口
文章浏览阅读2.4k次,点赞3次,收藏9次。Vim日常命令:查找与替换!_vim 查找替换
文章浏览阅读2.7k次。1 ASLR机制 Address Space Layout Randomization=地址空间布局随机化; 是一种针对缓冲区溢出的安全保护技术; 没有ASLR时,每次进程执行,加载到内容中,代码所处堆栈stack的位置都是相同的,容易被破解; 如果开启了ASLR,操作系统加载器会针对基地址再去加上一个随机生成的偏移地址,然后再去加载程序模块,通过对堆、栈、共享库映射等线性区布局的随机化,增加攻击者预测目的地址的难度。 地址随机化需要程序自身和操作系统的双重支持..._windows aslr
文章浏览阅读3.4k次,点赞5次,收藏49次。最优化理论——拟牛顿算法·BFGS 算法算法思想算法步骤代码示例算法思想算法步骤代码Matlab代码如下:function [x,val,k]=bfgs(fun,gfun,x0,varargin)%功能: 用BFGS算法求解无约束问题: min f(x)%输入: x0是初始点, fun, gfun分别是目标函数及其梯度;% varargin是输入的可变参数变量, 简单调用bfgs时可以忽略它,% 但若其它程序循环调用该程序时将发挥重要的作用%输出: x, val分别是近似最优点_bfgs算法
文章浏览阅读1k次。如果你不喜欢阅读文字的话,可以选择滑到最后看 视频讲解 哟~~~前面我们花了四篇文章详细的探讨了分布式存储,有了分布式存储的概念后,我们就可以基于分布式存储的数据来进行分布式计算了,这篇文章我们来探讨分布式计算的原理。单机版本的计算我们可能非常的熟悉在一台机器上的计算,比如,在一台台机器上存储着一个包含有数据的文件,我们现在需要计算这个文件有多少行记录,这个就是一个很简单的计算,这个计算有输入、计算和输出。输入就是文件,输出就是这个文件的记录数,计算的过程是: 先打开文件 初_分布式计算特性
文章浏览阅读5k次,点赞3次,收藏24次。Application应用Kera的应用模块Application提供了带有预训练权重的Keras模型,这些模型可以用来进行预测、特征提取和finetune模型的预训练权重将下载到~/.keras/models/并在载入模型时自动载入可用的模型应用于图像分类的模型,权重训练自ImageNet:XceptionVGG16VGG19ResNet50InceptionV3所有的这..._keras实现特征重构迁移学习 无标签