wip: worker

Author: sareyu

src/components/Graph/GravityGraph.tsx

@@ -19,7 +19,7 @@ import {StageBlockComponent} from './BlockComponents/StageBlockComponent';
 import {ConnectionBlockComponent} from './BlockComponents/ConnectionBlockComponent';
 import {graphColorsConfig} from './colorsConfig';
 import {GraphControls} from './GraphControls';
-import {calculateTreeLayout, calculateConnectionPaths} from './treeLayout';
+// import {calculateTreeLayout, calculateConnectionPaths} from './treeLayout';
 import {NonSelectableConnection} from './NonSelectableConnection';
 
 interface Props<T> {
@@ -68,15 +68,29 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
     const {graph, start} = useGraph(config);
 
     React.useEffect(() => {
-        const blocks = prepareBlocks(data.nodes);
-        const connections = prepareConnections(data.links);
-        const layouted = calculateTreeLayout(blocks, connections);
-        const edges = calculateConnectionPaths(layouted, connections);
-
-        graph.setEntities({
-            blocks: layouted,
-            connections: edges,
+        // на всякий случай, хотя маунт больше времени занимает, чем расчёт
+        const worker = new Worker(new URL('./treeLayout', import.meta.url));
+        worker.postMessage({
+            nodes: data.nodes,
+            links: data.links,
         });
+
+        worker.onmessage = function (e) {
+            const {layout, edges} = e.data;
+
+            graph.setEntities({
+                blocks: layout,
+                connections: edges,
+            });
+        };
+
+        worker.onerror = (err) => {
+            console.error(err);
+        };
+
+        return () => {
+            worker.terminate();
+        };
     }, [data.nodes, data.links, graph]);
 
     React.useEffect(() => {

src/components/Graph/treeLayout.ts

@@ -1,3 +1,5 @@
+import {prepareBlocks, prepareConnections} from './utils';
+
 class TreeLayoutEngine {
     constructor(blocks, connections, options = {}) {
         this.blocks = new Map(blocks.map((block) => [block.id, {...block}]));
@@ -221,12 +223,12 @@ class TreeLayoutEngine {
 }
 
 // Функция для использования алгоритма
-export function calculateTreeLayout(blocks, connections, options = {}) {
+function calculateTreeLayout(blocks, connections, options = {}) {
     const engine = new TreeLayoutEngine(blocks, connections, options);
     return engine.layout();
 }
 
-export function calculateConnectionPaths(layoutResult, connections) {
+function calculateTreeEdges(layoutResult, connections) {
     // Создаем карту позиций для удобства поиска
     const positionMap = new Map(layoutResult.map((item) => [item.id, item]));
 
@@ -314,3 +316,16 @@ export function calculateConnectionPaths(layoutResult, connections) {
 
     return connectionPaths;
 }
+
+onmessage = function (e) {
+    const {nodes, links} = e.data;
+    const blocks = prepareBlocks(nodes);
+    const connections = prepareConnections(links);
+    const layout = calculateTreeLayout(blocks, connections);
+    const edges = calculateTreeEdges(layout, connections);
+
+    postMessage({
+        layout,
+        edges,
+    });
+};