Skip to content
This repository was archived by the owner on Jun 13, 2024. It is now read-only.

Commit 91fdd52

Browse files
JarytJaryt
committed
refactor!: upgrading react flow
1 parent c95f040 commit 91fdd52

16 files changed

Lines changed: 986 additions & 5950 deletions

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"react-aria": "3.19.0",
2323
"react-beautiful-dnd": "^13.1.0",
2424
"react-dom": "^18.2.0",
25-
"react-flow-renderer": "9.6.7",
25+
"react-flow-renderer": "11.1.0",
2626
"react-instantsearch-hooks-web": "^6.29.0",
2727
"react-redux": "^7.2.6",
2828
"start-server-and-test": "^1.14.0",
@@ -48,7 +48,6 @@
4848
"postcss": "^8.4.16",
4949
"tailwindcss": "^3.1.8",
5050
"typescript": "^4.6.4",
51-
"vite": "^3.1.0",
52-
"vite-plugin-environment": "^1.1.2"
51+
"vite": "^3.1.0"
5352
}
5453
}

‎src/components/atoms/ConnectionLine.tsx‎

Lines changed: 74 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,86 @@
1-
import {
2-
ConnectionLineComponentProps,
3-
useStoreState as flowState,
4-
} from 'react-flow-renderer';
5-
import { useStoreState } from '../../state/Hooks';
1+
// import {
2+
// ConnectionLineComponentProps,
3+
// useStore as flowState,
4+
// } from 'react-flow-renderer';
5+
// import { useStoreState } from '../../state/Hooks';
66

7-
const getPos = (isSource: boolean, bounds: DOMRect, transform: number[]) => {
8-
let x, y;
7+
// const getPos = (isSource: boolean, bounds: DOMRect, transform: number[]) => {
8+
// let x, y;
99

10-
if (isSource) {
11-
x = (bounds.x + bounds.width - transform[0]) / transform[2];
12-
} else {
13-
x = (bounds.x - transform[0]) / transform[2];
14-
}
10+
// if (isSource) {
11+
// x = (bounds.x + bounds.width - transform[0]) / transform[2];
12+
// } else {
13+
// x = (bounds.x - transform[0]) / transform[2];
14+
// }
1515

16-
y = (bounds.y + bounds.height / 2 - 60 - transform[1]) / transform[2];
16+
// y = (bounds.y + bounds.height / 2 - 60 - transform[1]) / transform[2];
1717

18-
return { x, y };
19-
};
18+
// return { x, y };
19+
// };
2020

21-
const ConnectionLine = ({ targetX, targetY }: ConnectionLineComponentProps) => {
22-
const connecting = useStoreState((state) => state.connecting);
23-
const altAction = useStoreState((state) => state.altAction);
24-
const transform = flowState((state: any) => state.transform);
25-
const handle = connecting?.start?.ref?.current as Element;
26-
const isSource = connecting?.start?.id.connectionHandleType === 'source';
21+
// const ConnectionLine = ({ targetX, targetY }: ConnectionLineComponentProps) => {
22+
// const connecting = useStoreState((state) => state.connecting);
23+
// const altAction = useStoreState((state) => state.altAction);
24+
// const transform = flowState((state: any) => state.transform);
25+
// const handle = connecting?.start?.ref?.current as Element;
26+
// const isSource = connecting?.start?.id.connectionHandleType === 'source';
2727

28-
if (!handle) {
29-
return null;
30-
}
28+
// if (!handle) {
29+
// return null;
30+
// }
3131

32-
const bounds = handle.getBoundingClientRect();
33-
const start = getPos(isSource, bounds, transform);
34-
let end = { x: targetX, y: targetY };
35-
const dist = 30 * (isSource ? 1 : -1);
36-
const invalid = isSource ? end.x < start.x : end.y > start.x;
37-
let color = '#76CDFF';
32+
// const bounds = handle.getBoundingClientRect();
33+
// const start = getPos(isSource, bounds, transform);
34+
// let end = { x: targetX, y: targetY };
35+
// const dist = 30 * (isSource ? 1 : -1);
36+
// const invalid = isSource ? end.x < start.x : end.y > start.x;
37+
// let color = '#76CDFF';
3838

39-
if (!invalid && connecting?.end?.ref) {
40-
const snapTo = connecting?.end.ref?.current as Element;
39+
// if (!invalid && connecting?.end?.ref) {
40+
// const snapTo = connecting?.end.ref?.current as Element;
4141

42-
if (snapTo && connecting?.end?.ref.current !== handle) {
43-
const snapToBounds = snapTo.getBoundingClientRect();
44-
end = getPos(!isSource, snapToBounds, transform);
45-
color = '#0078CA';
46-
}
47-
}
42+
// if (snapTo && connecting?.end?.ref.current !== handle) {
43+
// const snapToBounds = snapTo.getBoundingClientRect();
44+
// end = getPos(!isSource, snapToBounds, transform);
45+
// color = '#0078CA';
46+
// }
47+
// }
4848

49-
color = invalid || altAction ? '#F24646' : color;
49+
// color = invalid || altAction ? '#F24646' : color;
5050

51-
return (
52-
<g>
53-
<path
54-
fill="none"
55-
stroke={color}
56-
strokeWidth={1.5}
57-
className="animated"
58-
d={`M${start.x},${start.y} ${start.x + dist},${start.y} ${
59-
start.x + dist
60-
},${start.y} ${end.x - dist},${end.y} ${end.x - dist},${end.y} ${
61-
end.x
62-
},${end.y}`}
63-
/>
64-
<circle
65-
cx={end.x}
66-
cy={end.y}
67-
fill="#fff"
68-
r={3}
69-
stroke={color}
70-
strokeWidth={1.5}
71-
/>
72-
<circle
73-
cx={start.x - 2}
74-
cy={start.y}
75-
fill="#fff"
76-
r={3}
77-
stroke={color}
78-
strokeWidth={1.5}
79-
/>
80-
</g>
81-
);
82-
};
51+
// return (
52+
// <g>
53+
// <path
54+
// fill="none"
55+
// stroke={color}
56+
// strokeWidth={1.5}
57+
// className="animated"
58+
// d={`M${start.x},${start.y} ${start.x + dist},${start.y} ${
59+
// start.x + dist
60+
// },${start.y} ${end.x - dist},${end.y} ${end.x - dist},${end.y} ${
61+
// end.x
62+
// },${end.y}`}
63+
// />
64+
// <circle
65+
// cx={end.x}
66+
// cy={end.y}
67+
// fill="#fff"
68+
// r={3}
69+
// stroke={color}
70+
// strokeWidth={1.5}
71+
// />
72+
// <circle
73+
// cx={start.x - 2}
74+
// cy={start.y}
75+
// fill="#fff"
76+
// r={3}
77+
// stroke={color}
78+
// strokeWidth={1.5}
79+
// />
80+
// </g>
81+
// );
82+
// };
8383

84-
export default ConnectionLine;
84+
// export default ConnectionLine;
85+
86+
export default {}

‎src/components/atoms/Edge.tsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,45 @@
11
import React from 'react';
22
import { EdgeProps } from 'react-flow-renderer';
33

4-
export default function Edge({
5-
id,
6-
sourceX,
7-
sourceY,
8-
targetX,
9-
targetY,
10-
sourcePosition,
11-
targetPosition,
12-
style = {},
13-
data,
14-
arrowHeadType,
15-
markerEndId,
16-
}: EdgeProps) {
17-
const gap = 45;
4+
// export default function Edge({
5+
// id,
6+
// sourceX,
7+
// sourceY,
8+
// targetX,
9+
// targetY,
10+
// sourcePosition,
11+
// targetPosition,
12+
// style = {},
13+
// data,
14+
// arrowHeadType,
15+
// markerEndId,
16+
// }: EdgeProps) {
17+
// const gap = 45;
1818

19-
return (
20-
<g>
21-
<path
22-
id={id}
23-
style={style}
24-
className="react-flow__edge-path"
25-
d={`M${sourceX - gap * 2},${sourceY} ${sourceX - gap},${sourceY} ${
26-
sourceX - gap
27-
},${sourceY} ${targetX + gap},${targetY} ${targetX + gap},${targetY} ${
28-
targetX + gap * 2
29-
},${targetY}`}
30-
/>
31-
{/* <text>
32-
<textPath
33-
href={`#${id}`}
34-
style={{ fontSize: '12px' }}
35-
startOffset="50%"
36-
textAnchor="middle"
37-
>
38-
{'requires'}
39-
</textPath>
40-
</text> */}
41-
</g>
42-
);
43-
}
19+
// return (
20+
// <g>
21+
// <path
22+
// id={id}
23+
// style={style}
24+
// className="react-flow__edge-path"
25+
// d={`M${sourceX - gap * 2},${sourceY} ${sourceX - gap},${sourceY} ${
26+
// sourceX - gap
27+
// },${sourceY} ${targetX + gap},${targetY} ${targetX + gap},${targetY} ${
28+
// targetX + gap * 2
29+
// },${targetY}`}
30+
// />
31+
// {/* <text>
32+
// <textPath
33+
// href={`#${id}`}
34+
// style={{ fontSize: '12px' }}
35+
// startOffset="50%"
36+
// textAnchor="middle"
37+
// >
38+
// {'requires'}
39+
// </textPath>
40+
// </text> */}
41+
// </g>
42+
// );
43+
// }
44+
45+
export default {}

0 commit comments

Comments
 (0)
⚡