From 705a4f08aefe8d4f894e1602a4e596a380880b8c Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 29 Apr 2021 19:25:40 +0300 Subject: [PATCH] [SSE mobile] Bug 50044 --- .../mobile/src/view/edit/EditChart.jsx | 89 +++++++++++++------ .../mobile/src/view/edit/EditImage.jsx | 12 +++ .../mobile/src/view/edit/EditShape.jsx | 24 ++++- 3 files changed, 96 insertions(+), 29 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx index 9185baa9f..b2af23c72 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react'; +import {f7, List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} 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"; @@ -130,33 +130,42 @@ const PageStyle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeChartSettings = props.storeChartSettings; - const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties(); - const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + const storeFocusObjects = props.storeFocusObjects; + const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties(); const styles = storeChartSettings.styles; const types = storeChartSettings.types; - const curType = chartProperties.getType(); + const curType = chartProperties && chartProperties.getType(); // Init border size - const shapeStroke = shapeProperties.get_stroke(); + let borderSize, borderType; + if (shapeProperties) { + const shapeStroke = shapeProperties.get_stroke(); + borderSize = shapeStroke.get_width() * 72.0 / 25.4; + borderType = shapeStroke.get_type(); + } 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 displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize); + const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize); const [stateBorderSize, setBorderSize] = useState(displayBorderSize); const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize); // Init border color - if(!storeChartSettings.borderColor) { + if(!storeChartSettings.borderColor && shapeProperties) { storeChartSettings.initBorderColor(shapeProperties); } const borderColor = storeChartSettings.borderColor; const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`; + if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -242,7 +251,10 @@ const PageStyle = props => { const PageReorder = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); - + if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } return ( @@ -269,16 +281,27 @@ const PageLayout = props => { const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; const chartObject = storeFocusObjects.chartObject; - const chartProperties = chartObject.get_ChartProperties(); - const chartType = chartProperties.getType(); + const chartProperties = chartObject && chartObject.get_ChartProperties(); + const chartType = chartProperties && chartProperties.getType(); - const [chartTitle, setTitle] = useState(chartProperties.getTitle()); - const [chartLegend, setLegend] = useState(chartProperties.getLegendPos()); - const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel()); - const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel()); - const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines()); - const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines()); - const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos()); + let title, legend, axisHorTitle, axisVertTitle, horGridlines, vertGridlines, dataLabel; + if (chartProperties) { + title = chartProperties.getTitle(); + legend = chartProperties.getLegendPos(); + axisHorTitle = chartProperties.getHorAxisLabel(); + axisVertTitle = chartProperties.getVertAxisLabel(); + horGridlines = chartProperties.getHorGridLines(); + vertGridlines = chartProperties.getVertGridLines(); + dataLabel = chartProperties.getDataLabelsPos(); + } + + const [chartTitle, setTitle] = useState(title); + const [chartLegend, setLegend] = useState(legend); + const [chartAxisHorTitle, setAxisHorTitle] = useState(axisHorTitle); + const [chartAxisVertTitle, setAxisVertTitle] = useState(axisVertTitle); + const [chartHorGridlines, setHorGridlines] = useState(horGridlines); + const [chartVertGridlines, setVertGridlines] = useState(vertGridlines); + const [chartDataLabel, setDataLabel] = useState(dataLabel); let dataLabelPos = [ { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone }, @@ -369,6 +392,11 @@ const PageLayout = props => { 7: `${_t.textOuterTop}` }; + if ((!chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -620,7 +648,7 @@ const PageVerticalAxis = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const api = Common.EditorApi.get(); - const chartProperty = api.asc_getChartObject(); + const chartProperty = api.asc_getChartObject(true); const isIos = Device.ios; const verAxisProps = chartProperty.getVertAxisProps(); const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps(); @@ -684,6 +712,11 @@ const PageVerticalAxis = props => { const currentCrossesValue = axisProps.getCrosses(); const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -917,7 +950,7 @@ const PageHorizontalAxis = props => { const _t = t('View.Edit', {returnObjects: true}); const api = Common.EditorApi.get(); const isIos = Device.ios; - const chartProperty = api.asc_getChartObject(); + const chartProperty = api.asc_getChartObject(true); const horAxisProps = chartProperty.getHorAxisProps(); const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps; const crossValue = axisProps.getCrossesRule(); @@ -970,6 +1003,11 @@ const PageHorizontalAxis = props => { const currentCrossesValue = axisProps.getCrosses(); const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue); + if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -1181,8 +1219,8 @@ const EditChart = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; - const chartProperties = storeFocusObjects.chartObject.get_ChartProperties(); - const chartType = chartProperties.getType(); + const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties(); + const chartType = chartProperties && chartProperties.getType(); const disableSetting = ( chartType == Asc.c_oAscChartTypeSettings.pie || @@ -1244,6 +1282,7 @@ const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")( const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout)); const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis)); const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis)); +const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder)); export { PageEditChart as EditChart, @@ -1251,7 +1290,7 @@ export { PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, - PageReorder as PageChartReorder, + PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx index 0eba7e656..ff49398e3 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx @@ -32,6 +32,12 @@ const PageReorder = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -58,6 +64,12 @@ const PageReplace = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx index 58140755f..2c1cb974f 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx @@ -9,10 +9,8 @@ const EditShape = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeFocusObjects = props.storeFocusObjects; - // const selections = storeFocusObjects.selections; - // console.log(selections); const shapeObject = storeFocusObjects.shapeObject; - const canFill = shapeObject.get_ShapeProperties().asc_getCanFill(); + const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill(); return ( @@ -84,7 +82,8 @@ const PageStyle = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); const storeShapeSettings = props.storeShapeSettings; - const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties(); + const storeFocusObjects = props.storeFocusObjects; + const shapeObject = storeFocusObjects.shapeObject.get_ShapeProperties(); const stroke = shapeObject.get_stroke(); // Init border size @@ -107,6 +106,11 @@ const PageStyle = props => { const transparent = shapeObject.get_fill().asc_getTransparent(); const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100; const [stateOpacity, setOpacity] = useState(Math.round(opacity)); + + if ((!shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } return ( @@ -248,6 +252,12 @@ const PageReplace = props => { let shapes = storeShapeSettings.getStyleGroups(); shapes.splice(0, 1); // Remove line shapes + const storeFocusObjects = props.storeFocusObjects; + if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return ( @@ -274,6 +284,12 @@ const PageReorder = props => { const { t } = useTranslation(); const _t = t('View.Edit', {returnObjects: true}); + const storeFocusObjects = props.storeFocusObjects; + if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) { + $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close(); + return null; + } + return (