简介

G2 已经完成常用交互使用交互语法进行组装，各种交互的质量、完备性和开发效率都显著提升，G6 上的交互更加复杂多变，G2 的交互语法是否能够平滑的迁移过来，解决 G6 的各种交互问题，是需要给出答案的。本文对 G6 的交互语法进行设计，验证可行性。

交互语法简介

交互语法，是将交互拆解成多个环节，每个环节由触发和反馈组成。只要你能将交互用自然语言的方式描述出来，就可以使用交互语法进行组合搭建出交互行为。我们已经在 G2 中对交互语法进行了验证，在这里我们看一下 G2 对交互语法的拆解：
G2 将每一个交互拆解成多个交互环节：

  • showEnable 示能：表示交互可以进行；
  • start 开始：交互开始；
  • processing 持续：交互持续；
  • end 结束：交互结束；
  • rollback 回滚：取消交互，恢复到原始状态；

每个交互环节可以有多个步骤组成，每个步骤分为触发和反馈，以框选高亮说明：

  • showEnable： 鼠标移入画布（触发）变成十字（反馈），移出画布（触发）恢复默认状态（反馈）
  • start: 按下鼠标开始拖拽（触发），开始创建遮罩层（反馈）
  • processing: 继续拖拽鼠标（触发）,遮罩层大小变化（反馈），被遮挡住的图形高亮（反馈）
  • end: 松开鼠标（触发），遮罩层不再变化（反馈）
  • rollback: 双击画布（触发），遮罩层消失（反馈），高亮效果取消（反馈）

我们按照同样的模型来对 G6 的交互语法进行设计

触发

触发对象

G6 的触发对象主要三类：

  • 节点、边、分组 这一类的 Item 元素
  • 画布

  • 组件

    触发的事件

  • 基础的鼠标事件：mouseenter, mouseleave，click 等

  • node、edge 等 Item 的状态改变事件
  • Graph 的事件：beforepaint, afterpaint, layoutchange 等
  • 组件的事件：选中、点击等事件

反馈

反馈对象

反馈的对象同触发对象类似，但是会有一些交互过程中的辅助组件，所以反馈对象有：

  • 节点、边、分组
  • 画布
  • 组件
  • 数据
  • 鼠标

  • 辅助图形：遮罩层、delegation 对象

    反馈的方法

    Item

  • 显示、隐藏

  • 移动、resize
  • 状态变化
  • 增加、删除、修改
  • 展开、折叠

画布

  • 平移
  • 缩放
  • resize

数据

  • 布局/局部布局
  • 编辑
  • 过滤
  • 排序

鼠标

鼠标形状的变化

辅助图形

  • 遮罩层：生成、resize、move
  • delegation: 生成、resize、change

组件

  • item 面板，节点、边、分组的显示、隐藏（折叠）
  • detail 面板，显示、隐藏、更新
  • 右键菜单，显示、隐藏、可用/不可用，执行
  • 命令栏，可用/不可用、状态变化等、执行
  • tooltip，显示、隐藏、更新
  • min-map，显示、隐藏、更新
  • legend

语法组合

G6 的交互语法设计 - 图1

交互之间的关系

通过对比两个交互之间的触发和反馈，我们可以分析出交互之间的关系：

  • 互不关联：触发和反馈都没关系，两个交互不关联
  • 互斥：往往是触发条件一样，这样两个交互就出现了冲突，必须解决他们之间的互斥问题
  • 依赖：一个交互的反馈是另一个交互的触发条件

总结

参考