Am using javascript Diagramming in Angular 13 application, I have integrated undo/Redo functions with function but it not working but in logs prints as "No actions to undo."  Here are my functions am i doing anything wrong !!

initializeDiagram() {
    const element = document.getElementById('diagram');
 
    if (element instanceof HTMLCanvasElement) {
      this.diagramView = DiagramView.create(element);
    } else {
      console.error("Element with ID 'diagram' is not a canvas or does not exist.");
      return;
    }
 
    // DiagramView Configuration
    this.diagramView.licenseKey = this.licenseKey;
    this.diagramView.allowInplaceEdit = true;
    this.diagramView.routeLinks = true;
    this.diagramView.showGrid = true;
    this.diagramView.allowUndo = true;
    this.diagramView.behavior = Diagramming.Behavior.Modify;
    this.diagramView.behavior = Diagramming.Behavior.DrawLinks;
 
    // Initialize Diagram
    this.diagram = this.diagramView.diagram;
    this.diagram.width = 1300;
    this.diagram.height = 600;
 
    // Enable UndoManager
    if (this.diagram.undoManager) {
      this.diagram.undoManager.enabled = true;
      this.diagram.undoManager.maxUndoLevels = 50; // Optional
      console.log("UndoManager enabled");
    } else {
      console.error("UndoManager is not available in the diagram object.");
    }
 
    // Debugging: Log UndoManager state after operations
    this.diagram.addEventListener(Events.nodeCreated, () => this.logUndoRedoState());
    this.diagram.addEventListener(Events.nodeModified, () => this.logUndoRedoState());
    this.diagram.addEventListener(Events.nodeDeleted, () => this.logUndoRedoState());
    this.diagram.addEventListener(Events.linkCreated, () => this.logUndoRedoState());
    this.diagram.addEventListener(Events.linkDeleted, () => this.logUndoRedoState());
 
    // Initialize Undo/Redo Buttons
    this.initializeUndoRedoButtons();
 
    // Attach zoom and other controls
    this.initializeZoomControls();
  }

initializeUndoRedoButtons() {
    const undoButton = document.getElementById("undoButton");
    const redoButton = document.getElementById("redoButton");
 
    if (undoButton) {
      undoButton.addEventListener("click", () => {
        if (this.diagram.undoManager?.canUndo()) {
          this.diagram.undoManager.undo();
          console.log("Undo performed.");
        } else {
          console.warn("No actions to undo.");
        }
      });
    }
 
    if (redoButton) {
      redoButton.addEventListener("click", () => {
        if (this.diagram.undoManager?.canRedo()) {
          this.diagram.undoManager.redo();
          console.log("Redo performed.");
        } else {
          console.warn("No actions to redo.");
        }
      });
    }
  }

Hi Slavcho,

Even i have tried this.diagramView.undoEnabled = true;, But still its not working, is there any alternative or Method i can try?

Thank you, Its working only for the nodes created, Undo will not work for links created and text added inside nodes?

Yes links Undo/Redo is working at my end too, Is it possible to undo text inside nodes??

Thank you Slavcho, I'll check it out and let know if its working.

Hi,

Here's the diagramming package in node_modules format, you can overwrite the folder under node_modules/@mindfusion:

https://mindfusion.eu/_beta/modules_451.zip

Assuming the other dependent packages there (common, graphs, etc) are from v4.5 of the diagram.

Regards,
Slavcho
Mindfusion