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
@@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user