[DE mobile] Corrected stores according to mobx v. 6

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
+            unitMeasurement: observable, 
-            , isSpellChecking: observable
+            isSpellChecking: observable, 
-            , isNonprintingCharacters: observable
+            isNonprintingCharacters: observable, 
-            , isHiddenTableBorders: observable
+            isHiddenTableBorders: observable, 
-            , isComments: observable
+            isComments: observable, 
-            , isResolvedComments: observable
+            isResolvedComments: observable, 
-            , macrosMode: observable
+            macrosMode: observable, 
-            , changeSpellCheck: action
+            changeSpellCheck: action, 
-            , changeUnitMeasurement: action
+            changeUnitMeasurement: action, 
-            , changeNoCharacters: action
+            changeNoCharacters: action, 
-            , changeShowTableEmptyLine: action
+            changeShowTableEmptyLine: action, 
-            , changeDisplayComments: action
+            changeDisplayComments: action, 
-            , changeDisplayResolved: action
+            changeDisplayResolved: action, 
-            , changeMacrosSettings: action
+            changeMacrosSettings: action
         })
     }
 

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];
 

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;
   }
 }

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;
+    constructor() {
-    @action resetPortrait (isPortrait) {
+        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;
+    widthDocument;
-    @action changeDocSize (width, height) {
+    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;
     }
 

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 = [];
+    constructor() {
-    @observable _headerType = 1;
+        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) {

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
+        });
+    }
     
-    @action changeCustomColors (colors) {
+    customColors = [];
+
+    changeCustomColors (colors) {
         this.customColors = colors;
     }
 }

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 = [];
+    constructor() {
-    @observable styleThumbSize = null;
+        makeObservable(this, {
-    @observable styleName = undefined;
+            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';

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 : [];
     }
 }

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];
 

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 = [];
+    _templates = [];
-    @action initTableTemplates (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;
+    cellBorders;
-    @observable cellBorderColor = '000000';
+    cellBorderWidth = 0.5;
+    cellBorderColor = '000000';
 
     borderSizeTransform () {
         const _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];

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 = [];
+    constructor() {
-    @observable fontName = '';
+        makeObservable(this, {
-    @observable fontSize = undefined;
+            fontsArray: observable,
-    @observable isBold = false;
+            fontName: observable,
-    @observable isItalic = false;
+            fontSize: observable,
-    @observable isUnderline = false;
+            isBold: observable,
-    @observable isStrikethrough = false;
+            isItalic: observable,
-    @observable typeBaseline = undefined;
+            isUnderline: observable,
-    @observable listType = undefined;
+            isStrikethrough: observable,
-    @observable typeBullets = undefined;
+            typeBaseline: observable,
-    @observable typeNumbers = undefined;
+            listType: observable,
-    @observable paragraphAlign = undefined;
+            typeBullets: observable,
-    @observable textColor = undefined;
+            typeNumbers: observable,
-    @observable customTextColors = [];
+            paragraphAlign: observable,
-    @observable lineSpacing = undefined;
+            textColor: observable,
-    @observable backgroundColor = undefined;
+            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 = {