Skip to content

Commit

Permalink
🐛 feat: add edge type (#100)
Browse files Browse the repository at this point in the history
Co-authored-by: jiangchu <[email protected]>
  • Loading branch information
ModestFun and jiangchu authored Apr 8, 2024
1 parent d1f081d commit 7194d19
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 18 deletions.
32 changes: 20 additions & 12 deletions docs/guide/demos/customEdge/ButtonEdge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,19 @@ const onEdgeClick = (evt, id) => {
alert(` ${id}`);
};

export default function CustomEdge({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
style = {},
markerEnd,
}: EdgeProps) {
export default function CustomEdge(edge: EdgeProps) {
const {
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
style = {},
markerEnd,
} = edge;

const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
Expand All @@ -25,10 +27,16 @@ export default function CustomEdge({
targetY,
targetPosition,
});

const { styles } = useStyles();
return (
<>
<BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
<BaseEdge
className={edge.data.className}
path={edgePath}
markerEnd={markerEnd}
style={style}
/>
<EdgeLabelRenderer>
<div
style={{
Expand Down
50 changes: 47 additions & 3 deletions docs/guide/demos/customEdge/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@
* compact: true
* defaultShowCode: true
*/
import { FlowView } from '@ant-design/pro-flow';
import {
FlowPanel,
FlowView,
FlowViewProvider,
SelectType,
useFlowViewer,
} from '@ant-design/pro-flow';
import { Button } from 'antd';
import { useMemo } from 'react';
import ButtonEdge from './ButtonEdge';
import useStyles from './btn.style';
import { getEdges, nodes } from './data';
Expand All @@ -13,12 +21,48 @@ const edgeTypes = {

function App() {
const { styles } = useStyles();
const edges = useMemo(() => getEdges(styles.customEdge), []);
const { selectEdges } = useFlowViewer();

return (
<div className={styles.container}>
<FlowView nodes={nodes} edges={getEdges(styles.customEdge)} edgeTypes={edgeTypes} />
<FlowView nodes={nodes} edges={edges} edgeTypes={edgeTypes}>
<FlowPanel position={'top-center'}>
<div>
<Button
onClick={() => {
selectEdges(['e1', 'e2'], SelectType.DEFAULT);
}}
>
edge select is default
</Button>
<Button
onClick={() => {
selectEdges(['e1', 'e2'], SelectType.DANGER);
}}
>
edge select is danger
</Button>
<Button
onClick={() => {
selectEdges(['e1', 'e2'], SelectType.WARNING);
}}
>
edge select is warning
</Button>
</div>
</FlowPanel>
</FlowView>
</div>
);
}

export default App;
function ProApp() {
return (
<FlowViewProvider>
<App />
</FlowViewProvider>
);
}

export default ProApp;
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ant-design/pro-flow",
"version": "1.3.7",
"version": "1.3.9",
"description": "A React based Flow components",
"keywords": [
"flow",
Expand Down
11 changes: 9 additions & 2 deletions src/FlowView/helper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,8 @@ export function getRenderEdges(edges: FlowViewEdge[]) {
id = `${source}-${target}`,
} = edge;

const _className = getEdgeClsFromSelectType(select) + ' ' + className;

return {
...edge,
id,
Expand All @@ -168,10 +170,15 @@ export function getRenderEdges(edges: FlowViewEdge[]) {
sourceHandle,
targetHandle,
type,
data,
animated,
select,
label,
className: getEdgeClsFromSelectType(select) + ' ' + className,
data: {
select,
className: _className,
...data,
},
className: _className,
};
});
}
Expand Down

0 comments on commit 7194d19

Please sign in to comment.