[DE PE SSE mobile] Correct text settings

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

@@ -4,49 +4,6 @@ import { EditText } from '../../view/edit/EditText'
 class EditTextController extends Component {
     constructor(props) {
         super(props);
-
-        this.iconWidth = 302,
-        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26,
-        this.thumbCanvas = document.createElement('canvas'),
-        this.thumbContext = this.thumbCanvas.getContext('2d'),
-        this.thumbs = [
-            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
-            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
-            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
-        ],
-        this.thumbIdx = 0,
-        this.listItemHeight = 26,
-        this.spriteCols = 1,
-        this.applicationPixelRatio = Common.Utils.applicationPixelRatio();
-
-        if (typeof window['AscDesktopEditor'] === 'object') {
-            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
-            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
-            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@2x');
-        }
-
-        let bestDistance = Math.abs(this.applicationPixelRatio - this.thumbs[0].ratio);
-        let currentDistance = 0;
-
-        for (let i = 1; i < this.thumbs.length; i++) {
-            currentDistance = Math.abs(this.applicationPixelRatio - this.thumbs[i].ratio);
-            if (currentDistance < (bestDistance - 0.0001))
-            {
-                bestDistance = currentDistance;
-                this.thumbIdx = i;
-            }
-        }
-
-        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
-        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
-
-        this.loadSprite();
-    }
-
-    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;
     }
 
     componentDidMount() {
@@ -261,14 +218,6 @@ class EditTextController extends Component {
                 onNumber={this.onNumber}
                 onMultiLevelList={this.onMultiLevelList}
                 onLineSpacing={this.onLineSpacing}
-                spriteThumbs={this.spriteThumbs}
-                thumbs={this.thumbs}
-                thumbIdx={this.thumbIdx}
-                iconWidth={this.iconWidth}
-                iconHeight={this.iconHeight}
-                thumbCanvas={this.thumbCanvas}
-                thumbContext={this.thumbContext}
-                spriteCols={this.spriteCols}
             />
         )
     }

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

@@ -39,10 +39,27 @@ export class storeTextSettings {
             changeCustomTextColors: action,
             resetLineSpacing: action,
             resetBackgroundColor: action,
-            changeFontFamily: action
+            changeFontFamily: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action
         });
     }
 
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     fontName = '';
     fontSize = undefined;
@@ -80,7 +97,52 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        if (typeof window['AscDesktopEditor'] === 'object') {
+            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
+            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.25x');
+            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            this.thumbs[3].path = window['AscDesktopEditor'].getFontsSprite('@1.75x');
+            this.thumbs[4].path = window['AscDesktopEditor'].getFontsSprite('@2x');
+        }
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
     }
+
+    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;
+    }
+
     resetFontName (font) {
         let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
         this.fontName = name;

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

@@ -14,14 +14,14 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt');
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const iconWidth = props.iconWidth;
+    const iconWidth = storeTextSettings.iconWidth;
-    const iconHeight = props.iconHeight;
+    const iconHeight = storeTextSettings.iconHeight;
-    const thumbs = props.thumbs;
+    const thumbs = storeTextSettings.thumbs;
-    const thumbIdx = props.thumbIdx;
+    const thumbIdx = storeTextSettings.thumbIdx;
-    const thumbCanvas = props.thumbCanvas;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
-    const thumbContext = props.thumbContext;
+    const thumbContext = storeTextSettings.thumbContext;
-    const spriteCols = props.spriteCols;
+    const spriteCols = storeTextSettings.spriteCols;
-    const spriteThumbs = props.spriteThumbs;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
    
     const [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -515,15 +515,7 @@ const EditText = props => {
             <List>
                 <ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
                     changeFontSize: props.changeFontSize,
-                    changeFontFamily: props.changeFontFamily,
+                    changeFontFamily: props.changeFontFamily
-                    spriteThumbs: props.spriteThumbs,
-                    thumbs: props.thumbs,
-                    thumbIdx: props.thumbIdx,
-                    iconWidth: props.iconWidth,
-                    iconHeight: props.iconHeight,
-                    thumbCanvas: props.thumbCanvas,
-                    thumbContext: props.thumbContext,
-                    spriteCols: props.spriteCols
                 }}/>
                 <ListItem className='buttons'>
                     <Row>

apps/presentationeditor/mobile/src/controller/edit/EditText.jsx

@@ -8,49 +8,6 @@ import { EditText } from '../../view/edit/EditText';
 class EditTextController extends Component {
     constructor (props) {
         super(props);
-
-        this.iconWidth = 302,
-        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26,
-        this.thumbCanvas = document.createElement('canvas'),
-        this.thumbContext = this.thumbCanvas.getContext('2d'),
-        this.thumbs = [
-            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
-            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
-            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
-        ],
-        this.thumbIdx = 0,
-        this.listItemHeight = 26,
-        this.spriteCols = 1,
-        this.applicationPixelRatio = Common.Utils.applicationPixelRatio();
-
-        if (typeof window['AscDesktopEditor'] === 'object') {
-            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
-            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
-            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@2x');
-        }
-
-        let bestDistance = Math.abs(this.applicationPixelRatio - this.thumbs[0].ratio);
-        let currentDistance = 0;
-
-        for (let i = 1; i < this.thumbs.length; i++) {
-            currentDistance = Math.abs(this.applicationPixelRatio - this.thumbs[i].ratio);
-            if (currentDistance < (bestDistance - 0.0001))
-            {
-                bestDistance = currentDistance;
-                this.thumbIdx = i;
-            }
-        }
-
-        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
-        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
-
-        this.loadSprite();
-    }
-
-    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;
     }
 
     toggleBold(value) {
@@ -293,14 +250,6 @@ class EditTextController extends Component {
                 onBullet={this.onBullet}
                 onNumber={this.onNumber}
                 onLineSpacing={this.onLineSpacing}
-                spriteThumbs={this.spriteThumbs}
-                thumbs={this.thumbs}
-                thumbIdx={this.thumbIdx}
-                iconWidth={this.iconWidth}
-                iconHeight={this.iconHeight}
-                thumbCanvas={this.thumbCanvas}
-                thumbContext={this.thumbContext}
-                spriteCols={this.spriteCols}
             />
         )
     }

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

@@ -40,10 +40,27 @@ export class storeTextSettings {
             resetParagraphValign: action,
             resetTextColor: action,
             changeCustomTextColors: action,
-            resetLineSpacing: action
+            resetLineSpacing: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action
         });
     }
 
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     fontName = '';
     fontSize = undefined;
@@ -81,6 +98,50 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        if (typeof window['AscDesktopEditor'] === 'object') {
+            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
+            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.25x');
+            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            this.thumbs[3].path = window['AscDesktopEditor'].getFontsSprite('@1.75x');
+            this.thumbs[4].path = window['AscDesktopEditor'].getFontsSprite('@2x');
+        }
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
+    }
+
+    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;
     }
 
     resetFontName (font) {

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

@@ -57,15 +57,7 @@ const EditText = props => {
             <List>
                 <ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
                     changeFontSize: props.changeFontSize,
-                    changeFontFamily: props.changeFontFamily,
+                    changeFontFamily: props.changeFontFamily
-                    spriteThumbs: props.spriteThumbs,
-                    thumbs: props.thumbs,
-                    thumbIdx: props.thumbIdx,
-                    iconWidth: props.iconWidth,
-                    iconHeight: props.iconHeight,
-                    thumbCanvas: props.thumbCanvas,
-                    thumbContext: props.thumbContext,
-                    spriteCols: props.spriteCols
                 }}/>
                 <ListItem className='buttons'>
                     <Row>
@@ -193,14 +185,14 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' || size == '' ? _t.textAuto : size + ' ' + _t.textPt;
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const iconWidth = props.iconWidth;
+    const iconWidth = storeTextSettings.iconWidth;
-    const iconHeight = props.iconHeight;
+    const iconHeight = storeTextSettings.iconHeight;
-    const thumbs = props.thumbs;
+    const thumbs = storeTextSettings.thumbs;
-    const thumbIdx = props.thumbIdx;
+    const thumbIdx = storeTextSettings.thumbIdx;
-    const thumbCanvas = props.thumbCanvas;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
-    const thumbContext = props.thumbContext;
+    const thumbContext = storeTextSettings.thumbContext;
-    const spriteCols = props.spriteCols;
+    const spriteCols = storeTextSettings.spriteCols;
-    const spriteThumbs = props.spriteThumbs;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
 
     const [vlFonts, setVlFonts] = useState({
         vlData: {

apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx

@@ -7,49 +7,6 @@ import { EditText } from '../../view/edit/EditText';
 class EditTextController extends Component {
     constructor (props) {
         super(props);
-
-        this.iconWidth = 302,
-        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26,
-        this.thumbCanvas = document.createElement('canvas'),
-        this.thumbContext = this.thumbCanvas.getContext('2d'),
-        this.thumbs = [
-            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
-            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
-            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
-        ],
-        this.thumbIdx = 0,
-        this.listItemHeight = 26,
-        this.spriteCols = 1,
-        this.applicationPixelRatio = Common.Utils.applicationPixelRatio();
-
-        if (typeof window['AscDesktopEditor'] === 'object') {
-            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
-            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
-            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@2x');
-        }
-
-        let bestDistance = Math.abs(this.applicationPixelRatio - this.thumbs[0].ratio);
-        let currentDistance = 0;
-
-        for (let i = 1; i < this.thumbs.length; i++) {
-            currentDistance = Math.abs(this.applicationPixelRatio - this.thumbs[i].ratio);
-            if (currentDistance < (bestDistance - 0.0001))
-            {
-                bestDistance = currentDistance;
-                this.thumbIdx = i;
-            }
-        }
-
-        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
-        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
-
-        this.loadSprite();
-    }
-
-    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;
     }
 
     toggleBold(value) {
@@ -143,14 +100,6 @@ class EditTextController extends Component {
                 changeFontSize={this.changeFontSize}
                 changeFontFamily={this.changeFontFamily}
                 onTextColor={this.onTextColor}
-                spriteThumbs={this.spriteThumbs}
-                thumbs={this.thumbs}
-                thumbIdx={this.thumbIdx}
-                iconWidth={this.iconWidth}
-                iconHeight={this.iconHeight}
-                thumbCanvas={this.thumbCanvas}
-                thumbContext={this.thumbContext}
-                spriteCols={this.spriteCols}
             />
         )
     }

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

@@ -20,10 +20,27 @@ export class storeTextSettings {
             initEditorFonts: action,
             initFontInfo: action,
             changeTextColor: action,
-            changeCustomTextColors: action
+            changeCustomTextColors: action,
+            iconWidth: observable,
+            iconHeight: observable,
+            thumbCanvas: observable,
+            thumbContext: observable,
+            thumbs: observable,
+            thumbIdx: observable,
+            listItemHeight: observable,
+            spriteCols: observable,
+            loadSprite: action
         });
     }
     
+    iconWidth;
+    iconHeight;
+    thumbCanvas;
+    thumbContext;
+    thumbs;
+    thumbIdx = 0;
+    listItemHeight = 28;
+    spriteCols = 1;
     fontsArray = [];
     fontInfo = {};
     fontName = '';
@@ -84,6 +101,50 @@ export class storeTextSettings {
         });
 
         this.fontsArray = array;
+        this.iconWidth = 300;
+        this.iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 28;
+        this.thumbCanvas = document.createElement('canvas');
+        this.thumbContext = this.thumbCanvas.getContext('2d');
+        this.thumbs = [
+            {ratio: 1, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail.png', width: this.iconWidth, height: this.iconHeight},
+            {ratio: 1.25, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.25x.png', width: this.iconWidth * 1.25, height: this.iconHeight * 1.25},
+            {ratio: 1.5, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.5x.png', width: this.iconWidth * 1.5, height: this.iconHeight * 1.5},
+            {ratio: 1.75, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@1.75x.png', width: this.iconWidth * 1.75, height: this.iconHeight * 1.75},
+            {ratio: 2, path: '../../../../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: this.iconWidth * 2, height: this.iconHeight * 2}
+        ];
+
+        const applicationPixelRatio = Common.Utils.applicationPixelRatio();
+
+        if (typeof window['AscDesktopEditor'] === 'object') {
+            this.thumbs[0].path = window['AscDesktopEditor'].getFontsSprite('');
+            this.thumbs[1].path = window['AscDesktopEditor'].getFontsSprite('@1.25x');
+            this.thumbs[2].path = window['AscDesktopEditor'].getFontsSprite('@1.5x');
+            this.thumbs[3].path = window['AscDesktopEditor'].getFontsSprite('@1.75x');
+            this.thumbs[4].path = window['AscDesktopEditor'].getFontsSprite('@2x');
+        }
+
+        let bestDistance = Math.abs(applicationPixelRatio - this.thumbs[0].ratio);
+        let currentDistance = 0;
+
+        for (let i = 1; i < this.thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio - this.thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                this.thumbIdx = i;
+            }
+        }
+
+        this.thumbCanvas.height = this.thumbs[this.thumbIdx].height;
+        this.thumbCanvas.width = this.thumbs[this.thumbIdx].width;
+
+        this.loadSprite();
+    }
+
+    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;
     }
 
     initFontInfo(fontObj) {

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

@@ -32,15 +32,7 @@ const EditText = props => {
             <List>
                 <ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
                     changeFontSize: props.changeFontSize,
-                    changeFontFamily: props.changeFontFamily,
+                    changeFontFamily: props.changeFontFamily
-                    spriteThumbs: props.spriteThumbs,
-                    thumbs: props.thumbs,
-                    thumbIdx: props.thumbIdx,
-                    iconWidth: props.iconWidth,
-                    iconHeight: props.iconHeight,
-                    thumbCanvas: props.thumbCanvas,
-                    thumbContext: props.thumbContext,
-                    spriteCols: props.spriteCols
                 }}/>
                 <ListItem className='buttons'>
                     <Row>
@@ -106,14 +98,14 @@ const PageFonts = props => {
     const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
     const curFontName = storeTextSettings.fontName;
     const fonts = storeTextSettings.fontsArray;
-    const iconWidth = props.iconWidth;
+    const iconWidth = storeTextSettings.iconWidth;
-    const iconHeight = props.iconHeight;
+    const iconHeight = storeTextSettings.iconHeight;
-    const thumbs = props.thumbs;
+    const thumbs = storeTextSettings.thumbs;
-    const thumbIdx = props.thumbIdx;
+    const thumbIdx = storeTextSettings.thumbIdx;
-    const thumbCanvas = props.thumbCanvas;
+    const thumbCanvas = storeTextSettings.thumbCanvas;
-    const thumbContext = props.thumbContext;
+    const thumbContext = storeTextSettings.thumbContext;
-    const spriteCols = props.spriteCols;
+    const spriteCols = storeTextSettings.spriteCols;
-    const spriteThumbs = props.spriteThumbs;
+    const spriteThumbs = storeTextSettings.spriteThumbs;
 
     const [vlFonts, setVlFonts] = useState({
         vlData: {