Web Worker Demo (Webpack)
This demo shows how to run a yFiles layout algorithm in a
Web Worker
task in order to prevent the layout calculation from blocking the UI.
This demo uses webpack to handle the loading of the yFiles library.
The graph, layout, and layout data are configured in the main thread and transferred to
the web worker using class LayoutExecutorAsync. The actual layout
calculation is performed in WorkerLayout.ts with class
LayoutExecutorAsyncWorker on the web worker thread.
Things to Try
-
Modify the graph structure by adding/removing nodes and edges, and re-run the web worker
layout.
-
Observe the loading animation which continues while the layout algorithm is working.
Calculating the layout in a Web Worker keeps the UI responsive.