Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #6619 from yurydelendik/mv-textlayer

Browse Source 
[api-minor] Moving text layer rendering into src/display and better "text" testing.
This commit is contained in:
Brendan Dahl 2015-11-19 13:20:10 -08:00
commit fc2d7e88b6
17 changed files with 498 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/acroforms/index.html
View File

@ -11,7 +11,9 @@
<script src="../../src/display/webgl.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script>
// Specify the main script used to create a new PDF.JS web worker.

2
examples/helloworld/index.html
View File

@ -11,7 +11,9 @@
<script src="../../src/display/webgl.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script>
// Specify the main script used to create a new PDF.JS web worker.

2
make.js
View File

@ -530,7 +530,9 @@ target.bundle = function(args) {
'display/webgl.js',
'display/pattern_helper.js',
'display/font_loader.js',
'display/dom_utils.js',
'display/annotation_helper.js',
'display/text_layer.js',
'display/svg.js'
]);

73
src/display/dom_utils.js Normal file
View File

@ -0,0 +1,73 @@
/* Copyright 2015 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals PDFJS */
'use strict';
/**
* Optimised CSS custom property getter/setter.
* @class
*/
var CustomStyle = (function CustomStyleClosure() {
// As noted on: http://www.zachstronaut.com/posts/2009/02/17/
// animate-css-transforms-firefox-webkit.html
// in some versions of IE9 it is critical that ms appear in this list
// before Moz
var prefixes = ['ms', 'Moz', 'Webkit', 'O'];
var _cache = {};
function CustomStyle() {}
CustomStyle.getProp = function get(propName, element) {
// check cache only when no element is given
if (arguments.length === 1 && typeof _cache[propName] === 'string') {
return _cache[propName];
}
element = element || document.documentElement;
var style = element.style, prefixed, uPropName;
// test standard property first
if (typeof style[propName] === 'string') {
return (_cache[propName] = propName);
}
// capitalize
uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
// test vendor specific properties
for (var i = 0, l = prefixes.length; i < l; i++) {
prefixed = prefixes[i] + uPropName;
if (typeof style[prefixed] === 'string') {
return (_cache[propName] = prefixed);
}
}
//if all fails then set to undefined
return (_cache[propName] = 'undefined');
};
CustomStyle.setProp = function set(propName, element, str) {
var prop = this.getProp(propName);
if (prop !== 'undefined') {
element.style[prop] = str;
}
};
return CustomStyle;
})();
PDFJS.CustomStyle = CustomStyle;

237
src/display/text_layer.js Normal file
View File

@ -0,0 +1,237 @@
/* Copyright 2015 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals PDFJS, createPromiseCapability */
'use strict';
/**
* Text layer render parameters.
*
* @typedef {Object} TextLayerRenderParameters
* @property {TextContent} textContent - Text content to render (the object is
* returned by the page's getTextContent() method).
* @property {HTMLElement} container - HTML element that will contain text runs.
* @property {PDFJS.PageViewport} viewport - The target viewport to properly
* layout the text runs.
* @property {Array} textDivs - (optional) HTML elements that are correspond
* the text items of the textContent input. This is output and shall be
* initially be set to empty array.
* @property {number} timeout - (optional) Delay in milliseconds before
* rendering of the text runs occurs.
*/
var renderTextLayer = (function renderTextLayerClosure() {
var MAX_TEXT_DIVS_TO_RENDER = 100000;
var NonWhitespaceRegexp = /\S/;
function isAllWhitespace(str) {
return !NonWhitespaceRegexp.test(str);
}
function appendText(textDivs, viewport, geom, styles) {
var style = styles[geom.fontName];
var textDiv = document.createElement('div');
textDivs.push(textDiv);
if (isAllWhitespace(geom.str)) {
textDiv.dataset.isWhitespace = true;
return;
}
var tx = PDFJS.Util.transform(viewport.transform, geom.transform);
var angle = Math.atan2(tx[1], tx[0]);
if (style.vertical) {
angle += Math.PI / 2;
}
var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
var fontAscent = fontHeight;
if (style.ascent) {
fontAscent = style.ascent * fontAscent;
} else if (style.descent) {
fontAscent = (1 + style.descent) * fontAscent;
}
var left;
var top;
if (angle === 0) {
left = tx[4];
top = tx[5] - fontAscent;
} else {
left = tx[4] + (fontAscent * Math.sin(angle));
top = tx[5] - (fontAscent * Math.cos(angle));
}
textDiv.style.left = left + 'px';
textDiv.style.top = top + 'px';
textDiv.style.fontSize = fontHeight + 'px';
textDiv.style.fontFamily = style.fontFamily;
textDiv.textContent = geom.str;
// |fontName| is only used by the Font Inspector. This test will succeed
// when e.g. the Font Inspector is off but the Stepper is on, but it's
// not worth the effort to do a more accurate test.
if (PDFJS.pdfBug) {
textDiv.dataset.fontName = geom.fontName;
}
// Storing into dataset will convert number into string.
if (angle !== 0) {
textDiv.dataset.angle = angle * (180 / Math.PI);
}
// We don't bother scaling single-char text divs, because it has very
// little effect on text highlighting. This makes scrolling on docs with
// lots of such divs a lot faster.
if (geom.str.length > 1) {
if (style.vertical) {
textDiv.dataset.canvasWidth = geom.height * viewport.scale;
} else {
textDiv.dataset.canvasWidth = geom.width * viewport.scale;
}
}
}
function render(task) {
if (task._canceled) {
return;
}
var textLayerFrag = task._container;
var textDivs = task._textDivs;
var capability = task._capability;
var textDivsLength = textDivs.length;
// No point in rendering many divs as it would make the browser
// unusable even after the divs are rendered.
if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {
capability.resolve();
return;
}
var canvas = document.createElement('canvas');
//#if MOZCENTRAL || FIREFOX || GENERIC
canvas.mozOpaque = true;
//#endif
var ctx = canvas.getContext('2d', {alpha: false});
var lastFontSize;
var lastFontFamily;
for (var i = 0; i < textDivsLength; i++) {
var textDiv = textDivs[i];
if (textDiv.dataset.isWhitespace !== undefined) {
continue;
}
var fontSize = textDiv.style.fontSize;
var fontFamily = textDiv.style.fontFamily;
// Only build font string and set to context if different from last.
if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
ctx.font = fontSize + ' ' + fontFamily;
lastFontSize = fontSize;
lastFontFamily = fontFamily;
}
var width = ctx.measureText(textDiv.textContent).width;
if (width > 0) {
textLayerFrag.appendChild(textDiv);
var transform;
if (textDiv.dataset.canvasWidth !== undefined) {
// Dataset values come of type string.
var textScale = textDiv.dataset.canvasWidth / width;
transform = 'scaleX(' + textScale + ')';
} else {
transform = '';
}
var rotation = textDiv.dataset.angle;
if (rotation) {
transform = 'rotate(' + rotation + 'deg) ' + transform;
}
if (transform) {
PDFJS.CustomStyle.setProp('transform' , textDiv, transform);
}
}
}
capability.resolve();
}
/**
* Text layer rendering task.
*
* @param {TextContent} textContent
* @param {HTMLElement} container
* @param {PDFJS.PageViewport} viewport
* @param {Array} textDivs
* @private
*/
function TextLayerRenderTask(textContent, container, viewport, textDivs) {
this._textContent = textContent;
this._container = container;
this._viewport = viewport;
textDivs = textDivs || [];
this._textDivs = textDivs;
this._canceled = false;
this._capability = createPromiseCapability();
this._renderTimer = null;
}
TextLayerRenderTask.prototype = {
get promise() {
return this._capability.promise;
},
cancel: function TextLayer_cancel() {
this._canceled = true;
if (this._renderTimer !== null) {
clearTimeout(this._renderTimer);
this._renderTimer = null;
}
this._capability.reject('canceled');
},
_render: function TextLayer_render(timeout) {
var textItems = this._textContent.items;
var styles = this._textContent.styles;
var textDivs = this._textDivs;
var viewport = this._viewport;
for (var i = 0, len = textItems.length; i < len; i++) {
appendText(textDivs, viewport, textItems[i], styles);
}
if (!timeout) { // Render right away
render(this);
} else { // Schedule
var self = this;
this._renderTimer = setTimeout(function() {
render(self);
self._renderTimer = null;
}, timeout);
}
}
};
/**
* Starts rendering of the text layer.
*
* @param {TextLayerRenderParameters} renderParameters
* @returns {TextLayerRenderTask}
*/
function renderTextLayer(renderParameters) {
var task = new TextLayerRenderTask(renderParameters.textContent,
renderParameters.container,
renderParameters.viewport,
renderParameters.textDivs);
task._render(renderParameters.timeout);
return task;
}
return renderTextLayer;
})();
PDFJS.renderTextLayer = renderTextLayer;

170
test/driver.js
View File

@ -22,80 +22,71 @@ var PDF_TO_CSS_UNITS = 96.0 / 72.0;
/**
* @class
*/
var NullTextLayerBuilder = (function NullTextLayerBuilderClosure() {
/**
* @constructs NullTextLayerBuilder
*/
function NullTextLayerBuilder() {}
var rasterizeTextLayer = (function rasterizeTextLayerClosure() {
var SVG_NS = 'http://www.w3.org/2000/svg';
NullTextLayerBuilder.prototype = {
beginLayout: function NullTextLayerBuilder_BeginLayout() {},
endLayout: function NullTextLayerBuilder_EndLayout() {},
appendText: function NullTextLayerBuilder_AppendText() {}
};
return NullTextLayerBuilder;
})();
/**
* @class
*/
var SimpleTextLayerBuilder = (function SimpleTextLayerBuilderClosure() {
/**
* @constructs SimpleTextLayerBuilder
*/
function SimpleTextLayerBuilder(ctx, viewport) {
this.ctx = ctx;
this.viewport = viewport;
this.textCounter = 0;
// clear canvas
ctx.save();
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.restore();
var textLayerStylePromise = null;
function getTextLayerStyle() {
if (textLayerStylePromise) {
return textLayerStylePromise;
}
textLayerStylePromise = new Promise(function (resolve) {
var xhr = new XMLHttpRequest();
xhr.open('GET', './text_layer_test.css');
xhr.onload = function () {
resolve(xhr.responseText);
};
xhr.send(null);
});
return textLayerStylePromise;
}
SimpleTextLayerBuilder.prototype = {
appendText: function SimpleTextLayerBuilder_AppendText(geom, styles) {
var style = styles[geom.fontName];
var ctx = this.ctx, viewport = this.viewport;
var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);
var angle = Math.atan2(tx[1], tx[0]);
var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
var fontAscent = (style.ascent ? style.ascent * fontHeight :
(style.descent ? (1 + style.descent) * fontHeight : fontHeight));
function rasterizeTextLayer(ctx, viewport, textContent) {
return new Promise(function (resolve) {
// Building SVG with size of the viewport.
var svg = document.createElementNS(SVG_NS, 'svg:svg');
svg.setAttribute('width', viewport.width + 'px');
svg.setAttribute('height', viewport.height + 'px');
// items are transformed to have 1px font size
svg.setAttribute('font-size', 1);
ctx.save();
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'yellow';
ctx.translate(tx[4] + (fontAscent * Math.sin(angle)),
tx[5] - (fontAscent * Math.cos(angle)));
ctx.rotate(angle);
ctx.rect(0, 0, geom.width * viewport.scale, geom.height * viewport.scale);
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.font = fontHeight + 'px ' + style.fontFamily;
ctx.fillStyle = 'black';
ctx.fillText(geom.str, tx[4], tx[5]);
// Adding element to host our HTML (style + text layer div).
var foreignObject = document.createElementNS(SVG_NS, 'svg:foreignObject');
foreignObject.setAttribute('x', '0');
foreignObject.setAttribute('y', '0');
foreignObject.setAttribute('width', viewport.width + 'px');
foreignObject.setAttribute('height', viewport.height + 'px');
var style = document.createElement('style');
var stylePromise = getTextLayerStyle();
foreignObject.appendChild(style);
var div = document.createElement('div');
div.className = 'textLayer';
foreignObject.appendChild(div);
this.textCounter++;
},
// Rendering text layer as HTML.
var task = PDFJS.renderTextLayer({
textContent: textContent,
container: div,
viewport: viewport
});
Promise.all([stylePromise, task.promise]).then(function (results) {
style.textContent = results[0];
svg.appendChild(foreignObject);
setTextContent:
function SimpleTextLayerBuilder_SetTextContent(textContent) {
this.ctx.save();
var textItems = textContent.items;
for (var i = 0, ii = textItems.length; i < ii; i++) {
this.appendText(textItems[i], textContent.styles);
}
this.ctx.restore();
}
};
// We need to have UTF-8 encoded XML.
var svg_xml = unescape(encodeURIComponent(
(new XMLSerializer()).serializeToString(svg)));
var img = new Image();
img.src = 'data:image/svg+xml;base64,' + btoa(svg_xml);
img.onload = function () {
ctx.drawImage(img, 0, 0);
resolve();
};
});
});
}
return SimpleTextLayerBuilder;
return rasterizeTextLayer;
})();
/**
@ -328,35 +319,44 @@ var Driver = (function DriverClosure() {
self.canvas.height = viewport.height;
self._clearCanvas();
var drawContext, textLayerBuilder;
var resolveInitPromise;
var initPromise = new Promise(function (resolve) {
resolveInitPromise = resolve;
});
var textLayerCanvas;
var initPromise;
if (task.type === 'text') {
// Using a dummy canvas for PDF context drawing operations
if (!self.dummyCanvas) {
self.dummyCanvas = document.createElement('canvas');
textLayerCanvas = self.textLayerCanvas;
if (!textLayerCanvas) {
textLayerCanvas = document.createElement('canvas');
self.textLayerCanvas = textLayerCanvas;
}
drawContext = self.dummyCanvas.getContext('2d');
textLayerCanvas.width = viewport.width;
textLayerCanvas.height = viewport.height;
var textLayerContext = textLayerCanvas.getContext('2d');
textLayerContext.clearRect(0, 0,
textLayerCanvas.width, textLayerCanvas.height);
// The text builder will draw its content on the test canvas
textLayerBuilder = new SimpleTextLayerBuilder(ctx, viewport);
page.getTextContent().then(function(textContent) {
textLayerBuilder.setTextContent(textContent);
resolveInitPromise();
initPromise = page.getTextContent().then(function(textContent) {
return rasterizeTextLayer(textLayerContext, viewport,
textContent);
});
} else {
drawContext = ctx;
textLayerBuilder = new NullTextLayerBuilder();
resolveInitPromise();
textLayerCanvas = null;
initPromise = Promise.resolve();
}
var renderContext = {
canvasContext: drawContext,
canvasContext: ctx,
viewport: viewport
};
var completeRender = (function(error) {
page.destroy();
// if text layer is present, compose it on top of the page
if (textLayerCanvas) {
ctx.save();
ctx.globalCompositeOperation = 'screen';
ctx.fillStyle = 'rgb(128, 255, 128)'; // making it green
ctx.fillRect(0, 0, viewport.width, viewport.height);
ctx.restore();
ctx.drawImage(textLayerCanvas, 0, 0);
}
page.cleanup();
task.stats = page.stats;
page.stats = new StatTimer();
self._snapshot(task, error);

1
test/font/font_test.html
View File

@ -37,6 +37,7 @@
<script src="../../src/core/ps_parser.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script src="../../src/core/stream.js"></script>
<script src="../../src/core/worker.js"></script>
<script src="../../src/display/metadata.js"></script>

6
test/test_manifest.json
View File

@ -323,12 +323,6 @@
"lastPage": 1,
"about": "The same file as issue2337."
},
{ "id": "thuluthfont-text",
"file": "pdfs/ThuluthFeatures.pdf",
"md5": "b7e18bf7a3d6a9c82aefa12d721072fc",
"rounds": 1,
"type": "text"
},
{ "id": "freeculture",
"file": "pdfs/freeculture.pdf",
"md5": "dcdf3a8268e6a18938a42d5149efcfca",

2
test/test_slave.html
View File

@ -25,7 +25,9 @@ limitations under the License.
<script src="../src/display/webgl.js"></script>
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/dom_utils.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script src="../src/display/text_layer.js"></script>
<script src="driver.js"></script>
</head>
<body>

38
test/text_layer_test.css Normal file
View File

@ -0,0 +1,38 @@
/* Copyright 2015 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* Used in 'text' tests */
.textLayer {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.textLayer > div {
position: absolute;
white-space: pre;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
border: solid 1px rgba(255, 0, 0, 0.5);
background-color: rgba(255, 255, 32, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

2
test/unit/unit_test.html
View File

@ -36,7 +36,9 @@
<script src="../../src/core/ps_parser.js"></script>
<script src="../../src/display/pattern_helper.js"></script>
<script src="../../src/display/font_loader.js"></script>
<script src="../../src/display/dom_utils.js"></script>
<script src="../../src/display/annotation_helper.js"></script>
<script src="../../src/display/text_layer.js"></script>
<script src="../../src/core/stream.js"></script>
<script src="../../src/core/worker.js"></script>
<script src="../../src/display/metadata.js"></script>

4
web/annotations_layer_builder.js
View File

@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*globals PDFJS, CustomStyle, mozL10n, SimpleLinkService */
/*globals PDFJS, mozL10n, SimpleLinkService */
'use strict';
@ -27,6 +27,8 @@
* @class
*/
var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
var CustomStyle = PDFJS.CustomStyle;
/**
* @param {AnnotationsLayerBuilderOptions} options
* @constructs AnnotationsLayerBuilder

4
web/pdf_page_view.js
View File

@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals RenderingStates, PDFJS, CustomStyle, CSS_UNITS, getOutputScale,
/* globals RenderingStates, PDFJS, CSS_UNITS, getOutputScale,
TextLayerBuilder, AnnotationsLayerBuilder, Promise,
approximateFraction, roundToDivide */
@ -36,6 +36,8 @@ var TEXT_LAYER_RENDER_DELAY = 200; // ms
* @implements {IRenderableView}
*/
var PDFPageView = (function PDFPageViewClosure() {
var CustomStyle = PDFJS.CustomStyle;
/**
* @constructs PDFPageView
* @param {PDFPageViewOptions} options

170
web/text_layer_builder.js
View File

@ -12,18 +12,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* globals CustomStyle, PDFJS */
/* globals PDFJS */
'use strict';
var MAX_TEXT_DIVS_TO_RENDER = 100000;
var NonWhitespaceRegexp = /\S/;
function isAllWhitespace(str) {
return !NonWhitespaceRegexp.test(str);
}
/**
* @typedef {Object} TextLayerBuilderOptions
* @property {HTMLDivElement} textLayerDiv - The text layer container.
@ -50,6 +42,7 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
this.viewport = options.viewport;
this.textDivs = [];
this.findController = options.findController || null;
this.textLayerRenderTask = null;
this._bindMouse();
}
@ -68,67 +61,6 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
this.textLayerDiv.dispatchEvent(event);
},
renderLayer: function TextLayerBuilder_renderLayer() {
var textLayerFrag = document.createDocumentFragment();
var textDivs = this.textDivs;
var textDivsLength = textDivs.length;
var canvas = document.createElement('canvas');
//#if MOZCENTRAL || FIREFOX || GENERIC
canvas.mozOpaque = true;
//#endif
var ctx = canvas.getContext('2d', {alpha: false});
// No point in rendering many divs as it would make the browser
// unusable even after the divs are rendered.
if (textDivsLength > MAX_TEXT_DIVS_TO_RENDER) {
this._finishRendering();
return;
}
var lastFontSize;
var lastFontFamily;
for (var i = 0; i < textDivsLength; i++) {
var textDiv = textDivs[i];
if (textDiv.dataset.isWhitespace !== undefined) {
continue;
}
var fontSize = textDiv.style.fontSize;
var fontFamily = textDiv.style.fontFamily;
// Only build font string and set to context if different from last.
if (fontSize !== lastFontSize || fontFamily !== lastFontFamily) {
ctx.font = fontSize + ' ' + fontFamily;
lastFontSize = fontSize;
lastFontFamily = fontFamily;
}
var width = ctx.measureText(textDiv.textContent).width;
if (width > 0) {
textLayerFrag.appendChild(textDiv);
var transform;
if (textDiv.dataset.canvasWidth !== undefined) {
// Dataset values come of type string.
var textScale = textDiv.dataset.canvasWidth / width;
transform = 'scaleX(' + textScale + ')';
} else {
transform = '';
}
var rotation = textDiv.dataset.angle;
if (rotation) {
transform = 'rotate(' + rotation + 'deg) ' + transform;
}
if (transform) {
CustomStyle.setProp('transform' , textDiv, transform);
}
}
}
this.textLayerDiv.appendChild(textLayerFrag);
this._finishRendering();
this.updateMatches();
},
/**
* Renders the text layer.
* @param {number} timeout (optional) if specified, the rendering waits
@ -139,87 +71,35 @@ var TextLayerBuilder = (function TextLayerBuilderClosure() {
return;
}
if (this.renderTimer) {
clearTimeout(this.renderTimer);
this.renderTimer = null;
if (this.textLayerRenderTask) {
this.textLayerRenderTask.cancel();
this.textLayerRenderTask = null;
}
if (!timeout) { // Render right away
this.renderLayer();
} else { // Schedule
var self = this;
this.renderTimer = setTimeout(function() {
self.renderLayer();
self.renderTimer = null;
}, timeout);
}
},
appendText: function TextLayerBuilder_appendText(geom, styles) {
var style = styles[geom.fontName];
var textDiv = document.createElement('div');
this.textDivs.push(textDiv);
if (isAllWhitespace(geom.str)) {
textDiv.dataset.isWhitespace = true;
return;
}
var tx = PDFJS.Util.transform(this.viewport.transform, geom.transform);
var angle = Math.atan2(tx[1], tx[0]);
if (style.vertical) {
angle += Math.PI / 2;
}
var fontHeight = Math.sqrt((tx[2] * tx[2]) + (tx[3] * tx[3]));
var fontAscent = fontHeight;
if (style.ascent) {
fontAscent = style.ascent * fontAscent;
} else if (style.descent) {
fontAscent = (1 + style.descent) * fontAscent;
}
var left;
var top;
if (angle === 0) {
left = tx[4];
top = tx[5] - fontAscent;
} else {
left = tx[4] + (fontAscent * Math.sin(angle));
top = tx[5] - (fontAscent * Math.cos(angle));
}
textDiv.style.left = left + 'px';
textDiv.style.top = top + 'px';
textDiv.style.fontSize = fontHeight + 'px';
textDiv.style.fontFamily = style.fontFamily;
textDiv.textContent = geom.str;
// |fontName| is only used by the Font Inspector. This test will succeed
// when e.g. the Font Inspector is off but the Stepper is on, but it's
// not worth the effort to do a more accurate test.
if (PDFJS.pdfBug) {
textDiv.dataset.fontName = geom.fontName;
}
// Storing into dataset will convert number into string.
if (angle !== 0) {
textDiv.dataset.angle = angle * (180 / Math.PI);
}
// We don't bother scaling single-char text divs, because it has very
// little effect on text highlighting. This makes scrolling on docs with
// lots of such divs a lot faster.
if (geom.str.length > 1) {
if (style.vertical) {
textDiv.dataset.canvasWidth = geom.height * this.viewport.scale;
} else {
textDiv.dataset.canvasWidth = geom.width * this.viewport.scale;
}
}
this.textDivs = [];
var textLayerFrag = document.createDocumentFragment();
this.textLayerRenderTask = PDFJS.renderTextLayer({
textContent: this.textContent,
container: textLayerFrag,
viewport: this.viewport,
textDivs: this.textDivs,
timeout: timeout
});
this.textLayerRenderTask.promise.then(function () {
this.textLayerDiv.appendChild(textLayerFrag);
this._finishRendering();
this.updateMatches();
}.bind(this), function (reason) {
// canceled or failed to render text layer -- skipping errors
});
},
setTextContent: function TextLayerBuilder_setTextContent(textContent) {
this.textContent = textContent;
var textItems = textContent.items;
for (var i = 0, len = textItems.length; i < len; i++) {
this.appendText(textItems[i], textContent.styles);
if (this.textLayerRenderTask) {
this.textLayerRenderTask.cancel();
this.textLayerRenderTask = null;
}
this.textContent = textContent;
this.divContentDone = true;
},

51
web/ui_utils.js
View File

@ -23,57 +23,6 @@ var MAX_AUTO_SCALE = 1.25;
var SCROLLBAR_PADDING = 40;
var VERTICAL_PADDING = 5;
// optimised CSS custom property getter/setter
var CustomStyle = (function CustomStyleClosure() {
// As noted on: http://www.zachstronaut.com/posts/2009/02/17/
// animate-css-transforms-firefox-webkit.html
// in some versions of IE9 it is critical that ms appear in this list
// before Moz
var prefixes = ['ms', 'Moz', 'Webkit', 'O'];
var _cache = {};
function CustomStyle() {}
CustomStyle.getProp = function get(propName, element) {
// check cache only when no element is given
if (arguments.length === 1 && typeof _cache[propName] === 'string') {
return _cache[propName];
}
element = element || document.documentElement;
var style = element.style, prefixed, uPropName;
// test standard property first
if (typeof style[propName] === 'string') {
return (_cache[propName] = propName);
}
// capitalize
uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
// test vendor specific properties
for (var i = 0, l = prefixes.length; i < l; i++) {
prefixed = prefixes[i] + uPropName;
if (typeof style[prefixed] === 'string') {
return (_cache[propName] = prefixed);
}
}
//if all fails then set to undefined
return (_cache[propName] = 'undefined');
};
CustomStyle.setProp = function set(propName, element, str) {
var prop = this.getProp(propName);
if (prop !== 'undefined') {
element.style[prop] = str;
}
};
return CustomStyle;
})();
var NullCharactersRegExp = /\x00/g;
function removeNullCharacters(str) {

22
web/viewer.css
View File

@ -1515,7 +1515,27 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
font-size: 10px;
}
#viewer.textLayer-visible .textLayer > div,
#viewer.textLayer-visible .textLayer {
opacity: 1.0;
}
#viewer.textLayer-visible .canvasWrapper {
background-color: rgb(128,255,128);
}
#viewer.textLayer-visible .canvasWrapper canvas {
mix-blend-mode: screen;
}
#viewer.textLayer-visible .textLayer > div {
background-color: rgba(255, 255, 0, 0.1);
color: black;
border: solid 1px rgba(255, 0, 0, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#viewer.textLayer-hover .textLayer > div:hover {
background-color: white;
color: black;

2
web/viewer.html
View File

@ -60,7 +60,9 @@ See https://github.com/adobe-type-tools/cmap-resources
<script src="../src/display/webgl.js"></script>
<script src="../src/display/pattern_helper.js"></script>
<script src="../src/display/font_loader.js"></script>
<script src="../src/display/dom_utils.js"></script>
<script src="../src/display/annotation_helper.js"></script>
<script src="../src/display/text_layer.js"></script>
<script>PDFJS.workerSrc = '../src/worker_loader.js';</script>
<!--#endif-->