Merge pull request #7632 from Snuffleupagus/more-efficient-expandTextDivs
[EnhanceTextSelection] Make `expandTextDivs` more efficient by updating all styles at once instead of piecewise
This commit is contained in:
commit
26da2d57ce
@ -59,14 +59,20 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
return !NonWhitespaceRegexp.test(str);
|
||||
}
|
||||
|
||||
// Text layers may contain many thousand div's, and using `styleBuf` avoids
|
||||
// creating many intermediate strings when building their 'style' properties.
|
||||
var styleBuf = ['left: ', 0, 'px; top: ', 0, 'px; font-size: ', 0,
|
||||
'px; font-family: ', '', ';'];
|
||||
|
||||
function appendText(task, geom, styles) {
|
||||
// Initialize all used properties to keep the caches monomorphic.
|
||||
var textDiv = document.createElement('div');
|
||||
var textDivProperties = {
|
||||
style: null,
|
||||
angle: 0,
|
||||
canvasWidth: 0,
|
||||
isWhitespace: false,
|
||||
originalTransform: '',
|
||||
originalTransform: null,
|
||||
paddingBottom: 0,
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
@ -104,10 +110,12 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
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;
|
||||
styleBuf[1] = left;
|
||||
styleBuf[3] = top;
|
||||
styleBuf[5] = fontHeight;
|
||||
styleBuf[7] = style.fontFamily;
|
||||
textDivProperties.style = styleBuf.join('');
|
||||
textDiv.setAttribute('style', textDivProperties.style);
|
||||
|
||||
textDiv.textContent = geom.str;
|
||||
// |fontName| is only used by the Font Inspector. This test will succeed
|
||||
@ -517,7 +525,6 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
this._renderTimer = null;
|
||||
this._bounds = [];
|
||||
this._enhanceTextSelection = !!enhanceTextSelection;
|
||||
this._expanded = false;
|
||||
}
|
||||
TextLayerRenderTask.prototype = {
|
||||
get promise() {
|
||||
@ -555,18 +562,20 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
if (!this._enhanceTextSelection || !this._renderingDone) {
|
||||
return;
|
||||
}
|
||||
if (!this._expanded) {
|
||||
if (this._bounds !== null) {
|
||||
expand(this);
|
||||
this._expanded = true;
|
||||
this._bounds.length = 0;
|
||||
this._bounds = null;
|
||||
}
|
||||
|
||||
for (var i = 0, ii = this._textDivs.length; i < ii; i++) {
|
||||
var div = this._textDivs[i];
|
||||
var divProperties = this._textDivProperties.get(div);
|
||||
|
||||
if (divProperties.isWhitespace) {
|
||||
continue;
|
||||
}
|
||||
if (expandDivs) {
|
||||
var transform = '';
|
||||
var transform = '', padding = '';
|
||||
|
||||
if (divProperties.scale !== 1) {
|
||||
transform = 'scaleX(' + divProperties.scale + ')';
|
||||
@ -575,21 +584,26 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
transform = 'rotate(' + divProperties.angle + 'deg) ' + transform;
|
||||
}
|
||||
if (divProperties.paddingLeft !== 0) {
|
||||
div.style.paddingLeft =
|
||||
(divProperties.paddingLeft / divProperties.scale) + 'px';
|
||||
padding += ' padding-left: ' +
|
||||
(divProperties.paddingLeft / divProperties.scale) + 'px;';
|
||||
transform += ' translateX(' +
|
||||
(-divProperties.paddingLeft / divProperties.scale) + 'px)';
|
||||
}
|
||||
if (divProperties.paddingTop !== 0) {
|
||||
div.style.paddingTop = divProperties.paddingTop + 'px';
|
||||
padding += ' padding-top: ' + divProperties.paddingTop + 'px;';
|
||||
transform += ' translateY(' + (-divProperties.paddingTop) + 'px)';
|
||||
}
|
||||
if (divProperties.paddingRight !== 0) {
|
||||
div.style.paddingRight =
|
||||
(divProperties.paddingRight / divProperties.scale) + 'px';
|
||||
padding += ' padding-right: ' +
|
||||
(divProperties.paddingRight / divProperties.scale) + 'px;';
|
||||
}
|
||||
if (divProperties.paddingBottom !== 0) {
|
||||
div.style.paddingBottom = divProperties.paddingBottom + 'px';
|
||||
padding += ' padding-bottom: ' +
|
||||
divProperties.paddingBottom + 'px;';
|
||||
}
|
||||
|
||||
if (padding !== '') {
|
||||
div.setAttribute('style', divProperties.style + padding);
|
||||
}
|
||||
if (transform !== '') {
|
||||
CustomStyle.setProp('transform', div, transform);
|
||||
@ -597,7 +611,7 @@ var renderTextLayer = (function renderTextLayerClosure() {
|
||||
} else {
|
||||
div.style.padding = 0;
|
||||
CustomStyle.setProp('transform', div,
|
||||
divProperties.originalTransform);
|
||||
divProperties.originalTransform || '');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user