Current versus expected behaviour
The new port is added to the model and the port DOM is updated so that the new port circle is visible on the paper.
Steps to reproduce
Title: ElementView port DOM does not update after deselect then reselect when adding/removing ports
Description:
Environment
JointJS (and JointJS+ if applicable), version: [fill in, e.g. 4.x]
Browser: [e.g. Chrome 120]
Reproducible with a custom Element that has dynamic ports and uses layoutPorts() to resize the element when ports change.
Summary
When an element with ports is deselected (e.g. click on blank paper so that paper.removeTools() runs) and then selected again, subsequent add/remove port operations update the model correctly but the port DOM (the port circles/magnets) is not updated. The same operations work correctly if the element has never been deselected.
Steps to reproduce
Add a custom Element to the paper that supports dynamic ports (e.g. addPort / removePort and an initial port).
Select the element so that tools (e.g. Add Port / Remove Port buttons) are shown.
Without deselecting, add a port via the tool or element.addDefaultPort(). Observe that the new port appears in the DOM and on the paper. ✓
Deselect the element by clicking on an empty area of the paper (so that selection is cleared and paper.removeTools() is called).
Select the same element again (same cell, same view).
Add another port (again via the tool or element.addDefaultPort()).
Expected
The new port is added to the model and the port DOM is updated so that the new port circle is visible on the paper.
Actual
The model has the correct number of ports (e.g. element.get('ports').items is correct), but the ElementView does not re-render the ports: only the previous number of port elements remains visible (e.g. still one port circle when there should be two). The same happens when removing a port after a deselect/reselect cycle.
Notes
The element’s addDefaultPort() calls this.addPort(...) and then this.layoutPorts(). layoutPorts() recalculates width and calls this.resize(newWidth, currentSize.height), so both change:ports and change:size are triggered in the same flow.
The issue persists even if the user waits a long time between reselecting and adding a port; it is not a timing/race issue with immediate tool refresh.
A workaround that fixes the behaviour is to bypass the normal update path and, after changing ports, call on the element’s view:
element._createPortData() (so the model’s port data is up to date), and
view._refreshPorts()
so that the port DOM is updated regardless of the scheduled PORTS flag.
This suggests that the view’s normal update path (e.g. requestUpdate(PORTS) and/or the handling of RESIZE and PORTS in confirmUpdate) is not applying the port update after a deselect/reselect cycle—possibly because RESIZE and PORTS are batched and the PORTS update is dropped or not executed when RESIZE is also present, or because the view’s state after removeTools() / re-adding tools affects how updates are applied.
Possible root cause (hypothesis)
In ElementView’s confirmUpdate, when both RESIZE and PORTS flags are set (e.g. after addPort + layoutPorts() → resize()), the handling of RESIZE may clear or supersede the PORTS flag so that _renderPorts() is never run. The deselect/reselect cycle (and thus removeTools() and re-adding tools) might leave the view or the paper’s update queue in a state where this happens consistently.
Version
jointjs-plus 4.2
What browsers are you seeing the problem on?
Microsoft Edge
What operating system are you seeing the problem on?
Windows
Current versus expected behaviour
The new port is added to the model and the port DOM is updated so that the new port circle is visible on the paper.
Steps to reproduce
Title: ElementView port DOM does not update after deselect then reselect when adding/removing ports
Description:
Environment
JointJS (and JointJS+ if applicable), version: [fill in, e.g. 4.x]
Browser: [e.g. Chrome 120]
Reproducible with a custom Element that has dynamic ports and uses layoutPorts() to resize the element when ports change.
Summary
When an element with ports is deselected (e.g. click on blank paper so that paper.removeTools() runs) and then selected again, subsequent add/remove port operations update the model correctly but the port DOM (the port circles/magnets) is not updated. The same operations work correctly if the element has never been deselected.
Steps to reproduce
Add a custom Element to the paper that supports dynamic ports (e.g. addPort / removePort and an initial port).
Select the element so that tools (e.g. Add Port / Remove Port buttons) are shown.
Without deselecting, add a port via the tool or element.addDefaultPort(). Observe that the new port appears in the DOM and on the paper. ✓
Deselect the element by clicking on an empty area of the paper (so that selection is cleared and paper.removeTools() is called).
Select the same element again (same cell, same view).
Add another port (again via the tool or element.addDefaultPort()).
Expected
The new port is added to the model and the port DOM is updated so that the new port circle is visible on the paper.
Actual
The model has the correct number of ports (e.g. element.get('ports').items is correct), but the ElementView does not re-render the ports: only the previous number of port elements remains visible (e.g. still one port circle when there should be two). The same happens when removing a port after a deselect/reselect cycle.
Notes
The element’s addDefaultPort() calls this.addPort(...) and then this.layoutPorts(). layoutPorts() recalculates width and calls this.resize(newWidth, currentSize.height), so both change:ports and change:size are triggered in the same flow.
The issue persists even if the user waits a long time between reselecting and adding a port; it is not a timing/race issue with immediate tool refresh.
A workaround that fixes the behaviour is to bypass the normal update path and, after changing ports, call on the element’s view:
element._createPortData() (so the model’s port data is up to date), and
view._refreshPorts()
so that the port DOM is updated regardless of the scheduled PORTS flag.
This suggests that the view’s normal update path (e.g. requestUpdate(PORTS) and/or the handling of RESIZE and PORTS in confirmUpdate) is not applying the port update after a deselect/reselect cycle—possibly because RESIZE and PORTS are batched and the PORTS update is dropped or not executed when RESIZE is also present, or because the view’s state after removeTools() / re-adding tools affects how updates are applied.
Possible root cause (hypothesis)
In ElementView’s confirmUpdate, when both RESIZE and PORTS flags are set (e.g. after addPort + layoutPorts() → resize()), the handling of RESIZE may clear or supersede the PORTS flag so that _renderPorts() is never run. The deselect/reselect cycle (and thus removeTools() and re-adding tools) might leave the view or the paper’s update queue in a state where this happens consistently.
Version
jointjs-plus 4.2
What browsers are you seeing the problem on?
Microsoft Edge
What operating system are you seeing the problem on?
Windows