[SSE mobile] Added Text Settings

apps/common/mobile/lib/component/ThemeColorPalette.jsx

@@ -3,6 +3,7 @@ import { f7, ListItem, List, Icon } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
+    console.log(curColor);
     return (
         <div className='palette'>
             {themeColors.map((row, rowIndex) => {
@@ -11,7 +12,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
                         {row.map((effect, index) => {
                             return(
                                 <a key={`tc-${rowIndex}-${index}`}
-                                   className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
+                                   className={((curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor && curColor === effect.color)) ? 'active' : ''}
                                    style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                 ></a>

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -5,7 +5,7 @@ import { f7 } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeFocusObjects", "storeCellSettings")
+@inject("storeFocusObjects", "storeCellSettings", "storeTextSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -206,12 +206,15 @@ class MainController extends Component {
 
         const storeFocusObjects = this.props.storeFocusObjects;
         const storeCellSettings = this.props.storeCellSettings;
+        const storeTextSettings = this.props.storeTextSettings;
         const styleSize = storeCellSettings.styleSize;
        
         this.api.asc_registerCallback('asc_onSelectionChanged', cellInfo => {
-            // console.log(cellInfo);
+            console.log(cellInfo);
             storeFocusObjects.resetCellInfo(cellInfo);
             storeCellSettings.initCellSettings(cellInfo);
+            storeTextSettings.initTextSettings(cellInfo);
+
             let selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
 
             if(selectedObjects.length) {
@@ -224,11 +227,13 @@ class MainController extends Component {
 
         this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
             storeCellSettings.initEditorFonts(fonts, select);
+            storeTextSettings.initEditorFonts(fonts, select);
         });
 
         this.api.asc_registerCallback('asc_onEditorSelectionChanged', fontObj => {
-            // console.log(fontObj)
+            console.log(fontObj)
             storeCellSettings.initFontInfo(fontObj);
+            storeTextSettings.initFontInfo(fontObj);
         });
 
         this.api.asc_registerCallback('asc_onInitEditorStyles', styles => {

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

@@ -0,0 +1,108 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+import { EditText } from '../../view/edit/EditText';
+
+class EditTextController extends Component {
+    constructor (props) {
+        super(props);
+    }
+
+    toggleBold(value) {
+        const api = Common.EditorApi.get();
+        api.asc_setCellBold(value);
+    };
+
+    toggleItalic(value) {
+        const api = Common.EditorApi.get();
+        api.asc_setCellItalic(value);
+    };
+
+    toggleUnderline(value) {
+        const api = Common.EditorApi.get();
+        api.asc_setCellUnderline(value);
+    };
+
+    onParagraphAlign(type) {
+        const api = Common.EditorApi.get();
+        let value = AscCommon.align_Left;
+        
+        switch (type) {
+            case 'justify':
+                value = AscCommon.align_Justify;
+                break;
+            case 'right':
+                value = AscCommon.align_Right;
+                break;
+            case 'center':
+                value = AscCommon.align_Center;
+                break;
+        }
+
+        api.asc_setCellAlign(value);
+    };
+
+    onParagraphValign(type) {
+        const api = Common.EditorApi.get();
+        let value;
+
+        switch(type) {
+            case 'top':
+                value = Asc.c_oAscVAlign.Top;
+                break;
+            case 'center':
+                value = Asc.c_oAscVAlign.Center;
+                break;
+            case 'bottom':
+                value = Asc.c_oAscVAlign.Bottom;
+                break;
+        }
+
+        api.asc_setCellVertAlign(value);
+    };
+
+    changeFontSize(curSize, isDecrement) {
+        const api = Common.EditorApi.get();
+        let size = curSize;
+
+        if (isDecrement) {
+            typeof size === 'undefined' ? api.asc_decreaseFontSize() : size = Math.max(1, --size);
+        } else {
+            typeof size === 'undefined' ? api.asc_increaseFontSize() : size = Math.min(100, ++size);
+        }
+
+        if (typeof size !== 'undefined') {
+            api.asc_setCellFontSize(size);
+        }
+    };
+
+    changeFontFamily(name) {
+        const api = Common.EditorApi.get();
+        if (name) {
+            api.asc_setCellFontName(name);
+        }
+    }
+
+    onTextColor(color) {
+        const api = Common.EditorApi.get();
+        api.asc_setCellTextColor(Common.Utils.ThemeColor.getRgbColor(color));
+    }
+
+    render () {
+        return (
+            <EditText 
+                toggleBold={this.toggleBold}
+                toggleItalic={this.toggleItalic}
+                toggleUnderline={this.toggleUnderline}
+                onParagraphAlign={this.onParagraphAlign}
+                onParagraphValign={this.onParagraphValign}
+                changeFontSize={this.changeFontSize}
+                changeFontFamily={this.changeFontFamily}
+                onTextColor={this.onTextColor}
+            />
+        )
+    }
+}
+
+export default EditTextController;

apps/spreadsheeteditor/mobile/src/store/focusObjects.js

@@ -92,7 +92,7 @@ export class storeFocusObjects {
                 }
             }
         } else if (isTextShape || isTextChart) {
-            const selectedObjects = this.api.asc_getGraphicObjectProps();
+            const selectedObjects = Common.EditorApi.get().asc_getGraphicObjectProps();
             let isEquation = false;
 
             for (var i = 0; i < selectedObjects.length; i++) {

apps/spreadsheeteditor/mobile/src/store/mainStore.js

@@ -5,7 +5,7 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeWorksheets} from './sheets';
 import {storeFunctions} from './functions';
 import {storePalette} from "./palette";
-// import {storeTextSettings} from "./textSettings";
+import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 import {storeShapeSettings} from "./shapeSettings";
 import {storeCellSettings} from "./cellSettings";
@@ -19,7 +19,7 @@ export const stores = {
     users: new storeUsers(),
     sheets: new storeWorksheets(),
     storeFunctions: new storeFunctions(),
-    // storeTextSettings: new storeTextSettings(),
+    storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     storeShapeSettings: new storeShapeSettings(),
     storeChartSettings: new storeChartSettings(),

apps/spreadsheeteditor/mobile/src/store/textSettings.js

@@ -0,0 +1,91 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeTextSettings {
+
+    @observable fontsArray = [];
+    @observable fontInfo = {};
+    @observable fontName = '';
+    @observable fontSize = undefined;
+    @observable isBold = false;
+    @observable isItalic = false;
+    @observable isUnderline = false;
+    @observable textColor = undefined;
+    @observable customTextColors = [];
+    @observable paragraphAlign = undefined;
+    @observable paragraphValign = undefined;
+    @observable textIn = undefined;
+
+    @action initTextSettings(cellInfo) {
+        let xfs = cellInfo.asc_getXfs();
+        let selectType = cellInfo.asc_getSelectionType();
+
+        switch (selectType) {
+            case Asc.c_oAscSelectionType.RangeChartText: this.textIn = 1; break;
+            case Asc.c_oAscSelectionType.RangeShapeText: this.textIn = 2; break;
+            default: this.textIn = 0;
+        }
+
+        this.fontName = xfs.asc_getFontName();
+        this.fontSize = xfs.asc_getFontSize();
+
+        this.isBold = xfs.asc_getFontBold();
+        this.isItalic = xfs.asc_getFontItalic();
+        this.isUnderline = xfs.asc_getFontUnderline();
+    
+        let color = xfs.asc_getFontColor();
+        console.log(color);
+        this.textColor = this.resetTextColor(color);
+
+        this.paragraphAlign = xfs.asc_getHorAlign();
+        this.paragraphValign = xfs.asc_getVertAlign();
+    }
+
+    @action initEditorFonts (fonts, select) {
+        let array = [];
+        for (let font of fonts) {
+            let fontId = font.asc_getFontId();
+            array.push({
+                id          : fontId,
+                name        : font.asc_getFontName(),
+                //displayValue: font.asc_getFontName(),
+                imgidx      : font.asc_getFontThumbnail(),
+                type        : font.asc_getFontType()
+            });
+        }
+
+        this.fontsArray = array;
+    }
+
+    @action initFontInfo(fontObj) {
+        this.fontInfo = fontObj;
+    }
+
+    @action changeTextColor(value) {
+        this.textColor = value;
+    }
+
+    resetTextColor (color) {
+        let value;
+
+        if (color) {
+            if (color.get_auto()) {
+                value = 'auto';
+            } else {
+                if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    value = {
+                        color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
+                        effectValue: color.get_value()
+                    }
+                } else {
+                    value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                }
+            }
+        }
+
+        return value;
+    }
+
+    @action changeCustomTextColors (colors) {
+        this.customTextColors = colors;
+    }
+}

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

@@ -8,10 +8,12 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import EditCellController from "../../controller/edit/EditCell";
 import EditShapeController from "../../controller/edit/EditShape";
 import EditImageController from "../../controller/edit/EditImage";
+import EditTextController from "../../controller/edit/EditText";
 
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
 import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell } from './EditCell';
+import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
 
 const routes = [
 
@@ -126,6 +128,21 @@ const routes = [
     {
         path: '/edit-time-format-cell/',
         component: PageTimeFormatCell
+    }, 
+
+    // Text
+
+    {
+        path: '/edit-text-fonts/',
+        component: PageTextFonts
+    },
+    {
+        path: '/edit-text-font-color/',
+        component: PageTextFontColor
+    }, 
+    {
+        path: '/edit-text-custom-font-color/',
+        component: PageTextCustomFontColor
     }
 
 ];
@@ -218,6 +235,13 @@ const EditTabs = props => {
                 component: <EditImageController />
             })
         }
+        if (settings.indexOf('text') > -1) {
+            editors.push({
+                caption: _t.textText,
+                id: 'edit-text',
+                component: <EditTextController />
+            })
+        }
     }
 
     return (

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

@@ -0,0 +1,237 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+
+const EditText = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    // const metricText = Common.Utils.Metric.getCurrentMetricName();
+    const storeTextSettings = props.storeTextSettings;
+    const textIn = storeTextSettings.textIn;
+
+    const fontName = storeTextSettings.fontName || _t.textFonts;
+    const fontSize = storeTextSettings.fontSize;
+    const fontColor = storeTextSettings.textColor;
+    console.log(fontColor);
+
+    const displaySize = typeof fontSize === 'undefined' ? _t.textAuto : fontSize + ' ' + _t.textPt;
+    const isBold = storeTextSettings.isBold;
+    const isItalic = storeTextSettings.isItalic;
+    const isUnderline = storeTextSettings.isUnderline;
+    const paragraphAlign = storeTextSettings.paragraphAlign;
+    const paragraphValign = storeTextSettings.paragraphValign;
+
+    const fontColorPreview = fontColor !== 'auto' ?
+        <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
+        <span className="color-preview auto"></span>;
+
+    return (
+        <Fragment>
+            <List>
+                <ListItem title={fontName} link="/edit-text-fonts/" after={displaySize} routeProps={{
+                    changeFontSize: props.changeFontSize,
+                    changeFontFamily: props.changeFontFamily
+                }}/>
+                <ListItem className='buttons'>
+                    <Row>
+                        <a className={'button' + (isBold ? ' active' : '')} onClick={() => {props.toggleBold(!isBold)}}><b>B</b></a>
+                        <a className={'button' + (isItalic ? ' active' : '')} onClick={() => {props.toggleItalic(!isItalic)}}><i>I</i></a>
+                        <a className={'button' + (isUnderline ? ' active' : '')} onClick={() => {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U</a>
+                    </Row>
+                </ListItem>
+                <ListItem title={_t.textTextColor} link="/edit-text-font-color/" routeProps={{
+                    onTextColor: props.onTextColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-text-color">{fontColorPreview}</Icon> :
+                        fontColorPreview
+                    }
+                </ListItem>
+            </List>
+            {textIn === 2 ? (
+                <Fragment>
+                    <List>
+                        <ListItem className='buttons'>
+                            <Row>
+                                <a className={'button' + (paragraphAlign === AscCommon.align_Left ? ' active' : '')} onClick={() => {props.onParagraphAlign('left')}}>
+                                    <Icon slot="media" icon="icon-text-align-left"></Icon>
+                                </a>
+                                <a className={'button' + (paragraphAlign === AscCommon.align_Center ? ' active' : '')} onClick={() => {props.onParagraphAlign('center')}}>
+                                    <Icon slot="media" icon="icon-text-align-center"></Icon>
+                                </a>
+                                <a className={'button' + (paragraphAlign === AscCommon.align_Right ? ' active' : '')} onClick={() => {props.onParagraphAlign('right')}}>
+                                    <Icon slot="media" icon="icon-text-align-right"></Icon>
+                                </a>
+                                <a className={'button' + (paragraphAlign === AscCommon.align_Justify ? ' active' : '')} onClick={() => {props.onParagraphAlign('justify')}}>
+                                    <Icon slot="media" icon="icon-text-align-jast"></Icon>
+                                </a>
+                            </Row>
+                        </ListItem>
+                        <ListItem className='buttons'>
+                            <Row>
+                                <a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Top ? ' active' : '')} onClick={() => {props.onParagraphValign('top')}}>
+                                    <Icon slot="media" icon="icon-text-valign-top"></Icon>
+                                </a>
+                                <a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Center ? ' active' : '')} onClick={() => {props.onParagraphValign('center')}}>
+                                    <Icon slot="media" icon="icon-text-valign-middle"></Icon>
+                                </a>
+                                <a className={'button' + (paragraphValign === Asc.c_oAscVAlign.Bottom ? ' active' : '')} onClick={() => {props.onParagraphValign('bottom')}}>
+                                    <Icon slot="media" icon="icon-text-valign-bottom"></Icon>
+                                </a>
+                            </Row>
+                        </ListItem>
+                    </List>
+                </Fragment>
+            ) : null}
+        </Fragment>
+    );
+};
+
+const PageFonts = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const size = storeTextSettings.fontSize;
+    const displaySize = typeof size === 'undefined' ? _t.textAuto : size + ' ' + _t.textPt;
+    const curFontName = storeTextSettings.fontName;
+    const fonts = storeTextSettings.fontsArray;
+
+    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,
+            }};
+        });
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textFonts} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textSize}>
+                    {!isAndroid && <div slot='after-start'>{displaySize}</div>}
+                    <div slot='after'>
+                        <Segmented>
+                            <Button outline className='decrement item-link' onClick={() => {props.changeFontSize(size, true)}}>
+                                {isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
+                            </Button>
+                            {isAndroid && <label>{displaySize}</label>}
+                            <Button outline className='increment item-link' onClick={() => {props.changeFontSize(size, false)}}>
+                                {isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
+                            </Button>
+                        </Segmented>
+                    </div>
+                </ListItem>
+            </List>
+            <BlockTitle>{_t.textFonts}</BlockTitle>
+            <List virtualList virtualListParams={{
+                items: fonts,
+                renderExternal: renderExternal
+            }}>
+                <ul>
+                    {vlFonts.vlData.items.map((item, index) => (
+                        <ListItem
+                            key={index}
+                            radio
+                            checked={curFontName === item.name}
+                            title={item.name}
+                            style={{fontFamily: `${item.name}`}}
+                            onClick={() => {props.changeFontFamily(item.name)}}
+                        ></ListItem>
+                    ))}
+                </ul>
+            </List>
+        </Page>
+    );
+};
+
+const PageFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const storePalette = props.storePalette;
+    const textColor = storeTextSettings.textColor;
+    const customColors = storePalette.customColors;
+
+    console.log(textColor);
+
+    const changeColor = (color, effectId, effectValue) => {
+        if (color !== 'empty') {
+            if (effectId !== undefined) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                storeTextSettings.changeTextColor(newColor);
+                props.onTextColor(newColor);
+            } else {
+                storeTextSettings.changeTextColor(color);
+                props.onTextColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-text-custom-font-color/');
+        }
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textTextColor} backLink={_t.textBack} />
+            <ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors} />
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
+                    onTextColor: props.onTextColor
+                }}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const PageCustomFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const storeTextSettings = props.storeTextSettings;
+    const storePalette = props.storePalette;
+    let textColor = storeTextSettings.textColor;
+
+    if (typeof textColor === 'object') {
+        textColor = textColor.color;
+    }
+
+    const autoColor = textColor === 'auto' ? window.getComputedStyle(document.getElementById('font-color-auto')).backgroundColor : null;
+
+    const onAddNewColor = (colors, color) => {
+        storePalette.changeCustomColors(colors);
+        storeTextSettings.changeTextColor(color);
+        props.onTextColor(color);
+        props.f7router.back();
+    };
+    return (
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker autoColor={autoColor} currentColor={textColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
+const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
+const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor));
+const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
+
+export {
+    EditTextContainer as EditText,
+    PageTextFonts,
+    PageTextFontColor,
+    PageTextCustomFontColor
+};