|
1562
|
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 $body.css('width', '8.5in');
|
|
|
17 $body.css('height', '11in');
|
|
|
18 // console.log('html size', $html.width(), $html.height());
|
|
|
19 }
|
|
|
20
|
|
|
21 if(isIE){
|
|
|
22 window.alert('GENERAL_PARAGRAPHS.INCOMPATIBLE_PRINT_BROWSER');
|
|
|
23 }
|
|
|
24
|
|
|
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 }
|
|
1563
|
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 }
|
|
|
41 });
|
|
|
42
|
|
1562
|
43 console.log(panesCount);
|
|
|
44
|
|
|
45 for(var i = 0; i < panes.length; i++){
|
|
1563
|
46 var canvas = panes[i];
|
|
1562
|
47 var paneSize = {
|
|
1563
|
48 originalWidth: canvas.getBoundingClientRect().width,
|
|
|
49 originalHeight: canvas.getBoundingClientRect().height,
|
|
1562
|
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
|
|
|
61 if(paneSize.paneFinalRatio > 1){
|
|
|
62 // If pane width ratio means it's width is larger than it's height
|
|
|
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);
|
|
1563
|
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
|
|
|
104
|
|
|
105 /*
|
|
|
106 https://stackoverflow.com/questions/27863783/javascript-canvas-disappears-after-changing-width
|
|
|
107
|
|
|
108 var buffer = document.getElementById('buffer');
|
|
|
109 var context = canvas.getContext('2d');
|
|
|
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); */
|
|
1562
|
118 }
|
|
1563
|
119
|
|
|
120 stone.AllViewportsUpdateSize(false);
|
|
|
121 $(window).trigger('resize'); // to force screen and canvas recalculation
|
|
1562
|
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%');
|
|
1563
|
133 $('#viewport canvas').css('width', '100%');
|
|
|
134 $('#viewport canvas').css('height', '100%');
|
|
|
135 stone.AllViewportsUpdateSize(0);
|
|
1562
|
136 $(window).trigger('resize'); // to force screen and canvas recalculation
|
|
|
137 }
|
|
|
138
|
|
|
139 window.addEventListener('beforeprint', function(event){
|
|
|
140 beforePrint(event)
|
|
1563
|
141 });
|
|
|
142
|
|
1562
|
143 var printMedia = window.matchMedia('print');
|
|
|
144 printMedia.addListener(function(mql) {
|
|
|
145 if(mql.matches) {
|
|
|
146 console.log('webkit equivalent of onbeforeprint');
|
|
|
147 beforePrint();
|
|
|
148 }
|
|
|
149 });
|
|
|
150
|
|
|
151 window.addEventListener('afterprint', function(){
|
|
|
152 afterPrint();
|
|
|
153 });$
|
|
|
154
|
|
|
155 /*vm.cancelPrintMode = function(){
|
|
|
156 afterPrint();
|
|
|
157 }
|
|
|
158 */
|
