Mercurial > hg > orthanc-stone
diff 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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Applications/StoneWebViewer/Resources/Graveyard/print.js Wed Sep 23 17:25:25 2020 +0200 @@ -0,0 +1,178 @@ +function beforePrint(event){ + console.log('beforePrint'); + var $body = $('body'); + $body.addClass('print'); + + // because firefox does not support/executes codes after the cloned document as been rendered + // https://bugzilla.mozilla.org/show_bug.cgi?format=default&id=1048317 + // we cannot calculate using the good body size for the clone document + // so we have to hardcode the body width (meaning we can only renders in A4 in firefox); + var uaParser = new UAParser(); + var isFirefox = (uaParser.getBrowser().name === 'Firefox'); + var isIE = (uaParser.getBrowser().name === 'IE'); + var isEdge = (uaParser.getBrowser().name === 'Edge'); + console.log('ua parser', uaParser.getBrowser()); + if(isFirefox || isIE || isEdge){ + if (0) { + // This is Letter + $body.css('width', '8.5in'); + $body.css('height', '11in'); + } else { + // This is A4 + //$body.css('width', '210mm'); + //$body.css('height', '297mm'); + $body.css('width', '210mm'); + $body.css('height', '297mm'); // Setting "297mm" makes Firefox create 2 pages + } + + // console.log('html size', $html.width(), $html.height()); + } + + if(isIE){ + window.alert('GENERAL_PARAGRAPHS.INCOMPATIBLE_PRINT_BROWSER'); + } + + console.log('body size', $body.width(), $body.height()); + + var $splitpane = $('#viewport'); + var splitpaneSize = {width: $splitpane.width(), height: $splitpane.height()}; + console.log(splitpaneSize); + var panesCount = { + x: app.layoutCountX, + y: app.layoutCountY + } + + var panes = []; + $('#viewport canvas').each(function(key, value) { + if ($(value).is(':visible')) { + console.log(value); + panes.push(value); + } + }); + + console.log(panesCount); + + if (0){ + for(var i = 0; i < panes.length; i++){ + var canvas = panes[i]; + var paneSize = { + originalWidth: $(canvas).width(), //canvas.getBoundingClientRect().width, + originalHeight: $(canvas).height(), //canvas.getBoundingClientRect().height, + originalRatio: 0, + paneFinalWidth: splitpaneSize.width / panesCount.x, + paneFinalHeight: splitpaneSize.height / panesCount.y, + paneFinalRatio: 0, + canvasFinalWidth: 0, + canvasFinalHeight: 0, + canvasFinalRatio: 0 + }; + paneSize.originalRatio = paneSize.originalWidth / paneSize.originalHeight; + paneSize.paneFinalRatio = paneSize.paneFinalWidth / paneSize.paneFinalHeight; + + if(paneSize.paneFinalRatio > 1){ + // If pane width ratio means it's width is larger than it's height + if(paneSize.paneFinalRatio > paneSize.originalRatio){ + // the final pane is larger than the original + // So we should fit on the height to recalc the ratio + console.log('case 1'); + paneSize.canvasFinalHeight = paneSize.paneFinalHeight; + paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio + } else { + // the final pane is higher than or equal to the original + // So we should fit on the width + console.log('case 2'); + paneSize.canvasFinalWidth = paneSize.paneFinalWidth; + paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio + + } + } else { + // If pane width ratio means it's height is higher than it's height + if(paneSize.paneFinalRatio > paneSize.originalRatio){ + // the final pane is larger than the original + // So we should fit on the height to recalc the ratio + console.log('case 3'); + paneSize.canvasFinalHeight = paneSize.paneFinalHeight; + paneSize.canvasFinalWidth = paneSize.canvasFinalHeight * paneSize.originalRatio; // Then we calc the width according the ratio + } else { + // the final pane is higher than or equal to the original + // So we should fit on the width + console.log('case 4'); + paneSize.canvasFinalWidth = paneSize.paneFinalWidth; + paneSize.canvasFinalHeight = paneSize.canvasFinalWidth / paneSize.originalRatio; // Then we calc the width according the ratio + + } + } + + paneSize.canvasFinalRatio = paneSize.canvasFinalWidth / paneSize.canvasFinalHeight; + console.log('paneSizes:', paneSize, 'splitpaneSize:', splitpaneSize, 'panesCount:', panesCount); + //canvas.resizeCanvas(paneSize.canvasFinalWidth, paneSize.canvasFinalHeight); + //canvas.draw(); + + console.log(paneSize.canvasFinalWidth + ' ' + paneSize.canvasFinalHeight); + /*canvas.width = Math.round(paneSize.canvasFinalWidth); + canvas.height = Math.round(paneSize.canvasFinalHeight);*/ + + $(canvas).width(paneSize.canvasFinalWidth); + $(canvas).height(paneSize.canvasFinalHeight); + + + /* + https://stackoverflow.com/questions/27863783/javascript-canvas-disappears-after-changing-width + + var buffer = document.getElementById('buffer'); + var context = canvas.getContext('2d'); + console.log(context); + var bufferContext = buffer.getContext('2d'); + console.log(bufferContext); + + bufferContext.drawImage(canvas, 0, 0); //Make a copy of the canvas to hidden buffer + canvas.width = Math.round(paneSize.canvasFinalWidth); + canvas.height = Math.round(paneSize.canvasFinalHeight); + context.drawImage(buffer, 0, 0); */ + } + } + else { + for(var i = 0; i < panes.length; i++){ + var canvas = panes[i]; + $(canvas).width($(canvas).parent().width()); + $(canvas).height($(canvas).parent().height()); + } + } + + stone.AllViewportsUpdateSize(false); + $(window).trigger('resize'); // to force screen and canvas recalculation +}; + +function afterPrint(){ + console.log('afterprint'); + var $body = $('body'); + // var $html = $('html'); + $body.removeClass('print'); + $body.css('width', '100%'); + $body.css('height', '100%'); + $('#viewport canvas').css('width', '100%'); + $('#viewport canvas').css('height', '100%'); + stone.AllViewportsUpdateSize(false); + $(window).trigger('resize'); // to force screen and canvas recalculation +} + +window.addEventListener('beforeprint', function(event){ + beforePrint(event); +}); + +var printMedia = window.matchMedia('print'); +printMedia.addListener(function(mql) { + if(mql.matches) { + console.log('webkit equivalent of onbeforeprint'); + beforePrint(); + } +}); + +window.addEventListener('afterprint', function(){ + afterPrint(); +});$ + +/*vm.cancelPrintMode = function(){ + afterPrint(); +} +*/