Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
SergeyEzhin 2021-03-16 13:49:16 +03:00
parent 32f5bd693e
commit 2ab1d32e97
11 changed files with 302 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
apps/documenteditor/mobile/src/store/applicationSettings.js
View file

@ -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
})
}

44
apps/documenteditor/mobile/src/store/chartSettings.js
View file

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

26
apps/documenteditor/mobile/src/store/documentInfo.js
View file

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

36
apps/documenteditor/mobile/src/store/documentSettings.js
View file

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

55
apps/documenteditor/mobile/src/store/focusObjects.js
View file

@ -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) {

13
apps/documenteditor/mobile/src/store/palette.js
View file

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

34
apps/documenteditor/mobile/src/store/paragraphSettings.js
View file

@ -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';

19
apps/documenteditor/mobile/src/store/review.js
View file

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

25
apps/documenteditor/mobile/src/store/shapeSettings.js
View file

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

26
apps/documenteditor/mobile/src/store/tableSettings.js
View file

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

109
apps/documenteditor/mobile/src/store/textSettings.js
View file

@ -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 = {