Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1743 from ONLYOFFICE/fix/binaryFontsSprite

Browse source 
Fix/binary fonts sprite
This commit is contained in:
Julia Radzhabova 2022-05-16 21:18:43 +03:00 committed by GitHub
parent e5b1a073f9 378c4f3431
commit d113b0d474
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 124 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
apps/common/main/lib/component/ComboBoxFonts.js
View file

@ -88,6 +88,125 @@ define([
thumbCanvas.height = thumbs[thumbIdx].height; thumbCanvas.height = thumbs[thumbIdx].height;
thumbCanvas.width = thumbs[thumbIdx].width; thumbCanvas.width = thumbs[thumbIdx].width;
function CThumbnailLoader() {
this.supportBinaryFormat = (window['AscDesktopEditor'] && !window['AscDesktopEditor']['isSupportBinaryFontsSprite']) ? false : true;
this.image = null;
this.binaryFormat = null;
this.data = null;
this.width = 0;
this.height = 0;
this.heightOne = 0;
this.count = 0;
this.load = function(url, callback) {
if (!callback)
return;
if (!this.supportBinaryFormat) {
this.width = thumbs[thumbIdx].width;
this.heightOne = thumbs[thumbIdx].height;
this.image = new Image();
this.image.onload = callback;
this.image.src = thumbs[thumbIdx].path;
} else {
var me = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', url + ".bin", true);
xhr.responseType = 'arraybuffer';
if (xhr.overrideMimeType)
xhr.overrideMimeType('text/plain; charset=x-user-defined');
else
xhr.setRequestHeader('Accept-Charset', 'x-user-defined');
xhr.onload = function() {
// TODO: check errors
me.binaryFormat = this.response;
callback();
};
xhr.send(null);
}
};
this.openBinary = function(arrayBuffer) {
//var t1 = performance.now();
var binaryAlpha = new Uint8Array(arrayBuffer);
this.width = (binaryAlpha[0] << 24) | (binaryAlpha[1] << 16) | (binaryAlpha[2] << 8) | (binaryAlpha[3] << 0);
this.heightOne = (binaryAlpha[4] << 24) | (binaryAlpha[5] << 16) | (binaryAlpha[6] << 8) | (binaryAlpha[7] << 0);
this.count = (binaryAlpha[8] << 24) | (binaryAlpha[9] << 16) | (binaryAlpha[10] << 8) | (binaryAlpha[11] << 0);
this.height = this.count * this.heightOne;
this.data = new Uint8ClampedArray(4 * this.width * this.height);
var binaryIndex = 12;
var binaryLen = binaryAlpha.length;
var imagePixels = this.data;
var index = 0;
var len0 = 0;
var tmpValue = 0;
while (binaryIndex < binaryLen) {
tmpValue = binaryAlpha[binaryIndex++];
if (0 == tmpValue) {
len0 = binaryAlpha[binaryIndex++];
while (len0 > 0) {
len0--;
imagePixels[index] = imagePixels[index + 1] = imagePixels[index + 2] = 255;
imagePixels[index + 3] = 0; // this value is already 0.
index += 4;
}
} else {
imagePixels[index] = imagePixels[index + 1] = imagePixels[index + 2] = 255 - tmpValue;
imagePixels[index + 3] = tmpValue;
index += 4;
}
}
//var t2 = performance.now();
//console.log(t2 - t1);
};
this.getImage = function(index, canvas, ctx) {
//var t1 = performance.now();
if (!canvas)
{
canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.heightOne;
canvas.style.width = iconWidth + "px";
canvas.style.height = iconHeight + "px";
ctx = canvas.getContext("2d");
}
if (this.supportBinaryFormat) {
if (!this.data) {
this.openBinary(this.binaryFormat);
delete this.binaryFormat;
}
var dataTmp = ctx.createImageData(this.width, this.heightOne);
var sizeImage = 4 * this.width * this.heightOne;
dataTmp.data.set(new Uint8ClampedArray(this.data.buffer, index * sizeImage, sizeImage));
ctx.putImageData(dataTmp, 0, 0);
} else {
ctx.clearRect(0, 0, this.width, this.heightOne);
ctx.drawImage(this.image, 0, -this.heightOne * index);
}
//var t2 = performance.now();
//console.log(t2 - t1);
return canvas;
};
}
return { return {
template: _.template([ template: _.template([
'<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
@ -305,10 +424,8 @@ define([
return img != null ? img[0].src : undefined; return img != null ? img[0].src : undefined;
} }
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height); var index = Math.floor(opts.imgidx/spriteCols);
thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(opts.imgidx/spriteCols)); return this.spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
return thumbCanvas.toDataURL();
}, },
getImageWidth: function() { getImageWidth: function() {
@ -324,11 +441,8 @@ define([
}, },
loadSprite: function(callback) { loadSprite: function(callback) {
if (callback) { this.spriteThumbs = new CThumbnailLoader();
this.spriteThumbs = new Image(); this.spriteThumbs.load(thumbs[thumbIdx].path, callback);
this.spriteThumbs.onload = callback;
this.spriteThumbs.src = thumbs[thumbIdx].path;
}
}, },
fillFonts: function(store, select) { fillFonts: function(store, select) {
@ -554,19 +668,8 @@ define([
for (j = 0; j < storeCount; ++j) { for (j = 0; j < storeCount; ++j) {
if (from <= j && j < to) { if (from <= j && j < to) {
if (null === me.tiles[j]) { if (null === me.tiles[j]) {
var fontImage = document.createElement('canvas');
var context = fontImage.getContext('2d');
fontImage.height = thumbs[thumbIdx].height;
fontImage.width = thumbs[thumbIdx].width;
fontImage.style.width = iconWidth + 'px';
fontImage.style.height = iconHeight + 'px';
index = Math.floor(me.store.at(j).get('imgidx')/spriteCols); index = Math.floor(me.store.at(j).get('imgidx')/spriteCols);
var fontImage = me.spriteThumbs.getImage(index);
context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
me.tiles[j] = fontImage; me.tiles[j] = fontImage;
$(listItems[j]).get(0).appendChild(fontImage); $(listItems[j]).get(0).appendChild(fontImage);