File size: 2,392 Bytes
d460634
fbfd21f
 
 
d460634
fc15efa
d460634
98f8f03
f2d4392
 
dfd9216
 
98f8f03
fbfd21f
fc15efa
f2d4392
fc15efa
 
 
 
 
 
 
 
 
 
 
 
d460634
fc15efa
d460634
 
98f8f03
dfd9216
98f8f03
 
 
a12b090
a112474
fbfd21f
 
fc15efa
fbfd21f
 
 
 
 
 
2594c74
fbfd21f
 
 
 
a112474
fbfd21f
 
 
 
 
 
8f44c91
fbfd21f
a112474
fbfd21f
 
 
c7f22d1
d460634
98f8f03
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import { useReactFlow } from "@xyflow/react";
import React from "react";
// @ts-ignore
import Triangle from "~icons/tabler/triangle-inverted-filled.jsx";
import LynxKiteNode from "./LynxKiteNode";
import NodeGroupParameter from "./NodeGroupParameter";
import NodeParameter from "./NodeParameter";

export type UpdateOptions = { delay?: number };

function NodeWithParams(props: any) {
  const reactFlow = useReactFlow();
  const metaParams = props.data.meta?.params;
  const [collapsed, setCollapsed] = React.useState(props.collapsed);

  function setParam(name: string, newValue: any, opts: UpdateOptions) {
    reactFlow.updateNodeData(props.id, (prevData: any) => ({
      ...prevData,
      params: { ...prevData.data.params, [name]: newValue },
      __execution_delay: opts.delay || 0,
    }));
  }

  function deleteParam(name: string, opts: UpdateOptions) {
    if (props.data.params[name] === undefined) {
      return;
    }
    delete props.data.params[name];
    reactFlow.updateNodeData(props.id, {
      params: { ...props.data.params },
      __execution_delay: opts.delay || 0,
    });
  }
  const params = props.data?.params ? Object.entries(props.data.params) : [];

  return (
    <LynxKiteNode {...props}>
      {props.collapsed && params.length > 0 && (
        <div className="params-expander" onClick={() => setCollapsed(!collapsed)}>
          <Triangle className={`flippy ${collapsed ? "flippy-90" : ""}`} />
        </div>
      )}
      {!collapsed &&
        params.map(([name, value]) =>
          metaParams?.[name]?.type === "group" ? (
            <NodeGroupParameter
              key={name}
              value={value}
              data={props.data}
              meta={metaParams?.[name]}
              setParam={(name: string, value: any, opts?: UpdateOptions) =>
                setParam(name, value, opts || {})
              }
              deleteParam={(name: string, opts?: UpdateOptions) => deleteParam(name, opts || {})}
            />
          ) : (
            <NodeParameter
              name={name}
              key={name}
              value={value}
              data={props.data}
              meta={metaParams?.[name]}
              onChange={(value: any, opts?: UpdateOptions) => setParam(name, value, opts || {})}
            />
          ),
        )}
      {props.children}
    </LynxKiteNode>
  );
}

export default NodeWithParams;