@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.2

package/src/frontend/lib.scss

@@ -1,157 +0,0 @@
-:root {
-  --expandtime: 0.3s;
-  --libnodebgcolor: #48465f;
-  --libnodebgcolor_hover: #6a6698;
-}
-.libcontainer {
-  top: 0;
-  left: 0;
-
-  height: 100%;
-  padding: 0.5rem;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-
-  border-radius: 0.5rem;
-}
-
-.library {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-  width: 15rem;
-  background-color: var(--funcnodesbackground2);
-  border-radius: var(--containerboarderradius);
-  padding: 0.5rem;
-
-  & .libtitle {
-    font-size: 1rem;
-    font-weight: bold;
-    color: var(--funheadercolor);
-  }
-
-  & hr {
-    &.hr_prominent {
-      border: 0.5px solid var(--funheadercolor);
-    }
-    width: 100%;
-  }
-}
-
-.addlib {
-  background-color: var(--funcnodesbackground2);
-  border-radius: var(--containerboarderradius);
-  padding: 0.5rem;
-
-  & button {
-    background-color: var(--funcnodesbackground1);
-    color: var(--funheadercolor);
-    border: 0;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    cursor: pointer;
-    font-size: 1rem;
-    width: 100%;
-    &:hover {
-      background-color: var(--funheadercolor);
-      color: var(--funcnodesbackground1);
-    }
-    &:active {
-      background-color: var(--funcnodesbackground1);
-      color: var(--funcnodestextcolor1);
-    }
-  }
-  & button[disabled] {
-    background-color: var(--funcnodesbackground1);
-    color: var(--funcnodestextcolor1);
-    cursor: not-allowed;
-  }
-}
-.libfilter {
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 0.2rem;
-  &:focus-within {
-    border: 1px solid var(--funheadercolor);
-  }
-  & input {
-    flex-grow: 1;
-    background-color: transparent;
-    color: var(--funcnodestextcolor1);
-    border: 0;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-.libnodecontainer {
-  display: grid;
-
-  transition: grid-template-rows var(--expandtime) ease-out;
-  &.close {
-    grid-template-rows: 0fr;
-  }
-  &.open {
-    grid-template-rows: 1fr;
-  }
-
-  &_inner {
-    transition: opacity var(--expandtime) ease-out;
-    overflow: hidden;
-    padding-left: 10px;
-  }
-  &.close &_inner {
-    opacity: 0.2;
-  }
-  &.open &_inner {
-    opacity: 1;
-  }
-}
-.shelfcontainer {
-  padding-top: 0.2rem;
-  padding-bottom: 0.2rem;
-  display: flex;
-  flex-direction: column;
-  & .shelftitle {
-    font-size: 0.8rem;
-
-    color: var(--funheadercolor);
-    opacity: 0.8;
-    display: flex;
-
-    &_text {
-      flex-grow: 1;
-    }
-  }
-}
-
-.libnodeentry {
-  border-radius: 10px;
-  box-sizing: border-box;
-  background-color: var(--libnodebgcolor);
-  margin-bottom: 0.2rem;
-  //  border-radius: 0.2rem;
-  padding: 0.1rem;
-  cursor: pointer;
-  border: 1px solid var(--libnodebgcolor);
-  transition: border 0.2s ease-in-out;
-  font-size: 0.8rem;
-  box-shadow: -0.2rem 0px rgba(0, 76, 255);
-  &:hover {
-    background-color: var(--libnodebgcolor_hover);
-    border: 1px solid rgba(0, 76, 255);
-  }
-}
-
-.expandicon {
-  transform: rotate(0deg);
-  &.close {
-    transform: rotate(180deg);
-  }
-  transition: transform var(--expandtime) ease-out;
-}

package/src/frontend/lib.tsx

@@ -1,198 +0,0 @@
-import React, { useState, useContext } from "react";
-import "./lib.scss";
-
-import { FuncNodesReactFlowZustandInterface } from "../state";
-import { UseBoundStore } from "zustand";
-import { MouseEvent } from "react";
-import { FuncNodesContext } from "./index";
-import SearchIcon from "@mui/icons-material/Search";
-import CloseIcon from "@mui/icons-material/Close";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import CustomDialog from "./dialog";
-
-const LibraryNode = ({ item }: { item: LibNode }) => {
-  const zustand: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const add_to_flow = () => {
-    zustand.worker?.add_node(item.node_id);
-  };
-
-  const nodeclick = (event: MouseEvent<HTMLDivElement>) => {
-    // if double click, add node to graph
-    if (event.detail === 2) {
-      add_to_flow();
-    }
-  };
-  return (
-    <div className="libnodeentry" onClick={nodeclick} title={item.description}>
-      {item.node_name || item.node_id}
-    </div>
-  );
-};
-
-const filterShelf = (shelf: Shelf, filter: string): boolean => {
-  const hasFilteredNodes =
-    shelf.nodes?.some((node) =>
-      node.node_id.toLowerCase().includes(filter.toLowerCase())
-    ) ?? false;
-
-  const hasFilteredSubShelves =
-    shelf.subshelves?.some((subShelf) => filterShelf(subShelf, filter)) ??
-    false;
-
-  return hasFilteredNodes || hasFilteredSubShelves;
-};
-
-const LibraryShelf = ({ item, filter }: { item: Shelf; filter: string }) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggle = () => setIsOpen(!isOpen);
-
-  const filterednodes = item.nodes?.filter((node) =>
-    node.node_id.toLowerCase().includes(filter.toLowerCase())
-  );
-
-  const _isopen = isOpen || filter.length > 0;
-  if (!filterShelf(item, filter)) {
-    return <></>;
-  }
-
-  return (
-    <div className="shelfcontainer">
-      <div
-        className="shelftitle"
-        onClick={handleToggle}
-        style={{ cursor: "pointer" }}
-        title={item.description}
-      >
-        <div className="shelftitle_text">{item.name}</div>
-        <div className={"expandicon " + (_isopen ? "open" : "close")}>
-          <ExpandLessIcon />
-        </div>
-      </div>
-      <div className={"libnodecontainer " + (_isopen ? "open" : "close")}>
-        <div className="libnodecontainer_inner">
-          {filterednodes && (
-            <>
-              {filterednodes.map((subItem, idx) => (
-                <LibraryNode key={idx} item={subItem} />
-              ))}
-            </>
-          )}
-          {item.subshelves && (
-            <>
-              {item.subshelves.map((subItem, idx) => (
-                <LibraryShelf key={idx} item={subItem} filter={filter} />
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-      <hr />
-    </div>
-  );
-};
-
-const LibFilter = ({
-  filter,
-  setFilter,
-}: {
-  filter: string;
-  setFilter: (filter: string) => void;
-}) => {
-  // input with left icon
-
-  return (
-    <div className="libfilter">
-      <SearchIcon fontSize="inherit" />
-      <input
-        type="text"
-        placeholder="Filter"
-        value={filter}
-        onChange={(e) => {
-          setFilter(e.target.value);
-        }}
-      />
-      {filter && (
-        <CloseIcon
-          fontSize="inherit"
-          onClick={() => {
-            setFilter("");
-          }}
-        />
-      )}
-    </div>
-  );
-};
-
-const AddLibraryOverLay = ({ children }: { children: React.ReactNode }) => {
-  const [newlib, setNewLib] = useState("");
-  const zustand: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-  if (!zustand.worker) {
-    return <></>;
-  }
-  const add_new_lib = () => {
-    if (zustand.worker === undefined) {
-      return;
-    }
-    zustand.worker.add_lib(newlib);
-    setNewLib("");
-  };
-  return (
-    <CustomDialog
-      title="Add Library"
-      trigger={children}
-      description="Add a new library to the current worker."
-      buttons={[
-        {
-          text: "add",
-          onClick: add_new_lib,
-        },
-      ]}
-    >
-      <input
-        className="styledinput"
-        type="text"
-        value={newlib}
-        onChange={(e) => {
-          setNewLib(e.target.value);
-        }}
-      />
-    </CustomDialog>
-  );
-};
-
-const Library = () => {
-  const zustand: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-  const libstate = zustand.lib.libstate((state) => state.state);
-
-  const [filter, setFilter] = useState("");
-
-  return (
-    <div className="libcontainer">
-      <div className="library">
-        <div className="libtitle">Lib</div>
-        <hr className="hr_prominent" />
-        <LibFilter filter={filter} setFilter={setFilter} />
-        <div className="vscrollcontainer">
-          {libstate.shelves.map((item, idx) => (
-            <LibraryShelf key={idx} item={item} filter={filter} />
-          ))}
-        </div>
-        <hr />
-      </div>
-      <div className="addlib">
-        <AddLibraryOverLay>
-          <button disabled={zustand.worker === undefined}>Add Library</button>
-        </AddLibraryOverLay>
-      </div>
-    </div>
-  );
-};
-
-export default Library;
-export { LibraryShelf as LibraryItem };

package/src/frontend/node/io/default_input_renderer.tsx

@@ -1,327 +0,0 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { FuncNodesReactFlowZustandInterface } from "../../../state";
-
-import { FuncNodesContext } from "../../funcnodesreactflow";
-import CustomColorPicker from "../../utils/colorpicker";
-
-const BooleanInput = ({ io, inputconverter }: InputRendererProps) => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const indeterminate = io.value === undefined;
-  const cRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!cRef.current) return;
-    cRef.current.indeterminate = indeterminate;
-  }, [cRef, indeterminate]);
-
-  const on_change = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let new_value: boolean = e.target.checked;
-    try {
-      new_value = inputconverter(e.target.checked);
-    } catch (e) {}
-    fnrf_zst.worker?.set_io_value({
-      nid: io.node,
-      ioid: io.id,
-      value: new_value,
-      set_default: io.render_options?.set_default || false,
-    });
-  };
-  return (
-    <input
-      ref={cRef}
-      type="checkbox"
-      className="styledcheckbox"
-      checked={!!io.value}
-      onChange={on_change}
-      disabled={io.connected}
-    />
-  );
-};
-const NumberInput = ({
-  io,
-  inputconverter,
-  parser = (n: string) => parseFloat(n),
-}: InputRendererProps & {
-  parser: (n: string) => number;
-}) => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const [tempvalue, setTempValue] = useState(io.value);
-
-  useEffect(() => {
-    setTempValue(io.value);
-  }, [io.value]);
-
-  const set_new_value = (new_value: number | string) => {
-    new_value = parser(
-      parseFloat(new_value.toString()).toString() // parse float for e notation
-    );
-
-    if (isNaN(new_value)) {
-      new_value = "<NoValue>";
-      setTempValue("");
-    } else {
-      setTempValue(new_value.toString());
-    }
-    try {
-      new_value = inputconverter(new_value);
-    } catch (e) {}
-
-    fnrf_zst.worker?.set_io_value({
-      nid: io.node,
-      ioid: io.id,
-      value: new_value,
-      set_default: io.render_options?.set_default || false,
-    });
-  };
-
-  const on_change = (e: React.ChangeEvent<HTMLInputElement>) => {
-    set_new_value(e.target.value);
-  };
-  const v = io.connected ? io.value : tempvalue;
-  return (
-    <input
-      type="text"
-      className="nodedatainput styledinput"
-      value={v || ""}
-      onChange={(e) => setTempValue(e.target.value)}
-      onBlur={on_change}
-      onKeyDown={(e) => {
-        // on key up add step to value
-
-        if (e.key === "ArrowUp") {
-          let step = io.render_options?.step || 1;
-          if (e.shiftKey) step *= 10;
-
-          let new_value = (parseFloat(v) || 0) + step;
-          // setTempValue(new_value.toString());
-          set_new_value(new_value);
-          return;
-        }
-
-        // on key down subtract step to value
-        if (e.key === "ArrowDown") {
-          let step = io.render_options?.step || 1;
-          if (e.shiftKey) step *= 10;
-          let new_value = (parseFloat(v) || 0) - step;
-          // setTempValue(new_value.toString());
-          set_new_value(new_value);
-          return;
-        }
-
-        //accept only numbers
-        if (
-          !/^[0-9.eE+-]$/.test(e.key) &&
-          !["Backspace", "ArrowLeft", "ArrowRight", "Delete", "Tab"].includes(
-            e.key
-          )
-        ) {
-          e.preventDefault();
-        }
-      }}
-      disabled={io.connected}
-      step={io.render_options?.step}
-      min={io.value_options?.min}
-    />
-  );
-};
-
-const FloatInput = ({ io, inputconverter }: InputRendererProps) => {
-  return NumberInput({ io, inputconverter, parser: parseFloat });
-};
-
-const IntegerInput = ({ io, inputconverter }: InputRendererProps) => {
-  return NumberInput({ io, inputconverter, parser: parseInt });
-};
-
-const StringInput = ({ io, inputconverter }: InputRendererProps) => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const [tempvalue, setTempValue] = useState(io.value);
-
-  const on_change = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let new_value: string = e.target.value;
-    try {
-      new_value = inputconverter(new_value);
-    } catch (e) {}
-
-    if (!new_value) new_value = "<NoValue>";
-
-    fnrf_zst.worker?.set_io_value({
-      nid: io.node,
-      ioid: io.id,
-      value: new_value,
-      set_default: io.render_options?.set_default || false,
-    });
-  };
-
-  return (
-    <input
-      className="nodedatainput styledinput"
-      value={io.connected ? io.value : tempvalue}
-      onChange={(e) => setTempValue(e.target.value)}
-      onBlur={on_change}
-      disabled={io.connected}
-    />
-  );
-};
-
-const _parse_string = (s: string) => s;
-const _parse_number = (s: string) => parseFloat(s);
-const _parse_boolean = (s: string) => !!s;
-const _parse_null = (s: string) => (s === "null" ? null : s);
-
-const get_parser = (datatype: string | null) => {
-  if (datatype === "nuinputconvertermber") {
-    return _parse_number;
-  }
-  if (datatype === "boolean") {
-    return _parse_boolean;
-  }
-  if (datatype === "undefined") {
-    return _parse_null;
-  }
-  return _parse_string;
-};
-
-const SelectionInput = ({
-  io,
-  inputconverter,
-  parser,
-}: InputRendererProps & {
-  parser?(s: string): any;
-}) => {
-  let options: (string | number)[] | EnumOf = io.value_options?.options || [];
-  if (Array.isArray(options)) {
-    options = {
-      type: "enum",
-      values: options,
-      keys: options.map((x) => x.toString()),
-      nullable: false,
-    };
-  }
-  options = options as EnumOf;
-  if (
-    options.nullable &&
-    !options.values.includes(null) &&
-    !options.keys.includes("None")
-  ) {
-    options.values.unshift(null);
-    options.keys.unshift("None");
-  }
-  //make key value pairs
-  const optionsmap: [string, string, string][] = [];
-  for (let i = 0; i < options.values.length; i++) {
-    // set const t to "string", "number","boolean" "null" depenting on the type of options.values[i]
-    const t =
-      options.values[i] === null || options.values[i] === undefined
-        ? "undefined"
-        : typeof options.values[i];
-    let v = options.values[i];
-
-    if (v === null) {
-      v = "null";
-    }
-    if (v === undefined) {
-      v = "undefined";
-    }
-    optionsmap.push([options.keys[i], v.toString(), t]);
-  }
-
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const on_change = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    // Find the selected option element
-    const selectedOption = e.target.options[e.target.selectedIndex];
-    // Retrieve the datatype attribute from the selected option
-    const datatype = selectedOption.getAttribute("datatype");
-
-    // Use the existing parser or get a new one based on the datatype
-    const p = parser || get_parser(datatype);
-
-    let new_value: string | number = p(e.target.value);
-    try {
-      new_value = inputconverter(e.target.value);
-    } catch (e) {}
-
-    fnrf_zst.worker?.set_io_value({
-      nid: io.node,
-      ioid: io.id,
-      value: p(e.target.value),
-      set_default: io.render_options?.set_default || false,
-    });
-  };
-  let v = io.value;
-  if (v === null) {
-    v = "null";
-  }
-  if (v === undefined) {
-    v = "undefined";
-  }
-  return (
-    <select
-      value={v}
-      onChange={on_change}
-      disabled={io.connected}
-      className="nodedatainput styleddropdown"
-    >
-      <option value="<NoValue>" disabled>
-        select
-      </option>
-      {optionsmap.map((option) => (
-        <option key={option[0]} value={option[1]} datatype={option[2]}>
-          {option[0]}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-const ColorInput = ({ io, inputconverter }: InputRendererProps) => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-
-  const colorspace = io.value_options?.colorspace || "hex";
-
-  const on_change = (colorconverter?: {
-    [key: string]: () => number[] | string;
-  }) => {
-    let new_value: string | number[] = "<NoValue>";
-    if (colorconverter) {
-      if (colorconverter[colorspace]) new_value = colorconverter[colorspace]();
-      else new_value = colorconverter.hex();
-    }
-    try {
-      new_value = new_value;
-    } catch (e) {}
-
-    fnrf_zst.worker?.set_io_value({
-      nid: io.node,
-      ioid: io.id,
-      value: new_value,
-      set_default: io.render_options?.set_default || false,
-    });
-  };
-
-  return (
-    <CustomColorPicker
-      onChange={on_change}
-      inicolordata={io.value}
-      inicolorspace={colorspace}
-    />
-  );
-};
-
-export {
-  FloatInput,
-  IntegerInput,
-  BooleanInput,
-  StringInput,
-  SelectionInput,
-  ColorInput,
-};

package/src/frontend/node/io/default_output_render.tsx

@@ -1,26 +0,0 @@
-import { useContext } from "react";
-import { FuncNodesReactFlowZustandInterface } from "../../../state";
-import { FuncNodesContext } from "../../funcnodesreactflow";
-import { SortableTable } from "../../utils/table";
-import JSONDataDisplay from "../../utils/jsondata";
-import { Base64ImageRenderer } from "../../datarenderer/images";
-
-const InLineOutput = ({ io }: { io: IOType }) => {
-  const fnrf_zst: FuncNodesReactFlowZustandInterface =
-    useContext(FuncNodesContext);
-  let value = io.fullvalue;
-  if (value == undefined) value = io.value;
-  if (value === undefined) {
-    value = "";
-  } else {
-    value = JSON.stringify(io.value).replace(/\\n/g, "\n"); //respect "\n" in strings
-  }
-  //truncate the string if it is too long
-  if (value.length > 63) {
-    value = value.slice(0, 60) + "...";
-  }
-
-  return <div>{value}</div>;
-};
-
-export { InLineOutput };