G6

createGraph(
  {
    data: {
      nodes: [
        { id: 'node1', combo: 'combo1', style: { x: 250, y: 150 } },
        { id: 'node2', combo: 'combo1', style: { x: 350, y: 150 } },
        { id: 'node3', combo: 'combo2', style: { x: 250, y: 300 } },
      ],
      edges: [],
      combos: [
        { id: 'combo1', combo: 'combo2' },
        { id: 'combo2', style: {} },
      ],
    },
    node: { style: { fill: '#873bf4' } },
    edge: { style: { stroke: '#8b9baf' } },
    behaviors: [
      {
        type: 'drag-element',
        key: 'drag-element',
      },
    ],
    plugins: [{ type: 'grid-line', size: 30 }],
    animation: true,
  },
  { width: 600, height: 400 },
  (gui, graph) => {
    const options = {
      key: 'drag-element',
      type: 'drag-element',
      animation: true,
      enable: 'node,combo',
      dropEffect: 'move',
      state: 'selected',
      hideEdge: 'none',
      shadow: false,
    };
    const optionFolder = gui.addFolder('DragElement Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'animation');
    optionFolder.add(options, 'enable', {
      'node,combo': (event) => ['node', 'combo'].includes(event.targetType),
      node: (event) => ['node'].includes(event.targetType),
      combo: (event) => ['combo'].includes(event.targetType),
      none: false,
    });
    optionFolder.add(options, 'dropEffect', ['link', 'move', 'none']);
    optionFolder.add(options, 'hideEdge', ['none', 'all', 'in', 'out', 'both']);
    optionFolder.add(options, 'shadow');

    optionFolder.onChange(({ property, value }) => {
      graph.updateBehavior({
        key: 'drag-element',
        [property]: value,
      });
      graph.render();
    });
  },
);

Options

key

string

Behavior key, that is, the unique identifier

Used to identify the behavior for further operations

// Update behavior options
graph.updateBehavior({key: 'key', ...});

Required type

string

Behavior type

animation

boolean Default: true

Whether to enable drag animation

cursor

{ default?: Cursor__; grab: Cursor__; grabbing: Cursor__; }

Cursor style

dropEffect

'link' | 'move' | 'none' Default: 'move'

Drag operation effect

'link': Place the drag element as a child element of the target element
'move': Move the element and update the parent element size
'none': Only update the drag target position, no additional operations

The combo element can be placed as an element container into the node or combo element

enable

boolean | ((event: Event) => boolean) Default: ['node', 'combo'].includes(event.targetType)

Whether to enable the function of dragging the node，default can drag node and combo

hideEdge

'none' | 'all' | 'in' | 'out' | 'both' Default: 'none'

Edges hidden during dragging

'none': do not hide
'out': hide the edges with the node as the source node
'in': hide the edges with the node as the target node
'both': hide all edges related to the node
'all': hide all edges in the graph

Edges will not be hidden when using the drag shadow

onFinish

(ids: string__[]) => void

Callback when dragging is completed

shadow

boolean

Whether to enable the drag shadow, that is, use a shape to replace the node to follow the mouse movement

state

string Default: 'selected'

The state name of the selected node, when multi-selection is enabled, the selected nodes will be found based on this state

Shadow Style

shadow{BaseStyleProps}

An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format.

TextStyleProps includes the following properties:

fill
fontSize
fontWeight
...

icon{TextStyleProps} means you need to use the following property names:

iconFill
iconFontSize
iconFontWeight
...

API

DragElement.destroy()

destroy(): void;