From 50c5840755008b53b3378918f556c2ac656e22af Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 24 May 2022 20:43:30 +0300 Subject: [PATCH] [PE mobile][SSE mobile] Bug 57315 --- .../mobile/src/view/edit/EditText.jsx | 2 +- .../mobile/src/store/textSettings.js | 126 +++++++++++++++++- .../mobile/src/view/edit/EditText.jsx | 32 ++--- .../mobile/src/store/textSettings.js | 126 +++++++++++++++++- .../mobile/src/view/edit/EditCell.jsx | 32 ++--- .../mobile/src/view/edit/EditText.jsx | 32 ++--- 6 files changed, 298 insertions(+), 52 deletions(-) diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 9a64253c2..8744646d6 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -111,7 +111,7 @@ const PageFonts = props => { { 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] && } diff --git a/apps/presentationeditor/mobile/src/store/textSettings.js b/apps/presentationeditor/mobile/src/store/textSettings.js index 551c633ae..ccf03a07b 100644 --- a/apps/presentationeditor/mobile/src/store/textSettings.js +++ b/apps/presentationeditor/mobile/src/store/textSettings.js @@ -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) { diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index 8fae5157f..51244a8cc 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -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 => { }}> diff --git a/apps/spreadsheeteditor/mobile/src/store/textSettings.js b/apps/spreadsheeteditor/mobile/src/store/textSettings.js index b034ad03f..25d7c1d46 100644 --- a/apps/spreadsheeteditor/mobile/src/store/textSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/textSettings.js @@ -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) { diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 0c0943407..77a678ff3 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -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 => { }}> diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx index 4baee0613..b5bb24a71 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx @@ -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 => { }}>