Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Graveyard/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
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 */