@linkdlab/funcnodes_react_flow 0.1.0

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

@@ -0,0 +1,327 @@
+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

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

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

@@ -0,0 +1,89 @@
+import { useContext } from "react";
+import { FuncNodesReactFlowZustandInterface } from "../../../state";
+import { FuncNodesContext } from "../../funcnodesreactflow";
+import { pick_best_io_type } from "./io";
+import { SortableTable } from "../../utils/table";
+import JSONDataDisplay from "../../utils/jsondata";
+import { Base64ImageRenderer } from "../../datarenderer/images";
+
+const TableOutput = ({ io }: { io: IOType }) => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  let value = io.fullvalue;
+  if (value == undefined) value = io.value;
+  if (value === undefined) {
+    value = [];
+  }
+
+  return <SortableTable tabledata={value} />;
+};
+
+const DictOutput = ({ io }: { io: IOType }) => {
+  let value = io.fullvalue;
+
+  if (value === undefined) value = io.value;
+  if (value === undefined) {
+    value = {};
+  }
+
+  return <JSONDataDisplay data={value} />;
+};
+
+const Base64ImageOutput = ({ io }: { io: IOType }) => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  let value = io.fullvalue;
+  if (value == undefined) value = io.value;
+  if (value === undefined) {
+    value = "";
+  }
+
+  return <Base64ImageRenderer value={value} />;
+};
+
+const SingleValueOutput = ({ 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
+  }
+
+  return (
+    <div>
+      <pre>{value}</pre>
+    </div>
+  );
+};
+
+const HandlePreviouGenerators: {
+  [key: string]: ({ io }: { io: IOType }) => JSX.Element;
+} = {
+  string: SingleValueOutput,
+  table: TableOutput,
+  image: Base64ImageOutput,
+  dict: DictOutput,
+};
+
+const PreviewHandleDataRendererForIo = (io: IOType) => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+  const render: RenderOptions = fnrf_zst.render_options();
+
+  const [typestring, otypestring] = pick_best_io_type(
+    io.type,
+    render.typemap || {}
+  );
+
+  return typestring && HandlePreviouGenerators[typestring]
+    ? HandlePreviouGenerators[typestring]
+    : DictOutput;
+};
+
+export { PreviewHandleDataRendererForIo };

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

@@ -0,0 +1,4 @@
+import NodeInput from "./nodeinput";
+import NodeOutput from "./nodeoutput";
+
+export { NodeInput, NodeOutput };

package/src/frontend/node/io/io.scss

@@ -0,0 +1,91 @@
+s slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.iotooltipcontent {
+  background-color: #f9f9f9;
+  border: 1px solid #ffffff;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  font-size: 10px;
+  color: #333;
+  max-width: 30vw;
+  max-height: 30vh;
+  cursor: default;
+
+  &.fullsize {
+    max-width: 100vw;
+    max-height: 100vh;
+    position: fixed;
+    top: 0;
+  }
+
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  &[data-state="delayed-open"][data-side="top"] {
+    animation-name: slideDownAndFade;
+  }
+  &[data-state="delayed-open"][data-side="right"] {
+    animation-name: slideLeftAndFade;
+  }
+  &[data-state="delayed-open"][data-side="bottom"] {
+    animation-name: slideUpAndFade;
+  }
+  &[data-state="delayed-open"][data-side="left"] {
+    animation-name: slideRightAndFade;
+  }
+}
+
+.iotooltip_container {
+  display: flex;
+  flex-direction: column;
+  max-width: inherit;
+  max-height: inherit;
+}
+
+.iotooltipcontentarrow {
+  fill: white;
+}

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

@@ -0,0 +1,114 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
+import LockIcon from "@mui/icons-material/Lock";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+
+import "./io.scss";
+import { Handle, HandleProps } from "reactflow";
+import { useMemo, useState } from "react";
+import CustomDialog from "../../dialog";
+import { PreviewHandleDataRendererForIo } from "./handle_renderer";
+const pick_best_io_type = (
+  iot: SerializedType,
+  typemap: { [key: string]: string }
+): [string | undefined, string | undefined] => {
+  // check if iot is string
+  if (typeof iot === "string") {
+    if (iot in typemap) {
+      return [typemap[iot], iot];
+    }
+    return [iot, iot];
+  }
+  if ("allOf" in iot && iot.allOf !== undefined) {
+    return [undefined, undefined];
+  }
+  if ("anyOf" in iot && iot.anyOf !== undefined) {
+    const picks = iot.anyOf.map((x) => pick_best_io_type(x, typemap));
+    for (const pick of picks) {
+      switch (pick[0]) {
+        case "bool":
+          return ["bool", pick[1]];
+        case "enum":
+          return ["enum", pick[1]];
+        case "float":
+          return ["float", pick[1]];
+        case "int":
+          return ["int", pick[1]];
+        case "string":
+          return ["string", pick[1]];
+        case "str":
+          return ["string", pick[1]];
+      }
+    }
+
+    return [undefined, undefined];
+  }
+  if (!("type" in iot) || iot.type === undefined) {
+    return [undefined, undefined];
+  }
+
+  if (iot.type === "enum") {
+    return ["enum", "enum"];
+  }
+  return [undefined, undefined];
+};
+
+type HandleWithPreviewProps = {
+  io: IOType;
+  typestring: string | undefined;
+  preview?: React.FC<{ io: IOType }>;
+} & HandleProps;
+
+const HandleWithPreview = ({
+  io,
+  typestring,
+  preview,
+  ...props
+}: HandleWithPreviewProps) => {
+  const [locked, setLocked] = useState(false);
+  const [opened, setOpened] = useState(false);
+
+  const pvhandle: React.FC<{ io: IOType }> =
+    preview || PreviewHandleDataRendererForIo(io);
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root open={locked || opened} onOpenChange={setOpened}>
+        <Tooltip.Trigger asChild>
+          <Handle id={io.id} {...props} />
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className={"iotooltipcontent"} sideOffset={5}>
+            <div className="iotooltip_container">
+              <div className="iotooltip_header">
+                {locked ? (
+                  <LockIcon onClick={() => setLocked(false)} />
+                ) : (
+                  <LockOpenIcon onClick={() => setLocked(true)} />
+                )}
+                {pvhandle && (
+                  <CustomDialog
+                    trigger={<FullscreenIcon />}
+                    onOpenChange={(open: boolean) => {
+                      if (open) {
+                        io.try_get_full_value();
+                      }
+                      setLocked(open);
+                    }}
+                  >
+                    {pvhandle({ io })}
+                  </CustomDialog>
+                )}
+              </div>
+              {pvhandle
+                ? pvhandle({ io })
+                : `no preview available for "${typestring}"`}
+            </div>
+            <Tooltip.Arrow className="iotooltipcontentarrow" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};
+export { pick_best_io_type, HandleWithPreview };