From 40b9837d5532948d0792b897a41d95c0db6cca61 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 22 Jul 2021 00:10:20 +0300 Subject: [PATCH 1/5] [SSE mobile] Change to add listeners on events in statusbar --- .../mobile/src/controller/Main.jsx | 2 + .../mobile/src/controller/Statusbar.jsx | 139 ++++++++---------- .../mobile/src/page/main.jsx | 2 +- .../mobile/src/store/sheets.js | 32 +++- .../mobile/src/view/Statusbar.jsx | 17 +-- 5 files changed, 100 insertions(+), 92 deletions(-) diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 34d72d1af..84c07a9e0 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -18,6 +18,7 @@ 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( "storeAppOptions", @@ -799,6 +800,7 @@ class MainController extends Component { + diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index 47d3840c2..7e093e1f0 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -1,85 +1,31 @@ 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 {sheets, storeAppOptions, users} = props; - const {t} = useTranslation(); - const _t = t('Statusbar', {returnObjects: true}); - - let isEdit = storeAppOptions.isEdit; - let isDisconnected = users.isDisconnected; +const StatusbarController = inject('sheets')(observer(props => { + const sheets = props.sheets; useEffect(() => { - const onDocumentReady = () => { - const api = Common.EditorApi.get(); - // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); - api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked); - api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked); + Common.Notifications.on('engineCreated', api => { + api.asc_registerCallback('asc_onWorkbookLocked', (locked) => { + sheets.setWorkbookLocked(locked); + }); + api.asc_registerCallback('asc_onWorksheetLocked', (index, locked) => { + sheets.setWorksheetLocked(index, locked); + }); api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged); - api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu); api.asc_registerCallback('asc_onActiveSheetChanged', onApiActiveSheetChanged); - }; - if ( !Common.EditorApi ) { - Common.Notifications.on('document:ready', onDocumentReady); - 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; - }; + api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu); + // api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor); + }); + Common.Notifications.on('document:ready', onApiSheetsChanged); + }); 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 +46,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 +157,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 +180,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 +289,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { } else { f7.popover.close('#idx-hidden-sheets-popover'); api['asc_showWorksheet'](index); - // loadTabColor(index); } }; @@ -348,8 +322,17 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { }; return ( - + ) -}); +})); -export default Statusbar; \ No newline at end of file +export {Statusbar, StatusbarController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index c8221d3d3..9c316b562 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/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"; diff --git a/apps/spreadsheeteditor/mobile/src/store/sheets.js b/apps/spreadsheeteditor/mobile/src/store/sheets.js index bb79938d3..54e04a34b 100644 --- a/apps/spreadsheeteditor/mobile/src/store/sheets.js +++ b/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; + } } diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index 7af545d6f..5e19d53b6 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/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 { observer, inject } from "mobx-react"; +import { View, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-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 = storeAppOptions.isEdit; - const hiddenSheets = sheets.hiddenWorksheets(); - const allSheets = sheets.sheets; - const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`; + const { isEdit, allSheets, hiddenSheets, isWorkbookLocked } = props; const getTabColor = model => { let color = model.color; @@ -119,7 +114,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
- props.onAddTabClicked()}> +
@@ -127,7 +122,7 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => {
    {allSheets.map((model,i) => model.hidden ? null : -
  • props.onTabClick(i, e.target)}> +
  • props.onTabClick(i, e.target)}> {model.name}
    • @@ -194,6 +189,6 @@ const StatusbarView = inject('sheets', "storeAppOptions")(observer(props => { ) : null} ) -})); +}; export {StatusbarView}; From bd57ab8c5d3295e218a30aadab8a8514289ac319 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 22 Jul 2021 01:10:25 +0300 Subject: [PATCH 2/5] [SSE mobile] Change to add listeners on events in toolbar --- .../mobile/src/controller/Main.jsx | 16 +++++- .../mobile/src/controller/Statusbar.jsx | 5 +- .../mobile/src/controller/Toolbar.jsx | 54 ++++--------------- .../mobile/src/store/mainStore.js | 4 +- .../mobile/src/store/toolbar.js | 24 +++++++++ 5 files changed, 57 insertions(+), 46 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/store/toolbar.js diff --git a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx index 84c07a9e0..f35162df2 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Main.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Main.jsx @@ -21,6 +21,7 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins. import { StatusbarController } from "./Statusbar"; @inject( + "users", "storeAppOptions", "storeFocusObjects", "storeCellSettings", @@ -28,7 +29,8 @@ import { StatusbarController } from "./Statusbar"; "storeChartSettings", "storeSpreadsheetSettings", "storeSpreadsheetInfo", - "storeApplicationSettings" + "storeApplicationSettings", + "storeToolbarSettings" ) class MainController extends Component { constructor(props) { @@ -360,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) { diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index 7e093e1f0..c9725fffe 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -6,16 +6,19 @@ import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; -const StatusbarController = inject('sheets')(observer(props => { +const StatusbarController = inject('sheets', 'storeFocusObjects')(observer(props => { const sheets = props.sheets; + const storeFocusObjects = props.storeFocusObjects; useEffect(() => { Common.Notifications.on('engineCreated', api => { api.asc_registerCallback('asc_onWorkbookLocked', (locked) => { sheets.setWorkbookLocked(locked); + storeFocusObjects.setIsLocked(api.asc_getCellInfo()); }); 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_onActiveSheetChanged', onApiActiveSheetChanged); diff --git a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx index c778040af..6b6ceb0b4 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Toolbar.jsx +++ b/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 onDocumentReady = () => { - const api = Common.EditorApi.get(); - 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); + const storeToolbarSettings = props.storeToolbarSettings; + const isCanUndo = storeToolbarSettings.isCanUndo; + const isCanRedo = storeToolbarSettings.isCanRedo; - Common.Notifications.on('toolbar:activatecontrols', activateControls); - Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls); - Common.Notifications.on('goback', goBack); - Common.Notifications.on('sheet:active', onApiActiveSheetChanged); - }; - if ( !Common.EditorApi ) { - Common.Notifications.on('document:ready', onDocumentReady); - Common.Gateway.on('init', loadConfig); - } else { - onDocumentReady(); - } + useEffect(() => { + Common.Gateway.on('init', loadConfig); + + Common.Notifications.on('toolbar:activatecontrols', activateControls); + Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls); + Common.Notifications.on('goback', goBack); + Common.Notifications.on('sheet:active', onApiActiveSheetChanged); 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 ); diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 0190760f3..de8a2c11e 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/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() }; diff --git a/apps/spreadsheeteditor/mobile/src/store/toolbar.js b/apps/spreadsheeteditor/mobile/src/store/toolbar.js new file mode 100644 index 000000000..ff0d1764a --- /dev/null +++ b/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; + } +} \ No newline at end of file From 6d0911631cf696e30f913e7a89a98c4bfec84d84 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 22 Jul 2021 17:47:34 +0300 Subject: [PATCH 3/5] [DE mobile] Fix adding listeners in toolbar --- .../mobile/src/controller/Main.jsx | 16 ++++- .../mobile/src/controller/Toolbar.jsx | 72 ++++--------------- .../mobile/src/store/focusObjects.js | 24 ++++++- .../mobile/src/store/mainStore.js | 4 +- 4 files changed, 54 insertions(+), 62 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx index dc2d27292..9b88260ed 100644 --- a/apps/documenteditor/mobile/src/controller/Main.jsx +++ b/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) { diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index 79286c70a..6fcbbbf64 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/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 = () => { - const api = Common.EditorApi.get(); - api.asc_registerCallback('asc_onCanUndo', onApiCanUndo); - api.asc_registerCallback('asc_onCanRedo', onApiCanRedo); - api.asc_registerCallback('asc_onFocusObject', onApiFocusObject); - 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(); - } + Common.Notifications.on('setdoctitle', setDocTitle); + Common.Gateway.on('init', loadConfig); + Common.Notifications.on('toolbar:activatecontrols', activateControls); + Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls); + Common.Notifications.on('goback', goBack); 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 { @@ -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} diff --git a/apps/documenteditor/mobile/src/store/focusObjects.js b/apps/documenteditor/mobile/src/store/focusObjects.js index 00cba2705..cab6518c7 100644 --- a/apps/documenteditor/mobile/src/store/focusObjects.js +++ b/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; + } + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js index d9a85af99..d145ad369 100644 --- a/apps/documenteditor/mobile/src/store/mainStore.js +++ b/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() }; From e631e35f5f1e24e35b45807c8bf4f6fcc5c5c09e Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 22 Jul 2021 17:48:46 +0300 Subject: [PATCH 4/5] [PE mobile] Fix adding listeners in toolbar --- .../mobile/src/controller/Main.jsx | 19 ++++- .../mobile/src/controller/Toolbar.jsx | 81 ++++--------------- .../mobile/src/store/focusObjects.js | 25 +++++- .../mobile/src/store/mainStore.js | 4 +- 4 files changed, 59 insertions(+), 70 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/Main.jsx b/apps/presentationeditor/mobile/src/controller/Main.jsx index 832eea745..3eeefcb3e 100644 --- a/apps/presentationeditor/mobile/src/controller/Main.jsx +++ b/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 () { diff --git a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx b/apps/presentationeditor/mobile/src/controller/Toolbar.jsx index 5f50b615a..a1ba3d10d 100644 --- a/apps/presentationeditor/mobile/src/controller/Toolbar.jsx +++ b/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 = () => { - const api = Common.EditorApi.get(); - api.asc_registerCallback('asc_onCanUndo', onApiCanUndo); - api.asc_registerCallback('asc_onCanRedo', onApiCanRedo); - api.asc_registerCallback('asc_onFocusObject', onApiFocusObject); - 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(); - } + Common.Notifications.on('setdoctitle', setDocTitle); + Common.Gateway.on('init', loadConfig); + Common.Notifications.on('toolbar:activatecontrols', activateControls); + Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls); + Common.Notifications.on('goback', goBack); 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} diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index 2a363150a..e22ef57c1 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/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); + } + } } \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 299a6a63b..a750c72fb 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/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() }; From 0f8d9d4c1a045b7ff14fbe313ef1eb6f02c7b635 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 22 Jul 2021 17:58:48 +0300 Subject: [PATCH 5/5] [DE PE mobile] Add toolbar store --- .../mobile/src/store/toolbar.js | 24 ++++++++++++++ .../mobile/src/store/toolbar.js | 32 +++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 apps/documenteditor/mobile/src/store/toolbar.js create mode 100644 apps/presentationeditor/mobile/src/store/toolbar.js diff --git a/apps/documenteditor/mobile/src/store/toolbar.js b/apps/documenteditor/mobile/src/store/toolbar.js new file mode 100644 index 000000000..ff0d1764a --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/toolbar.js b/apps/presentationeditor/mobile/src/store/toolbar.js new file mode 100644 index 000000000..db3a9e87d --- /dev/null +++ b/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; + } +} \ No newline at end of file