From b312719d7e0cf1a45dda0b4ad871a45162ed6f5b Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Thu, 12 Apr 2012 08:23:38 -0700 Subject: [PATCH] Fixes test driver and examples --- examples/acroforms/forms.js | 149 +++++++++++++++++---------------- examples/acroforms/index.html | 1 + examples/helloworld/hello.js | 42 ++++++---- examples/helloworld/index.html | 1 + src/util.js | 1 + test/driver.js | 8 +- 6 files changed, 109 insertions(+), 93 deletions(-) diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js index 6ec92766d989f..868825fc7f099 100644 --- a/examples/acroforms/forms.js +++ b/examples/acroforms/forms.js @@ -9,7 +9,7 @@ var formFields = {}; -function setupForm(div, content, scale) { +function setupForm(div, content, viewport) { function bindInputItem(input, item) { if (input.name in formFields) { var value = formFields[input.name]; @@ -27,16 +27,20 @@ function setupForm(div, content, scale) { } function createElementWithStyle(tagName, item) { var element = document.createElement(tagName); - element.style.left = (item.x * scale) + 'px'; - element.style.top = (item.y * scale) + 'px'; - element.style.width = Math.ceil(item.width * scale) + 'px'; - element.style.height = Math.ceil(item.height * scale) + 'px'; + var rect = Util.normalizeRect( + viewport.convertToViewportRectangle(item.rect)); + element.style.left = Math.floor(rect[0]) + 'px'; + element.style.top = Math.floor(rect[1]) + 'px'; + element.style.width = Math.ceil(rect[2] - rect[0]) + 'px'; + element.style.height = Math.ceil(rect[3] - rect[1]) + 'px'; return element; } function assignFontStyle(element, item) { var fontStyles = ''; - if ('fontSize' in item) - fontStyles += 'font-size: ' + Math.round(item.fontSize * scale) + 'px;'; + if ('fontSize' in item) { + fontStyles += 'font-size: ' + Math.round(item.fontSize * + viewport.fontScale) + 'px;'; + } switch (item.textAlignment) { case 0: fontStyles += 'text-align: left;'; @@ -51,83 +55,88 @@ function setupForm(div, content, scale) { element.setAttribute('style', element.getAttribute('style') + fontStyles); } - var items = content.getAnnotations(); - for (var i = 0; i < items.length; i++) { - var item = items[i]; - switch (item.type) { - case 'Widget': - if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && - item.fieldType != 'Ch') - break; - var inputDiv = createElementWithStyle('div', item); - inputDiv.className = 'inputHint'; - div.appendChild(inputDiv); - var input; - if (item.fieldType == 'Tx') { - input = createElementWithStyle('input', item); - } - if (item.fieldType == 'Btn') { - input = createElementWithStyle('input', item); - if (item.flags & 32768) { - input.type = 'radio'; - // radio button is not supported - } else if (item.flags & 65536) { - input.type = 'button'; - // pushbutton is not supported - } else { - input.type = 'checkbox'; + content.getAnnotations().then(function(items) { + for (var i = 0; i < items.length; i++) { + var item = items[i]; + switch (item.type) { + case 'Widget': + if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && + item.fieldType != 'Ch') + break; + var inputDiv = createElementWithStyle('div', item); + inputDiv.className = 'inputHint'; + div.appendChild(inputDiv); + var input; + if (item.fieldType == 'Tx') { + input = createElementWithStyle('input', item); } - } - if (item.fieldType == 'Ch') { - input = createElementWithStyle('select', item); - // select box is not supported - } - input.className = 'inputControl'; - input.name = item.fullName; - input.title = item.alternativeText; - assignFontStyle(input, item); - bindInputItem(input, item); - div.appendChild(input); - break; + if (item.fieldType == 'Btn') { + input = createElementWithStyle('input', item); + if (item.flags & 32768) { + input.type = 'radio'; + // radio button is not supported + } else if (item.flags & 65536) { + input.type = 'button'; + // pushbutton is not supported + } else { + input.type = 'checkbox'; + } + } + if (item.fieldType == 'Ch') { + input = createElementWithStyle('select', item); + // select box is not supported + } + input.className = 'inputControl'; + input.name = item.fullName; + input.title = item.alternativeText; + assignFontStyle(input, item); + bindInputItem(input, item); + div.appendChild(input); + break; + } } - } + }); } function renderPage(div, pdf, pageNumber, callback) { - var page = pdf.getPage(pageNumber); - var scale = 1.5; + pdf.getPage(pageNumber).then(function(page) { + var scale = 1.5; + var viewport = page.getViewport(scale); - var pageDisplayWidth = page.width * scale; - var pageDisplayHeight = page.height * scale; + var pageDisplayWidth = viewport.width; + var pageDisplayHeight = viewport.height; - var pageDivHolder = document.createElement('div'); - pageDivHolder.className = 'pdfpage'; - pageDivHolder.style.width = pageDisplayWidth + 'px'; - pageDivHolder.style.height = pageDisplayHeight + 'px'; - div.appendChild(pageDivHolder); + var pageDivHolder = document.createElement('div'); + pageDivHolder.className = 'pdfpage'; + pageDivHolder.style.width = pageDisplayWidth + 'px'; + pageDivHolder.style.height = pageDisplayHeight + 'px'; + div.appendChild(pageDivHolder); - // Prepare canvas using PDF page dimensions - var canvas = document.createElement('canvas'); - var context = canvas.getContext('2d'); - canvas.width = pageDisplayWidth; - canvas.height = pageDisplayHeight; - pageDivHolder.appendChild(canvas); + // Prepare canvas using PDF page dimensions + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + canvas.width = pageDisplayWidth; + canvas.height = pageDisplayHeight; + pageDivHolder.appendChild(canvas); - // Render PDF page into canvas context - page.startRendering(context, callback); + // Render PDF page into canvas context + var renderContext = { + canvasContext: context, + viewport: viewport + }; + page.render(renderContext).then(callback); - // Prepare and populate form elements layer - var formDiv = document.createElement('div'); - pageDivHolder.appendChild(formDiv); + // Prepare and populate form elements layer + var formDiv = document.createElement('div'); + pageDivHolder.appendChild(formDiv); - setupForm(formDiv, page, scale); + setupForm(formDiv, page, viewport); + }); } -PDFJS.getPdf(pdfWithFormsPath, function getPdfForm(data) { - // Instantiate PDFDoc with PDF data - var pdf = new PDFJS.PDFDoc(data); - +// Fetch the PDF document from the URL using promices +PDFJS.getDocument(pdfWithFormsPath).then(function getPdfForm(pdf) { // Rendering all pages starting from first var viewer = document.getElementById('viewer'); var pageNumber = 1; diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html index 8a9053f783f82..858ad649f29dd 100644 --- a/examples/acroforms/index.html +++ b/examples/acroforms/index.html @@ -6,6 +6,7 @@ + diff --git a/examples/helloworld/hello.js b/examples/helloworld/hello.js index 45e61eb6fad91..7bf18d65b6313 100644 --- a/examples/helloworld/hello.js +++ b/examples/helloworld/hello.js @@ -7,25 +7,31 @@ 'use strict'; -PDFJS.getPdf('helloworld.pdf', function getPdfHelloWorld(data) { - // - // Instantiate PDFDoc with PDF data - // - var pdf = new PDFJS.PDFDoc(data); - var page = pdf.getPage(1); - var scale = 1.5; +// +// Fetch the PDF document from the URL using promices +// +PDFJS.getDocument('helloworld.pdf').then(function(pdf) { + // Using promise to fetch the page + pdf.getPage(1).then(function(page) { + var scale = 1.5; + var viewport = page.getViewport(scale); - // - // Prepare canvas using PDF page dimensions - // - var canvas = document.getElementById('the-canvas'); - var context = canvas.getContext('2d'); - canvas.height = page.height * scale; - canvas.width = page.width * scale; + // + // Prepare canvas using PDF page dimensions + // + var canvas = document.getElementById('the-canvas'); + var context = canvas.getContext('2d'); + canvas.height = viewport.height; + canvas.width = viewport.width; - // - // Render PDF page into canvas context - // - page.startRendering(context); + // + // Render PDF page into canvas context + // + var renderContext = { + canvasContext: context, + viewport: viewport + }; + page.render(renderContext); + }); }); diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html index c6af616e6df98..c9df98809bf8b 100644 --- a/examples/helloworld/index.html +++ b/examples/helloworld/index.html @@ -6,6 +6,7 @@ + diff --git a/src/util.js b/src/util.js index 390b0842799fb..6ec4bc9cba75d 100644 --- a/src/util.js +++ b/src/util.js @@ -242,6 +242,7 @@ var PageViewport = PDFJS.PageViewport = (function PageViewportClosure() { this.offsetY = offsetY; this.width = width; this.height = height; + this.fontScale = scale; } PageViewport.prototype = { convertToViewportPoint: function PageViewport_convertToViewportPoint(x, y) { diff --git a/test/driver.js b/test/driver.js index 600f53c9cf505..993a31349864a 100644 --- a/test/driver.js +++ b/test/driver.js @@ -176,11 +176,9 @@ function nextPage(task, loadError) { var ctx = canvas.getContext('2d'); task.pdfDoc.getPage(task.pageNum).then(function(page) { var pdfToCssUnitsCoef = 96.0 / 72.0; - // using mediaBox for the canvas size - var pageWidth = page.width; - var pageHeight = page.height; - canvas.width = pageWidth * pdfToCssUnitsCoef; - canvas.height = pageHeight * pdfToCssUnitsCoef; + var viewport = page.getViewport(pdfToCssUnitsCoef); + canvas.width = viewport.width; + canvas.height = viewport.height; clear(ctx); // using the text layer builder that does nothing to test