[PE mobile][SSE mobile] Bug 57315
This commit is contained in:
Julia Radzhabova
parent
c6437146a7
commit
50c5840755
|
|
@ -111,7 +111,7 @@ const PageFonts = props => {
|
|||
<ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
|
||||
storeTextSettings.changeFontFamily((item || fonts[index]).name);
|
||||
props.changeFontFamily((item || fonts[index]).name);
|
||||
storeTextSettings.addFontToRecent((item || fonts[index]));
|
||||
storeTextSettings.addFontToRecent(item || fonts[index]);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
{vlFonts.vlData.images[index] && <img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />}
|
||||
|
|
|
|||
|
|
@ -133,9 +133,129 @@ export class storeTextSettings {
|
|||
}
|
||||
|
||||
loadSprite() {
|
||||
this.spriteThumbs = new Image();
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
this.spriteThumbs = new CThumbnailLoader();
|
||||
this.spriteThumbs.load(this.thumbs[this.thumbIdx].path, () => {
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
});
|
||||
}
|
||||
|
||||
resetFontName (font) {
|
||||
|
|
|
|||
|
|
@ -216,10 +216,8 @@ const PageFonts = props => {
|
|||
|
||||
const getImageUri = fonts => {
|
||||
return fonts.map(font => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
let index = Math.floor(font.imgidx/spriteCols);
|
||||
return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -232,15 +230,19 @@ const PageFonts = props => {
|
|||
|
||||
const renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
|
||||
let images = getImageUri(fonts);
|
||||
let fonts = [...prevState.vlData.items],
|
||||
drawFonts = [...vlData.items];
|
||||
|
||||
let images = [],
|
||||
drawImages = getImageUri(drawFonts);
|
||||
for (let i = 0; i < drawFonts.length; i++) {
|
||||
fonts[i + vlData.fromIndex] = drawFonts[i];
|
||||
images[i + vlData.fromIndex] = drawImages[i];
|
||||
}
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
images,
|
||||
}};
|
||||
items: fonts,
|
||||
images,
|
||||
}}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -296,12 +298,12 @@ const PageFonts = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
|
||||
props.changeFontFamily((item || fonts[index]).name);
|
||||
storeTextSettings.addFontToRecent(item || fonts[index]);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
{vlFonts.vlData.images[index] && <img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />}
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -133,9 +133,129 @@ export class storeTextSettings {
|
|||
}
|
||||
|
||||
loadSprite() {
|
||||
this.spriteThumbs = new Image();
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
this.spriteThumbs = new CThumbnailLoader();
|
||||
this.spriteThumbs.load(this.thumbs[this.thumbIdx].path, () => {
|
||||
this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
|
||||
});
|
||||
}
|
||||
|
||||
initFontInfo(fontObj) {
|
||||
|
|
|
|||
|
|
@ -163,10 +163,8 @@ const PageFontsCell = props => {
|
|||
|
||||
const getImageUri = fonts => {
|
||||
return fonts.map(font => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
let index = Math.floor(font.imgidx/spriteCols);
|
||||
return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -179,15 +177,19 @@ const PageFontsCell = props => {
|
|||
|
||||
const renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
|
||||
let images = getImageUri(fonts);
|
||||
let fonts = [...prevState.vlData.items],
|
||||
drawFonts = [...vlData.items];
|
||||
|
||||
let images = [],
|
||||
drawImages = getImageUri(drawFonts);
|
||||
for (let i = 0; i < drawFonts.length; i++) {
|
||||
fonts[i + vlData.fromIndex] = drawFonts[i];
|
||||
images[i + vlData.fromIndex] = drawImages[i];
|
||||
}
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
images,
|
||||
}};
|
||||
items: fonts,
|
||||
images,
|
||||
}}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -240,12 +242,12 @@ const PageFontsCell = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.onFontClick(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
|
||||
props.onFontClick((item || fonts[index]).name);
|
||||
storeTextSettings.addFontToRecent(item || fonts[index]);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
{vlFonts.vlData.images[index] && <img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />}
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -116,10 +116,8 @@ const PageFonts = props => {
|
|||
|
||||
const getImageUri = fonts => {
|
||||
return fonts.map(font => {
|
||||
thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
|
||||
thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
|
||||
|
||||
return thumbCanvas.toDataURL();
|
||||
let index = Math.floor(font.imgidx/spriteCols);
|
||||
return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -132,15 +130,19 @@ const PageFonts = props => {
|
|||
|
||||
const renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
|
||||
let images = getImageUri(fonts);
|
||||
let fonts = [...prevState.vlData.items],
|
||||
drawFonts = [...vlData.items];
|
||||
|
||||
let images = [],
|
||||
drawImages = getImageUri(drawFonts);
|
||||
for (let i = 0; i < drawFonts.length; i++) {
|
||||
fonts[i + vlData.fromIndex] = drawFonts[i];
|
||||
images[i + vlData.fromIndex] = drawImages[i];
|
||||
}
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
images,
|
||||
}};
|
||||
items: fonts,
|
||||
images,
|
||||
}}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -187,12 +189,12 @@ const PageFonts = props => {
|
|||
}}>
|
||||
<ul>
|
||||
{vlFonts.vlData.items.map((item, index) => (
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
|
||||
props.changeFontFamily(item.name);
|
||||
storeTextSettings.addFontToRecent(item);
|
||||
<ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
|
||||
props.changeFontFamily((item || fonts[index]).name);
|
||||
storeTextSettings.addFontToRecent(item || fonts[index]);
|
||||
addRecentStorage();
|
||||
}}>
|
||||
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
|
||||
{vlFonts.vlData.images[index] && <img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />}
|
||||
</ListItem>
|
||||
))}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue