Change label of a JointJS cell by clicking on it and type in a new label

Question

I created a diagram with JointJS cells and now I want to change the label of a cell by clicking on it. When I click on a cell a modal pops up and I enter a new text. The text will be stored in a variable. When the modal closes the label of the clicked cell will be changed to the value of the variable.

Now the problem: Let's say I have four cells and every cell has the label "a". I click on the first cell and change the label to "b". That works. Now I change the label of the second cell to "c" and now the problem shows up. Both the first and the second cell have the new label "c". If I change the label of the third cell to "d" all the three modified cells have the new label "d".

My approach: I have an event listener that executes the function handleClickOnCell() when I click on a cell. The function passes the clicked cell as argument.

paper.on('cell:pointerclick', handleClickOnCell);

Inside the function handleClickOnCell() a modal pop up gets triggered. I type in a text and the text value gets assigned to var textLabel . That works. When the modal hides the label gets changed to the value of labelText:

function handleClickOnCell(e) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    e.model.attr('label/text', labelText);
  });
};

Changing the label works but when I change the label of a cell all the previous cells which I have already changed the label one time also change their label to the new label.

I don't know what the problem is. I assume it is a reference problem but I don't know how to fix it. And I would be grateful for tips or recommendations for a more suitable approach.

Am‚lie

Answer 1

Try to remove the handler after the label is set. Right now, when the user clicks the cell a new handler is added (and previous handlers remain).

function handleClickOnCell(e) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    e.model.attr('label/text', labelText);
    $('#captionModal').off('hidden.bs.modal'); // remove this handler
  });
};

Also $('#captionModal').one(...); should does the trick.

Socha

Answer 2

Try this:

paper.on('cell:pointerclick', function (cellView, event, x, y) {
  $('#captionModal').modal('show');
  $('#captionModal').on('hidden.bs.modal', function () {
    cellView.model.attr('label/text', labelText);
  });
});

The view is passed to the handler and you can change the model of the view.

Taeniacide

Unfortunately, still the same problem. – Am‚lie

In addition to cellView, take event, x and y as parameters in the handler function. Log the model of cellView, event, and the x, y coordinates and see if you get any clue from these values. – Taeniacide