[PE mobile][SSE mobile] Bug 57315

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -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`}} />}

apps/presentationeditor/mobile/src/store/textSettings.js

@@ -133,9 +133,129 @@ export class storeTextSettings {
     }
 
     loadSprite() {
-        this.spriteThumbs = new Image();
+        function CThumbnailLoader() {
-        this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
+            this.supportBinaryFormat = (window['AscDesktopEditor'] && !window['AscDesktopEditor']['isSupportBinaryFontsSprite']) ? false : true;
-        this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
+
+            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) {

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);
+            let index = Math.floor(font.imgidx/spriteCols);
-            thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+            return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
-
-            return thumbCanvas.toDataURL();
         });
     };
 
@@ -232,15 +230,19 @@ const PageFonts = props => {
 
     const renderExternal = (vl, vlData) => {
         setVlFonts((prevState) => {
-            let fonts = [...prevState.vlData.items];
+            let fonts = [...prevState.vlData.items],
-            fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
+                drawFonts = [...vlData.items];
-
-            let images = getImageUri(fonts);
 
+            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,
+                    items: fonts,
-                images,
+                    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={() => {
+                        <ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
-                            props.changeFontFamily(item.name);
+                            props.changeFontFamily((item || fonts[index]).name);
-                            storeTextSettings.addFontToRecent(item);
+                            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>

apps/spreadsheeteditor/mobile/src/store/textSettings.js

@@ -133,9 +133,129 @@ export class storeTextSettings {
     }
 
     loadSprite() {
-        this.spriteThumbs = new Image();
+        function CThumbnailLoader() {
-        this.spriteCols = Math.floor(this.spriteThumbs.width / (this.thumbs[this.thumbIdx].width)) || 1;
+            this.supportBinaryFormat = (window['AscDesktopEditor'] && !window['AscDesktopEditor']['isSupportBinaryFontsSprite']) ? false : true;
-        this.spriteThumbs.src = this.thumbs[this.thumbIdx].path;
+
+            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) {

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);
+            let index = Math.floor(font.imgidx/spriteCols);
-            thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+            return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
-
-            return thumbCanvas.toDataURL();
         });
     };
 
@@ -179,15 +177,19 @@ const PageFontsCell = props => {
 
     const renderExternal = (vl, vlData) => {
         setVlFonts((prevState) => {
-            let fonts = [...prevState.vlData.items];
+            let fonts = [...prevState.vlData.items],
-            fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
+                drawFonts = [...vlData.items];
-
-            let images = getImageUri(fonts);
 
+            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,
+                    items: fonts,
-                images,
+                    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={() => {
+                        <ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
-                            props.onFontClick(item.name);
+                            props.onFontClick((item || fonts[index]).name);
-                            storeTextSettings.addFontToRecent(item); 
+                            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>

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);
+            let index = Math.floor(font.imgidx/spriteCols);
-            thumbContext.drawImage(spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(font.imgidx / spriteCols));
+            return spriteThumbs.getImage(index, thumbCanvas, thumbContext).toDataURL();
-
-            return thumbCanvas.toDataURL();
         });
     };
 
@@ -132,15 +130,19 @@ const PageFonts = props => {
 
     const renderExternal = (vl, vlData) => {
         setVlFonts((prevState) => {
-            let fonts = [...prevState.vlData.items];
+            let fonts = [...prevState.vlData.items],
-            fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
+                drawFonts = [...vlData.items];
-
-            let images = getImageUri(fonts);
 
+            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,
+                    items: fonts,
-                images,
+                    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={() => {
+                        <ListItem className="font-item" key={index} radio checked={curFontName === (item || fonts[index]).name} onClick={() => {
-                            props.changeFontFamily(item.name);
+                            props.changeFontFamily((item || fonts[index]).name);
-                            storeTextSettings.addFontToRecent(item);
+                            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>