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:28:45 +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
examples/Edges/CustomEdge.tsx
+31 -27
View File
@@ -1,31 +1,35 @@
import { EdgeProps, getBezierPath, getMarkerEnd } from '../../src'; import { getBezierPath, getMarkerEnd } from '../../src';
import { FunctionalComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
const CustomEdge: FunctionalComponent<EdgeProps> = ({ const CustomEdge = defineComponent({
id, props: {
sourceX, ...DefaultEdgeProps
sourceY, },
targetX, setup(props) {
targetY, const edgePath = computed(() =>
sourcePosition, getBezierPath({
targetPosition, sourceX: props.sourceX,
data, sourceY: props.sourceY,
arrowHeadType, sourcePosition: props.sourcePosition,
markerEndId targetX: props.targetX,
}) => { targetY: props.targetY,
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }); targetPosition: props.targetPosition
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); })
);
const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
return () => ( return () => (
<> <>
<path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} /> <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
<text> <text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle"> <textPath href={`#${props.id}`} style={{ fontSize: '12px' }} startOffset="50%" text-anchor="middle">
{data.text} {props.data.text}
</textPath> </textPath>
</text> </text>
</> </>
); );
}; }
});
export default CustomEdge; export default CustomEdge;
examples/Edges/CustomEdge2.tsx
+45 -40
View File
@@ -1,44 +1,49 @@
import { FunctionalComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src'; import { EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
import { DefaultEdgeProps } from '../../src/components/Edges/utils';
const CustomEdge: FunctionalComponent<EdgeProps> = ({ const CustomEdge = defineComponent({
id, props: {
sourceX, ...DefaultEdgeProps
sourceY, },
targetX, setup(props) {
targetY, const edgePath = computed(() =>
sourcePosition, getBezierPath({
targetPosition, sourceX: props.sourceX,
data, sourceY: props.sourceY,
arrowHeadType, sourcePosition: props.sourcePosition,
markerEndId targetX: props.targetX,
}) => { targetY: props.targetY,
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition }); targetPosition: props.targetPosition
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); })
const [centerX, centerY] = getEdgeCenter({ );
sourceX, const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId));
sourceY, const center = computed(() =>
targetX, getEdgeCenter({
targetY sourceX: props.sourceX,
}); sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY
})
);
return () => ( return () => (
<> <>
<path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} /> <path id={props.id} class="revue-flow__edge-path" d={edgePath.value} marker-end={markerEnd.value} />
<EdgeText <EdgeText
x={centerX} x={center.value[0]}
y={centerY} y={center.value[1]}
label={data.text} label={props.data?.text}
labelStyle={{ fill: 'white' }} labelStyle={{ fill: 'white' }}
labelShowBg labelShowBg
labelBgStyle={{ fill: 'red' }} labelBgStyle={{ fill: 'red' }}
labelBgPadding={[2, 4]} labelBgPadding={[2, 4]}
labelBgBorderRadius={2} labelBgBorderRadius={2}
onClick={() => console.log(data)} onClick={() => console.log(props.data)}
/> />
; </>
</> );
); }
}; });
export default CustomEdge; export default CustomEdge;
examples/Edges/index.tsx
+5 -7
View File
@@ -1,4 +1,4 @@
import { FunctionalComponent, ref } from 'vue'; import { ref } from 'vue';
import CustomEdge from './CustomEdge'; import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2'; import CustomEdge2 from './CustomEdge2';
import RevueFlow, { import RevueFlow, {
@@ -12,14 +12,9 @@ import RevueFlow, {
addEdge, addEdge,
Connection, Connection,
Edge, Edge,
EdgeProps,
removeElements removeElements
} from '../../src'; } 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 = [ const initialElements = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } }, { 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: '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, custom: CustomEdge,
custom2: CustomEdge2 custom2: CustomEdge2
}; };
@@ -88,6 +83,9 @@ const edgeTypes: Record<string, FunctionalComponent<EdgeProps>> = {
const EdgesFlow = () => { const EdgesFlow = () => {
const elements = ref<Elements>(initialElements as Elements); 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 onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value)); const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
src/components/Edges/utils.ts
+1 -1
View File
@@ -138,7 +138,7 @@ export const DefaultEdgeProps = {
data: { data: {
type: Object as PropType<EdgeProps['data']>, type: Object as PropType<EdgeProps['data']>,
required: false, required: false,
default: undefined default: () => ({} as any)
}, },
sourceHandleId: { sourceHandleId: {
type: String as PropType<EdgeProps['sourceHandleId']>, type: String as PropType<EdgeProps['sourceHandleId']>,