简介

Action 是交互中的反馈，在前面的章节中我们讨论过 G6交互语法的设计，本章列举出所有的交互反馈，主要从这几方面进行进行：

  • 画布
  • 鼠标
  • 节点、边、分组
  • 数据
  • 组件
  • 辅助图形

每种 Action 有多个方法，每个方法都是无参数的函数。

画布

画布上的交互主要有两种：

  • 移动
  • 缩放

移动 move

画布移动的方法主要有：

  • start：开始移动，记录移动的点
  • move：移动
  • end： 结束移动

缩放 zoom

画布缩放的方法主要有:

  • zoomIn： 缩小
  • zoomOut：放大

鼠标

鼠标的各种形状都对应一个方法：

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

元素 Item

通用的 Action

item-move 元素平移

拖拽时元素进行平移，无论节点、边还是 group 都进行平移，支持的方法有：

  • start
  • move
  • end

设置单个状态

这类 Action 都有一些共同的方法：

  • enableState 设置状态
  • reset 取消同触发源相关的元素的状态
  • clear 清除所有的状态

  • toggle 切换状态

    单选 single-selected

    单个选中有自己的一个方法：

  • selected 选中，是 enableState 的一个别名

    单个 single-active

    单个 active 有自己的一个方法：

  • active 选中，是 enableState 的一个别名

    单个 single-highlight

    单个 highlight 有自己的一个方法：

  • active 选中，是 enableState 的一个别名

设置多个元素的状态

这类 Action 都有一些共同的方法：

  • enableState 设置状态
  • reset 取消同触发源相关的元素的状态
  • clear 清除所有的状态

多选 multiple-selected

选中多个元素，有自己的一个方法

  • selected 选中，是 enableState 的一个别名

    多选 multiple-active

    active 多个元素，有自己的一个方法

  • active 选中，是 enableState 的一个别名

    多选 multiple-highlight

    highlight 多个元素，有自己的一个方法

  • active 选中，是 enableState 的一个别名

范围设置元素的状态

这类 Action 都有一些共同的方法：

  • enableState 设置状态
  • clear 清除所有的状态

范围选中 range-selected

范围 active

范围 highlight

Node

node-resize

  • start
  • resize

  • end

    node-link

    在节点上添加边

  • start

  • resize

  • end

    active-links

    将节点连接的所有的边 active，方法有：

  • active

  • reset

  • clear

    nodes-links-active

    active 多个节点间的边，通常是一条路径

  • start 开始

  • addNode 加入一个节点
  • active 高亮
  • clear 移除

  • end 结束

    node-delete

    删除节点，同时边一起删除

  • delete ，删除

  • reset， 恢复（是否只能恢复一次）

    Edge

    edge-resize

  • start

  • resize

  • end

    change-target

    改变边的端点

  • start

  • resize
  • end

Group

node-add

分组内添加节点

  • add

  • reset

    group-add

    分组内添加分组

  • add

  • reset

group-delete

  • delete

  • reset

    create-group

    创建 group

  • create

  • ungroup

collapse

  • collapse
  • expand
  • toggle
  • expandAll

数据

layout

布局

groupLayout

分组内布局

rangeLayout

范围内布局

组件

辅助组件

辅助框 mask

rect-mask

circle-mask

path-mask

右键菜单

contextMenu

  • show
  • hide
  • executeCmd
  • changeState

工具栏

toolbar

  • executeCmd
  • changeState

其他

command-queue

命令队列，执行前进后退等操作

  • inQueue
  • redo
  • undo
  • undoAll
  • redoAll