javascriptjointjsrappid

Unhighlight all cellViews on paper - jointjs


We recently added the highlight feature of jointjs to show the user which cellView(s) are currently highlighted and selected. However, if the user clicks outside we want to unhighlight all cellView(s) which are drawn on the paper. After investigating the official documentation we couldn't end up with a solution for our requirement.

The code for highlighting the cellView(s) is:

this.paper.on('cell:pointerclick', (cellView: any) => {
    cellView.highlight();
});

Solution

  • To solve this issue we iterate over all cellViews which are shown on the current paper (area) and call the unhighlight function. This logic is placed wihtin the blank:pointerdown callback - so that we handle all clicks outside of actual cellViews.

    this.paper.on('blank:pointerdown', (evt, x, y) => {
                   this.paper.findViewsInArea(this.paper.getArea()).forEach(cell => {
                   cell.unhighlight();
                 });
            });
    

    Hope this helps.