chore(elk): transferring elk initialization to the user's side (#45)

Author: Antamansid

package.json

@@ -45,7 +45,6 @@
     "rbush": "^3.0.1"
   },
   "peerDependencies": {
-    "elkjs": "^0.9.3",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
   },
@@ -85,6 +84,7 @@
     "@typescript-eslint/parser": "5.39.0",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
+    "elkjs": "^0.9.3",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-import-resolver-typescript": "2.5.0",

src/plugins/elk/hooks/useElk.ts

@@ -1,16 +1,19 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
-import ELK, { ElkLayoutArguments, ElkNode } from "elkjs";
+import type ELK from "elkjs";
+import type { ElkLayoutArguments, ElkNode } from "elkjs";
 
 import { elkConverter } from "../converters/eklConverter";
 import { ConverterResult } from "../types";
 
-export const useElk = (config: ElkNode, args?: ElkLayoutArguments & { onError?: (e: Error) => void }) => {
+export const useElk = (
+  config: ElkNode,
+  elk: InstanceType<typeof ELK>,
+  args?: ElkLayoutArguments & { onError?: (e: Error) => void }
+) => {
   const [result, setResult] = useState<ConverterResult | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
-  const elk = useMemo(() => new ELK(), []);
-
   const layout = useCallback(() => {
     return elk.layout(config, args);
   }, [elk, config, args]);
@@ -36,5 +39,5 @@ export const useElk = (config: ElkNode, args?: ElkLayoutArguments & { onError?:
     };
   }, [layout]);
 
-  return { result, isLoading, elk };
+  return { result, isLoading };
 };

src/stories/plugins/elk/elk.stories.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 
 import { Select, SelectOption, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react";
+import ELK from "elkjs";
 
 import { Graph, GraphCanvas, GraphState, TBlock, TConnection, useGraph, useGraphEvent } from "../../../index";
 import { MultipointConnection, useElk } from "../../../plugins";
@@ -29,6 +30,9 @@ import "@gravity-ui/uikit/styles/styles.css";
 const GraphApp = () => {
   const [algorithm, setAlgorithm] = useState(Algorithm.Layered);
   const [algorithms, setAlgorithms] = useState<SelectOption[]>([]);
+
+  const elk = useMemo(() => new ELK(), []);
+
   const { graph, setEntities, start } = useGraph({
     settings: {
       connection: MultipointConnection,
@@ -39,7 +43,7 @@ const GraphApp = () => {
     return getExampleConfig(algorithm);
   }, [algorithm]);
 
-  const { isLoading, elk, result } = useElk(elkConfig);
+  const { isLoading, result } = useElk(elkConfig, elk);
 
   useEffect(() => {
     if (isLoading || !result) return;