update: Remove wrapEdge and wrapNode files
* implement Edge.tsx and Node.vue to wrap the components accordingly refactor!: Removing callbacks from props in favor of events chore: upgrade vue and vite vue plugin
This commit is contained in:
Braks
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<g v-show="sourceNode && nodesConnectable" class="revue-flow__connection">
|
||||
<g v-if="CustomConnectionLineComponent" class="revue-flow__connection">
|
||||
<component
|
||||
:is="CustomConnectionLineComponent"
|
||||
:sourceX="sourceX"
|
||||
:sourceY="sourceY"
|
||||
:sourcePosition="sourceHandle.position"
|
||||
:targetX="targetX"
|
||||
:targetY="targetY"
|
||||
:targetPosition="targetPosition"
|
||||
:connectionLineType="connectionLineType"
|
||||
:connectionLineStyle="connectionLineStyle"
|
||||
/>
|
||||
</g>
|
||||
<path v-else class="revue-flow__connection-path" :d="dAttr" :style="connectionLineStyle" />
|
||||
</g>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed, inject } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import { Node, HandleElement, Position, ConnectionLineType, ConnectionLineComponent, RevueFlowStore } from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionLineType: ConnectionLineType;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => {}
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
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
|
||||
? sourceNode.value?.__rf.handleBounds[store.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === store.connectionHandleId
|
||||
)
|
||||
: 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 sourceHandleY = computed(() =>
|
||||
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(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
dAttr,
|
||||
targetX,
|
||||
targetY,
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourceHandle,
|
||||
sourceNode,
|
||||
sourceHandleX,
|
||||
sourceHandleY,
|
||||
nodesConnectable
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
</script>
|
||||
@@ -1,181 +0,0 @@
|
||||
import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
|
||||
|
||||
import { getBezierPath } from '../Edges/BezierEdge';
|
||||
import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
|
||||
import {
|
||||
ElementId,
|
||||
Node,
|
||||
Transform,
|
||||
HandleElement,
|
||||
Position,
|
||||
ConnectionLineType,
|
||||
ConnectionLineComponent,
|
||||
HandleType
|
||||
} from '../../types';
|
||||
|
||||
interface ConnectionLineProps {
|
||||
connectionNodeId: ElementId;
|
||||
connectionHandleId: ElementId | null;
|
||||
connectionHandleType: HandleType;
|
||||
connectionPositionX: number;
|
||||
connectionPositionY: number;
|
||||
connectionLineType: ConnectionLineType;
|
||||
nodes: Node[];
|
||||
transform: Transform;
|
||||
isConnectable: boolean;
|
||||
connectionLineStyle?: CSSProperties;
|
||||
CustomConnectionLineComponent?: ConnectionLineComponent;
|
||||
}
|
||||
|
||||
const ConnectionLine = defineComponent({
|
||||
props: {
|
||||
connectionNodeId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionNodeId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleId: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleId']>,
|
||||
required: true
|
||||
},
|
||||
connectionHandleType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionHandleType']>,
|
||||
required: true
|
||||
},
|
||||
connectionLineStyle: {
|
||||
type: Object as PropType<ConnectionLineProps['connectionLineStyle']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
connectionPositionX: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionX']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionPositionY: {
|
||||
type: Number as PropType<ConnectionLineProps['connectionPositionY']>,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
connectionLineType: {
|
||||
type: String as PropType<ConnectionLineProps['connectionLineType']>,
|
||||
required: false,
|
||||
default: ConnectionLineType.Bezier
|
||||
},
|
||||
nodes: {
|
||||
type: Array as PropType<ConnectionLineProps['nodes']>,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
transform: {
|
||||
type: Object as PropType<ConnectionLineProps['transform']>,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean as PropType<ConnectionLineProps['isConnectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
CustomConnectionLineComponent: {
|
||||
type: Object as PropType<ConnectionLineProps['CustomConnectionLineComponent']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const sourceNode = ref<Node | null>(props.nodes.find((n) => n.id === props.connectionNodeId) || null);
|
||||
|
||||
if (!sourceNode.value || !props.isConnectable) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sourceHandle = computed(() =>
|
||||
props.connectionHandleId
|
||||
? sourceNode.value?.__rf.handleBounds[props.connectionHandleType].find(
|
||||
(d: HandleElement) => d.id === props.connectionHandleId
|
||||
)
|
||||
: sourceNode.value?.__rf.handleBounds[props.connectionHandleType][0]
|
||||
);
|
||||
const sourceHandleX = computed(() =>
|
||||
sourceHandle.value ? sourceHandle.value.x + sourceHandle.value.width / 2 : sourceNode.value?.__rf.width / 2
|
||||
);
|
||||
const sourceHandleY = computed(() =>
|
||||
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(() => (props.connectionPositionX - props.transform[0]) / props.transform[2]);
|
||||
const targetY = computed(() => (props.connectionPositionY - props.transform[1]) / props.transform[2]);
|
||||
|
||||
const isRightOrLeft = computed(
|
||||
() => sourceHandle.value?.position === Position.Left || sourceHandle.value?.position === Position.Right
|
||||
);
|
||||
const targetPosition = computed(() => (isRightOrLeft.value ? Position.Left : Position.Top));
|
||||
|
||||
if (props.CustomConnectionLineComponent) {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const ConnectionLineComponent: any = props.CustomConnectionLineComponent;
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<ConnectionLineComponent
|
||||
sourceX={sourceX.value}
|
||||
sourceY={sourceY.value}
|
||||
sourcePosition={sourceHandle.value?.position}
|
||||
targetX={targetX.value}
|
||||
targetY={targetY.value}
|
||||
targetPosition={targetPosition.value}
|
||||
connectionLineType={props.connectionLineType}
|
||||
connectionLineStyle={props.connectionLineStyle}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`);
|
||||
|
||||
if (props.connectionLineType === ConnectionLineType.Bezier) {
|
||||
dAttr = computed(() =>
|
||||
getBezierPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.Step) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value,
|
||||
borderRadius: 0
|
||||
})
|
||||
);
|
||||
} else if (props.connectionLineType === ConnectionLineType.SmoothStep) {
|
||||
dAttr = computed(() =>
|
||||
getSmoothStepPath({
|
||||
sourceX: sourceX.value,
|
||||
sourceY: sourceY.value,
|
||||
sourcePosition: sourceHandle.value?.position,
|
||||
targetX: targetX.value,
|
||||
targetY: targetY.value,
|
||||
targetPosition: targetPosition.value
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return () => (
|
||||
<g class="revue-flow__connection">
|
||||
<path d={dAttr.value} class="revue-flow__connection-path" style={props.connectionLineStyle} />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default ConnectionLine;
|
||||
@@ -46,44 +46,46 @@ export function getBezierPath({
|
||||
}
|
||||
|
||||
const BezierEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
sourceX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
sourceY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
targetX: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
targetY: {
|
||||
type: Number,
|
||||
required: true,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String as PropType<Position>,
|
||||
required: true,
|
||||
required: false,
|
||||
default: Position.Bottom
|
||||
},
|
||||
targetPosition: {
|
||||
type: String as PropType<Position>,
|
||||
required: true,
|
||||
required: false,
|
||||
default: Position.Top
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object,
|
||||
required: true,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelShowBg: {
|
||||
@@ -93,7 +95,8 @@ const BezierEdge = defineComponent({
|
||||
},
|
||||
labelBgStyle: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgPadding: {
|
||||
type: Array as unknown as PropType<[number, number]>,
|
||||
@@ -106,12 +109,14 @@ const BezierEdge = defineComponent({
|
||||
default: 0
|
||||
},
|
||||
arrowHeadType: {
|
||||
type: Object as PropType<ArrowHeadType>,
|
||||
required: true
|
||||
type: String as PropType<ArrowHeadType>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
markerEndId: {
|
||||
type: String,
|
||||
required: true
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<CSSProperties>,
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<g
|
||||
:class="edgeClasses"
|
||||
@click="onEdgeClick"
|
||||
@contextmenu="onEdgeContextMenu"
|
||||
@mouseenter="onEdgeMouseEnter"
|
||||
@mousemove="onEdgeMouseMove"
|
||||
@mouseleave="onEdgeMouseLeave"
|
||||
>
|
||||
<component
|
||||
:is="type"
|
||||
:id="edge.id"
|
||||
:source="edge.source"
|
||||
:target="edge.target"
|
||||
:selected="isSelected"
|
||||
:animated="edge.animated"
|
||||
:label="edge.label"
|
||||
:label-style="edge.labelStyle"
|
||||
:label-show-bg="edge.labelShowBg"
|
||||
:label-bg-style="edge.labelBgStyle"
|
||||
:label-bg-padding="edge.labelBgPadding"
|
||||
:label-bg-borderRadius="edge.labelBgBorderRadius"
|
||||
:data="edge.data"
|
||||
:style="edge.style"
|
||||
:arrow-head-type="edge.arrowHeadType"
|
||||
:source-x="edgePositions.sourceX"
|
||||
:source-y="edgePositions.sourceY"
|
||||
:target-x="edgePositions.targetX"
|
||||
:target-y="edgePositions.targetY"
|
||||
:source-position="sourcePosition"
|
||||
:target-position="targetPosition"
|
||||
:marker-end-id="markerEndId"
|
||||
:source-handle-id="edge.sourceHandle"
|
||||
:target-handle-id="edge.targetHandle"
|
||||
/>
|
||||
<g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
||||
<EdgeAnchor
|
||||
:position="sourcePosition"
|
||||
:center-x="edgePositions.sourceX"
|
||||
:center-y="edgePositions.sourceY"
|
||||
:radius="edgeUpdaterRadius"
|
||||
/>
|
||||
</g>
|
||||
<g @mousedown="onEdgeUpdaterTargetMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
|
||||
<EdgeAnchor
|
||||
:position="sourcePosition"
|
||||
:center-x="edgePositions.sourceX"
|
||||
:center-y="edgePositions.sourceY"
|
||||
:radius="edgeUpdaterRadius"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { EdgeAnchor } from './EdgeAnchor';
|
||||
import { ConnectionMode, Edge, Elements, Node, Position, RevueFlowStore, Transform } from '../../types';
|
||||
import { computed, defineComponent, inject, PropType, ref } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils';
|
||||
import { isEdge } from '../../utils/graph';
|
||||
import { onMouseDown } from '../Handle/handler';
|
||||
|
||||
interface EdgeProps {
|
||||
edge: Edge;
|
||||
nodes: Node[];
|
||||
selectedElements: Elements | null;
|
||||
elementsSelectable: boolean;
|
||||
transform: Transform;
|
||||
width: number;
|
||||
height: number;
|
||||
onlyRenderVisibleElements: boolean;
|
||||
connectionMode?: ConnectionMode;
|
||||
markerEndId?: string;
|
||||
edgeUpdaterRadius?: number;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { EdgeAnchor },
|
||||
props: {
|
||||
edge: {
|
||||
type: Object as PropType<EdgeProps['edge']>,
|
||||
required: true
|
||||
},
|
||||
markerEndId: {
|
||||
type: Object as PropType<EdgeProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<EdgeProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
type: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
onlyRenderVisibleElements: {
|
||||
type: Boolean as PropType<EdgeProps['onlyRenderVisibleElements']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
connectionMode: {
|
||||
type: String as PropType<EdgeProps['connectionMode']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodes = computed(() => getSourceTargetNodes(props.edge, store.nodes));
|
||||
|
||||
hooks.connect.on((connection) => {
|
||||
hooks.edgeUpdate.trigger({ edge: props.edge, connection });
|
||||
});
|
||||
|
||||
if (!nodes.value.sourceNode) {
|
||||
console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`);
|
||||
}
|
||||
|
||||
if (!nodes.value.targetNode) {
|
||||
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(() =>
|
||||
props.connectionMode === ConnectionMode.Strict
|
||||
? targetNodeBounds.value?.target
|
||||
: targetNodeBounds.value?.target || targetNodeBounds.value?.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 sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom));
|
||||
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top));
|
||||
|
||||
const edgePositions = computed<{
|
||||
sourceX: number;
|
||||
sourceY: number;
|
||||
targetX: number;
|
||||
targetY: number;
|
||||
}>(() => {
|
||||
return (
|
||||
nodes.value.sourceNode &&
|
||||
nodes.value.targetNode &&
|
||||
getEdgePositions(
|
||||
nodes.value.sourceNode,
|
||||
sourceHandle.value,
|
||||
sourcePosition.value,
|
||||
nodes.value.targetNode,
|
||||
targetHandle.value,
|
||||
targetPosition.value
|
||||
) || {}
|
||||
);
|
||||
});
|
||||
|
||||
const isVisible = computed(() => {
|
||||
return props.onlyRenderVisibleElements
|
||||
? edgePositions.value &&
|
||||
isEdgeVisible({
|
||||
sourcePos: { x: edgePositions.value?.sourceX, y: edgePositions.value?.sourceY },
|
||||
targetPos: { x: edgePositions.value?.targetX, y: edgePositions.value?.targetY },
|
||||
width: store.width || 0,
|
||||
height: store.height || 0,
|
||||
transform: store.transform
|
||||
})
|
||||
: true;
|
||||
});
|
||||
|
||||
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 = {
|
||||
id: props.edge.id || '',
|
||||
source: props.edge.source,
|
||||
target: props.edge.target,
|
||||
type: props.edge.type
|
||||
};
|
||||
|
||||
if (props.edge.sourceHandle) {
|
||||
el.sourceHandle = props.edge.sourceHandle;
|
||||
}
|
||||
|
||||
if (props.edge.targetHandle) {
|
||||
el.targetHandle = props.edge.targetHandle;
|
||||
}
|
||||
|
||||
if (typeof props.edge.data !== 'undefined') {
|
||||
el.data = props.edge.data;
|
||||
}
|
||||
|
||||
return el;
|
||||
});
|
||||
|
||||
const onEdgeClick = (event: MouseEvent) => {
|
||||
if (store.elementsSelectable) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements(edgeElement.value as any);
|
||||
}
|
||||
|
||||
hooks.edgeClick.trigger({ event, edge: edgeElement.value });
|
||||
};
|
||||
|
||||
const onEdgeContextMenu = (event: MouseEvent) =>
|
||||
hooks.edgeContextMenu.trigger({
|
||||
event,
|
||||
edge: edgeElement.value
|
||||
});
|
||||
|
||||
const onEdgeMouseEnter = (event: MouseEvent) => hooks.edgeMouseEnter.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: edgeElement.value });
|
||||
|
||||
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
|
||||
const nodeId = isSourceHandle ? props.edge.target : props.edge.source;
|
||||
const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle;
|
||||
const isValidConnection = () => true;
|
||||
const isTarget = isSourceHandle;
|
||||
|
||||
hooks.edgeUpdateStart.trigger({ event, edge: edgeElement.value });
|
||||
onMouseDown(
|
||||
event,
|
||||
store,
|
||||
hooks,
|
||||
handleId as string,
|
||||
nodeId,
|
||||
isTarget,
|
||||
isValidConnection,
|
||||
isSourceHandle ? 'target' : 'source'
|
||||
);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, true);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, false);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
|
||||
const onEdgeUpdaterMouseOut = () => (updating.value = false);
|
||||
|
||||
return {
|
||||
isSelected,
|
||||
isVisible,
|
||||
edgePositions,
|
||||
sourceHandle,
|
||||
targetHandle,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
edgeClasses,
|
||||
onEdgeClick,
|
||||
onEdgeMouseEnter,
|
||||
onEdgeMouseMove,
|
||||
onEdgeMouseLeave,
|
||||
onEdgeUpdaterSourceMouseDown,
|
||||
onEdgeUpdaterTargetMouseDown,
|
||||
onEdgeUpdaterMouseEnter,
|
||||
onEdgeUpdaterMouseOut,
|
||||
onEdgeContextMenu
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -93,6 +93,7 @@ export function getSmoothStepPath({
|
||||
}
|
||||
|
||||
const SmoothStepEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: EdgeSmoothStepProps,
|
||||
setup(props) {
|
||||
const [centerX, centerY] = getCenter({
|
||||
|
||||
@@ -4,6 +4,7 @@ import { EdgeSmoothStepProps } from '../../types';
|
||||
import SmoothStepEdge from './SmoothStepEdge';
|
||||
|
||||
const StepEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
components: { SmoothStepEdge },
|
||||
props: EdgeSmoothStepProps,
|
||||
setup(props) {
|
||||
|
||||
@@ -5,6 +5,7 @@ import { getMarkerEnd } from './utils';
|
||||
import { EdgeProps } from '../../types';
|
||||
|
||||
const StraightEdge = defineComponent({
|
||||
inheritAttrs: false,
|
||||
props: EdgeProps,
|
||||
setup(props) {
|
||||
const yOffset = Math.abs(props.targetY - props.sourceY) / 2;
|
||||
|
||||
@@ -1,355 +0,0 @@
|
||||
import { computed, DefineComponent, defineComponent, inject, PropType, ref } from 'vue';
|
||||
import { Edge, Position, RevueFlowStore, WrapEdgeProps } from '../../types';
|
||||
import { onMouseDown } from '../Handle/handler';
|
||||
import { EdgeAnchor } from './EdgeAnchor';
|
||||
|
||||
export default (EdgeComponent: DefineComponent<WrapEdgeProps>) => {
|
||||
return defineComponent({
|
||||
components: { EdgeComponent },
|
||||
props: {
|
||||
id: {
|
||||
type: String as PropType<WrapEdgeProps['id']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<WrapEdgeProps['type']>,
|
||||
required: true
|
||||
},
|
||||
data: {
|
||||
type: String as PropType<WrapEdgeProps['data']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onClick: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeDoubleClick: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeDoubleClick']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selected: {
|
||||
type: Boolean as PropType<WrapEdgeProps['selected']>,
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
animated: {
|
||||
type: Boolean as PropType<WrapEdgeProps['animated']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: Object as PropType<WrapEdgeProps['label']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelStyle: {
|
||||
type: Object as PropType<WrapEdgeProps['labelStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelShowBg: {
|
||||
type: Boolean as PropType<WrapEdgeProps['labelShowBg']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
labelBgStyle: {
|
||||
type: Object as PropType<WrapEdgeProps['labelBgStyle']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgPadding: {
|
||||
type: Array as unknown as PropType<WrapEdgeProps['labelBgPadding']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
labelBgBorderRadius: {
|
||||
type: Number as PropType<WrapEdgeProps['labelBgBorderRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
style: {
|
||||
type: Object as PropType<WrapEdgeProps['style']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
arrowHeadType: {
|
||||
type: String as PropType<WrapEdgeProps['arrowHeadType']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
source: {
|
||||
type: String as PropType<WrapEdgeProps['source']>,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: String as PropType<WrapEdgeProps['target']>,
|
||||
required: true
|
||||
},
|
||||
sourceHandleId: {
|
||||
type: String as PropType<WrapEdgeProps['sourceHandleId']>,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
targetHandleId: {
|
||||
type: String as PropType<WrapEdgeProps['targetHandleId']>,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
sourceX: {
|
||||
type: Number as PropType<WrapEdgeProps['sourceX']>,
|
||||
required: true
|
||||
},
|
||||
sourceY: {
|
||||
type: Number as PropType<WrapEdgeProps['sourceY']>,
|
||||
required: true
|
||||
},
|
||||
targetX: {
|
||||
type: Number as PropType<WrapEdgeProps['targetX']>,
|
||||
required: true
|
||||
},
|
||||
targetY: {
|
||||
type: Number as PropType<WrapEdgeProps['targetY']>,
|
||||
required: true
|
||||
},
|
||||
sourcePosition: {
|
||||
type: String as PropType<WrapEdgeProps['sourcePosition']>,
|
||||
required: true
|
||||
},
|
||||
targetPosition: {
|
||||
type: String as PropType<WrapEdgeProps['targetPosition']>,
|
||||
required: true
|
||||
},
|
||||
elementsSelectable: {
|
||||
type: Boolean as PropType<WrapEdgeProps['elementsSelectable']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
markerEndId: {
|
||||
type: String as PropType<WrapEdgeProps['markerEndId']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
isHidden: {
|
||||
type: Boolean as PropType<WrapEdgeProps['isHidden']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
handleEdgeUpdate: {
|
||||
type: Boolean as PropType<WrapEdgeProps['handleEdgeUpdate']>,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
onConnectEdge: {
|
||||
type: Function as PropType<WrapEdgeProps['onConnectEdge']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onContextMenu: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onContextMenu']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseEnter: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseEnter']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseMove: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseMove']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onMouseLeave: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onMouseLeave']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
edgeUpdaterRadius: {
|
||||
type: Number as PropType<WrapEdgeProps['edgeUpdaterRadius']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateStart: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateStart']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
onEdgeUpdateEnd: {
|
||||
type: Function as unknown as PropType<WrapEdgeProps['onEdgeUpdateEnd']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const updating = ref<boolean>(false);
|
||||
const inactive = computed(() => !props.elementsSelectable && !props.onClick);
|
||||
const edgeClasses = computed(() => [
|
||||
'revue-flow__edge',
|
||||
`revue-flow__edge-${props.type}`,
|
||||
{ selected: props.selected, animated: props.animated, inactive, updating: updating.value }
|
||||
]);
|
||||
|
||||
const edgeElement = computed<Edge>(() => {
|
||||
const el: Edge = {
|
||||
id: props.id as string,
|
||||
source: props.source,
|
||||
target: props.target,
|
||||
type: props.type
|
||||
};
|
||||
|
||||
if (props.sourceHandleId) {
|
||||
el.sourceHandle = props.sourceHandleId;
|
||||
}
|
||||
|
||||
if (props.targetHandleId) {
|
||||
el.targetHandle = props.targetHandleId;
|
||||
}
|
||||
|
||||
if (typeof props.data !== 'undefined') {
|
||||
el.data = props.data;
|
||||
}
|
||||
|
||||
return el;
|
||||
});
|
||||
|
||||
const onEdgeClick = (event: MouseEvent) => {
|
||||
if (props.elementsSelectable) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements(edgeElement.value as any);
|
||||
}
|
||||
|
||||
if (typeof props.onClick === 'function') props.onClick(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeContextMenu = (event: MouseEvent) => {
|
||||
if (typeof props.onContextMenu === 'function') props.onContextMenu(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseEnter = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseEnter === 'function') props.onMouseEnter(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseMove = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseMove === 'function') props.onMouseMove(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const onEdgeMouseLeave = (event: MouseEvent) => {
|
||||
if (typeof props.onMouseLeave === 'function') props.onMouseLeave(event, edgeElement.value);
|
||||
};
|
||||
|
||||
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
|
||||
const nodeId = isSourceHandle ? props.target : props.source;
|
||||
const handleId = isSourceHandle ? props.targetHandleId : props.sourceHandleId;
|
||||
const isValidConnection = () => true;
|
||||
const isTarget = isSourceHandle;
|
||||
|
||||
props.onEdgeUpdateStart?.(event, edgeElement.value);
|
||||
|
||||
const _onEdgeUpdate = props.onEdgeUpdateEnd
|
||||
? (evt: MouseEvent) => {
|
||||
if (props.onEdgeUpdateEnd) props.onEdgeUpdateEnd(evt, edgeElement.value);
|
||||
}
|
||||
: undefined;
|
||||
|
||||
onMouseDown(
|
||||
event,
|
||||
handleId,
|
||||
nodeId,
|
||||
store.setConnectionNodeId,
|
||||
store.setConnectionPosition,
|
||||
props.onConnectEdge as any,
|
||||
isTarget,
|
||||
isValidConnection,
|
||||
store.connectionMode,
|
||||
isSourceHandle ? 'target' : 'source',
|
||||
_onEdgeUpdate
|
||||
);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, true);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
|
||||
handleEdgeUpdater(event, false);
|
||||
};
|
||||
|
||||
const onEdgeUpdaterMouseEnter = () => (updating.value = true);
|
||||
const onEdgeUpdaterMouseOut = () => (updating.value = false);
|
||||
|
||||
if (props.isHidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return () => (
|
||||
<g
|
||||
class={edgeClasses.value}
|
||||
onClick={onEdgeClick}
|
||||
onContextmenu={onEdgeContextMenu}
|
||||
onMouseenter={onEdgeMouseEnter}
|
||||
onMousemove={onEdgeMouseMove}
|
||||
onMouseleave={onEdgeMouseLeave}
|
||||
>
|
||||
<EdgeComponent
|
||||
id={props.id}
|
||||
source={props.source}
|
||||
target={props.target}
|
||||
selected={props.selected}
|
||||
animated={props.animated}
|
||||
label={props.label}
|
||||
labelStyle={props.labelStyle}
|
||||
labelShowBg={props.labelShowBg}
|
||||
labelBgStyle={props.labelBgStyle}
|
||||
labelBgPadding={props.labelBgPadding}
|
||||
labelBgBorderRadius={props.labelBgBorderRadius}
|
||||
data={props.data}
|
||||
style={props.style}
|
||||
arrowHeadType={props.arrowHeadType}
|
||||
sourceX={props.sourceX}
|
||||
sourceY={props.sourceY}
|
||||
targetX={props.targetX}
|
||||
targetY={props.targetY}
|
||||
sourcePosition={props.sourcePosition}
|
||||
targetPosition={props.targetPosition}
|
||||
markerEndId={props.markerEndId}
|
||||
sourceHandleId={props.sourceHandleId}
|
||||
targetHandleId={props.targetHandleId}
|
||||
/>
|
||||
{props.handleEdgeUpdate && (
|
||||
<g
|
||||
onMousedown={onEdgeUpdaterSourceMouseDown}
|
||||
onMouseenter={onEdgeUpdaterMouseEnter}
|
||||
onMouseout={onEdgeUpdaterMouseOut}
|
||||
>
|
||||
<EdgeAnchor
|
||||
position={props.sourcePosition as Position}
|
||||
centerX={props.sourceX as number}
|
||||
centerY={props.sourceY as number}
|
||||
radius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
{props.handleEdgeUpdate && (
|
||||
<g
|
||||
onMousedown={onEdgeUpdaterTargetMouseDown}
|
||||
onMouseenter={onEdgeUpdaterMouseEnter}
|
||||
onMouseout={onEdgeUpdaterMouseOut}
|
||||
>
|
||||
<EdgeAnchor
|
||||
position={props.sourcePosition as Position}
|
||||
centerX={props.sourceX as number}
|
||||
centerY={props.sourceY as number}
|
||||
radius={props.edgeUpdaterRadius}
|
||||
/>
|
||||
</g>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,70 @@
|
||||
import { ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { onMouseDown, ValidConnectionFunc } from './handler';
|
||||
import { computed, defineComponent, h, inject, PropType } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
const alwaysValid = () => true;
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'source'
|
||||
},
|
||||
position: {
|
||||
type: String as PropType<Position>,
|
||||
required: false,
|
||||
default: Position.Top
|
||||
},
|
||||
isValidConnection: {
|
||||
type: Function as PropType<ValidConnectionFunc>,
|
||||
required: false,
|
||||
default: alwaysValid
|
||||
},
|
||||
isConnectable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
|
||||
const isTarget = computed(() => props.type === 'target');
|
||||
|
||||
const onMouseDownHandler = (event: MouseEvent) => {
|
||||
onMouseDown(event, store, hooks, props.id || '', nodeId, isTarget.value, props.isValidConnection);
|
||||
};
|
||||
|
||||
const handleClasses = computed(() => [
|
||||
'revue-flow__handle',
|
||||
`revue-flow__handle-${props.position}`,
|
||||
'nodrag',
|
||||
{
|
||||
source: !isTarget.value,
|
||||
target: isTarget.value,
|
||||
connectable: props.isConnectable
|
||||
}
|
||||
]);
|
||||
|
||||
return () =>
|
||||
h(
|
||||
'div',
|
||||
{
|
||||
dataHandleid: props.id,
|
||||
dataNodeid: nodeId,
|
||||
dataHandlepos: props.position,
|
||||
class: handleClasses.value,
|
||||
onMouseDown: onMouseDownHandler
|
||||
},
|
||||
slots.default?.()
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -1,15 +1,5 @@
|
||||
import { getHostForElement } from '../../utils';
|
||||
|
||||
import {
|
||||
ElementId,
|
||||
XYPosition,
|
||||
OnConnectFunc,
|
||||
ConnectionMode,
|
||||
SetConnectionId,
|
||||
Connection,
|
||||
HandleType,
|
||||
RevueFlowStore
|
||||
} from '../../types';
|
||||
import { ElementId, XYPosition, ConnectionMode, SetConnectionId, Connection, HandleType, RevueFlowStore } from '../../types';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
export type ValidConnectionFunc = (connection: Connection) => boolean;
|
||||
@@ -89,14 +79,14 @@ export function onMouseDown(
|
||||
connectStart: RevueFlowHooks['connectStart'];
|
||||
connectStop: RevueFlowHooks['connectStop'];
|
||||
connectEnd: RevueFlowHooks['connectEnd'];
|
||||
connect: RevueFlowHooks['connect'];
|
||||
edgeUpdateEnd: RevueFlowHooks['edgeUpdateEnd'];
|
||||
},
|
||||
handleId: ElementId | null,
|
||||
nodeId: ElementId,
|
||||
onConnect: OnConnectFunc,
|
||||
isTarget: boolean,
|
||||
isValidConnection: ValidConnectionFunc,
|
||||
elementEdgeUpdaterType?: HandleType,
|
||||
onEdgeUpdateEnd?: (evt: MouseEvent) => void
|
||||
elementEdgeUpdaterType?: HandleType
|
||||
): void {
|
||||
const revueFlowNode = (event.target as Element).closest('.revue-flow');
|
||||
// when revue-flow is used inside a shadow root we can't use document
|
||||
@@ -169,13 +159,13 @@ export function onMouseDown(
|
||||
hooks.connectStop.trigger(event);
|
||||
|
||||
if (isValid) {
|
||||
onConnect?.(connection);
|
||||
hooks.connect.trigger(connection);
|
||||
}
|
||||
|
||||
hooks.connectEnd.trigger(event);
|
||||
|
||||
if (elementEdgeUpdaterType && onEdgeUpdateEnd) {
|
||||
onEdgeUpdateEnd(event);
|
||||
if (elementEdgeUpdaterType) {
|
||||
hooks.edgeUpdateEnd.trigger({ event } as any);
|
||||
}
|
||||
|
||||
resetRecentHandle(recentHoveredHandle);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Connection, ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { ElementId, Position, RevueFlowStore } from '../../types';
|
||||
import { onMouseDown, ValidConnectionFunc } from './handler';
|
||||
import { computed, defineComponent, inject, PropType } from 'vue';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
@@ -43,26 +43,10 @@ const Handle = defineComponent({
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
const nodeId = inject<ElementId>('NodeIdContext') as ElementId;
|
||||
const isTarget = computed(() => props.type === 'target');
|
||||
const onConnect = computed(() => store.onConnect);
|
||||
|
||||
const onConnectExtended = (params: Connection) => {
|
||||
onConnect.value?.(params);
|
||||
props.onConnect?.(params);
|
||||
};
|
||||
|
||||
const onMouseDownHandler = (event: MouseEvent) => {
|
||||
onMouseDown(
|
||||
event,
|
||||
store,
|
||||
hooks,
|
||||
props.id as string,
|
||||
nodeId,
|
||||
onConnectExtended,
|
||||
isTarget.value,
|
||||
props.isValidConnection,
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
console.log('mousedown');
|
||||
onMouseDown(event, store, hooks, props.id as string, nodeId, isTarget.value, props.isValidConnection);
|
||||
};
|
||||
|
||||
const handleClasses = computed(() => [
|
||||
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const DefaultNode = defineComponent({
|
||||
name: 'DefaultNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -29,11 +30,11 @@ const DefaultNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
<Handle type="target" position={props.targetPosition} isConnectable={props.isConnectable} />
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const InputNode = defineComponent({
|
||||
name: 'InputNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -24,10 +25,10 @@ const InputNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.sourcePosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<DraggableCore
|
||||
cancel=".nodrag"
|
||||
:scale="transform[2]"
|
||||
:disabled="!isDraggable"
|
||||
:grid="grid"
|
||||
:enableUserSelectHack="false"
|
||||
@start="onDragStart"
|
||||
@move="onDrag"
|
||||
@stop="onDragStop"
|
||||
>
|
||||
<div
|
||||
ref="nodeElement"
|
||||
:class="nodeClasses"
|
||||
:style="nodeStyle"
|
||||
:data-id="node.id"
|
||||
@mouseenter="onMouseEnterHandler"
|
||||
@mousemove="onMouseMoveHandler"
|
||||
@mouseleave="onMouseLeaveHandler"
|
||||
@contextmenu="onContextMenuHandler"
|
||||
@click="onSelectNodeHandler"
|
||||
>
|
||||
<component
|
||||
:is="type"
|
||||
:data="node.data"
|
||||
:type="node.type"
|
||||
:x-pos="node.__rf.position.x"
|
||||
:y-pos="node.__rf.position.y"
|
||||
:selected="selected"
|
||||
:is-connectable="isConnectable"
|
||||
:source-position="node.sourcePosition"
|
||||
:target-position="node.targetPosition"
|
||||
:is-dragging="node.__rf.isDragging"
|
||||
/>
|
||||
</div>
|
||||
</DraggableCore>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, CSSProperties, defineComponent, inject, PropType, provide } from 'vue';
|
||||
import { templateRef, tryOnMounted, useResizeObserver } from '@vueuse/core';
|
||||
import { DraggableCore, DraggableEventListener } from '@braks/revue-draggable';
|
||||
import { Node, NodeDimensionUpdate, NodeTypesType, RevueFlowStore } from '../../types';
|
||||
import { RevueFlowHooks } from '../../hooks/RevueFlowHooks';
|
||||
|
||||
interface NodeProps {
|
||||
nodeTypes: NodeTypesType;
|
||||
snapToGrid: boolean;
|
||||
snapGrid: [number, number];
|
||||
selectNodesOnDrag: boolean;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: { DraggableCore },
|
||||
props: {
|
||||
node: {
|
||||
type: Object as PropType<Node>,
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
snapToGrid: {
|
||||
type: Boolean as PropType<NodeProps['snapToGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
snapGrid: {
|
||||
type: Array as unknown as PropType<NodeProps['snapGrid']>,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
selectNodesOnDrag: {
|
||||
type: Boolean as PropType<NodeProps['selectNodesOnDrag']>,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
const hooks = inject<RevueFlowHooks>('hooks')!;
|
||||
provide('NodeIdContext', props.node.id);
|
||||
|
||||
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')
|
||||
);
|
||||
const isSelectable = computed(
|
||||
() => props.node.selectable || (store.elementsSelectable && typeof props.node.selectable === 'undefined')
|
||||
);
|
||||
const isConnectable = computed(
|
||||
() => props.node.connectable || (store.nodesConnectable && typeof props.node.connectable === 'undefined')
|
||||
);
|
||||
|
||||
const node = computed(
|
||||
() =>
|
||||
({
|
||||
id: props.node.id,
|
||||
type: props.node.type,
|
||||
position: { x: props.node.__rf.position.x, y: props.node.__rf.position.y },
|
||||
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;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onMouseMoveHandler = () => {
|
||||
if (props.node.__rf.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseMove.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onMouseLeaveHandler = () => {
|
||||
if (props.node.__rf.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => hooks.nodeMouseLeave.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onContextMenuHandler = () => {
|
||||
return (event: MouseEvent) => hooks.nodeContextMenu.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
const onSelectNodeHandler = (event: MouseEvent) => {
|
||||
if (!isDraggable.value) {
|
||||
if (isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
|
||||
if (!selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
}
|
||||
|
||||
hooks.nodeClick.trigger({ event, node: node.value });
|
||||
}
|
||||
};
|
||||
|
||||
const onDragStart: DraggableEventListener = ({ event }) => {
|
||||
hooks.nodeDragStart.trigger({ event, node: node.value });
|
||||
|
||||
if (props.selectNodesOnDrag && isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
|
||||
if (!selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
} else if (!props.selectNodesOnDrag && !selected.value && isSelectable.value) {
|
||||
store.unsetNodesSelection();
|
||||
store.addSelectedElements([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventListener = ({ event, data }) => {
|
||||
node.value.position.x += data.deltaX;
|
||||
node.value.position.y += data.deltaY;
|
||||
hooks.nodeDrag.trigger({ event, node: node.value });
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: props.node.id as string,
|
||||
diff: {
|
||||
x: data.deltaX,
|
||||
y: data.deltaY
|
||||
},
|
||||
isDragging: true
|
||||
});
|
||||
};
|
||||
|
||||
const onDragStop: DraggableEventListener = ({ event }) => {
|
||||
// onDragStop also gets called when user just clicks on a node.
|
||||
// Because of that we set dragging to true inside the onDrag handler and handle the click here
|
||||
if (!props.node.__rf.isDragging) {
|
||||
if (isSelectable.value && !props.selectNodesOnDrag && !selected.value) {
|
||||
store.addSelectedElements([node.value]);
|
||||
}
|
||||
|
||||
hooks.nodeClick.trigger({ event, node: node.value });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
store.updateNodePosDiff({
|
||||
id: node.value.id || '',
|
||||
isDragging: false
|
||||
});
|
||||
|
||||
hooks.nodeDragStop.trigger({ event, node: node.value });
|
||||
};
|
||||
|
||||
useResizeObserver(nodeElement, (entries) => {
|
||||
const updates: NodeDimensionUpdate[] = entries.map((entry) => ({
|
||||
id: entry.target.getAttribute('data-id') || '',
|
||||
nodeElement: entry.target as HTMLDivElement
|
||||
}));
|
||||
|
||||
store.updateNodeDimensions(updates);
|
||||
});
|
||||
|
||||
tryOnMounted(() => {
|
||||
store.updateNodeDimensions([
|
||||
{
|
||||
id: props.node.id || '',
|
||||
nodeElement: nodeElement.value,
|
||||
forceUpdate: true
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
const nodeClasses = computed(() => [
|
||||
'revue-flow__node',
|
||||
`revue-flow__node-${props.node.type}`,
|
||||
{
|
||||
selected: selected.value,
|
||||
selectable: isSelectable.value
|
||||
}
|
||||
]);
|
||||
|
||||
return {
|
||||
nodeClasses,
|
||||
grid,
|
||||
nodeStyle,
|
||||
nodeElement,
|
||||
onDragStart,
|
||||
onDrag,
|
||||
onDragStop,
|
||||
onContextMenuHandler,
|
||||
onMouseEnterHandler,
|
||||
onMouseLeaveHandler,
|
||||
onMouseMoveHandler,
|
||||
onSelectNodeHandler,
|
||||
transform,
|
||||
isConnectable,
|
||||
isDraggable,
|
||||
selected
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -5,6 +5,7 @@ import { defineComponent, PropType } from 'vue';
|
||||
const OutputNode = defineComponent({
|
||||
name: 'OutputNode',
|
||||
components: { Handle },
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
data: {
|
||||
type: Object as PropType<NodeProps['data']>,
|
||||
@@ -24,10 +25,10 @@ const OutputNode = defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return () => (
|
||||
<div>
|
||||
<>
|
||||
{props.data?.label}
|
||||
<Handle type="source" position={props.targetPosition} isConnectable={props.isConnectable} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import { Node, RevueFlowStore, WrapNodeProps } from '../../types';
|
||||
import { computed, CSSProperties, DefineComponent, defineComponent, inject, onMounted, onUpdated, provide, ref } from 'vue';
|
||||
import { DraggableEventHandler, DraggableCore } from '@braks/revue-draggable';
|
||||
|
||||
export default (NodeComponent: DefineComponent<WrapNodeProps>) => {
|
||||
return defineComponent({
|
||||
props: WrapNodeProps,
|
||||
setup(props) {
|
||||
const store = inject<RevueFlowStore>('store')!;
|
||||
provide('NodeIdContext', props.id);
|
||||
|
||||
const nodeElement = ref<HTMLDivElement | undefined>();
|
||||
|
||||
const node = computed(() => ({
|
||||
id: props.id,
|
||||
type: props.type,
|
||||
position: { x: props.xPos, y: props.yPos },
|
||||
data: props.data
|
||||
}));
|
||||
const grid = computed(() => (props.snapToGrid ? props.snapGrid : [1, 1])! as [number, number]);
|
||||
|
||||
const nodeStyle = computed<CSSProperties>(() => ({
|
||||
zIndex: props.selected ? 10 : 3,
|
||||
transform: `translate(${props.xPos}px,${props.yPos}px)`,
|
||||
pointerEvents:
|
||||
props.isSelectable ||
|
||||
props.isDraggable ||
|
||||
props.onClick ||
|
||||
props.onMouseEnter ||
|
||||
props.onMouseMove ||
|
||||
props.onMouseLeave
|
||||
? 'all'
|
||||
: 'none',
|
||||
// prevents jumping of nodes on start
|
||||
opacity: props.isInitialized ? 1 : 0,
|
||||
...props.style
|
||||
}));
|
||||
const onMouseEnterHandler = () => {
|
||||
if (!props.onMouseEnter || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseEnter && props.onMouseEnter(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onMouseMoveHandler = () => {
|
||||
if (!props.onMouseMove || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseMove && props.onMouseMove(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onMouseLeaveHandler = () => {
|
||||
if (!props.onMouseLeave || props.isDragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onMouseLeave && props.onMouseLeave(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onContextMenuHandler = () => {
|
||||
if (!props.onContextMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
return (event: MouseEvent) => props.onContextMenu && props.onContextMenu(event, node.value as Node);
|
||||
};
|
||||
|
||||
const onSelectNodeHandler = (event: MouseEvent) => {
|
||||
if (!props.isDraggable) {
|
||||
if (props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
|
||||
if (!props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
}
|
||||
|
||||
props.onClick?.(event, node.value as Node);
|
||||
}
|
||||
};
|
||||
|
||||
const onDragStart: DraggableEventHandler = (event) => {
|
||||
props.onNodeDragStart?.(event as MouseEvent, node.value as Node);
|
||||
|
||||
if (props.selectNodesOnDrag && props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
|
||||
if (!props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
} else if (!props.selectNodesOnDrag && !props.selected && props.isSelectable) {
|
||||
store?.unsetNodesSelection();
|
||||
store?.addSelectedElements([]);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrag: DraggableEventHandler = (event, draggableData) => {
|
||||
if (props.onNodeDrag) {
|
||||
node.value.position.x += draggableData.deltaX;
|
||||
node.value.position.y += draggableData.deltaY;
|
||||
props.onNodeDrag(event as MouseEvent, node.value as Node);
|
||||
}
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: props.id as string,
|
||||
diff: {
|
||||
x: draggableData.deltaX,
|
||||
y: draggableData.deltaY
|
||||
},
|
||||
isDragging: true
|
||||
});
|
||||
};
|
||||
|
||||
const onDragStop: DraggableEventHandler = (event) => {
|
||||
// onDragStop also gets called when user just clicks on a node.
|
||||
// Because of that we set dragging to true inside the onDrag handler and handle the click here
|
||||
if (!props.isDragging) {
|
||||
if (props.isSelectable && !props.selectNodesOnDrag && !props.selected) {
|
||||
store?.addSelectedElements([node.value as Node]);
|
||||
}
|
||||
|
||||
props.onClick?.(event, node.value as Node);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
store?.updateNodePosDiff({
|
||||
id: node.value.id as string,
|
||||
isDragging: false
|
||||
});
|
||||
|
||||
props.onNodeDragStop?.(event as MouseEvent, node.value as Node);
|
||||
};
|
||||
|
||||
onUpdated(() => {
|
||||
if (nodeElement.value && !props.isHidden) {
|
||||
store?.updateNodeDimensions([{ id: props.id || '', nodeElement: nodeElement.value, forceUpdate: true }]);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (nodeElement.value && typeof props.resizeObserver?.observe === 'function') {
|
||||
const currNode = nodeElement.value;
|
||||
props.resizeObserver?.observe(currNode);
|
||||
|
||||
return () => props.resizeObserver?.unobserve(currNode);
|
||||
}
|
||||
});
|
||||
|
||||
if (props.isHidden) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const nodeClasses = computed(() => [
|
||||
'revue-flow__node',
|
||||
`revue-flow__node-${props.type}`,
|
||||
{
|
||||
selected: props.selected,
|
||||
selectable: props.isSelectable
|
||||
}
|
||||
]);
|
||||
|
||||
return () => (
|
||||
<DraggableCore
|
||||
start={onDragStart}
|
||||
move={onDrag}
|
||||
stop={onDragStop}
|
||||
scale={store.transform[2]}
|
||||
disabled={!props.isDraggable}
|
||||
cancel=".nodrag"
|
||||
grid={grid.value}
|
||||
enableUserSelectHack={false}
|
||||
>
|
||||
<div
|
||||
class={nodeClasses.value}
|
||||
ref={nodeElement}
|
||||
style={nodeStyle.value}
|
||||
onMouseenter={onMouseEnterHandler}
|
||||
onMousemove={onMouseMoveHandler}
|
||||
onMouseleave={onMouseLeaveHandler}
|
||||
onContextmenu={onContextMenuHandler}
|
||||
onClick={onSelectNodeHandler}
|
||||
data-id={props.id}
|
||||
>
|
||||
<NodeComponent
|
||||
id={props.id}
|
||||
data={props.data}
|
||||
type={props.type}
|
||||
xPos={props.xPos}
|
||||
yPos={props.yPos}
|
||||
selected={props.selected}
|
||||
isConnectable={props.isConnectable}
|
||||
sourcePosition={props.sourcePosition}
|
||||
targetPosition={props.targetPosition}
|
||||
isDragging={props.isDragging}
|
||||
/>
|
||||
</div>
|
||||
</DraggableCore>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user