6

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.

Roman
  • 1,652
  • 11
  • 15
beayze
  • 113
  • 6

2 Answers2

4

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.

Roman
  • 1,652
  • 11
  • 15
0

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.

fiveelements
  • 3,649
  • 1
  • 17
  • 16
  • Unfortunately, still the same problem. – beayze Jul 26 '19 at 21:13
  • 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. – fiveelements Jul 26 '19 at 21:32