Mercurial > hg > orthanc-stone

changeset 2014:a7b5cb068fb8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
click-drag is available on the vertical slider
author Sebastien Jodogne <s.jodogne@gmail.com>
date Sat, 03 Dec 2022 07:44:09 +0100
parents dbafd535136e
children d0e68dd335dd
files Applications/StoneWebViewer/NEWS Applications/StoneWebViewer/WebApplication/app.js Applications/StoneWebViewer/WebApplication/index.html
diffstat 3 files changed, 35 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/Applications/StoneWebViewer/NEWS	Fri Dec 02 18:52:50 2022 +0100
+++ b/Applications/StoneWebViewer/NEWS	Sat Dec 03 07:44:09 2022 +0100
@@ -1,6 +1,7 @@
 Pending changes in the mainline
 ===============================
 
+* Click-drag is available on the vertical slider
 * Annotations are grouped into one submenu for narrow screens
 * Fix measurement of arcs
 * Width of the vertical slider has doubled to ease user interactions
--- a/Applications/StoneWebViewer/WebApplication/app.js	Fri Dec 02 18:52:50 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Sat Dec 03 07:44:09 2022 +0100
@@ -139,6 +139,24 @@
 }
 
 
+/**
+ * The "mousemove" and "mouseup" events were added in Stone Web viewer
+ * 2.5 to allow click/drag on the vertical scrollbar.
+ **/
+var activeVerticalScrollbarViewport = null;
+var activeVerticalScrollbarTarget = null;
+
+window.addEventListener('mousemove', function(event) {
+  if (activeVerticalScrollbarViewport !== null) {
+    activeVerticalScrollbarViewport.ClickVerticalScrollbar(event, activeVerticalScrollbarTarget);
+    event.preventDefault();
+  }
+});
+
+window.addEventListener('mouseup', function(event) {
+  activeVerticalScrollbarViewport = null;
+});
+
 
 Vue.component('viewport', {
   props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'content', 'viewportIndex',
@@ -412,11 +430,22 @@
         this.cineTimeoutId = setTimeout(this.CineCallback, 1000.0 / this.cineFramesPerSecond);
       }     
     },
-    ClickVerticalScrollbar: function(event) {
-      var offset = event.currentTarget.getClientRects()[0];
+    ClickVerticalScrollbar: function(event, target) {
+      if (target == undefined) {
+        target = event.currentTarget;
+        activeVerticalScrollbarViewport = this;
+        activeVerticalScrollbarTarget = target;
+      }
+      
+      var offset = target.getClientRects()[0];
       var y = event.clientY - offset.top;
-      var height = event.currentTarget.offsetHeight;
-      this.currentFrame = Math.min(this.numberOfFrames - 1, Math.floor(y * this.numberOfFrames / (height - 1)));
+      var height = target.offsetHeight;
+      var frame = Math.min(this.numberOfFrames - 1, Math.floor(y * this.numberOfFrames / (height - 1)));
+      
+      if (frame >= 0 &&
+          frame < this.numberOfFrames) {
+        this.currentFrame = frame;
+      }
     }
   }
 });
--- a/Applications/StoneWebViewer/WebApplication/index.html	Fri Dec 02 18:52:50 2022 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Sat Dec 03 07:44:09 2022 +0100
@@ -759,7 +759,7 @@
 
               <div v-show="showInfo">
                 <div v-if="numberOfFrames > 1" class="wvVerticalScrollbar"
-                       v-on:click="ClickVerticalScrollbar($event)">
+                     v-on:mousedown="ClickVerticalScrollbar($event)">
                   <div class="wvVerticalScrollbarHighlight"
                        v-bind:style="{ top: (currentFrame / (numberOfFrames - 1) * 95.0) + '%' }">
                   </div>