@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.2

package/src/state/fnrfzst.ts

@@ -1,440 +0,0 @@
-import LibZustand, { LibZustandInterface } from "./lib";
-import { FuncNodesWorker } from "../funcnodes";
-import NodeSpaceZustand, { NodeSpaceZustandInterface } from "./nodespace";
-import { NodeStore, createNodeStore } from "./node";
-import { PartialIOType } from "./node";
-import reactflowstore, { RFStore } from "./reactflow";
-import {
-  Node as RFNode,
-  NodeChange,
-  useReactFlow,
-  EdgeChange,
-  Edge as RFEdge,
-  Connection as RFConnection,
-} from "reactflow";
-import { NodeAction } from "./node";
-import { deep_merge } from ".";
-import { EdgeAction, generate_edge_id } from "./edge";
-import WorkerManager from "../funcnodes/workermanager";
-import { UseBoundStore, StoreApi, create } from "zustand";
-
-interface WorkerRepresentation {
-  uuid: string;
-  host: string;
-  port: number;
-  ssl: boolean;
-  active: boolean;
-  name: string | null;
-}
-interface WorkersState {
-  [key: string]: WorkerRepresentation;
-}
-interface FuncNodesReactFlowZustandInterface {
-  lib: LibZustandInterface;
-  workermanager: WorkerManager | undefined;
-  workers: UseBoundStore<StoreApi<WorkersState>>;
-  worker: FuncNodesWorker | undefined;
-  nodespace: NodeSpaceZustandInterface;
-  useReactFlowStore: RFStore;
-  render_options: UseBoundStore<StoreApi<RenderOptions>>;
-  progress_state: UseBoundStore<StoreApi<ProgressState>>;
-  update_render_options: (options: RenderOptions) => void;
-  rf_instance?: ReturnType<typeof useReactFlow>;
-  on_node_action: (action: NodeAction) => void;
-  on_edge_action: (edge: EdgeAction) => void;
-  set_progress: (progress: ProgressState) => void;
-  auto_progress: () => void;
-  reactflowRef: HTMLDivElement | null;
-  clear_all: () => void;
-}
-
-const _fill_node_frontend = (
-  node: NodeType,
-  fnrf_instance?: FuncNodesReactFlowZustandInterface
-) => {
-  const frontend = node.frontend || {};
-  if (!frontend.pos) {
-    if (
-      !fnrf_instance ||
-      !fnrf_instance.rf_instance ||
-      fnrf_instance.reactflowRef === null
-    ) {
-      frontend.pos = [0, 0];
-    } else {
-      const ref = fnrf_instance.reactflowRef;
-      const rect = ref.getBoundingClientRect(); // Step 2: Get bounding rectangle
-      const centerX = rect.left + rect.width / 2; // Calculate center X
-      const centerY = rect.top + rect.height / 2; // Calculate center Y
-      const calcpos = fnrf_instance.rf_instance.screenToFlowPosition({
-        x: centerX,
-        y: centerY,
-      });
-      frontend.pos = [calcpos.x, calcpos.y];
-    }
-  }
-  if (!frontend.size) {
-    frontend.size = [200, 100];
-  }
-  if (!frontend.collapsed) {
-    frontend.collapsed = false;
-  }
-  node.frontend = frontend;
-};
-
-const assert_react_flow_io = (
-  io: PartialIOType,
-  fnrf_instance?: FuncNodesReactFlowZustandInterface
-): PartialIOType => {
-  if (io.value === "<NoValue>") {
-    io.value = undefined;
-  }
-  if (io.fullvalue === "<NoValue>") {
-    io.fullvalue = undefined;
-  }
-
-  if (io.try_get_full_value === undefined) {
-    io.try_get_full_value = () => {
-      if (!fnrf_instance) {
-        return;
-      }
-      if (io.node === undefined || io.id === undefined) {
-        return;
-      }
-      fnrf_instance.worker?.get_io_full_value({ nid: io.node, ioid: io.id });
-    };
-  }
-
-  return io;
-};
-const assert_reactflow_node = (
-  node: NodeType,
-  store: NodeStore,
-  fnrf_instance?: FuncNodesReactFlowZustandInterface
-): NodeType & RFNode => {
-  _fill_node_frontend(node, fnrf_instance);
-
-  if (node.id === undefined) {
-    throw new Error("Node must have an id");
-  }
-
-  for (const io in node.io) {
-    node.io[io].node = node.id;
-    assert_react_flow_io(node.io[io], fnrf_instance);
-  }
-
-  const extendedNode: NodeType & RFNode = {
-    position: {
-      x: node.frontend.pos[0],
-      y: node.frontend.pos[1],
-    },
-    data: {
-      UseNodeStore: store,
-    },
-    type: "default",
-    ...node,
-  };
-
-  return extendedNode;
-};
-
-const FuncNodesReactFlowZustand = (): FuncNodesReactFlowZustandInterface => {
-  /*
-  function that should be called when the remote node, e.g. in the python worker is performing an action
-  */
-  const on_node_action = (action: NodeAction) => {
-    const rfstate = rfstore.getState();
-
-    switch (action.type) {
-      case "add":
-        if (action.from_remote) {
-          let store = ns.get_node(action.node.id, false);
-
-          if (!store) {
-            try {
-              store = createNodeStore(action.node);
-              ns.nodesstates.set(action.node.id, store);
-            } catch (e) {
-              return;
-            }
-          }
-
-          const new_ndoes = [
-            ...rfstate.nodes,
-            assert_reactflow_node(action.node, store, iterf),
-          ];
-          rfstore.setState({ nodes: new_ndoes });
-        }
-        break;
-      case "update":
-        // some action reset the error, so far trigger does, so errors should remove the in_trigger flag
-        if (action.node.in_trigger) {
-          action.node.error = undefined;
-        }
-        if (action.from_remote) {
-          const store = ns.get_node(action.id) as NodeStore;
-
-          if (action.node.io) {
-            for (const io in action.node.io) {
-              const ioobj = action.node.io[io] as PartialIOType;
-              // check if value in io, undefined is a valid value
-              if (ioobj.hasOwnProperty("value")) {
-                if (ioobj.value === undefined) {
-                  ioobj.value = null;
-                } else if (ioobj.value === "<NoValue>") {
-                  ioobj.value = undefined;
-                }
-              }
-            }
-          }
-
-          const state = store.getState();
-          const { new_obj, change } = deep_merge(state, action.node);
-
-          if (change) {
-            if (action.node.io) {
-              for (const io in action.node.io) {
-                // if fullvalue is in the update data, set to fullvalue otherwise set to undefined
-                new_obj.io[io].fullvalue = action.node.io[io].fullvalue;
-              }
-            }
-
-            assert_reactflow_node(new_obj, store, iterf);
-
-            store.setState(new_obj);
-          }
-        } else {
-          if (iterf.worker) {
-            iterf.worker.update_node(action);
-          }
-        }
-        break;
-      case "delete":
-        if (action.from_remote) {
-          rfstore.getState().onNodesChange([
-            {
-              type: "remove",
-              id: action.id,
-            },
-          ]);
-        } else {
-          iterf.worker?.remove_node(action.id);
-        }
-        break;
-      case "error":
-        console.error("Error", action);
-        on_node_action({
-          type: "update",
-          id: action.id,
-          node: {
-            in_trigger: false,
-            error: action.error,
-          },
-          from_remote: true,
-        });
-        break;
-
-      case "trigger":
-        if (action.from_remote) {
-          on_node_action({
-            type: "update",
-            id: action.id,
-            node: {
-              in_trigger: true,
-              error: undefined,
-            },
-            from_remote: true,
-          });
-        } else {
-          iterf.worker?.trigger_node(action.id);
-        }
-        break;
-      default:
-        console.error("Unknown node action", action);
-    }
-  };
-
-  const on_edge_action = (action: EdgeAction) => {
-    const rfstate = rfstore.getState();
-
-    switch (action.type) {
-      case "add":
-        if (action.from_remote) {
-          const edges = rfstate.edges;
-          const new_edge_id = generate_edge_id(action);
-
-          //cehck if edge already exists including reversed
-          if (edges.some((e) => e.id === new_edge_id)) {
-            return;
-          }
-          const new_edge: RFEdge = {
-            id: new_edge_id,
-            source: action.src_nid,
-            target: action.trg_nid,
-            sourceHandle: action.src_ioid,
-            targetHandle: action.trg_ioid,
-            className: "funcnodes-edge animated",
-          };
-
-          rfstore.setState({ edges: [...edges, new_edge] });
-        } else {
-        }
-        break;
-
-      case "delete":
-        if (action.from_remote) {
-          const edges = rfstate.edges;
-          const del_edge_id = generate_edge_id(action);
-          const new_edges = edges.filter((edge) => edge.id !== del_edge_id);
-          rfstore.setState({ edges: new_edges });
-        } else {
-        }
-        break;
-      default:
-        console.error("Unknown edge action", action);
-    }
-  };
-  /*
-  on_node_cahnge is called by react flow when a note change event is fired
-  should update the local state if something changed
-  */
-  const on_node_change = (nodechange: NodeChange[]) => {
-    for (const change of nodechange) {
-      switch (change.type) {
-        case "position":
-          if (change.position) {
-            on_node_action({
-              type: "update",
-              id: change.id,
-              node: {
-                frontend: { pos: [change.position.x, change.position.y] },
-              },
-              from_remote: false,
-            });
-          }
-          break;
-        case "dimensions":
-          if (change.dimensions) {
-            on_node_action({
-              type: "update",
-              id: change.id,
-              node: {
-                frontend: {
-                  size: [change.dimensions.width, change.dimensions.height],
-                },
-              },
-              from_remote: false,
-            });
-          }
-          break;
-      }
-    }
-  };
-
-  const on_edge_change = (edgechange: EdgeChange[]) => {};
-
-  const on_connect = (connection: RFConnection) => {
-    if (
-      connection.source === null ||
-      connection.target === null ||
-      connection.sourceHandle === null ||
-      connection.targetHandle === null ||
-      !iterf.worker
-    ) {
-      return;
-    }
-    iterf.worker.add_edge({
-      src_nid: connection.source,
-      src_ioid: connection.sourceHandle,
-      trg_nid: connection.target,
-      trg_ioid: connection.targetHandle,
-      replace: true,
-    });
-  };
-
-  const rfstore = reactflowstore({
-    on_node_change,
-    on_edge_change,
-    on_connect,
-  });
-  const ns = NodeSpaceZustand({});
-  const lib = LibZustand();
-
-  const clear_all = () => {
-    iterf.worker?.disconnect();
-    iterf.worker = undefined;
-    iterf.workermanager?.setWorker(undefined);
-    iterf.lib.libstate.getState().set({ shelves: [] });
-    iterf.nodespace.nodesstates.clear();
-    iterf.useReactFlowStore.setState({ nodes: [], edges: [] });
-    iterf.auto_progress();
-  };
-  const iterf: FuncNodesReactFlowZustandInterface = {
-    lib: lib,
-    workermanager: undefined,
-    workers: create<WorkersState>((set, get) => ({})),
-    render_options: create<RenderOptions>((set, get) => ({})),
-    progress_state: create<ProgressState>((set, get) => ({
-      message: "please select worker",
-      status: "info",
-      progress: 0,
-      blocking: false,
-    })),
-    update_render_options: (options: RenderOptions) => {
-      const current = iterf.render_options.getState();
-      const { new_obj, change } = deep_merge(current, options);
-      if (change) {
-        iterf.render_options.setState(new_obj);
-      }
-    },
-    worker: undefined,
-    nodespace: ns,
-    useReactFlowStore: rfstore,
-    on_node_action: on_node_action,
-    on_edge_action: on_edge_action,
-    reactflowRef: null,
-    clear_all: clear_all,
-    set_progress: (progress: ProgressState) => {
-      if (progress.message === "") {
-        return iterf.auto_progress();
-      }
-
-      const prev_state = iterf.progress_state.getState();
-      const { new_obj, change } = deep_merge<ProgressState>(
-        prev_state,
-        progress
-      );
-      if (change) {
-        iterf.progress_state.setState(new_obj);
-      }
-    },
-    auto_progress: () => {
-      if (iterf.worker === undefined) {
-        return iterf.set_progress({
-          progress: 0,
-          message: "please select worker",
-          status: "error",
-          blocking: false,
-        });
-      }
-      if (!iterf.worker.is_open) {
-        return iterf.set_progress({
-          progress: 0,
-          message: "connecting to worker",
-          status: "info",
-          blocking: true,
-        });
-      }
-      iterf.set_progress({
-        progress: 1,
-        message: "running",
-        status: "info",
-        blocking: false,
-      });
-    },
-  };
-  return iterf;
-};
-
-export default FuncNodesReactFlowZustand;
-export { LibZustand, NodeSpaceZustand };
-export type { FuncNodesReactFlowZustandInterface, WorkersState };

package/src/state/index.ts

@@ -1,139 +0,0 @@
-import LibZustand, { LibZustandInterface } from "./lib";
-import NodeSpaceZustand, { NodeSpaceZustandInterface } from "./nodespace";
-import { FuncNodesReactFlowZustandInterface, WorkersState } from "./fnrfzst";
-import FuncNodesReactFlowZustand from "./fnrfzst";
-export default FuncNodesReactFlowZustand;
-export { LibZustand, NodeSpaceZustand };
-export type { FuncNodesReactFlowZustandInterface, WorkersState };
-
-// Type alias for DeepPartial. It makes all properties of T optional and recursive.
-type DeepPartial<T> = T extends object
-  ? {
-      [P in keyof T]?: DeepPartial<T[P]>;
-    }
-  : T;
-
-/**
- * Checks if the given item is a plain object.
- * @param item The item to check.
- * @returns true if the item is a plain object, false otherwise.
- */
-function isPlainObject(item: any): boolean {
-  return Object.prototype.toString.call(item) === "[object Object]";
-}
-
-function deep_compare_objects(a: any, b: any): boolean {
-  // Check for strict equality first
-  if (a === b) return true;
-
-  // If either is null or not an object, they're not equal (strict equality would have caught `a === b` if both were null)
-  if (
-    typeof a !== "object" ||
-    a === null ||
-    typeof b !== "object" ||
-    b === null
-  )
-    return false;
-
-  // If they're not the same type of object, they're not equal
-  if (a.constructor !== b.constructor) return false;
-
-  if (a.constructor === Object || a.constructor === Array) {
-    const keysA = Object.keys(a);
-    const keysB = Object.keys(b);
-
-    // If their property lengths are different, they're different objects
-    if (keysA.length !== keysB.length) return false;
-
-    // Check each key in 'a' to ensure it exists in 'b' and is equal; recurse if value is an object
-    for (const key of keysA) {
-      if (!keysB.includes(key)) return false;
-      if (!deep_compare_objects(a[key], b[key])) return false;
-    }
-  }
-
-  // Dates comparison
-  if (a instanceof Date && b instanceof Date)
-    return a.getTime() === b.getTime();
-
-  // If we've made it this far, objects must be considered equal
-  return true;
-}
-
-/**
- *
- * function to deeply merge two objects of type T.
- *
- * @param {T} target - The target object to be merged.
- * @param {DeepPartial<T>} source - The source object to merge into the target. All properties of this object are optional.
- *
- * @returns {T} An object containing the merged object (new_obj) and a boolean indicating if there was a change (change).
- */
-const deep_merge = <T extends {}>(
-  target: T,
-  source: DeepPartial<T>
-): {
-  new_obj: T;
-  change: boolean;
-} => {
-  let change = false;
-  if (!isPlainObject(target)) {
-    throw new Error("Target must be a plain object");
-  }
-  if (!isPlainObject(source)) {
-    throw new Error("Source must be a plain object");
-  }
-  const new_obj: T = { ...target };
-
-  Object.keys(source).forEach((key) => {
-    // @ts-ignore: Type 'string' cannot be used to index type 'T
-    const sourceValue = source[key];
-    // @ts-ignore: Type 'string' cannot be used to index type 'T
-    const targetValue = target[key];
-
-    if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
-      // If both the target and source values are plain objects, merge them
-      const { new_obj: mergedObj, change: didChange } = deep_merge(
-        targetValue,
-        sourceValue
-      );
-      if (didChange) {
-        change = true;
-        // @ts-ignore: Type 'string' cannot be used to index type 'T
-        new_obj[key] = mergedObj;
-      }
-    } else if (!deep_compare_objects(targetValue, sourceValue)) {
-      change = true;
-      // @ts-ignore: Type 'string' cannot be used to index type 'T
-      new_obj[key] = sourceValue;
-    }
-  });
-
-  return { new_obj, change };
-
-  // for (const key in source) {
-  //   // @ts-ignore: Type 'string' cannot be used to index type 'T
-  //   if (typeof source[key] === "object" && target[key]) {
-  //     const { new_obj: new_obj2, change: change2 } = deep_merge(
-  //       // @ts-ignore: Type 'string' cannot be used to index type 'T
-  //       target[key],
-  //       source[key]
-  //     );
-  //     if (change2) {
-  //       change = true;
-  //       // @ts-ignore: Type 'string' cannot be used to index type 'T
-  //       new_obj[key] = new_obj2;
-  //     }
-  //   } else {
-  //     // @ts-ignore: Type 'string' cannot be used to index type 'T'
-  //     if (target[key] !== source[key]) {
-  //       change = true;
-  //     }
-  //     // @ts-ignore: Type 'string' cannot be used to index type 'T'
-  //     new_obj[key] = source[key];
-  //   }
-  // }
-  // return { new_obj, change };
-};
-export { deep_merge, deep_compare_objects };
-export type { DeepPartial };

package/src/state/lib.ts

@@ -1,26 +0,0 @@
-import { useStore, create, UseBoundStore, StoreApi } from "zustand";
-
-interface LibState {
-  state: LibType;
-  set: (state: LibType) => void;
-  get: () => LibType;
-}
-
-interface LibZustandInterface {
-  libstate: UseBoundStore<StoreApi<LibState>>;
-}
-
-const LibZustand = (): LibZustandInterface => {
-  return {
-    libstate: create<LibState>((set, get) => ({
-      state: {
-        shelves: [],
-      },
-      set: (state: LibType) => set({ state: state }),
-      get: () => get().state,
-    })),
-  };
-};
-
-export default LibZustand;
-export type { LibZustandInterface, LibState };