复合交互及其自定义 Behavior

阅读时间约 3 分钟

Behavior 指 F6 中的复合交互,一般 Behavior 包含一个或多个事件的监听与处理以及一系列对图中元素的操作。

Behavior 默认包含 shouldBeginshouldUpdateshouldEnd 三个回调,代表是否开始行为,是否更新元素,是否进行结束行为,当返回值为 false 时阻止默认行为。

所有内置 Behavior 及其参数参见 内置的 Behavior 教程。当 内置 Behavior 不能满足需求时,使用 registerBehavior(behaviorName, behavior) 方法注册自定义的交互行为。详见 Behavior API。本文将介绍如何自定义 Behavior。

F6.registerBehavior(behaviorName: string, behavior: BehaviorOption)
// Custom a type of Behavior
F6.registerBehavior('behaviorName', {
  // Bind the event and its callback
  getEvents() {
    return {
      'node:tap': 'onTap',
      mousemove: 'onMousemove',
      'edge:tap': 'onEdgeTap',
    };
  },
  /**
   * Handle the callback for node:tap
   * @override
   * @param  {Object} evt The handler
   */
  onTap(evt) {
    const node = evt.item;
    const graph = this.graph;
    const point = { x: evt.x, y: evt.y };
    const model = node.getModel();
    // TODO
  },
  /**
   * Handle the callback for mousemove
   * @override
   * @param  {Object} evt The handler
   */
  onMousemove(evt) {
    // TODO
  },
  /**
   * Handle the callback for :tap
   * @override
   * @param  {Object} evt The handler
   */
  onEdgeTap(evt) {
    // TODO
  },
});

参数

名称类型是否必选描述
behaviorNameStringtrue自定义 Behavior 的名称。
behaviorBehaviorOptiontrue自定义 behavior 时的配置项,配置项中包括的方法及作用具体请参考:Behavior API

BehaviorOption.getEvents()

自定义 Behavior 时,定义事件及处理事件的方法。

getEvents() 方法中可以使用的事件请参考Event 文档

用法

F6.registerBehavior('behaviorName', {
  getEvents() {
    return {
      'node:tap': 'onNodeTap',
      'edge:tap': 'onEdgeTap',
      'mousemove': 'onMouseMove'
    }
  }
}

BehaviorOption.onNodeTap(evt)

onNodeTaponEdgeTaponMouseMove 都属于自定义方法,用于处理 node:tapedge:tapmousemove 事件。

参数

名称类型是否必选描述
evtEvent包含事件句柄、当前操作对象及各坐标值等

参数 evt 包括以下属性:

名称类型描述
xNumber元素视口 x 坐标
yNumber元素视口 y 坐标
canvasXNumber元素 Canvas x 坐标
canvasYNumber元素 Canvas y 坐标
clientXNumber屏幕/页面 x 坐标
clientYNumber屏幕/页面 y 坐标
eventMouseEvent事件句柄
targetShape当前对象
typeString操作类型
currentTargetObject
itemShape操作的目标元素
removedBoolean是否删除/销毁
timeStampNumber时间戳
bubblesBoolean是否支持事件冒泡
defaultPreventedBoolean是否阻止默认事件
cancelableBoolean是否取消

用法

F6.registerBehavior('behaviorName', {
  getEvents() {
    return {
      'node:tap': 'onNodeTap',
      'edge:tap': 'onEdgeTap',
      mousemove: 'onMouseMove',
    };
  },
  onNodeTap(evt) {
    // TODO
  },
  onEdgeTap(evt) {
    // TODO
  },
  onMouseMove(evt) {
    // TODO
  },
});

BehaviorOption.getDefaultCfg()

定义自定义 Behavior 时的默认参数,会与用户传入的参数进行合并。

提示:该方法是可选的

用法

F6.registerBehavior('behaviorName', {
  getDefaultCfg() {
    return {
      trigger: 'click' // mouseneter or click
    }
  }
}

BehaviorOption.shouldBegin(evt)

是否阻止行为发生,默认返回 true,不阻止行为,需要在处理逻辑中自行调用。

用法

F6.registerBehavior('behaviorName', {
  shouldBegin() {
    // 这里可以根据业务自定义
    return true
  }
}

BehaviorOption.shouldUpdate(evt)

是否更新数据及更改视图,默认返回 true,允许更新,如果返回 false,则不更新数据和视图。

用法

const graph = new F6.Graph({
  ...
  width: 500,
  height: 500,
  modes: {
    default: [
      'drag-canvas',
      {
        type: 'self-behavior',
        shouldUpdate: (e) => {
          if (e.target.type !== 'text') {
            return false;
          }
          return true;
        },
      },
    ],
  },
});

BehaviorOption.shouldEnd(evt)

是否结束行为,默认返回 true