@linkdlab/funcnodes_react_flow 0.1.0

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

@@ -0,0 +1,125 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { FuncNodesContext } from "../..";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Handle, Position } from "reactflow";
+import { FuncNodesReactFlowZustandInterface } from "../../../state/fnrfzst";
+import { HandleWithPreview, pick_best_io_type } from "./io";
+import {
+  BooleanInput,
+  FloatInput,
+  IntegerInput,
+  StringInput,
+  SelectionInput,
+  ColorInput,
+} from "./default_input_renderer";
+
+const Inputrenderer: {
+  [key: string]: InputRendererType;
+} = {};
+
+const register_input_renderer = (type: string, renderer: InputRendererType) => {
+  Inputrenderer[type] = renderer;
+};
+
+register_input_renderer("float", FloatInput);
+register_input_renderer("int", IntegerInput);
+register_input_renderer("bool", BooleanInput);
+register_input_renderer("string", StringInput);
+register_input_renderer("str", StringInput);
+register_input_renderer("color", ColorInput);
+register_input_renderer("select", SelectionInput);
+register_input_renderer("enum", SelectionInput);
+
+const INPUTCONVERTER: {
+  [key: string]: (v: any) => any;
+} = {
+  "": (v: any) => v,
+  str_to_json: (v: any) => {
+    return JSON.parse(v);
+  },
+  str_to_list: (v: any) => {
+    try {
+      const a = JSON.parse(v);
+      if (Array.isArray(a)) return a;
+      return [a];
+    } catch (e) {
+      try {
+        return JSON.parse("[" + v + "]");
+      } catch (e) {}
+    }
+
+    throw new Error("Invalid list");
+  },
+};
+
+const NodeInput = ({ io }: { io: IOType }) => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+  const render: RenderOptions = fnrf_zst.render_options();
+
+  if (io.render_options === undefined) {
+    io.render_options = {};
+  }
+  if (io.render_options.set_default === undefined) {
+    io.render_options.set_default = true;
+  }
+
+  const [typestring, otypestring] = pick_best_io_type(
+    io.type,
+    render.typemap || {}
+  );
+
+  const Input = typestring
+    ? io.value_options?.options
+      ? SelectionInput
+      : Inputrenderer[typestring]
+    : undefined;
+  const inputconverterf: (v: any) => any =
+    INPUTCONVERTER[(otypestring && render.inputconverter?.[otypestring]) ?? ""];
+  return (
+    <div className="nodeinput">
+      <HandleWithPreview
+        io={io}
+        typestring={typestring}
+        position={Position.Left}
+        type="target"
+      />
+
+      {Input && (
+        <div className="iovaluefield nodrag">
+          <Input io={io} inputconverter={inputconverterf} />
+        </div>
+      )}
+      <div className="ioname">{io.name}</div>
+    </div>
+  );
+};
+
+export default NodeInput;
+
+type Renderotion = ({ text }: { text: string }) => JSX.Element;
+
+const renderoptions: { [key: string]: Renderotion } = {};
+
+const Renderer = () => {
+  const [text, setText] = useState("");
+  const [render, setRender] = useState<Renderotion | undefined>(undefined);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <select onChange={(e) => setRender(renderoptions[e.target.value])}>
+        {Object.keys(renderoptions).map((key) => (
+          <option key={key} value={key}>
+            {key}
+          </option>
+        ))}
+      </select>
+      {render && render({ text })}
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { useContext, useEffect, useRef, useState } from "react";
+
+import { Handle, Position } from "reactflow";
+import { FuncNodesContext } from "../..";
+import { FuncNodesReactFlowZustandInterface } from "../../../state/fnrfzst";
+import { HandleWithPreview, pick_best_io_type } from "./io";
+import { InLineOutput } from "./default_output_render";
+
+const NodeOutput = ({ io }: { 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 (
+    <div className="nodeoutput">
+      <HandleWithPreview
+        io={io}
+        typestring={typestring}
+        position={Position.Right}
+        type="source"
+      />
+
+      <div className="ioname">{io.name}</div>
+
+      <div className="iovaluefield">
+        <InLineOutput io={io} />
+      </div>
+    </div>
+  );
+};
+
+export default NodeOutput;

package/src/frontend/node/node.scss

@@ -0,0 +1,265 @@
+:root {
+  --node_border_radius: 5px;
+  --handle_outer_radius: 4px;
+  --handle_inner_radius: 2px;
+  --handle_width: 10;
+  --handle_width_hover: 15;
+  --handle_overlap: 3;
+  --nodeinput_margin: 2;
+  --nodeio_shift: calc(var(--handle_overlap) - var(--nodeinput_margin));
+  --handle_source_color: hsl(190, 98%, 49%);
+  --handle_target_color: hsl(204, 98%, 51%);
+  --node_background: hsl(245, 51%, 42%);
+  --node_header_color: hsl(245, 51%, 22%);
+}
+
+.react-flow {
+  &__node {
+    padding: 0;
+    border-radius: var(--node_border_radius);
+    background-color: var(--node_background);
+    display: flex;
+    flex-direction: column;
+    color: aliceblue;
+    box-sizing: content-box;
+    transform: (-50%, -50%);
+    border: 2px solid #ffffff00;
+    font-size: 0.5rem;
+    width: auto;
+    max-width: 200px;
+    min-width: 100px;
+    &.selected {
+      border-color: #ffffff99;
+    }
+    background-clip: content-box;
+
+    & * {
+      box-sizing: border-box;
+    }
+  }
+
+  &__handle {
+    height: calc(100% - 4px);
+    border-radius: 0;
+    width: calc(var(--handle_width) * 1px);
+
+    transition: left 0.2s ease-in-out, right 0.2s ease-in-out,
+      width 0.2s ease-in-out;
+    &:hover {
+      width: calc(var(--handle_width_hover) * 1px);
+    }
+
+    &.source {
+      background-color: var(--handle_source_color);
+    }
+    &.target {
+      background-color: var(--handle_target_color);
+    }
+    &-left {
+      border-radius: var(--handle_outer_radius) var(--handle_inner_radius)
+        var(--handle_inner_radius) var(--handle_outer_radius);
+      left: calc((var(--nodeio_shift) - var(--handle_width)) * 1px);
+      &:hover {
+        left: calc((var(--nodeio_shift) - var(--handle_width_hover)) * 1px);
+      }
+    }
+    &-right {
+      border-radius: var(--handle_inner_radius) var(--handle_outer_radius)
+        var(--handle_outer_radius) var(--handle_inner_radius);
+      right: calc((var(--nodeio_shift) - var(--handle_width)) * 1px);
+      &:hover {
+        right: calc((var(--nodeio_shift) - var(--handle_width_hover)) * 1px);
+      }
+    }
+    &-top {
+      border-radius: var(--handle_outer_radius) var(--handle_outer_radius)
+        var(--handle_inner_radius) var(--handle_inner_radius);
+    }
+    &-bottom {
+      border-radius: var(--handle_inner_radius) var(--handle_inner_radius)
+        var(--handle_outer_radius) var(--handle_outer_radius);
+    }
+  }
+}
+
+.innernode {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+  // padding: 2px;
+  box-sizing: border-box;
+
+  &.intrigger {
+    & .nodeheader {
+      background-color: #abb408;
+    }
+  }
+
+  &.error {
+    & .nodeheader {
+      background-color: #ff0000;
+    }
+  }
+}
+.nodeheader {
+  box-sizing: border-box;
+  background-color: var(--node_header_color);
+  width: 100%;
+  padding: 0.1rem;
+  border-radius: var(--node_border_radius) var(--node_border_radius) 0 0;
+  display: flex; /* Use flex layout */
+  align-items: center; /* Align items vertically in the center */
+  justify-content: space-between; /* Distribute space between items */
+
+  &_element {
+    display: flex; /* Enable flex within each child to center content */
+    align-items: center; /* Align items vertically in the center */
+  }
+  &_title {
+    flex-grow: 1; /* Allow the text div to grow and fill available space */
+    margin: 0 10px; /* Add some space around the text for aesthetics */
+    white-space: nowrap; /* Prevent wrapping */
+    overflow: hidden; /* Hide overflow */
+    text-overflow: ellipsis; /* Add ellipsis to overflow */
+    justify-content: center; /* Center the text horizontally */
+    &_text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%; /* Ensure it does not overflow the parent */
+    }
+  }
+
+  & .triggerbutton {
+    cursor: pointer;
+
+    &:hover {
+      color: #0cc3f5;
+    }
+    &:active {
+      color: #075d74;
+    }
+  }
+}
+
+.nodename_input {
+  // remove the default
+  border: 1px solid #000000;
+  border-radius: 2px;
+  background: none;
+  color: white;
+  text-align: center;
+
+  font-size: inherit;
+  margin: 2px;
+  box-sizing: border-box;
+}
+
+.nodefooter {
+  background-color: #4e0ba5;
+  width: 100%;
+  padding: 0.1rem;
+  border-radius: 0 0 var(--node_border_radius) var(--node_border_radius);
+  &:empty {
+    display: none;
+  }
+  & .nodeerror {
+    border: 1px solid #ff0000;
+    border-radius: 2px;
+    padding: 0.25rem;
+    background-color: #ff000075;
+  }
+}
+
+.nodebody {
+  flex-grow: 1;
+}
+
+.nodedatabody {
+  overflow: hidden;
+}
+
+.noderesizecontrol {
+  background: transparent !important;
+  border: none !important;
+  font-size: 0.5rem;
+}
+.noderesizeicon {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 0.5rem;
+}
+
+.nodeio {
+  width: auto;
+  background-color: inherit;
+  padding: 0.1rem;
+  margin-top: 0.1rem;
+  margin-bottom: 0.1rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+
+  border: 1px solid #ffffff88;
+  border-radius: 3px;
+  box-sizing: border-box;
+  margin-left: calc(var(--nodeinput_margin) * 1px);
+  margin-right: calc(var(--nodeinput_margin) * 1px);
+}
+
+.nodeinput {
+  @extend .nodeio;
+}
+
+.nodeoutput {
+  @extend .nodeio;
+}
+
+.iovaluefield {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  align-items: start;
+  justify-content: start;
+  display: flex;
+  margin: 0.2rem;
+  line-break: anywhere;
+  & > input {
+    width: 100%;
+  }
+}
+.ioname {
+  flex-grow: 1;
+  flex-shrink: 1;
+  color: inherit;
+  margin: 0.2rem;
+  overflow: hidden;
+  min-width: 2rem;
+
+  .nodeinput & {
+    text-align: left;
+  }
+  .nodeoutput & {
+    text-align: right;
+  }
+}
+
+input.nodedatainput {
+  &:focus {
+    outline: none;
+  }
+}
+
+.nodedatastyledelement {
+  background-color: var(--node_header_color);
+
+  font-size: 0.5rem;
+  height: 1.5rem;
+}
+
+input.nodedatainput.styledinput,
+select.nodedatainput.styleddropdown {
+  @extend .nodedatastyledelement;
+}

package/src/frontend/node/node.tsx

@@ -0,0 +1,208 @@
+import React, {
+  RefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { NodeStore } from "../../state/node";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandIcon from "@mui/icons-material/Expand";
+import LanIcon from "@mui/icons-material/Lan";
+import PlayCircleFilledIcon from "@mui/icons-material/PlayCircleFilled";
+import "./node.scss";
+import { FuncNodesReactFlowZustandInterface } from "../../state/fnrfzst";
+import { FuncNodesContext } from "..";
+import get_rendertype from "../datarenderer";
+import CustomColorPicker, { HSLColorPicker } from "../utils/colorpicker";
+import { NodeInput, NodeOutput } from "./io";
+import { PreviewHandleDataRendererForIo } from "./io/handle_renderer";
+import CustomDialog from "../dialog";
+interface NodeHeaderProps {
+  node_data: NodeType;
+}
+
+const NodeHeader = ({ node_data }: NodeHeaderProps) => {
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const clicktrigger = () => {
+    fnrf_zst.on_node_action({
+      type: "trigger",
+      from_remote: false,
+      id: node_data.id,
+    });
+  };
+
+  return (
+    <div className="nodeheader">
+      <div className="nodeheader_element">
+        <PlayCircleFilledIcon
+          fontSize="inherit"
+          className="triggerbutton"
+          onClick={clicktrigger}
+        />
+        <LanIcon fontSize="inherit" />
+      </div>
+      <div className="nodeheader_element nodeheader_title">
+        <div className="nodeheader_title_text">{node_data.node_name}</div>
+      </div>
+      <div className="nodeheader_element">
+        <ExpandLessIcon fontSize="inherit" />
+      </div>
+    </div>
+  );
+};
+
+interface NodeBodyProps {
+  node_data: NodeType;
+}
+
+const NodeDataRenderer = ({ node_data }: { node_data: NodeType }) => {
+  const src = node_data.render_options?.data?.src;
+
+  const io: IOType | undefined = node_data.render_options?.data?.src
+    ? node_data.io[node_data.render_options?.data?.src]
+    : undefined;
+
+  const pvhandle = io && PreviewHandleDataRendererForIo(io);
+
+  return (
+    <div className="nodrag">
+      {pvhandle && (
+        <CustomDialog
+          trigger={<div>{pvhandle({ io })}</div>}
+          onOpenChange={(open: boolean) => {
+            if (open) {
+              io?.try_get_full_value();
+            }
+          }}
+        >
+          {pvhandle({ io })}
+        </CustomDialog>
+      )}
+    </div>
+  );
+};
+
+const NodeBody = ({ node_data }: NodeBodyProps) => {
+  const inputs = Object.values(node_data.io).filter((io) => io.is_input);
+  const outputs = Object.values(node_data.io).filter((io) => !io.is_input);
+
+  if (node_data.render_options?.data?.src) {
+  }
+
+  return (
+    <div className="nodebody">
+      {outputs.map((io) => (
+        <NodeOutput key={io.id} io={io} />
+      ))}
+      <NodeDataRenderer node_data={node_data} />
+      {inputs.map((io) => (
+        <NodeInput key={io.id} io={io} />
+      ))}
+    </div>
+  );
+};
+
+const NodeName = ({ node_data }: { node_data: NodeType }) => {
+  const [name, setName] = useState(node_data.name);
+
+  useEffect(() => {
+    setName(node_data.name);
+  }, [node_data]);
+
+  const fnrf_zst: FuncNodesReactFlowZustandInterface =
+    useContext(FuncNodesContext);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const finalSetName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const new_name = e.target.value;
+    fnrf_zst.on_node_action({
+      type: "update",
+      from_remote: false,
+      id: node_data.id,
+      node: { name: new_name },
+    });
+  };
+  return (
+    <input
+      className="nodename_input"
+      value={name}
+      onChange={handleChange}
+      onBlur={finalSetName}
+    />
+  );
+};
+
+const NodeFooter = ({ node_data }: { node_data: NodeType }) => {
+  return (
+    <div className="nodefooter">
+      {node_data.error && <div className="nodeerror">{node_data.error}</div>}
+    </div>
+  );
+};
+/**
+ * A generic 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 {Object} An object containing the merged object (new_obj) and a boolean indicating if there was a change (change).
+ *
+ * @throws {Type 'string' cannot be used to index type 'T'} This error is ignored using the @ts-ignore directive because we are dynamically accessing properties of a generic type T.
+ */
+const DefaultNode = ({ data }: { data: { UseNodeStore: NodeStore } }) => {
+  // Use the NodeStore to get the data for the node.
+  const storedata = data.UseNodeStore();
+
+  const collapsed = storedata.frontend.collapsed || true;
+
+  const [visualTrigger, setVisualTrigger] = useState(false);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+    // When in_trigger becomes true, set visualTrigger to true immediately
+    if (storedata.in_trigger) {
+      setVisualTrigger(true);
+    } else if (visualTrigger) {
+      // When in_trigger becomes false, wait for a minimum duration before setting visualTrigger to false
+      timeoutId = setTimeout(() => setVisualTrigger(false), 200); // 50ms or any other duration you see fit
+    }
+
+    return () => clearTimeout(timeoutId); // Cleanup timeout on component unmount or state changes
+  }, [storedata.in_trigger, visualTrigger]);
+
+  return (
+    <>
+      {/* <NodeResizeControl
+        minWidth={100}
+        minHeight={100}
+        className="noderesizecontrol"
+      >
+        <ExpandIcon fontSize="inherit" className="noderesizeicon" />
+      </NodeResizeControl> */}
+      <div
+        className={
+          "innernode" +
+          (visualTrigger ? " intrigger" : "") +
+          (storedata.error ? " error" : "")
+        }
+      >
+        <NodeHeader node_data={storedata} />
+        <NodeName node_data={storedata} />
+        <NodeBody node_data={storedata} />
+        <NodeFooter node_data={storedata} />
+      </div>
+    </>
+  );
+};
+
+export default DefaultNode;
+export {};

package/src/frontend/nodecontextmenu.scss

@@ -0,0 +1,18 @@
+.context-menu {
+  background: white;
+  border-style: solid;
+  box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
+  position: absolute;
+}
+
+.context-menu button {
+  border: none;
+  display: block;
+  padding: 0.5em;
+  text-align: left;
+  width: 100%;
+}
+
+.context-menu button:hover {
+  background: white;
+}

package/src/frontend/utils/colorpicker.scss

@@ -0,0 +1,37 @@
+.colorspace {
+  margin: 0.2rem;
+  &_title {
+    font-size: 0.7em;
+    font-weight: bold;
+  }
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+
+  & label {
+    font-size: 0.7rem;
+  }
+  & input {
+    font-size: 0.7rem;
+    max-height: 0.7rem;
+  }
+  & input[type="range"] {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    -webkit-appearance: none;
+    background-color: #666;
+    height: 0.7rem;
+    border-radius: 5px;
+
+    &::-webkit-slider-thumb,
+    &::-webkit-range-thumb,
+    &::-moz-range-thumb {
+      width: 0.7rem;
+      height: 0.7rem;
+      background-color: #cc1c1c;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+}