# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1670055739 -3600
# Node ID fe9999d6a6369fa67db74371aa175a7cba57ecc7
# Parent  6099c7925202fb89ba79ddd668892526e7ba5dbf
handling of left, right, and space keys

diff -r 6099c7925202 -r fe9999d6a636 Applications/StoneWebViewer/WebApplication/app.js
--- a/Applications/StoneWebViewer/WebApplication/app.js	Sat Dec 03 08:45:36 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Sat Dec 03 09:22:19 2022 +0100
@@ -350,6 +350,12 @@
         that.windowingWidth = args.detail.windowingWidth;
       }
     });
+
+    window.addEventListener('CineSwitch', function(args) {
+      if (that.active) {
+        that.CineSwitch();
+      }
+    });
   },
   methods: {
     DragDrop: function(event) {
@@ -372,7 +378,7 @@
     },
     CinePlay: function() {
       this.cineControls = true;
-      this.cineIncrement = 1;
+      this.cineIncrement = -1;
       this.UpdateCine();
     },
     CinePause: function() {
@@ -386,9 +392,16 @@
     },
     CineBackward: function() {
       this.cineControls = true;
-      this.cineIncrement = -1;
+      this.cineIncrement = 1;
       this.UpdateCine();
     },
+    CineSwitch: function() {
+      if (this.cineIncrement != 0) {
+        this.CinePause();
+      } else {
+        this.CinePlay();
+      }
+    },
     UpdateCine: function() {
       // Cancel the previous cine loop, if any
       if (this.cineTimeoutId !== null) {
@@ -751,6 +764,9 @@
           virtualSeriesId: info.virtualSeriesId
         };
       }
+
+      // Give the focus to this viewport (new in Stone Web viewer 2.5)
+      this.activeViewport = viewportIndex;
     },
     
     ClickSeries: function(seriesIndex) {
@@ -1241,6 +1257,42 @@
                                 args.detail.labelX, args.detail.labelY);
       }
     });
+
+    window.addEventListener('keydown', function(event) {
+      var canvas = that.GetActiveCanvas();
+      if (canvas != '') {
+        switch (event.key) {
+        case 'Left':
+        case 'ArrowLeft':
+          stone.DecrementFrame(canvas, false);
+          event.preventDefault();
+          break;
+
+        case 'Right':
+        case 'ArrowRight':
+          stone.IncrementFrame(canvas, false);
+          event.preventDefault();
+          break;
+
+        case 'Up':
+        case 'ArrowUp':
+          break;
+
+        case 'Down':
+        case 'ArrowDown':
+          break;
+
+        case ' ':
+        case 'Space':
+          dispatchEvent(new CustomEvent('CineSwitch', { }));
+          event.preventDefault();
+          break;
+
+        default:
+          break;
+        }
+      }
+    });
   }
 });
 
diff -r 6099c7925202 -r fe9999d6a636 Applications/StoneWebViewer/WebApplication/index.html
--- a/Applications/StoneWebViewer/WebApplication/index.html	Sat Dec 03 08:45:36 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Sat Dec 03 09:22:19 2022 +0100
@@ -816,13 +816,13 @@
                         </button>
                       </div>
                       <div class="btn-group btn-group-sm" role="group">                        
-                        <button type="button" class="btn btn-primary" @click="CinePlay()">
+                        <button type="button" class="btn btn-primary" @click="CineBackward()">
                           <i class="fas fa-play fa-flip-horizontal"></i>
                         </button>
                         <button type="button" class="btn btn-primary" @click="CinePause()">
                           <i class="fas fa-pause"></i>
                         </button>
-                        <button type="button" class="btn btn-primary" @click="CineBackward()">
+                        <button type="button" class="btn btn-primary" @click="CinePlay()">
                           <i class="fas fa-play"></i>
                         </button>
                       </div>