How to update edge property ("animated") dynamically?

[aadhyarupam]

First, Thanks for your amazing work and extremely well-maintained library. Well, I am using custom edge component having few custom properties which are getting updated dynamically. To allow enabling animated line style dynamically by user, would be looking at updating this property (default value is false). Any attempt to set this property leading to error - "set operation on key "animated" failed: target is readonly. ". While custom properties managed through "data" key are working fine, requesting your guidance to update "animated" property.

Context:

1. Custom edge will display selection box when user select the edge having animated: false state.
2. User choose option for animated line. On change event, set the the edge value.
   function onLineTypeChange(event) {
   const lineType = event.target.value;
   props.data.lineType = lineType;
   if (lineType === 'Animated') {
   props.animated = true;
   } else {
   props.animated = false;
   }
   //emit('edge-update', this);
   }

Though vue-flow is listening for 'edge-update' and updating the edge, how that can be triggered here? I did see EdgeUpdateEvent in document guide however have not found way to use/trigger it.

[bcakmakoglu]

Props are readonly (this is imposed by Vue, read this section of the Vue docs) so trying to modify props will not work, that's why you get the error you quoted.

There's a couple of ways of going about this but the simplest way is to use the edge object from the store state directly and mutate it.

// from inside your edge component

const { edge } = useEdge()

// or
const { findEdge } = useVueFlow()
const edge = findEdge(id)

function toggleAnimate() {
	edge.animated = !edge.animated
}

[bcakmakoglu]

Also the EdgeUpdate event is not meant to update properties of an edge, but is used when the target/source of an edge is changed. Check the example for more insight.

[aadhyarupam]

Thanks.. so quick and working !