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

feat(edge-labels): add div based renderer

Browse Source
This commit is contained in:
moklick
2022-11-02 14:38:37 +01:00
parent 674127a3eb
commit 095e1fbe81
10 changed files with 352 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/vite-app/src/App/index.tsx
+6
View File
@@ -10,6 +10,7 @@ import DefaultNodes from '../examples/DefaultNodes';
import DragHandle from '../examples/DragHandle';
import DragNDrop from '../examples/DragNDrop';
import Edges from '../examples/Edges';
import EdgeRenderer from '../examples/EdgeRenderer';
import EdgeTypes from '../examples/EdgeTypes';
import Empty from '../examples/Empty';
import FloatingEdges from '../examples/FloatingEdges';
@@ -95,6 +96,11 @@ const routes: IRoute[] = [
path: '/edges',
component: Edges,
},
{
name: 'Edge Renderer',
path: '/edge-renderer',
component: EdgeRenderer,
},
{
name: 'Edge Types',
path: '/edge-types',
examples/vite-app/src/examples/EdgeRenderer/CustomEdge.tsx
+61
View File
@@ -0,0 +1,61 @@
import { FC, MouseEvent } from 'react';
import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore, ReactFlowStore } from 'reactflow';
const CustomEdge: FC<EdgeProps> = ({
id,
source,
target,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const isConnectedNodeDragging = useStore((s) =>
Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
);
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const onClick = (event: MouseEvent) => {
event.preventDefault();
event.stopPropagation();
console.log('click', data.text);
};
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeLabelRenderer>
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
background: '#ffcc00',
padding: 10,
zIndex: isConnectedNodeDragging ? 10 : 0,
pointerEvents: 'all',
}}
className="nodrag nopan"
>
{data.text}
<input style={{ display: 'block' }} />
<button onClick={onClick}>send</button>
</div>
</EdgeLabelRenderer>
</>
);
};
export default CustomEdge;
examples/vite-app/src/examples/EdgeRenderer/CustomEdge2.tsx
+51
View File
@@ -0,0 +1,51 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, EdgeLabelRenderer, useStore } from 'reactflow';
const CustomEdge: FC<EdgeProps> = ({
id,
source,
target,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const isConnectedNodeDragging = useStore((s) =>
Array.from(s.nodeInternals.values()).find((n) => n.dragging && (target === n.id || source === n.id))
);
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<EdgeLabelRenderer>
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
background: 'white',
border: '1px solid #555',
padding: 5,
zIndex: isConnectedNodeDragging ? 10 : 0,
}}
>
{data.text}
</div>
</EdgeLabelRenderer>
</>
);
};
export default CustomEdge;
examples/vite-app/src/examples/EdgeRenderer/index.tsx
+206
View File
@@ -0,0 +1,206 @@
import React, { MouseEvent, useCallback } from 'react';
import ReactFlow, {
Controls,
Background,
MiniMap,
addEdge,
Connection,
Edge,
EdgeTypes,
MarkerType,
Node,
useEdgesState,
useNodesState,
} from 'reactflow';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'Input 1' },
position: { x: 250, y: 0 },
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
{ id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
{ id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
{ id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
{
id: '6',
type: 'output',
data: { label: 'Output 6' },
position: { x: 50, y: 550 },
},
{
id: '7',
type: 'output',
data: { label: 'Output 7' },
position: { x: 250, y: 550 },
},
{
id: '8',
type: 'output',
data: { label: 'Output 8' },
position: { x: 525, y: 600 },
},
{
id: '9',
type: 'output',
data: { label: 'Output 9' },
position: { x: 675, y: 500 },
},
];
const initialEdges: Edge[] = [
{
id: 'e1-2',
source: '1',
target: '2',
label: 'bezier edge (default)',
className: 'normal-edge',
},
{
id: 'e2-2a',
source: '2',
target: '2a',
type: 'smoothstep',
label: 'smoothstep edge',
},
{
id: 'e2a-2b',
source: '2a',
target: '2b',
type: 'simplebezier',
label: 'simple bezier edge',
},
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{
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: MarkerType.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',
target: '6',
label: (
<>
<tspan>i am using</tspan>
<tspan dy={10} x={0}>
{'<tspan>'}
</tspan>
</>
),
labelStyle: { fill: 'red', fontWeight: 700 },
style: { stroke: '#ffcc00' },
markerEnd: {
type: MarkerType.Arrow,
color: '#FFCC00',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
strokeWidth: 2,
},
markerStart: {
type: MarkerType.ArrowClosed,
color: '#FFCC00',
orient: 'auto-start-reverse',
markerUnits: 'userSpaceOnUse',
width: 20,
height: 20,
},
},
];
const edgeTypes: EdgeTypes = {
custom: CustomEdge,
custom2: CustomEdge2,
};
const EdgesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
return (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onNodeClick={onNodeClick}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
snapToGrid={true}
edgeTypes={edgeTypes}
onEdgeClick={onEdgeClick}
onEdgeDoubleClick={onEdgeDoubleClick}
onEdgeMouseEnter={onEdgeMouseEnter}
onEdgeMouseMove={onEdgeMouseMove}
onEdgeMouseLeave={onEdgeMouseLeave}
>
<MiniMap />
<Controls />
<Background />
</ReactFlow>
);
};
export default EdgesFlow;
packages/core/package.json
+1
View File
@@ -58,6 +58,7 @@
"@reactflow/tsconfig": "workspace:*",
"@types/node": "^18.7.16",
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"typescript": "^4.8.3"
},
packages/core/src/components/EdgeLabelRenderer/index.tsx
+15
View File
@@ -0,0 +1,15 @@
import { useRef } from 'react';
import type { ReactNode } from 'react';
import { createPortal } from 'react-dom';
function EdgeLabelRenderer({ children }: { children: ReactNode }) {
const wrapperRef = useRef(document.getElementById('edgelabel-portal'));
if (!wrapperRef.current) {
return null;
}
return createPortal(children, wrapperRef.current);
}
export default EdgeLabelRenderer;
packages/core/src/container/GraphView/index.tsx
+2
View File
@@ -158,6 +158,8 @@ const GraphView = ({
disableKeyboardA11y={disableKeyboardA11y}
rfId={rfId}
/>
<div className="react-flow__edgelabel-renderer" id="edgelabel-portal" />
<NodeRenderer
nodeTypes={nodeTypes}
onNodeClick={onNodeClick}
packages/core/src/index.ts
+1
View File
@@ -24,6 +24,7 @@ export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
export { getMarkerEnd } from './components/Edges/utils';
export { default as ReactFlowProvider } from './components/ReactFlowProvider';
export { default as Panel } from './components/Panel';
export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
export { default as useReactFlow } from './hooks/useReactFlow';
export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
packages/core/src/styles/init.css
+7
View File
@@ -220,3 +220,10 @@
stroke-dashoffset: 10;
}
}
.react-flow__edgelabel-renderer {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
pnpm-lock.yaml
Generated
+2
View File
@@ -152,6 +152,7 @@ importers:
'@types/d3-zoom': ^3.0.1
'@types/node': ^18.7.16
'@types/react': ^18.0.17
'@types/react-dom': ^18.0.6
classcat: ^5.0.3
d3-drag: ^3.0.0
d3-selection: ^3.0.0
@@ -175,6 +176,7 @@ importers:
'@reactflow/tsconfig': link:../../tooling/tsconfig
'@types/node': registry.npmjs.org/@types/node/18.7.16
'@types/react': registry.npmjs.org/@types/react/18.0.19
'@types/react-dom': registry.npmjs.org/@types/react-dom/18.0.6
react: registry.npmjs.org/react/18.2.0
typescript: registry.npmjs.org/typescript/4.8.3