🌻 [Feature]: Allow ref access of path elements in (Base-)Edge components

[heaven-born]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

When I create a custom edge, I would like to have the ability to interact with 'path' using web animation api for custom animations. To make the animation works I need 'ref' to the 'path' html element, but I can't get it using 'ref' currently because the value is always undefined.

Expected Behavior

 <BaseEdge ref='edgeElement '  ... /> 

Expect to have edgeElement ref value defined on 'onMouted' stage.

Steps To Reproduce

Create BaseEdge with ref binding and check that on 'onMouted' state the ref value is undefined.

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

Will be fixed in 1.20.2

[bcakmakoglu]

Correction, I will add this to 1.21.0.
The reasoning here is that this technically is not a bug but a feature request - You could select the path element from the ref still with a bit of a workaround.

const el = ref()

onMounted(() = {
	const pathEl = el.value.nextSibling
})

To make this easier I will expose 3 refs in the next minor release.
These refs will be:

1. the visible path element
2. the invisible interaction path element
3. the edge label element

const el = ref()

onMounted(() => {
	console.log(el.value.pathEl.value, el.value.interactionEl.value, el.value.labelEl.value)
})

[heaven-born]

regarding the workaround. In my case 'ref' value is undefined in 'onMounted' if I bind it on BaseEdge tag. This way I can't extract nextSibling.

[bcakmakoglu]

Mh... strange, when I bind a ref like this <BaseEdge :ref="edgeRef" ... /> I receive this when onMounted is called

[bcakmakoglu]

Another way to work around this for now would also be to use something like this

// inside your custom edge
const { edgeEl } = useEdge()

onMounted(() => {
  console.log(edgeEl.value.querySelector('path.vue-flow__edge-path'))
})

[heaven-born]

I will try to reproduce it in the sandbox tomorrow. For some reason typescript compiler doesn't even allow me to do this :ref="edgeRef" saying something like: Argument of type '{ ref: string; path: string; markerEnd: string | undefined; "marker-end": string | undefined; interactionWidth: number; style: { strokeWidth: number; }; }' is not assignable to parameter of type 'BaseEdgeProps'.

[bcakmakoglu]

I assume you're using VSCode with Volar, right?

[heaven-born]

yes

[heaven-born]

@bcakmakoglu can you make a fresh sandbox with the latest versions of all the libs installed from package.js, because 'npm install' is not doing it right and I don't understand how to fix it?

[bcakmakoglu]

This template is updated.

[bcakmakoglu]

I'm converting this into a discussion as this is not a bug (as mentioned previously) and I want to keep Issues for bugs only :)

[bcakmakoglu]

1.21.0 is released which exposes element refs for the BaseEdge (the path el, the interaction path el and the label el)