Tl;dr: To (continuously) update the location of a component from another component, is it performance-wise better to use the Vuex store or an Event-bus?
The application
I'm creating an application in which the user can create Directed Acyclic Graphs. Simply said, there is a canvas, with different panels on it. Each panel has multiple inputs and multiple outputs. The user can connect an output the the input of another panel with a connector. The panels are draggable over the canvas, and the panels eventually will be generated dynamically, with different inputs and outputs.
____________ ____________
| PANEL | | PANEL |
| | | |
|.input1 | |.input3 |
|.input2 | ,---- |.input4 |
| | / | |
| output1.| ---' | output5.|
| output2.| | output6.|
|__________| |__________|
(The actual application isn't ascii art, btw)
All objects in the application are in the Vuex Store, the application renders things based on the store:
store:{
panels: { ...paneldetails..., id}[],
inputs: { ...inputdetails..., id}[],
outputs: { ...outputdetails..., id}[],
connections: { ...inputId, outputId..., id}[],
}
The user can drag the panels around on the canvas, which means that the connectors are also dragged around on one end at a time. And that is where my question lies: How should I update the connector's location, when a panel is moved around?
I thought of two approaches:
A ) I track the location of each input and output in the store: I just store the x and y along with the ID as soon as they move. I bind one end of each connection to that item in the store, and that's that. That would mean dozens and dozens of store-updates when someone drags a panel around on the screen.
B ) I send the location of each input and output over an event-bus when it moves, with their ID as key. The connector listens to the ID of the input and output they know, and update when they 'hear' something.
I'm not really sure what the best approach is performance wise, the store might not be suited for continuous updates.