@linkdlab/funcnodes_react_flow 0.1.1 → 0.1.3

package/module/src/frontend/dialog.scss

@@ -1,88 +0,0 @@
-.dialogoverlay {
-  background-color: rgba(0, 0, 0, 0.5);
-  position: fixed;
-  inset: 0;
-  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.dialogconent {
-  background-color: var(--funcnodesbackground1);
-  border-radius: 6px;
-  box-shadow: var(--funheadercolor) 0px 10px 38px -10px,
-    var(--funheadercolor) 0px 10px 20px -15px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 85vh;
-  max-height: 85vh;
-  padding: 25px;
-  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  color: var(--funcnodestextcolor1);
-  border: 1px solid var(--funheadercolor);
-  display: flex;
-  flex-direction: column;
-}
-
-.dialogtitle {
-  margin: 0;
-  font-weight: 500;
-  color: var(--funheadercolor);
-  font-size: 17px;
-}
-
-.dialogdescription {
-  margin: 10px 0 20px;
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.dialogclosebutton {
-  border-radius: 100%;
-  height: 25px;
-  width: 25px;
-  display: inline-flex;
-  background-color: inherit;
-  align-items: center;
-  justify-content: center;
-  color: var(--funheadercolor);
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border: none;
-
-  &:hover {
-    background-color: var(--funheadercolor);
-    color: var(--funcnodesbackground1);
-  }
-  &:active {
-    background-color: var(--funheadercolor);
-    color: var(--funcnodestextcolor1);
-  }
-}
-
-.dialogsendbutton {
-  background-color: var(--funcnodesbackground1);
-  color: var(--funheadercolor);
-  border: 1px solid var(--funheadercolor);
-  border-radius: 99rem;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-size: 15px;
-  margin-top: 20px;
-
-  &:hover {
-    background-color: var(--funheadercolor);
-    color: var(--funcnodesbackground1);
-  }
-  &:active {
-    background-color: var(--funheadercolor);
-    color: var(--funcnodestextcolor1);
-  }
-}
-
-.dialogchildren {
-  margin-top: 20px;
-  overflow: auto;
-}

package/module/src/frontend/dialog.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import CloseIcon from "@mui/icons-material/Close";
-import "./dialog.scss";
-interface CustomDialogProps {
-  trigger?: React.ReactNode;
-  title?: string;
-  description?: string | React.ReactNode;
-  children: React.ReactNode;
-  closebutton?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  buttons?: {
-    text: string;
-    onClick: () => void;
-  }[];
-}
-const CustomDialog = ({
-  trigger,
-  title,
-  description,
-  children,
-  closebutton = true,
-  onOpenChange,
-
-  buttons = [],
-}: CustomDialogProps) => {
-  return (
-    <Dialog.Root onOpenChange={onOpenChange}>
-      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
-      <Dialog.Portal>
-        <Dialog.Overlay className="dialogoverlay" />
-        <Dialog.Content className="dialogconent">
-          {title && (
-            <Dialog.Title className="dialogtitle">{title}</Dialog.Title>
-          )}
-          {description && (
-            <Dialog.Description className="dialogdescription">
-              {description}
-            </Dialog.Description>
-          )}
-          <div className="dialogchildren">{children}</div>
-          <div
-            style={{
-              display: "flex",
-              marginTop: 25,
-              justifyContent: "flex-end",
-            }}
-          >
-            {(buttons || []).map((button, index) => (
-              <Dialog.Close asChild key={index}>
-                <button className="dialogsendbutton" onClick={button.onClick}>
-                  {button.text}
-                </button>
-              </Dialog.Close>
-            ))}
-          </div>
-          {closebutton && (
-            <Dialog.Close asChild>
-              <button className="dialogclosebutton" aria-label="Close">
-                <CloseIcon />
-              </button>
-            </Dialog.Close>
-          )}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default CustomDialog;
-export type { CustomDialogProps };

package/module/src/frontend/edge.scss

@@ -1,15 +0,0 @@
-:root {
-  --funcnodesedgecolor: #7bb3ec;
-}
-.funcnodes-edge {
-  & .react-flow__edge-path {
-    stroke: var(--funcnodesedgecolor);
-    stroke-width: 2px;
-  }
-
-  &.selected {
-    & .react-flow__edge-path {
-      stroke: #11ff00;
-    }
-  }
-}

package/module/src/frontend/edge.tsx

@@ -1,32 +0,0 @@
-import { EdgeProps, getBezierPath, BaseEdge } from "reactflow";
-import "./edge.scss";
-import React from "react";
-
-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/module/src/frontend/funcnodesreactflow/funcnodesreactflow.scss

@@ -1,63 +0,0 @@
-@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/module/src/frontend/funcnodesreactflow/index.tsx

@@ -1,68 +0,0 @@
-import { createContext, useEffect, useState } from "react";
-import FuncNodesWorker from "../../funcnodes/funcnodesworker";
-import FuncNodesReactFlowZustand from "../../states/fnrfzst";
-import React from "react";
-import { WorkerManager } from "../../funcnodes";
-
-import FuncnodesHeader from "../header";
-import Library from "../lib";
-import ReactFlowLayer from "./react_flow_layer";
-import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
-
-const FuncNodesContext = createContext<FuncNodesReactFlowZustandInterface>(
-  FuncNodesReactFlowZustand()
-);
-
-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/module/src/frontend/funcnodesreactflow/react_flow_layer.tsx

@@ -1,212 +0,0 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-import ReactFlow, {
-  Background,
-  EdgeTypes,
-  MiniMap,
-  Node,
-  NodeTypes,
-  useEdges,
-  useKeyPress,
-  useNodes,
-  useReactFlow,
-} from "reactflow";
-import { FuncNodesContext } from "..";
-import { useShallow } from "zustand/react/shallow";
-import { RFState } from "../../states/reactflow.t";
-import DefaultNode from "../node";
-import DefaultEdge from "../edge";
-import { NodeType } from "../../states/node.t";
-import { FuncNodesReactFlowZustandInterface } from "../../states/fnrfzst.t";
-import "reactflow/dist/style.css";
-import "./funcnodesreactflow.scss";
-
-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 ReactFlowManager = () => {
-  const rfinstance = useReactFlow();
-  const fnrf_zst = useContext(FuncNodesContext);
-  fnrf_zst.rf_instance = rfinstance;
-  return <></>;
-};
-
-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 <></>;
-};
-
-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 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: React.MouseEvent, 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>
-  );
-};
-
-export default ReactFlowLayer;

package/module/src/frontend/header/header.scss

@@ -1,48 +0,0 @@
-.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;
-    }
-  }
-}