From 3f601c093eccaa6c59631e20365109748fca8621 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 26 Jan 2021 22:34:58 +0300 Subject: [PATCH 1/7] [PE mobile] Make Table Settings --- .../mobile/src/controller/Main.jsx | 10 +- .../mobile/src/controller/edit/EditTable.jsx | 221 ++++++++ .../mobile/src/store/focusObjects.js | 24 + .../mobile/src/store/mainStore.js | 6 +- .../mobile/src/store/tableSettings.js | 145 ++++++ .../mobile/src/view/edit/Edit.jsx | 17 +- .../mobile/src/view/edit/EditTable.jsx | 474 ++++++++++++++++++ 7 files changed, 892 insertions(+), 5 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx create mode 100644 apps/presentationeditor/mobile/src/store/tableSettings.js create mode 100644 apps/presentationeditor/mobile/src/view/edit/EditTable.jsx diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 40c892ac1..24086eccc 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/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", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings") +@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings") class MainController extends Component { constructor(props) { super(props) @@ -298,6 +298,14 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { storeTextSettings.resetLineSpacing(vc); }); + + // Table settings + + const storeTableSettings = this.props.storeTableSettings; + + this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => { + storeTableSettings.initTableTemplates(templates); + }); } _onDocumentContentReady() { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx new file mode 100644 index 000000000..3c027d97c --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx @@ -0,0 +1,221 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditTable } from '../../view/edit/EditTable'; + +class EditTableController extends Component { + constructor (props) { + super(props); + this.closeIfNeed = this.closeIfNeed.bind(this); + this.onRemoveTable = this.onRemoveTable.bind(this); + this.onAddColumnLeft = this.onAddColumnLeft.bind(this); + this.onAddColumnRight = this.onAddColumnRight.bind(this); + this.onAddRowAbove = this.onAddRowAbove.bind(this); + this.onAddRowBelow = this.onAddRowBelow.bind(this); + this.onRemoveColumn = this.onRemoveColumn.bind(this); + this.onRemoveRow = this.onRemoveRow.bind(this); + } + + closeIfNeed () { + if (!this.props.storeFocusObjects.isTableInStack) { + if ( Device.phone ) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + } + } + + onRemoveTable () { + const api = Common.EditorApi.get(); + api.remTable(); + this.closeIfNeed(); + } + + onAddColumnLeft () { + const api = Common.EditorApi.get(); + api.addColumnLeft(); + this.closeIfNeed(); + } + + onAddColumnRight () { + const api = Common.EditorApi.get(); + api.addColumnRight(); + this.closeIfNeed(); + } + + onAddRowAbove () { + const api = Common.EditorApi.get(); + api.addRowAbove(); + this.closeIfNeed(); + } + + onAddRowBelow () { + const api = Common.EditorApi.get(); + api.addRowBelow(); + this.closeIfNeed(); + } + + onRemoveColumn () { + const api = Common.EditorApi.get(); + api.remColumn(); + this.closeIfNeed(); + } + + onRemoveRow () { + const api = Common.EditorApi.get(); + api.remRow(); + this.closeIfNeed(); + } + + onOptionMargin (value) { + const api = Common.EditorApi.get(); + const properties = new Asc.CTableProp(); + const margins = new Asc.CMargins(); + const val = Common.Utils.Metric.fnRecalcToMM(value); + margins.put_Top(val); + margins.put_Right(val); + margins.put_Bottom(val); + margins.put_Left(val); + margins.put_Flag(2); + properties.put_CellMargins(margins); + api.tblApply(properties); + } + + onStyleClick (type) { + const api = Common.EditorApi.get(); + const properties = new Asc.CTableProp(); + properties.put_TableStyle(type.toString()); + api.tblApply(properties); + } + + onCheckTemplateChange (tableLook, type, isChecked) { + const api = Common.EditorApi.get(); + const properties = new Asc.CTableProp(); + + switch (type) { + case 0: + tableLook.put_FirstRow(isChecked); + break; + case 1: + tableLook.put_LastRow(isChecked); + break; + case 2: + tableLook.put_BandHor(isChecked); + break; + case 3: + tableLook.put_FirstCol(isChecked); + break; + case 4: + tableLook.put_LastCol(isChecked); + break; + case 5: + tableLook.put_BandVer(isChecked); + break; + } + + properties.put_TableLook(tableLook); + api.tblApply(properties); + } + + onFillColor (color) { + const api = Common.EditorApi.get(); + const properties = new Asc.CTableProp(); + const background = new Asc.CBackground(); + properties.put_CellsBackground(background); + + if ('transparent' == color) { + background.put_Value(1); + } else { + background.put_Value(0); + background.put_Color(Common.Utils.ThemeColor.getRgbColor(color)); + } + + properties.put_CellSelect(true); + api.tblApply(properties); + } + + onBorderTypeClick (cellBorders) { + const api = Common.EditorApi.get(); + const properties = new Asc.CTableProp(); + const _cellBorders = !cellBorders ? new Asc.CBorders() : cellBorders; + properties.put_CellBorders(_cellBorders); + properties.put_CellSelect(true); + api.tblApply(properties); + } + + onReorder(type) { + const api = Common.EditorApi.get(); + + switch(type) { + case 'all-up': + api.shapes_bringToFront(); + break; + case 'all-down': + api.shapes_bringToBack(); + break; + case 'move-up': + api.shapes_bringForward(); + break; + case 'move-down': + api.shapes_bringBackward(); + break; + + } + } + + onAlign(type) { + const api = Common.EditorApi.get(); + + switch(type) { + case 'align-left': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_LEFT); + break; + case 'align-center': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_CENTER); + break; + case 'align-right': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_RIGHT); + break; + case 'align-top': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_TOP); + break; + case 'align-middle': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_MIDDLE); + break; + case 'align-bottom': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_BOTTOM); + break; + case 'distrib-hor': + api.DistributeHorizontally(); + break; + case 'distrib-vert': + api.DistributeVertically(); + break; + } + } + + render () { + return ( + + ) + } +} + +export default inject("storeFocusObjects")(observer(EditTableController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index 4fda23195..fdf9bdd6b 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -112,4 +112,28 @@ export class storeFocusObjects { return undefined; } } + + @computed get tableObject() { + const tables = []; + for (let object of this._focusObjects) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { + tables.push(object); + } + } + if (tables.length > 0) { + const object = tables[tables.length - 1]; // get top table + return object.get_ObjectValue(); + } else { + return undefined; + } + } + + @computed get isTableInStack() { + for (let object of this._focusObjects) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { + return true; + } + } + return false; + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index e379be939..ba4b9be18 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -10,11 +10,11 @@ import { storePalette } from './palette'; import { storeSlideSettings } from './slideSettings'; import { storeTextSettings } from './textSettings'; import { storeShapeSettings } from './shapeSettings'; +import {storeTableSettings} from "./tableSettings"; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; // import {storeImageSettings} from "./imageSettings"; -// import {storeTableSettings} from "./tableSettings"; // import {storeChartSettings} from "./chartSettings"; export const stores = { @@ -28,11 +28,11 @@ export const stores = { storeSlideSettings: new storeSlideSettings(), storePalette: new storePalette(), storeTextSettings: new storeTextSettings(), - storeShapeSettings: new storeShapeSettings() + storeShapeSettings: new storeShapeSettings(), + storeTableSettings: new storeTableSettings() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), // storeChartSettings: new storeChartSettings(), - // storeTableSettings: new storeTableSettings() }; diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js new file mode 100644 index 000000000..d36a09aea --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/tableSettings.js @@ -0,0 +1,145 @@ +import {action, observable, computed} from 'mobx'; +import {f7} from 'framework7-react'; + +export class storeTableSettings { + + @observable _templates = []; + + @action initTableTemplates (templates) { + this._templates = templates; + } + + @computed get styles () { + let styles = []; + for (let template of this._templates) { + styles.push({ + imageUrl : template.asc_getImage(), + templateId : template.asc_getId() + }); + } + return styles; + } + + getTableLook (tableObject) { + return tableObject.get_TableLook() + } + + getCellMargins (tableObject) { + const margins = tableObject.get_CellMargins(); + return margins.get_Left(); + } + + // Fill color + + getFillColor (tableObject) { + const background = tableObject.get_CellsBackground(); + let fillColor = 'transparent'; + if (background) { + if (background.get_Value() == 0) { + const color = background.get_Color(); + if (color) { + if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + fillColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()}; + } else { + fillColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); + } + } + } + } + + return fillColor; + } + + // Border style + + @observable cellBorders; + @observable cellBorderWidth = 0.5; + @observable cellBorderColor = '000000'; + + borderSizeTransform () { + const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; + + return { + sizeByIndex: function (index) { + if (index < 1) return _sizes[0]; + if (index > _sizes.length - 1) return _sizes[_sizes.length - 1]; + return _sizes[index]; + }, + + indexSizeByValue: function (value) { + let index = 0; + _sizes.forEach((size, idx) => { + if (Math.abs(size - value) < 0.25) { + index = idx; + } + }); + return index; + }, + + sizeByValue: function (value) { + return _sizes[this.indexSizeByValue(value)]; + } + } + } + + updateCellBorderWidth (value) { + this.cellBorderWidth = value; + } + + updateCellBorderColor (value) { + this.cellBorderColor = value; + } + + updateBordersStyle (border) { + this.cellBorders = new Asc.CBorders(); + const visible = (border != ''); + + if (border.indexOf('l') > -1 || !visible) { + if (this.cellBorders.get_Left()===null || this.cellBorders.get_Left()===undefined) + this.cellBorders.put_Left(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_Left(), visible); + } + if (border.indexOf('t') > -1 || !visible) { + if (this.cellBorders.get_Top()===null || this.cellBorders.get_Top()===undefined) + this.cellBorders.put_Top(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_Top(), visible); + } + if (border.indexOf('r') > -1 || !visible) { + if (this.cellBorders.get_Right()===null || this.cellBorders.get_Right()===undefined) + this.cellBorders.put_Right(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_Right(), visible); + } + if (border.indexOf('b') > -1 || !visible) { + if (this.cellBorders.get_Bottom()===null || this.cellBorders.get_Bottom()===undefined) + this.cellBorders.put_Bottom(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_Bottom(), visible); + } + if (border.indexOf('c') > -1 || !visible) { + if (this.cellBorders.get_InsideV()===null || this.cellBorders.get_InsideV()===undefined) + this.cellBorders.put_InsideV(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_InsideV(), visible); + } + if (border.indexOf('m') > -1 || !visible) { + if (this.cellBorders.get_InsideH()===null || this.cellBorders.get_InsideH()===undefined) + this.cellBorders.put_InsideH(new Asc.asc_CTextBorder()); + this.updateBorderStyle (this.cellBorders.get_InsideH(), visible); + } + } + + updateBorderStyle (border, visible) { + if (!border) { + border = new Asc.asc_CTextBorder(); + } + if (visible && this.cellBorderWidth > 0){ + const size = parseFloat(this.cellBorderWidth); + border.put_Value(1); + border.put_Size(size * 25.4 / 72.0); + const color = Common.Utils.ThemeColor.getRgbColor(this.cellBorderColor); + border.put_Color(color); + } + else { + border.put_Value(0); + } + } + +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 265332ebd..3f4613c0a 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -13,6 +13,7 @@ import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColo import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; +import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; //import EditShapeController from "../../controller/edit/EditShape"; //import EditImageController from "../../controller/edit/EditImage"; //import EditTableController from "../../controller/edit/EditTable"; @@ -135,8 +136,21 @@ const routes = [ { path: '/edit-image-link/', component: PageLinkSettings + }, + + // Table + + { + path: '/edit-table-reorder/', + component: PageTableReorder + }, + { + path: '/edit-table-align', + component: PageTableAlign } + + ]; const EmptyEditLayout = () => { @@ -231,13 +245,14 @@ const EditTabs = props => { component: }) } - /*if (settings.indexOf('table') > -1) { + if (settings.indexOf('table') > -1) { editors.push({ caption: _t.textTable, id: 'edit-table', component: }) } + /* if (settings.indexOf('chart') > -1) { editors.push({ caption: _t.textChart, diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx new file mode 100644 index 000000000..7a1b3730d --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -0,0 +1,474 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; + +// Style + +const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyleClick, storeFocusObjects}) => { + const styleId = storeFocusObjects.tableObject.get_TableStyle(); + const [stateId, setId] = useState(styleId); + + const widthContainer = document.querySelector(".page-content").clientWidth; + const columns = parseInt((widthContainer - 47) / 70); // magic + const styles = []; + let row = -1; + templates.forEach((style, index) => { + if (0 == index % columns) { + styles.push([]); + row++ + } + styles[row].push(style); + }); + + return ( +
+ {styles.map((row, rowIndex) => { + return ( +
+ {row.map((style, index)=>{ + return( +
{onStyleClick(style.templateId); setId(style.templateId)}}> + +
+ ) + })} +
+ ) + })} +
+ ) +})); + +const PageStyleOptions = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const tableLook = props.storeFocusObjects.tableObject.get_TableLook(); + const isFirstRow = tableLook.get_FirstRow(); + const isLastRow = tableLook.get_LastRow(); + const isBandHor = tableLook.get_BandHor(); + const isFirstCol = tableLook.get_FirstCol(); + const isLastCol = tableLook.get_LastCol(); + const isBandVer = tableLook.get_BandVer(); + + return ( + + + + + {props.onCheckTemplateChange(tableLook, 0, !isFirstRow)}}/> + + + {props.onCheckTemplateChange(tableLook, 1, !isLastRow)}}/> + + + {props.onCheckTemplateChange(tableLook, 2, !isBandHor)}}/> + + + + + {props.onCheckTemplateChange(tableLook, 3, !isFirstCol)}}/> + + + {props.onCheckTemplateChange(tableLook, 4, !isLastCol)}}/> + + + {props.onCheckTemplateChange(tableLook, 5, !isBandVer)}}/> + + + + ) +}; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const tableObject = props.storeFocusObjects.tableObject; + let fillColor = props.storeTableSettings.getFillColor(tableObject); + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.f7router.back(); + }; + return( + + + + + ) +}; + +const TabFillColor = inject("storeFocusObjects", "storeTableSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const tableObject = props.storeFocusObjects.tableObject; + const fillColor = props.storeTableSettings.getFillColor(tableObject); + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + } else { + props.onFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-table-custom-fill-color/'); + } + }; + + return ( + + + + + + + ) +})); + +const PageCustomBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let borderColor = props.storeTableSettings.cellBorderColor; + + if (typeof borderColor === 'object') { + borderColor = borderColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.storeTableSettings.updateCellBorderColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTableSettings = props.storeTableSettings; + const borderColor = storeTableSettings.cellBorderColor; + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + storeTableSettings.updateCellBorderColor(newColor); + } else { + storeTableSettings.updateCellBorderColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-table-custom-border-color/'); + } + }; + + return ( + + + + + + + + ) +}; + +const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTableSettings = props.storeTableSettings; + const borderSizeTransform = storeTableSettings.borderSizeTransform(); + const borderSize = storeTableSettings.cellBorderWidth; + const displayBorderSize = borderSizeTransform.indexSizeByValue(borderSize); + const displayTextBorderSize = borderSizeTransform.sizeByValue(borderSize); + const [stateBorderSize, setBorderSize] = useState(displayBorderSize); + const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); + + const onBorderType = (type) => { + storeTableSettings.updateBordersStyle(type); + props.onBorderTypeClick(storeTableSettings.cellBorders); + }; + + const borderColor = storeTableSettings.cellBorderColor; + const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + +
{_t.textSize}
+
+ { + setBorderSize(value); + setTextBorderSize(borderSizeTransform.sizeByIndex(value)); + }} + onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + + + {onBorderType("lrtbcm")}}> + + + {onBorderType("")}}> + + + {onBorderType("cm")}}> + + + {onBorderType("lrtb")}}> + + + {onBorderType("l")}}> + + + + + + + {onBorderType("c")}}> + + + {onBorderType("r")}}> + + + {onBorderType("t")}}> + + + {onBorderType("m")}}> + + + {onBorderType("b")}}> + + + + + + ) +})); + +const PageStyle = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const storeTableSettings = props.storeTableSettings; + const templates = storeTableSettings.styles; + + return ( + + +
+ {_t.textStyle} + {_t.textFill} + {_t.textBorder} +
+ + + + + + + + + + + + + + + + + + + + + ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onReorder('all-up')}} className='no-indicator'> + + + {props.onReorder('all-down')}} className='no-indicator'> + + + {props.onReorder('move-up')}} className='no-indicator'> + + + {props.onReorder('move-down')}} className='no-indicator'> + + + + + ) +}; + +const PageAlign = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onAlign('align-left')}} className='no-indicator'> + + + {props.onAlign('align-center')}} className='no-indicator'> + + + {props.onAlign('align-right')}} className='no-indicator'> + + + {props.onAlign('align-top')}} className='no-indicator'> + + + {props.onAlign('align-middle')}} className='no-indicator'> + + + {props.onAlign('align-bottom')}} className='no-indicator'> + + + + + {props.onAlign('distrib-hor')}} className='no-indicator'> + + + {props.onAlign('distrib-vert')}} className='no-indicator'> + + + + + ) +}; + +const EditTable = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const metricText = Common.Utils.Metric.getCurrentMetricName(); + const storeFocusObjects = props.storeFocusObjects; + const tableObject = storeFocusObjects.tableObject; + const storeTableSettings = props.storeTableSettings; + const distance = Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getCellMargins(tableObject)); + const [stateDistance, setDistance] = useState(distance); + + return ( + + + + + {props.onAddColumnLeft()}}> + + + {props.onAddColumnRight()}}> + + + {props.onAddRowAbove()}}> + + + {props.onAddRowBelow()}}> + + + + + + + {props.onRemoveColumn()}}> + + + {props.onRemoveRow()}}> + + + + + {props.onRemoveTable()}} className='button-red button-fill button-raised'> + + + + + + {_t.textCellMargins} + + +
+ {setDistance(value)}} + onRangeChanged={(value) => {props.onOptionMargin(value)}} + > +
+
+ {stateDistance + ' ' + metricText} +
+ + + + + ) +}; + +const EditTableContainer = inject("storeFocusObjects")(observer(EditTable)); +const PageTableStyle = inject("storeFocusObjects","storeTableSettings")(observer(PageStyle)); +const PageTableStyleOptions = inject("storeFocusObjects","storeTableSettings")(observer(PageStyleOptions)); +const PageTableCustomFillColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomFillColor)); +const PageTableBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageBorderColor)); +const PageTableCustomBorderColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomBorderColor)); +const PageTableReorder = inject("storeFocusObjects")(observer(PageReorder)); +const PageTableAlign = inject("storeFocusObjects")(observer(PageAlign)); + +export { + EditTableContainer as EditTable, + PageTableStyle, + PageTableStyleOptions, + PageTableCustomFillColor, + PageTableBorderColor, + PageTableCustomBorderColor, + PageTableReorder, + PageTableAlign +} \ No newline at end of file From eabab14ef8654e3c152084235cf0e7b94c910b41 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Wed, 27 Jan 2021 14:21:30 +0300 Subject: [PATCH 2/7] [PE mobile] didn't open table settings --- apps/presentationeditor/mobile/src/view/edit/Edit.jsx | 4 +--- apps/presentationeditor/mobile/src/view/edit/EditTable.jsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 3f4613c0a..50cbad1d8 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -14,9 +14,7 @@ import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddF import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; -//import EditShapeController from "../../controller/edit/EditShape"; -//import EditImageController from "../../controller/edit/EditImage"; -//import EditTableController from "../../controller/edit/EditTable"; +import EditTableController from "../../controller/edit/EditTable"; //import EditChartController from "../../controller/edit/EditChart"; //import EditLinkController from "../../controller/edit/EditLink"; diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index 7a1b3730d..d3efc66b3 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -453,7 +453,7 @@ const EditTable = props => { ) }; -const EditTableContainer = inject("storeFocusObjects")(observer(EditTable)); +const EditTableContainer = inject("storeFocusObjects", "storeTableSettings")(observer(EditTable)); const PageTableStyle = inject("storeFocusObjects","storeTableSettings")(observer(PageStyle)); const PageTableStyleOptions = inject("storeFocusObjects","storeTableSettings")(observer(PageStyleOptions)); const PageTableCustomFillColor = inject("storeFocusObjects","storeTableSettings", "storePalette")(observer(PageCustomFillColor)); From 91bc43ca8cb22b9eb83bd919a26d930e93051d93 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 27 Jan 2021 18:09:56 +0300 Subject: [PATCH 3/7] [PE mobile] Added Table Settings --- apps/presentationeditor/mobile/locale/en.json | 12 ++++++++- .../mobile/src/view/edit/Edit.jsx | 25 ++++++++++++++++--- .../mobile/src/view/edit/EditTable.jsx | 17 +++++++------ 3 files changed, 42 insertions(+), 12 deletions(-) diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 50f54901f..d7cdebf9a 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -187,7 +187,17 @@ "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"", "notcriticalErrorTitle": "Warning", "textPictureFromLibrary": "Picture from Library", - "textPictureFromURL": "Picture from URL" + "textPictureFromURL": "Picture from URL", + "textOptions": "Options", + "textHeaderRow": "Header Row", + "textTotalRow": "Total Row", + "textBandedRow": "Banded Row", + "textFirstColumn": "First Column", + "textLastColumn": "Last Column", + "textBandedColumn": "Banded Column", + "textStyleOptions": "Style Options", + "textRemoveTable": "Remove Table", + "textCellMargins": "Cell Margins" } }, "Common": { diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 50cbad1d8..d0cfca654 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -143,12 +143,29 @@ const routes = [ component: PageTableReorder }, { - path: '/edit-table-align', + path: '/edit-table-align/', component: PageTableAlign + }, + { + path: '/edit-table-style/', + component: PageTableStyle + }, + { + path: '/edit-table-style-options/', + component: PageTableStyleOptions + }, + { + path: '/edit-table-border-color/', + component: PageTableBorderColor + }, + { + path: '/edit-table-custom-border-color/', + component: PageTableCustomBorderColor + }, + { + path: '/edit-table-custom-fill-color/', + component: PageTableCustomFillColor } - - - ]; const EmptyEditLayout = () => { diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index d3efc66b3..38f94b54c 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -31,8 +31,8 @@ const StyleTemplates = inject("storeFocusObjects")(observer(({templates, onStyle {row.map((style, index)=>{ return(
{onStyleClick(style.templateId); setId(style.templateId)}}> + className={style.templateId === stateId ? 'active' : ''} + onClick={() => {onStyleClick(style.templateId); setId(style.templateId)}}>
) @@ -89,14 +89,17 @@ const PageCustomFillColor = props => { const _t = t('View.Edit', {returnObjects: true}); const tableObject = props.storeFocusObjects.tableObject; let fillColor = props.storeTableSettings.getFillColor(tableObject); + if (typeof fillColor === 'object') { fillColor = fillColor.color; } + const onAddNewColor = (colors, color) => { props.storePalette.changeCustomColors(colors); props.onFillColor(color); props.f7router.back(); }; + return( @@ -114,7 +117,7 @@ const TabFillColor = inject("storeFocusObjects", "storeTableSettings", "storePal const changeColor = (color, effectId, effectValue) => { if (color !== 'empty') { - if (effectId !==undefined ) { + if (effectId !== undefined ) { const newColor = {color: color, effectId: effectId, effectValue: effectValue}; props.onFillColor(newColor); } else { @@ -279,7 +282,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro const PageStyle = props => { const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); + const _t = t('View.Edit', {returnObjects: true}); const storeTableSettings = props.storeTableSettings; const templates = storeTableSettings.styles; @@ -287,9 +290,9 @@ const PageStyle = props => {
- {_t.textStyle} - {_t.textFill} - {_t.textBorder} + {_t.textStyle} + {_t.textFill} + {_t.textBorder}
From a8e577a6034cc27f8a5997af9a13bdb8ca4bb3d2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Wed, 27 Jan 2021 18:13:40 +0300 Subject: [PATCH 4/7] [PE mobile] Renamed method --- .../presentationeditor/mobile/src/controller/edit/EditTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx index 3c027d97c..9ae2be6ba 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx @@ -206,7 +206,7 @@ class EditTableController extends Component { onAddRowBelow={this.onAddRowBelow} onRemoveColumn={this.onRemoveColumn} onRemoveRow={this.onRemoveRow} - onCellMargins={this.onCellMargins} + onOptionMargin={this.onOptionMargin} onStyleClick={this.onStyleClick} onCheckTemplateChange={this.onCheckTemplateChange} onFillColor={this.onFillColor} From 020126898a8d19e7020e889476732134b89447d1 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 28 Jan 2021 18:07:00 +0300 Subject: [PATCH 5/7] [PE mobile] Added Chart Settings and small edits --- apps/presentationeditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Main.jsx | 12 +- .../mobile/src/controller/edit/EditChart.jsx | 171 +++++++++ .../mobile/src/controller/edit/EditImage.jsx | 1 - .../mobile/src/store/chartSettings.js | 152 ++++++++ .../mobile/src/store/focusObjects.js | 26 ++ .../mobile/src/store/mainStore.js | 7 +- .../mobile/src/view/edit/Edit.jsx | 35 +- .../mobile/src/view/edit/EditChart.jsx | 341 ++++++++++++++++++ .../mobile/src/view/edit/EditTable.jsx | 6 +- 10 files changed, 742 insertions(+), 12 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx create mode 100644 apps/presentationeditor/mobile/src/store/chartSettings.js create mode 100644 apps/presentationeditor/mobile/src/view/edit/EditChart.jsx diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index d7cdebf9a..ea3358380 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -197,7 +197,8 @@ "textBandedColumn": "Banded Column", "textStyleOptions": "Style Options", "textRemoveTable": "Remove Table", - "textCellMargins": "Cell Margins" + "textCellMargins": "Cell Margins", + "textRemoveChart": "Remove Chart" } }, "Common": { diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 24086eccc..902dca3d7 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/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", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings") +@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeChartSettings") class MainController extends Component { constructor(props) { super(props) @@ -306,6 +306,16 @@ class MainController extends Component { this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => { storeTableSettings.initTableTemplates(templates); }); + + // Chart settings + + const storeChartSettings = this.props.storeChartSettings; + + this.api.asc_registerCallback('asc_onUpdateChartStyles', () => { + if (storeFocusObjects.chartObject) { + storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.getType())); + } + }); } _onDocumentContentReady() { diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx new file mode 100644 index 000000000..10274945a --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/EditChart.jsx @@ -0,0 +1,171 @@ +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 '../../view/edit/EditChart' + +class EditChartController extends Component { + constructor (props) { + super(props); + this.onType = this.onType.bind(this); + this.onBorderColor = this.onBorderColor.bind(this); + this.onBorderSize = this.onBorderSize.bind(this); + + const api = Common.EditorApi.get(); + props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(props.storeFocusObjects.chartObject.getType())); + } + + onRemoveChart () { + const api = Common.EditorApi.get(); + api.asc_Remove(); + + if ( Device.phone ) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + } + + onReorder(type) { + const api = Common.EditorApi.get(); + + switch(type) { + case 'all-up': + api.shapes_bringToFront(); + break; + case 'all-down': + api.shapes_bringToBack(); + break; + case 'move-up': + api.shapes_bringForward(); + break; + case 'move-down': + api.shapes_bringBackward(); + break; + } + } + + onAlign(type) { + const api = Common.EditorApi.get(); + + switch(type) { + case 'align-left': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_LEFT); + break; + case 'align-center': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_CENTER); + break; + case 'align-right': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_RIGHT); + break; + case 'align-top': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_TOP); + break; + case 'align-middle': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_MIDDLE); + break; + case 'align-bottom': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_BOTTOM); + break; + case 'distrib-hor': + api.DistributeHorizontally(); + break; + case 'distrib-vert': + api.DistributeVertically(); + break; + } + } + + onStyle (style) { + const api = Common.EditorApi.get(); + let chart = new Asc.CAscChartProp(); + chart.putStyle(style); + api.ChartApply(chart); + } + + onType (type) { + const api = Common.EditorApi.get(); + let chart = new Asc.CAscChartProp(); + chart.changeType(type); + api.ChartApply(chart); + // Force update styles + this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType())); + } + + onFillColor (color) { + const api = Common.EditorApi.get(); + const shape = new Asc.asc_CShapeProperty(); + const fill = new Asc.asc_CShapeFill(); + + if (color == 'transparent') { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL); + fill.put_fill(null); + } else { + fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID); + fill.put_fill(new Asc.asc_CFillSolid()); + fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color)); + } + + shape.put_fill(fill); + api.ShapeApply(shape); + } + + onBorderColor (color) { + const api = Common.EditorApi.get(); + const currentShape = this.props.storeFocusObjects.shapeObject; + const shape = new Asc.asc_CShapeProperty(); + const stroke = new Asc.asc_CStroke(); + + if (currentShape.get_stroke().get_width() < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color)); + stroke.put_width(currentShape.get_stroke().get_width()); + stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash()); + } + + shape.put_stroke(stroke); + api.ShapeApply(shape); + } + + onBorderSize (value) { + const api = Common.EditorApi.get(); + const shape = new Asc.asc_CShapeProperty(); + const stroke = new Asc.asc_CStroke(); + + const _borderColor = this.props.storeChartSettings.borderColor; + + if (value < 0.01) { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE); + } else { + stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR); + if (_borderColor == 'transparent') + stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29})); + else + stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor))); + stroke.put_width(value * 25.4 / 72.0); + } + + shape.put_stroke(stroke); + api.ShapeApply(shape); + this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_stroke()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR + } + + render () { + return ( + + ) + } +} + +export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx index 4ec1991f3..eb607e1f6 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx @@ -29,7 +29,6 @@ class EditImageController extends Component { case 'move-down': api.shapes_bringBackward(); break; - } } diff --git a/apps/presentationeditor/mobile/src/store/chartSettings.js b/apps/presentationeditor/mobile/src/store/chartSettings.js new file mode 100644 index 000000000..622cd0c43 --- /dev/null +++ b/apps/presentationeditor/mobile/src/store/chartSettings.js @@ -0,0 +1,152 @@ +import {action, observable, computed} from 'mobx'; + +export class storeChartSettings { + + // Style + + @observable chartStyles; + + @action updateChartStyles (styles) { + this.chartStyles = styles; + } + + @computed get styles () { + const widthContainer = document.querySelector(".page-content").clientWidth; + const columns = parseInt(widthContainer / 70); // magic + let row = -1; + const styles = []; + + this.chartStyles.forEach((style, index) => { + if (0 == index % columns) { + styles.push([]); + row++ + } + styles[row].push(style); + }); + + return styles; + } + + @computed get types () { + const types = [ + { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'}, + { type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'}, + { type: Asc.c_oAscChartTypeSettings.barStackedPer, thumb: 'chart-01.png'}, + { type: Asc.c_oAscChartTypeSettings.lineNormal, thumb: 'chart-06.png'}, + { type: Asc.c_oAscChartTypeSettings.lineStacked, thumb: 'chart-05.png'}, + { type: Asc.c_oAscChartTypeSettings.lineStackedPer, thumb: 'chart-04.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarNormal, thumb: 'chart-09.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarStacked, thumb: 'chart-08.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarStackedPer, thumb: 'chart-07.png'}, + { type: Asc.c_oAscChartTypeSettings.areaNormal, thumb: 'chart-12.png'}, + { type: Asc.c_oAscChartTypeSettings.areaStacked, thumb: 'chart-11.png'}, + { type: Asc.c_oAscChartTypeSettings.areaStackedPer, thumb: 'chart-10.png'}, + { type: Asc.c_oAscChartTypeSettings.pie, thumb: 'chart-13.png'}, + { type: Asc.c_oAscChartTypeSettings.doughnut, thumb: 'chart-14.png'}, + { type: Asc.c_oAscChartTypeSettings.pie3d, thumb: 'chart-22.png'}, + { type: Asc.c_oAscChartTypeSettings.scatter, thumb: 'chart-15.png'}, + { type: Asc.c_oAscChartTypeSettings.stock, thumb: 'chart-16.png'}, + { type: Asc.c_oAscChartTypeSettings.line3d, thumb: 'chart-21.png'}, + { type: Asc.c_oAscChartTypeSettings.barNormal3d, thumb: 'chart-17.png'}, + { type: Asc.c_oAscChartTypeSettings.barStacked3d, thumb: 'chart-18.png'}, + { type: Asc.c_oAscChartTypeSettings.barStackedPer3d, thumb: 'chart-19.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarNormal3d, thumb: 'chart-25.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarStacked3d, thumb: 'chart-24.png'}, + { type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, thumb: 'chart-23.png'}, + { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, thumb: 'chart-20.png'} + ]; + const columns = 3; + const arr = []; + let row = -1; + types.forEach((type, index) => { + if (0 == index % columns) { + arr.push([]); + row++ + } + arr[row].push(type); + }); + return arr; + } + + // Fill Color + + @observable fillColor = undefined; + + setFillColor (color) { + this.fillColor = color; + } + + getFillColor (shapeProperties) { + let fill = shapeProperties.get_fill(); + const fillType = fill.get_type(); + let color = 'transparent'; + + if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) { + fill = fill.get_fill(); + const sdkColor = fill.get_color(); + if (sdkColor) { + if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()}; + } else { + color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()); + } + } + } + + this.fillColor = color; + return color; + } + + // Border size and border color + + @observable borderColor; + + setBorderColor (color) { + this.borderColor = color; + } + + initBorderColor (stroke) { + let color = 'transparent'; + + if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { + const sdkColor = stroke.get_color(); + if (sdkColor) { + if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { + color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()}; + } + else { + color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()); + } + } + } + + this.borderColor = color; + return color; + } + + borderSizeTransform () { + const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; + + return { + sizeByIndex: function (index) { + if (index < 1) return _sizes[0]; + if (index > _sizes.length - 1) return _sizes[_sizes.length - 1]; + return _sizes[index]; + }, + + indexSizeByValue: function (value) { + let index = 0; + _sizes.forEach((size, idx) => { + if (Math.abs(size - value) < 0.25) { + index = idx; + } + }); + return index; + }, + + sizeByValue: function (value) { + return _sizes[this.indexSizeByValue(value)]; + } + } + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index fdf9bdd6b..64e69df71 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -136,4 +136,30 @@ export class storeFocusObjects { } return false; } + + @computed get chartObject() { + const charts = []; + const shapes = [] + + for (let object of this._focusObjects) { + if (object.get_ObjectValue() == Asc.c_oAscTypeSelectElement.Chart) { + charts.push(object); + } + else if(object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Shape && object.get_ObjectValue() && object.get_ObjectValue().get_FromChart()) { + shapes.push(object) + } + } + + const getTopObject = array => { + if (array.length > 0) { + var object = array[array.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } + }; + + getTopObject(charts); + getTopObject(shapes); + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index ba4b9be18..a8d4020ea 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -10,12 +10,12 @@ import { storePalette } from './palette'; import { storeSlideSettings } from './slideSettings'; import { storeTextSettings } from './textSettings'; import { storeShapeSettings } from './shapeSettings'; -import {storeTableSettings} from "./tableSettings"; +import { storeTableSettings } from "./tableSettings"; +import { storeChartSettings } from "./chartSettings"; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; // import {storeImageSettings} from "./imageSettings"; -// import {storeChartSettings} from "./chartSettings"; export const stores = { storeAppOptions: new storeAppOptions(), @@ -29,7 +29,8 @@ export const stores = { storePalette: new storePalette(), storeTextSettings: new storeTextSettings(), storeShapeSettings: new storeShapeSettings(), - storeTableSettings: new storeTableSettings() + storeTableSettings: new storeTableSettings(), + storeChartSettings: new storeChartSettings() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index d0cfca654..155016cd5 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -9,13 +9,15 @@ import EditSlideController from "../../controller/edit/EditSlide"; import EditTextController from "../../controller/edit/EditText"; import EditShapeController from "../../controller/edit/EditShape"; import EditImageController from "../../controller/edit/EditImage"; +import EditTableController from "../../controller/edit/EditTable"; +import EditChartController from "../../controller/edit/EditChart"; + import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; -import EditTableController from "../../controller/edit/EditTable"; -//import EditChartController from "../../controller/edit/EditChart"; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' //import EditLinkController from "../../controller/edit/EditLink"; const routes = [ @@ -165,6 +167,33 @@ const routes = [ { path: '/edit-table-custom-fill-color/', component: PageTableCustomFillColor + }, + + // Chart + + { + path: '/edit-chart-style/', + component: PageChartStyle + }, + { + path: '/edit-chart-reorder/', + component: PageChartReorder + }, + { + path: '/edit-chart-align/', + component: PageChartAlign + }, + { + path: '/edit-chart-border-color/', + component: PageChartBorderColor + }, + { + path: '/edit-chart-custom-border-color/', + component: PageChartCustomBorderColor + }, + { + path: '/edit-chart-custom-fill-color/', + component: PageChartCustomFillColor } ]; @@ -267,7 +296,6 @@ const EditTabs = props => { component: }) } - /* if (settings.indexOf('chart') > -1) { editors.push({ caption: _t.textChart, @@ -275,6 +303,7 @@ const EditTabs = props => { component: }) } + /* if (settings.indexOf('hyperlink') > -1) { editors.push({ caption: _t.textHyperlink, diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx new file mode 100644 index 000000000..376930be0 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx @@ -0,0 +1,341 @@ +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; + +const PageCustomFillColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let fillColor = props.storeChartSettings.fillColor; + + if (typeof fillColor === 'object') { + fillColor = fillColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onFillColor(color); + props.storeChartSettings.setFillColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PaletteFill = inject("storeFocusObjects", "storeChartSettings", "storePalette")(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const shapeProperties = props.storeFocusObjects.shapeObject; + const curFillColor = storeChartSettings.fillColor ? storeChartSettings.fillColor : storeChartSettings.getFillColor(shapeProperties); + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onFillColor(newColor); + storeChartSettings.setFillColor(newColor); + } else { + props.onFillColor(color); + storeChartSettings.setFillColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-fill-color/'); + } + }; + + return ( + + + + + + + ) +})); + +const PageCustomBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + let borderColor = props.storeChartSettings.borderColor; + + if (typeof borderColor === 'object') { + borderColor = borderColor.color; + } + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onBorderColor(color); + props.storeChartSettings.setBorderColor(color); + props.f7router.back(); + }; + + return ( + + + + + ) +}; + +const PageBorderColor = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const borderColor = props.storeChartSettings.borderColor; + const customColors = props.storePalette.customColors; + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !==undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + props.onBorderColor(newColor); + props.storeChartSettings.setBorderColor(newColor); + } else { + props.onBorderColor(color); + props.storeChartSettings.setBorderColor(color); + } + } else { + // open custom color menu + props.f7router.navigate('/edit-chart-custom-border-color/'); + } + }; + + return ( + + + + + + + + ) +}; + +const PageStyle = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartProperties = props.storeFocusObjects.chartObject; + + const types = storeChartSettings.types; + const curType = chartProperties.getType(); + + const styles = storeChartSettings.styles; + + const shapeObject = props.storeFocusObjects.shapeObject; + const shapeStroke = shapeObject.get_stroke(); + + // Init border size + + const borderSizeTransform = storeChartSettings.borderSizeTransform(); + const borderSize = shapeStroke.get_width() * 72.0 / 25.4; + const borderType = shapeStroke.get_type(); + const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize); + const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize); + const [stateBorderSize, setBorderSize] = useState(displayBorderSize); + const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); + + // Init border color + + const borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor; + const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor; + + return ( + + +
+ {_t.textType} + {_t.textStyle} + {_t.textFill} + {_t.textBorder} +
+ + + +
+ {types.map((row, rowIndex) => { + return ( +
    + {row.map((type, index)=>{ + return( +
  • {props.onType(type.type)}}> +
    +
    +
    • + ) + })} +
+ ) + })} +
+ + +
+ {styles.map((row, rowIndex) => { + return ( +
    + {row.map((style, index)=>{ + return( +
  • {props.onStyle(style.asc_getName())}}> + +
    • + ) + })} +
+ ) + })} +
+ + + + + + + +
{_t.textSize}
+
+ {setBorderSize(value); setTextBorderSize(borderSizeTransform.sizeByIndex(value));}} + onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} + > +
+
+ {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)} +
+ + + + + + + + + ) +}; + +const PageReorder = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + return ( + + + + {props.onReorder('all-up')}} link='#' className='no-indicator'> + + + {props.onReorder('all-down')}} link='#' className='no-indicator'> + + + {props.onReorder('move-up')}} link='#' className='no-indicator'> + + + {props.onReorder('move-down')}} link='#' className='no-indicator'> + + + + + ) +}; + +const PageAlign = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onAlign('align-left')}} className='no-indicator'> + + + {props.onAlign('align-center')}} className='no-indicator'> + + + {props.onAlign('align-right')}} className='no-indicator'> + + + {props.onAlign('align-top')}} className='no-indicator'> + + + {props.onAlign('align-middle')}} className='no-indicator'> + + + {props.onAlign('align-bottom')}} className='no-indicator'> + + + + + {props.onAlign('distrib-hor')}} className='no-indicator'> + + + {props.onAlign('distrib-vert')}} className='no-indicator'> + + + + + ) +}; + +const EditChart = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + return ( + + + + + + + + {props.onRemoveChart()}} className='button-red button-fill button-raised'/> + + + ) +}; + +const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); +const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); +const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); +const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); + +export { + EditChart, + PageChartStyle, + PageChartCustomFillColor, + PageChartBorderColor, + PageChartCustomBorderColor, + PageReorder as PageChartReorder, + PageAlign as PageChartAlign +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index 38f94b54c..8786cc95e 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -296,7 +296,7 @@ const PageStyle = props => { - + @@ -308,10 +308,10 @@ const PageStyle = props => { }}/> - + - + From 338776c1a07405e6875650e94c8872c0e8a8fc46 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 29 Jan 2021 12:04:28 +0300 Subject: [PATCH 6/7] [PE mobile] Changes after merge --- apps/presentationeditor/mobile/src/controller/Main.jsx | 4 ---- apps/presentationeditor/mobile/src/store/mainStore.js | 5 +++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index ef2b7aa65..902dca3d7 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/apps/presentationeditor/mobile/src/controller/Main.jsx @@ -5,11 +5,7 @@ import { f7 } from "framework7-react"; import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' -<<<<<<< HEAD @inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeChartSettings") -======= -@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeLinkSettings") ->>>>>>> feature/mobile-apps-on-reactjs class MainController extends Component { constructor(props) { super(props) diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index a8d4020ea..4ed3fd33e 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -12,7 +12,7 @@ import { storeTextSettings } from './textSettings'; import { storeShapeSettings } from './shapeSettings'; import { storeTableSettings } from "./tableSettings"; import { storeChartSettings } from "./chartSettings"; -// import {storeTextSettings} from "./textSettings"; +import { storeLinkSettings } from "./linkSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; // import {storeImageSettings} from "./imageSettings"; @@ -30,7 +30,8 @@ export const stores = { storeTextSettings: new storeTextSettings(), storeShapeSettings: new storeShapeSettings(), storeTableSettings: new storeTableSettings(), - storeChartSettings: new storeChartSettings() + storeChartSettings: new storeChartSettings(), + storeLinkSettings: new storeLinkSettings() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), From 779dc01aa12983b682dc8f3e7bc0d4294ee18e72 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Fri, 29 Jan 2021 15:22:54 +0300 Subject: [PATCH 7/7] [PE mobile] Fix get chart object --- .../mobile/src/store/focusObjects.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index 9a762cbc9..3371ac37c 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -47,7 +47,7 @@ export class storeFocusObjects { resultArr.splice(resultArr.indexOf('hyperlink'), 1); } // Exclude shapes if chart exist - if (resultArr.indexOf('chart') > -1) { + if (resultArr.indexOf('chart') > -1 && resultArr.indexOf('shape') > -1) { resultArr.splice(resultArr.indexOf('shape'), 1); } return resultArr; @@ -149,27 +149,18 @@ export class storeFocusObjects { @computed get chartObject() { const charts = []; - const shapes = [] for (let object of this._focusObjects) { - if (object.get_ObjectValue() == Asc.c_oAscTypeSelectElement.Chart) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart) { charts.push(object); } - else if(object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Shape && object.get_ObjectValue() && object.get_ObjectValue().get_FromChart()) { - shapes.push(object) - } } - const getTopObject = array => { - if (array.length > 0) { - var object = array[array.length - 1]; // get top - return object.get_ObjectValue(); - } else { - return undefined; - } - }; - - getTopObject(charts); - getTopObject(shapes); + if (charts.length > 0) { + const object = charts[charts.length - 1]; // get top + return object.get_ObjectValue(); + } else { + return undefined; + } } } \ No newline at end of file