@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/{public → app/public}/index.html +3 -3
  2. package/{src → app/src}/App.tsx +1 -1
  3. package/{src → app/src}/index.tsx +6 -6
  4. package/app/tsconfig.app.json +10 -0
  5. package/app/webpack.config.js +143 -0
  6. package/{src → module/src}/frontend/datarenderer/index.tsx +1 -0
  7. package/{src → module/src}/frontend/dialog.tsx +1 -0
  8. package/{src → module/src}/frontend/edge.tsx +1 -0
  9. package/{src/frontend → module/src/frontend/funcnodesreactflow}/funcnodesreactflow.scss +1 -1
  10. package/module/src/frontend/funcnodesreactflow/index.tsx +68 -0
  11. package/{src/frontend/funcnodesreactflow.tsx → module/src/frontend/funcnodesreactflow/react_flow_layer.tsx} +65 -136
  12. package/{src → module/src}/frontend/header/index.tsx +2 -1
  13. package/{src → module/src}/frontend/index.tsx +1 -1
  14. package/{src → module/src}/frontend/lib.tsx +2 -1
  15. package/{src → module/src}/frontend/node/io/default_input_renderer.tsx +3 -1
  16. package/{src → module/src}/frontend/node/io/default_output_render.tsx +3 -4
  17. package/{src → module/src}/frontend/node/io/handle_renderer.tsx +6 -1
  18. package/{src → module/src}/frontend/node/io/io.tsx +1 -0
  19. package/{src → module/src}/frontend/node/io/nodeinput.tsx +3 -1
  20. package/{src → module/src}/frontend/node/io/nodeoutput.tsx +7 -1
  21. package/{src → module/src}/frontend/node/node.tsx +3 -2
  22. package/{src → module/src}/frontend/utils/table.tsx +3 -2
  23. package/{src → module/src}/funcnodes/funcnodesworker.ts +6 -5
  24. package/{src → module/src}/funcnodes/websocketworker.ts +0 -1
  25. package/{src → module/src}/funcnodes/workermanager.ts +6 -2
  26. package/module/src/index.tsx +4 -0
  27. package/{src/state/edge.ts → module/src/states/edge.t.ts} +0 -15
  28. package/module/src/states/edge.ts +15 -0
  29. package/module/src/states/fnrfzst.t.ts +117 -0
  30. package/{src/state → module/src/states}/fnrfzst.ts +19 -44
  31. package/module/src/states/index.ts +7 -0
  32. package/module/src/states/lib.t.ts +30 -0
  33. package/module/src/states/lib.ts +16 -0
  34. package/{src/state/node.ts → module/src/states/node.t.ts} +24 -44
  35. package/module/src/states/node.ts +46 -0
  36. package/{src/types/nodeio.d.ts → module/src/states/nodeio.t.ts} +21 -0
  37. package/module/src/states/nodespace.t.ts +57 -0
  38. package/{src/state → module/src/states}/nodespace.ts +4 -65
  39. package/module/src/states/reactflow.t.ts +27 -0
  40. package/{src/state → module/src/states}/reactflow.ts +2 -18
  41. package/module/src/types/funcnodesreactflow.d.ts +1 -0
  42. package/module/src/types/rendering.t.ts +13 -0
  43. package/module/src/utils/index.ts +4 -0
  44. package/{src/state/index.ts → module/src/utils/objects.ts} +0 -8
  45. package/module/tsconfig.module.json +15 -0
  46. package/module/webpack.config.js +140 -0
  47. package/package.json +27 -5
  48. package/tsconfig.json +1 -3
  49. package/package copy.json +0 -63
  50. package/src/frontend/nodecontextmenu.scss +0 -18
  51. package/src/logo.svg +0 -1
  52. package/src/state/lib.ts +0 -26
  53. package/src/types/lib.d.ts +0 -16
  54. package/src/types/node.d.ts +0 -29
  55. package/src/types/worker.d.ts +0 -56
  56. /package/{public → app/public}/favicon.ico +0 -0
  57. /package/{public → app/public}/logo192.png +0 -0
  58. /package/{public → app/public}/logo512.png +0 -0
  59. /package/{public → app/public}/manifest.json +0 -0
  60. /package/{public → app/public}/robots.txt +0 -0
  61. /package/{public → app/public}/worker_manager +0 -0
  62. /package/{src → app/src}/App.css +0 -0
  63. /package/{src → app/src}/App.test.tsx +0 -0
  64. /package/{src → app/src}/index.css +0 -0
  65. /package/{src → app/src}/react-app-env.d.ts +0 -0
  66. /package/{src → app/src}/reportWebVitals.ts +0 -0
  67. /package/{src → app/src}/setupTests.ts +0 -0
  68. /package/{src → module/src}/frontend/datarenderer/images.tsx +0 -0
  69. /package/{src → module/src}/frontend/datarenderer/plotly.tsx +0 -0
  70. /package/{src → module/src}/frontend/dialog.scss +0 -0
  71. /package/{src → module/src}/frontend/edge.scss +0 -0
  72. /package/{src → module/src}/frontend/header/header.scss +0 -0
  73. /package/{src → module/src}/frontend/layout/htmlelements.scss +0 -0
  74. /package/{src → module/src}/frontend/lib.scss +0 -0
  75. /package/{src → module/src}/frontend/node/index.tsx +0 -0
  76. /package/{src → module/src}/frontend/node/io/index.tsx +0 -0
  77. /package/{src → module/src}/frontend/node/io/io.scss +0 -0
  78. /package/{src → module/src}/frontend/node/node.scss +0 -0
  79. /package/{src → module/src}/frontend/utils/colorpicker.scss +0 -0
  80. /package/{src → module/src}/frontend/utils/colorpicker.tsx +0 -0
  81. /package/{src → module/src}/frontend/utils/jsondata.tsx +0 -0
  82. /package/{src → module/src}/frontend/utils/table.scss +0 -0
  83. /package/{src → module/src}/funcnodes/index.ts +0 -0
package/{public → app/public}/index.html RENAMED
@@ -2,19 +2,19 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8" />
5
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5
+ <link rel="icon" href="/favicon.ico" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
7
  <meta name="theme-color" content="#000000" />
8
8
  <meta
9
9
  name="description"
10
10
  content="Web site created using create-react-app"
11
11
  />
12
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12
+ <link rel="apple-touch-icon" href="/logo192.png" />
13
13
  <!--
14
14
  manifest.json provides metadata used when your web app is installed on a
15
15
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
16
  -->
17
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17
+ <link rel="manifest" href="/manifest.json" />
18
18
  <!--
19
19
  Notice the use of %PUBLIC_URL% in the tags above.
20
20
  It will be replaced with the URL of the `public` folder during the build.
package/{src → app/src}/App.tsx RENAMED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import "./App.css";
3
3
  import "reactflow/dist/style.css";
4
- import FuncnodesReactFlow from "./frontend";
4
+ import FuncnodesReactFlow from "../../module/src";
5
5
 
6
6
  function App() {
7
7
  return (
package/{src → app/src}/index.tsx RENAMED
@@ -1,11 +1,11 @@
1
- import React from 'react';
2
- import ReactDOM from 'react-dom/client';
3
- import './index.css';
4
- import App from './App';
5
- import reportWebVitals from './reportWebVitals';
1
+ import React from "react";
2
+ import ReactDOM from "react-dom/client";
3
+ import "./index.css";
4
+ import App from "./App";
5
+ import reportWebVitals from "./reportWebVitals";
6
6
 
7
7
  const root = ReactDOM.createRoot(
8
- document.getElementById('root') as HTMLElement
8
+ document.getElementById("root") as HTMLElement
9
9
  );
10
10
  root.render(
11
11
  <React.StrictMode>
package/app/tsconfig.app.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "extends": "../tsconfig.json",
3
+ "compilerOptions": {
4
+ "outDir": "./dist",
5
+ "module": "esnext",
6
+
7
+ "noEmit": false
8
+ },
9
+ "include": ["src/**/*"]
10
+ }
package/app/webpack.config.js ADDED
@@ -0,0 +1,143 @@
1
+ // webpack.config.js
2
+ const path = require("path");
3
+ const HtmlWebpackPlugin = require("html-webpack-plugin");
4
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
5
+ const glob = require("glob");
6
+ const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
7
+
8
+ const PATHS = {
9
+ src: path.join(__dirname, "src"),
10
+ };
11
+
12
+ module.exports = {
13
+ context: __dirname,
14
+ entry: "./src/index.tsx",
15
+
16
+ output: {
17
+ path: path.resolve(__dirname, "dist"),
18
+ filename: "js/bundle.js",
19
+ },
20
+ performance: {
21
+ maxEntrypointSize: 5 * 1024 * 1024, // 5mb
22
+ maxAssetSize: 5 * 1024 * 1024, // 5mb
23
+ },
24
+ mode: "production",
25
+ // mode: "development",
26
+ module: {
27
+ rules: [
28
+ //typescript
29
+ {
30
+ test: /\.(tsx|ts)$/,
31
+ use: [
32
+ {
33
+ loader: "ts-loader",
34
+ options: {
35
+ configFile: "tsconfig.app.json",
36
+ },
37
+ },
38
+ ],
39
+ exclude: /node_modules/,
40
+ },
41
+ //css
42
+ {
43
+ test: /\.css$/,
44
+ use: [
45
+ // "style-loader",
46
+ MiniCssExtractPlugin.loader,
47
+ { loader: "css-loader", options: { importLoaders: 5 } },
48
+ {
49
+ loader: "postcss-loader",
50
+ options: {
51
+ postcssOptions: {
52
+ plugins: [require("autoprefixer"), require("cssnano")],
53
+ },
54
+ },
55
+ },
56
+ ],
57
+ sideEffects: true,
58
+ },
59
+ //javascript
60
+ {
61
+ test: /\.js$/,
62
+ use: "babel-loader",
63
+ },
64
+ //scss
65
+ {
66
+ test: /\.scss$/,
67
+ sideEffects: true,
68
+ use: [
69
+ MiniCssExtractPlugin.loader,
70
+ // "style-loader",
71
+ {
72
+ loader: "css-loader",
73
+ options: {
74
+ importLoaders: 5,
75
+ url: true, // Ensure CSS loader handles URL() paths
76
+ },
77
+ },
78
+
79
+ {
80
+ loader: "postcss-loader",
81
+ options: {
82
+ postcssOptions: {
83
+ plugins: [require("autoprefixer"), require("cssnano")],
84
+ },
85
+ },
86
+ },
87
+ {
88
+ loader: "sass-loader",
89
+ },
90
+ ],
91
+ },
92
+ //images
93
+ {
94
+ test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
95
+ type: "asset/resource",
96
+ generator: {
97
+ filename: "img/[name][ext][query]",
98
+ },
99
+ },
100
+ //fonts
101
+ {
102
+ test: /\.(woff|woff2|eot|ttf|otf)$/i,
103
+ type: "asset/resource",
104
+ generator: {
105
+ filename: "fonts/[name][ext][query]",
106
+ },
107
+ },
108
+ ],
109
+ },
110
+
111
+ devServer: {
112
+ static: "./public",
113
+ historyApiFallback: true,
114
+ },
115
+ plugins: [
116
+ new MiniCssExtractPlugin({
117
+ // Options similar to the same options in webpackOptions.output
118
+ // both options are optional
119
+ filename: "css/style.css",
120
+ chunkFilename: "css/[name].css",
121
+ }),
122
+ new PurgeCSSPlugin({
123
+ paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
124
+ whitelistPatterns: [/sm:/, /md:/, /lg:/, /xl:/, /2xl:/, /bg-/, /text-/],
125
+ defaultExtractor: (content) => content.match(/[\w-/:.!]+(?<!:)/g) || [],
126
+ }),
127
+ new HtmlWebpackPlugin({
128
+ template: "./public/index.html",
129
+ }),
130
+ ],
131
+ resolve: {
132
+ extensions: [
133
+ ".js",
134
+ ".jsx",
135
+ ".tsx",
136
+ ".ts",
137
+ ".html",
138
+ ".scss",
139
+ ".css",
140
+ ".ttf",
141
+ ],
142
+ },
143
+ };
package/{src → module/src}/frontend/datarenderer/index.tsx RENAMED
@@ -1,3 +1,4 @@
1
+ import { RenderType } from "../../types/rendering.t";
1
2
  import { Base64ImageRenderer, ImageRenderOptions } from "./images";
2
3
  import AnyPlot from "./plotly";
3
4
 
package/{src → module/src}/frontend/dialog.tsx RENAMED
@@ -1,3 +1,4 @@
1
+ import React from "react";
1
2
  import * as Dialog from "@radix-ui/react-dialog";
2
3
  import CloseIcon from "@mui/icons-material/Close";
3
4
  import "./dialog.scss";
package/{src → module/src}/frontend/edge.tsx RENAMED
@@ -1,5 +1,6 @@
1
1
  import { EdgeProps, getBezierPath, BaseEdge } from "reactflow";
2
2
  import "./edge.scss";
3
+ import React from "react";
3
4
 
4
5
  const DefaultEdge = ({
5
6
  id,
package/{src/frontend → module/src/frontend/funcnodesreactflow}/funcnodesreactflow.scss RENAMED
@@ -1,4 +1,4 @@
1
- @import "./layout/htmlelements.scss";
1
+ @import "../layout/htmlelements.scss";
2
2
  :root {
3
3
  --funheadercolor: #00d9ff; // Dark background color
4
4
  --funcnodesbackground1: hsl(243, 26%, 13%); // Dark background color
package/module/src/frontend/funcnodesreactflow/index.tsx ADDED
@@ -0,0 +1,68 @@
1
+ import { createContext, useEffect, useState } from "react";
2
+ import FuncNodesWorker from "../../funcnodes/funcnodesworker";
3
+ import FuncNodesReactFlowZustand from "../../states/fnrfzst";
4
+ import React from "react";
5
+ import { WorkerManager } from "../../funcnodes";
6
+
7
+ import FuncnodesHeader from "../header";
8
+ import Library from "../lib";
9
+ import ReactFlowLayer from "./react_flow_layer";
10
+ import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
11
+
12
+ const FuncNodesContext = createContext<FuncNodesReactFlowZustandInterface>(
13
+ FuncNodesReactFlowZustand()
14
+ );
15
+
16
+ const InnerFuncnodesReactFlow = ({
17
+ fnrf_zst,
18
+ }: {
19
+ fnrf_zst: FuncNodesReactFlowZustandInterface;
20
+ }) => {
21
+ const [workermanageruri, setWorkermanageruri] = useState<string>("");
22
+ const [worker, setWorker] = useState<FuncNodesWorker | undefined>(undefined);
23
+
24
+ useEffect(() => {
25
+ async function fetch_worker_manager() {
26
+ let response = await fetch("/worker_manager");
27
+ let workerewsuri = await response.text();
28
+ setWorkermanageruri(workerewsuri);
29
+ }
30
+ fetch_worker_manager();
31
+ }, []);
32
+
33
+ useEffect(() => {
34
+ if (workermanageruri) {
35
+ const workermanager = new WorkerManager(workermanageruri, fnrf_zst);
36
+ workermanager.on_setWorker = setWorker;
37
+ fnrf_zst.workermanager = workermanager;
38
+ }
39
+ }, [workermanageruri]);
40
+
41
+ fnrf_zst.worker = worker;
42
+ // const worker = new WebSocketWorker("ws://localhost:9382", fnrf_zst);
43
+ // fnrf_zst.worker = worker;
44
+
45
+ return (
46
+ <FuncNodesContext.Provider value={fnrf_zst}>
47
+ <div className="funcnodesreactflowcontainer">
48
+ <FuncnodesHeader></FuncnodesHeader>
49
+
50
+ <div className="funcnodesreactflowbody">
51
+ <Library></Library>
52
+ <ReactFlowLayer></ReactFlowLayer>
53
+ </div>
54
+ </div>
55
+ </FuncNodesContext.Provider>
56
+ );
57
+ };
58
+
59
+ const FuncnodesReactFlow = () => {
60
+ const fnrf_zst = FuncNodesReactFlowZustand();
61
+
62
+ // @ts-ignore
63
+ window.fnrf_zst = fnrf_zst; // For debugging
64
+ return <InnerFuncnodesReactFlow fnrf_zst={fnrf_zst} />;
65
+ };
66
+
67
+ export default FuncnodesReactFlow;
68
+ export { FuncNodesContext };
package/{src/frontend/funcnodesreactflow.tsx → module/src/frontend/funcnodesreactflow/react_flow_layer.tsx} RENAMED
@@ -1,48 +1,82 @@
1
- import {
2
- createContext,
1
+ import React, {
3
2
  useCallback,
4
3
  useContext,
5
4
  useEffect,
6
- useMemo,
7
5
  useRef,
8
6
  useState,
9
- MouseEvent as ReactMouseEvent,
10
7
  } from "react";
11
- import { FuncNodesWorker, WebSocketWorker, WorkerManager } from "../funcnodes";
12
- import "./funcnodesreactflow.scss";
13
- import useStore, { RFState } from "../state/reactflow";
14
- import { shallow } from "zustand/shallow";
15
- import { useShallow } from "zustand/react/shallow";
8
+
16
9
  import ReactFlow, {
17
- Edge,
18
- Node,
19
10
  Background,
20
- ReactFlowProvider,
11
+ EdgeTypes,
21
12
  MiniMap,
22
- useReactFlow,
23
- FitView,
13
+ Node,
24
14
  NodeTypes,
25
- EdgeTypes,
26
- useKeyPress,
27
15
  useEdges,
16
+ useKeyPress,
28
17
  useNodes,
18
+ useReactFlow,
29
19
  } from "reactflow";
30
- import Library from "./lib";
31
- import FuncNodesReactFlowZustand, {
32
- FuncNodesReactFlowZustandInterface,
33
- } from "../state";
20
+ import { FuncNodesContext } from "..";
21
+ import { useShallow } from "zustand/react/shallow";
22
+ import { RFState } from "../../states/reactflow.t";
23
+ import DefaultNode from "../node";
24
+ import DefaultEdge from "../edge";
25
+ import { NodeType } from "../../states/node.t";
26
+ import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
27
+ import "reactflow/dist/style.css";
28
+ import "./funcnodesreactflow.scss";
34
29
 
35
- import DefaultNode from "./node";
36
- import ConnectionLine from "./edge";
30
+ const selector = (state: RFState) => ({
31
+ nodes: state.nodes,
32
+ edges: state.edges,
33
+ onNodesChange: state.onNodesChange,
34
+ onEdgesChange: state.onEdgesChange,
35
+ onConnect: state.onConnect,
36
+ });
37
+
38
+ const nodeTypes: NodeTypes = { default: DefaultNode };
37
39
 
38
- import "./nodecontextmenu.scss";
39
- import DefaultEdge from "./edge";
40
- import { Key } from "@mui/icons-material";
41
- import FuncnodesHeader from "./header";
40
+ const edgeTypes: EdgeTypes = {
41
+ default: DefaultEdge,
42
+ };
42
43
 
43
- const FuncNodesContext = createContext<FuncNodesReactFlowZustandInterface>(
44
- FuncNodesReactFlowZustand()
45
- );
44
+ const ReactFlowManager = () => {
45
+ const rfinstance = useReactFlow();
46
+ const fnrf_zst = useContext(FuncNodesContext);
47
+ fnrf_zst.rf_instance = rfinstance;
48
+ return <></>;
49
+ };
50
+
51
+ const KeyHandler = () => {
52
+ const fnrf_zst = useContext(FuncNodesContext);
53
+ const delPressed = useKeyPress("Delete");
54
+ const edges = useEdges();
55
+ const nodes = useNodes();
56
+ if (delPressed) {
57
+ for (const edge of edges) {
58
+ if (edge.selected) {
59
+ if (!fnrf_zst.worker) return <></>;
60
+ if (!edge.source || !edge.target) return <></>;
61
+ if (!edge.sourceHandle || !edge.targetHandle) return <></>;
62
+ fnrf_zst.worker?.remove_edge({
63
+ src_nid: edge.source,
64
+ src_ioid: edge.sourceHandle,
65
+ trg_nid: edge.target,
66
+ trg_ioid: edge.targetHandle,
67
+ });
68
+ }
69
+ }
70
+ for (const node of nodes) {
71
+ if (node.selected) {
72
+ if (!fnrf_zst.worker) return <></>;
73
+ fnrf_zst.worker.remove_node(node.id);
74
+ }
75
+ }
76
+ }
77
+
78
+ return <></>;
79
+ };
46
80
 
47
81
  type ContextMenuProps = {
48
82
  id: string;
@@ -99,27 +133,6 @@ const ContextMenu = ({
99
133
  );
100
134
  };
101
135
 
102
- const ReactFlowManager = () => {
103
- const rfinstance = useReactFlow();
104
- const fnrf_zst = useContext(FuncNodesContext);
105
- fnrf_zst.rf_instance = rfinstance;
106
- return <></>;
107
- };
108
-
109
- const selector = (state: RFState) => ({
110
- nodes: state.nodes,
111
- edges: state.edges,
112
- onNodesChange: state.onNodesChange,
113
- onEdgesChange: state.onEdgesChange,
114
- onConnect: state.onConnect,
115
- });
116
-
117
- const nodeTypes: NodeTypes = { default: DefaultNode };
118
-
119
- const edgeTypes: EdgeTypes = {
120
- default: DefaultEdge,
121
- };
122
-
123
136
  const ReactFlowLayer = () => {
124
137
  const fnrf_zst: FuncNodesReactFlowZustandInterface =
125
138
  useContext(FuncNodesContext);
@@ -133,7 +146,7 @@ const ReactFlowLayer = () => {
133
146
  const [menu, setMenu] = useState<ContextMenuProps | null>(null);
134
147
 
135
148
  const onNodeContextMenu = useCallback(
136
- (event: ReactMouseEvent, node: Node) => {
149
+ (event: React.MouseEvent, node: Node) => {
137
150
  if (!reactflowRef.current) return;
138
151
  // Prevent native context menu from showing
139
152
  event.preventDefault();
@@ -196,88 +209,4 @@ const ReactFlowLayer = () => {
196
209
  );
197
210
  };
198
211
 
199
-
200
-
201
- const KeyHandler = () => {
202
- const fnrf_zst = useContext(FuncNodesContext);
203
- const delPressed = useKeyPress("Delete");
204
- const edges = useEdges();
205
- const nodes = useNodes();
206
- if (delPressed) {
207
- for (const edge of edges) {
208
- if (edge.selected) {
209
- if (!fnrf_zst.worker) return <></>;
210
- if (!edge.source || !edge.target) return <></>;
211
- if (!edge.sourceHandle || !edge.targetHandle) return <></>;
212
- fnrf_zst.worker?.remove_edge({
213
- src_nid: edge.source,
214
- src_ioid: edge.sourceHandle,
215
- trg_nid: edge.target,
216
- trg_ioid: edge.targetHandle,
217
- });
218
- }
219
- }
220
- for (const node of nodes) {
221
- if (node.selected) {
222
- if (!fnrf_zst.worker) return <></>;
223
- fnrf_zst.worker.remove_node(node.id);
224
- }
225
- }
226
- }
227
-
228
- return <></>;
229
- };
230
-
231
- const InnerFuncnodesReactFlow = ({
232
- fnrf_zst,
233
- }: {
234
- fnrf_zst: FuncNodesReactFlowZustandInterface;
235
- }) => {
236
- const [workermanageruri, setWorkermanageruri] = useState<string>("");
237
- const [worker, setWorker] = useState<FuncNodesWorker | undefined>(undefined);
238
-
239
- useEffect(() => {
240
- async function fetch_worker_manager() {
241
- let response = await fetch("/worker_manager");
242
- let workerewsuri = await response.text();
243
- setWorkermanageruri(workerewsuri);
244
- }
245
- fetch_worker_manager();
246
- }, []);
247
-
248
- useEffect(() => {
249
- if (workermanageruri) {
250
- const workermanager = new WorkerManager(workermanageruri, fnrf_zst);
251
- workermanager.on_setWorker = setWorker;
252
- fnrf_zst.workermanager = workermanager;
253
- }
254
- }, [workermanageruri]);
255
-
256
- fnrf_zst.worker = worker;
257
- // const worker = new WebSocketWorker("ws://localhost:9382", fnrf_zst);
258
- // fnrf_zst.worker = worker;
259
-
260
- return (
261
- <FuncNodesContext.Provider value={fnrf_zst}>
262
- <div className="funcnodesreactflowcontainer">
263
- <FuncnodesHeader></FuncnodesHeader>
264
-
265
- <div className="funcnodesreactflowbody">
266
- <Library></Library>
267
- <ReactFlowLayer></ReactFlowLayer>
268
- </div>
269
- </div>
270
- </FuncNodesContext.Provider>
271
- );
272
- };
273
-
274
- const FuncnodesReactFlow = () => {
275
- const fnrf_zst = FuncNodesReactFlowZustand();
276
-
277
- // @ts-ignore
278
- window.fnrf_zst = fnrf_zst; // For debugging
279
- return <InnerFuncnodesReactFlow fnrf_zst={fnrf_zst} />;
280
- };
281
-
282
- export default FuncnodesReactFlow;
283
- export { FuncNodesContext };
212
+ export default ReactFlowLayer;
package/{src → module/src}/frontend/header/index.tsx RENAMED
@@ -1,9 +1,10 @@
1
1
  import { useContext, useState } from "react";
2
- import { FuncNodesReactFlowZustandInterface } from "../../state";
2
+ import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
3
3
  import { FuncNodesContext } from "../funcnodesreactflow";
4
4
 
5
5
  import "./header.scss";
6
6
  import CustomDialog from "../dialog";
7
+ import React from "react";
7
8
 
8
9
  const NewWorkerDialog = ({ trigger }: { trigger: React.ReactNode }) => {
9
10
  const [name, setName] = useState<string>("");
package/{src → module/src}/frontend/index.tsx RENAMED
@@ -1,4 +1,4 @@
1
- import FuncnodesReactFlow, { FuncNodesContext } from "./funcnodesreactflow";
1
+ import FuncnodesReactFlow,{ FuncNodesContext } from "./funcnodesreactflow";
2
2
 
3
3
  export default FuncnodesReactFlow;
4
4
  export { FuncNodesContext };
package/{src → module/src}/frontend/lib.tsx RENAMED
@@ -1,7 +1,7 @@
1
1
  import React, { useState, useContext } from "react";
2
2
  import "./lib.scss";
3
3
 
4
- import { FuncNodesReactFlowZustandInterface } from "../state";
4
+ import { FuncNodesReactFlowZustandInterface } from "../states/fnrfzst.t";
5
5
  import { UseBoundStore } from "zustand";
6
6
  import { MouseEvent } from "react";
7
7
  import { FuncNodesContext } from "./index";
@@ -10,6 +10,7 @@ import CloseIcon from "@mui/icons-material/Close";
10
10
  import ExpandLessIcon from "@mui/icons-material/ExpandLess";
11
11
  import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
12
12
  import CustomDialog from "./dialog";
13
+ import { LibNode, Shelf } from "../states/lib.t";
13
14
 
14
15
  const LibraryNode = ({ item }: { item: LibNode }) => {
15
16
  const zustand: FuncNodesReactFlowZustandInterface =
package/{src → module/src}/frontend/node/io/default_input_renderer.tsx RENAMED
@@ -1,8 +1,10 @@
1
1
  import { useContext, useEffect, useRef, useState } from "react";
2
- import { FuncNodesReactFlowZustandInterface } from "../../../state";
2
+ import { FuncNodesReactFlowZustandInterface } from "../../../states/fnrfzst.t";
3
3
 
4
4
  import { FuncNodesContext } from "../../funcnodesreactflow";
5
5
  import CustomColorPicker from "../../utils/colorpicker";
6
+ import { EnumOf, InputRendererProps } from "../../../states/nodeio.t";
7
+ import React from "react";
6
8
 
7
9
  const BooleanInput = ({ io, inputconverter }: InputRendererProps) => {
8
10
  const fnrf_zst: FuncNodesReactFlowZustandInterface =
package/{src → module/src}/frontend/node/io/default_output_render.tsx RENAMED
@@ -1,9 +1,8 @@
1
1
  import { useContext } from "react";
2
- import { FuncNodesReactFlowZustandInterface } from "../../../state";
2
+ import { FuncNodesReactFlowZustandInterface } from "../../../states/fnrfzst.t";
3
3
  import { FuncNodesContext } from "../../funcnodesreactflow";
4
- import { SortableTable } from "../../utils/table";
5
- import JSONDataDisplay from "../../utils/jsondata";
6
- import { Base64ImageRenderer } from "../../datarenderer/images";
4
+ import { IOType } from "../../../states/nodeio.t";
5
+ import React from "react";
7
6
 
8
7
  const InLineOutput = ({ io }: { io: IOType }) => {
9
8
  const fnrf_zst: FuncNodesReactFlowZustandInterface =
package/{src → module/src}/frontend/node/io/handle_renderer.tsx RENAMED
@@ -1,10 +1,15 @@
1
1
  import { useContext } from "react";
2
- import { FuncNodesReactFlowZustandInterface } from "../../../state";
2
+ import {
3
+ FuncNodesReactFlowZustandInterface,
4
+ RenderOptions,
5
+ } from "../../../states/fnrfzst.t";
3
6
  import { FuncNodesContext } from "../../funcnodesreactflow";
4
7
  import { pick_best_io_type } from "./io";
5
8
  import { SortableTable } from "../../utils/table";
6
9
  import JSONDataDisplay from "../../utils/jsondata";
7
10
  import { Base64ImageRenderer } from "../../datarenderer/images";
11
+ import { IOType } from "../../../states/nodeio.t";
12
+ import React from "react";
8
13
 
9
14
  const TableOutput = ({ io }: { io: IOType }) => {
10
15
  const fnrf_zst: FuncNodesReactFlowZustandInterface =
package/{src → module/src}/frontend/node/io/io.tsx RENAMED
@@ -8,6 +8,7 @@ import { Handle, HandleProps } from "reactflow";
8
8
  import { useMemo, useState } from "react";
9
9
  import CustomDialog from "../../dialog";
10
10
  import { PreviewHandleDataRendererForIo } from "./handle_renderer";
11
+ import { IOType, SerializedType } from "../../../states/nodeio.t";
11
12
  const pick_best_io_type = (
12
13
  iot: SerializedType,
13
14
  typemap: { [key: string]: string }
package/{src → module/src}/frontend/node/io/nodeinput.tsx RENAMED
@@ -2,7 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
2
2
  import { FuncNodesContext } from "../..";
3
3
  import * as Tooltip from "@radix-ui/react-tooltip";
4
4
  import { Handle, Position } from "reactflow";
5
- import { FuncNodesReactFlowZustandInterface } from "../../../state/fnrfzst";
5
+ import { FuncNodesReactFlowZustandInterface, RenderOptions } from "../../../states/fnrfzst.t";
6
6
  import { HandleWithPreview, pick_best_io_type } from "./io";
7
7
  import {
8
8
  BooleanInput,
@@ -12,6 +12,8 @@ import {
12
12
  SelectionInput,
13
13
  ColorInput,
14
14
  } from "./default_input_renderer";
15
+ import { IOType, InputRendererType } from "../../../states/nodeio.t";
16
+ import React from "react";
15
17
 
16
18
  const Inputrenderer: {
17
19
  [key: string]: InputRendererType;
package/{src → module/src}/frontend/node/io/nodeoutput.tsx RENAMED
@@ -2,9 +2,15 @@ import { useContext, useEffect, useRef, useState } from "react";
2
2
 
3
3
  import { Handle, Position } from "reactflow";
4
4
  import { FuncNodesContext } from "../..";
5
- import { FuncNodesReactFlowZustandInterface } from "../../../state/fnrfzst";
5
+
6
6
  import { HandleWithPreview, pick_best_io_type } from "./io";
7
7
  import { InLineOutput } from "./default_output_render";
8
+ import {
9
+ RenderOptions,
10
+ FuncNodesReactFlowZustandInterface,
11
+ } from "../../../states/fnrfzst.t";
12
+ import { IOType } from "../../../states/nodeio.t";
13
+ import React from "react";
8
14
 
9
15
  const NodeOutput = ({ io }: { io: IOType }) => {
10
16
  const fnrf_zst: FuncNodesReactFlowZustandInterface =