Merge pull request #1007 from ONLYOFFICE/fix/fix-bugs-on-mobiles

Fix/fix bugs on mobiles

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -18,6 +18,7 @@ import LongActionsController from "./LongActions";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
 
 @inject(
+    "users",
     "storeAppOptions",
     "storeDocumentSettings",
     "storeFocusObjects",
@@ -27,7 +28,8 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
     "storeDocumentInfo",
     "storeChartSettings",
     "storeApplicationSettings",
-    "storeLinkSettings"
+    "storeLinkSettings",
+    "storeToolbarSettings"
     )
 class MainController extends Component {
     constructor(props) {
@@ -620,6 +622,18 @@ class MainController extends Component {
             onAdvancedOptions(type, advOptions, mode, formatOptions, _t, this._isDocReady, this.props.storeAppOptions.canRequestClose, this.isDRM);
             if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
         });
+
+        // Toolbar settings
+
+        const storeToolbarSettings = this.props.storeToolbarSettings;
+        this.api.asc_registerCallback('asc_onCanUndo', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanUndo(can);
+        });
+        this.api.asc_registerCallback('asc_onCanRedo', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanRedo(can);
+        });
     }
 
     onProcessSaveResult (data) {

apps/documenteditor/mobile/src/controller/Toolbar.jsx

@@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(observer(props => {
+const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
@@ -15,25 +15,20 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
     const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
     const readerMode = appOptions.readerMode;
 
+    const objectLocked = props.storeFocusObjects.objectLocked;
+
+    const storeToolbarSettings = props.storeToolbarSettings;
+    const isCanUndo = storeToolbarSettings.isCanUndo;
+    const isCanRedo = storeToolbarSettings.isCanRedo;
+
     const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
 
     useEffect(() => {
-        const onDocumentReady = () => {
+        Common.Notifications.on('setdoctitle', setDocTitle);
-            const api = Common.EditorApi.get();
+        Common.Gateway.on('init', loadConfig);
-            api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
+        Common.Notifications.on('toolbar:activatecontrols', activateControls);
-            api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
+        Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
-            api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
+        Common.Notifications.on('goback', goBack);
-            Common.Notifications.on('toolbar:activatecontrols', activateControls);
-            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
-            Common.Notifications.on('goback', goBack);
-        };
-        if ( !Common.EditorApi ) {
-            Common.Notifications.on('document:ready', onDocumentReady);
-            Common.Notifications.on('setdoctitle', setDocTitle);
-            Common.Gateway.on('init', loadConfig);
-        } else {
-            onDocumentReady();
-        }
 
         if (isDisconnected) {
             f7.popover.close();
@@ -42,16 +37,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
         }
 
         return () => {
-            Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('setdoctitle', setDocTitle);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.off('goback', goBack);
-
-            const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
-            api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
-            api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
         }
     });
 
@@ -106,17 +95,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
         }
     }
 
-    // Undo and Redo
-    const [isCanUndo, setCanUndo] = useState(true);
-    const [isCanRedo, setCanRedo] = useState(true);
-    const onApiCanUndo = (can) => {
-        if (isDisconnected) return;
-        setCanUndo(can);
-    };
-    const onApiCanRedo = (can) => {
-        if (isDisconnected) return;
-        setCanRedo(can);
-    };
     const onUndo = () => {
         const api = Common.EditorApi.get();
         if (api) {
@@ -130,30 +108,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
         }
     }
 
-    const [isObjectLocked, setObjectLocked] = useState(false);
-    const onApiFocusObject = (objects) => {
-        if (isDisconnected) return;
-
-        if (objects.length > 0) {
-            const getTopObject = (objects) => {
-                const arrObj = objects.reverse();
-                let obj;
-                for (let i=0; i<arrObj.length; i++) {
-                    if (arrObj[i].get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck) {
-                        obj = arrObj[i];
-                        break;
-                    }
-                }
-                return obj;
-            };
-            const topObject = getTopObject(objects);
-            const topObjectValue = topObject.get_ObjectValue();
-            const objectLocked = (typeof topObjectValue.get_Locked === 'function') ? topObjectValue.get_Locked() : false;
-
-            setObjectLocked(objectLocked);
-        }
-    };
-
     const [disabledEditControls, setDisabledEditControls] = useState(false);
     const [disabledSettings, setDisabledSettings] = useState(false);
     const deactivateEditControls = (enableDownload) => {
@@ -184,7 +138,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(obse
                      isCanRedo={isCanRedo}
                      onUndo={onUndo}
                      onRedo={onRedo}
-                     isObjectLocked={isObjectLocked}
+                     isObjectLocked={objectLocked}
                      stateDisplayMode={stateDisplayMode}
                      disabledControls={disabledControls}
                      disabledEditControls={disabledEditControls}

apps/documenteditor/mobile/src/store/focusObjects.js

@@ -16,7 +16,8 @@ export class storeFocusObjects {
             tableObject: computed,
             isTableInStack: computed,
             chartObject: computed,
-            linkObject: computed
+            linkObject: computed,
+            objectLocked: computed
         });
     }
 
@@ -77,4 +78,25 @@ export class storeFocusObjects {
     get linkObject() {
         return !!this.intf ? this.intf.getLinkObject() : null;
     }
+
+    get objectLocked() {
+        if (this._focusObjects && this._focusObjects.length > 0) {
+            const getTopObject = (objects) => {
+                const arrObj = objects;
+                let obj;
+                for (let i=arrObj.length-1; i>=0; i--) {
+                    if (arrObj[i].get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck) {
+                        obj = arrObj[i];
+                        break;
+                    }
+                }
+                return obj;
+            };
+            const topObject = getTopObject(this._focusObjects);
+            const topObjectValue = topObject.get_ObjectValue();
+            const objectLocked = (typeof topObjectValue.get_Locked === 'function') ? topObjectValue.get_Locked() : false;
+
+            return objectLocked;
+        }
+    }
 }

apps/documenteditor/mobile/src/store/mainStore.js

@@ -15,6 +15,7 @@ import {storeAppOptions} from "./appOptions";
 import {storePalette} from "./palette";
 import {storeReview} from "./review";
 import {storeComments} from "../../../../common/mobile/lib/store/comments";
+import {storeToolbarSettings} from "./toolbar";
 
 export const stores = {
     storeAppOptions: new storeAppOptions(),
@@ -32,6 +33,7 @@ export const stores = {
     storeApplicationSettings: new storeApplicationSettings(),
     storePalette: new storePalette(),
     storeReview: new storeReview(),
-    storeComments: new storeComments()
+    storeComments: new storeComments(),
+    storeToolbarSettings: new storeToolbarSettings()
 };
 

apps/documenteditor/mobile/src/store/toolbar.js

@@ -0,0 +1,24 @@
+import {action, observable, makeObservable} from 'mobx';
+
+export class storeToolbarSettings {
+    constructor() {
+        makeObservable(this, {
+            isCanUndo: observable,
+            setCanUndo: action,
+            isCanRedo: observable,
+            setCanRedo: action
+        })
+    }
+
+    isCanUndo = false;
+
+    setCanUndo(can) {
+        this.isCanUndo = can;
+    }
+
+    isCanRedo = false;
+
+    setCanRedo(can) {
+        this.isCanRedo = can;
+    }
+}

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -17,6 +17,7 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
 import { Device } from '../../../../common/mobile/utils/device';
 
 @inject(
+    "users",
     "storeFocusObjects",
     "storeAppOptions",
     "storePresentationInfo",
@@ -26,7 +27,8 @@ import { Device } from '../../../../common/mobile/utils/device';
     "storeTableSettings",
     "storeChartSettings",
     "storeLinkSettings",
-    "storeApplicationSettings"
+    "storeApplicationSettings",
+    "storeToolbarSettings"
     )
 class MainController extends Component {
     constructor (props) {
@@ -388,6 +390,21 @@ class MainController extends Component {
         // Chart settings
 
         EditorUIController.updateChartStyles && EditorUIController.updateChartStyles(this.props.storeChartSettings, this.props.storeFocusObjects);
+
+        // Toolbar settings
+
+        const storeToolbarSettings = this.props.storeToolbarSettings;
+        this.api.asc_registerCallback('asc_onCanUndo', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanUndo(can);
+        });
+        this.api.asc_registerCallback('asc_onCanRedo', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanRedo(can);
+        });
+        this.api.asc_registerCallback('asc_onCountPages', (count) => {
+            storeToolbarSettings.setCountPages(count);
+        });
     }
 
     onDocumentContentReady () {

apps/presentationeditor/mobile/src/controller/Toolbar.jsx

@@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
+const ToolbarController = inject('storeAppOptions', 'users', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
@@ -14,24 +14,19 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
 
     const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
 
+    const isEditLocked = props.storeFocusObjects.isEditLocked;
+
+    const storeToolbarSettings = props.storeToolbarSettings;
+    const isCanUndo = storeToolbarSettings.isCanUndo;
+    const isCanRedo = storeToolbarSettings.isCanRedo;
+    const disabledPreview = storeToolbarSettings.countPages <= 0;
+
     useEffect(() => {
-        const onDocumentReady = () => {
+        Common.Notifications.on('setdoctitle', setDocTitle);
-            const api = Common.EditorApi.get();
+        Common.Gateway.on('init', loadConfig);
-            api.asc_registerCallback('asc_onCanUndo', onApiCanUndo);
+        Common.Notifications.on('toolbar:activatecontrols', activateControls);
-            api.asc_registerCallback('asc_onCanRedo', onApiCanRedo);
+        Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
-            api.asc_registerCallback('asc_onFocusObject', onApiFocusObject);
+        Common.Notifications.on('goback', goBack);
-            api.asc_registerCallback('asc_onCountPages', onApiCountPages);
-            Common.Notifications.on('toolbar:activatecontrols', activateControls);
-            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
-            Common.Notifications.on('goback', goBack);
-        };
-        if ( !Common.EditorApi ) {
-            Common.Notifications.on('document:ready', onDocumentReady);
-            Common.Notifications.on('setdoctitle', setDocTitle);
-            Common.Gateway.on('init', loadConfig);
-        } else {
-            onDocumentReady();
-        }
 
         if (isDisconnected) {
             f7.popover.close();
@@ -40,17 +35,10 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
         }
 
         return () => {
-            Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('setdoctitle', setDocTitle);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.off('goback', goBack);
-
-            const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onCanUndo', onApiCanUndo);
-            api.asc_unregisterCallback('asc_onCanRedo', onApiCanRedo);
-            api.asc_unregisterCallback('asc_onFocusObject', onApiFocusObject);
-            api.asc_unregisterCallback('asc_onCountPages', onApiCountPages);
         }
     });
 
@@ -107,17 +95,6 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
         //}
     }
 
-    // Undo and Redo
-    const [isCanUndo, setCanUndo] = useState(true);
-    const [isCanRedo, setCanRedo] = useState(true);
-    const onApiCanUndo = (can) => {
-        if (isDisconnected) return;
-        setCanUndo(can);
-    };
-    const onApiCanRedo = (can) => {
-        if (isDisconnected) return;
-        setCanRedo(can);
-    };
     const onUndo = () => {
         const api = Common.EditorApi.get();
         if (api) {
@@ -131,36 +108,6 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
         }
     }
 
-    const [disabledEdit, setDisabledEdit] = useState(false);
-    const onApiFocusObject = (objects) => {
-        if (isDisconnected) return;
-
-        if (objects.length > 0) {
-            let slide_deleted = false,
-                slide_lock = false,
-                no_object = true,
-                objectLocked = false;
-            objects.forEach((object) => {
-                const type = object.get_ObjectType();
-                const objectValue = object.get_ObjectValue();
-                if (type === Asc.c_oAscTypeSelectElement.Slide) {
-                    slide_deleted = objectValue.get_LockDelete();
-                    slide_lock = objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming();
-                } else if (objectValue && typeof objectValue.get_Locked === 'function') {
-                    no_object = false;
-                    objectLocked = objectLocked || objectValue.get_Locked();
-                }
-            });
-
-            setDisabledEdit(slide_deleted || (objectLocked || no_object) && slide_lock);
-        }
-    };
-
-    const [disabledPreview, setDisabledPreview] = useState(false);
-    const onApiCountPages = (count) => {
-        setDisabledPreview(count <= 0);
-    };
-
     const [disabledEditControls, setDisabledEditControls] = useState(false);
     const [disabledSettings, setDisabledSettings] = useState(false);
     const deactivateEditControls = (enableDownload) => {
@@ -192,7 +139,7 @@ const ToolbarController = inject('storeAppOptions', 'users')(observer(props => {
                      isCanRedo={isCanRedo}
                      onUndo={onUndo}
                      onRedo={onRedo}
-                     disabledEdit={disabledEdit}
+                     disabledEdit={isEditLocked}
                      disabledPreview={disabledPreview}
                      disabledControls={disabledControls}
                      disabledEditControls={disabledEditControls}

apps/presentationeditor/mobile/src/store/focusObjects.js

@@ -14,7 +14,8 @@ export class storeFocusObjects {
             tableObject: computed,
             isTableInStack: computed,
             chartObject: computed,
-            linkObject: computed
+            linkObject: computed,
+            isEditLocked: computed
         });
     }
 
@@ -74,4 +75,26 @@ export class storeFocusObjects {
     get linkObject() {
         return !!this.intf ? this.intf.getLinkObject() : null;
     }
+
+    get isEditLocked() {
+        if (this._focusObjects.length > 0) {
+            let slide_deleted = false,
+                slide_lock = false,
+                no_object = true,
+                objectLocked = false;
+            this._focusObjects.forEach((object) => {
+                const type = object.get_ObjectType();
+                const objectValue = object.get_ObjectValue();
+                if (type === Asc.c_oAscTypeSelectElement.Slide) {
+                    slide_deleted = objectValue.get_LockDelete();
+                    slide_lock = objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming();
+                } else if (objectValue && typeof objectValue.get_Locked === 'function') {
+                    no_object = false;
+                    objectLocked = objectLocked || objectValue.get_Locked();
+                }
+            });
+
+            return (slide_deleted || (objectLocked || no_object) && slide_lock);
+        }
+    }
 }

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -17,6 +17,7 @@ import { storeLinkSettings } from "./linkSettings";
 // import {storeShapeSettings} from "./shapeSettings";
 // import {storeImageSettings} from "./imageSettings";
 import {storeComments} from "../../../../common/mobile/lib/store/comments";
+import {storeToolbarSettings} from "./toolbar";
 
 export const stores = {
     storeAppOptions: new storeAppOptions(),
@@ -37,6 +38,7 @@ export const stores = {
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),
     // storeChartSettings: new storeChartSettings(),
-    storeComments: new storeComments()
+    storeComments: new storeComments(),
+    storeToolbarSettings: new storeToolbarSettings()
 };
 

apps/presentationeditor/mobile/src/store/toolbar.js

@@ -0,0 +1,32 @@
+import {action, observable, makeObservable} from 'mobx';
+
+export class storeToolbarSettings {
+    constructor() {
+        makeObservable(this, {
+            isCanUndo: observable,
+            setCanUndo: action,
+            isCanRedo: observable,
+            setCanRedo: action,
+            countPages: observable,
+            setCountPages: action
+        })
+    }
+
+    isCanUndo = false;
+
+    setCanUndo(can) {
+        this.isCanUndo = can;
+    }
+
+    isCanRedo = false;
+
+    setCanRedo(can) {
+        this.isCanRedo = can;
+    }
+
+    countPages = 0;
+
+    setCountPages(count) {
+        this.countPages = count;
+    }
+}

apps/spreadsheeteditor/mobile/src/controller/Main.jsx

@@ -18,8 +18,10 @@ import ErrorController from "./Error";
 import app from "../page/app";
 import About from "../../../../common/mobile/lib/view/About";
 import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
+import { StatusbarController } from "./Statusbar";
 
 @inject(
+    "users",
     "storeAppOptions",
     "storeFocusObjects",
     "storeCellSettings",
@@ -27,7 +29,8 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
     "storeChartSettings",
     "storeSpreadsheetSettings",
     "storeSpreadsheetInfo",
-    "storeApplicationSettings"
+    "storeApplicationSettings",
+    "storeToolbarSettings"
     )
 class MainController extends Component {
     constructor(props) {
@@ -359,6 +362,18 @@ class MainController extends Component {
             if(type == Asc.c_oAscAdvancedOptionsID.DRM) this.isDRM = true;
         });
 
+        // Toolbar settings
+
+        const storeToolbarSettings = this.props.storeToolbarSettings;
+        this.api.asc_registerCallback('asc_onCanUndoChanged', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanUndo(can);
+        });
+        this.api.asc_registerCallback('asc_onCanRedoChanged', (can) => {
+            if (this.props.users.isDisconnected) return;
+            storeToolbarSettings.setCanRedo(can);
+        });
+
     }
 
     _onLongActionEnd(type, id) {
@@ -799,6 +814,7 @@ class MainController extends Component {
             <Fragment>
                 <LongActionsController />
                 <ErrorController LoadingDocument={this.LoadingDocument}/>
+                <StatusbarController />
                 <CollaborationController />
                 <CommentsController />
                 <AddCommentController />

apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx

@@ -1,85 +1,34 @@
 
 import React, { Fragment, useEffect, useState } from 'react';
 import {StatusbarView} from '../view/Statusbar';
-import { inject } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 
-const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
+const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props => {
-    const {sheets, storeAppOptions, users} = props;
+    const sheets = props.sheets;
-    const {t} = useTranslation();
+    const storeFocusObjects = props.storeFocusObjects;
-    const _t = t('Statusbar', {returnObjects: true});
-
-    let isEdit = storeAppOptions.isEdit;
-    let isDisconnected = users.isDisconnected;
 
     useEffect(() => {
-        const onDocumentReady = () => {
+        Common.Notifications.on('engineCreated', api => {
-            const api = Common.EditorApi.get();
+            api.asc_registerCallback('asc_onWorkbookLocked', (locked) => {
-            // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
+                sheets.setWorkbookLocked(locked);
-            api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
+                storeFocusObjects.setIsLocked(api.asc_getCellInfo());
-            api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
+            });
+            api.asc_registerCallback('asc_onWorksheetLocked', (index, locked) => {
+                sheets.setWorksheetLocked(index, locked);
+                storeFocusObjects.setIsLocked(api.asc_getCellInfo());
+            });
             api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
-            api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
             api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
-        };
+            api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
-        if ( !Common.EditorApi ) {
+            // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
-            Common.Notifications.on('document:ready', onDocumentReady);
+        });
-            Common.Notifications.on('document:ready', onApiSheetsChanged);
+        Common.Notifications.on('document:ready', onApiSheetsChanged);
-        } else {
+    });
-            onDocumentReady();
-        }
-
-        const on_main_view_click = e => {
-            if(!e.target.closest('.tab.active')) {
-                f7.popover.close('.document-menu.modal-in', false);
-            }
-        };
-
-        $$('.view-main').on('click', on_main_view_click);
-
-        return () => {
-            Common.Notifications.off('document:ready', onDocumentReady);
-            Common.Notifications.off('document:ready', onApiSheetsChanged);
-
-            const api = Common.EditorApi.get();
-            // api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
-            api.asc_unregisterCallback('asc_onWorkbookLocked', onWorkbookLocked);
-            api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
-            api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged);
-            api.asc_unregisterCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
-            api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
-
-            $$('.view-main').off('click', on_main_view_click);
-        };
-    }, []);
-
-    const onApiActiveSheetChanged = (index) => {
-        if (index < sheets.sheets.length) {
-            sheets.setActiveWorksheet(index);
-            Common.Notifications.trigger('sheet:active', index);
-        }
-    }
-
-    const onApiHideTabContextMenu = () => {
-        f7.popover.close('.document-menu.modal-in', false);
-    }
-
-    const onWorkbookLocked = locked => {
-        locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
-    };
-
-    const onWorksheetLocked = (index, locked) => {
-        // let model = sheets.sheets.find(sheet => sheet.index === index);
-        let model = sheets.at(index);
-        if(model && model.locked != locked)
-            model.locked = locked;
-    };
 
     const onApiSheetsChanged = () => {
-        // console.log('on api sheets changed');
-
         const api = Common.EditorApi.get();
         const sheets_count = api.asc_getWorksheetsCount();
         const active_index = api.asc_getActiveWorksheetIndex();
@@ -100,9 +49,42 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         }
 
         sheets.resetSheets(items);
-        // updateTabsColors();
     };
 
+    const onApiActiveSheetChanged = (index) => {
+        if (index < sheets.sheets.length) {
+            sheets.setActiveWorksheet(index);
+            Common.Notifications.trigger('sheet:active', index);
+        }
+    };
+
+    const onApiHideTabContextMenu = () => {
+        f7.popover.close('.document-menu.modal-in', false);
+    }
+
+    return null;
+}));
+
+const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => {
+    const {sheets, storeAppOptions, users} = props;
+    const {t} = useTranslation();
+    const _t = t('Statusbar', {returnObjects: true});
+
+    const isEdit = storeAppOptions.isEdit;
+    const isDisconnected = users.isDisconnected;
+
+    useEffect(() => {
+        const on_main_view_click = e => {
+            if(!e.target.closest('.tab.active')) {
+                f7.popover.close('.document-menu.modal-in', false);
+            }
+        };
+        $$('.view-main').on('click', on_main_view_click);
+        return () => {
+            $$('.view-main').off('click', on_main_view_click);
+        };
+    }, []);
+
     // const loadTabColor = sheetindex => {
     //     const api = Common.EditorApi.get();
     //     let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
@@ -178,15 +160,12 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     const onAddTabClicked = () => {
         const api = Common.EditorApi.get();
         api.asc_closeCellEditor();
-
-        createSheetName();
         api.asc_addWorksheet(createSheetName());
     };
 
     const onTabClick = (i, target) => {
         const api = Common.EditorApi.get();
         const model = sheets.at(i);
-        // console.log(model);
 
         let opened = $$('.document-menu.modal-in').length;
         let index = model.index;
@@ -204,7 +183,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         else {
             f7.popover.close('#idx-tab-context-menu-popover', false);
             onTabClicked(i);
-            // Common.Notifications.trigger('sheet:active', index);
         }
     };
 
@@ -314,7 +292,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
         } else {
             f7.popover.close('#idx-hidden-sheets-popover');
             api['asc_showWorksheet'](index);
-            // loadTabColor(index);
         }
     };
 
@@ -348,8 +325,17 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
     };
 
     return (
-        <StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} />
+        <StatusbarView isEdit={isEdit}
+                       allSheets={sheets.sheets}
+                       activeSheet={sheets.activeWorksheet}
+                       hiddenSheets={sheets.hiddenWorksheets()}
+                       isWorkbookLocked={sheets.isWorkbookLocked}
+                       onTabClick={onTabClick}
+                       onTabClicked={onTabClicked}
+                       onAddTabClicked={onAddTabClicked}
+                       onTabMenu={onTabMenu}
+        />
     )
-});
+}));
 
-export default Statusbar;
+export {Statusbar, StatusbarController};

apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx

@@ -4,7 +4,7 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import ToolbarView from "../view/Toolbar";
 
-const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects')(observer(props => {
+const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetInfo', 'storeFocusObjects', 'storeToolbarSettings')(observer(props => {
     const {t} = useTranslation();
     const _t = t("Toolbar", { returnObjects: true });
 
@@ -16,26 +16,17 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
 
     const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights;
 
-    useEffect(() => {
+    const storeToolbarSettings = props.storeToolbarSettings;
-        const onDocumentReady = () => {
+    const isCanUndo = storeToolbarSettings.isCanUndo;
-            const api = Common.EditorApi.get();
+    const isCanRedo = storeToolbarSettings.isCanRedo;
-            api.asc_registerCallback('asc_onCanUndoChanged', onApiCanUndo);
-            api.asc_registerCallback('asc_onCanRedoChanged', onApiCanRedo);
-            api.asc_registerCallback('asc_onWorkbookLocked', onApiLocked);
-            api.asc_registerCallback('asc_onWorksheetLocked', onApiLocked);
-            api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
 
-            Common.Notifications.on('toolbar:activatecontrols', activateControls);
+    useEffect(() => {
-            Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
+        Common.Gateway.on('init', loadConfig);
-            Common.Notifications.on('goback', goBack);
+
-            Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
+        Common.Notifications.on('toolbar:activatecontrols', activateControls);
-        };
+        Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls);
-        if ( !Common.EditorApi ) {
+        Common.Notifications.on('goback', goBack);
-            Common.Notifications.on('document:ready', onDocumentReady);
+        Common.Notifications.on('sheet:active', onApiActiveSheetChanged);
-            Common.Gateway.on('init', loadConfig);
-        } else {
-            onDocumentReady();
-        }
 
         if (isDisconnected) {
             f7.popover.close();
@@ -44,18 +35,10 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
         }
 
         return () => {
-            Common.Notifications.off('document:ready', onDocumentReady);
             Common.Notifications.off('toolbar:activatecontrols', activateControls);
             Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls);
             Common.Notifications.off('goback', goBack);
             Common.Notifications.off('sheet:active', onApiActiveSheetChanged);
-
-            const api = Common.EditorApi.get();
-            api.asc_unregisterCallback('asc_onCanUndoChanged', onApiCanUndo);
-            api.asc_unregisterCallback('asc_onCanRedoChanged', onApiCanRedo);
-            api.asc_unregisterCallback('asc_onWorkbookLocked', onApiLocked);
-            api.asc_unregisterCallback('asc_onWorksheetLocked', onApiLocked);
-            api.asc_unregisterCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged);
         }
     });
 
@@ -107,17 +90,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
         //}
     }
 
-    // Undo and Redo
-    const [isCanUndo, setCanUndo] = useState(false);
-    const [isCanRedo, setCanRedo] = useState(false);
-    const onApiCanUndo = (can) => {
-        if (isDisconnected) return;
-        setCanUndo(can);
-    };
-    const onApiCanRedo = (can) => {
-        if (isDisconnected) return;
-        setCanRedo(can);
-    };
     const onUndo = () => {
         const api = Common.EditorApi.get();
         if (api) {
@@ -132,10 +104,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeSpreadsheetIn
     }
 
     const [disabledEditControls, setDisabledEditControls] = useState(false);
-    const onApiLocked = () => {
-        if (isDisconnected) return;
-        props.storeFocusObjects.setIsLocked(Common.EditorApi.get().asc_getCellInfo());
-    };
 
     const onApiActiveSheetChanged = (index) => {
         Common.Notifications.trigger('comments:filterchange', ['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)], false );

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -6,7 +6,7 @@ import { Device } from '../../../../common/mobile/utils/device';
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
-import Statusbar from '../controller/Statusbar';
+import { Statusbar } from '../controller/Statusbar';
 import FilterOptionsController from '../controller/FilterOptions.jsx'
 import AddOptions from "../view/add/Add";
 import EditOptions from "../view/edit/Edit";

apps/spreadsheeteditor/mobile/src/store/mainStore.js

@@ -16,6 +16,7 @@ import {storeAppOptions} from "./appOptions";
 import {storeChartSettings} from "./chartSettings";
 import {storeSpreadsheetSettings} from "./spreadsheetSettings";
 import {storeComments} from "../../../../common/mobile/lib/store/comments";
+import {storeToolbarSettings} from "./toolbar";
 
 export const stores = {
     storeFocusObjects: new storeFocusObjects(),
@@ -34,6 +35,7 @@ export const stores = {
     storeCellSettings: new storeCellSettings(),
     // storeImageSettings: new storeImageSettings(),
     // storeTableSettings: new storeTableSettings()
-    storeComments: new storeComments()
+    storeComments: new storeComments(),
+    storeToolbarSettings: new storeToolbarSettings()
 };
 

apps/spreadsheeteditor/mobile/src/store/sheets.js

@@ -1,5 +1,5 @@
 
-import {observable, action, makeObservable} from 'mobx';
+import {observable, action, makeObservable, computed} from 'mobx';
 
 class Worksheet {
     sheet = {
@@ -26,7 +26,14 @@ export class storeWorksheets {
         makeObservable(this, {
             sheets: observable,
             resetSheets: action,
-            setActiveWorksheet: action
+            setActiveWorksheet: action,
+            activeWorksheet: computed,
+
+            isWorkbookLocked: observable,
+            setWorkbookLocked: action,
+
+            isWorksheetLocked: observable,
+            setWorksheetLocked: action
         });
         this.sheets = [];
     }
@@ -46,6 +53,14 @@ export class storeWorksheets {
         }
     }
 
+    get activeWorksheet() {
+        for (let i = 0; i < this.sheets.length; i++) {
+            if (this.sheets[i].active)
+                return i;
+        }
+        return -1;
+    }
+
     at(i) {
         return this.sheets[i]
     }
@@ -61,4 +76,17 @@ export class storeWorksheets {
     visibleWorksheets() {
         return this.sheets.filter(model => !model.hidden);
     }
+
+    isWorkbookLocked = false;
+    setWorkbookLocked(locked) {
+        this.isWorkbookLocked = locked;
+    }
+
+    isWorksheetLocked = false;
+    setWorksheetLocked(index, locked) {
+        let model = this.sheets[index];
+        if(model && model.locked !== locked)
+            model.locked = locked;
+        this.isWorkbookLocked = locked;
+    }
 }

apps/spreadsheeteditor/mobile/src/store/toolbar.js

@@ -0,0 +1,24 @@
+import {action, observable, makeObservable} from 'mobx';
+
+export class storeToolbarSettings {
+    constructor() {
+        makeObservable(this, {
+            isCanUndo: observable,
+            setCanUndo: action,
+            isCanRedo: observable,
+            setCanRedo: action
+        })
+    }
+
+    isCanUndo = false;
+
+    setCanUndo(can) {
+        this.isCanUndo = can;
+    }
+
+    isCanRedo = false;
+
+    setCanRedo(can) {
+        this.isCanRedo = can;
+    }
+}

apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx

@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
-import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
-import { observer, inject } from "mobx-react";
 import { useTranslation } from 'react-i18next';
 import { Device } from '../../../../common/mobile/utils/device';
 
@@ -8,16 +7,12 @@ const viewStyle = {
     height: 30
 };
 
-const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
+const StatusbarView = props => {
     const { t } = useTranslation();
     const _t = t('Statusbar', {returnObjects: true});
     const isAndroid = Device.android;
     const isPhone = Device.isPhone;
-    const { sheets, storeAppOptions } = props;
+    const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props;
-    const isEdit = storeAppOptions.isEdit;
-    const hiddenSheets = sheets.hiddenWorksheets();
-    const allSheets = sheets.sheets;
-    const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
 
     const getTabColor = model => {
         let color = model.color;
@@ -119,7 +114,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
         <Fragment>
             <View id="idx-statusbar" className="statusbar" style={viewStyle}>
                 <div id="idx-box-add-tab">
-                    <Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
+                    <Link href={false} id="idx-btn-addtab" className={`tab${isWorkbookLocked ? ' disabled' : ''}`} onClick={props.onAddTabClicked}>
                         <Icon className="icon icon-plus" />
                     </Link>
                 </div>
@@ -127,7 +122,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
                     <ul className="sheet-tabs bottom">
                         {allSheets.map((model,i) => 
                             model.hidden ? null : 
-                                <li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
+                                <li className={`tab${model.active ? ' active' : ''} ${model.locked ? ' locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
                                     <a style={{boxShadow: getTabColor(model)}}>{model.name}</a>
                                 </li>
                             
@@ -194,6 +189,6 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
             ) : null}
         </Fragment>
     )
-}));
+};
 
 export {StatusbarView};