@linkdlab/funcnodes_react_flow 0.1.1 → 0.1.2

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

@@ -1,127 +0,0 @@
-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, RenderOptions } from "../../../states/fnrfzst.t";
-import { HandleWithPreview, pick_best_io_type } from "./io";
-import {
-  BooleanInput,
-  FloatInput,
-  IntegerInput,
-  StringInput,
-  SelectionInput,
-  ColorInput,
-} from "./default_input_renderer";
-import { IOType, InputRendererType } from "../../../states/nodeio.t";
-import React from "react";
-
-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/module/src/frontend/node/io/nodeoutput.tsx

@@ -1,43 +0,0 @@
-import { useContext, useEffect, useRef, useState } from "react";
-
-import { Handle, Position } from "reactflow";
-import { FuncNodesContext } from "../..";
-
-import { HandleWithPreview, pick_best_io_type } from "./io";
-import { InLineOutput } from "./default_output_render";
-import {
-  RenderOptions,
-  FuncNodesReactFlowZustandInterface,
-} from "../../../states/fnrfzst.t";
-import { IOType } from "../../../states/nodeio.t";
-import React from "react";
-
-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/module/src/frontend/node/node.scss

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

@@ -1,209 +0,0 @@
-import React, {
-  RefObject,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import { NodeStore, NodeType } from "../../states/node.t";
-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 "../../states/fnrfzst.t";
-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";
-import { IOType } from "../../states/nodeio.t";
-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/module/src/frontend/utils/colorpicker.scss

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