[DE mobile] Add edit shape settings (Wrap, Replace, Reorder, Remove)

apps/documenteditor/mobile/locale/en.json

@@ -65,6 +65,27 @@
     "textPageBreakBefore": "Page Break Before",
     "textOrphanControl": "Orphan Control",
     "textKeepLinesTogether": "Keep Lines Together",
-    "textKeepWithNext": "Keep with Next"
+    "textKeepWithNext": "Keep with Next",
+    "textStyle": "Style",
+    "textWrap": "Wrap",
+    "textReplace": "Replace",
+    "textReorder": "Reorder",
+    "textRemoveShape": "Remove Shape",
+    "textInline": "Inline",
+    "textSquare": "Square",
+    "textTight": "Tight",
+    "textThrough": "Through",
+    "textTopAndBottom": "Top and Bottom",
+    "textInFront": "In Front",
+    "textBehind": "Behind",
+    "textAlign": "Align",
+    "textMoveWithText": "Move with Text",
+    "textAllowOverlap": "Allow Overlap",
+    "textDistanceFromText": "Distance from Text",
+    "textBringToForeground": "Bring to Foreground",
+    "textSendToBackground": "Send to Background",
+    "textMoveForward": "Move Forward",
+    "textMoveBackward": "Move Backward"
+
   }
 }

apps/documenteditor/mobile/src/components/edit/Edit.jsx

@@ -7,8 +7,11 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import EditTextController from "./controller/EditText";
 import EditParagraphController from "./controller/EditParagraph";
+import EditShapeController from "./controller/EditShape";
+
 import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
 import {PageAdvancedSettings} from "./EditParagraph";
+import {PageWrap, PageReorder, PageReplace} from "./EditShape";
 
 const routes = [
     //Edit text
@@ -36,6 +39,19 @@ const routes = [
     {
         path: '/edit-paragraph-adv/',
         component: PageAdvancedSettings,
+    },
+    //Edit shape
+    {
+        path: '/edit-shape-wrap/',
+        component: PageWrap,
+    },
+    {
+        path: '/edit-shape-reorder/',
+        component: PageReorder,
+    },
+    {
+        path: '/edit-shape-replace/',
+        component: PageReplace,
     }
 ];
 
@@ -130,15 +146,15 @@ const EditTabs = props => {
                 id: 'edit-header',
                 component: <EditHeader />
             })
-        }
+        }*/
         if (settings.indexOf('shape') > -1) {
             editors.push({
                 caption: _t.textShape,
                 id: 'edit-shape',
-                component: <EditShape />
+                component: <EditShapeController />
             })
         }
-        if (settings.indexOf('image') > -1) {
+        /*if (settings.indexOf('image') > -1) {
             editors.push({
                 caption: _t.textImage,
                 id: 'edit-image',

apps/documenteditor/mobile/src/components/edit/EditShape.jsx

@@ -0,0 +1,175 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {List, ListItem, ListItemCell, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const PageStyle = props => {
+    return (
+        <Page>
+
+        </Page>
+    )
+};
+
+const PageWrap = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const storeShapeSettings = props.storeShapeSettings;
+    const shapeObject = props.storeFocusObjects.shapeObject;
+    const wrapType = storeShapeSettings.getWrapType(shapeObject);
+    const align = storeShapeSettings.getAlign(shapeObject);
+    const moveText = storeShapeSettings.getMoveText(shapeObject);
+    const overlap = storeShapeSettings.getOverlap(shapeObject);
+    const distance = Common.Utils.Metric.fnRecalcFromMM(storeShapeSettings.getWrapDistance(shapeObject));
+    const metricText = Common.Utils.Metric.getCurrentMetricName();
+    const [stateDistance, setDistance] = useState(distance);
+    return (
+        <Page>
+            <Navbar title={_t.textWrap} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textInline} radio checked={wrapType === 'inline'} onClick={() => {props.onWrapType('inline')}}></ListItem>
+                <ListItem title={_t.textSquare} radio checked={wrapType === 'square'} onClick={() => {props.onWrapType('square')}}></ListItem>
+                <ListItem title={_t.textTight} radio checked={wrapType === 'tight'} onClick={() => {props.onWrapType('tight')}}></ListItem>
+                <ListItem title={_t.textThrough} radio checked={wrapType === 'through'} onClick={() => {props.onWrapType('through')}}></ListItem>
+                <ListItem title={_t.textTopAndBottom} radio checked={wrapType === 'top-bottom'} onClick={() => {props.onWrapType('top-bottom')}}></ListItem>
+                <ListItem title={_t.textInFront} radio checked={wrapType === 'infront'} onClick={() => {props.onWrapType('infront')}}></ListItem>
+                <ListItem title={_t.textBehind} radio checked={wrapType === 'behind'} onClick={() => {props.onWrapType('behind')}}></ListItem>
+            </List>
+            {
+                wrapType !== 'inline' &&
+                <Fragment>
+                <BlockTitle>{_t.textAlign}</BlockTitle>
+                <List>
+                    <ListItem>
+                        <Row>
+                            <a className={'button' + (align === Asc.c_oAscAlignH.Left ? ' active' : '')}
+                               onClick={() => {
+                                   props.onShapeAlign(Asc.c_oAscAlignH.Left)
+                               }}>left</a>
+                            <a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
+                               onClick={() => {
+                                   props.onShapeAlign(Asc.c_oAscAlignH.Center)
+                               }}>center</a>
+                            <a className={'button' + (align === Asc.c_oAscAlignH.Righ ? ' active' : '')}
+                               onClick={() => {
+                                   props.onShapeAlign(Asc.c_oAscAlignH.Righ)
+                               }}>right</a>
+                        </Row>
+                    </ListItem>
+                </List>
+                </Fragment>
+            }
+            <List>
+                <ListItem title={_t.textMoveWithText} className={'inline' === wrapType ? 'disabled' : ''}>
+                    <Toggle checked={moveText} onToggleChange={() => {props.onMoveText(!moveText)}}/>
+                </ListItem>
+                <ListItem title={_t.textAllowOverlap}>
+                    <Toggle checked={overlap} onToggleChange={() => {props.onOverlap(!overlap)}}/>
+                </ListItem>
+            </List>
+            {
+                ('behind' !== wrapType && 'infront' !== wrapType) &&
+                <Fragment>
+                    <BlockTitle>{_t.textDistanceFromText}</BlockTitle>
+                    <List>
+                        <ListItem>
+                            <div slot='inner' style={{width: '100%'}}>
+                                <Range min={0} max={200} step={1} value={stateDistance}
+                                       onRangeChange={(value) => {setDistance(value)}}
+                                       onRangeChanged={(value) => {props.onWrapDistance(value)}}
+                                ></Range>
+                            </div>
+                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                                {stateDistance + ' ' + metricText}
+                            </div>
+                        </ListItem>
+                    </List>
+                </Fragment>
+            }
+        </Page>
+    )
+};
+
+const PageReplace = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const storeShapeSettings = props.storeShapeSettings;
+    let shapes = storeShapeSettings.getStyleGroups();
+    shapes.splice(0, 1); // Remove line shapes
+    return (
+        <Page>
+            <Navbar title={_t.textReplace} backLink={_t.textBack} />
+            {shapes.map((row, indexRow) => {
+                return (
+                    <ul className="row" key={'shape-row-' + indexRow}>
+                        {row.map((shape, index) => {
+                            return (
+                                <li key={'shape-' + indexRow + '-' + index} onClick={() => {props.onReplace(shape.type)}}>
+                                    <div className="thumb"
+                                         style={{maskImage: `url('../../../resources/img/shapes/'${shape.thumb})`}}>
+                                    </div>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                )
+            })}
+        </Page>
+    )
+};
+
+const PageReorder = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    return (
+        <Page>
+            <Navbar title={_t.textReorder} backLink={_t.textBack} />
+            <List>
+                <ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}}></ListItem>
+                <ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}}></ListItem>
+                <ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}}></ListItem>
+                <ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}}></ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const EditShape = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    return (
+        <Fragment>
+            <List>
+                <ListItem title={_t.textStyle}></ListItem>
+                <ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
+                    onWrapType: props.onWrapType,
+                    onShapeAlign: props.onShapeAlign,
+                    onMoveText: props.onMoveText,
+                    onOverlap: props.onOverlap,
+                    onWrapDistance: props.onWrapDistance
+                }}></ListItem>
+                <ListItem title={_t.textReplace} link='/edit-shape-replace/' routeProps={{
+                    onReplace: props.onReplace
+                }}></ListItem>
+                <ListItem title={_t.textReorder} link='/edit-shape-reorder/' routeProps={{
+                    onReorder: props.onReorder
+                }}></ListItem>
+            </List>
+            <List>
+                <ListItem title={_t.textRemoveShape} onClick={() => {props.onRemoveShape()}}/>
+            </List>
+        </Fragment>
+    )
+};
+
+const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
+const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle));
+const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
+const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
+const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
+
+export {EditShapeContainer as EditShape,
+        PageStyleContainer as PageStyle,
+        PageWrapContainer as PageWrap,
+        PageReplaceContainer as PageReplace,
+        PageReorderContainer as PageReorder}

apps/documenteditor/mobile/src/components/edit/controller/EditShape.jsx

@@ -0,0 +1,122 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditShape } from '../EditShape'
+
+class EditShapeController extends Component {
+    constructor (props) {
+        super(props);
+        this.onWrapType = this.onWrapType.bind(this);
+    }
+
+    onRemoveShape () {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.asc_Remove();
+            if ( Device.phone ) {
+                f7.sheet.close('#edit-sheet', true);
+            } else {
+                f7.popover.close('#edit-popover');
+            }
+        }
+    }
+
+    onWrapType (type) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const sdkType = this.props.storeShapeSettings.transformToSdkWrapType(type);
+            const properties = new Asc.asc_CImgProperty();
+            properties.put_WrappingStyle(sdkType);
+            api.ImgApply(properties);
+        }
+    }
+
+    onShapeAlign (type) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CImgProperty();
+            properties.put_PositionH(new Asc.CImagePositionH());
+            properties.get_PositionH().put_UseAlign(true);
+            properties.get_PositionH().put_Align(type);
+            properties.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Page);
+            api.ImgApply(properties);
+        }
+    }
+
+    onMoveText (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CImgProperty();
+            properties.put_PositionV(new Asc.CImagePositionV());
+            properties.get_PositionV().put_UseAlign(true);
+            properties.get_PositionV().put_RelativeFrom(value ? Asc.c_oAscRelativeFromV.Paragraph : Asc.c_oAscRelativeFromV.Page);
+            api.ImgApply(properties);
+        }
+    }
+
+    onOverlap (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CImgProperty();
+            properties.put_AllowOverlap(value);
+            api.ImgApply(properties);
+        }
+    }
+
+    onWrapDistance (value) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CImgProperty();
+            const paddings = new Asc.asc_CPaddings();
+            const distance = Common.Utils.Metric.fnRecalcToMM(parseInt(value));
+            paddings.put_Top(distance);
+            paddings.put_Right(distance);
+            paddings.put_Bottom(distance);
+            paddings.put_Left(distance);
+            properties.put_Paddings(paddings);
+            api.ImgApply(properties);
+        }
+    }
+
+    onReorder (type) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            const properties = new Asc.asc_CImgProperty();
+            if ('all-up' == type) {
+                properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringToFront);
+            } else if ('all-down' == type) {
+                properties.put_ChangeLevel(Asc.c_oAscChangeLevel.SendToBack);
+            } else if ('move-up' == type) {
+                properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringForward);
+            } else if ('move-down' == type) {
+                properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringBackward);
+            }
+            api.ImgApply(properties);
+        }
+    }
+
+    onReplace (type) {
+        const api = Common.EditorApi.get();
+        if (api) {
+            api.ChangeShapeType(type);
+        }
+    }
+
+    render () {
+        return (
+            <EditShape onRemoveShape={this.onRemoveShape}
+                       onWrapType={this.onWrapType}
+                       onShapeAlign={this.onShapeAlign}
+                       onMoveText={this.onMoveText}
+                       onOverlap={this.onOverlap}
+                       onWrapDistance={this.onWrapDistance}
+                       onReorder={this.onReorder}
+                       onReplace={this.onReplace}
+            />
+        )
+    }
+}
+
+export default inject("storeShapeSettings")(observer(EditShapeController));

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

@@ -46,7 +46,7 @@ export class storeFocusObjects {
     @computed get paragraphObject() {
         let paragraphs = [];
         for (let object of this._focusObjects) {
-            if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
+            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
                 paragraphs.push(object);
             }
         }
@@ -57,4 +57,20 @@ export class storeFocusObjects {
             return undefined;
         }
     }
+    @computed get shapeObject() {
+        let shapes = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
+                if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
+                    shapes.push(object);
+                }
+            }
+        }
+        if (shapes.length > 0) {
+            let object = shapes[shapes.length - 1]; // get top
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
 }

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

@@ -4,12 +4,14 @@ import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeTextSettings} from "./textSettings";
 import {storeParagraphSettings} from "./paragraphSettings";
+import {storeShapeSettings} from "./shapeSettings";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
     storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
     storeTextSettings: new storeTextSettings(),
-    storeParagraphSettings: new storeParagraphSettings()
+    storeParagraphSettings: new storeParagraphSettings(),
+    storeShapeSettings: new storeShapeSettings()
 };
 

apps/documenteditor/mobile/src/store/shapeSettings.js

@@ -0,0 +1,192 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeShapeSettings {
+    getStyleGroups () {
+        const styles = [
+            {
+                title: 'Text',
+                thumb: 'shape-01.svg',
+                type: 'textRect'
+            },
+            {
+                title: 'Line',
+                thumb: 'shape-02.svg',
+                type: 'line'
+            },
+            {
+                title: 'Line with arrow',
+                thumb: 'shape-03.svg',
+                type: 'lineWithArrow'
+            },
+            {
+                title: 'Line with two arrows',
+                thumb: 'shape-04.svg',
+                type: 'lineWithTwoArrows'
+            },
+            {
+                title: 'Rect',
+                thumb: 'shape-05.svg',
+                type: 'rect'
+            },
+            {
+                title: 'Hexagon',
+                thumb: 'shape-06.svg',
+                type: 'hexagon'
+            },
+            {
+                title: 'Round rect',
+                thumb: 'shape-07.svg',
+                type: 'roundRect'
+            },
+            {
+                title: 'Ellipse',
+                thumb: 'shape-08.svg',
+                type: 'ellipse'
+            },
+            {
+                title: 'Triangle',
+                thumb: 'shape-09.svg',
+                type: 'triangle'
+            },
+            {
+                title: 'Triangle',
+                thumb: 'shape-10.svg',
+                type: 'rtTriangle'
+            },
+            {
+                title: 'Trapezoid',
+                thumb: 'shape-11.svg',
+                type: 'trapezoid'
+            },
+            {
+                title: 'Diamond',
+                thumb: 'shape-12.svg',
+                type: 'diamond'
+            },
+            {
+                title: 'Right arrow',
+                thumb: 'shape-13.svg',
+                type: 'rightArrow'
+            },
+            {
+                title: 'Left-right arrow',
+                thumb: 'shape-14.svg',
+                type: 'leftRightArrow'
+            },
+            {
+                title: 'Left arrow callout',
+                thumb: 'shape-15.svg',
+                type: 'leftArrow'
+            },
+            {
+                title: 'Right arrow callout',
+                thumb: 'shape-16.svg',
+                type: 'bentUpArrow'
+            },
+            {
+                title: 'Flow chart off page connector',
+                thumb: 'shape-17.svg',
+                type: 'flowChartOffpageConnector'
+            },
+            {
+                title: 'Heart',
+                thumb: 'shape-18.svg',
+                type: 'heart'
+            },
+            {
+                title: 'Math minus',
+                thumb: 'shape-19.svg',
+                type: 'mathMinus'
+            },
+            {
+                title: 'Math plus',
+                thumb: 'shape-20.svg',
+                type: 'mathPlus'
+            },
+            {
+                title: 'Parallelogram',
+                thumb: 'shape-21.svg',
+                type: 'parallelogram'
+            },
+            {
+                title: 'Wedge rect callout',
+                thumb: 'shape-22.svg',
+                type: 'wedgeRectCallout'
+            },
+            {
+                title: 'Wedge ellipse callout',
+                thumb: 'shape-23.svg',
+                type: 'wedgeEllipseCallout'
+            },
+            {
+                title: 'Cloud callout',
+                thumb: 'shape-24.svg',
+                type: 'cloudCallout'
+            }
+        ];
+        const groups = [];
+        let i = 0;
+        for (let row=0; row<Math.floor(styles.length/4); row++) {
+            const group = [];
+            for (let cell=0; cell<4; cell++) {
+                group.push(styles[i]);
+                i++;
+            }
+            groups.push(group);
+        }
+        return groups;
+    }
+    wrapTypesTransform () {
+        const map = [
+            { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
+            { ui:'square', sdk: Asc.c_oAscWrapStyle2.Square },
+            { ui:'tight', sdk: Asc.c_oAscWrapStyle2.Tight },
+            { ui:'through', sdk: Asc.c_oAscWrapStyle2.Through },
+            { ui:'top-bottom', sdk: Asc.c_oAscWrapStyle2.TopAndBottom },
+            { ui:'behind', sdk: Asc.c_oAscWrapStyle2.Behind },
+            { ui:'infront', sdk: Asc.c_oAscWrapStyle2.InFront }
+        ];
+        return {
+            sdkToUi: function(type) {
+                let record = map.filter(function(obj) {
+                    return obj.sdk === type;
+                })[0];
+                return record ? record.ui : '';
+            },
+
+            uiToSdk: function(type) {
+                let record = map.filter(function(obj) {
+                    return obj.ui === type;
+                })[0];
+                return record ? record.sdk : 0;
+            }
+        }
+    }
+
+    getWrapType (shapeObject) {
+        const wrapping = shapeObject.get_WrappingStyle();
+        const shapeWrapType = this.wrapTypesTransform().sdkToUi(wrapping);
+        return shapeWrapType;
+    }
+
+    transformToSdkWrapType (value) {
+        const sdkType = this.wrapTypesTransform().uiToSdk(value);
+        return sdkType;
+    }
+
+    getAlign (shapeObject) {
+        return shapeObject.get_PositionH().get_Align();
+    }
+
+    getMoveText (shapeObject) {
+        return shapeObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph;
+    }
+
+    getOverlap (shapeObject) {
+        return shapeObject.get_AllowOverlap();
+    }
+
+    getWrapDistance (shapeObject) {
+        return shapeObject.get_Paddings().get_Top();
+    }
+}