File size: 2,378 Bytes
d460634
fbfd21f
 
 
d460634
fc15efa
d460634
98f8f03
f2d4392
 
cedd3c4
dfd9216
98f8f03
fbfd21f
fc15efa
f2d4392
fc15efa
 
 
 
 
 
 
 
 
 
 
 
d460634
fc15efa
d460634
 
98f8f03
dfd9216
98f8f03
 
cedd3c4
a12b090
a112474
fbfd21f
 
fc15efa
fbfd21f
 
 
 
 
 
2594c74
fbfd21f
 
 
 
a112474
fbfd21f
 
 
 
 
 
8f44c91
fbfd21f
a112474
fbfd21f
 
 
c7f22d1
cedd3c4
98f8f03
 
 
cedd3c4
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 };

export 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 (
    <>
      {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}
    </>
  );
}

export default LynxKiteNode(NodeWithParams);