209 | {
210 | permission &&
211 | <>
212 |
215 |
218 |
219 | }
220 |
256 |
275 | setIsOpen(false)}
279 | actions={[{label:'Delete', effect:deleteNode}]}
280 | />
281 | {
283 | if (n.type === 'input') return '#0041d0';
284 | if (n.type === 'selectorNode') return bgColor;
285 | if (n.type === 'output') return '#ff0072';
286 | }}
287 | nodeColor={(n) => {
288 | if (n.type === 'selectorNode') return bgColor;
289 | return '#fff';
290 | }}
291 | />
292 |
293 |
294 |
295 | )
296 | }
297 |
298 | export default Reactflow
299 |
--------------------------------------------------------------------------------
/src/components/Reactflow/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { DragEvent } from 'react';
2 |
3 | const onDragStart = (event, nodeType) => {
4 | event.stopPropagation();
5 | event.dataTransfer.setData('application/reactflow', nodeType);
6 | event.dataTransfer.effectAllowed = 'move';
7 | };
8 |
9 | const Sidebar = () => {
10 | return (
11 |
23 | );
24 | };
25 |
26 | export default Sidebar;
--------------------------------------------------------------------------------
/src/components/Reactflow/contextMenu.js:
--------------------------------------------------------------------------------
1 | import { FC, memo } from 'react';
2 |
3 | // type Action = {
4 | // label: string;
5 | // effect: (...args: any[]) => any;
6 | // };
7 |
8 | // type Position = {
9 | // x: number;
10 | // y: number;
11 | // };
12 |
13 | // type Props = {
14 | // actions: Action[];
15 | // isOpen: boolean;
16 | // position: Position;
17 | // onMouseLeave: () => void;
18 | // };
19 |
20 | export const ContextMenu = memo(
21 | ({ isOpen, position, actions = [], onMouseLeave }) =>
22 | isOpen ? (
23 |
195 | {showXarrow ? (
196 | <>
197 |
310 |
311 | {labels.start ? (
312 |
320 | {labels.start}
321 |
322 | ) : null}
323 | {labels.middle ? (
324 |
333 | {labels.middle}
334 |
335 | ) : null}
336 | {labels.end ? (
337 |
0 ? 'translate(-100% , -50%)' : 'translate(-0% , -50%)',
340 | width: 'max-content',
341 | position: 'absolute',
342 | left: st.cx0 + st.labelEndPos.x,
343 | top: st.cy0 + st.labelEndPos.y + strokeWidth + 5,
344 | }}>
345 | {labels.end}
346 |
347 | ) : null}
348 | {_debug ? (
349 | <>
350 | {/* possible anchor connections */}
351 | {[...st.startPoints, ...st.endPoints].map((p, i) => {
352 | return (
353 |
367 | );
368 | })}
369 |
370 | ) : null}
371 |
372 | ) : null}
373 |