alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(example): custom edges not displayed correctly

Browse Source
This commit is contained in:
Braks
2021-08-08 19:13:59 +02:00
parent e7513b898c
commit 9e397e6817
4 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
examples/Edges/CustomEdge.tsx
View File

@@ -1,31 +1,35 @@
import { EdgeProps, getBezierPath, getMarkerEnd } from '../../src';
import { FunctionalComponent } from 'vue';
import { getBezierPath, getMarkerEnd } from '../../src';
import { computed, defineComponent } from 'vue';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
const CustomEdge: FunctionalComponent<EdgeProps> = ({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const CustomEdge = defineComponent({
props: {
...DefaultEdgeProps
},
setup(props) {
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition
})
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
return () => (
<>
<path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
<text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
{data.text}
</textPath>
</text>
</>
);
};
return () => (
<>
<path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
<text>
<textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
{props.data.text}
</textPath>
</text>
</>
);
}
});
export default CustomEdge;

85
examples/Edges/CustomEdge2.tsx
View File

@@ -1,44 +1,49 @@
import { FunctionalComponent } from 'vue';
import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
import { computed, defineComponent } from 'vue';
import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
const CustomEdge: FunctionalComponent<EdgeProps> = ({
id,
sourceX,
sourceY,
targetX,
targetY,
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,
targetX,
targetY
});
const CustomEdge = defineComponent({
props: {
...DefaultEdgeProps
},
setup(props) {
const edgePath = computed(() =>
getBezierPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition
})
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
const center = computed(() =>
getEdgeCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY
})
);
return () => (
<>
<path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
<EdgeText
x={centerX}
y={centerY}
label={data.text}
labelStyle={{ fill: 'white' }}
labelShowBg
labelBgStyle={{ fill: 'red' }}
labelBgPadding={[2, 4]}
labelBgBorderRadius={2}
onClick={() => console.log(data)}
/>
;
</>
);
};
return () => (
<>
<path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
<EdgeText
x={center.value[0]}
y={center.value[1]}
label={props.data?.text}
labelStyle={{ fill: 'white' }}
labelShowBg
labelBgStyle={{ fill: 'red' }}
labelBgPadding={[2, 4]}
labelBgBorderRadius={2}
onClick={() => console.log(props.data)}
/>
</>
);
}
});
export default CustomEdge;

12
examples/Edges/index.tsx
View File

@@ -1,4 +1,4 @@
import { FunctionalComponent, ref } from 'vue';
import { ref } from 'vue';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
import RevueFlow, {
@@ -12,14 +12,9 @@ import RevueFlow, {
addEdge,
Connection,
Edge,
EdgeProps,
removeElements
} from '../../src';
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
@@ -80,7 +75,7 @@ const initialElements = [
}
];
const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
const edgeTypes: Record<string, any> = {
custom: CustomEdge,
custom2: CustomEdge2
};
@@ -88,6 +83,9 @@ const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
const EdgesFlow = () => {
const elements = ref<Elements>(initialElements as Elements);
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));

2
src/components/Edges/utils.ts
View File

@@ -138,7 +138,7 @@ export const DefaultEdgeProps = {
data: {
type: Object as PropType<EdgeProps['data']>,
required: false,
default: undefined
default: () => ({} as any)
},
sourceHandleId: {
type: String as PropType<EdgeProps['sourceHandleId']>,