Merge pull request #275 from AykutSarac/feat/elkjs-web-worker

Feat/elkjs web worker

Author: ghsteff

copy-elk-storybook.js

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import path from 'path';
+
+// Copy elk-worker.min.js from node_modules to storybook-static/assets directory
+const sourceFile = 'node_modules/elkjs/lib/elk-worker.min.js';
+const targetDir = 'storybook-static/assets';
+const targetFile = path.join(targetDir, 'elk-worker.min.js');
+
+// Create assets directory if it doesn't exist
+if (!fs.existsSync(targetDir)) {
+  fs.mkdirSync(targetDir, { recursive: true });
+}
+
+// Copy the file
+if (fs.existsSync(sourceFile)) {
+  const content = fs.readFileSync(sourceFile);
+  fs.writeFileSync(targetFile, content);
+  console.log('Successfully copied elk-worker.min.js to storybook-static/assets directory');
+} else {
+  console.error('Error: Could not find elk-worker.min.js in node_modules');
+}

package-lock.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "vite build --mode library",
     "build:watch": "vite build --watch --mode library",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build && node copy-elk-storybook.js",
     "prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "lint": "eslint --ext js,ts,tsx",
     "lint:fix": "eslint --ext js,ts,tsx --fix src",
@@ -52,11 +52,11 @@
     "calculate-size": "^1.1.1",
     "classnames": "^2.3.2",
     "d3-shape": "^3.0.1",
-    "elkjs": "^0.8.2",
+    "elkjs": "^0.10.0",
     "ellipsize": "^0.2.0",
-    "motion": "^12.4.2",
     "kld-affine": "^2.1.1",
     "kld-intersections": "^0.7.0",
+    "motion": "^12.4.2",
     "p-cancelable": "^3.0.0",
     "reablocks": "^8.7.6",
     "react-cool-dimensions": "^2.0.7",
@@ -110,7 +110,8 @@
     "vite-plugin-dts": "^3.3.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^0.33.0"
+    "vitest": "^0.33.0",
+    "web-worker": "^1.5.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [

package.json

@@ -1,5 +1,5 @@
 import { EdgeData, NodeData } from '../types';
-import ELK, { ElkNode } from 'elkjs/lib/elk.bundled.js';
+import type { ELK, ElkNode } from 'elkjs';
 import PCancelable from 'p-cancelable';
 import { formatText, measureText } from './utils';
 
@@ -321,14 +321,45 @@ function postProcessNode(nodes: any[]): any[] {
   return nodes;
 }
 
+const isBrowser = typeof window !== 'undefined' && typeof Worker !== 'undefined';
+let elkInstance: ELK | null = null;
+
+const getElk = async () => {
+  if (elkInstance) return elkInstance;
+
+  if (!isBrowser) {
+    const ELKModule = await import('elkjs/lib/elk.bundled.js');
+    elkInstance = new ELKModule.default({
+      algorithms: ['layered']
+    });
+
+    return elkInstance;
+  } else {
+    const ELKModule = await import('elkjs/lib/elk-api');
+    let workerPath = await import.meta.resolve('./elk-worker.min.js');
+    if (import.meta.env.DEV) {
+      workerPath = '/node_modules/elkjs/lib/elk-worker.min.js';
+    }
+
+    elkInstance = new ELKModule.default({
+      algorithms: ['layered'],
+      workerFactory: () => {
+        return new Worker(workerPath);
+      }
+    });
+
+    return elkInstance;
+  }
+};
+
 export const elkLayout = (nodes: NodeData[], edges: EdgeData[], options: ElkCanvasLayoutOptions) => {
-  const graph = new ELK();
-  const layoutOptions: ElkCanvasLayoutOptions = {
-    ...defaultLayoutOptions,
-    ...options
-  };
+  return new PCancelable<ElkNode>(async (resolve, reject) => {
+    const graph = await getElk();
+    const layoutOptions: ElkCanvasLayoutOptions = {
+      ...defaultLayoutOptions,
+      ...options
+    };
 
-  return new PCancelable<ElkNode>((resolve, reject) => {
     graph
       .layout(
         {

src/layout/elkLayout.ts

@@ -9,6 +9,26 @@ import { resolve } from 'path';
 import external from 'rollup-plugin-peer-deps-external';
 import dts from 'vite-plugin-dts';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import fs from 'fs';
+
+// Custom plugin to copy elk-worker.min.js to the output directory
+const copyElkWorker = () => {
+  return {
+    name: 'copy-elk-worker',
+    closeBundle() {
+      const sourceFile = 'node_modules/elkjs/lib/elk-worker.min.js';
+      const targetFile = 'dist/elk-worker.min.js';
+
+      if (fs.existsSync(sourceFile)) {
+        const content = fs.readFileSync(sourceFile);
+        fs.writeFileSync(targetFile, content);
+        console.log('Successfully copied elk-worker.min.js to dist directory');
+      } else {
+        console.error('Error: Could not find elk-worker.min.js in node_modules');
+      }
+    }
+  };
+};
 
 export default defineConfig(({ mode }) =>
   mode === 'library'
@@ -24,7 +44,8 @@ export default defineConfig(({ mode }) =>
         }),
         checker({
           typescript: true
-        })
+        }),
+        copyElkWorker()
       ],
       test: {
         globals: true,
@@ -44,7 +65,7 @@ export default defineConfig(({ mode }) =>
             external({
               includeDependencies: true
             })
-          ]
+          ],
         }
       }
     }