From 133afc5771ed3deabc1eb5163885b7028c7da3d8 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Fri, 23 Oct 2020 16:46:01 +0300 Subject: [PATCH] [DE mobile] Add edit shape settings (Wrap, Replace, Reorder, Remove) --- apps/documenteditor/mobile/locale/en.json | 23 ++- .../mobile/src/components/edit/Edit.jsx | 22 +- .../mobile/src/components/edit/EditShape.jsx | 175 ++++++++++++++++ .../components/edit/controller/EditShape.jsx | 122 +++++++++++ .../mobile/src/store/focusObjects.js | 18 +- .../mobile/src/store/mainStore.js | 4 +- .../mobile/src/store/shapeSettings.js | 192 ++++++++++++++++++ 7 files changed, 550 insertions(+), 6 deletions(-) create mode 100644 apps/documenteditor/mobile/src/components/edit/EditShape.jsx create mode 100644 apps/documenteditor/mobile/src/components/edit/controller/EditShape.jsx create mode 100644 apps/documenteditor/mobile/src/store/shapeSettings.js diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 99b9f96dc..0d93dc185 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/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" + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/edit/Edit.jsx b/apps/documenteditor/mobile/src/components/edit/Edit.jsx index a68ad898a..d4bdc1b88 100644 --- a/apps/documenteditor/mobile/src/components/edit/Edit.jsx +++ b/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: }) - } + }*/ if (settings.indexOf('shape') > -1) { editors.push({ caption: _t.textShape, id: 'edit-shape', - component: + component: }) } - if (settings.indexOf('image') > -1) { + /*if (settings.indexOf('image') > -1) { editors.push({ caption: _t.textImage, id: 'edit-image', diff --git a/apps/documenteditor/mobile/src/components/edit/EditShape.jsx b/apps/documenteditor/mobile/src/components/edit/EditShape.jsx new file mode 100644 index 000000000..20fc7449f --- /dev/null +++ b/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 ( + + + + ) +}; + +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 ( + + + + {props.onWrapType('inline')}}> + {props.onWrapType('square')}}> + {props.onWrapType('tight')}}> + {props.onWrapType('through')}}> + {props.onWrapType('top-bottom')}}> + {props.onWrapType('infront')}}> + {props.onWrapType('behind')}}> + + { + wrapType !== 'inline' && + + {_t.textAlign} + + + + { + props.onShapeAlign(Asc.c_oAscAlignH.Left) + }}>left + { + props.onShapeAlign(Asc.c_oAscAlignH.Center) + }}>center + { + props.onShapeAlign(Asc.c_oAscAlignH.Righ) + }}>right + + + + + } + + + {props.onMoveText(!moveText)}}/> + + + {props.onOverlap(!overlap)}}/> + + + { + ('behind' !== wrapType && 'infront' !== wrapType) && + + {_t.textDistanceFromText} + + +
+ {setDistance(value)}} + onRangeChanged={(value) => {props.onWrapDistance(value)}} + > +
+
+ {stateDistance + ' ' + metricText} +
+ + + + } + + ) +}; + +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 ( + + + {shapes.map((row, indexRow) => { + return ( +
    + {row.map((shape, index) => { + return ( +
  • {props.onReplace(shape.type)}}> +
    +
    +
    • + ) + })} +
+ ) + })} + + ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + return ( + + + + {props.onReorder('all-up')}}> + {props.onReorder('all-down')}}> + {props.onReorder('move-up')}}> + {props.onReorder('move-down')}}> + + + ) +}; + +const EditShape = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + return ( + + + + + + + + + {props.onRemoveShape()}}/> + + + ) +}; + +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} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/edit/controller/EditShape.jsx b/apps/documenteditor/mobile/src/components/edit/controller/EditShape.jsx new file mode 100644 index 000000000..13a4e2241 --- /dev/null +++ b/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 ( + + ) + } +} + +export default inject("storeShapeSettings")(observer(EditShapeController)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/focusObjects.js b/apps/documenteditor/mobile/src/store/focusObjects.js index 202666e2b..8f654e8c8 100644 --- a/apps/documenteditor/mobile/src/store/focusObjects.js +++ b/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; + } + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js index 0fc2f4985..b7d2b7f4b 100644 --- a/apps/documenteditor/mobile/src/store/mainStore.js +++ b/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() }; diff --git a/apps/documenteditor/mobile/src/store/shapeSettings.js b/apps/documenteditor/mobile/src/store/shapeSettings.js new file mode 100644 index 000000000..3c7635e66 --- /dev/null +++ b/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