diff Applications/StoneWebViewer/WebApplication/app.js @ 2014:a7b5cb068fb8

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
line wrap: on
line diff
--- 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;
+      }
     }
   }
 });