[DE PE SSE] Fix Bug 52343

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

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

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

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

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

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

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

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