Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/Resources/Graveyard/print.js @ 1575:e4a52cbbdd70
working on print
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Wed, 23 Sep 2020 17:25:25 +0200 |
parents | |
children | 8c5f9864545f |
comparison
equal
deleted
inserted
replaced
1574:fb5e620430ae | 1575:e4a52cbbdd70 |
---|---|
1 function beforePrint(event){ | |
2 console.log('beforePrint'); | |
3 var $body = $('body'); | |
4 $body.addClass('print'); | |
5 | |
6 // 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 | |
8 // 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); | |
10 var uaParser = new UAParser(); | |
11 var isFirefox = (uaParser.getBrowser().name === 'Firefox'); | |
12 var isIE = (uaParser.getBrowser().name === 'IE'); | |
13 var isEdge = (uaParser.getBrowser().name === 'Edge'); | |
14 console.log('ua parser', uaParser.getBrowser()); | |
15 if(isFirefox || isIE || isEdge){ | |
16 if (0) { | |
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', '297mm'); | |
24 $body.css('width', '210mm'); | |
25 $body.css('height', '297mm'); // Setting "297mm" makes Firefox create 2 pages | |
26 } | |
27 | |
28 // console.log('html size', $html.width(), $html.height()); | |
29 } | |
30 | |
31 if(isIE){ | |
32 window.alert('GENERAL_PARAGRAPHS.INCOMPATIBLE_PRINT_BROWSER'); | |
33 } | |
34 | |
35 console.log('body size', $body.width(), $body.height()); | |
36 | |
37 var $splitpane = $('#viewport'); | |
38 var splitpaneSize = {width: $splitpane.width(), height: $splitpane.height()}; | |
39 console.log(splitpaneSize); | |
40 var panesCount = { | |
41 x: app.layoutCountX, | |
42 y: app.layoutCountY | |
43 } | |
44 | |
45 var panes = []; | |
46 $('#viewport canvas').each(function(key, value) { | |
47 if ($(value).is(':visible')) { | |
48 console.log(value); | |
49 panes.push(value); | |
50 } | |
51 }); | |
52 | |
53 console.log(panesCount); | |
54 | |
55 if (0){ | |
56 for(var i = 0; i < panes.length; i++){ | |
57 var canvas = panes[i]; | |
58 var paneSize = { | |
59 originalWidth: $(canvas).width(), //canvas.getBoundingClientRect().width, | |
60 originalHeight: $(canvas).height(), //canvas.getBoundingClientRect().height, | |
61 originalRatio: 0, | |
62 paneFinalWidth: splitpaneSize.width / panesCount.x, | |
63 paneFinalHeight: splitpaneSize.height / panesCount.y, | |
64 paneFinalRatio: 0, | |
65 canvasFinalWidth: 0, | |
66 canvasFinalHeight: 0, | |
67 canvasFinalRatio: 0 | |
68 }; | |
69 paneSize.originalRatio = paneSize.originalWidth / paneSize.originalHeight; | |
70 paneSize.paneFinalRatio = paneSize.paneFinalWidth / paneSize.paneFinalHeight; | |
71 | |
72 if(paneSize.paneFinalRatio > 1){ | |
73 // If pane width ratio means it's width is larger than it's height | |
74 if(paneSize.paneFinalRatio > paneSize.originalRatio){ | |
75 // the final pane is larger than the original | |
76 // So we should fit on the height to recalc the ratio | |
77 console.log('case 1'); | |
78 paneSize.canvasFinalHeight = paneSize.paneFinalHeight; | |
79 paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio | |
80 } else { | |
81 // the final pane is higher than or equal to the original | |
82 // So we should fit on the width | |
83 console.log('case 2'); | |
84 paneSize.canvasFinalWidth = paneSize.paneFinalWidth; | |
85 paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio | |
86 | |
87 } | |
88 } else { | |
89 // If pane width ratio means it's height is higher than it's height | |
90 if(paneSize.paneFinalRatio > paneSize.originalRatio){ | |
91 // the final pane is larger than the original | |
92 // So we should fit on the height to recalc the ratio | |
93 console.log('case 3'); | |
94 paneSize.canvasFinalHeight = paneSize.paneFinalHeight; | |
95 paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio | |
96 } else { | |
97 // the final pane is higher than or equal to the original | |
98 // So we should fit on the width | |
99 console.log('case 4'); | |
100 paneSize.canvasFinalWidth = paneSize.paneFinalWidth; | |
101 paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio | |
102 | |
103 } | |
104 } | |
105 | |
106 paneSize.canvasFinalRatio = paneSize.canvasFinalWidth / paneSize.canvasFinalHeight; | |
107 console.log('paneSizes:', paneSize, 'splitpaneSize:', splitpaneSize, 'panesCount:', panesCount); | |
108 //canvas.resizeCanvas(paneSize.canvasFinalWidth, paneSize.canvasFinalHeight); | |
109 //canvas.draw(); | |
110 | |
111 console.log(paneSize.canvasFinalWidth + ' ' + paneSize.canvasFinalHeight); | |
112 /*canvas.width = Math.round(paneSize.canvasFinalWidth); | |
113 canvas.height = Math.round(paneSize.canvasFinalHeight);*/ | |
114 | |
115 $(canvas).width(paneSize.canvasFinalWidth); | |
116 $(canvas).height(paneSize.canvasFinalHeight); | |
117 | |
118 | |
119 /* | |
120 https://stackoverflow.com/questions/27863783/javascript-canvas-disappears-after-changing-width | |
121 | |
122 var buffer = document.getElementById('buffer'); | |
123 var context = canvas.getContext('2d'); | |
124 console.log(context); | |
125 var bufferContext = buffer.getContext('2d'); | |
126 console.log(bufferContext); | |
127 | |
128 bufferContext.drawImage(canvas, 0, 0); //Make a copy of the canvas to hidden buffer | |
129 canvas.width = Math.round(paneSize.canvasFinalWidth); | |
130 canvas.height = Math.round(paneSize.canvasFinalHeight); | |
131 context.drawImage(buffer, 0, 0); */ | |
132 } | |
133 } | |
134 else { | |
135 for(var i = 0; i < panes.length; i++){ | |
136 var canvas = panes[i]; | |
137 $(canvas).width($(canvas).parent().width()); | |
138 $(canvas).height($(canvas).parent().height()); | |
139 } | |
140 } | |
141 | |
142 stone.AllViewportsUpdateSize(false); | |
143 $(window).trigger('resize'); // to force screen and canvas recalculation | |
144 }; | |
145 | |
146 function afterPrint(){ | |
147 console.log('afterprint'); | |
148 var $body = $('body'); | |
149 // var $html = $('html'); | |
150 $body.removeClass('print'); | |
151 $body.css('width', '100%'); | |
152 $body.css('height', '100%'); | |
153 $('#viewport canvas').css('width', '100%'); | |
154 $('#viewport canvas').css('height', '100%'); | |
155 stone.AllViewportsUpdateSize(false); | |
156 $(window).trigger('resize'); // to force screen and canvas recalculation | |
157 } | |
158 | |
159 window.addEventListener('beforeprint', function(event){ | |
160 beforePrint(event); | |
161 }); | |
162 | |
163 var printMedia = window.matchMedia('print'); | |
164 printMedia.addListener(function(mql) { | |
165 if(mql.matches) { | |
166 console.log('webkit equivalent of onbeforeprint'); | |
167 beforePrint(); | |
168 } | |
169 }); | |
170 | |
171 window.addEventListener('afterprint', function(){ | |
172 afterPrint(); | |
173 });$ | |
174 | |
175 /*vm.cancelPrintMode = function(){ | |
176 afterPrint(); | |
177 } | |
178 */ |