From ab706e148b2a0f6ecbb3da3f5f6f9521a34f5f3a Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Thu, 6 Jun 2024 12:33:50 +0500 Subject: [PATCH] fix(blueprint): render all edges from the schema response --- .../BlueprintModal/Body/Graph/Links/index.tsx | 37 +++++++++++++------ .../BlueprintModal/Body/index.tsx | 1 - 2 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Links/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Links/index.tsx index 9d66398b0..ce186ed64 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Links/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Links/index.tsx @@ -23,6 +23,14 @@ const getPointOnLineAtDistance = (start: Vector3, end: Vector3, r: number): Vect return new Vector3().addVectors(start, displacement) } +const getLoopControlPoints = (center: Vector3): [Vector3, Vector3, Vector3] => { + const controlPoint1 = new Vector3(center.x - 10, center.y + 45, center.z) + const controlPoint2 = new Vector3(center.x + 5, center.y + 10, center.z) + const endPoint = new Vector3(center.x, center.y, center.z) + + return [controlPoint1, endPoint, controlPoint2] +} + export const Lines = ({ links, nodes }: Props) => { const group = useRef(null) @@ -41,24 +49,31 @@ export const Lines = ({ links, nodes }: Props) => { const startVector = new Vector3(nodeStart?.x || 0, nodeStart?.y || 0, nodeStart?.z || 0) const endVector = new Vector3(nodeEnd?.x || 0, nodeEnd?.y || 0, nodeEnd?.z || 0) - const endPosition = getPointOnLineAtDistance(endVector, startVector, NODE_RADIUS + CONE_HEIGHT) - - const startPosition = startVector.clone() - const middlePoint = new Vector3().lerpVectors(startPosition, endPosition, 0) - const line = child.children[0] as { setPoints?: (start: Vector3, end: Vector3, middlePoint: Vector3) => void } const arrow = child.children[1] - // Make the arrow point towards the start position - arrow.position.set(endPosition.x, endPosition.y, endPosition.z) - arrow.lookAt(startPosition) - arrow.rotateX(-Math.PI / 2) + if (nodeStart?.ref_id === nodeEnd?.ref_id) { + const [controlPoint1, endPoint, controlPoint2] = getLoopControlPoints(startVector) - // Set line points - line.setPoints?.(startPosition, endPosition, middlePoint) + line.setPoints?.(startVector, controlPoint2, controlPoint1) + + arrow.position.set(controlPoint2.x, controlPoint2.y, endPoint.z) + arrow.lookAt(controlPoint1) + arrow.rotateX(-Math.PI / 2) + } else { + const endPosition = getPointOnLineAtDistance(endVector, startVector, NODE_RADIUS + CONE_HEIGHT) + const startPosition = startVector.clone() + const middlePoint = new Vector3().lerpVectors(startPosition, endPosition, 0) + + line.setPoints?.(startPosition, endPosition, middlePoint) + + arrow.position.set(endPosition.x, endPosition.y, endPosition.z) + arrow.lookAt(startPosition) + arrow.rotateX(-Math.PI / 2) + } }) } }) diff --git a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx index 820fff882..9d32b4674 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/index.tsx @@ -93,7 +93,6 @@ export const Body = () => { const linksFiltered = links.filter( (link) => - link.edge_type === 'CHILD_OF' && schemasWithChildren.some((schema) => schema.ref_id === link.source) && schemasWithChildren.some((schema) => schema.ref_id === link.target), )