@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.2

package/src/frontend/node/node.tsx

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

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

@@ -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;
-    }
-  }
-}

package/src/frontend/utils/colorpicker.tsx

@@ -1,342 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
-import * as Popover from "@radix-ui/react-popover";
-import convert from "color-convert";
-import "./colorpicker.scss";
-
-const parse_colorstring = (colorstring: string): [string, any[]] => {
-  // This is a simplified parser and may need adjustments to handle all CSS color formats robustly
-  if (colorstring.startsWith("#")) {
-    return ["hex", [colorstring]];
-  }
-
-  let matches = colorstring.match(/^(\w+)\(([^)]+)\)$/);
-  if (!matches) return ["keyword", [colorstring]];
-
-  const colortype = matches[1];
-  const colordata = matches[2].split(",").map((n) => parseInt(n.trim()));
-
-  return [colortype, colordata];
-};
-
-const create_color_converter = (
-  type: string,
-  data: any[]
-): { [key: string]: () => number[] | string } => {
-  if (!Array.isArray(data)) data = [data];
-  if (data[0] === undefined || data[0] === null)
-    return create_color_converter("rgb", [0, 0, 0]);
-  // @ts-ignore
-  const source = convert[type];
-  if (!source) throw new Error("Unsupported color type: " + type);
-
-  source[type] = () => data;
-
-  const checkrgb = source.rgb(data);
-  if (!Array.isArray(checkrgb)) return create_color_converter("rgb", [0, 0, 0]);
-  if (checkrgb[0] === undefined || checkrgb[0] === null)
-    return create_color_converter("rgb", [0, 0, 0]);
-
-  const checkhsl = source.hsl(data);
-  if (!Array.isArray(checkhsl)) return create_color_converter("rgb", [0, 0, 0]);
-  if (checkhsl[0] === undefined || checkhsl[0] === null)
-    return create_color_converter("rgb", [0, 0, 0]);
-
-  const converter: { [key: string]: () => number[] | string } = {};
-
-  Object.keys(source).forEach((key) => {
-    const entry = source[key];
-    //check if entry is a function
-    if (typeof entry === "function") {
-      converter[key] = () => entry.apply(null, data);
-    }
-  });
-
-  return converter;
-};
-const create_color_converter_from_string = (
-  colorstring: string
-): { [key: string]: () => number[] | string } => {
-  const [colortype, colordata] = parse_colorstring(colorstring);
-  // @ts-ignore
-  if (!colortype || !convert[colortype]) {
-    console.error("Unsupported color type or invalid color string");
-    return {};
-  }
-
-  return create_color_converter(colortype, colordata);
-};
-
-const HSLColorPicker = ({
-  onChange,
-  colorconverter,
-}: {
-  onChange: (colorconverter: {
-    [key: string]: () => number[] | string;
-  }) => void;
-  colorconverter: { [key: string]: () => number[] | string };
-}) => {
-  const [converter, setConverter] = useState(colorconverter);
-  const hsl = converter.hsl() as number[];
-  const rgb = converter.rgb() as number[];
-  const hsv = converter.hsv() as number[];
-  const hex = converter.hex() as string;
-
-  const colorStyle = {
-    backgroundColor: `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`,
-    padding: "10px",
-    margin: "10px 0",
-  };
-
-  let g = "linear-gradient(to right";
-  for (let i = 0; i <= 360; i += 10) {
-    g += `, hsl(${i}, 100%, 50%)`;
-  }
-  g += ")";
-  const hueStyle = {
-    backgroundImage: "unset",
-    WebkitAppearance: "none" as any,
-    background: g,
-    height: 10,
-    borderRadius: 5,
-  };
-
-  return (
-    <div style={{ backgroundColor: "white" }}>
-      <div style={colorStyle}>Color Preview</div>
-      <div className="colorspace">
-        <div className="colorspace_title">RGB</div>
-        <div></div>
-
-        <label>Red</label>
-        <input
-          type="range"
-          min="0"
-          max="255"
-          value={rgb[0]}
-          onChange={(e) => {
-            const newrgb = [parseInt(e.target.value), rgb[1], rgb[2]];
-            const newconverter = create_color_converter("rgb", newrgb);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{ background: `linear-gradient(to right, #000, #f00)` }}
-        />
-
-        <label>Green</label>
-        <input
-          type="range"
-          min="0"
-          max="255"
-          value={rgb[1]}
-          onChange={(e) => {
-            const newrgb = [rgb[0], parseInt(e.target.value), rgb[2]];
-            const newconverter = create_color_converter("rgb", newrgb);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{ background: `linear-gradient(to right, #000, #0f0)` }}
-        />
-
-        <label>Blue</label>
-        <input
-          type="range"
-          min="0"
-          max="255"
-          value={rgb[2]}
-          onChange={(e) => {
-            const newrgb = [rgb[0], rgb[1], parseInt(e.target.value)];
-            const newconverter = create_color_converter("rgb", newrgb);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{ background: `linear-gradient(to right, #000, #00f)` }}
-        />
-      </div>
-      <div className="colorspace">
-        <div className="colorspace_title">HSL</div>
-        <div></div>
-
-        <label>Hue</label>
-        <input
-          type="range"
-          min="0"
-          max="360"
-          value={hsl[0]}
-          onChange={(e) => {
-            const newhsl = [parseInt(e.target.value), hsl[1], hsl[2]];
-            const newconverter = create_color_converter("hsl", newhsl);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)`,
-          }}
-        />
-
-        <label>Saturation</label>
-        <input
-          type="range"
-          min="0"
-          max="100"
-          value={hsl[1]}
-          onChange={(e) => {
-            const newhsl = [hsl[0], parseInt(e.target.value), hsl[2]];
-            const newconverter = create_color_converter("hsl", newhsl);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #fff, hsl(${hsl[0]}, 100%, 50%))`,
-          }}
-        />
-
-        <label>Lightness</label>
-
-        <input
-          type="range"
-          min="0"
-          max="100"
-          value={hsl[2]}
-          onChange={(e) => {
-            const newhsl = [hsl[0], hsl[1], parseInt(e.target.value)];
-            const newconverter = create_color_converter("hsl", newhsl);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #000, hsl(${hsl[0]}, 100%, 50%), #fff)`,
-          }}
-        />
-      </div>
-
-      <div className="colorspace">
-        <div className="colorspace_title">HSV</div>
-        <div></div>
-
-        <label>Hue</label>
-        <input
-          type="range"
-          min="0"
-          max="360"
-          value={hsv[0]}
-          onChange={(e) => {
-            const newhsv = [parseInt(e.target.value), hsv[1], hsv[2]];
-            const newconverter = create_color_converter("hsv", newhsv);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)`,
-          }}
-        />
-
-        <label>Saturation</label>
-        <input
-          type="range"
-          min="0"
-          max="100"
-          value={hsv[1]}
-          onChange={(e) => {
-            const newhsv = [hsv[0], parseInt(e.target.value), hsv[2]];
-            const newconverter = create_color_converter("hsv", newhsv);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #fff, hsl(${hsl[0]}, 100%, 50%))`,
-          }}
-        />
-
-        <label>Value</label>
-        <input
-          type="range"
-          min="0"
-          max="100"
-          value={hsv[2]}
-          onChange={(e) => {
-            const newhsv = [hsv[0], hsv[1], parseInt(e.target.value)];
-            const newconverter = create_color_converter("hsv", newhsv);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-          style={{
-            background: `linear-gradient(to right, #000, hsl(${hsl[0]}, 100%, 50%))`,
-          }}
-        />
-      </div>
-
-      <div className="colorspace">
-        <div className="colorspace_title">HEX</div>
-        <div></div>
-
-        <input
-          type="text"
-          value={hex}
-          onChange={(e) => {
-            const newconverter = create_color_converter("hex", [
-              e.target.value,
-            ]);
-            setConverter(newconverter);
-            onChange(newconverter);
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-const CustomColorPicker = ({
-  inicolordata,
-  inicolorspace = "hex",
-  onChange,
-}: {
-  inicolordata?: number[] | string | string[];
-  inicolorspace?: string;
-  onChange?: (colorconverter: {
-    [key: string]: () => number[] | string;
-  }) => void;
-}) => {
-  if (inicolordata === undefined) {
-    inicolordata = [0, 0, 0];
-    inicolorspace = "rgb";
-  }
-  if (!Array.isArray(inicolordata)) inicolordata = [inicolordata];
-
-  let iniconverter = create_color_converter(inicolorspace, inicolordata);
-
-  if (iniconverter.rgb() === undefined)
-    iniconverter = create_color_converter("rgb", [0, 0, 0]);
-  const [color, setColor] = useState(iniconverter);
-
-  const innerSetColor = (colorconverter: {
-    [key: string]: () => number[] | string;
-  }) => {
-    setColor(colorconverter);
-    if (onChange) onChange(colorconverter);
-  };
-
-  const style = {
-    background: "#" + color.hex(),
-    borderRadius: "0.3rem",
-    width: "2rem",
-    height: "1rem",
-  };
-  return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
-        <button style={style}></button>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content side="left">
-          <HSLColorPicker
-            onChange={innerSetColor}
-            colorconverter={color}
-          ></HSLColorPicker>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-export default CustomColorPicker;
-export { HSLColorPicker };

package/src/frontend/utils/jsondata.tsx

@@ -1,19 +0,0 @@
-import {
-  JsonView,
-  allExpanded,
-  darkStyles,
-  defaultStyles,
-  collapseAllNested,
-} from "react-json-view-lite";
-import "react-json-view-lite/dist/index.css";
-const JSONDataDisplay = ({ data }: { data: any }) => {
-  return (
-    <JsonView
-      data={data}
-      style={darkStyles}
-      shouldExpandNode={collapseAllNested}
-    />
-  );
-};
-
-export default JSONDataDisplay;

package/src/frontend/utils/table.scss

@@ -1,22 +0,0 @@
-.tablecontainer {
-  overflow: auto;
-  background-color: white;
-}
-.tableHead {
-  color: var(--funheadercolor) !important;
-  background-color: var(--funcnodesbackground1);
-  font-weight: bold !important;
-}
-
-.tableheadercolor {
-  color: inherit !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
-}
-
-.indexcol {
-  background-color: var(--funcnodesbackground2);
-  color: var(--funheadercolor) !important;
-  font-family: inherit !important;
-  font-weight: inherit !important;
-}