Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/WebApplication/print.js @ 1575:e4a52cbbdd70

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
working on print
author Sebastien Jodogne <s.jodogne@gmail.com>
date Wed, 23 Sep 2020 17:25:25 +0200
parents e0045462a25c
children 8c5f9864545f
comparison
equal deleted inserted replaced
1574:fb5e620430ae 1575:e4a52cbbdd70
1 function beforePrint(event){ 1 function beforePrint(event) {
2 console.log('beforePrint'); 2 var body = $('body');
3 var $body = $('body'); 3 body.addClass('print');
4 $body.addClass('print');
5 4
6 // because firefox does not support/executes codes after the cloned document as been rendered 5 // because firefox does not support/executes codes after the cloned document as been rendered
7 // https://bugzilla.mozilla.org/show_bug.cgi?format=default&id=1048317 6 // https://bugzilla.mozilla.org/show_bug.cgi?format=default&id=1048317
8 // we cannot calculate using the good body size for the clone document 7 // we cannot calculate using the good body size for the clone document
9 // so we have to hardcode the body width (meaning we can only renders in A4 in firefox); 8 // so we have to hardcode the body width (meaning we can only renders in A4 in firefox);
10 var uaParser = new UAParser(); 9 var uaParser = new UAParser();
11 var isFirefox = (uaParser.getBrowser().name === 'Firefox'); 10 var isFirefox = (uaParser.getBrowser().name === 'Firefox');
12 var isIE = (uaParser.getBrowser().name === 'IE'); 11 var isIE = (uaParser.getBrowser().name === 'IE');
13 var isEdge = (uaParser.getBrowser().name === 'Edge'); 12 var isEdge = (uaParser.getBrowser().name === 'Edge');
14 console.log('ua parser', uaParser.getBrowser()); 13 //console.log('ua parser', uaParser.getBrowser());
15 if(isFirefox || isIE || isEdge){ 14
16 $body.css('width', '8.5in'); 15 if (isFirefox || isIE || isEdge) {
17 $body.css('height', '11in'); 16 if (0) {
18 // console.log('html size', $html.width(), $html.height()); 17 // This is Letter
18 body.css('width', '8.5in');
19 body.css('height', '11in');
20 } else {
21 // This is A4
22 body.css('width', '210mm');
23 body.css('height', '296mm'); // If using "297mm", Firefox creates a second blank page
24 }
19 } 25 }
20 26
21 if(isIE){ 27 $('#viewport canvas').each(function(key, canvas) {
22 window.alert('GENERAL_PARAGRAPHS.INCOMPATIBLE_PRINT_BROWSER'); 28 if ($(canvas).is(':visible')) {
23 } 29 $(canvas).width($(canvas).parent().width());
24 30 $(canvas).height($(canvas).parent().height());
25 console.log('body size', $body.width(), $body.height());
26
27 var $splitpane = $('#viewport');
28 var splitpaneSize = {width: $splitpane.width(), height: $splitpane.height()};
29 console.log(splitpaneSize);
30 var panesCount = {
31 x: app.layoutCountX,
32 y: app.layoutCountY
33 }
34
35 var panes = [];
36 $('#viewport canvas').each(function(key, value) {
37 if ($(value).is(':visible')) {
38 console.log(value);
39 panes.push(value);
40 } 31 }
41 }); 32 });
42
43 console.log(panesCount);
44
45 for(var i = 0; i < panes.length; i++){
46 var canvas = panes[i];
47 var paneSize = {
48 originalWidth: canvas.getBoundingClientRect().width,
49 originalHeight: canvas.getBoundingClientRect().height,
50 originalRatio: 0,
51 paneFinalWidth: splitpaneSize.width / panesCount.x,
52 paneFinalHeight: splitpaneSize.height / panesCount.y,
53 paneFinalRatio: 0,
54 canvasFinalWidth: 0,
55 canvasFinalHeight: 0,
56 canvasFinalRatio: 0
57 };
58 paneSize.originalRatio = paneSize.originalWidth / paneSize.originalHeight;
59 paneSize.paneFinalRatio = paneSize.paneFinalWidth / paneSize.paneFinalHeight;
60 33
61 if(paneSize.paneFinalRatio > 1){ 34 stone.FitForPrint();
62 // If pane width ratio means it's width is larger than it's height 35 };
63 if(paneSize.paneFinalRatio > paneSize.originalRatio){
64 // the final pane is larger than the original
65 // So we should fit on the height to recalc the ratio
66 console.log('case 1');
67 paneSize.canvasFinalHeight = paneSize.paneFinalHeight;
68 paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio
69 } else {
70 // the final pane is higher than or equal to the original
71 // So we should fit on the width
72 console.log('case 2');
73 paneSize.canvasFinalWidth = paneSize.paneFinalWidth;
74 paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio
75
76 }
77 } else {
78 // If pane width ratio means it's height is higher than it's height
79 if(paneSize.paneFinalRatio > paneSize.originalRatio){
80 // the final pane is larger than the original
81 // So we should fit on the height to recalc the ratio
82 console.log('case 3');
83 paneSize.canvasFinalHeight = paneSize.paneFinalHeight;
84 paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio
85 } else {
86 // the final pane is higher than or equal to the original
87 // So we should fit on the width
88 console.log('case 4');
89 paneSize.canvasFinalWidth = paneSize.paneFinalWidth;
90 paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio
91
92 }
93 }
94
95 paneSize.canvasFinalRatio = paneSize.canvasFinalWidth / paneSize.canvasFinalHeight;
96 console.log('paneSizes:', paneSize, 'splitpaneSize:', splitpaneSize, 'panesCount:', panesCount);
97 //canvas.resizeCanvas(paneSize.canvasFinalWidth, paneSize.canvasFinalHeight);
98 //canvas.draw();
99
100 console.log(paneSize.canvasFinalWidth + ' ' + paneSize.canvasFinalHeight);
101 canvas.width = Math.round(paneSize.canvasFinalWidth);
102 canvas.height = Math.round(paneSize.canvasFinalHeight);
103 36
104 37
105 /* 38 function afterPrint() {
106 https://stackoverflow.com/questions/27863783/javascript-canvas-disappears-after-changing-width 39 var body = $('body');
107 40 body.removeClass('print');
108 var buffer = document.getElementById('buffer'); 41 body.css('width', '100%');
109 var context = canvas.getContext('2d'); 42 body.css('height', '100%');
110 console.log(context);
111 var bufferContext = buffer.getContext('2d');
112 console.log(bufferContext);
113
114 bufferContext.drawImage(canvas, 0, 0); //Make a copy of the canvas to hidden buffer
115 canvas.width = Math.round(paneSize.canvasFinalWidth);
116 canvas.height = Math.round(paneSize.canvasFinalHeight);
117 context.drawImage(buffer, 0, 0); */
118 }
119
120 stone.AllViewportsUpdateSize(false);
121 $(window).trigger('resize'); // to force screen and canvas recalculation
122 };
123
124 function afterPrint(){
125 console.log('afterprint');
126 var $body = $('body');
127 // var $html = $('html');
128 $body.removeClass('print');
129 $body.css('width', '100%');
130 $body.css('height', '100%');
131 // $html.css('width', '100%');
132 // $html.css('height', '100%');
133 $('#viewport canvas').css('width', '100%'); 43 $('#viewport canvas').css('width', '100%');
134 $('#viewport canvas').css('height', '100%'); 44 $('#viewport canvas').css('height', '100%');
135 stone.AllViewportsUpdateSize(0); 45
136 $(window).trigger('resize'); // to force screen and canvas recalculation 46 stone.FitForPrint();
137 } 47 }
138 48
139 window.addEventListener('beforeprint', function(event){ 49
140 beforePrint(event) 50 window.addEventListener('beforeprint', function(event) {
51 beforePrint(event);
141 }); 52 });
53
142 54
143 var printMedia = window.matchMedia('print'); 55 var printMedia = window.matchMedia('print');
144 printMedia.addListener(function(mql) { 56 printMedia.addListener(function(mql) {
145 if(mql.matches) { 57 if (mql.matches) {
146 console.log('webkit equivalent of onbeforeprint'); 58 // webkit equivalent of onbeforeprint
147 beforePrint(); 59 beforePrint();
148 } 60 }
149 }); 61 });
150 62
151 window.addEventListener('afterprint', function(){ 63
64 window.addEventListener('afterprint', function() {
152 afterPrint(); 65 afterPrint();
153 });$ 66 });
154 67
155 /*vm.cancelPrintMode = function(){ 68
69 /*vm.cancelPrintMode = function() {
156 afterPrint(); 70 afterPrint();
157 } 71 }
158 */ 72 */