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();
    });
  },
);

配置项

Required type

drag-element | string

此插件已内置，你可以通过 type: 'drag-element' 来使用它。

animation

boolean Default: true

是否启用拖拽动画

cursor

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

指针样式

dropEffect

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

拖拽操作效果

'link': 将拖拽元素置入为目标元素的子元素
'move': 移动元素并更新父元素尺寸
'none': 仅更新拖拽目标位置，不做任何额外操作

combo 元素可作为元素容器置入 node 或 combo 元素

enable

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

是否启用拖拽节点的功能，默认可以拖拽 node 和 combo

hideEdge

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

拖拽时隐藏的边

'none': 不隐藏
'out': 隐藏以节点为源节点的边
'in': 隐藏以节点为目标节点的边
'both': 隐藏与节点相关的所有边
'all': 隐藏图中所有边

使用幽灵节点时不会隐藏边

onFinish

(ids: string__[]) => void

完成拖拽时的回调

shadow

boolean

是否启用幽灵节点，即用一个图形代替节点跟随鼠标移动

state

string Default: 'selected'

节点选中的状态，启用多选时会基于该状态查找选中的节点

Shadow 样式

shadow{BaseStyleProps}

形如 icon{TextStyleProps} 的表达式表示在 TextStyleProps 属性名前以小驼峰形式加上 icon 前缀

TextStyleProps 包含以下属性：

fill
fontSize
fontWeight
...

icon{TextStyleProps} 表示你需要使用以下属性名：

iconFill
iconFontSize
iconFontWeight
...

API

DragElement.destroy()

destroy(): void;

DragElement 拖拽元素

配置项