kumilingus
commented
1 month ago 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.
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 useelement.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