# HG changeset patch
# User Sebastien Jodogne <s.jodogne@gmail.com>
# Date 1606144893 -3600
# Node ID dd50f8a1a2be951772a956c4aca6052e41bf44d9
# Parent  570398585b5f2251f9ec2181e2b5cc2d0cf80ff6
simplifying Vue.js viewport component

diff -r 570398585b5f -r dd50f8a1a2be Applications/StoneWebViewer/WebApplication/app.js
--- a/Applications/StoneWebViewer/WebApplication/app.js	Mon Nov 23 15:39:27 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/app.js	Mon Nov 23 16:21:33 2020 +0100
@@ -43,12 +43,15 @@
 
 Vue.component('viewport', {
   props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'series', 'viewportIndex',
-           'quality', 'framesCount', 'currentFrame', 'showInfo' ],
+           'showInfo' ],
   template: '#viewport-template',
   data: function () {
     return {
       stone: stone,  // To access global object "stone" from "index.html"
       status: 'waiting',
+      currentFrame: 0,
+      framesCount: 0,
+      quality: '',
       cineControls: false,
       cineIncrement: 0,
       cineFramesPerSecond: 30,
@@ -119,10 +122,17 @@
   mounted: function() {
     var that = this;
 
+    window.addEventListener('FrameUpdated', function(args) {
+      if (args.detail.canvasId == that.canvasId) {
+        that.currentFrame = (args.detail.currentFrame + 1);
+        that.framesCount = args.detail.framesCount;
+        that.quality = args.detail.quality;
+      }
+    });
+
     window.addEventListener('SeriesDetailsReady', function(args) {
-      var canvasId = args.detail.canvasId;
-      if (canvasId == that.canvasId) {
-        that.cineFramesPerSecond = stone.GetCineRate(canvasId);
+      if (args.detail.canvasId == that.canvasId) {
+        that.cineFramesPerSecond = stone.GetCineRate(that.canvasId);
       }
     });
 
@@ -268,9 +278,6 @@
       viewport1Top: '0%',
       viewport1Visible: true,
       viewport1Series: {},
-      viewport1Quality: '',
-      viewport1FramesCount: 0,
-      viewport1CurrentFrame: 0,
       
       viewport2Width: '100%',
       viewport2Height: '100%',
@@ -278,9 +285,6 @@
       viewport2Top: '0%',
       viewport2Visible: false,
       viewport2Series: {},
-      viewport2Quality: '',
-      viewport2FramesCount: 0,
-      viewport2CurrentFrame: 0,
 
       viewport3Width: '100%',
       viewport3Height: '100%',
@@ -288,9 +292,6 @@
       viewport3Top: '0%',
       viewport3Visible: false,
       viewport3Series: {},
-      viewport3Quality: '',
-      viewport3FramesCount: 0,
-      viewport3CurrentFrame: 0,
 
       viewport4Width: '100%',
       viewport4Height: '100%',
@@ -298,9 +299,6 @@
       viewport4Top: '0%',
       viewport4Visible: false,
       viewport4Series: {},
-      viewport4Quality: '',
-      viewport4FramesCount: 0,
-      viewport4CurrentFrame: 0,
 
       series: [],
       studies: [],
@@ -761,35 +759,6 @@
 });
 
 
-window.addEventListener('FrameUpdated', function(args) {
-  var canvasId = args.detail.canvasId;
-  var framesCount = args.detail.framesCount;
-  var currentFrame = (args.detail.currentFrame + 1);
-  var quality = args.detail.quality;
-  
-  if (canvasId == 'canvas1') {
-    app.viewport1CurrentFrame = currentFrame;
-    app.viewport1FramesCount = framesCount;
-    app.viewport1Quality = quality;
-  }
-  else if (canvasId == 'canvas2') {
-    app.viewport2CurrentFrame = currentFrame;
-    app.viewport2FramesCount = framesCount;
-    app.viewport2Quality = quality;
-  }
-  else if (canvasId == 'canvas3') {
-    app.viewport3CurrentFrame = currentFrame;
-    app.viewport3FramesCount = framesCount;
-    app.viewport3Quality = quality;
-  }
-  else if (canvasId == 'canvas4') {
-    app.viewport4CurrentFrame = currentFrame;
-    app.viewport4FramesCount = framesCount;
-    app.viewport4Quality = quality;
-  }
-});
-
-
 window.addEventListener('StoneException', function() {
   console.error('Exception catched in Stone');
 });
diff -r 570398585b5f -r dd50f8a1a2be Applications/StoneWebViewer/WebApplication/index.html
--- a/Applications/StoneWebViewer/WebApplication/index.html	Mon Nov 23 15:39:27 2020 +0100
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Mon Nov 23 16:21:33 2020 +0100
@@ -427,9 +427,6 @@
                         v-bind:top="viewport1Top"
                         v-bind:width="viewport1Width"
                         v-bind:height="viewport1Height"
-                        v-bind:quality="viewport1Quality"
-                        v-bind:current-frame="viewport1CurrentFrame"
-                        v-bind:frames-count="viewport1FramesCount"
                         v-bind:show-info="showInfo"
                         v-bind:active="activeViewport==1"></viewport>
               <viewport v-on:updated-series="SetViewportSeries(2, $event)"
@@ -441,9 +438,6 @@
                         v-bind:top="viewport2Top"
                         v-bind:width="viewport2Width"
                         v-bind:height="viewport2Height"
-                        v-bind:quality="viewport2Quality"
-                        v-bind:current-frame="viewport2CurrentFrame"
-                        v-bind:frames-count="viewport2FramesCount"
                         v-bind:show-info="showInfo"
                         v-bind:active="activeViewport==2"></viewport>
               <viewport v-on:updated-series="SetViewportSeries(3, $event)"
@@ -455,9 +449,6 @@
                         v-bind:top="viewport3Top"
                         v-bind:width="viewport3Width"
                         v-bind:height="viewport3Height"
-                        v-bind:quality="viewport3Quality"
-                        v-bind:current-frame="viewport3CurrentFrame"
-                        v-bind:frames-count="viewport3FramesCount"
                         v-bind:show-info="showInfo"
                         v-bind:active="activeViewport==3"></viewport>
               <viewport v-on:updated-series="SetViewportSeries(4, $event)"
@@ -469,9 +460,6 @@
                         v-bind:top="viewport4Top"
                         v-bind:width="viewport4Width"
                         v-bind:height="viewport4Height"
-                        v-bind:quality="viewport4Quality"
-                        v-bind:current-frame="viewport4CurrentFrame"
-                        v-bind:frames-count="viewport4FramesCount"
                         v-bind:show-info="showInfo"
                         v-bind:active="activeViewport==4"></viewport>
             </div>