antv x6 交互行为配置详解

2023-04-21 20:16:05 浏览数 (2)

方法

通过Graph的构造参数interacting可实现限制交互行为

代码语言:javascript复制
const graph = new Graph({
    ...
    interacting: false
});

可用配置

  1. boolean 启用/停用全部交互行为
  2. InteractionMap
代码语言:javascript复制
interface InteractionMap {
  // 边
  edgeMovable?: Interactable // 移动边
  edgeLabelMovable?: Interactable // 移动边的标签
  arrowheadMovable?: Interactable // 移动箭头方向
  vertexMovable?: Interactable // 移动路径点
  vertexAddable?: Interactable // 添加路径点
  vertexDeletable?: Interactable // 删除路径点
  useEdgeTools?: Interactable // 使用边工具

  // 节点
  nodeMovable?: Interactable // 移动节点
  magnetConnectable?: Interactable // 在启用磁铁的节点上创建连接
  stopDelegateOnDragging?: Interactable // 暂不明确

  // 通用
  toolsAddable?: Interactable // 添加工具
}
// 项目值类型
type Interactable = 
  // 对所有元素生效
  boolean 
  // 可根据cellView进行判断,实现对特定元素的设定
  | ((this: Graph, cellView: CellView) => boolean)
  1. ((this: Graph, cellView: CellView) => InteractionMap | boolean) 可通过cellView来判断并限制特定元素的交互行为

注:默认配置为

代码语言:javascript复制
{
  edgeLabelMovable: false,
}

0 人点赞