[PE SSE mobile] Fix Bug 47900

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

@@ -8,6 +8,49 @@ 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) {
@@ -250,6 +293,14 @@ 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/view/edit/EditText.jsx

@@ -57,7 +57,15 @@ 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>
@@ -185,6 +193,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 [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -202,6 +218,13 @@ const PageFonts = props => {
         });
     };
 
+    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();
@@ -242,14 +265,11 @@ const PageFonts = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
-                            key={index}
+                            props.changeFontFamily(item.name);
-                            radio
+                        }}>
-                            checked={curFontName === item.name}
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
-                            title={item.name}
+                        </ListItem>
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {props.changeFontFamily(item.name)}}
-                        ></ListItem>
                     ))}
                 </ul>
             </List>

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

@@ -7,6 +7,49 @@ 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) {
@@ -100,6 +143,14 @@ 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/view/edit/EditText.jsx

@@ -32,7 +32,15 @@ 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>
@@ -98,6 +106,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 [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -115,6 +131,13 @@ const PageFonts = props => {
         });
     };
 
+    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}>
@@ -147,14 +170,11 @@ const PageFonts = props => {
             }}>
                 <ul>
                     {vlFonts.vlData.items.map((item, index) => (
-                        <ListItem
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
-                            key={index}
+                            props.changeFontFamily(item.name)
-                            radio
+                        }}>
-                            checked={curFontName === item.name}
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
-                            title={item.name}
+                        </ListItem>
-                            style={{fontFamily: `${item.name}`}}
-                            onClick={() => {props.changeFontFamily(item.name)}}
-                        ></ListItem>
                     ))}
                 </ul>
             </List>