File size: 2,392 Bytes
8fe4e41
a8323d4
 
 
8fe4e41
10c9dc3
8fe4e41
be095f5
44d07e8
 
a55eb17
 
be095f5
a8323d4
10c9dc3
44d07e8
10c9dc3
 
 
 
 
 
 
 
 
 
 
 
8fe4e41
10c9dc3
8fe4e41
 
be095f5
a55eb17
be095f5
 
 
56f8a41
b0968aa
a8323d4
 
10c9dc3
a8323d4
 
 
 
 
 
dfe2d8f
a8323d4
 
 
 
b0968aa
a8323d4
 
 
 
 
 
b2852ba
a8323d4
b0968aa
a8323d4
 
 
d1d859f
8fe4e41
be095f5
 
 
 
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;