CollapseExpand
Reading needs 2 minutes
Expand/collapse elements by operation.
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();});},);
string
Behavior key, that is, the unique identifier
Used to identify the behavior for further operations
// Update behavior optionsgraph.updateBehavior({key: 'key', ...});
string
Behavior type
boolean
Whether to focus on the target element to avoid view offset
boolean Default:
true
Whether to enable animation
boolean | ((event: Event) => boolean) Default:
true
Whether to enable the expand/collapse function
(id: string) => void
Callback when collapse is completed
(id: string) => void
Callback when expand is completed
CommonEvent.CLICK | CommonEvent.DBLCLICK Default:
'dblclick'
Trigger method
destroy(): void;
update(options: Partial<CollapseExpandOptions>): void;