[DE PE SSE] Fix Bug 52343

This commit is contained in:
ShimaginAndrey 2021-09-07 12:23:59 +03:00
parent ce7791ea19
commit 1f8765a5de
4 changed files with 101 additions and 41 deletions

View file

@ -1,4 +1,4 @@
import React, {Fragment, useState } from 'react';
import React, {Fragment, useEffect, useState } from 'react';
import {observer, inject} from "mobx-react";
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -24,35 +24,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
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();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}}
});
};
const getImageUri = (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();
}
return (
<Page>
<Navbar title={t('Edit.textFonts')} backLink={t('Edit.textBack')}>
@ -88,7 +103,7 @@ const PageFonts = props => {
storeTextSettings.changeFontFamily(item.name);
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -105,7 +120,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -196,35 +196,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('ppe-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
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();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (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();
}
const paragraph = props.storeFocusObjects.paragraphObject;
if (!paragraph && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -265,7 +280,7 @@ const PageFonts = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -281,7 +296,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -138,35 +138,50 @@ const PageFontsCell = props => {
const spriteCols = storeTextSettings.spriteCols;
const spriteThumbs = storeTextSettings.spriteThumbs;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
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();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (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();
}
const storeFocusObjects = props.storeFocusObjects;
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
$$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
@ -205,7 +220,7 @@ const PageFontsCell = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.onFontClick(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -221,7 +236,7 @@ const PageFontsCell = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>

View file

@ -1,4 +1,4 @@
import React, {Fragment, useState} from 'react';
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react';
import { useTranslation } from 'react-i18next';
@ -109,35 +109,50 @@ const PageFonts = props => {
const spriteThumbs = storeTextSettings.spriteThumbs;
const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
useEffect(() => {
setRecent(getImageUri(arrayRecentFonts));
return () => {
}
}, []);
const addRecentStorage = () => {
let arr = [];
arrayRecentFonts.forEach(item => arr.push(item));
setRecent(getImageUri(arrayRecentFonts));
LocalStorage.setItem('sse-settings-recent-fonts', JSON.stringify(arr));
}
const [stateRecent, setRecent] = useState([]);
const [vlFonts, setVlFonts] = useState({
vlData: {
items: [],
}
});
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();
});
};
const renderExternal = (vl, vlData) => {
setVlFonts((prevState) => {
let fonts = [...prevState.vlData.items];
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
let images = getImageUri(fonts);
return {vlData: {
items: fonts,
images,
}};
});
};
const getImageUri = (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();
}
return (
<Page>
<Navbar title={_t.textFonts} backLink={_t.textBack}>
@ -170,7 +185,7 @@ const PageFonts = props => {
<ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
props.changeFontFamily(item.name);
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={stateRecent[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</List>
@ -186,7 +201,7 @@ const PageFonts = props => {
storeTextSettings.addFontToRecent(item);
addRecentStorage();
}}>
<img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
<img src={vlFonts.vlData.images[index]} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
</ListItem>
))}
</ul>