Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/print.js @ 1575:e4a52cbbdd70
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 */ |