@linkdlab/funcnodes_react_flow 0.1.0 → 0.1.2

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

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

@@ -1,114 +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";
-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 };

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

@@ -1,125 +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 } 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

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

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