diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 80ea8dd647..7207ffc45a 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -217,7 +217,18 @@ "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", + "textRemoveChart": "Remove Chart" } }, "Common": { diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 0ee0ca0289..902dca3d77 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", "storeLinkSettings") +@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings", "storeTextSettings", "storeTableSettings", "storeChartSettings") class MainController extends Component { constructor(props) { super(props) @@ -299,16 +299,22 @@ class MainController extends Component { storeTextSettings.resetLineSpacing(vc); }); - //table settings + // Table settings + const storeTableSettings = this.props.storeTableSettings; + this.api.asc_registerCallback('asc_onInitTableTemplates', (templates) => { storeTableSettings.initTableTemplates(templates); }); - //link settings - const storeLinkSettings = this.props.storeLinkSettings; - this.api.asc_registerCallback('asc_onCanAddHyperlink', (value) => { - storeLinkSettings.canAddHyperlink(value); + // 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())); + } }); } 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 0000000000..10274945af --- /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 4ec1991f3d..eb607e1f69 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/controller/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditTable.jsx new file mode 100644 index 0000000000..9ae2be6baa --- /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/chartSettings.js b/apps/presentationeditor/mobile/src/store/chartSettings.js new file mode 100644 index 0000000000..622cd0c436 --- /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 f1a5fbc494..3371ac37c0 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; @@ -122,4 +122,45 @@ 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; + } + + @computed get chartObject() { + const charts = []; + + for (let object of this._focusObjects) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart) { + charts.push(object); + } + } + + 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 diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 7afc1eb9b3..4ed3fd33ea 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -10,13 +10,12 @@ import { storePalette } from './palette'; import { storeSlideSettings } from './slideSettings'; import { storeTextSettings } from './textSettings'; import { storeShapeSettings } from './shapeSettings'; -// import {storeTextSettings} from "./textSettings"; +import { storeTableSettings } from "./tableSettings"; +import { storeChartSettings } from "./chartSettings"; +import { storeLinkSettings } from "./linkSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; // import {storeImageSettings} from "./imageSettings"; -import {storeTableSettings} from "./tableSettings"; -// import {storeChartSettings} from "./chartSettings"; -import {storeLinkSettings} from "./linkSettings"; export const stores = { storeAppOptions: new storeAppOptions(), @@ -30,11 +29,12 @@ export const stores = { storePalette: new storePalette(), storeTextSettings: new storeTextSettings(), storeShapeSettings: new storeShapeSettings(), + storeTableSettings: new storeTableSettings(), + storeChartSettings: new storeChartSettings(), + storeLinkSettings: new storeLinkSettings() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), // storeChartSettings: new storeChartSettings(), - storeTableSettings: new storeTableSettings(), - storeLinkSettings: new storeLinkSettings() }; diff --git a/apps/presentationeditor/mobile/src/store/tableSettings.js b/apps/presentationeditor/mobile/src/store/tableSettings.js index 3e8f23f30f..7608c5f3c5 100644 --- a/apps/presentationeditor/mobile/src/store/tableSettings.js +++ b/apps/presentationeditor/mobile/src/store/tableSettings.js @@ -1,21 +1,144 @@ -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; - } +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 265332ebd0..155016cd50 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -9,14 +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 EditShapeController from "../../controller/edit/EditShape"; -//import EditImageController from "../../controller/edit/EditImage"; -//import EditTableController from "../../controller/edit/EditTable"; -//import EditChartController from "../../controller/edit/EditChart"; +import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; +import { PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' //import EditLinkController from "../../controller/edit/EditLink"; const routes = [ @@ -135,8 +136,65 @@ const routes = [ { path: '/edit-image-link/', component: PageLinkSettings - } + }, + // Table + + { + path: '/edit-table-reorder/', + component: PageTableReorder + }, + { + 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 + }, + + // 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 + } ]; const EmptyEditLayout = () => { @@ -231,7 +289,7 @@ const EditTabs = props => { component: }) } - /*if (settings.indexOf('table') > -1) { + if (settings.indexOf('table') > -1) { editors.push({ caption: _t.textTable, id: 'edit-table', @@ -245,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 0000000000..376930be0a --- /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 new file mode 100644 index 0000000000..8786cc95e4 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -0,0 +1,477 @@ +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('View.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", "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)); +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