[Bug]: Each object assigned to portProp makes the diagram slower to render

[f-gueguen]

What happened?

I have encountered a performance issue when using the portProp function to assign objects (JointJS elements or plain JavaScript objects) to ports in a diagram.

Steps to reproduce:

Create a diagram with elements containing ports. Assign objects to the ports using the portProp function. Observe the performance when moving elements or adding new ports to the diagram. Expected behavior: The diagram should render smoothly and efficiently, even with objects assigned to ports using portProp.

Actual behavior: As the number of objects assigned to ports using portProp increases, the performance of the diagram degrades significantly. Moving elements on the diagram takes dozens of milliseconds, and adding a new port can take up to a few hundred milliseconds.

Workaround: I have found a workaround by storing the bound objects directly on the element using the prop function instead of portProp. For example, instead of using element.portProp('my-port-id', myObject), I use element.prop('port/my-port-id', myObject). This approach resolves the performance issue in my case.

It seems that the portProp implementation may have some performance bottlenecks when dealing with a "large" (getting slow after 5/6 of those object assigned ports) number of assigned objects.

I didn't migrate to version 4 and that might have been fixed there.

Version

3.7.7

What browsers are you seeing the problem on?

No response

What operating system are you seeing the problem on?

No response

[kumilingus]

What kind of object exactly do you store on the model under the ports attribute? It supposed be a plain Javascript object. What is the path that is being used to store the port data?

An example would be helpful. Thank you.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.