CollapseExpand 展开/收起元素
阅读时间约 2 分钟
通过操作展开/收起元素。
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: '#7e3feb' } },edge: { style: { stroke: '#8b9baf' } },behaviors: [{type: 'collapse-expand',key: 'collapse-expand',},],plugins: [{ type: 'grid-line', size: 30 }],animation: true,},{ width: 600, height: 400 },(gui, graph) => {const options = {key: 'collapse-expand',type: 'collapse-expand',animation: true,enable: true,};const optionFolder = gui.addFolder('CollapseExpand Options');optionFolder.add(options, 'type').disable(true);optionFolder.add(options, 'animation');optionFolder.add(options, 'enable');optionFolder.onChange(({ property, value }) => {graph.updateBehavior({key: 'collapse-expand',[property]: value,});graph.render();});},);
collapse-expand
| string
此插件已内置,你可以通过 type: 'collapse-expand'
来使用它。
boolean
是否对准目标元素,避免视图偏移
boolean Default:
true
是否启用动画
boolean | ((event: Event) => boolean) Default:
true
是否启用展开/收起功能
(id: string) => void
完成收起时的回调
(id: string) => void
完成展开时的回调
CommonEvent.CLICK | CommonEvent.DBLCLICK Default:
'dblclick'
触发方式
destroy(): void;
update(options: Partial<CollapseExpandOptions>): void;
参数 | 类型 | 描述 | 默认值 | 必选 |
---|---|---|---|---|
options | Partial<CollapseExpandOptions> | 配置项 | - | ✓ |