Mercurial > hg > orthanc-stone

changeset 1563:e0045462a25c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
cont print
author Sebastien Jodogne <s.jodogne@gmail.com>
date Fri, 21 Aug 2020 21:57:54 +0200
parents 2a4a6b967053
children e731e62692a9
files Applications/StoneWebViewer/WebApplication/index.html Applications/StoneWebViewer/WebApplication/print.js
diffstat 2 files changed, 48 insertions(+), 20 deletions(-) [+]
line wrap: on
line diff
--- a/Applications/StoneWebViewer/WebApplication/index.html	Thu Aug 20 18:17:38 2020 +0200
+++ b/Applications/StoneWebViewer/WebApplication/index.html	Fri Aug 21 21:57:54 2020 +0200
@@ -120,7 +120,7 @@
         </div>
 
 
-        <div class="wvLayoutLeft" v-show="leftVisible"
+        <div class="wvLayoutLeft wvPrintExclude" v-show="leftVisible"
              v-bind:class="{ 'wvLayoutLeft--small': leftMode == 'small' }" 
              >
           <div class="wvLayoutLeft__actions" style="z-index:10">
@@ -249,7 +249,7 @@
              v-bind:class="{ 'wvLayout__main--smallleftpadding': leftVisible && leftMode == 'small', 'wvLayout__main--leftpadding': leftVisible && leftMode != 'small' }" 
              >
 
-          <div class="wvToolbar wvToolbar--top">
+          <div class="wvToolbar wvToolbar--top wvPrintExclude">
             <div class="ng-scope inline-object">
               <div class="tbGroup">
                 <div class="tbGroup__toggl">
@@ -404,7 +404,7 @@
           </div>
 
           
-          <div class="wvLayout__splitpane--toolbarAtTop">
+          <div class="wvLayout__splitpane--toolbarAtTop wvPrintFullPage">
             <div id="viewport" class="wvSplitpane">
               <viewport v-on:updated-series="SetViewportSeries(1, $event)"
                         v-on:selected-viewport="activeViewport=1"
@@ -534,12 +534,12 @@
              v-on:dragover="SeriesDragAccept($event)"
              v-on:drop="SeriesDragDrop($event)"
              style="width:100%;height:100%">
-          <div class="wvSplitpane__cell"
+          <div class="wvSplitpane__cell" 
                v-on:click="MakeActive()">
             <div v-show="status == 'ready'"
                  style="position:absolute; left:0; top:0; width:100%; height:100%">
               <!--div style="width: 100%; height: 100%; background-color: red"></div-->
-              <canvas v-bind:id="canvasId"
+              <canvas v-bind:id="canvasId" class="wvPrintViewer"
                       style="position:absolute; left:0; top:0; width:100%; height:100%"
                       oncontextmenu="return false"></canvas>
 
@@ -554,7 +554,7 @@
                     {{ series.tags['0008,0020'] }}<br/>
                     {{ series.tags['0020,0011'] }} | {{ series.tags['0008,103e'] }}
                   </div>
-                  <div class="wv-overlay-bottomleft"
+                  <div class="wv-overlay-bottomleft wvPrintExclude"
                        v-show="framesCount != 0">
                     <button class="btn btn-primary" @click="DecrementFrame()">
                       <i class="fa fa-chevron-circle-left"></i>
@@ -564,7 +564,7 @@
                       <i class="fa fa-chevron-circle-right"></i>
                     </button>
                   </div>
-                  <div class="wv-overlay-bottomright">
+                  <div class="wv-overlay-bottomright wvPrintExclude">
                     <div v-show="quality == stone.DisplayedFrameQuality.NONE"
                          style="display:block;background-color:red;width:1em;height:1em" />
                     <div v-show="quality == stone.DisplayedFrameQuality.LOW"
--- a/Applications/StoneWebViewer/WebApplication/print.js	Thu Aug 20 18:17:38 2020 +0200
+++ b/Applications/StoneWebViewer/WebApplication/print.js	Fri Aug 21 21:57:54 2020 +0200
@@ -24,7 +24,6 @@
 
   console.log('body size', $body.width(), $body.height());
   
-  //var panes = vm.paneManager.getAllPanes();
   var $splitpane = $('#viewport');
   var splitpaneSize = {width: $splitpane.width(), height: $splitpane.height()};
   console.log(splitpaneSize);
@@ -32,14 +31,22 @@
     x: app.layoutCountX,
     y: app.layoutCountY
   }
+
+  var panes = [];
+  $('#viewport canvas').each(function(key, value) {
+    if ($(value).is(':visible')) {
+      console.log(value);
+      panes.push(value);
+    }
+  });
+  
   console.log(panesCount);
   
   for(var i = 0; i < panes.length; i++){
-    var $pane = panes[i];
-    var viewport = vm.viewports[$pane.$$hashKey];
+    var canvas = panes[i];
     var paneSize = {
-      originalWidth: viewport.getCanvasSize().width,
-      originalHeight: viewport.getCanvasSize().height,
+      originalWidth: canvas.getBoundingClientRect().width,
+      originalHeight: canvas.getBoundingClientRect().height,
       originalRatio: 0,
       paneFinalWidth: splitpaneSize.width / panesCount.x,
       paneFinalHeight: splitpaneSize.height / panesCount.y,
@@ -87,12 +94,31 @@
     
     paneSize.canvasFinalRatio = paneSize.canvasFinalWidth / paneSize.canvasFinalHeight;
     console.log('paneSizes:', paneSize, 'splitpaneSize:', splitpaneSize, 'panesCount:', panesCount);
-    // viewport.resizeCanvas(paneSize.canvasFinalWidth, paneSize.canvasFinalHeight);
-    // viewport.draw();
-    var $canvas = $("[data-pane-hashkey='" + $pane.$$hashKey + "']").find('canvas');
-    $canvas.width(paneSize.canvasFinalWidth);
-    $canvas.height(paneSize.canvasFinalHeight);
+    //canvas.resizeCanvas(paneSize.canvasFinalWidth, paneSize.canvasFinalHeight);
+    //canvas.draw();
+
+    console.log(paneSize.canvasFinalWidth + ' ' + paneSize.canvasFinalHeight);
+    canvas.width = Math.round(paneSize.canvasFinalWidth);
+    canvas.height = Math.round(paneSize.canvasFinalHeight);
+
+
+    /*
+      https://stackoverflow.com/questions/27863783/javascript-canvas-disappears-after-changing-width
+
+    var buffer = document.getElementById('buffer');
+    var context = canvas.getContext('2d');
+    console.log(context);
+    var bufferContext = buffer.getContext('2d');
+    console.log(bufferContext);
+    
+    bufferContext.drawImage(canvas, 0, 0); //Make a copy of the canvas to hidden buffer
+    canvas.width = Math.round(paneSize.canvasFinalWidth);
+    canvas.height = Math.round(paneSize.canvasFinalHeight);
+    context.drawImage(buffer, 0, 0); */    
   }  
+
+  stone.AllViewportsUpdateSize(false);
+  $(window).trigger('resize');  // to force screen and canvas recalculation
 };
 
 function afterPrint(){
@@ -104,14 +130,16 @@
   $body.css('height', '100%');
   // $html.css('width', '100%');
   // $html.css('height', '100%');
-  $('.wv-cornerstone-enabled-image canvas').css('width', 'auto');
-  $('.wv-cornerstone-enabled-image canvas').css('height', 'auto');
+  $('#viewport canvas').css('width', '100%');
+  $('#viewport canvas').css('height', '100%');
+  stone.AllViewportsUpdateSize(0);
   $(window).trigger('resize');  // to force screen and canvas recalculation
 }
 
 window.addEventListener('beforeprint', function(event){
   beforePrint(event)
-})
+});
+
 var printMedia = window.matchMedia('print');
 printMedia.addListener(function(mql) {
   if(mql.matches) {