# HG changeset patch
# User Edouard Tisserant
# Date 1657620772 -7200
# Node ID 406eb8a13648b67043de7696ef4787caffe3c0b5
# Parent  4ee33be5b8b6f65b900467f7c5f8b53bf020db79
SVGHMI: re-organize animate() to ensure that page fade-out is always visible, also make fade-out curve more aggressive to enhance visual feedback.

diff -r 4ee33be5b8b6 -r 406eb8a13648 svghmi/svghmi.js
--- a/svghmi/svghmi.js	Fri Jul 08 11:58:10 2022 +0200
+++ b/svghmi/svghmi.js	Tue Jul 12 12:12:52 2022 +0200
@@ -59,32 +59,49 @@
 // Called on requestAnimationFrame, modifies DOM
 var requestAnimationFrameID = null;
 function animate() {
-    // Do the page swith if any one pending
-    if(page_switch_in_progress){
-        if(current_subscribed_page != current_visible_page){
-            switch_visible_page(current_subscribed_page);
-        }
-
-        page_switch_in_progress = false;
-
-        if(page_fading_in_progress){
-            svg_root.classList.remove("fade-out-page");
-            page_fading_in_progress = false;
-        }
-    }
-
-    while(widget = need_cache_apply.pop()){
-        widget.apply_cache();
-    }
-
-    if(jumps_need_update) update_jumps();
-
-    apply_updates();
-
-    pending_widget_animates.forEach(widget => widget._animate());
-    pending_widget_animates = [];
+    let rearm = true;
+    do{
+        if(page_fading == "pending" || page_fading == "forced"){
+            if(page_fading == "pending")
+                svg_root.classList.add("fade-out-page");
+            page_fading = "in_progress";
+            if(page_fading_args.length)
+                setTimeout(function(){
+                    switch_page(...page_fading_args);
+                },1);
+            break;
+        }
+
+        // Do the page swith if pending
+        if(page_switch_in_progress){
+            if(current_subscribed_page != current_visible_page){
+                switch_visible_page(current_subscribed_page);
+            }
+
+            page_switch_in_progress = false;
+
+            if(page_fading == "in_progress"){
+                svg_root.classList.remove("fade-out-page");
+                page_fading = "off";
+            }
+        }
+
+        while(widget = need_cache_apply.pop()){
+            widget.apply_cache();
+        }
+
+        if(jumps_need_update) update_jumps();
+
+        apply_updates();
+
+        pending_widget_animates.forEach(widget => widget._animate());
+        pending_widget_animates = [];
+        rearm = false;
+    } while(0);
 
     requestAnimationFrameID = null;
+
+    if(rearm) requestHMIAnimation();
 }
 
 function requestHMIAnimation() {
@@ -212,14 +229,17 @@
 }
 
 
-var page_fading_in_progress = false;
+var page_fading = "off";
+var page_fading_args = "off";
 function fading_page_switch(...args){
-    svg_root.classList.add("fade-out-page");
-    page_fading_in_progress = true;
-
-    setTimeout(function(){
-        switch_page(...args);
-    },1);
+    if(page_fading == "in_progress")
+        page_fading = "forced";
+    else
+        page_fading = "pending";
+    page_fading_args = args;
+
+    requestHMIAnimation();
+
 }
 document.body.style.backgroundColor = "black";
 
diff -r 4ee33be5b8b6 -r 406eb8a13648 svghmi/widget_jump.ysl2
--- a/svghmi/widget_jump.ysl2	Fri Jul 08 11:58:10 2022 +0200
+++ b/svghmi/widget_jump.ysl2	Tue Jul 12 12:12:52 2022 +0200
@@ -145,7 +145,7 @@
 emit "cssdefs:jump"
 ||
 .fade-out-page {
-    animation: fadeOut 0.6s both;
+    animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;
 }
 
 @keyframes fadeOut {