@@ -44,60 +44,5 @@ reactflow(
4444
4545## Custom Nodes
4646
47- ``` {r}
48- nodes <- list(
49- list(id = "jd", position = list(x = 200, y = 50),
50- data = list(label = "Jane Doe", title = "CEO", icon = "👩")),
51- list(id = "tw", position = list(x = 0, y = 200),
52- data = list(label = "Tyler Weary", title = "Designer", icon = "👨")),
53- list(id = "kp", position = list(x = 400, y = 200),
54- data = list(label = "Kristi Price", title = "Developer", icon = "👩"))
55- )
56- edges <- list(
57- list(id = "jd-tw", source = "jd", target = "tw"),
58- list(id = "jd-kp", source = "jd", target = "kp")
59- )
60-
61-
62- node_types <- JS(reactR::babel_transform('
63- import React, { memo } from "react";
64- import { Handle, Position } from "@xyflow/react";
65-
66- function CustomNode({ data }) {
67- return (
68- <div className="container">
69- <div className="emoji">
70- {data.emoji}
71- </div>
72- <div className="text-element">
73- <div className="text-name">{data.name}</div>
74- <div className="text-job">{data.job}</div>
75- </div>
76- </div>
77-
78- <Handle
79- type="target"
80- position={Position.Top}
81- className="handle"
82- />
83- <Handle
84- type="source"
85- position={Position.Bottom}
86- className="handle"
87- />
88- </div>
89- );
90- }
91- '))
92-
93- reactflow(
94- nodes,
95- edges,
96- mini_map(),
97- controls(),
98- background(),
99- nodeTypes = node_types
100- )
101- ```
10247
10348
0 commit comments