|
1575
|
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 */
|
