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

feat(example): Add edge types example (stress tests)

Browse Source 
* Remove a lot of computed functions or merge them into existing ones
*
This commit is contained in:
Braks
2021-08-16 21:17:38 +02:00
parent 15f968c607
commit 384c05240f
13 changed files with 268 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
examples/EdgeTypes/index.tsx Normal file
View File

@@ -0,0 +1,43 @@
/**
* Example for checking the different edge types and source and target positions
*/
import RevueFlow, {
removeElements,
addEdge,
MiniMap,
Controls,
Background,
OnLoadParams,
Connection,
Edge,
Elements
} from '../../src';
import { getElements } from './utils';
import { defineComponent, ref } from 'vue';
const onLoad = (reactFlowInstance: OnLoadParams) => {
reactFlowInstance.fitView();
console.log(reactFlowInstance.getElements());
};
const initialElements = getElements();
const EdgeTypesFlow = defineComponent({
setup() {
const elements = ref<Elements>(initialElements);
const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
return () => (
<RevueFlow
v-model={elements.value}
onLoad={onLoad}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
minZoom={0.2}
></RevueFlow>
);
}
});
export default EdgeTypesFlow;

106
examples/EdgeTypes/utils.ts Normal file
View File

@@ -0,0 +1,106 @@
import { ElementId, Elements, Position } from '../../src';
const nodeWidth = 80;
const nodeGapWidth = nodeWidth * 2;
const nodeStyle = { width: nodeWidth, fontSize: 11, color: 'white' };
const sourceTargetPositions = [
{ source: Position.Bottom, target: Position.Top },
{ source: Position.Right, target: Position.Left }
];
const nodeColors = [
['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'],
['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8']
];
const edgeTypes = ['default', 'step', 'smoothstep', 'straight'];
const offsets = [
{
x: 0,
y: -nodeGapWidth
},
{
x: nodeGapWidth,
y: -nodeGapWidth
},
{
x: nodeGapWidth,
y: 0
},
{
x: nodeGapWidth,
y: nodeGapWidth
},
{
x: 0,
y: nodeGapWidth
},
{
x: -nodeGapWidth,
y: nodeGapWidth
},
{
x: -nodeGapWidth,
y: 0
},
{
x: -nodeGapWidth,
y: -nodeGapWidth
}
];
let id = 0;
const getNodeId = (): ElementId => (id++).toString();
export function getElements(): Elements {
const initialElements = [];
for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
const currEdgeType = edgeTypes[edgeTypeIndex];
for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
const currOffset = offsets[offsetIndex];
const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
const sourcePosition = {
x: offsetIndex * nodeWidth * 4,
y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300
};
const sourceId = getNodeId();
const sourceData = { label: `Source ${sourceId}` };
const sourceNode = {
id: sourceId,
style,
data: sourceData,
position: sourcePosition,
sourcePosition: currSourceTargetPos.source,
targetPosition: currSourceTargetPos.target
};
const targetId = getNodeId();
const targetData = { label: `Target ${targetId}` };
const targetPosition = {
x: sourcePosition.x + currOffset.x,
y: sourcePosition.y + currOffset.y
};
const targetNode = {
id: targetId,
style,
data: targetData,
position: targetPosition,
sourcePosition: currSourceTargetPos.source,
targetPosition: currSourceTargetPos.target
};
initialElements.push(sourceNode);
initialElements.push(targetNode);
initialElements.push({ id: `${sourceId}-${targetId}`, source: sourceId, target: targetId, type: currEdgeType });
}
}
}
return initialElements as Elements;
}

4
examples/router.ts
View File

@@ -28,6 +28,10 @@ export const routes: RouterOptions['routes'] = [
{
path: '/button-edge',
component: () => import('./EdgeWithButton/EdgeWithButton.vue')
},
{
path: '/edge-types',
component: () => import('./EdgeTypes')
}
];

26
src/components/ConnectionLine/index.tsx
View File

@@ -31,7 +31,6 @@ export default defineComponent({
setup(props) {
const store = inject<RevueFlowStore>('store')!;
const sourceNode = ref<Node | null>(store.nodes.find((n) => n.id === store.connectionNodeId) || null);
const nodesConnectable = computed(() => store.nodesConnectable);
const sourceHandle = computed(() =>
store.connectionHandleId && store.connectionHandleType
@@ -40,22 +39,25 @@ export default defineComponent({
)
: store.connectionHandleType && sourceNode.value?.__rf.handleBounds[store.connectionHandleType][0]
);
const sourceHandleX = computed(() =>
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : (sourceNode.value?.__rf.width as number) / 2
const sourceX = computed(() =>
sourceNode.value?.__rf.position.x + sourceHandle.value
? sourceHandle.value.x + sourceHandle.value.width / 2
: (sourceNode.value?.__rf.width as number) / 2
);
const sourceHandleY = computed(() =>
sourceHandle.value ? sourceHandle.value.y + sourceHandle.value.height / 2 : sourceNode.value?.__rf.height
const sourceY = computed(() =>
sourceNode.value?.__rf.position.y + sourceHandle.value
? sourceHandle.value.y + sourceHandle.value.height / 2
: sourceNode.value?.__rf.height
);
const sourceX = computed(() => sourceNode.value?.__rf.position.x + sourceHandleX.value);
const sourceY = computed(() => sourceNode.value?.__rf.position.y + sourceHandleY.value);
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2]);
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2]);
const isRightOrLeft = computed(
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
const targetPosition = computed(() =>
sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
? Position.Left
: Position.Top
);
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
@@ -114,7 +116,7 @@ export default defineComponent({
}
return () =>
nodesConnectable.value && sourceNode.value ? (
store.nodesConnectable && sourceNode.value ? (
<g class="revue-flow__connection">
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
</g>

39
src/components/Edges/Edge.tsx
View File

@@ -69,17 +69,15 @@ export default defineComponent({
console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`);
}
const targetNodeBounds = computed(() => nodes.value.targetNode?.__rf.handleBounds);
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
const targetNodeHandles = () =>
props.connectionMode === ConnectionMode.Strict
? targetNodeBounds.value?.target
: targetNodeBounds.value?.target || targetNodeBounds.value?.source
);
? nodes.value.targetNode?.__rf.handleBounds.target
: nodes.value.targetNode?.__rf.handleBounds.target || nodes.value.targetNode?.__rf.handleBounds.source;
const sourceHandle = computed(
() => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf.handleBounds.source, props.edge.sourceHandle || null)
);
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null));
const targetHandle = computed(() => getHandle(targetNodeHandles(), props.edge.targetHandle || null));
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
@@ -88,16 +86,16 @@ export default defineComponent({
sourceY: number;
targetX: number;
targetY: number;
}>(() => {
return getEdgePositions(
}>(() =>
getEdgePositions(
nodes.value.sourceNode as Node,
sourceHandle.value,
sourcePosition.value,
nodes.value.targetNode as Node,
targetHandle.value,
targetPosition.value
);
});
)
);
const isVisible = computed(() => {
return props.onlyRenderVisibleElements
@@ -113,13 +111,6 @@ export default defineComponent({
});
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false);
const updating = ref<boolean>(false);
const inactive = computed(() => !store.elementsSelectable);
const edgeClasses = computed(() => [
'revue-flow__edge',
`revue-flow__edge-${props.type}`,
{ selected: isSelected.value, animated: props.edge.animated, inactive: inactive.value, updating: updating.value }
]);
const edgeElement = computed<Edge>(() => {
const el: Edge = {
@@ -192,13 +183,23 @@ export default defineComponent({
handleEdgeUpdater(event, false);
};
const updating = ref<boolean>(false);
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
const onEdgeUpdaterMouseOut = () => (updating.value = false);
return () =>
isVisible.value && edgePositions.value ? (
<g
class={edgeClasses.value}
class={[
'revue-flow__edge',
`revue-flow__edge-${props.type}`,
{
selected: isSelected.value,
animated: props.edge.animated,
inactive: !store.elementsSelectable,
updating: updating.value
}
]}
onClick={onEdgeClick}
onContextmenu={onEdgeContextMenu}
onMouseenter={onEdgeMouseEnter}
@@ -211,7 +212,7 @@ export default defineComponent({
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
selected: isSelected,
selected: isSelected.value,
animated: props.edge.animated,
label: props.edge.label,
labelStyle: props.edge.labelStyle,

9
src/components/Edges/EdgeAnchor.tsx
View File

@@ -1,5 +1,5 @@
import { Position } from '../../types';
import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
import { defineComponent, HTMLAttributes, PropType } from 'vue';
const shiftX = (x: number, shift: number, position: Position): number => {
if (position === Position.Left) return x - shift;
@@ -41,13 +41,12 @@ export default defineComponent({
}
},
setup(props) {
const radius = computed(() => props.radius || 10);
return () => (
<circle
class="revue-flow__edgeupdater"
cx={shiftX(props.centerX, radius.value, props.position)}
cy={shiftY(props.centerY, radius.value, props.position)}
r={radius.value}
cx={shiftX(props.centerX, props.radius || 10, props.position)}
cy={shiftY(props.centerY, props.radius || 10, props.position)}
r={props.radius || 10}
stroke="transparent"
fill="transparent"
/>

43
src/components/Edges/SmoothStepEdge.tsx
View File

@@ -1,8 +1,9 @@
import { computed, defineComponent } from 'vue';
import { defineComponent } from 'vue';
import EdgeText from './EdgeText';
import { getMarkerEnd, getCenter, EdgeSmoothProps } from './utils';
import { getMarkerEnd, getCenter, EdgeSmoothProps, GetCenterParams } from './utils';
import { ArrowHeadType, EdgeType, Position } from '../../types';
import { reactify } from '@vueuse/core';
import { getBezierPath } from './BezierEdge';
// These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -98,26 +99,24 @@ export default defineComponent({
...EdgeSmoothProps
},
setup(props) {
const centered = computed(() => {
const centered = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetCenterParams) => {
return getCenter({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition
sourceX: sourceX,
sourceY: sourceY,
targetX: targetX,
targetY: targetY,
sourcePosition: sourcePosition,
targetPosition: targetPosition
});
});
const path = computed(() => {
return getSmoothStepPath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
borderRadius: props.borderRadius
const path = reactify(({ sourceX, sourceY, targetX, targetY, targetPosition, sourcePosition }: GetSmoothStepPathParams) => {
return getBezierPath({
sourceX: sourceX,
sourceY: sourceY,
targetX: targetX,
targetY: targetY,
targetPosition: targetPosition,
sourcePosition: sourcePosition
});
});
@@ -128,13 +127,13 @@ export default defineComponent({
<path
class="revue-flow__edge-path"
style={props.style}
d={path.value}
d={path({ ...props }).value}
marker-end={markerEnd(props.arrowHeadType, props.markerEndId).value}
/>
{props.label ? (
<EdgeText
x={centered.value[0]}
y={centered.value[1]}
x={centered({ ...props }).value[0]}
y={centered({ ...props }).value[1]}
label={props.label}
labelStyle={props.labelStyle}
labelShowBg={props.labelShowBg}

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

@@ -70,6 +70,21 @@ export const DefaultEdgeProps = {
required: true,
default: 0
},
source: {
type: String as PropType<EdgeProps['source']>,
required: true,
default: 0
},
target: {
type: String as PropType<EdgeProps['target']>,
required: true,
default: 0
},
selected: {
type: Boolean as PropType<EdgeProps['selected']>,
required: true,
default: false
},
targetX: {
type: Number as PropType<EdgeProps['targetX']>,
required: true,

24
src/components/Handle/index.tsx
View File

@@ -1,6 +1,6 @@
import { ElementId, Position, RevueFlowStore } from '../../types';
import { onMouseDown, ValidConnectionFunc } from './handler';
import { computed, defineComponent, inject, PropType } from 'vue';
import { defineComponent, inject, PropType } from 'vue';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
const alwaysValid = () => true;
@@ -41,23 +41,21 @@ export default defineComponent({
const onMouseDownHandler = (event: MouseEvent) =>
onMouseDown(event, store, hooks, props.id as string, nodeId, props.type === 'target', props.isValidConnection);
const handleClasses = computed(() => [
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: props.type !== 'target',
target: props.type === 'target',
connectable: props.isConnectable
}
]);
return () => (
<div
data-handleid={props.id}
data-nodeid={nodeId}
data-handlepos={props.position}
class={handleClasses.value}
class={[
'revue-flow__handle',
`revue-flow__handle-${props.position}`,
'nodrag',
{
source: props.type !== 'target',
target: props.type === 'target',
connectable: props.isConnectable
}
]}
onMousedown={onMouseDownHandler}
>
{slots.default ? slots.default() : ''}

42
src/components/Nodes/Node.tsx
View File

@@ -1,4 +1,4 @@
import { computed, CSSProperties, defineComponent, h, inject, PropType, provide } from 'vue';
import { computed, defineComponent, h, inject, PropType, provide } from 'vue';
import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
import { Node, NodeDimensionUpdate, NodeType, RevueFlowStore } from '../../types';
@@ -46,7 +46,6 @@ export default defineComponent({
const nodeElement = templateRef<HTMLDivElement>('nodeElement', null);
const selected = computed(() => store.selectedElements?.some(({ id }) => id === props.node.id) || false);
const transform = computed(() => store.transform);
const isDraggable = computed(
() => props.node.draggable || (store.nodesDraggable && typeof props.node.draggable === 'undefined')
);
@@ -66,16 +65,7 @@ export default defineComponent({
data: props.node.data
} as Node)
);
const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
const initialized = computed(() => props.node.__rf.width !== null && props.node.__rf.height !== null);
const nodeStyle = computed<CSSProperties>(() => ({
zIndex: selected.value ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
opacity: initialized.value ? 1 : 0,
...props.node.style
}));
const onMouseEnterHandler = () => {
if (props.node.__rf.isDragging) {
return;
@@ -188,21 +178,12 @@ export default defineComponent({
]);
});
const nodeClasses = computed(() => [
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
{
selected: selected.value,
selectable: isSelectable.value
}
]);
return () => (
<DraggableCore
cancel=".nodrag"
scale={transform.value[2]}
scale={store.transform[2]}
disabled={!isDraggable.value}
grid={grid.value}
grid={props.snapGrid}
enableUserSelectHack={false}
onStart={onDragStart}
onMove={onDrag}
@@ -210,8 +191,21 @@ export default defineComponent({
>
<div
ref="nodeElement"
class={nodeClasses.value}
style={nodeStyle.value}
class={[
'revue-flow__node',
`revue-flow__node-${props.node.type}`,
{
selected: selected.value,
selectable: isSelectable.value
}
]}
style={{
zIndex: selected.value ? 10 : 3,
transform: `translate(${props.node.__rf.position.x}px,${props.node.__rf.position.y}px)`,
pointerEvents: isSelectable.value || isDraggable.value ? 'all' : 'none',
opacity: props.node.__rf.width !== null && props.node.__rf.height !== null ? 1 : 0,
...props.node.style
}}
data-id={props.node.id}
onMouseenter={onMouseEnterHandler}
onMousemove={onMouseMoveHandler}

12
src/container/EdgeRenderer/index.tsx
View File

@@ -70,18 +70,18 @@ export default defineComponent({
}
},
setup(props) {
const store = inject<RevueFlowStore>('store');
const transform = computed(() => store?.transform);
const store = inject<RevueFlowStore>('store')!;
const transformStyle = computed(() => {
return `translate(${transform.value?.[0]},${transform.value?.[1]}) scale(${transform.value?.[2]})`;
return `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`;
});
const renderConnectionLine = computed(() => store?.connectionNodeId && store?.connectionHandleType);
const renderConnectionLine = computed(() => store.connectionNodeId && store.connectionHandleType);
return () => (
<svg width={store?.width} height={store?.height} class="revue-flow__edges">
<svg width={store.width} height={store.height} class="revue-flow__edges">
<MarkerDefinitions color={props.arrowHeadColor as string} />
<g transform={transformStyle.value}>
{store?.edges.map((edge) => (
{store.edges.map((edge) => (
<Edge
key={edge.id}
edge={edge}

5
src/container/GraphView/index.tsx
View File

@@ -1,4 +1,4 @@
import { defineComponent, inject, PropType, watchEffect } from 'vue';
import { defineComponent, inject, PropType } from 'vue';
import FlowRenderer from '../FlowRenderer';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
@@ -6,6 +6,7 @@ import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/gr
import { GraphViewProps, RevueFlowStore } from '../../types';
import useZoomPanHelper from '../../hooks/useZoomPanHelper';
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
import { tryOnMounted } from '@vueuse/core';
export default defineComponent({
name: 'GraphView',
@@ -233,7 +234,7 @@ export default defineComponent({
}
};
watchEffect(() => {
tryOnMounted(() => {
init();
});

9
src/container/RevueFlow/index.tsx
View File

@@ -1,5 +1,5 @@
import { defineComponent, onBeforeUnmount, onUpdated, PropType, provide, watch } from 'vue';
import { reactify, useVModel } from '@vueuse/core';
import { useVModel } from '@vueuse/core';
import '../../style.css';
import '../../theme-default.css';
import GraphView from '../GraphView';
@@ -240,14 +240,11 @@ export default defineComponent({
store.setElements([]);
});
const nodeTypesParsed = reactify(() => createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes }));
const edgeTypesParsed = reactify(() => createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes }));
return () => (
<div class="revue-flow">
<GraphView
nodeTypes={nodeTypesParsed().value}
edgeTypes={edgeTypesParsed().value}
nodeTypes={createNodeTypes({ ...defaultNodeTypes, ...props.nodeTypes })}
edgeTypes={createEdgeTypes({ ...defaultEdgeTypes, ...props.edgeTypes })}
connectionMode={props.connectionMode}
connectionLineType={props.connectionLineType}
connectionLineStyle={props.connectionLineStyle}