g6/docs/api/Behavior.en.md

title	order
Behavior and RegisterBehavior	13

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.

// highlight-start
G6.registerBehavior(behaviorName: string, behavior: BehaviorOption)
// highlight-end

// 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

Name	Type	Required	Description
behaviorName	String	true	The name of custom Behavior.
behavior	BehaviorOption	true	The 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

Name	Type	Required	Description
evt	Event	false	contains event handler, current target, and coordinates.

The parameter evt contains:

Name	Type	Description
x	Number	x coordinate of view port.
y	Number	y coordinate of view port.
canvasX	Number	x coordinate of the canvas.
canvasY	Number	y coordinate of the canvas.
clientX	Number	x coordinate of the client / screen.
clientY	Number	y coordinate of the client / screen.
event	MouseEvent	Event handler.
target	Shape	The target.
type	String	Operation type.
currentTarget	Object
item	Shape	The target item.
removed	Boolean	Whether the target is removed / destroyed.
timeStamp	Number	The time stamp.
bubbles	Boolean	Whether it is a bubbled event.
defaultPrevented	Boolean	Whether to prevent the default event.
cancelable	Boolean	Whether 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.