[DE mobile] Add edit chart settings (wrap, reorder, remove)
This commit is contained in:
JuliaSvinareva
parent
f41d0bd354
commit
1efdd7d52f
|
|
@ -102,6 +102,7 @@
|
|||
"textRepeatAsHeaderRow": "Repeat as Header Row",
|
||||
"textResizeToFitContent": "Resize to Fit Content",
|
||||
"textCellMargins": "Cell Margins",
|
||||
"textFlow": "Flow"
|
||||
"textFlow": "Flow",
|
||||
"textRemoveChart": "Remove Chart"
|
||||
}
|
||||
}
|
||||
|
|
@ -10,12 +10,14 @@ import EditParagraphController from "./controller/EditParagraph";
|
|||
import EditShapeController from "./controller/EditShape";
|
||||
import EditImageController from "./controller/EditImage";
|
||||
import EditTableController from "./controller/EditTable";
|
||||
import EditChartController from "./controller/EditChart";
|
||||
|
||||
import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers} from "./EditText";
|
||||
import {PageAdvancedSettings} from "./EditParagraph";
|
||||
import {PageWrap, PageReorder, PageReplace} from "./EditShape";
|
||||
import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
|
||||
import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
|
||||
import {PageChartWrap, PageChartReorder} from "./EditChart";
|
||||
|
||||
const routes = [
|
||||
//Edit text
|
||||
|
|
@ -86,6 +88,15 @@ const routes = [
|
|||
{
|
||||
path: '/edit-table-style/',
|
||||
component: PageTableStyle,
|
||||
},
|
||||
//Edit chart
|
||||
{
|
||||
path: '/edit-chart-wrap/',
|
||||
component: PageChartWrap,
|
||||
},
|
||||
{
|
||||
path: '/edit-chart-reorder/',
|
||||
component: PageChartReorder,
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -195,14 +206,14 @@ const EditTabs = props => {
|
|||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('chart') > -1) {
|
||||
if (settings.indexOf('chart') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textChart,
|
||||
id: 'edit-chart',
|
||||
component: <EditChart />
|
||||
component: <EditChartController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('hyperlink') > -1) {
|
||||
/*if (settings.indexOf('hyperlink') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textHyperlink,
|
||||
id: 'edit-link',
|
||||
|
|
|
|||
137
apps/documenteditor/mobile/src/components/edit/EditChart.jsx
Normal file
137
apps/documenteditor/mobile/src/components/edit/EditChart.jsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListItem, ListButton, 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 storeChartSettings = props.storeChartSettings;
|
||||
const chartObject = props.storeFocusObjects.chartObject;
|
||||
const wrapType = storeChartSettings.getWrapType(chartObject);
|
||||
const align = storeChartSettings.getAlign(chartObject);
|
||||
const moveText = storeChartSettings.getMoveText(chartObject);
|
||||
const overlap = storeChartSettings.getOverlap(chartObject);
|
||||
const distance = Common.Utils.Metric.fnRecalcFromMM(storeChartSettings.getWrapDistance(chartObject));
|
||||
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.onAlign(Asc.c_oAscAlignH.Left)
|
||||
}}>left</a>
|
||||
<a className={'button' + (align === Asc.c_oAscAlignH.Center ? ' active' : '')}
|
||||
onClick={() => {
|
||||
props.onAlign(Asc.c_oAscAlignH.Center)
|
||||
}}>center</a>
|
||||
<a className={'button' + (align === Asc.c_oAscAlignH.Right ? ' active' : '')}
|
||||
onClick={() => {
|
||||
props.onAlign(Asc.c_oAscAlignH.Right)
|
||||
}}>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 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 EditChart = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Edit', {returnObjects: true});
|
||||
return (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textStyle}></ListItem>
|
||||
<ListItem title={_t.textWrap} link='/edit-chart-wrap/' routeProps={{
|
||||
onWrapType: props.onWrapType,
|
||||
onAlign: props.onAlign,
|
||||
onMoveText: props.onMoveText,
|
||||
onOverlap: props.onOverlap,
|
||||
onWrapDistance: props.onWrapDistance
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link='/edit-chart-reorder/' routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton title={_t.textRemoveChart} onClick={() => {props.onRemoveChart()}}/>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
const PageChartStyle = inject("storeFocusObjects")(observer(PageStyle));
|
||||
const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap));
|
||||
|
||||
export {EditChart, PageChartStyle, PageChartWrap, PageReorder as PageChartReorder}
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../../common/mobile/utils/device';
|
||||
import {observer, inject} from "mobx-react";
|
||||
|
||||
import { EditChart } from '../EditChart'
|
||||
|
||||
class EditChartController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.onWrapType = this.onWrapType.bind(this);
|
||||
}
|
||||
|
||||
onRemoveChart () {
|
||||
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.storeChartSettings.transformToSdkWrapType(type);
|
||||
const properties = new Asc.asc_CImgProperty();
|
||||
properties.put_WrappingStyle(sdkType);
|
||||
api.ImgApply(properties);
|
||||
}
|
||||
}
|
||||
|
||||
onAlign (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);
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<EditChart onRemoveChart={this.onRemoveChart}
|
||||
onWrapType={this.onWrapType}
|
||||
onAlign={this.onAlign}
|
||||
onMoveText={this.onMoveText}
|
||||
onOverlap={this.onOverlap}
|
||||
onWrapDistance={this.onWrapDistance}
|
||||
onReorder={this.onReorder}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default inject("storeChartSettings")(observer(EditChartController));
|
||||
57
apps/documenteditor/mobile/src/store/chartSettings.js
Normal file
57
apps/documenteditor/mobile/src/store/chartSettings.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import {action, observable, computed} from 'mobx';
|
||||
|
||||
export class storeChartSettings {
|
||||
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 (chartObject) {
|
||||
const wrapping = chartObject.get_WrappingStyle();
|
||||
const chartWrapType = this.wrapTypesTransform().sdkToUi(wrapping);
|
||||
return chartWrapType;
|
||||
}
|
||||
|
||||
transformToSdkWrapType (value) {
|
||||
const sdkType = this.wrapTypesTransform().uiToSdk(value);
|
||||
return sdkType;
|
||||
}
|
||||
|
||||
getAlign (chartObject) {
|
||||
return chartObject.get_PositionH().get_Align();
|
||||
}
|
||||
|
||||
getMoveText (chartObject) {
|
||||
return chartObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph;
|
||||
}
|
||||
|
||||
getOverlap (chartObject) {
|
||||
return chartObject.get_AllowOverlap();
|
||||
}
|
||||
|
||||
getWrapDistance (chartObject) {
|
||||
return chartObject.get_Paddings().get_Top();
|
||||
}
|
||||
}
|
||||
|
|
@ -112,4 +112,18 @@ export class storeFocusObjects {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
@computed get chartObject() {
|
||||
const charts = [];
|
||||
for (let object of this._focusObjects) {
|
||||
if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
|
||||
charts.push(object);
|
||||
}
|
||||
}
|
||||
if (charts.length > 0) {
|
||||
let object = charts[charts.length - 1]; // get top table
|
||||
return object.get_ObjectValue();
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import {storeParagraphSettings} from "./paragraphSettings";
|
|||
import {storeShapeSettings} from "./shapeSettings";
|
||||
import {storeImageSettings} from "./imageSettings";
|
||||
import {storeTableSettings} from "./tableSettings";
|
||||
import {storeChartSettings} from "./chartSettings";
|
||||
|
||||
export const stores = {
|
||||
storeFocusObjects: new storeFocusObjects(),
|
||||
|
|
@ -15,6 +16,7 @@ export const stores = {
|
|||
storeTextSettings: new storeTextSettings(),
|
||||
storeParagraphSettings: new storeParagraphSettings(),
|
||||
storeShapeSettings: new storeShapeSettings(),
|
||||
storeChartSettings: new storeChartSettings(),
|
||||
storeImageSettings: new storeImageSettings(),
|
||||
storeTableSettings: new storeTableSettings()
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue