Remove the CustomStyle class

It is only used in a few places to handle prefixing style properties if
necessary. However, we used it only for `transform`, `transformOrigin`
and `borderRadius`, which according to Can I Use are supported natively
(unprefixed) in the browsers that PDF.js 2.0 supports. Therefore, we can
remove this class, which should help performance too since this avoids
extra function calls in parts of the code that are called often.
This commit is contained in:
Tim van der Meij 2017-12-31 13:51:51 +01:00
parent 3f88bfcda6
commit d36c46b2c9
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
6 changed files with 22 additions and 83 deletions

View File

@ -14,8 +14,8 @@
*/ */
import { import {
addLinkAttributes, CustomStyle, DOMSVGFactory, getDefaultSetting, addLinkAttributes, DOMSVGFactory, getDefaultSetting, getFilenameFromUrl,
getFilenameFromUrl, LinkTarget LinkTarget
} from './dom_utils'; } from './dom_utils';
import { import {
AnnotationBorderStyleType, AnnotationType, stringToPDFString, unreachable, AnnotationBorderStyleType, AnnotationType, stringToPDFString, unreachable,
@ -153,10 +153,8 @@ class AnnotationElement {
page.view[3] - data.rect[3] + page.view[1] page.view[3] - data.rect[3] + page.view[1]
]); ]);
CustomStyle.setProp('transform', container, container.style.transform = 'matrix(' + viewport.transform.join(',') + ')';
'matrix(' + viewport.transform.join(',') + ')'); container.style.transformOrigin = -rect[0] + 'px ' + -rect[1] + 'px';
CustomStyle.setProp('transformOrigin', container,
-rect[0] + 'px ' + -rect[1] + 'px');
if (!ignoreBorder && data.borderStyle.width > 0) { if (!ignoreBorder && data.borderStyle.width > 0) {
container.style.borderWidth = data.borderStyle.width + 'px'; container.style.borderWidth = data.borderStyle.width + 'px';
@ -172,7 +170,7 @@ class AnnotationElement {
let verticalRadius = data.borderStyle.verticalCornerRadius; let verticalRadius = data.borderStyle.verticalCornerRadius;
if (horizontalRadius > 0 || verticalRadius > 0) { if (horizontalRadius > 0 || verticalRadius > 0) {
let radius = horizontalRadius + 'px / ' + verticalRadius + 'px'; let radius = horizontalRadius + 'px / ' + verticalRadius + 'px';
CustomStyle.setProp('borderRadius', container, radius); container.style.borderRadius = radius;
} }
switch (data.borderStyle.style) { switch (data.borderStyle.style) {
@ -652,9 +650,8 @@ class PopupAnnotationElement extends AnnotationElement {
// PDF viewers ignore a popup annotation's rectangle. // PDF viewers ignore a popup annotation's rectangle.
let parentLeft = parseFloat(parentElement.style.left); let parentLeft = parseFloat(parentElement.style.left);
let parentWidth = parseFloat(parentElement.style.width); let parentWidth = parseFloat(parentElement.style.width);
CustomStyle.setProp('transformOrigin', this.container, this.container.style.transformOrigin =
-(parentLeft + parentWidth) + 'px -' + -(parentLeft + parentWidth) + 'px -' + parentElement.style.top;
parentElement.style.top);
this.container.style.left = (parentLeft + parentWidth) + 'px'; this.container.style.left = (parentLeft + parentWidth) + 'px';
this.container.appendChild(popup.render()); this.container.appendChild(popup.render());
@ -1235,8 +1232,8 @@ class AnnotationLayer {
let element = parameters.div.querySelector( let element = parameters.div.querySelector(
'[data-annotation-id="' + data.id + '"]'); '[data-annotation-id="' + data.id + '"]');
if (element) { if (element) {
CustomStyle.setProp('transform', element, element.style.transform =
'matrix(' + parameters.viewport.transform.join(',') + ')'); 'matrix(' + parameters.viewport.transform.join(',') + ')';
} }
} }
parameters.div.removeAttribute('hidden'); parameters.div.removeAttribute('hidden');

View File

@ -261,60 +261,6 @@ class SimpleXMLParser {
} }
} }
/**
* 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 = Object.create(null);
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 RenderingCancelledException = (function RenderingCancelledException() { var RenderingCancelledException = (function RenderingCancelledException() {
function RenderingCancelledException(msg, type) { function RenderingCancelledException(msg, type) {
this.message = msg; this.message = msg;
@ -543,7 +489,6 @@ class DummyStatTimer {
} }
export { export {
CustomStyle,
RenderingCancelledException, RenderingCancelledException,
addLinkAttributes, addLinkAttributes,
isExternalLinkTargetSet, isExternalLinkTargetSet,

View File

@ -14,7 +14,7 @@
*/ */
import { import {
addLinkAttributes, CustomStyle, DEFAULT_LINK_REL, getFilenameFromUrl, addLinkAttributes, DEFAULT_LINK_REL, getFilenameFromUrl,
isExternalLinkTargetSet, isValidUrl, LinkTarget isExternalLinkTargetSet, isValidUrl, LinkTarget
} from './dom_utils'; } from './dom_utils';
import { import {
@ -243,7 +243,6 @@ PDFJS.LoopbackPort = LoopbackPort;
PDFJS.PDFDataRangeTransport = PDFDataRangeTransport; PDFJS.PDFDataRangeTransport = PDFDataRangeTransport;
PDFJS.PDFWorker = PDFWorker; PDFJS.PDFWorker = PDFWorker;
PDFJS.CustomStyle = CustomStyle;
PDFJS.LinkTarget = LinkTarget; PDFJS.LinkTarget = LinkTarget;
PDFJS.addLinkAttributes = addLinkAttributes; PDFJS.addLinkAttributes = addLinkAttributes;
PDFJS.getFilenameFromUrl = getFilenameFromUrl; PDFJS.getFilenameFromUrl = getFilenameFromUrl;

View File

@ -14,7 +14,7 @@
*/ */
import { AbortException, createPromiseCapability, Util } from '../shared/util'; import { AbortException, createPromiseCapability, Util } from '../shared/util';
import { CustomStyle, getDefaultSetting } from './dom_utils'; import { getDefaultSetting } from './dom_utils';
/** /**
* Text layer render parameters. * Text layer render parameters.
@ -547,7 +547,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
} }
if (transform !== '') { if (transform !== '') {
textDivProperties.originalTransform = transform; textDivProperties.originalTransform = transform;
CustomStyle.setProp('transform', textDiv, transform); textDiv.style.transform = transform;
} }
this._textDivProperties.set(textDiv, textDivProperties); this._textDivProperties.set(textDiv, textDivProperties);
textLayerFrag.appendChild(textDiv); textLayerFrag.appendChild(textDiv);
@ -653,12 +653,11 @@ var renderTextLayer = (function renderTextLayerClosure() {
div.setAttribute('style', divProperties.style + padding); div.setAttribute('style', divProperties.style + padding);
} }
if (transform !== '') { if (transform !== '') {
CustomStyle.setProp('transform', div, transform); div.style.transform = transform;
} }
} else { } else {
div.style.padding = 0; div.style.padding = 0;
CustomStyle.setProp('transform', div, div.style.transform = divProperties.originalTransform || '';
divProperties.originalTransform || '');
} }
} }
}, },

View File

@ -53,7 +53,6 @@ exports.PDFDataRangeTransport = pdfjsDisplayAPI.PDFDataRangeTransport;
exports.PDFWorker = pdfjsDisplayAPI.PDFWorker; exports.PDFWorker = pdfjsDisplayAPI.PDFWorker;
exports.renderTextLayer = pdfjsDisplayTextLayer.renderTextLayer; exports.renderTextLayer = pdfjsDisplayTextLayer.renderTextLayer;
exports.AnnotationLayer = pdfjsDisplayAnnotationLayer.AnnotationLayer; exports.AnnotationLayer = pdfjsDisplayAnnotationLayer.AnnotationLayer;
exports.CustomStyle = pdfjsDisplayDOMUtils.CustomStyle;
exports.createPromiseCapability = pdfjsSharedUtil.createPromiseCapability; exports.createPromiseCapability = pdfjsSharedUtil.createPromiseCapability;
exports.PasswordResponses = pdfjsSharedUtil.PasswordResponses; exports.PasswordResponses = pdfjsSharedUtil.PasswordResponses;
exports.InvalidPDFException = pdfjsSharedUtil.InvalidPDFException; exports.InvalidPDFException = pdfjsSharedUtil.InvalidPDFException;

View File

@ -18,8 +18,7 @@ import {
RendererType, roundToDivide RendererType, roundToDivide
} from './ui_utils'; } from './ui_utils';
import { import {
createPromiseCapability, CustomStyle, PDFJS, RenderingCancelledException, createPromiseCapability, PDFJS, RenderingCancelledException, SVGGraphics
SVGGraphics
} from 'pdfjs-lib'; } from 'pdfjs-lib';
import { getGlobalEventBus } from './dom_events'; import { getGlobalEventBus } from './dom_events';
import { RenderingStates } from './pdf_rendering_queue'; import { RenderingStates } from './pdf_rendering_queue';
@ -280,7 +279,7 @@ class PDFPageView {
} }
let cssTransform = 'rotate(' + relativeRotation + 'deg) ' + let cssTransform = 'rotate(' + relativeRotation + 'deg) ' +
'scale(' + scaleX + ',' + scaleY + ')'; 'scale(' + scaleX + ',' + scaleY + ')';
CustomStyle.setProp('transform', target, cssTransform); target.style.transform = cssTransform;
if (this.textLayer) { if (this.textLayer) {
// Rotating the text layer is more complicated since the divs inside the // Rotating the text layer is more complicated since the divs inside the
@ -317,11 +316,12 @@ class PDFPageView {
console.error('Bad rotation value.'); console.error('Bad rotation value.');
break; break;
} }
CustomStyle.setProp('transform', textLayerDiv,
'rotate(' + textAbsRotation + 'deg) ' + textLayerDiv.style.transform =
'scale(' + scale + ', ' + scale + ') ' + 'rotate(' + textAbsRotation + 'deg) ' +
'translate(' + transX + ', ' + transY + ')'); 'scale(' + scale + ', ' + scale + ') ' +
CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%'); 'translate(' + transX + ', ' + transY + ')';
textLayerDiv.style.transformOrigin = '0% 0%';
} }
if (redrawAnnotations && this.annotationLayer) { if (redrawAnnotations && this.annotationLayer) {