@linkdlab/funcnodes_react_flow 0.1.1 → 0.1.2

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

@@ -1,329 +0,0 @@
-import { useContext, useEffect, useRef, useState } from "react";
-import { FuncNodesReactFlowZustandInterface } from "../../../states/fnrfzst.t";
-
-import { FuncNodesContext } from "../../funcnodesreactflow";
-import CustomColorPicker from "../../utils/colorpicker";
-import { EnumOf, InputRendererProps } from "../../../states/nodeio.t";
-import React from "react";
-
-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/module/src/frontend/node/io/default_output_render.tsx

@@ -1,25 +0,0 @@
-import { useContext } from "react";
-import { FuncNodesReactFlowZustandInterface } from "../../../states/fnrfzst.t";
-import { FuncNodesContext } from "../../funcnodesreactflow";
-import { IOType } from "../../../states/nodeio.t";
-import React from "react";
-
-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/module/src/frontend/node/io/handle_renderer.tsx

@@ -1,94 +0,0 @@
-import { useContext } from "react";
-import {
-  FuncNodesReactFlowZustandInterface,
-  RenderOptions,
-} from "../../../states/fnrfzst.t";
-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";
-import { IOType } from "../../../states/nodeio.t";
-import React from "react";
-
-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/module/src/frontend/node/io/io.scss

@@ -1,91 +0,0 @@
-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/module/src/frontend/node/io/io.tsx

@@ -1,115 +0,0 @@
-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";
-import { IOType, SerializedType } from "../../../states/nodeio.t";
-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 };