From ea98c2afa1740456cafe10ff6f373bc9f27ab295 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 9 Jul 2021 16:09:58 +0200 Subject: [PATCH] feat: Show connection lines when holding down on handle --- src/components/ConnectionLine/index.tsx | 118 +++++++++++++----------- src/components/Edges/BezierEdge.tsx | 2 - src/components/Edges/wrapEdge.tsx | 10 +- src/components/Handle/handler.ts | 2 - src/components/Handle/index.tsx | 6 +- src/container/EdgeRenderer/utils.ts | 1 - src/container/GraphView/index.tsx | 2 - 7 files changed, 72 insertions(+), 69 deletions(-) diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index 30496846..ef3731d8 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/src/components/ConnectionLine/index.tsx @@ -1,4 +1,4 @@ -import { ref, defineComponent, CSSProperties, PropType } from 'vue'; +import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue'; import { getBezierPath } from '../Edges/BezierEdge'; import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; @@ -79,44 +79,52 @@ const ConnectionLine = defineComponent({ CustomConnectionLineComponent: { type: Object as PropType, required: false, - default: () => ({}) + default: undefined } }, setup(props) { - console.log('connectionline'); const sourceNode = ref(props.nodes.find((n) => n.id === props.connectionNodeId) || null); if (!sourceNode.value || !props.isConnectable) { return null; } - const sourceHandle = props.connectionHandleId - ? sourceNode.value.__rf.handleBounds[props.connectionHandleType].find( - (d: HandleElement) => d.id === props.connectionHandleId - ) - : sourceNode.value.__rf.handleBounds[props.connectionHandleType][0]; - const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.value.__rf.width / 2; - const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.value.__rf.height; - const sourceX = sourceNode.value.__rf.position.x + sourceHandleX; - const sourceY = sourceNode.value.__rf.position.y + sourceHandleY; + 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 = (props.connectionPositionX - props.transform[0]) / props.transform[2]; - const targetY = (props.connectionPositionY - props.transform[1]) / props.transform[2]; + const targetX = computed(() => (props.connectionPositionX - props.transform[0]) / props.transform[2]); + const targetY = computed(() => (props.connectionPositionY - props.transform[1]) / props.transform[2]); - const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right; - const targetPosition = isRightOrLeft ? Position.Left : Position.Top; + 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 () => ( - @@ -124,43 +132,47 @@ const ConnectionLine = defineComponent({ ); } - let dAttr = ''; + let dAttr = computed(() => `M${sourceX.value},${sourceY.value} ${targetX.value},${targetY.value}`); if (props.connectionLineType === ConnectionLineType.Bezier) { - dAttr = getBezierPath({ - sourceX, - sourceY, - sourcePosition: sourceHandle?.position, - targetX, - targetY, - targetPosition - }); + 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 = getSmoothStepPath({ - sourceX, - sourceY, - sourcePosition: sourceHandle?.position, - targetX, - targetY, - targetPosition, - borderRadius: 0 - }); + 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 = getSmoothStepPath({ - sourceX, - sourceY, - sourcePosition: sourceHandle?.position, - targetX, - targetY, - targetPosition - }); - } else { - dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`; + dAttr = computed(() => + getSmoothStepPath({ + sourceX: sourceX.value, + sourceY: sourceY.value, + sourcePosition: sourceHandle.value?.position, + targetX: targetX.value, + targetY: targetY.value, + targetPosition: targetPosition.value + }) + ); } return () => ( - + ); } diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 8133fff8..40339d5c 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -120,7 +120,6 @@ const BezierEdge = defineComponent({ } }, setup(props) { - console.log('edge'); const centered = computed(() => { return getCenter({ sourceX: props.sourceX, @@ -132,7 +131,6 @@ const BezierEdge = defineComponent({ }); }); const path = computed(() => { - console.log('computing in edge'); return getBezierPath({ sourceX: props.sourceX, sourceY: props.sourceY, diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index 7ef0a996..a1ea5fb7 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -48,23 +48,23 @@ export default (EdgeComponent: any): Component => { pinia.addSelectedElements(edgeElement.value as any); } - props.onClick?.(event, edgeElement.value); + if (props.onClick) props.onClick?.(event, edgeElement.value); }; const onEdgeContextMenu = (event: MouseEvent) => { - props.onContextMenu?.(event, edgeElement.value); + if (props.onContextMenu) props.onContextMenu?.(event, edgeElement.value); }; const onEdgeMouseEnter = (event: MouseEvent) => { - props.onMouseEnter?.(event, edgeElement.value); + if (props.onMouseEnter) props.onMouseEnter?.(event, edgeElement.value); }; const onEdgeMouseMove = (event: MouseEvent) => { - props.onMouseMove?.(event, edgeElement.value); + if (props.onMouseMove) props.onMouseMove?.(event, edgeElement.value); }; const onEdgeMouseLeave = (event: MouseEvent) => { - props.onMouseLeave?.(event, edgeElement.value); + if (props.onMouseLeave) props.onMouseLeave?.(event, edgeElement.value); }; const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => { diff --git a/src/components/Handle/handler.ts b/src/components/Handle/handler.ts index 1ee7105c..1393612b 100644 --- a/src/components/Handle/handler.ts +++ b/src/components/Handle/handler.ts @@ -103,8 +103,6 @@ export function onMouseDown( // when react-flow is used inside a shadow root we can't use document const doc = getHostForElement(event.target as HTMLElement); - console.log(doc); - if (!doc) { return; } diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx index 26e9ea00..e7609635 100644 --- a/src/components/Handle/index.tsx +++ b/src/components/Handle/index.tsx @@ -1,5 +1,4 @@ import { Connection, ElementId, Position } from '../../types'; - import { onMouseDown, ValidConnectionFunc } from './handler'; import { defineComponent, inject, PropType } from 'vue'; import store from '../../store'; @@ -42,7 +41,6 @@ const Handle = defineComponent({ setup(props, { slots }) { const pinia = store(); const nodeId = inject('NodeIdContext') as ElementId; - const handleId = props.id || null; const isTarget = props.type === 'target'; const onConnectExtended = (params: Connection) => { @@ -53,7 +51,7 @@ const Handle = defineComponent({ const onMouseDownHandler = (event: MouseEvent) => { onMouseDown( event, - handleId, + props.id || '', nodeId, pinia.setConnectionNodeId, pinia.setConnectionPosition, @@ -82,7 +80,7 @@ const Handle = defineComponent({ return () => (