alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v10' into refactor/nodes-edges-state

Browse Source
This commit is contained in:
moklick
2021-10-20 10:52:11 +02:00
parent f957462eb6 11ff5ecaf8
commit a0b8aa6fcb
27 changed files with 700 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src_oldapi/Edges/CustomEdge.tsx
+2 -5
View File
@@ -1,5 +1,5 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, getMarkerEnd } from 'react-flow-renderer';
import { EdgeProps, getBezierPath } from 'react-flow-renderer';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -10,15 +10,12 @@ const CustomEdge: FC<EdgeProps> = ({
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
{data.text}
example/src_oldapi/Edges/CustomEdge2.tsx
+2 -5
View File
@@ -1,5 +1,5 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
import { EdgeProps, getBezierPath, EdgeText, getEdgeCenter } from 'react-flow-renderer';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -10,11 +10,8 @@ const CustomEdge: FC<EdgeProps> = ({
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const [centerX, centerY] = getEdgeCenter({
sourceX,
sourceY,
@@ -24,7 +21,7 @@ const CustomEdge: FC<EdgeProps> = ({
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeText
x={centerX}
y={centerY}
example/src_oldapi/Edges/index.tsx
+43 -26
View File
@@ -41,6 +41,32 @@ const initialElements: Elements = [
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
markerEnd: {
type: ArrowHeadType.ArrowClosed,
},
},
{
id: 'e5-8',
source: '5',
target: '8',
type: 'custom',
data: { text: 'custom edge' },
},
{
id: 'e5-9',
source: '5',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
},
{
id: 'e5-6',
source: '5',
@@ -54,32 +80,23 @@ const initialElements: Elements = [
</>
),
labelStyle: { fill: 'red', fontWeight: 700 },
arrowHeadType: ArrowHeadType.Arrow,
},
{
id: 'e5-7',
source: '5',
target: '7',
label: 'label with styled bg',
labelBgPadding: [8, 4],
labelBgBorderRadius: 4,
labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
arrowHeadType: ArrowHeadType.ArrowClosed,
},
{
id: 'e5-8',
source: '5',
target: '8',
type: 'custom',
data: { text: 'custom edge' },
arrowHeadType: ArrowHeadType.ArrowClosed,
},
{
id: 'e5-9',
source: '5',
target: '9',
type: 'custom2',
data: { text: 'custom edge 2' },
style: { stroke: '#ffcc00' },
markerEnd: {
type: ArrowHeadType.Arrow,
color: '#FFCC00',
units: 'userSpaceOnUse',
width: 20,
height: 20,
strokeWidth: 2,
},
markerStart: {
type: ArrowHeadType.ArrowClosed,
color: '#FFCC00',
orient: 'auto-start-reverse',
units: 'userSpaceOnUse',
width: 20,
height: 20,
},
},
];
example/src_oldapi/Overview/index.tsx
+1 -2
View File
@@ -13,7 +13,6 @@ import ReactFlow, {
OnLoadParams,
FlowTransform,
SnapGrid,
ArrowHeadType,
Connection,
Edge,
} from 'react-flow-renderer';
@@ -125,7 +124,7 @@ const initialElements: Elements = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
{ id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
{ id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
{
id: 'e5-7',
example/src_oldapi/Undirectional/index.tsx
+13 -27
View File
@@ -12,7 +12,6 @@ import ReactFlow, {
ConnectionLineType,
ConnectionMode,
updateEdge,
ArrowHeadType,
} from 'react-flow-renderer';
import CustomNode from './CustomNode';
@@ -68,8 +67,7 @@ const initialElements: Elements = [
target: '01',
sourceHandle: 'left',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-1b',
@@ -77,8 +75,7 @@ const initialElements: Elements = [
target: '01',
sourceHandle: 'top',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-2a',
@@ -86,8 +83,7 @@ const initialElements: Elements = [
target: '02',
sourceHandle: 'top',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-2b',
@@ -95,8 +91,7 @@ const initialElements: Elements = [
target: '02',
sourceHandle: 'right',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-3a',
@@ -104,8 +99,7 @@ const initialElements: Elements = [
target: '03',
sourceHandle: 'right',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-3b',
@@ -113,8 +107,7 @@ const initialElements: Elements = [
target: '03',
sourceHandle: 'bottom',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-4a',
@@ -122,8 +115,7 @@ const initialElements: Elements = [
target: '04',
sourceHandle: 'bottom',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-4b',
@@ -131,8 +123,7 @@ const initialElements: Elements = [
target: '04',
sourceHandle: 'left',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-10',
@@ -140,8 +131,7 @@ const initialElements: Elements = [
target: '10',
sourceHandle: 'top',
targetHandle: 'bottom',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-20',
@@ -149,8 +139,7 @@ const initialElements: Elements = [
target: '20',
sourceHandle: 'right',
targetHandle: 'left',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-30',
@@ -158,8 +147,7 @@ const initialElements: Elements = [
target: '30',
sourceHandle: 'bottom',
targetHandle: 'top',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
{
id: 'e0-40',
@@ -167,8 +155,7 @@ const initialElements: Elements = [
target: '40',
sourceHandle: 'left',
targetHandle: 'right',
type: 'smoothstep',
arrowHeadType: ArrowHeadType.Arrow,
type: 'default',
},
];
@@ -181,8 +168,7 @@ const getId = (): ElementId => `${id++}`;
const UpdateNodeInternalsFlow = () => {
const [elements, setElements] = useState<Elements>(initialElements);
const onConnect = (params: Connection | Edge) =>
setElements((els) => addEdge({ ...params, type: 'smoothstep' }, els));
const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'default' }, els));
const { project } = useZoomPanHelper();
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
setElements((els) => updateEdge(oldEdge, newConnection, els));