File size: 2,392 Bytes
7ed5764
fd731c4
 
 
7ed5764
429aac4
7ed5764
7fda361
f835633
 
483664b
 
7fda361
fd731c4
429aac4
f835633
429aac4
 
 
 
 
 
 
 
 
 
 
 
7ed5764
429aac4
7ed5764
 
7fda361
483664b
7fda361
 
 
935885e
1270bff
fd731c4
 
429aac4
fd731c4
 
 
 
 
 
f89e59f
fd731c4
 
 
 
1270bff
fd731c4
 
 
 
 
 
5f57a53
fd731c4
1270bff
fd731c4
 
 
d5f09ce
7ed5764
7fda361
 
 
 
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;