From 2ab1d32e9787d0a424e976da4d0c4cc0d3678066 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 16 Mar 2021 13:49:16 +0300 Subject: [PATCH] [DE mobile] Corrected stores according to mobx v. 6 --- .../mobile/src/store/applicationSettings.js | 28 ++--- .../mobile/src/store/chartSettings.js | 44 +++++-- .../mobile/src/store/documentInfo.js | 26 +++-- .../mobile/src/store/documentSettings.js | 36 ++++-- .../mobile/src/store/focusObjects.js | 55 ++++++--- .../mobile/src/store/palette.js | 13 ++- .../mobile/src/store/paragraphSettings.js | 34 ++++-- .../documenteditor/mobile/src/store/review.js | 19 ++- .../mobile/src/store/shapeSettings.js | 25 +++- .../mobile/src/store/tableSettings.js | 26 +++-- .../mobile/src/store/textSettings.js | 109 ++++++++++++------ 11 files changed, 302 insertions(+), 113 deletions(-) diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js index a1e17a40c..9fea1a4f0 100644 --- a/apps/documenteditor/mobile/src/store/applicationSettings.js +++ b/apps/documenteditor/mobile/src/store/applicationSettings.js @@ -3,20 +3,20 @@ import {makeObservable, action, observable} from 'mobx'; export class storeApplicationSettings { constructor() { makeObservable(this, { - unitMeasurement: observable - , isSpellChecking: observable - , isNonprintingCharacters: observable - , isHiddenTableBorders: observable - , isComments: observable - , isResolvedComments: observable - , macrosMode: observable - , changeSpellCheck: action - , changeUnitMeasurement: action - , changeNoCharacters: action - , changeShowTableEmptyLine: action - , changeDisplayComments: action - , changeDisplayResolved: action - , changeMacrosSettings: action + unitMeasurement: observable, + isSpellChecking: observable, + isNonprintingCharacters: observable, + isHiddenTableBorders: observable, + isComments: observable, + isResolvedComments: observable, + macrosMode: observable, + changeSpellCheck: action, + changeUnitMeasurement: action, + changeNoCharacters: action, + changeShowTableEmptyLine: action, + changeDisplayComments: action, + changeDisplayResolved: action, + changeMacrosSettings: action }) } diff --git a/apps/documenteditor/mobile/src/store/chartSettings.js b/apps/documenteditor/mobile/src/store/chartSettings.js index 90485f462..8ae720d45 100644 --- a/apps/documenteditor/mobile/src/store/chartSettings.js +++ b/apps/documenteditor/mobile/src/store/chartSettings.js @@ -1,6 +1,22 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeChartSettings { + constructor() { + makeObservable(this, { + chartStyles: observable, + fillColor: observable, + borderColor: observable, + clearChartStyles: action, + updateChartStyles: action, + styles: computed, + types: computed, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColor: action + }); + } + wrapTypesTransform () { const map = [ { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline }, @@ -56,14 +72,18 @@ export class storeChartSettings { } // style - @observable chartStyles = null; - @action clearChartStyles () { + + chartStyles = null; + + clearChartStyles () { this.chartStyles = null; } - @action updateChartStyles (styles) { + + updateChartStyles (styles) { this.chartStyles = styles; } - @computed get styles () { + + get styles () { if (!this.chartStyles) return null; const widthContainer = document.querySelector(".page-content").clientWidth; const columns = parseInt(widthContainer / 70); // magic @@ -78,7 +98,8 @@ export class storeChartSettings { }); return styles; } - @computed get types () { + + get types () { const types = [ { type: Asc.c_oAscChartTypeSettings.barNormal, thumb: 'chart-03.png'}, { type: Asc.c_oAscChartTypeSettings.barStacked, thumb: 'chart-02.png'}, @@ -120,10 +141,13 @@ export class storeChartSettings { } // Fill Color - @observable fillColor = undefined; + + fillColor = undefined; + setFillColor (color) { this.fillColor = color; } + getFillColor (shapeProperties) { let fill = shapeProperties.get_fill(); const fillType = fill.get_type(); @@ -144,10 +168,13 @@ export class storeChartSettings { } // Border size and border color - @observable borderColor; + + borderColor; + setBorderColor (color) { this.borderColor = color; } + initBorderColor (stroke) { let color = 'transparent'; if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) { @@ -164,6 +191,7 @@ export class storeChartSettings { this.borderColor = color; return color; } + borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/documentInfo.js b/apps/documenteditor/mobile/src/store/documentInfo.js index 441702998..3bfa67356 100644 --- a/apps/documenteditor/mobile/src/store/documentInfo.js +++ b/apps/documenteditor/mobile/src/store/documentInfo.js @@ -1,21 +1,33 @@ -import { action, observable } from "mobx"; +import {action, observable, makeObservable} from "mobx"; export class storeDocumentInfo { - @observable infoObj = { + constructor() { + makeObservable(this, { + infoObj: observable, + isLoaded: observable, + dataDoc: observable, + switchIsLoaded: action, + changeCount: action, + setDataDoc: action + }); + } + + infoObj = { pageCount: 0, wordsCount: 0, paragraphCount: 0, symbolsCount: 0, symbolsWSCount: 0, }; - @observable isLoaded = false; - @observable dataDoc; - @action switchIsLoaded(value) { + isLoaded = false; + dataDoc; + + switchIsLoaded(value) { this.isLoaded = value; } - @action changeCount(obj) { + changeCount(obj) { if (obj) { if (obj.get_PageCount() > -1) this.infoObj.pageCount = obj.get_PageCount(); @@ -30,7 +42,7 @@ export class storeDocumentInfo { } } - @action setDataDoc(obj) { + setDataDoc(obj) { this.dataDoc = obj; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/documentSettings.js b/apps/documenteditor/mobile/src/store/documentSettings.js index d426d93f5..50a73a764 100644 --- a/apps/documenteditor/mobile/src/store/documentSettings.js +++ b/apps/documenteditor/mobile/src/store/documentSettings.js @@ -1,15 +1,31 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeDocumentSettings { - @observable isPortrait = true; - @action resetPortrait (isPortrait) { + constructor() { + makeObservable(this, { + isPortrait: observable, + widthDocument: observable, + heightDocument: observable, + allSchemes: observable, + resetPortrait: action, + changeDocSize: action, + pageSizesIndex: computed, + addSchemes: action + }); + } + + isPortrait = true; + + resetPortrait (isPortrait) { this.isPortrait = isPortrait === true; } //Document Formats - @observable widthDocument; - @observable heightDocument; - @action changeDocSize (width, height) { + + widthDocument; + heightDocument; + + changeDocSize (width, height) { let w = width; let h = height; if (!this.isPortrait) { @@ -20,6 +36,7 @@ export class storeDocumentSettings { this.widthDocument = w; this.heightDocument = h; } + getPageSizesList () { const txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm); const pageSizes = [ @@ -43,7 +60,8 @@ export class storeDocumentSettings { ]; return pageSizes; } - @computed get pageSizesIndex () { + + get pageSizesIndex () { let w = this.widthDocument; let h = this.heightDocument; let ind = -1; @@ -61,9 +79,9 @@ export class storeDocumentSettings { // Color Schemes - @observable allSchemes; + allSchemes; - @action addSchemes(arr) { + addSchemes(arr) { this.allSchemes = arr; } diff --git a/apps/documenteditor/mobile/src/store/focusObjects.js b/apps/documenteditor/mobile/src/store/focusObjects.js index e9ff424bc..b9a9f4e16 100644 --- a/apps/documenteditor/mobile/src/store/focusObjects.js +++ b/apps/documenteditor/mobile/src/store/focusObjects.js @@ -1,14 +1,32 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeFocusObjects { - @observable _focusObjects = []; - @observable _headerType = 1; + constructor() { + makeObservable(this, { + _focusObjects: observable, + _headerType: observable, + resetFocusObjects: action, + settings: computed, + headerType: computed, + headerObject: computed, + paragraphObject: computed, + shapeObject: computed, + imageObject: computed, + tableObject: computed, + isTableInStack: computed, + chartObject: computed, + linkObject: computed + }); + } - @action resetFocusObjects (objects) { + _focusObjects = []; + _headerType = 1; + + resetFocusObjects (objects) { this._focusObjects = objects; } - @computed get settings() { + get settings() { const _settings = []; for (let object of this._focusObjects) { let type = object.get_ObjectType(); @@ -34,7 +52,8 @@ export class storeFocusObjects { } return _settings.filter((value, index, self) => self.indexOf(value) === index); } - @computed get headerType() { + + get headerType() { for (let object of this._focusObjects) { const type = object.get_ObjectType(); if (Asc.c_oAscTypeSelectElement.Header === type) { @@ -43,7 +62,8 @@ export class storeFocusObjects { } return this._headerType; } - @computed get headerObject() { + + get headerObject() { const headers = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) { @@ -57,7 +77,8 @@ export class storeFocusObjects { return undefined; } } - @computed get paragraphObject() { + + get paragraphObject() { const paragraphs = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) { @@ -71,7 +92,8 @@ export class storeFocusObjects { return undefined; } } - @computed get shapeObject() { + + get shapeObject() { const shapes = []; for (let object of this._focusObjects) { if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) { @@ -87,7 +109,8 @@ export class storeFocusObjects { return undefined; } } - @computed get imageObject() { + + get imageObject() { const images = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) { @@ -104,7 +127,8 @@ export class storeFocusObjects { return undefined; } } - @computed get tableObject() { + + get tableObject() { const tables = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { @@ -118,7 +142,8 @@ export class storeFocusObjects { return undefined; } } - @computed get isTableInStack() { + + get isTableInStack() { for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) { return true; @@ -126,7 +151,8 @@ export class storeFocusObjects { } return false; } - @computed get chartObject() { + + get chartObject() { const charts = []; for (let object of this._focusObjects) { if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) { @@ -140,7 +166,8 @@ export class storeFocusObjects { return undefined; } } - @computed get linkObject() { + + get linkObject() { const links = []; for (let object of this._focusObjects) { if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { diff --git a/apps/documenteditor/mobile/src/store/palette.js b/apps/documenteditor/mobile/src/store/palette.js index f5e40e59b..55ba20a2d 100644 --- a/apps/documenteditor/mobile/src/store/palette.js +++ b/apps/documenteditor/mobile/src/store/palette.js @@ -1,9 +1,16 @@ -import {action, observable} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storePalette { - @observable customColors = []; + constructor() { + makeObservable(this, { + customColors: observable, + changeCustomColors: action + }); + } + + customColors = []; - @action changeCustomColors (colors) { + changeCustomColors (colors) { this.customColors = colors; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/paragraphSettings.js b/apps/documenteditor/mobile/src/store/paragraphSettings.js index 70c465092..ed5bd2004 100644 --- a/apps/documenteditor/mobile/src/store/paragraphSettings.js +++ b/apps/documenteditor/mobile/src/store/paragraphSettings.js @@ -1,18 +1,33 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeParagraphSettings { - @observable styles = []; - @observable styleThumbSize = null; - @observable styleName = undefined; + constructor() { + makeObservable(this, { + styles: observable, + styleThumbSize: observable, + styleName: observable, + backColor: observable, + initEditorStyles: action, + paragraphStyles: computed, + changeParaStyleName: action, + setBackColor: action, + getBackgroundColor: action + }); + } - @action initEditorStyles (styles) { + styles = []; + styleThumbSize = null; + styleName = undefined; + + initEditorStyles (styles) { this.styles = styles.get_MergedStyles(); this.styleThumbSize = { width : styles.STYLE_THUMBNAIL_WIDTH, height : styles.STYLE_THUMBNAIL_HEIGHT }; } - @computed get paragraphStyles () { + + get paragraphStyles () { let _styles = []; for (let style of this.styles) { _styles.push({ @@ -22,14 +37,17 @@ export class storeParagraphSettings { } return _styles; } - @action changeParaStyleName (name) { + + changeParaStyleName (name) { this.styleName = name; } - @observable backColor = undefined; + backColor = undefined; + setBackColor (color) { this.backColor = color; } + getBackgroundColor (paragraphObject) { const shade = paragraphObject.get_Shade(); let backColor = 'transparent'; diff --git a/apps/documenteditor/mobile/src/store/review.js b/apps/documenteditor/mobile/src/store/review.js index 9c5450477..61c39e384 100644 --- a/apps/documenteditor/mobile/src/store/review.js +++ b/apps/documenteditor/mobile/src/store/review.js @@ -1,15 +1,24 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, makeObservable} from 'mobx'; export class storeReview { - @observable displayMode = 'markup'; + constructor() { + makeObservable(this, { + displayMode: observable, + dataChanges: observable, + changeDisplayMode: action, + changeArrReview: action + }); + } - @action changeDisplayMode (mode) { + displayMode = 'markup'; + + changeDisplayMode (mode) { this.displayMode = mode; } - @observable dataChanges = []; + dataChanges = []; - @action changeArrReview (data) { + changeArrReview (data) { this.dataChanges = data && data.length > 0 ? data : []; } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/shapeSettings.js b/apps/documenteditor/mobile/src/store/shapeSettings.js index f4e752ed0..50e6c68e3 100644 --- a/apps/documenteditor/mobile/src/store/shapeSettings.js +++ b/apps/documenteditor/mobile/src/store/shapeSettings.js @@ -1,6 +1,17 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeShapeSettings { + constructor() { + makeObservable(this, { + fillColor: observable, + borderColorView: observable, + setFillColor: action, + getFillColor: action, + setBorderColor: action, + initBorderColorView: action + }); + } + getStyleGroups () { const styles = [ { @@ -136,6 +147,7 @@ export class storeShapeSettings { } return groups; } + wrapTypesTransform () { const map = [ { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline }, @@ -191,10 +203,13 @@ export class storeShapeSettings { } // Fill Color - @observable fillColor = undefined; + + fillColor = undefined; + setFillColor (color) { this.fillColor = color; } + getFillColor (shapeObject) { let fill = shapeObject.get_ShapeProperties().get_fill(); const fillType = fill.get_type(); @@ -215,10 +230,13 @@ export class storeShapeSettings { } // Border size and color - @observable borderColorView; + + borderColorView; + setBorderColor (color) { this.borderColorView = color; } + initBorderColorView (shapeObject) { const stroke = shapeObject.get_ShapeProperties().get_stroke(); let color = 'transparent'; @@ -236,6 +254,7 @@ export class storeShapeSettings { this.borderColorView = color; return color; } + borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/tableSettings.js b/apps/documenteditor/mobile/src/store/tableSettings.js index b40d71bc0..892e307a2 100644 --- a/apps/documenteditor/mobile/src/store/tableSettings.js +++ b/apps/documenteditor/mobile/src/store/tableSettings.js @@ -3,14 +3,25 @@ import {f7} from 'framework7-react'; export class storeTableSettings { constructor() { - makeObservable(this) + makeObservable(this, { + _templates: observable, + cellBorders: observable, + cellBorderWidth: observable, + cellBorderColor: observable, + initTableTemplates: action, + styles: computed, + updateCellBorderWidth: action, + updateCellBorderColor: action, + }); } - @observable _templates = []; - @action initTableTemplates (templates) { + _templates = []; + + initTableTemplates (templates) { this._templates = templates; } - @computed get styles () { + + get styles () { let styles = []; for (let template of this._templates) { styles.push({ @@ -69,9 +80,10 @@ export class storeTableSettings { } // Border style - @observable cellBorders; - @observable cellBorderWidth = 0.5; - @observable cellBorderColor = '000000'; + + cellBorders; + cellBorderWidth = 0.5; + cellBorderColor = '000000'; borderSizeTransform () { const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6]; diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js index 48d42403b..9c794163c 100644 --- a/apps/documenteditor/mobile/src/store/textSettings.js +++ b/apps/documenteditor/mobile/src/store/textSettings.js @@ -1,25 +1,64 @@ -import {action, observable, computed} from 'mobx'; +import {action, observable, computed, makeObservable} from 'mobx'; export class storeTextSettings { - @observable fontsArray = []; - @observable fontName = ''; - @observable fontSize = undefined; - @observable isBold = false; - @observable isItalic = false; - @observable isUnderline = false; - @observable isStrikethrough = false; - @observable typeBaseline = undefined; - @observable listType = undefined; - @observable typeBullets = undefined; - @observable typeNumbers = undefined; - @observable paragraphAlign = undefined; - @observable textColor = undefined; - @observable customTextColors = []; - @observable lineSpacing = undefined; - @observable backgroundColor = undefined; + constructor() { + makeObservable(this, { + fontsArray: observable, + fontName: observable, + fontSize: observable, + isBold: observable, + isItalic: observable, + isUnderline: observable, + isStrikethrough: observable, + typeBaseline: observable, + listType: observable, + typeBullets: observable, + typeNumbers: observable, + paragraphAlign: observable, + textColor: observable, + customTextColors: observable, + lineSpacing: observable, + backgroundColor: observable, + initEditorFonts: action, + resetFontName: action, + resetFontSize: action, + resetIsBold: action, + resetIsItalic: action, + resetIsUnderline: action, + resetIsStrikeout: action, + resetTypeBaseline: action, + isSuperscript: computed, + isSubscript: computed, + resetListType: action, + resetBullets: action, + resetNumbers: action, + resetParagraphAlign: action, + resetTextColor: action, + changeCustomTextColors: action, + resetLineSpacing: action, + resetBackgroundColor: action + }); + } + + fontsArray = []; + fontName = ''; + fontSize = undefined; + isBold = false; + isItalic = false; + isUnderline = false; + isStrikethrough = false; + typeBaseline = undefined; + listType = undefined; + typeBullets = undefined; + typeNumbers = undefined; + paragraphAlign = undefined; + textColor = undefined; + customTextColors = []; + lineSpacing = undefined; + backgroundColor = undefined; - @action initEditorFonts (fonts, select) { + initEditorFonts (fonts, select) { let array = []; for (let font of fonts) { let fontId = font.asc_getFontId(); @@ -33,49 +72,49 @@ export class storeTextSettings { } this.fontsArray = array; } - @action resetFontName (font) { + resetFontName (font) { let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName(); this.fontName = name; } - @action resetFontSize (size) { + resetFontSize (size) { this.fontSize = size; } - @action resetIsBold (isBold) { + resetIsBold (isBold) { this.isBold = isBold; } - @action resetIsItalic (isItalic) { + resetIsItalic (isItalic) { this.isItalic = isItalic; } - @action resetIsUnderline (isUnderline) { + resetIsUnderline (isUnderline) { this.isUnderline = isUnderline; } - @action resetIsStrikeout (isStrikethrough) { + resetIsStrikeout (isStrikethrough) { this.isStrikethrough = isStrikethrough; } // vertical align - @action resetTypeBaseline (typeBaseline) { + resetTypeBaseline (typeBaseline) { this.typeBaseline = typeBaseline; } - @computed get isSuperscript() { + get isSuperscript() { return (this.typeBaseline === 1); } - @computed get isSubscript() { + get isSubscript() { return (this.typeBaseline === 2); } // bullets - @action resetListType (type) { + resetListType (type) { this.listType = type; } - @action resetBullets (type) { + resetBullets (type) { this.typeBullets = type; } - @action resetNumbers (type) { + resetNumbers (type) { this.typeNumbers = type; } - @action resetParagraphAlign (align) { + resetParagraphAlign (align) { let value; switch (align) { case 0: @@ -94,7 +133,7 @@ export class storeTextSettings { this.paragraphAlign = value; } - @action resetTextColor (color) { + resetTextColor (color) { let value; if (color) { if (color.get_auto()) { @@ -113,16 +152,16 @@ export class storeTextSettings { this.textColor = value; } - @action changeCustomTextColors (colors) { + changeCustomTextColors (colors) { this.customTextColors = colors; } - @action resetLineSpacing (vc) { + resetLineSpacing (vc) { let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line(); this.lineSpacing = line; } - @action resetBackgroundColor (color) { + resetBackgroundColor (color) { let value; if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) { value = {