@linkdlab/funcnodes_react_flow 0.1.0

package/src/frontend/edge.tsx

@@ -0,0 +1,31 @@
+import { EdgeProps, getBezierPath, BaseEdge } from "reactflow";
+import "./edge.scss";
+
+const DefaultEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  ...props
+}: EdgeProps) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} {...props} />
+    </>
+  );
+};
+
+export default DefaultEdge;

package/src/frontend/funcnodesreactflow.scss

@@ -0,0 +1,63 @@
+@import "./layout/htmlelements.scss";
+:root {
+  --funheadercolor: #00d9ff; // Dark background color
+  --funcnodesbackground1: hsl(243, 26%, 13%); // Dark background color
+  --funcnodesbackground2: hsl(245, 22%, 22%); // Dark background color
+  --funcnodesbackground_light: hsl(240, 22%, 38%);
+  --containerboarderradius: 1rem;
+  --funcnodestextcolor1: #ffffff; // Dark background color
+}
+
+.funcnodesreactflowcontainer {
+  width: 100%;
+  height: 100%;
+  background-color: var(--funcnodesbackground1); // Dark background color
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  color: var(--funcnodestextcolor1);
+
+  & * {
+    box-sizing: border-box;
+  }
+}
+
+.funcnodesreactflowbody {
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.reactflowlayer {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--funcnodesbackground2); // Dark background color
+  margin: 0.5rem;
+  border-radius: var(--containerboarderradius);
+}
+
+.vscrollcontainer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-grow: 1;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+
+.workerselect {
+  max-width: 140px;
+}
+.workerselectoption {
+  &.selected {
+    color: var(--funcnodestextcolor1);
+  }
+  &.active {
+    color: green;
+  }
+  &.inactive {
+    color: red;
+  }
+}

package/src/frontend/funcnodesreactflow.tsx

@@ -0,0 +1,283 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  MouseEvent as ReactMouseEvent,
+} from "react";
+import { FuncNodesWorker, WebSocketWorker, WorkerManager } from "../funcnodes";
+import "./funcnodesreactflow.scss";
+import useStore, { RFState } from "../state/reactflow";
+import { shallow } from "zustand/shallow";
+import { useShallow } from "zustand/react/shallow";
+import ReactFlow, {
+  Edge,
+  Node,
+  Background,
+  ReactFlowProvider,
+  MiniMap,
+  useReactFlow,
+  FitView,
+  NodeTypes,
+  EdgeTypes,
+  useKeyPress,
+  useEdges,
+  useNodes,
+} from "reactflow";
+import Library from "./lib";
+import FuncNodesReactFlowZustand, {
+  FuncNodesReactFlowZustandInterface,
+} from "../state";
+
+import DefaultNode from "./node";
+import ConnectionLine from "./edge";
+
+import "./nodecontextmenu.scss";
+import DefaultEdge from "./edge";
+import { Key } from "@mui/icons-material";
+import FuncnodesHeader from "./header";
+
+const FuncNodesContext = createContext<FuncNodesReactFlowZustandInterface>(
+  FuncNodesReactFlowZustand()
+);
+
+type ContextMenuProps = {
+  id: string;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  onClick?: () => void;
+};
+
+const ContextMenu = ({
+  id,
+  top,
+  left,
+  right,
+  bottom,
+  ...props
+}: ContextMenuProps) => {
+  const { getNode, setNodes, addNodes, setEdges } = useReactFlow();
+
+  const fnrf_zst = useContext(FuncNodesContext);
+
+  const duplicateNode = useCallback(() => {
+    const rfnode = getNode(id);
+    if (!rfnode) return;
+    const position = {
+      x: rfnode.position.x + 50,
+      y: rfnode.position.y + 50,
+    };
+
+    addNodes({ ...rfnode, id: `${rfnode.id}-copy`, position });
+  }, [id, getNode, addNodes]);
+
+  const deleteNode = useCallback(() => {
+    fnrf_zst.on_node_action({ type: "delete", id, from_remote: false });
+  }, [id, setNodes, setEdges]);
+
+  const nodestore = fnrf_zst.nodespace.get_node(id, false);
+  if (!nodestore) return <> </>;
+  const node: NodeType = nodestore();
+
+  return (
+    <div
+      style={{ top, left, right, bottom }}
+      className="context-menu"
+      {...props}
+    >
+      <p style={{ fontWeight: "bold" }}>
+        <small>{node.name}</small>
+      </p>
+      <button onClick={duplicateNode}>duplicate</button>
+      <button onClick={deleteNode}>delete</button>
+    </div>
+  );
+};
+
+const ReactFlowManager = () => {
+  const rfinstance = useReactFlow();
+  const fnrf_zst = useContext(FuncNodesContext);
+  fnrf_zst.rf_instance = rfinstance;
+  return <></>;
+};
+
+const selector = (state: RFState) => ({
+  nodes: state.nodes,
+  edges: state.edges,
+  onNodesChange: state.onNodesChange,
+  onEdgesChange: state.onEdgesChange,
+  onConnect: state.onConnect,
+});
+
+const nodeTypes: NodeTypes = { default: DefaultNode };
+
+const edgeTypes: EdgeTypes = {
+  default: DefaultEdge,
+};
+
+const ReactFlowLayer = () => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const reactflowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fnrf_zst.reactflowRef = reactflowRef.current;
+  }, [reactflowRef]);
+
+  const [menu, setMenu] = useState<ContextMenuProps | null>(null);
+
+  const onNodeContextMenu = useCallback(
+    (event: ReactMouseEvent, node: Node) => {
+      if (!reactflowRef.current) return;
+      // Prevent native context menu from showing
+      event.preventDefault();
+
+      // Calculate position of the context menu. We want to make sure it
+      // doesn't get positioned off-screen.
+      const pane = reactflowRef.current.getBoundingClientRect();
+      const clientX = event.clientX as number;
+      const clientY = event.clientY as number;
+      setMenu({
+        id: node.id,
+        top: clientY < pane.height - 200 ? clientY : undefined,
+        left: clientX < pane.width - 200 ? clientX : undefined,
+        right: clientX >= pane.width - 200 ? pane.width - clientX : undefined,
+        bottom:
+          clientY >= pane.height - 200 ? pane.height - clientY : undefined,
+      });
+    },
+    [setMenu]
+  );
+  const onPaneClick = useCallback(() => setMenu(null), [setMenu]);
+
+  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } =
+    fnrf_zst.useReactFlowStore(useShallow(selector));
+
+  return (
+    <div className="reactflowlayer">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        minZoom={0.1}
+        maxZoom={2}
+        fitView
+        ref={reactflowRef}
+        //  onNodeContextMenu={onNodeContextMenu}
+        onPaneClick={onPaneClick}
+        //multiSelectionKeyCode="Control"
+      >
+        <ReactFlowManager />
+        <KeyHandler />
+        <Background
+          color="#888" // Color of the grid lines
+          gap={16} // Distance between grid lines
+          size={1} // Thickness of the grid lines
+        />
+        <MiniMap
+          nodeStrokeWidth={3}
+          pannable={true}
+          zoomable={true}
+          zoomStep={3}
+        />
+        {menu && <ContextMenu onClick={onPaneClick} {...menu} />}
+      </ReactFlow>
+    </div>
+  );
+};
+
+
+
+const KeyHandler = () => {
+  const fnrf_zst = useContext(FuncNodesContext);
+  const delPressed = useKeyPress("Delete");
+  const edges = useEdges();
+  const nodes = useNodes();
+  if (delPressed) {
+    for (const edge of edges) {
+      if (edge.selected) {
+        if (!fnrf_zst.worker) return <></>;
+        if (!edge.source || !edge.target) return <></>;
+        if (!edge.sourceHandle || !edge.targetHandle) return <></>;
+        fnrf_zst.worker?.remove_edge({
+          src_nid: edge.source,
+          src_ioid: edge.sourceHandle,
+          trg_nid: edge.target,
+          trg_ioid: edge.targetHandle,
+        });
+      }
+    }
+    for (const node of nodes) {
+      if (node.selected) {
+        if (!fnrf_zst.worker) return <></>;
+        fnrf_zst.worker.remove_node(node.id);
+      }
+    }
+  }
+
+  return <></>;
+};
+
+const InnerFuncnodesReactFlow = ({
+  fnrf_zst,
+}: {
+  fnrf_zst: FuncNodesReactFlowZustandInterface;
+}) => {
+  const [workermanageruri, setWorkermanageruri] = useState<string>("");
+  const [worker, setWorker] = useState<FuncNodesWorker | undefined>(undefined);
+
+  useEffect(() => {
+    async function fetch_worker_manager() {
+      let response = await fetch("/worker_manager");
+      let workerewsuri = await response.text();
+      setWorkermanageruri(workerewsuri);
+    }
+    fetch_worker_manager();
+  }, []);
+
+  useEffect(() => {
+    if (workermanageruri) {
+      const workermanager = new WorkerManager(workermanageruri, fnrf_zst);
+      workermanager.on_setWorker = setWorker;
+      fnrf_zst.workermanager = workermanager;
+    }
+  }, [workermanageruri]);
+
+  fnrf_zst.worker = worker;
+  // const worker = new WebSocketWorker("ws://localhost:9382", fnrf_zst);
+  // fnrf_zst.worker = worker;
+
+  return (
+    <FuncNodesContext.Provider value={fnrf_zst}>
+      <div className="funcnodesreactflowcontainer">
+        <FuncnodesHeader></FuncnodesHeader>
+
+        <div className="funcnodesreactflowbody">
+          <Library></Library>
+          <ReactFlowLayer></ReactFlowLayer>
+        </div>
+      </div>
+    </FuncNodesContext.Provider>
+  );
+};
+
+const FuncnodesReactFlow = () => {
+  const fnrf_zst = FuncNodesReactFlowZustand();
+
+  // @ts-ignore
+  window.fnrf_zst = fnrf_zst; // For debugging
+  return <InnerFuncnodesReactFlow fnrf_zst={fnrf_zst} />;
+};
+
+export default FuncnodesReactFlow;
+export { FuncNodesContext };

package/src/frontend/header/header.scss

@@ -0,0 +1,48 @@
+.funcnodesreactflowheader {
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  justify-content: flex-start;
+  position: relative;
+  top: 0;
+  left: 0;
+
+  .headerelement {
+    height: 100%;
+    // center items vertically
+    display: flex;
+    align-items: center;
+    margin: 4px 4px 4px 4px;
+    position: relative;
+    white-space: nowrap;
+  }
+
+  & .statusbar {
+    width: 250px;
+    height: 1.5rem;
+    background-color: var(--funcnodesbackground2);
+    display: inline-block;
+    margin: 2px 4px 0px 4px;
+    position: relative;
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    &-progressbar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 100%;
+      background-color: var(--funheadercolor);
+      display: inline-block;
+    }
+    &-message {
+      position: relative;
+      top: 0;
+      left: 0;
+      font-size: 0.8rem;
+      color: var(--funheadercolor);
+      mix-blend-mode: difference;
+    }
+  }
+}

package/src/frontend/header/index.tsx

@@ -0,0 +1,268 @@
+import { useContext, useState } from "react";
+import { FuncNodesReactFlowZustandInterface } from "../../state";
+import { FuncNodesContext } from "../funcnodesreactflow";
+
+import "./header.scss";
+import CustomDialog from "../dialog";
+
+const NewWorkerDialog = ({ trigger }: { trigger: React.ReactNode }) => {
+  const [name, setName] = useState<string>("");
+  const [copyLib, setCopyLib] = useState<boolean>(false);
+  const [copyNS, setCopyNS] = useState<boolean>(false);
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const workersstate = fnrf_zst.workers();
+
+  const [reference, setReference] = useState<{ name: string; uuid: string }>({
+    name: "None",
+    uuid: "",
+  });
+
+  return (
+    <CustomDialog
+      trigger={trigger}
+      title="New Worker"
+      description="Please provide a name and select a another worker as interpreter reference"
+    >
+      <div>
+        Name:
+        <br />
+        <input
+          className="styledinput"
+          onChange={(e) => {
+            setName(e.currentTarget.value);
+          }}
+          value={name}
+        />
+      </div>
+      <div>
+        Reference Worker:
+        <br />
+        <select
+          className="styleddropdown"
+          onChange={(e) => {
+            const uuid = e.target.value;
+            const name = e.target.selectedOptions[0].innerText;
+            setReference({ name, uuid });
+          }}
+          value={reference.uuid}
+        >
+          <option value="">None</option>
+          {Object.keys(workersstate).map((workerid) => (
+            <option className={""} key={workerid} value={workerid}>
+              {workersstate[workerid].name || workerid}
+            </option>
+          ))}
+        </select>
+        {reference.uuid && (
+          <div>
+            <div>
+              Copy Lib:{" "}
+              <input
+                type="checkbox"
+                className="styledcheckbox"
+                checked={copyLib}
+                onChange={(e) => {
+                  setCopyLib(e.currentTarget.checked);
+                }}
+              />
+            </div>
+            {copyLib && (
+              <div>
+                Copy Nodespace{" "}
+                <input
+                  type="checkbox"
+                  className="styledcheckbox"
+                  checked={copyNS}
+                  onChange={(e) => {
+                    setCopyNS(e.currentTarget.checked);
+                    if (e.currentTarget.checked) {
+                      setCopyLib(true);
+                    }
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        )}
+        {name && (
+          <div>
+            <button
+              className="styledbtn"
+              onClick={() => {
+                fnrf_zst.workermanager?.new_worker({
+                  name,
+                  reference: reference.uuid,
+                  copyLib,
+                  copyNS,
+                });
+              }}
+            >
+              Create
+            </button>
+          </div>
+        )}
+      </div>
+    </CustomDialog>
+  );
+};
+
+const Statusbar = () => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+  const progress = fnrf_zst.progress_state();
+
+  return (
+    <div className="statusbar">
+      <span
+        className="statusbar-progressbar"
+        style={{ width: Math.min(100, 100 * progress.progress) + "%" }}
+      ></span>
+      <span className="statusbar-message">{progress.message}</span>
+    </div>
+  );
+};
+
+const FuncnodesHeader = () => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const workersstate = fnrf_zst.workers();
+  const onNew = () => {
+    const alert = window.confirm("Are you sure you want to start a new flow?");
+    if (alert) {
+      fnrf_zst.worker?.clear();
+    }
+  };
+
+  const onSave = async () => {
+    const data = await fnrf_zst.worker?.save();
+    if (!data) return;
+    const blob = new Blob([JSON.stringify(data)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "flow.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    a.remove();
+  };
+
+  const onOpen = async () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const contents = e.target?.result;
+        if (!contents) return;
+        const data = JSON.parse(contents as string);
+        await fnrf_zst.worker?.load(data);
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  };
+
+  const workerselectchange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const workerid = e.target.value;
+    if (workerid === "__select__") return;
+    if (!fnrf_zst.workers) return;
+    if (!fnrf_zst.workermanager) return;
+    if (!workersstate[workerid]) return;
+    if (!workersstate[workerid].active) {
+      //create popup
+      const ans = window.confirm(
+        "this is an inactive worker, selecting it will start it, continue?"
+      );
+      if (!ans) return;
+    }
+    fnrf_zst.workermanager.set_active(workerid);
+  };
+
+  return (
+    <div className="funcnodesreactflowheader">
+      <div className="headerelement">
+        <Statusbar></Statusbar>
+      </div>
+      <div className="headerelement">
+        <select
+          className="workerselect styleddropdown"
+          value={fnrf_zst.worker ? fnrf_zst.worker.uuid : "__select__"}
+          onChange={workerselectchange}
+        >
+          <option disabled value="__select__">
+            Select Worker
+          </option>
+          {Object.keys(workersstate).map((workerid) => (
+            <option
+              className={
+                "workerselectoption" +
+                (workersstate[workerid].active ? " active" : " inactive")
+              }
+              key={workerid}
+              value={workerid}
+            >
+              {workersstate[workerid].name || workerid}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {fnrf_zst.worker && (
+        <>
+          <div className="headerelement">
+            <button
+              className="styledbtn"
+              onClick={() => {
+                if (!fnrf_zst.worker) return;
+                fnrf_zst.worker.stop();
+              }}
+            >
+              stop worker
+            </button>
+          </div>
+          <div className="headerelement">
+            <button
+              className="styledbtn"
+              onClick={() => {
+                if (!fnrf_zst.worker) return;
+                fnrf_zst.workermanager?.restart_worker(fnrf_zst.worker.uuid);
+              }}
+            >
+              restart worker
+            </button>
+          </div>
+        </>
+      )}
+      <div className="headerelement">
+        <NewWorkerDialog
+          trigger={<button className="styledbtn">new worker</button>}
+        ></NewWorkerDialog>
+      </div>
+      <div className="headerelement">
+        <button className="styledbtn" onClick={onNew}>
+          new nodespace
+        </button>
+      </div>
+      <div className="headerelement">
+        <button className="styledbtn" onClick={onOpen}>
+          open
+        </button>
+      </div>
+      <div className="headerelement">
+        <button className="styledbtn" onClick={onSave}>
+          save
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FuncnodesHeader;

package/src/frontend/index.tsx

@@ -0,0 +1,4 @@
+import FuncnodesReactFlow, { FuncNodesContext } from "./funcnodesreactflow";
+
+export default FuncnodesReactFlow;
+export { FuncNodesContext };