From 157fde006dcf7a05b79bb9bdebcc27803e621c1f Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 18 Jan 2021 20:41:29 +0300 Subject: [PATCH] [DE mobile] Added style settings for chart object --- .../mobile/resources/less/common-ios.less | 6 + apps/common/mobile/resources/less/common.less | 31 +++ apps/documenteditor/mobile/locale/en.json | 3 +- .../mobile/src/controller/Main.jsx | 10 +- .../mobile/src/controller/edit/EditChart.jsx | 98 +++++++- .../mobile/src/store/chartSettings.js | 131 ++++++++++ .../mobile/src/view/edit/Edit.jsx | 18 +- .../mobile/src/view/edit/EditChart.jsx | 236 +++++++++++++++++- 8 files changed, 524 insertions(+), 9 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index ef453c9e0..1edd16cf5 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -336,4 +336,10 @@ margin-top: 20px; } } + + .dataview { + &.page-content { + background-color: @white; + } + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 714269070..b8d17ce12 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -45,6 +45,37 @@ } } +.chart-types { + width: 100%; + .row { + padding: 0 10px; + } + li { + width: 60px; + height: 60px; + margin: 6px; + + .thumb { + width: 100%; + height: 100%; + background-size: contain; + } + } +} + +.chart-styles { + .row { + li { + margin: 0; + padding: 1px; + } + img { + width: 50px; + height: 50px; + } + } +} + .segmented { .decrement, .increment { text-overflow: clip; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 1de8002b9..0ba2161c0 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -188,7 +188,8 @@ "textBandedRow": "Banded Row", "textFirstColumn": "First Column", "textLastColumn": "Last Column", - "textBandedColumn": "Banded Column" + "textBandedColumn": "Banded Column", + "textType": "Type" }, "Add": { "textTable": "Table", diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index 69e5de2a1..417a62aa1 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -6,7 +6,7 @@ import { withTranslation } from 'react-i18next'; import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'; import { onAdvancedOptions } from './settings/Download.jsx'; -@inject("storeAppOptions", "storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo") +@inject("storeAppOptions", "storeDocumentSettings", "storeFocusObjects", "storeTextSettings", "storeParagraphSettings", "storeTableSettings", "storeDocumentInfo", "storeChartSettings") class MainController extends Component { constructor(props) { super(props) @@ -263,6 +263,14 @@ class MainController extends Component { storeTableSettings.initTableTemplates(templates); }); + //chart settings + const storeChartSettings = this.props.storeChartSettings; + this.api.asc_registerCallback('asc_onUpdateChartStyles', () => { + if (storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties()) { + storeChartSettings.updateChartStyles(this.api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType())); + } + }); + // Document Info const storeDocumentInfo = this.props.storeDocumentInfo; diff --git a/apps/documenteditor/mobile/src/controller/edit/EditChart.jsx b/apps/documenteditor/mobile/src/controller/edit/EditChart.jsx index 3068365c2..b33b1b29e 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditChart.jsx @@ -9,6 +9,13 @@ class EditChartController extends Component { constructor (props) { super(props); this.onWrapType = this.onWrapType.bind(this); + this.onType = this.onType.bind(this); + this.onStyle = this.onStyle.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.get_ChartProperties().getType())); } onRemoveChart () { @@ -97,6 +104,90 @@ class EditChartController extends Component { } } + onStyle (style) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + const chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + chart.putStyle(style); + image.put_ChartProperties(chart); + api.ImgApply(image); + } + + onType (type) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + const chart = this.props.storeFocusObjects.chartObject.get_ChartProperties(); + chart.changeType(type); + image.put_ChartProperties(chart); + api.ImgApply(image); + // Force update styles + this.props.storeChartSettings.updateChartStyles(api.asc_getChartPreviews(chart.getType())); + } + + onFillColor (color) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + 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); + image.put_ShapeProperties(shape); + api.ImgApply(image); + } + + onBorderColor (color) { + const api = Common.EditorApi.get(); + const currentShape = this.props.storeFocusObjects.shapeObject.get_ShapeProperties(); + const image = new Asc.asc_CImgProperty(); + 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); + image.put_ShapeProperties(shape); + api.ImgApply(image); + } + + onBorderSize (value) { + const api = Common.EditorApi.get(); + + const image = new Asc.asc_CImgProperty(); + 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); + image.put_ShapeProperties(shape); + + api.ImgApply(image); + this.props.storeChartSettings.initBorderColor(this.props.storeFocusObjects.shapeObject.get_ShapeProperties().get_stroke()); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR + } + render () { return ( ) } } -export default inject("storeChartSettings")(observer(EditChartController)); \ No newline at end of file +export default inject("storeChartSettings", "storeFocusObjects")(observer(EditChartController)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/chartSettings.js b/apps/documenteditor/mobile/src/store/chartSettings.js index 51efc5af0..8efe74546 100644 --- a/apps/documenteditor/mobile/src/store/chartSettings.js +++ b/apps/documenteditor/mobile/src/store/chartSettings.js @@ -54,4 +54,135 @@ export class storeChartSettings { getWrapDistance (chartObject) { return chartObject.get_Paddings().get_Top(); } + + // 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/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 93e20b483..bd9bb4c7a 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -19,7 +19,7 @@ import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; -import {PageChartWrap, PageChartReorder} from "./EditChart"; +import {PageChartStyle, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; const routes = [ //Edit text @@ -159,6 +159,22 @@ const routes = [ { path: '/edit-chart-reorder/', component: PageChartReorder, + }, + { + path: '/edit-chart-style/', + component: PageChartStyle, + }, + { + path: '/edit-chart-custom-fill-color/', + component: PageChartCustomFillColor, + }, + { + path: '/edit-chart-border-color/', + component: PageChartBorderColor, + }, + { + path: '/edit-chart-custom-border-color/', + component: PageChartCustomBorderColor, } ]; diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index 87eeeb8ae..808598e63 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -1,13 +1,224 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle, Toggle, Range} from 'framework7-react'; +import {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('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('Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + 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('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('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('Edit', {returnObjects: true}); + const storeChartSettings = props.storeChartSettings; + const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties(); + + const types = storeChartSettings.types; + const curType = chartProperties.getType(); + + const styles = storeChartSettings.styles; + + const shapeObject = props.storeFocusObjects.shapeObject; + const shapeStroke = shapeObject.get_ShapeProperties().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)} +
+ + + + + + + ) }; @@ -136,7 +347,13 @@ const EditChart = props => { return ( - + { ) }; -const PageChartStyle = inject("storeFocusObjects")(observer(PageStyle)); +const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle)); const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap)); +const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor)); +const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor)); +const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor)); -export {EditChart, PageChartStyle, PageChartWrap, PageReorder as PageChartReorder} \ No newline at end of file +export {EditChart, + PageChartStyle, + PageChartCustomFillColor, + PageChartBorderColor, + PageChartCustomBorderColor, + PageChartWrap, + PageReorder as PageChartReorder} \ No newline at end of file