group.md

Group

Usage

const Group = require('butterfly-dag').Group;
class AGroup extends Group {
  draw(obj) {
    // here you can custom dom according to your needs.
  }
}

// Initialize draw
canvas.draw({
  groups: [{
    id: 'xxxx',
    top: 100,
    left: 100,
    Class: AGroup // after setting the base class, the canvas will render based on the custom class.
    ...
    //the attribute below
  }],
  nodes: ...
  edges: ...
})

// Dynamic addition
canvas.addGroup({
  ...
  // the attribute below
});

The returned dom of the group must be set to position: absolute;

attribute

id <String> (Require)

  unique id of node

top <Number> (Require)

  y coordinate

left <Number> (Require)

  x coordinate

width <Number> (Optional)

  group width

height <Number> (Optional)

  group height

endpoints <Array> (Optional)

  system endpoints configuration: system endpoints will be added when this configuration is present

Class <Class> (Optional)

  extended class: when the extended class is passed in, the group will be rendered according to the draw method of the extended class, and the related methods of the extended class will also override the methods of the parent class

scope <String> (Optional)

  scope: When the scope of the node is the same as the scope of the group, it can be added to the group. You can join as you like without setting it by default

// single scope
group.scope = 'xxx';
// multiple scope, any one matched can be connected
group.scope = 'xxx1 xxx2 xxx3';

draggable <Boolean> (Optional)

  the group is draggable. the default value is true

resize <Boolean> (Optional)

  the size of the group is resizable. the default value is true

group <String> (Optional)

  the id of the parent group: For supporting group nesting, you need to set 'canvas.theme.group.includeGroups' open

Extented Class API：

import {Group} from 'butterfly-dag';

Class YourGroup extends Group {
  
  /**
    * callback after group mount
    */
  mount() {}

  /**
    * group draw function
    * @param {obj} data - group data 
    * @return {dom} - group dom
    */
  draw(obj) {}
}

External Call API：

group.getWidth()

description： get group width

return

• number the width of the group

getWidth = () => {}

group.getHeight ()

description： get group height

return

• number the height of the group

getHeight = () => {}

group.setSize(width, height)

description： set size of the group

param

• {number} widththe width of the group

• {number} heightthe height of the group

setSize = (width, height) => {}

group.addNode (node)

description： add node to the group

param

• {obj} node node data

addNode = (node) => {}

group.addNodes (nodes)

description： add multiple nodes to the group

param

• {array} nodesnodes array

addNodes = (nodes) => {}

group.removeNode (node)

description： delete node from the group

param

• {obj} nodenode data

removeNode = (node) => {}

group.removeNodes (nodes)

description： delete nodes from the group

param

• {obj} nodesnodes array

removeNodes = (nodes) => {}

group.addEndpoint (obj)

description： add endpoint to the group

params

• {obj} param endpoint data (this method must be executed after the node is mounted)
• {string} param.id endpoint id
• {string} param.orientation endpoint direction (it can control the direction of the edge linkin or linkout)
• {string} param.scope scope
• {string} param.type 'source' / 'target' / undefined，ednpoint is both source and target when undefined
• {string} param.dom any sub DOM in the node can be used as a custom endpoint

addEndpoint = (obj) => {}

group.getEndpoint (id)

description： get endpoint by id

param

• {string} pointId endpoint id

return

• {Endpoint}Endpoint Object

getEndpoint = (id) => {}

group.moveTo (obj)

description： move coordinates of the group

params

• {number} obj.x move to x coordinate
• {number} obj.y move to y coordinate

moveTo = (obj) => {}

group.emit (event, data)

description： emit events, canvas or any elements can receive event from the group

params

• {string} event emit event name
• {number} data emit event data

emit = (string, obj) => {}

group.on (string, callback)

description： receive events, the group can receive events from canvas or any elements

params

• {string} event receive event name
• {function} data receive event callback

on = (string, callback) => {}