Behavior and RegisterBehavior

4 min read

Behavior is the compound interactions in G6. In general, a Behavior includes one or more event listeners and a set of item operations.

By default, Behavior has three callbacks: shouldBegin, shouldUpdate, and shouldEnd, representing the beginning of the behavior, whether to update the items, the ending of the behavior respectively. If they return false, the default behavior will be prevented.

This document is going to introduce how to customize a behavior. The infomation about the built-in behaviors can be found in the Built-in Behaviors. When the built-in Behaviors cannot satisfy your requirments, custom a type of Behavior by G6.registerBehavior(behaviorName, behavior). See Behavior API for detail.

G6.registerBehavior(behaviorName: string, behavior: BehaviorOption)
// Custom a type of Behavior
G6.registerBehavior('behaviorName', {
  // Bind the event and its callback
  getEvents() {
    return {
      'node:click': 'onClick',
      mousemove: 'onMousemove',
      'edge:click': 'onEdgeClick',
    };
  },
  /**
   * Handle the callback for node:click
   * @override
   * @param  {Object} evt The handler
   */
  onClick(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 :click
   * @override
   * @param  {Object} evt The handler
   */
  onEdgeClick(evt) {
    // TODO
  },
});

Parameters

NameTypeRequiredDescription
behaviorNameStringtrueThe name of custom Behavior.
behaviorBehaviorOptiontrueThe configurations of custom Behavior. For more information, please refer to Behavior API.

BehaviorOption.getEvents()

Define and handle events when user customize a Behavior.

The usage of getEvents() can be refered to Event

Usage

G6.registerBehavior('behaviorName', {
  getEvents() {
    return {
      'node:click': 'onNodeClick',
      'edge:click': 'onEdgeClick',
      'mousemove': 'onMouseMove'
    }
  }
}

BehaviorOption.onNodeClick(evt)

onNodeClick, onEdgeClick, and onMouseMove are custom events for handling node:click, edge:click, and mousemove.

Parameters

NameTypeRequiredDescription
evtEventfalsecontains event handler, current target, and coordinates.

The parameter evt contains:

NameTypeDescription
xNumberx coordinate of view port.
yNumbery coordinate of view port.
canvasXNumberx coordinate of the canvas.
canvasYNumbery coordinate of the canvas.
clientXNumberx coordinate of the client / screen.
clientYNumbery coordinate of the client / screen.
eventMouseEventEvent handler.
targetShapeThe target.
typeStringOperation type.
currentTargetObject
itemShapeThe target item.
removedBooleanWhether the target is removed / destroyed.
timeStampNumberThe time stamp.
bubblesBooleanWhether it is a bubbled event.
defaultPreventedBooleanWhether to prevent the default event.
cancelableBooleanWhether it is cancelable.

Usage

G6.registerBehavior('behaviorName', {
  getEvents() {
    return {
      'node:click': 'onNodeClick',
      'edge:click': 'onEdgeClick',
      mousemove: 'onMouseMove',
    };
  },
  onNodeClick(evt) {
    // TODO
  },
  onEdgeClick(evt) {
    // TODO
  },
  onMouseMove(evt) {
    // TODO
  },
});

BehaviorOption.getDefaultCfg()

Default configurations while customing a Behavior. The configurations will be mixed by the configurations from user.

Tips: This function is not required.

Usage

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

BehaviorOption.shouldBegin(evt)

Whether to prevent the behavior. Return true by default, which means do not prevent the behavior. User should call it by themselves.

Usage

G6.registerBehavior('behaviorName', {
  shouldBegin() {
    // Customize it according to your scenario
    return true;
  },
});

BehaviorOption.shouldUpdate(evt)

Whether to update the data and the view. Returns true by default, which means allow updating.

Usage

const graph = new G6.Graph({
  container: 'mountNode',
  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)

Whether to end the behavior. Returns true by default.