From 98ffebb52dd4fac8adfdda649e6fad4273470aa4 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 27 Jan 2022 02:10:44 +0400 Subject: [PATCH] [DE mobile] Add editing a table of contents v.3 --- apps/documenteditor/mobile/locale/en.json | 4 +- .../src/controller/edit/EditTableContents.jsx | 188 ++++++++++++++++++ .../mobile/src/view/edit/Edit.jsx | 6 +- .../src/view/edit/EditTableContents.jsx | 102 +++++++++- 4 files changed, 295 insertions(+), 5 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index a315c41f0..1d47d8024 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -353,7 +353,9 @@ "textModern": "Modern", "textCancel": "Cancel", "textRefreshEntireTable": "Refresh entire table", - "textRefreshPageNumbersOnly": "Refresh page numbers only" + "textRefreshPageNumbersOnly": "Refresh page numbers only", + "textStyles": "Styles", + "textAmountOfLevels": "Amount of Levels" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx index 7f1520f25..cccfd1b8e 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx @@ -8,6 +8,10 @@ import { EditTableContents } from '../../view/edit/EditTableContents'; class EditTableContentsController extends Component { constructor (props) { super(props); + + this.startLevel = 1; + this.endLevel = 3; + this.fillTOCProps = this.fillTOCProps.bind(this); } onStyle(value) { @@ -41,7 +45,187 @@ class EditTableContentsController extends Component { propsTableContents.put_TabLeader(value); api.asc_SetTableOfContentsPr(propsTableContents); + } + onLevelsChange(value) { + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + + propsTableContents.clear_Styles(); + propsTableContents.put_OutlineRange(1, value); + api.asc_SetTableOfContentsPr(propsTableContents); + } + + fillTOCProps(props) { + const api = Common.EditorApi.get(); + const docStyles = api.asc_GetStylesArray(); + + let checkStyles = false, + disableOutlines = false, + styles = []; + + docStyles.forEach(style => { + let name = style.get_Name(), + level = api.asc_GetHeadingLevel(name); + + if (style.get_QFormat() || level >= 0) { + styles.push({ + name: name, + displayValue: style.get_TranslatedName(), + allowSelected: false, + checked: false, + value: '', + headerLevel: (level >= 0) ? level + 1 : -1 + }) + } + }); + + if(props) { + let start = props.get_OutlineStart(), + end = props.get_OutlineEnd(), + count = props.get_StylesCount(); + + this.startLevel = start; + this.endLevel = end; + this.count = count; + + if ((start < 0 || end < 0) && count < 1) { + start = 1; + end = 9; + // this.spnLevels.setValue(end, true); + } + + for (let i = 0; i < count; i++) { + let styleName = props.get_StyleName(i), + level = props.get_StyleLevel(i), + rec = styles.find(style => style.name == styleName); + + if (rec) { + rec.checked = true; + rec.value = level; + if (rec.headerLevel !== level) + disableOutlines = true; + } else { + styles.push({ + name: styleName, + displayValue: styleName, + allowSelected: false, + checked: true, + value: level, + headerLevel: -1 + }); + + disableOutlines = true; + } + } + + if (start > 0 && end > 0) { + for (let i = start; i <= end; i++) { + let rec = styles.find(style => style.headerLevel === i); + + if (rec) { + rec.checked = true; + rec.value = i; + } + } + } + + let newStart = -1, + newEnd = -1, + emptyIndex = -1; + + for (let i = 0; i < 9; i++) { + let rec = styles.find(style => style.headerLevel === i + 1); + + if (rec) { + let headerLevel = rec.headerLevel, + level = rec.value; + + if (headerLevel == level) { + if (emptyIndex < 1) { + if (newStart < 1) + newStart = level; + newEnd = level; + } else { + newStart = newEnd = -1; + disableOutlines = true; + break; + } + } else if (!rec.checked) { + (newStart > 0) && (emptyIndex = i + 1); + } else { + newStart = newEnd = -1; + disableOutlines = true; + break; + } + } + } + + // this.spnLevels.setValue(newEnd > 0 ? newEnd : '', true); + checkStyles = (disableOutlines || newStart > 1); + } else { + for (let i = this.startLevel; i <= this.endLevel; i++) { + let rec = styles.find(style => style.headerLevel === i); + + if (rec) { + rec.checked = true; + rec.value = i; + } + } + } + + styles.sort(function(a, b) { + let aname = a.displayValue.toLocaleLowerCase(), + bname = b.displayValue.toLocaleLowerCase(); + if (aname < bname) return -1; + if (aname > bname) return 1; + return 0; + }); + + return { + styles, + start: this.startLevel, + end: this.endLevel, + count: this.count, + disableOutlines, + checkStyles + } + + // this.stylesLevels.reset(styles); + // if (checkStyles) { + // this._forceUpdateOutlineLevels = true; + // this.radioStyles.setValue(true); + // this.stylesList.scroller.update({alwaysVisibleY: true}); + // var rec = this.stylesLevels.findWhere({checked: true}); + // if (rec) + // this.stylesList.scrollToRecord(rec); + // } + } + + addStyles(styleName, value) { + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + + propsTableContents.add_Style(styleName, value); + + if (propsTableContents.get_StylesCount() > 0) { + propsTableContents.put_OutlineRange(-1, -1); + } else { + propsTableContents.put_OutlineRange(1, 9); + } + + // api.asc_SetTableOfContentsPr(propsTableContents); + } + + changeCaption(value) { + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + + if(record) { + propsTableContents.put_Caption(value); + properties.clear_Styles(); + api.asc_SetTableOfContentsPr(propsTableContents); + } } onTableContentsUpdate(type, currentTOC) { @@ -73,6 +257,10 @@ class EditTableContentsController extends Component { onPageNumbers={this.onPageNumbers} onRightAlign={this.onRightAlign} onLeader={this.onLeader} + onLevelsChange={this.onLevelsChange} + fillTOCProps={this.fillTOCProps} + changeCaption={this.changeCaption} + addStyles={this.addStyles} /> ) } diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 36aacc1e4..0a06b8f18 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -21,7 +21,7 @@ import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShap import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; -import { PageEditLeaderTableContents, PageEditStylesTableContents } from './EditTableContents'; +import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents'; const routes = [ //Edit text @@ -196,6 +196,10 @@ const routes = [ { path: '/edit-leader-table-contents/', component: PageEditLeaderTableContents + }, + { + path: '/edit-structure-table-contents/', + component: PageEditStructureTableContents } ]; diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx index 3198c1322..65da847e4 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx @@ -9,12 +9,14 @@ const EditTableContents = props => { const _t = t('Edit', {returnObjects: true}); const api = Common.EditorApi.get(); const propsTableContents = api.asc_GetTableOfContentsPr(); + const count = propsTableContents.get_StylesCount(); console.log(propsTableContents); const [type, setType] = useState(0); const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType()); const [pageNumbers, setPageNumbers] = useState(propsTableContents.get_ShowPageNumbers()); const [rightAlign, setRightAlign] = useState(propsTableContents.get_RightAlignTab()); const [leaderValue, setLeaderValue] = useState(propsTableContents.get_TabLeader() ? propsTableContents.get_TabLeader() : Asc.c_oAscTabLeader.Dot); + const arrStyles = (type === 1) ? [ { displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current }, { displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple }, @@ -31,6 +33,7 @@ const EditTableContents = props => { { displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern }, { displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic } ]; + const arrLeaders = [ { value: Asc.c_oAscTabLeader.None, displayValue: t('Edit.textNone') }, { value: Asc.c_oAscTabLeader.Dot, displayValue: '....................' }, @@ -61,7 +64,7 @@ const EditTableContents = props => { } ] ] - }).open() + }).open(); } return ( @@ -100,7 +103,11 @@ const EditTableContents = props => { setLeaderValue }}> } - + { ) } +const PageEditStructureTableContents = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const isAndroid = Device.android; + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + const {styles, start, end, count, disableOutlines, checkStyles} = props.fillTOCProps(propsTableContents); + console.log(styles, start, end, count, disableOutlines, checkStyles); + + const [structure, setStructure] = useState(count ? 1 : 0); + const [amountLevels, setAmountLevels] = useState(end); + + return ( + + + {Device.phone && + + + + + + } + + + setStructure(0)}> + setStructure(1)}> + + {structure === 0 ? + + + {!isAndroid &&
{amountLevels}
} +
+ + + {isAndroid && } + + +
+ + + : + + {styles.map((style, index) => { + return ( + + {!isAndroid &&
{style.value}
} +
+ + + {isAndroid && } + + +
+ + ) + })} + + } + + ) +} + export { EditTableContents, PageEditStylesTableContents, - PageEditLeaderTableContents + PageEditLeaderTableContents, + PageEditStructureTableContents }; \ No newline at end of file