Undo Redo With Diagram.isReadOnly Property

GoJS
1

In this sample Draggable Link, If any modification occurs then it will detect in this listener myDiagram.addDiagramListener(“Modified”, function(e) {…});

So, I have added diagram default to readOnly Property by assigning

      myDiagram.isReadOnly = true;

and also added one check box for enabling and disabling the readOnly property.

and Added following lines in Modified Listener

        console.log(e.diagram.commandHandler.canUndo())
	console.log(e.diagram.commandHandler.canRedo())

Here is the issue,

  1. Default diagram will be read only
  2. Clicked on check box to make diagram editable
  3. Did some modification in diagram and then in console it prints from Modified Listener
    true
    false
  4. I tried Undo and it prints
    false
    false // Here actually I expected true due to redo operation but returns false
  5. I tried Redo and prints
    true
    false
  6. After that I tried undo and redo but it’s not detecting in console.

Can I the why this behaviour happens? I understand that due to read-only property this is behaving like this. How to get the behaviour as expected

  1. After Modify → true, false
  2. After Undo → false, true
  3. After Redo → true, false
  4. After Undo → false, true
    and so…
2

Perhaps the problem is that the “Modified” DiagramEvent listener is only raised after the value of Diagram.isModified has changed.

It is not raised whenever the diagram is modified.

Perhaps you are interested in a Changed listener on the Model or on the Diagram. It depends on what you want to do. What are you trying to accomplish?

Note in GoJS Commands -- Northwoods Software how the “Undo” and “Redo” Buttons are automatically enabled/disabled.

3

I am trying to get undo and redo status once the model as been modified.

But I am facing issue when the diagram by default configured with readonly to true and after that changed to editable and doing operations like move, undo, redo then I am not get the exact status of undo redo

4

You have probably noticed by now that the “Modified” DiagramEvent is raised only once, when Diagram.isModified changes from false to true. Further changes to the diagram by the user will not cause the “Modified” DiagramEvent to be raised until you set Diagram.isModified to false.

Are you looking to update some user interface elements as the user makes changes to the diagram/model and as the user performs undo or redo? GoJS Commands -- Northwoods Software demonstrates that.

5

Can you check this sample, undo_Reo - JSFiddle - Code Playground

  1. By Default I set myDiagram.isReadOnly =True
  2. Given check box to make diagram readOnly to true or false

Try this:

  1. Uncheck the readOnly Property to make diagram editable
  2. Move the object
  3. Undo button is enabled and so click on undo button
  4. After Undo operation redo button must be enabled but not enabling.

Could you please explain me this why redo is not occurring? I trust that it is because of readOnly property.

I need to make that redo button to be enabled mean that I don’t want make the diagram to be readOnly by undo operation.

Is this possible?

6

Oh, you’re not setting Diagram.isReadOnly within a transaction, so that when the user moves a node, that transaction effectively includes the earlier changes not included in a transaction.

So when the Undo happens, not only is the move undone, but so is the setting of Diagram.isReadOnly.

Hmmm, do you want setting Diagram.isReadOnly to be undoable? If so, wrap it in a transaction. If not, temporarily set Diagram.skipsUndoManager to true around the setting.

This is why we frequently (but I hope not too annoyingly) tell people to make all changes within a transaction.

7

Tried this,

  var oldValue = myDiagram.skipsUndoManager;
  myDiagram.skipsUndoManager = true
  myDiagram.startTransaction("change ReadOnly Property");
  myDiagram.isReadOnly =  event.target.checked;  // true or false
  myDiagram.commitTransaction("change ReadOnly Property");
  myDiagram.skipsUndoManager = oldValue;

It’s works fine. Thank you so much.