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
src/components/ConnectionLine/index.tsx
+14 -12
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>
src/components/Edges/Edge.tsx
+20 -19
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,
src/components/Edges/EdgeAnchor.tsx
+4 -5
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"
/>
src/components/Edges/SmoothStepEdge.tsx
+21 -22
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}
src/components/Edges/utils.ts
+15
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,
src/components/Handle/index.tsx
+11 -13
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() : ''}
src/components/Nodes/Node.tsx
+18 -24
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}