Problems with floating edges

[activey]

Hi :)

Currently I'm migrating from react-flow to vue-flow and stumbled upon a problem with floating edges support. I've basically copied the example from here https://codesandbox.io/s/vue-flow-floating-edges-zfxdok into my codebase with small adjustments, I'm using the same createElements() just to see how it works on my local machine and I'm observing the given behavior: edges are rendered correctly but there is a flood of error messages in the webbrowser console like this:

Error: <path> attribute d: Unexpected end of attribute. Expected number, "….809482216579454".
p

It's literally a flood. Another thing is that when I switch to my own dataset the edges are rendered chaotically like on the screenshot attached.

I use an ES6 syntax, not TypeScript, so I had to modify the floating-edge-utils file to make the syntax valid.
I appreciate any help in this area. Thanks :)

[bcakmakoglu]

You're trying to use a heavily outdated example (no idea where you even found the sandbox still 🤣).
Use the example in the repo instead.

[activey]

Oh, right, I've aligned my code to the latest repo version and the errors are no longer there :)
But, my diagram edges looks abnormal, swinging in the air. It all looks fine in react version :/
I use nested nodes, maybe that's a problem? :(

[bcakmakoglu]

No, nested nodes are irrelevant to this.
You're probably doing something wrong as the example works completely fine.
Are you sure you're using the first element from the array returned by getBezierPath?

[activey]

Heh, I've noticed something super interesting :) My diagram consist of one parent node where the majority of the nodes are inside (only one is outside the parent), when you move nodes inside the parent the edges are rendered all fine, they switch places according to nodes position and everything looks all fine, but, when you just move parent node it all breaks. Please see the video attached.

edges-2023-05-29_10.31.45.mp4

[bcakmakoglu]

I will need a sandbox reproduction for this. A Video can't really help me debug this issue for you.
Here's a template.

(Also use the reply box of each answer instead of writing a whole new answer, it just clutters this thread instead of creating one continuous thread ^^)

[activey]

Ah, sorry, my bad. Okay, I will prepare a sandbox for this case in the afternoon :)

[activey]

@bcakmakoglu here is the sandbox: https://codesandbox.io/p/sandbox/fancy-shape-4b4hd6

[bcakmakoglu]

Alright, so the problem is somewhat related to nested nodes.
With nested nodes, we have to rely on computedPosition instead of just position.
So you will have to update the utils to use that property instead of the position prop.

// this helper function returns the intersection point
// of the line between the center of the intersectionNode and the target node
function getNodeIntersection(intersectionNode: GraphNode, targetNode: GraphNode): XYPosition {
  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a

// use computedPosition instead of position here
  const {
    dimensions: { width: intersectionNodeWidth, height: intersectionNodeHeight },
    computedPosition: intersectionNodePosition,
  } = intersectionNode
  const targetPosition = targetNode.computedPosition

  const w = intersectionNodeWidth / 2
  const h = intersectionNodeHeight / 2

  const x2 = intersectionNodePosition.x + w
  const y2 = intersectionNodePosition.y + h
  const x1 = targetPosition.x + w
  const y1 = targetPosition.y + h

  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
  const xx3 = a * xx1
  const yy3 = a * yy1
  const x = w * (xx3 + yy3) + x2
  const y = h * (-xx3 + yy3) + y2

  return { x, y }
}

// returns the position (top,right,bottom or right) passed node compared to the intersection point
function getEdgePosition(node: GraphNode, intersectionPoint: XYPosition) {

// use computedPosition instead of position
  const n = { ...node.computedPosition, ...node.dimensions }
  const nx = Math.round(n.x)
  const ny = Math.round(n.y)
  const px = Math.round(intersectionPoint.x)
  const py = Math.round(intersectionPoint.y)

  if (px <= nx + 1) {
    return Position.Left
  }
  if (px >= nx + n.width - 1) {
    return Position.Right
  }
  if (py <= ny + 1) {
    return Position.Top
  }
  if (py >= n.y + n.height - 1) {
    return Position.Bottom
  }

  return Position.Top
}

Here's a working sandbox.

[activey]

I think the link you've just sent leads to my broken sandbox ;)

[activey]

Nevertheless 🙂 I've copied fragment of this code into my codebase and it worked 😄 Thank you very much for your help! Do you think the example code in vue-flow should be updated with this change?

[activey]

Btw ;> Instead of using raw <g> in FloatingEdge I switched to <BaseEdge> and it works quite well :}

[bcakmakoglu]

Yeah, I'll update the example as computedPosition would work for nested or non-nested nodes :)