From e2e04e196c5e5e6d7c5dbda6b03f607be4d664eb Mon Sep 17 00:00:00 2001
From: "Henri J. Norden" <55378880+Henri-J-Norden@users.noreply.github.com>
Date: Sat, 27 Sep 2025 01:11:54 +0300
Subject: [PATCH 1/2] Allows stepping backwards from stopped animation

---
 src/js/structurizr-diagram.js | 20 +++++++++++++++-----
 src/jsp/diagrams.jsp          |  4 ++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/js/structurizr-diagram.js b/src/js/structurizr-diagram.js
index 6d9092e..4735e65 100644
--- a/src/js/structurizr-diagram.js
+++ b/src/js/structurizr-diagram.js
@@ -5204,8 +5204,12 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
 
     this.stepBackwardInAnimation = function() {
         if (this.currentViewIsDynamic()) {
-            if (this.animationStarted()) {
-
+            if (!this.animationStarted()) {
+                this.startAnimation(false);
+                animationIndex = linesToAnimate.length - 1;
+            }
+            else
+            {
                 if (animationIndex > 0) {
                     animationIndex--;
 
@@ -5223,15 +5227,22 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                         animationIndex++;
                     }
                 }
+            }
 
                 if (animationIndex >= 0) {
                     this.continueAnimation(false);
                 } else {
                     this.stopAnimation();
                 }
-            }
         } else if (this.currentViewHasAnimation()) {
-            if (this.animationStarted()) {
+            if (!this.animationStarted()) {
+                this.startAnimation(false);
+                animationIndex = animationSteps.length;
+                hideAllElements(1.0);
+                hideAllLines(1.0);
+                unfadeAllElements();
+            }
+
                 if (animationIndex === 1) {
                     this.stopAnimation();
                 } else if (animationIndex > 1) {
@@ -5254,7 +5265,6 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                     animationIndex--;
                     this.continueAnimation(false);
                 }
-            }
         }
     };
 
diff --git a/src/jsp/diagrams.jsp b/src/jsp/diagrams.jsp
index ece8ae1..1f446d7 100644
--- a/src/jsp/diagrams.jsp
+++ b/src/jsp/diagrams.jsp
@@ -450,7 +450,7 @@
         if (view.type === "Dynamic" || (view.animations && view.animations.length > 1)) {
             $('.dynamicDiagramButton').removeClass("hidden");
 
-            $('.stepBackwardAnimationButton').attr("disabled", true);
+            $('.stepBackwardAnimationButton').attr("disabled", false);
             $('.startAnimationButton').attr("disabled", false);
             $('.stopAnimationButton').attr("disabled", true);
             $('.stepForwardAnimationButton').attr("disabled", false);
@@ -1557,7 +1557,7 @@
     }
 
     function animationStopped() {
-        $('.stepBackwardAnimationButton').prop("disabled", true);
+        $('.stepBackwardAnimationButton').prop("disabled", false);
         $('.startAnimationButton').prop("disabled", false);
         $('.stopAnimationButton').attr("disabled", true);
     }

From f98ab608e3fe1cb410e3e05e977731dd295edaf9 Mon Sep 17 00:00:00 2001
From: "Henri J. Norden" <55378880+Henri-J-Norden@users.noreply.github.com>
Date: Sat, 27 Sep 2025 01:12:23 +0300
Subject: [PATCH 2/2] Fixes code indentation

---
 src/js/structurizr-diagram.js | 50 +++++++++++++++++------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/js/structurizr-diagram.js b/src/js/structurizr-diagram.js
index 4735e65..8c3d62c 100644
--- a/src/js/structurizr-diagram.js
+++ b/src/js/structurizr-diagram.js
@@ -5229,11 +5229,11 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                 }
             }
 
-                if (animationIndex >= 0) {
-                    this.continueAnimation(false);
-                } else {
-                    this.stopAnimation();
-                }
+            if (animationIndex >= 0) {
+                this.continueAnimation(false);
+            } else {
+                this.stopAnimation();
+            }
         } else if (this.currentViewHasAnimation()) {
             if (!this.animationStarted()) {
                 this.startAnimation(false);
@@ -5243,28 +5243,28 @@ structurizr.ui.Diagram = function(id, diagramIsEditable, constructionCompleteCal
                 unfadeAllElements();
             }
 
-                if (animationIndex === 1) {
-                    this.stopAnimation();
-                } else if (animationIndex > 1) {
-                    animationIndex--;
-
-                    var animationStep = animationSteps[animationIndex];
-                    if (animationStep) {
-                        if (animationStep.elements) {
-                            animationStep.elements.forEach(function (elementId) {
-                                hideElement(elementId, "0.0");
-                            });
-                        }
-                        if (animationStep.relationships) {
-                            animationStep.relationships.forEach(function(relationshipId) {
-                                hideLine(relationshipId, "0.0");
-                            });
-                        }
+            if (animationIndex === 1) {
+                this.stopAnimation();
+            } else if (animationIndex > 1) {
+                animationIndex--;
+
+                var animationStep = animationSteps[animationIndex];
+                if (animationStep) {
+                    if (animationStep.elements) {
+                        animationStep.elements.forEach(function (elementId) {
+                            hideElement(elementId, "0.0");
+                        });
+                    }
+                    if (animationStep.relationships) {
+                        animationStep.relationships.forEach(function(relationshipId) {
+                            hideLine(relationshipId, "0.0");
+                        });
                     }
-
-                    animationIndex--;
-                    this.continueAnimation(false);
                 }
+
+                animationIndex--;
+                this.continueAnimation(false);
+            }
         }
     };