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

[DE PE SSE mobile] Correct text settings

Browse source
This commit is contained in:
SergeyEzhin 2021-08-13 17:59:31 +03:00
parent a7fa0baba8
commit c149e6da48
9 changed files with 214 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
apps/documenteditor/mobile/src/controller/edit/EditText.jsx
View file

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

64
apps/documenteditor/mobile/src/store/textSettings.js
View file

@ -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;

26
apps/documenteditor/mobile/src/view/edit/EditText.jsx
View file

@ -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 iconHeight = props.iconHeight;
const thumbs = props.thumbs;
const thumbIdx = props.thumbIdx;
const thumbCanvas = props.thumbCanvas;
const thumbContext = props.thumbContext;
const spriteCols = props.spriteCols;
const spriteThumbs = props.spriteThumbs;
const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
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,
spriteThumbs: props.spriteThumbs,
thumbs: props.thumbs,
thumbIdx: props.thumbIdx,
iconWidth: props.iconWidth,
iconHeight: props.iconHeight,
thumbCanvas: props.thumbCanvas,
thumbContext: props.thumbContext,
spriteCols: props.spriteCols
changeFontFamily: props.changeFontFamily
}}/>
<ListItem className='buttons'>
<Row>

51
apps/presentationeditor/mobile/src/controller/edit/EditText.jsx
View file

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

63
apps/presentationeditor/mobile/src/store/textSettings.js
View file

@ -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) {

26
apps/presentationeditor/mobile/src/view/edit/EditText.jsx
View file

@ -57,15 +57,7 @@ const EditText = props => {
<List>
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
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
changeFontFamily: props.changeFontFamily
}}/>
<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 iconHeight = props.iconHeight;
const thumbs = props.thumbs;
const thumbIdx = props.thumbIdx;
const thumbCanvas = props.thumbCanvas;
const thumbContext = props.thumbContext;
const spriteCols = props.spriteCols;
const spriteThumbs = props.spriteThumbs;
const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const [vlFonts, setVlFonts] = useState({
vlData: {

51
apps/spreadsheeteditor/mobile/src/controller/edit/EditText.jsx
View file

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

63
apps/spreadsheeteditor/mobile/src/store/textSettings.js
View file

@ -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) {

26
apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx
View file

@ -32,15 +32,7 @@ const EditText = props => {
<List>
<ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
changeFontSize: props.changeFontSize,
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
changeFontFamily: props.changeFontFamily
}}/>
<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 iconHeight = props.iconHeight;
const thumbs = props.thumbs;
const thumbIdx = props.thumbIdx;
const thumbCanvas = props.thumbCanvas;
const thumbContext = props.thumbContext;
const spriteCols = props.spriteCols;
const spriteThumbs = props.spriteThumbs;
const iconWidth = storeTextSettings.iconWidth;
const iconHeight = storeTextSettings.iconHeight;
const thumbs = storeTextSettings.thumbs;
const thumbIdx = storeTextSettings.thumbIdx;
const thumbCanvas = storeTextSettings.thumbCanvas;
const thumbContext = storeTextSettings.thumbContext;
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
const [vlFonts, setVlFonts] = useState({
vlData: {