[DE PE SSE] Fix Bug 52343
This commit is contained in:
parent
ce7791ea19
commit
1f8765a5de
|
@ -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,34 +24,49 @@ 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 renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
}}
|
||||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
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,
|
||||
}}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
@ -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>
|
||||
|
|
|
@ -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,34 +196,49 @@ 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 renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
}};
|
||||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
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 paragraph = props.storeFocusObjects.paragraphObject;
|
||||
if (!paragraph && Device.phone) {
|
||||
|
@ -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>
|
||||
|
|
|
@ -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,34 +138,49 @@ 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 renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
}};
|
||||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
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 storeFocusObjects = props.storeFocusObjects;
|
||||
if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
|
||||
|
@ -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>
|
||||
|
|
|
@ -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,34 +109,49 @@ 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 renderExternal = (vl, vlData) => {
|
||||
setVlFonts((prevState) => {
|
||||
let fonts = [...prevState.vlData.items];
|
||||
fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items);
|
||||
return {vlData: {
|
||||
items: fonts,
|
||||
}};
|
||||
});
|
||||
};
|
||||
|
||||
const getImageUri = (font) => {
|
||||
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,
|
||||
}};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Page>
|
||||
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue