g6/packages/site/examples/net/fruchtermanLayout/demo/fruchtermanWebWorker.ts
Aaron a0c131b0a7
feat: adapt combo, add drag-element / collapse-expand behaviors (#5543)
* refactor(runtime): merge into getChildrenData, getComboData, add get getAncestorsData

* refactor(runtime): move translate logic from graph to data controller

* feat(utils): add positionOf util

* refactor(runtime): adjust the order of drawing combos

* refactor(elements): sync combo position to model, adjust combo size calc

* refactor(utils): dfs provide depth info

* refactor(elements): combo sync position and zIndex

* feat(utils): add zIndexOf util

* refactor(runtime): refactor data/element controller to fit combo update

* test: assign graph into window.graph

* refactor(elements): combo use childrenData to get marker text

* refactor(elements): filter zIndex from graphicStyle

* feat(utils): add getSubgraphRelatedEdges util

* refactor(animation): add combo-collapse-expand animation

* refactor(runtime): add combo collapse and expand flow

* fix: fix issue in data controller and base-combo

* test: update test case and snapshots

* feat(behaviors): support click collapse-expand, drag-combo

* refactor: merge drag node and drag combo into drag element

* fix(behaviors): fix issue drag element between combo wont update

* test(behaviors): add drag-element test case and snapshots

* test: fix snapshot

* test: update test case and snapshots

* fix: fix format and types

* chore: adjust drag-node to drag element
2024-03-16 00:39:25 +08:00

40 lines
1012 B
TypeScript

import { Graph } from '@antv/g6';
const container = document.getElementById('container');
const descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML = 'Doing layout... web-worker is enabled in this demo, so the layout will not block the page.';
container.appendChild(descriptionDiv);
fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
data,
layout: {
type: 'fruchterman',
speed: 20,
gravity: 1,
maxIteration: 10000,
workerEnabled: true,
},
node: {
style: {
size: 6,
},
},
edge: {
style: {
stroke: '#ddd',
},
},
behaviors: ['drag-canvas', 'drag-element'],
});
graph.render();
graph.on('afterlayout', () => {
descriptionDiv.innerHTML = 'Layout in Worker, Done!';
});
});