点选/框选,默认禁用。创建画布时,通过以下配置开启选择交互,开启后可以通过点击或者套索框选节点。
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
时,动态返回显示的内容。节点/边被选中时触发。
节点被选中时触发。
边被选中时触发。
节点/边被取消选中时触发。
节点被取消选中时触发。
边被取消选中时触发。
选中的节点/边发生改变(增删)时触发。
文章浏览阅读246次。【题目描述】实现 strStr() 函数。给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存在,则返回 -1。示例 1:输入: haystack = “hello”, needle = “ll”输出: 2示例 2:输入: haystack = “aaaaa”, needle = “bba”输出: -1说明:当 needle 是空字符串时,我们应当返回什么值呢?这是一个在面试中很_python 实现一个strstr的增强函数,可以使用带可选
文章浏览阅读6.6k次,点赞9次,收藏3次。在正常安装了Grammarly以后,打开word--log in--open,然后发现可以检测到错误,但是右侧的修改建议侧边栏不能出现,试过网上多种办法均不得解决,包括官方网页的办法。双击打开安装包,在welcome界面,按住ctrl+shift,然后点开始安装,出来选项里,选择“install for all users”。按照此操作发现重新安装的Grammarly显示了侧边栏。..._grammarly不显示错误怎么办
文章浏览阅读814次。1. 生意是三方的生意,国家也在参与。经营合法不算真正的合法,缴税合法才是真正意义上合法。 * 产品最大的成本是税收 * 真正决定税务的业务。 3L的车15%税,2.98的车12%的税2. 所得税-- 当前25%, 高薪技术产业为15%(评审一次三年有效)3. 软件企业增值税17%,但高出 3%的部分, 即征即退,会计记入“补贴收入”科目,不记入所得税。两免三减。 ..._委外加工 和 自购原材料生产 在缴税方面有什么区别
文章浏览阅读2.7w次,点赞11次,收藏47次。python IDE :pycharm运行任务:代理池(Python爬虫代理IP池(proxy pool)),url:https://github.com/jhao104/proxy_pool代理池启动方式:如上所述:启动代理池时发现需要同时启动两个py文件,但是每次去找到两个不再同一个位置的文件然后启动它们特别麻烦。于是,我想在一个py文件中进行代理池调用的集成。在启动这个代理池时遇..._python程序能不能同时打开。
文章浏览阅读736次。因为我们的做的APP跟支付行业有关,所有在整个通讯过程中是需要加密的,所以用了OKhttp3中的Https。我们都知道http协议1.0中一直是短连接的,到了Http1.1之后默认改为了长连接,如果想改为短连接只要将header中Connection设置为close即可。但是昨天老大跟我说我们的Https你看看Connection是不是close,抓个包看下。然后我立马想到了WireShak这个神..._fiddler 拦截不住
文章浏览阅读2.3k次。1、创建:2、创建artifact3、配置tomcat,并把项目插入进去4、完成,可以进行以下操作测试Web.xml中添加<welcome-file-list> <welcome-file>index.jsp</welcome-file></welcome-file-list>2. 新建index.jsp,编写..._maven-archetype-webapp
文章浏览阅读850次。请关注“手机之友”,我们为您每天更新手机比选、价格、评测信息,谢谢!请点击右上角红色的关注键。手机机型:小米红米5 Plus | 小米红米Note 7 | vivo Y3最新价格:1199元|1299元|1298元屏幕尺寸:5.99英寸 | 6.3英寸 | 6.35英寸屏幕类型:缺参数 | 缺参数 | LCD分辨率:2160×1080 | 2340×1080 | 1544×720像素:403ppi..._红米5plus摄像头
文章浏览阅读8k次,点赞3次,收藏23次。Postman介绍1 Authorization:身份验证,主要用来填写用户名密码,以及一些验签字段,postman有一个helpers可以帮助我们简化一些重复和复杂的任务。当前的一套helpers可以帮助你解决一些authentication protocols的问题。;2 Headers:请求的头部信息3 Body:post请求时必须要带的参数,里面放......_post请求头
文章浏览阅读1.6k次,点赞2次,收藏3次。 《MSDN Library 2001 October 英文版》,这是支持Visual Studio 6的最后一个MSDN版本,2001年10月以后的MSDN都适用于.net。 DVD版本镜像(1.45GB): ed2k://|file|MSDN_Oct_2001.iso|1558814720|df9843995248f3f88a273f3458f5c4f3|/ 3CD版本镜像(1.7..._msdn 2001 october 下载
文章浏览阅读217次。查看phps的源码可以看到,对获取的id参数进行url解码后的id内容如果为admin,则可获得flag,并且不允许直接获取的id为admin,但传入在url的参数本身在获取时就会经历一次url解码,因此要对admin进行两次编码。再将后缀名修改为jpg,然后上传,这个文件可以绕过前面的4项检查,但是上传的是jpg文件不会直接被当作php来执行,因此需要前面的.user.ini文件来将这个文件添加到其他的php文件中来执行。},即可获得flag。_robots:61.147.171.105:60848
文章浏览阅读1.2w次。Foxmail中Exchange设置账户总是提示密码错误如图设置总是提示密码错误如下图就是设置密码是正确的设置过程中无需使用端口号。。。。_未开启exchange服务或账号密码错误
文章浏览阅读553次。不要做破烂的阵列。只是不要这样做。Numpy不能对它们做太多的处理,并且您可能为它们生成的任何代码都将总是不可靠和缓慢的,因为numpy不是这样工作的。它将它们转换为object类型:Samplearray([[1, 2, 3], [1, 2]], dtype=object)几乎没有numpy函数在上面工作。在本例中,这些对象是list对象,这使得您的代码更加混乱,因为您要么必须在list和nda..._python编写程序求样本均值和方差不使用np的方法