Manually hidden toolView shown after calling addTools in async mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 5.4k
- Forks
- 893
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 26
Description
I found another weird case similar to #1320 when using the asynchronous paper mode: After adding a toolsView to an element, I want to (conditionally) hide one of the toolViews (in this example the "Remove" button). This works as expected in the normal synchronous rendering mode, but fails if async: true is set in the paper options.
Here is a modified code from the Hello-world-example to reproduce the problem:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
async: true,
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
const elementTools = new joint.dia.ToolsView({
tools: [
new joint.elementTools.Boundary({ focusOpacity: 0.5 }),
new joint.elementTools.Remove({ offset: {x: -10, y: -10} })
]
});
paper.on('element:pointerdown', (elemView) => {
elemView.addTools(elementTools);
elementTools.tools[1].hide(); //only works with async: false
});
In synchronous mode, the remove button is correctly hidden

whereas in asynchronous mode the results looks as follows

I've already looked into the code and suspect https://github.com/clientIO/joint/blob/master/src/dia/ToolsView.mjs#L60 or https://github.com/clientIO/joint/blob/master/src/dia/ToolsView.mjs#L52 to cause the problem as this code might get executed after the manual hiding. A solution might be to (re)set all _visible flags of the toolViews to true directly (synchronously) when calling addTools.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/dia/ToolsView.mjs around lines 52 and 60, then reproduce the example using Paper with async: true and compare it with synchronous rendering. Verify that hiding elementTools.tools[1] after addTools remains effective in asynchronous mode; done means the Remove tool stays hidden.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100