clientIO / clientIO/joint

Manually hidden toolView shown after calling addTools in async mode

Open
#1,445 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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
grafik
whereas in asynchronous mode the results looks as follows
grafik

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.