Merge pull request #1773 from ONLYOFFICE/feature/add-ole-sse

Feature/add ole sse

apps/common/main/resources/less/buttons.less

@@ -922,7 +922,7 @@
         background-repeat: no-repeat;
     }
 
-    &.dropdown-toggle:first-child .inner-box-caret {
+    &:not(.btn-toolbar).dropdown-toggle:first-child .inner-box-caret {
       padding: 0 1px 0 2px;
     }
 

apps/documenteditor/main/app/controller/DocumentHolder.js

@@ -311,8 +311,9 @@ define([
                     var command = message.data.command;
                     var data = message.data.data;
                     if (this.api) {
-                        if (oleEditor.isEditMode())
+                        oleEditor.isEditMode()
-                            this.api.asc_editTableOleObject(data);
+                            ? this.api.asc_editTableOleObject(data)
+                            : this.api.asc_addTableOleObject(data);
                     }
                 }, this));
                 oleEditor.on('hide', _.bind(function(cmp, message) {

apps/documenteditor/main/app/controller/Toolbar.js

@@ -1544,6 +1544,13 @@ define([
                         Common.NotificationCenter.trigger('edit:complete', me.toolbar);
                     }
                 })).show();
+            } else if (item.value == 'sse') {
+                var oleEditor = this.getApplication().getController('Common.Controllers.ExternalOleEditor').getView('Common.Views.ExternalOleEditor');
+                if (oleEditor) {
+                    oleEditor.setEditMode(false);
+                    oleEditor.show();
+                    oleEditor.setOleData("empty");
+                }
             }
         },
 

apps/documenteditor/main/app/view/Toolbar.js

@@ -608,7 +608,8 @@ define([
                                 {caption: this.mniCustomTable, value: 'custom'},
                                 {caption: this.mniDrawTable, value: 'draw', checkable: true},
                                 {caption: this.mniEraseTable, value: 'erase', checkable: true},
-                                {caption: this.mniTextToTable, value: 'convert'}
+                                {caption: this.mniTextToTable, value: 'convert'},
+                                {caption: this.mniInsertSSE, value: 'sse'}
                             ]
                         }),
                         dataHint: '1',
@@ -2835,7 +2836,8 @@ define([
             tipMarkersDash: 'Dash bullets',
             textTabView: 'View',
             mniRemoveHeader: 'Remove Header',
-            mniRemoveFooter: 'Remove Footer'
+            mniRemoveFooter: 'Remove Footer',
+            mniInsertSSE: 'Insert Spreadsheet'
         }
     })(), DE.Views.Toolbar || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -2882,6 +2882,7 @@
   "DE.Views.Toolbar.txtScheme7": "Equity",
   "DE.Views.Toolbar.txtScheme8": "Flow",
   "DE.Views.Toolbar.txtScheme9": "Foundry",
+  "DE.Views.Toolbar.mniInsertSSE": "Insert Spreadsheet",
   "DE.Views.ViewTab.textAlwaysShowToolbar": "Always show toolbar",
   "DE.Views.ViewTab.textDarkDocument": "Dark document",
   "DE.Views.ViewTab.textFitToPage": "Fit To Page",

apps/presentationeditor/main/app/controller/DocumentHolder.js

@@ -333,8 +333,9 @@ define([
                     var command = message.data.command;
                     var data = message.data.data;
                     if (this.api) {
-                        if (oleEditor.isEditMode())
+                        oleEditor.isEditMode()
-                            this.api.asc_editTableOleObject(data);
+                            ? this.api.asc_editTableOleObject(data)
+                            : this.api.asc_addTableOleObject(data);
                     }
                 }, this));
                 oleEditor.on('hide', _.bind(function(cmp, message) {

apps/presentationeditor/main/app/controller/Toolbar.js

@@ -1686,6 +1686,13 @@ define([
                         Common.NotificationCenter.trigger('edit:complete', me.toolbar);
                     }
                 })).show();
+            } else if (item.value == 'sse') {
+                var oleEditor = this.getApplication().getController('Common.Controllers.ExternalOleEditor').getView('Common.Views.ExternalOleEditor');
+                if (oleEditor) {
+                    oleEditor.setEditMode(false);
+                    oleEditor.show();
+                    oleEditor.setOleData("empty");
+                }
             }
         },
 

apps/presentationeditor/main/app/view/Toolbar.js

@@ -719,7 +719,8 @@ define([
                             cls: 'shifted-left',
                             items: [
                                 {template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>')},
-                                {caption: me.mniCustomTable, value: 'custom'}
+                                {caption: me.mniCustomTable, value: 'custom'},
+                                {caption: me.mniInsertSSE, value: 'sse'}
                             ]
                         }),
                         dataHint: '1',
@@ -2029,7 +2030,8 @@ define([
             tipMarkersFRhombus: 'Filled rhombus bullets',
             tipMarkersDash: 'Dash bullets',
             tipNone: 'None',
-            textTabView: 'View'
+            textTabView: 'View',
+            mniInsertSSE: 'Insert Spreadsheet'
         }
     }()), PE.Views.Toolbar || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -2314,6 +2314,7 @@
   "PE.Views.Toolbar.txtScheme9": "Foundry",
   "PE.Views.Toolbar.txtSlideAlign": "Align to Slide",
   "PE.Views.Toolbar.txtUngroup": "Ungroup",
+  "PE.Views.Toolbar.mniInsertSSE": "Insert Spreadsheet",
   "PE.Views.Transitions.strDelay": "Delay",
   "PE.Views.Transitions.strDuration": "Duration",
   "PE.Views.Transitions.strStartOnClick": "Start On Click",

apps/spreadsheeteditor/main/app/controller/LeftMenu.js

@@ -774,6 +774,7 @@ define([
                             isSearchOpen = searchBarBtn && searchBarBtn.pressed;
                         menu_opened = $(document.body).find('.open > .dropdown-menu');
                         if (!this.api.isCellEdited && !menu_opened.length && !isSearchOpen) {
+                            this.mode.isEditOle && Common.NotificationCenter.trigger('oleedit:close');
                             Common.Gateway.internalMessage('shortcut', {key:'escape'});
                             return false;
                         }

apps/spreadsheeteditor/main/app/controller/Main.js

@@ -2500,7 +2500,7 @@ define([
                     me.getApplication().getController('RightMenu').UpdateThemeColors();
                 }, 50);
 
-                !me.appOptions.isEditOle && setTimeout(function(){
+                setTimeout(function(){
                     me.getApplication().getController('Toolbar').updateThemeColors();
                 }, 50);
 
@@ -2554,6 +2554,7 @@ define([
                         if (!Common.Utils.ModalWindow.isVisible()) {
                             this.isFrameClosed = true;
                             this.api.asc_closeCellEditor();
+                            this.appOptions.isEditOle && Common.NotificationCenter.trigger('oleedit:close');
                             Common.UI.Menu.Manager.hideAll();
                             Common.Gateway.internalMessage('canClose', {mr:data.data.mr, answer: true});
                         } else
@@ -2598,8 +2599,8 @@ define([
             },
 
             setOleData: function(obj) {
-                if (typeof obj === 'object' && this.api) {
+                if ((typeof obj === 'object' || obj==="empty") && this.api) {
-                    this.api.asc_addTableOleObjectInOleEditor(obj);
+                    this.api.asc_addTableOleObjectInOleEditor(typeof obj === 'object' ? obj : undefined);
                     this.isFrameClosed = false;
                 }
             },

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -158,6 +158,7 @@ define([
             Common.NotificationCenter.on('toolbar:collapse', _.bind(function () {
                 this.toolbar.collapse();
             }, this));
+            Common.NotificationCenter.on('oleedit:close', _.bind(this.onOleEditClose, this));
 
             this.editMode = true;
             this._isAddingShape = false;
@@ -312,18 +313,45 @@ define([
                 toolbar.btnCopy.on('click',                                 _.bind(this.onCopyPaste, this, true));
                 toolbar.btnPaste.on('click',                                _.bind(this.onCopyPaste, this, false));
                 toolbar.btnSearch.on('toggle',                              _.bind(this.onSearch, this));
-                toolbar.btnSortDown.on('click',                             _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Ascending));
-                toolbar.btnSortUp.on('click',                               _.bind(this.onSortType, this, Asc.c_oAscSortOptions.Descending));
-                toolbar.btnSetAutofilter.on('click',                        _.bind(this.onAutoFilter, this));
-                toolbar.btnClearAutofilter.on('click',                      _.bind(this.onClearFilter, this));
                 toolbar.btnInsertFormula.on('click',                        _.bind(this.onInsertFormulaMenu, this));
                 toolbar.btnInsertFormula.menu.on('item:click',              _.bind(this.onInsertFormulaMenu, this));
-                toolbar.btnDecDecimal.on('click',                           _.bind(this.onDecrement, this));
-                toolbar.btnIncDecimal.on('click',                           _.bind(this.onIncrement, this));
                 toolbar.cmbNumberFormat.on('selected',                      _.bind(this.onNumberFormatSelect, this));
                 toolbar.cmbNumberFormat.on('show:before',                   _.bind(this.onNumberFormatOpenBefore, this, true));
                 if (toolbar.cmbNumberFormat.cmpEl)
                     toolbar.cmbNumberFormat.cmpEl.on('click', '#id-toolbar-mnu-item-more-formats a', _.bind(this.onNumberFormatSelect, this));
+                toolbar.btnWrap.on('click',                                 _.bind(this.onWrap, this));
+                toolbar.btnTextColor.on('click',                            _.bind(this.onTextColor, this));
+                toolbar.btnTextColor.on('color:select',                     _.bind(this.onTextColorSelect, this));
+                toolbar.btnTextColor.on('auto:select',                      _.bind(this.onAutoFontColor, this));
+                toolbar.btnBackColor.on('click',                            _.bind(this.onBackColor, this));
+                toolbar.btnBackColor.on('color:select',                     _.bind(this.onBackColorSelect, this));
+                toolbar.btnBorders.on('click',                              _.bind(this.onBorders, this));
+                if (toolbar.btnBorders.rendered) {
+                    toolbar.btnBorders.menu.on('item:click',                    _.bind(this.onBordersMenu, this));
+                    toolbar.mnuBorderWidth.on('item:toggle',                    _.bind(this.onBordersWidth, this));
+                    toolbar.mnuBorderColorPicker.on('select',                   _.bind(this.onBordersColor, this));
+                    $('#id-toolbar-menu-auto-bordercolor').on('click',          _.bind(this.onAutoBorderColor, this));
+                }
+                toolbar.btnMerge.on('click',                                _.bind(this.onMergeCellsMenu, this, toolbar.btnMerge.menu, toolbar.btnMerge.menu.items[0]));
+                toolbar.btnMerge.menu.on('item:click',                      _.bind(this.onMergeCellsMenu, this));
+                toolbar.btnTableTemplate.menu.on('show:after',              _.bind(this.onTableTplMenuOpen, this));
+                toolbar.btnVisibleArea.menu.on('item:click',              _.bind(this.onVisibleAreaMenu, this));
+                toolbar.btnVisibleAreaClose.on('click',                   _.bind(this.onVisibleAreaClose, this));
+                toolbar.cmbFontName.on('selected',                          _.bind(this.onFontNameSelect, this));
+                toolbar.cmbFontName.on('show:after',                        _.bind(this.onComboOpen, this, true));
+                toolbar.cmbFontName.on('hide:after',                        _.bind(this.onHideMenus, this));
+                toolbar.cmbFontName.on('combo:blur',                        _.bind(this.onComboBlur, this));
+                toolbar.cmbFontName.on('combo:focusin',                     _.bind(this.onComboOpen, this, false));
+                toolbar.cmbFontSize.on('selected',                          _.bind(this.onFontSizeSelect, this));
+                toolbar.cmbFontSize.on('changed:before',                    _.bind(this.onFontSizeChanged, this, true));
+                toolbar.cmbFontSize.on('changed:after',                     _.bind(this.onFontSizeChanged, this, false));
+                toolbar.cmbFontSize.on('show:after',                        _.bind(this.onComboOpen, this, true));
+                toolbar.cmbFontSize.on('hide:after',                        _.bind(this.onHideMenus, this));
+                toolbar.cmbFontSize.on('combo:blur',                        _.bind(this.onComboBlur, this));
+                toolbar.cmbFontSize.on('combo:focusin',                     _.bind(this.onComboOpen, this, false));
+                toolbar.btnTextFormatting.menu.on('item:click',             _.bind(this.onTextFormattingMenu, this));
+                toolbar.btnHorizontalAlign.menu.on('item:click',            _.bind(this.onHorizontalAlignMenu, this));
+                toolbar.btnVerticalAlign.menu.on('item:click',              _.bind(this.onVerticalAlignMenu, this));
             } else {
                 toolbar.btnPrint.on('click',                                _.bind(this.onPrint, this));
                 toolbar.btnPrint.on('disabled',                             _.bind(this.onBtnChangeState, this, 'print:disabled'));
@@ -458,6 +486,8 @@ define([
                 this.api.asc_registerCallback('asc_onUnLockCFManager',      _.bind(this.onUnLockCFManager, this));
                 this.api.asc_registerCallback('asc_onZoomChanged',          _.bind(this.onApiZoomChange, this));
                 Common.NotificationCenter.on('fonts:change',                _.bind(this.onApiChangeFont, this));
+            } else if (config.isEditOle) {
+                Common.NotificationCenter.on('fonts:change',                _.bind(this.onApiChangeFont, this));
             } else if (config.isRestrictedEdit) {
                 this.api.asc_registerCallback('asc_onSelectionChanged',     _.bind(this.onApiSelectionChangedRestricted, this));
                 Common.NotificationCenter.on('protect:wslock',              _.bind(this.onChangeProtectSheet, this));
@@ -1898,7 +1928,9 @@ define([
                 this.api.asc_registerCallback('asc_onUnLockDocumentProps',      _.bind(this.onApiUnLockDocumentProps, this));
                 Common.NotificationCenter.on('protect:wslock',                  _.bind(this.onChangeProtectSheet, this));
             }
-
+            if ( this.appConfig.isEditOle ) {
+                this.api.asc_registerCallback('asc_onEditorSelectionChanged',   _.bind(this.onApiEditorSelectionChanged_OleEditor, this));
+            }
             if ( !this.appConfig.isEditMailMerge ) {
                 this.applyFormulaSettings();
             }
@@ -2234,9 +2266,26 @@ define([
             if ($('.asc-window.enable-key-events:visible').length>0) return;
 
             var toolbar = this.toolbar;
-            if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge || toolbar.mode.isEditOle) {
+            if (toolbar.mode.isEditDiagram || toolbar.mode.isEditMailMerge) {
-                is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
+                var is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
                 toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.btnDecDecimal,toolbar.btnIncDecimal,toolbar.cmbNumberFormat, toolbar.btnEditChartData, toolbar.btnEditChartType]});
+            } else if (toolbar.mode.isEditOle) {
+                if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
+                    var is_cell_edited = (state == Asc.c_oAscCellEditorState.editStart);
+                    toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {array: [toolbar.cmbNumberFormat, toolbar.btnWrap, toolbar.btnMerge, toolbar.btnBackColor,
+                                        toolbar.btnBorders, toolbar.btnTableTemplate, toolbar.btnHorizontalAlign, toolbar.btnVerticalAlign],
+                                        merge: true,
+                                        clear: [Common.enumLock.editFormula, Common.enumLock.editText]});
+                    (is_cell_edited) ? Common.util.Shortcuts.suspendEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l') :
+                                       Common.util.Shortcuts.resumeEvents('command+l, ctrl+l, command+shift+l, ctrl+shift+l');
+                } else {
+                    if (state == Asc.c_oAscCellEditorState.editText) var is_text = true, is_formula = false; else
+                    if (state == Asc.c_oAscCellEditorState.editFormula) is_text = !(is_formula = true); else
+                    if (state == Asc.c_oAscCellEditorState.editEmptyCell) is_text = is_formula = false;
+
+                    toolbar.lockToolbar(Common.enumLock.editFormula, is_formula, { array: [toolbar.cmbFontName, toolbar.cmbFontSize, toolbar.btnTextFormatting, toolbar.btnTextColor]});
+                    toolbar.lockToolbar(Common.enumLock.editText, is_text, {array: [toolbar.btnInsertFormula]});
+                }
             } else
             if (state == Asc.c_oAscCellEditorState.editStart || state == Asc.c_oAscCellEditorState.editEnd) {
                 toolbar.lockToolbar(Common.enumLock.editCell, state == Asc.c_oAscCellEditorState.editStart, {
@@ -3153,11 +3202,14 @@ define([
 
                 me.toolbar.lockToolbar(Common.enumLock.coAuthText, is_objLocked);
 
+                me._state.controlsdisabled.filters = is_image || is_mode_2;
+
                 return is_image;
             };
 
             var selectionType = info.asc_getSelectionType(),
                 xfs = info.asc_getXfs(),
+                toolbar = this.toolbar,
                 coauth_disable = false,
                 editOptionsDisabled = _disableEditOptions(selectionType, coauth_disable),
                 val, need_disable = false;
@@ -3166,24 +3218,238 @@ define([
             if (selectionType == Asc.c_oAscSelectionType.RangeChart || selectionType == Asc.c_oAscSelectionType.RangeChartText)
                 return;
 
-            if ( !me.toolbar.mode.isEditDiagram ) {
+            Common.NotificationCenter.trigger('fonts:change', xfs);
-                var filterInfo = info.asc_getAutoFilterInfo();
 
-                val = filterInfo ? filterInfo.asc_getIsAutoFilter() : null;
+            /* read font size */
-                if ( this._state.filter !== val ) {
+            var str_size = xfs.asc_getFontSize();
-                    me.toolbar.btnSetAutofilter.toggle(val===true, true);
+            if (this._state.fontsize !== str_size) {
+                toolbar.cmbFontSize.setValue((str_size !== undefined) ? str_size : '');
+                this._state.fontsize = str_size;
+            }
+
+            val = xfs.asc_getFontBold();
+            if (this._state.bold !== val) {
+                toolbar.btnTextFormatting.menu.items[0].setChecked(val === true);
+                this._state.bold = val;
+            }
+            val = xfs.asc_getFontItalic();
+            if (this._state.italic !== val) {
+                toolbar.btnTextFormatting.menu.items[1].setChecked(val === true);
+                this._state.italic = val;
+            }
+            val = xfs.asc_getFontUnderline();
+            if (this._state.underline !== val) {
+                toolbar.btnTextFormatting.menu.items[2].setChecked(val === true);
+                this._state.underline = val;
+            }
+            val = xfs.asc_getFontStrikeout();
+            if (this._state.strikeout !== val) {
+                toolbar.btnTextFormatting.menu.items[3].setChecked(val === true);
+                this._state.strikeout = val;
+            }
+
+            val = xfs.asc_getFontSuperscript();
+            if (this._state.superscript !== val) {
+                toolbar.btnTextFormatting.menu.items[4].setChecked(val === true);
+                this._state.superscript = val;
+            }
+
+            val = xfs.asc_getFontSubscript();
+            if (this._state.subscript !== val) {
+                toolbar.btnTextFormatting.menu.items[5].setChecked(val === true);
+                this._state.subscript = val;
+            }
+
+            /* read font color */
+            var clr,
+                color,
+                fontColorPicker      = toolbar.mnuTextColorPicker,
+                paragraphColorPicker = toolbar.mnuBackColorPicker;
+
+            if (!fontColorPicker.isDummy) {
+                color = xfs.asc_getFontColor();
+                if (color) {
+                    if (color.get_auto()) {
+                        if (this._state.clrtext !== 'auto') {
+                            fontColorPicker.clearSelection();
+                            toolbar.btnTextColor.setAutoColor(true);
+                            this._state.clrtext = 'auto';
+                        }
+                    } else {
+                        if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                            clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
+                        } else {
+                            clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                        }
+                        var type1 = typeof(clr),
+                            type2 = typeof(this._state.clrtext);
+                        if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
+                                (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
+                            (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
+
+                            toolbar.btnTextColor.setAutoColor(false);
+                            if (_.isObject(clr)) {
+                                var isselected = false;
+                                for (var i = 0; i < 10; i++) {
+                                    if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
+                                        fontColorPicker.select(clr, true);
+                                        isselected = true;
+                                        break;
+                                    }
+                                }
+                                if (!isselected) fontColorPicker.clearSelection();
+                            } else {
+                                fontColorPicker.select(clr, true);
+                            }
+                            this._state.clrtext = clr;
+                        }
+                    }
+                }
+                this._state.clrtext_asccolor = color;
+            }
+
+            /* read cell background color */
+            if (!paragraphColorPicker.isDummy) {
+                color = xfs.asc_getFillColor();
+                if (color && !color.get_auto()) {
+                    if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                        clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
+                    } else {
+                        clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                    }
+                } else {
+                    clr = 'transparent';
+                }
+
+                type1 = typeof(clr);
+                type2 = typeof(this._state.clrback);
+                if ( (type1 !== type2) || (type1=='object' &&
+                        (clr.effectValue!==this._state.clrback.effectValue || this._state.clrback.color.indexOf(clr.color)<0)) ||
+                    (type1!='object' && this._state.clrback!==undefined && this._state.clrback.indexOf(clr)<0 )) {
+
+                    if (_.isObject(clr)) {
+                        var isselected = false;
+                        for (i = 0; i < 10; i++) {
+                            if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
+                                paragraphColorPicker.select(clr, true);
+                                isselected = true;
+                                break;
+                            }
+                        }
+                        if (!isselected) paragraphColorPicker.clearSelection();
+                    } else {
+                        paragraphColorPicker.select(clr, true);
+                    }
+                    this._state.clrback = clr;
+                }
+                this._state.clrshd_asccolor = color;
+            }
+
+            var filterInfo = info.asc_getAutoFilterInfo(),
+                formatTableInfo = info.asc_getFormatTableInfo();
+
+            /* read cell horizontal align */
+
+            var fontparam = xfs.asc_getHorAlign();
+            if (this._state.pralign !== fontparam) {
+                this._state.pralign = fontparam;
+
+                var index = -1, align;
+                switch (fontparam) {
+                    case AscCommon.align_Left:    index = 0;      align = 'btn-align-left';      break;
+                    case AscCommon.align_Center:  index = 1;      align = 'btn-align-center';    break;
+                    case AscCommon.align_Right:   index = 2;      align = 'btn-align-right';     break;
+                    case AscCommon.align_Justify: index = 3;      align = 'btn-align-just';      break;
+                    default:        index = -255;   align = 'btn-align-left';      break;
+                }
+                if (!(index < 0)) {
+                    toolbar.btnHorizontalAlign.menu.items[index].setChecked(true);
+                } else if (index == -255) {
+                    toolbar.btnHorizontalAlign.menu.clearAll();
+                }
+                if ( toolbar.btnHorizontalAlign.rendered && toolbar.btnHorizontalAlign.$icon ) {
+                    toolbar.btnHorizontalAlign.$icon.removeClass(toolbar.btnHorizontalAlign.options.icls).addClass(align);
+                    toolbar.btnHorizontalAlign.options.icls = align;
+                }
+            }
+
+             // read cell vertical align
+            fontparam = xfs.asc_getVertAlign();
+
+            if (this._state.valign !== fontparam) {
+                this._state.valign = fontparam;
+
+                index = -1;   align = '';
+                switch (fontparam) {
+                    case Asc.c_oAscVAlign.Top:    index = 0; align = 'btn-align-top';     break;
+                    case Asc.c_oAscVAlign.Center: index = 1; align = 'btn-align-middle';  break;
+                    case Asc.c_oAscVAlign.Bottom: index = 2; align = 'btn-align-bottom';  break;
+                }
+                if (!(index < 0)) {
+                    toolbar.btnVerticalAlign.menu.items[index].setChecked(true);
+                } else if (index == -255) {
+                    toolbar.btnVerticalAlign.menu.clearAll();
+                }
+                if ( toolbar.btnVerticalAlign.rendered && toolbar.btnVerticalAlign.$icon ) {
+                    toolbar.btnVerticalAlign.$icon.removeClass(toolbar.btnVerticalAlign.options.icls).addClass(align);
+                    toolbar.btnVerticalAlign.options.icls = align;
+                }
+            }
+
+            need_disable =  this._state.controlsdisabled.filters || formatTableInfo!==null || filterInfo && filterInfo.asc_getIsAutoFilter()===null;
+            toolbar.lockToolbar(Common.enumLock.ruleMerge, need_disable, {array:[toolbar.btnMerge]});
+
+            val = info.asc_getMerge();
+            if (this._state.merge !== val) {
+                toolbar.btnMerge.toggle(val===Asc.c_oAscMergeOptions.Merge, true);
+                this._state.merge = val;
+            }
+
+            /* read cell text wrapping */
+            if (!toolbar.btnWrap.isDisabled()) {
+                val = xfs.asc_getWrapText();
+                if (this._state.wrap !== val) {
+                    toolbar.btnWrap.toggle(val===true, true);
+                    this._state.wrap = val;
+                }
+            }
+
+            val = (filterInfo) ? filterInfo.asc_getIsAutoFilter() : null;
             this._state.filter = val;
-                }
-
             need_disable =  this._state.controlsdisabled.filters || (val===null);
-                me.toolbar.lockToolbar(Common.enumLock.ruleFilter, need_disable,
+            toolbar.lockToolbar(Common.enumLock.ruleFilter, need_disable, { array: [toolbar.btnTableTemplate] });
-                    { array: [me.toolbar.btnSetAutofilter, me.toolbar.btnSortDown, me.toolbar.btnSortUp] });
 
-                need_disable =  this._state.controlsdisabled.filters || !filterInfo || (filterInfo.asc_getIsApplyAutoFilter()!==true);
+            val = (formatTableInfo) ? formatTableInfo.asc_getTableStyleName() : null;
-                me.toolbar.lockToolbar(Common.enumLock.ruleDelFilter, need_disable, {array: [me.toolbar.btnClearAutofilter]});
+            if (this._state.tablestylename !== val && this.toolbar.mnuTableTemplatePicker) {
+                val = this.toolbar.mnuTableTemplatePicker.store.findWhere({name: val});
+                if (val) {
+                    this.toolbar.mnuTableTemplatePicker.selectRecord(val);
+                    this._state.tablestylename = val.get('name');
+                } else {
+                    toolbar.mnuTableTemplatePicker.deselectAll();
+                    this._state.tablestylename = null;
+                }
             }
 
-            var val = xfs.asc_getNumFormatInfo();
+            var old_name = this._state.tablename;
+            this._state.tablename = (formatTableInfo) ? formatTableInfo.asc_getTableName() : undefined;
+
+            var old_applied = this._state.filterapplied;
+            this._state.filterapplied = this._state.filter && filterInfo.asc_getIsApplyAutoFilter();
+
+            if (this._state.tablename !== old_name || this._state.filterapplied !== old_applied)
+                this.getApplication().getController('Statusbar').onApiFilterInfo(!need_disable);
+
+            this._state.multiselect = info.asc_getMultiselect();
+            toolbar.lockToolbar(Common.enumLock.multiselect, this._state.multiselect, { array: [toolbar.btnTableTemplate]});
+
+            this._state.inpivot = !!info.asc_getPivotTableInfo();
+            toolbar.lockToolbar(Common.enumLock.editPivot, this._state.inpivot, { array: [toolbar.btnMerge]});
+
+            need_disable = !this.appConfig.canModifyFilter;
+            toolbar.lockToolbar(Common.enumLock.cantModifyFilter, need_disable, { array: [toolbar.btnTableTemplate]});
+
+            val = xfs.asc_getNumFormatInfo();
             if ( val ) {
                 this._state.numformat = xfs.asc_getNumFormat();
                 this._state.numformatinfo = val;
@@ -3195,6 +3461,104 @@ define([
             }
         },
 
+        onApiEditorSelectionChanged_OleEditor: function(fontobj) {
+            if (!this.editMode || $('.asc-window.enable-key-events:visible').length>0) return;
+
+            var toolbar = this.toolbar,
+                val;
+
+            /* read font name */
+            Common.NotificationCenter.trigger('fonts:change', fontobj);
+
+            /* read font params */
+            val = fontobj.asc_getFontBold();
+            if (this._state.bold !== val) {
+                toolbar.btnTextFormatting.menu.items[0].setChecked(val === true);
+                this._state.bold = val;
+            }
+            val = fontobj.asc_getFontItalic();
+            if (this._state.italic !== val) {
+                toolbar.btnTextFormatting.menu.items[1](val === true);
+                this._state.italic = val;
+            }
+            val = fontobj.asc_getFontUnderline();
+            if (this._state.underline !== val) {
+                toolbar.btnTextFormatting.menu.items[2](val === true);
+                this._state.underline = val;
+            }
+            val = fontobj.asc_getFontStrikeout();
+            if (this._state.strikeout !== val) {
+                toolbar.btnTextFormatting.menu.items[3](val === true);
+                this._state.strikeout = val;
+            }
+
+            val = fontobj.asc_getFontSubscript();
+            if (this._state.subscript !== val) {
+                toolbar.btnTextFormatting.menu.items[4](val === true);
+                this._state.subscript = val;
+            }
+
+            val = fontobj.asc_getFontSuperscript();
+            if (this._state.superscript !== val) {
+                toolbar.btnTextFormatting.menu.items[5](val === true);
+                this._state.superscript = val;
+            }
+
+            /* read font size */
+            var str_size = fontobj.asc_getFontSize();
+            if (this._state.fontsize !== str_size) {
+                toolbar.cmbFontSize.setValue((str_size!==undefined) ? str_size : '');
+                this._state.fontsize = str_size;
+            }
+
+            /* read font color */
+            var clr,
+                color,
+                fontColorPicker      = this.toolbar.mnuTextColorPicker;
+
+            if (!fontColorPicker.isDummy) {
+                color = fontobj.asc_getFontColor();
+                if (color) {
+                    if (color.get_auto()) {
+                        if (this._state.clrtext !== 'auto') {
+                            fontColorPicker.clearSelection();
+                            this.toolbar.btnTextColor.setAutoColor(true);
+                            this._state.clrtext = 'auto';
+                        }
+                    } else {
+                        if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                            clr = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() };
+                        } else {
+                            clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                        }
+                        var type1 = typeof(clr),
+                            type2 = typeof(this._state.clrtext);
+                        if ( (this._state.clrtext == 'auto') || (type1 !== type2) || (type1=='object' &&
+                                (clr.effectValue!==this._state.clrtext.effectValue || this._state.clrtext.color.indexOf(clr.color)<0)) ||
+                            (type1!='object' && this._state.clrtext!==undefined && this._state.clrtext.indexOf(clr)<0 )) {
+
+                            this.toolbar.btnTextColor.setAutoColor(false);
+                            if (_.isObject(clr)) {
+                                var isselected = false;
+                                for (var i = 0; i < 10; i++) {
+                                    if (Common.Utils.ThemeColor.ThemeValues[i] == clr.effectValue) {
+                                        fontColorPicker.select(clr, true);
+                                        isselected = true;
+                                        break;
+                                    }
+                                }
+                                if (!isselected) fontColorPicker.clearSelection();
+                            } else {
+                                fontColorPicker.select(clr, true);
+                            }
+                            this._state.clrtext = clr;
+                        }
+                    }
+                }
+                this._state.clrtext_asccolor = color;
+            }
+        },
+
         onApiStyleChange: function() {
             this.toolbar.btnCopyStyle.toggle(false, true);
             this.modeAlwaysSetStyle = false;
@@ -4243,6 +4607,99 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this.toolbar);
         },
 
+        onVisibleAreaClose: function(btn) {
+            if (this.api)
+                this.api.asc_toggleChangeVisibleAreaOleEditor(false);
+            this.toolbar.lockToolbar(Common.enumLock.editVisibleArea, false);
+            this.toolbar.btnVisibleArea.setVisible(true);
+            this.toolbar.btnVisibleAreaClose.setVisible(false);
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onVisibleAreaMenu: function(menu, item, e) {
+            if (this.api) {
+                if (item.value === 'edit') {
+                    this.api.asc_toggleChangeVisibleAreaOleEditor(true);
+                    this.toolbar.btnVisibleArea.setVisible(false);
+                    this.toolbar.btnVisibleAreaClose.setVisible(true);
+                    this.toolbar.lockToolbar(Common.enumLock.editVisibleArea, true);
+                } else { // show or hide
+                    this.api.asc_toggleShowVisibleAreaOleEditor(item.value === 'show');
+                    this.toolbar.btnVisibleArea.menu.items[0].setVisible(item.value !== 'show');
+                    this.toolbar.btnVisibleArea.menu.items[1].setVisible(item.value === 'show');
+                }
+            }
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+        },
+
+        onOleEditClose: function() {
+            if (this.api) {
+                this.api.asc_toggleChangeVisibleAreaOleEditor(false);
+                this.toolbar.btnVisibleArea.setVisible(true);
+                this.toolbar.btnVisibleAreaClose.setVisible(false);
+                this.toolbar.lockToolbar(Common.enumLock.editVisibleArea, false);
+
+                this.api.asc_toggleShowVisibleAreaOleEditor(false);
+                this.toolbar.btnVisibleArea.menu.items[0].setVisible(true);
+                this.toolbar.btnVisibleArea.menu.items[1].setVisible(false);
+            }
+        },
+
+        onTextFormattingMenu: function(menu, item) {
+            if (this.api) {
+                switch (item.value) {
+                    case 'bold':
+                        this._state.bold = undefined;
+                        this.api.asc_setCellBold(item.checked);
+                        break;
+                    case 'italic':
+                        this._state.italic = undefined;
+                        this.api.asc_setCellItalic(item.checked);
+                        break;
+                    case 'underline':
+                        this._state.underline = undefined;
+                        this.api.asc_setCellUnderline(item.checked);
+                        break;
+                    case 'strikeout':
+                        this._state.strikeout = undefined;
+                        this.api.asc_setCellStrikeout(item.checked);
+                        break;
+                    case 'subscript':
+                        this._state.subscript = undefined;
+                        this.api.asc_setCellSubscript(item.checked);
+                        break;
+                    case 'superscript':
+                        this._state.superscript = undefined;
+                        this.api.asc_setCellSuperscript(item.checked);
+                        break;
+                }
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Text Formatting');
+        },
+
+        onHorizontalAlignMenu: function(menu, item) {
+            this._state.pralign = undefined;
+            if (this.api) {
+                this.api.asc_setCellAlign(!item.checked ? null : item.value);
+                this.toolbar.btnWrap.allowDepress = !(item.value == AscCommon.align_Justify);
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Horizontal align');
+        },
+
+        onVerticalAlignMenu: function(menu, item) {
+            this._state.valign = undefined;
+            if (this.api) {
+                this.api.asc_setCellVertAlign(!item.checked ? Asc.c_oAscVAlign.Bottom : item.value);
+            }
+
+            Common.NotificationCenter.trigger('edit:complete', this.toolbar);
+            Common.component.Analytics.trackEvent('ToolBar', 'Vertical align');
+        },
+
         textEmptyImgUrl     : 'You need to specify image URL.',
         warnMergeLostData   : 'Operation can destroy data in the selected cells.<br>Continue?',
         textWarning         : 'Warning',

apps/spreadsheeteditor/main/app/template/Toolbar.template

@@ -31,7 +31,7 @@
             <section class="panel" data-tab="home">
                 <div class="group small">
                     <div class="elset font-attr-top">
-                        <span class="btn-slot" id="slot-field-fontname"></span>
+                        <span class="btn-slot" id="slot-field-fontname" style="width: 127px;"></span>
                         <span class="btn-slot" id="slot-field-fontsize"></span>
                         <span class="btn-slot" id="slot-btn-incfont"></span>
                         <span class="btn-slot" id="slot-btn-decfont"></span>

apps/spreadsheeteditor/main/app/template/ToolbarAnother.template

@@ -78,47 +78,63 @@
         <section class="simple-bar">
             <div class="group small">
                 <div class="elset">
-                    <span class="btn-slot split" id="slot-btn-copy"></span>
+                    <span class="btn-slot split-small" id="slot-btn-copy"></span>
-                    <span class="btn-slot split" id="slot-btn-paste"></span>
+                    <span class="btn-slot split-small" id="slot-btn-paste"></span>
-                    <span class="btn-slot split" id="slot-btn-undo"></span>
+                    <span class="btn-slot split-small" id="slot-btn-undo"></span>
                     <span class="btn-slot" id="slot-btn-redo"></span>
                 </div>
             </div>
             <div class="separator short"></div>
+            <div class="group small">
+                <div class="elset" style="width: 202px;">
+                    <span class="btn-slot" id="slot-field-fontname" style="width: 100px;float: left;"></span>
+                    <span class="btn-slot" id="slot-field-fontsize" style="margin-left: 2px;float: left;"></span>
+                    <span class="btn-slot split" id="slot-btn-fontcolor" style="margin-left: 2px;margin-top: 1px;float: left;"></span>
+                    <span class="btn-slot" id="slot-btn-formatting" style="margin-left: 2px;margin-top: 1px;float: left;"></span>
+                </div>
+            </div>
+            <div class="separator short"></div>
+            <div class="group small">
+                <div class="elset font-attr">
+                    <span class="btn-slot split" id="slot-btn-halign"></span>
+                    <span class="btn-slot split" id="slot-btn-valign"></span>
+                    <span class="btn-slot split-small" id="slot-btn-wrap"></span>
+                    <span class="btn-slot split" id="slot-btn-merge"></span>
+                </div>
+            </div>
+            <div class="separator short"></div>
+            <div class="group small">
+                <div class="elset font-attr">
+                    <span class="btn-slot split" id="slot-btn-borders"></span>
+                    <span class="btn-slot split" id="slot-btn-fillparag"></span>
+                    <span class="btn-slot split" id="slot-btn-table-tpl"></span>
+                </div>
+            </div>
+            <div class="separator short"></div>
+            <div class="group small">
+                <div class="elset">
+                    <span class="btn-slot" id="slot-btn-format" style="width: 84px; float: left;"></span>
+                </div>
+            </div>
+            <div class="separator short"></div>
             <div class="group small">
                 <div class="elset">
                     <span class="btn-slot split" id="slot-btn-formula"></span>
                 </div>
             </div>
             <div class="separator short"></div>
-            <div class="group small">
-                <div class="elset">
-                    <span class="btn-slot split" id="slot-btn-sortdesc"></span>
-                    <span class="btn-slot" id="slot-btn-sortasc"></span>
-                </div>
-            </div>
-            <div class="separator short" style="margin-left: 5px;"></div>
-            <div class="group small">
-                <div class="elset">
-                    <span class="btn-slot split" id="slot-btn-setfilter"></span>
-                    <span class="btn-slot" id="slot-btn-clear-filter"></span>
-                </div>
-            </div>
-            <div class="separator short"></div>
-            <div class="group small">
-                <div class="elset">
-                    <span class="btn-slot split" id="slot-btn-digit-dec"></span>
-                    <span class="btn-slot split" id="slot-btn-digit-inc"></span>
-                    <span class="btn-slot" id="slot-btn-format" style="width: 84px; vertical-align: middle;"></span>
-                </div>
-            </div>
-            <div class="separator short"></div>
             <div class="group small">
                 <div class="elset">
                     <span class="btn-slot" id="slot-btn-search"></span>
                 </div>
             </div>
             <div class="group" style="width: 100%;"></div>
+            <div class="group small" style="padding-right: 10px;">
+                <div class="elset">
+                    <span class="btn-slot" id="slot-btn-visible-area" style="width: auto;float: left;"></span>
+                    <span class="btn-slot" id="slot-btn-visible-area-close" style="width: auto;float: left;"></span>
+                </div>
+            </div>
         </section>
     <% } %>
 </div>

apps/spreadsheeteditor/main/app/view/Toolbar.js

@@ -109,7 +109,8 @@ define([
         wsLockShape: 'worksheet-lock-shape',
         wsLockFormat: 'worksheet-lock-format',
         inSmartartInternal: 'in-smartart-internal',
-        wsLockFormatFill: 'worksheet-lock-format-fill'
+        wsLockFormatFill: 'worksheet-lock-format-fill',
+        editVisibleArea: 'is-visible-area'
     };
     for (var key in enumLock) {
         if (enumLock.hasOwnProperty(key)) {
@@ -205,7 +206,7 @@ define([
                 id          : 'id-toolbar-btn-paste',
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-paste',
-                lock        : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect],
+                lock        : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect, _set.editVisibleArea],
                 dataHint    : '1',
                 dataHintDirection: (config.isEditDiagram || config.isEditMailMerge || config.isEditOle) ? 'bottom' : 'top',
                 dataHintTitle: 'V'
@@ -243,7 +244,7 @@ define([
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-formula',
                         split       : true,
-                        lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                        lock        : [_set.editText, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set.editVisibleArea],
                         menu        : new Common.UI.Menu({
                             style : 'min-width: 110px',
                             items : [
@@ -261,25 +262,6 @@ define([
                             ]
                         }),
                         dataHint: '1',
-                        dataHintDirection: 'bottom',
-                        dataHintOffset: 'big'
-                    });
-
-                    me.btnDecDecimal = new Common.UI.Button({
-                        id          : 'id-toolbar-btn-decdecimal',
-                        cls         : 'btn-toolbar',
-                        iconCls     : 'toolbar__icon btn-decdecimal',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth],
-                        dataHint    : '1',
-                        dataHintDirection: 'bottom'
-                    });
-
-                    me.btnIncDecimal = new Common.UI.Button({
-                        id          : 'id-toolbar-btn-incdecimal',
-                        cls         : 'btn-toolbar',
-                        iconCls     : 'toolbar__icon btn-incdecimal',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth],
-                        dataHint    : '1',
                         dataHintDirection: 'bottom'
                     });
 
@@ -299,16 +281,44 @@ define([
                         cls         : 'input-group-nr',
                         menuStyle   : 'min-width: 180px;',
                         hint        : me.tipNumFormat,
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth],
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selRangeEdit, _set.lostConnect, _set.coAuth, _set.editVisibleArea],
                         itemsTemplate: formatTemplate,
                         editable    : false,
                         data        : me.numFormatData,
                         dataHint    : '1',
-                        dataHintDirection: 'bottom',
+                        dataHintDirection: 'bottom'
-                        dataHintOffset: 'big'
+                    });
+                }
+                if ( config.isEditMailMerge || config.isEditOle ) {
+                    me.btnSearch = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-search',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-menu-search',
+                        lock        : [_set.lostConnect],
+                        enableToggle: true,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
                     });
                 }
                 if ( config.isEditDiagram ) {
+                    me.btnDecDecimal = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-decdecimal',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-decdecimal',
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.editVisibleArea],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnIncDecimal = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-incdecimal',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-incdecimal',
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.editVisibleArea],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
                     me.btnEditChart = new Common.UI.Button({
                         id          : 'id-toolbar-rtn-edit-chart',
                         cls         : 'btn-toolbar btn-text-default auto',
@@ -316,8 +326,7 @@ define([
                         lock        : [_set.lostConnect],
                         style       : 'min-width: 120px;',
                         dataHint    : '1',
-                        dataHintDirection: 'bottom',
+                        dataHintDirection: 'bottom'
-                        dataHintOffset: 'big'
                     });
 
                     me.btnEditChartData = new Common.UI.Button({
@@ -343,22 +352,12 @@ define([
                         dataHintOffset: 'medium'
                     });
                 }
-                if ( config.isEditMailMerge || config.isEditOle ) {
+                if ( config.isEditMailMerge) {
-                    me.btnSearch = new Common.UI.Button({
-                        id          : 'id-toolbar-btn-search',
-                        cls         : 'btn-toolbar',
-                        iconCls     : 'toolbar__icon btn-menu-search',
-                        lock        : [_set.lostConnect],
-                        enableToggle: true,
-                        dataHint    : '1',
-                        dataHintDirection: 'bottom'
-                    });
-
                     me.btnSortDown = new Common.UI.Button({
                         id          : 'id-toolbar-btn-sort-down',
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-sort-down',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot],
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot, _set.editVisibleArea],
                         dataHint    : '1',
                         dataHintDirection: 'bottom'
                     });
@@ -367,7 +366,7 @@ define([
                         id          : 'id-toolbar-btn-sort-up',
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-sort-up',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot],
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot, _set.editVisibleArea],
                         dataHint    : '1',
                         dataHintDirection: 'bottom'
                     });
@@ -376,7 +375,7 @@ define([
                         id          : 'id-toolbar-btn-setautofilter',
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-autofilter',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot],
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.editPivot, _set.editVisibleArea],
                         enableToggle: true,
                         dataHint    : '1',
                         dataHintDirection: 'bottom'
@@ -386,11 +385,344 @@ define([
                         id          : 'id-toolbar-btn-clearfilter',
                         cls         : 'btn-toolbar',
                         iconCls     : 'toolbar__icon btn-clear-filter',
-                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleDelFilter, _set.editPivot],
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth, _set.ruleDelFilter, _set.editPivot, _set.editVisibleArea],
                         dataHint    : '1',
                         dataHintDirection: 'bottom'
                     });
                 }
+                if ( config.isEditOle ) {
+                    me.cmbFontSize = new Common.UI.ComboBox({
+                        cls         : 'input-group-nr',
+                        menuStyle   : 'min-width: 55px;',
+                        hint        : me.tipFontSize,
+                        lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.editVisibleArea],
+                        data        : [
+                            { value: 8, displayValue: "8" },
+                            { value: 9, displayValue: "9" },
+                            { value: 10, displayValue: "10" },
+                            { value: 11, displayValue: "11" },
+                            { value: 12, displayValue: "12" },
+                            { value: 14, displayValue: "14" },
+                            { value: 16, displayValue: "16" },
+                            { value: 18, displayValue: "18" },
+                            { value: 20, displayValue: "20" },
+                            { value: 22, displayValue: "22" },
+                            { value: 24, displayValue: "24" },
+                            { value: 26, displayValue: "26" },
+                            { value: 28, displayValue: "28" },
+                            { value: 36, displayValue: "36" },
+                            { value: 48, displayValue: "48" },
+                            { value: 72, displayValue: "72" },
+                            { value: 96, displayValue: "96" }
+                        ],
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.cmbFontName = new Common.UI.ComboBoxFonts({
+                        cls         : 'input-group-nr',
+                        menuCls     : 'scrollable-menu',
+                        menuStyle   : 'min-width: 325px;',
+                        hint        : me.tipFontName,
+                        lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.editVisibleArea],
+                        store       : new Common.Collections.Fonts(),
+                        recent      : 0,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnWrap = new Common.UI.Button({
+                        id          : 'id-toolbar-rtn-wrap',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-wrap',
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells'], _set.editVisibleArea],
+                        enableToggle: true,
+                        allowDepress: true,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnMerge = new Common.UI.Button({
+                        id          : 'id-toolbar-rtn-merge',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-merge-and-center',
+                        enableToggle: true,
+                        allowDepress: true,
+                        split       : true,
+                        lock        : [_set.editCell, _set.selShape, _set.selShapeText, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleMerge, _set.editPivot, _set.wsLock, _set.editVisibleArea],
+                        menu        : new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption : me.txtMergeCenter,
+                                    iconCls     : 'menu__icon btn-merge-and-center',
+                                    value   : Asc.c_oAscMergeOptions.MergeCenter
+                                },
+                                {
+                                    caption : me.txtMergeAcross,
+                                    iconCls     : 'menu__icon btn-merge-across',
+                                    value   : Asc.c_oAscMergeOptions.MergeAcross
+                                },
+                                {
+                                    caption : me.txtMergeCells,
+                                    iconCls     : 'menu__icon btn-merge-cells',
+                                    value   : Asc.c_oAscMergeOptions.Merge
+                                },
+                                {
+                                    caption : me.txtUnmerge,
+                                    iconCls     : 'menu__icon btn-unmerge-cells',
+                                    value   : Asc.c_oAscMergeOptions.None
+                                }
+                            ]
+                        }),
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.mnuTextColorPicker = dummyCmp();
+                    me.btnTextColor = new Common.UI.ButtonColored({
+                        id          : 'id-toolbar-btn-fontcolor',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-fontcolor',
+                        split       : true,
+                        lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormat, _set.editVisibleArea],
+                        menu: true,
+                        auto: true,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.mnuBackColorPicker = dummyCmp();
+                    me.btnBackColor = new Common.UI.ButtonColored({
+                        id          : 'id-toolbar-btn-fillparag',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-paracolor',
+                        split       : true,
+                        lock        : [_set.selImage, _set.editCell, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormatFill, _set.editVisibleArea],
+                        transparent: true,
+                        menu: true,
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnBorders = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-borders',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-border-out',
+                        icls        : 'btn-border-out',
+                        borderId    : 'outer',
+                        borderswidth: Asc.c_oAscBorderStyles.Thin,
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set['FormatCells'], _set.editVisibleArea],
+                        split       : true,
+                        menu        : true,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnTableTemplate = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-ttempl',
+                        cls         : 'btn-toolbar',
+                        iconCls     : 'toolbar__icon btn-menu-table',
+                        lock        : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.ruleFilter, _set.multiselect, _set.cantModifyFilter, _set.wsLock, _set.editVisibleArea],
+                        menu        : new Common.UI.Menu({
+                            items: [
+                                { template: _.template('<div id="id-toolbar-menu-table-templates" style="width: 487px; height: 300px; margin: 0px 4px;"></div>') }
+                            ]
+                        }),
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnTextFormatting = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-formatting',
+                        cls         : 'btn-toolbar no-caret',
+                        iconCls     : 'toolbar__icon more-vertical',
+                        lock        : [_set.selImage, _set.editFormula, _set.selRangeEdit, _set.selSlicer, _set.coAuth, _set.coAuthText, _set.lostConnect, _set.wsLockFormat, _set.editVisibleArea],
+                        menu        : new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption : me.textBold,
+                                    iconCls     : 'menu__icon btn-bold',
+                                    value   : 'bold',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true
+                                },
+                                {
+                                    caption : me.textItalic,
+                                    iconCls     : 'menu__icon btn-italic',
+                                    value   : 'italic',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true
+                                },
+                                {
+                                    caption : me.textUnderline,
+                                    iconCls     : 'menu__icon btn-underline',
+                                    value   : 'underline',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true
+                                },
+                                {
+                                    caption : me.textStrikeout,
+                                    iconCls     : 'menu__icon btn-strikeout',
+                                    value   : 'strikeout',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true
+                                },
+                                {
+                                    caption : me.textSuperscript,
+                                    iconCls     : 'menu__icon btn-superscript',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true,
+                                    toggleGroup : 'textsubscriptgroup',
+                                    value   : 'superscript'
+                                },
+                                {
+                                    caption : me.textSubscript,
+                                    iconCls     : 'menu__icon btn-subscript',
+                                    checkable   : true,
+                                    checkmark   : false,
+                                    allowDepress: true,
+                                    toggleGroup : 'textsubscriptgroup',
+                                    value   : 'subscript'
+                                }
+                            ]
+                        }),
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnHorizontalAlign = new Common.UI.Button({
+                        id: 'id-toolbar-btn-halign',
+                        cls: 'btn-toolbar',
+                        iconCls: 'toolbar__icon btn-align-left',
+                        icls: 'btn-align-left',
+                        lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.coAuthText, _set.wsLockFormat, _set.editVisibleArea],
+                        menu: new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption: me.tipAlignLeft,
+                                    iconCls: 'menu__icon btn-align-left',
+                                    icls: 'btn-align-left',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'halignGroup',
+                                    checked: true,
+                                    value: AscCommon.align_Left
+                                },
+                                {
+                                    caption: me.tipAlignCenter,
+                                    iconCls: 'menu__icon btn-align-center',
+                                    icls: 'btn-align-center',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'halignGroup',
+                                    value: AscCommon.align_Center
+                                },
+                                {
+                                    caption: me.tipAlignRight,
+                                    iconCls: 'menu__icon btn-align-right',
+                                    icls: 'btn-align-right',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'halignGroup',
+                                    value: AscCommon.align_Right
+                                },
+                                {
+                                    caption: me.tipAlignJust,
+                                    iconCls: 'menu__icon btn-align-just',
+                                    icls: 'btn-align-just',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'halignGroup',
+                                    value: AscCommon.align_Justify
+                                }
+                            ]
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnVerticalAlign = new Common.UI.Button({
+                        id: 'id-toolbar-btn-valign',
+                        cls: 'btn-toolbar',
+                        lock: [_set.editCell, _set.selChart, _set.selChartText, _set.selImage, _set.selSlicer, _set.lostConnect, _set.coAuth, _set.coAuthText, _set.wsLockFormat, _set.editVisibleArea],
+                        iconCls: 'toolbar__icon btn-align-middle',
+                        icls: 'btn-align-middle',
+                        menu: new Common.UI.Menu({
+                            items: [
+                                {
+                                    caption: me.textAlignTop,
+                                    iconCls: 'menu__icon btn-align-top',
+                                    icls: 'btn-align-top',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'valignGroup',
+                                    value: Asc.c_oAscVAlign.Top
+                                },
+                                {
+                                    caption: me.textAlignMiddle,
+                                    iconCls: 'menu__icon btn-align-middle',
+                                    icls: 'btn-align-middle',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'valignGroup',
+                                    value: Asc.c_oAscVAlign.Center,
+                                    checked: true
+                                },
+                                {
+                                    caption: me.textAlignBottom,
+                                    iconCls: 'menu__icon btn-align-bottom',
+                                    icls: 'btn-align-bottom',
+                                    checkable: true,
+                                    checkmark: false,
+                                    allowDepress: true,
+                                    toggleGroup: 'valignGroup',
+                                    value: Asc.c_oAscVAlign.Bottom
+                                }
+                            ]
+                        }),
+                        dataHint: '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnVisibleArea = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-visible-area',
+                        cls         : 'btn-toolbar btn-icon-default',
+                        iconCls     : 'toolbar__icon btn-sheet-view',
+                        menu        : new Common.UI.Menu({
+                            items: [
+                                {caption: me.textShowVA,   value: 'show'},
+                                {caption: me.textHideVA,   value: 'hide', visible: false},
+                                {caption: me.textEditVA,   value: 'edit'}
+                            ]
+                        }),
+                        lock        : [_set.lostConnect],
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                    me.btnVisibleAreaClose = new Common.UI.Button({
+                        id          : 'id-toolbar-btn-visible-area-close',
+                        cls         : 'btn-toolbar btn-text-default auto',
+                        caption     : me.textDone,
+                        lock        : [_set.lostConnect],
+                        visible     : false,
+                        // style       : 'min-width: 120px;',
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom'
+                    });
+
+                }
             } else if ( config.isEdit ) {
                 Common.UI.Mixtbar.prototype.initialize.call(this, {
                     template: _.template(template),
@@ -1702,7 +2034,7 @@ define([
                     me.btnCopy, me.btnPaste, me.listStyles, me.btnPrint,
                     /*me.btnSave,*/ me.btnClearStyle, me.btnCopyStyle,
                     me.btnPageMargins, me.btnPageSize, me.btnPageOrient, me.btnPrintArea, me.btnPrintTitles, me.btnImgAlign, me.btnImgBackward, me.btnImgForward, me.btnImgGroup, me.btnScale,
-                    me.chPrintGridlines, me.chPrintHeadings
+                    me.chPrintGridlines, me.chPrintHeadings, me.btnVisibleArea, me.btnVisibleAreaClose, me.btnTextFormatting, me.btnHorizontalAlign, me.btnVerticalAlign
                 ];
 
                 _.each(me.lockControls.concat([me.btnSave]), function(cmp) {
@@ -1917,6 +2249,12 @@ define([
             _injectComponent('#slot-img-movebkwd',      this.btnImgBackward);
             _injectComponent('#slot-btn-scale',         this.btnScale);
             _injectComponent('#slot-btn-condformat',    this.btnCondFormat);
+            _injectComponent('#slot-btn-visible-area',  this.btnVisibleArea);
+            _injectComponent('#slot-btn-visible-area-close',  this.btnVisibleAreaClose);
+            _injectComponent('#slot-btn-formatting',  this.btnTextFormatting);
+            _injectComponent('#slot-btn-halign',  this.btnHorizontalAlign);
+            _injectComponent('#slot-btn-valign',  this.btnVerticalAlign);
+
             this.btnsEditHeader = Common.Utils.injectButtons($host.find('.slot-editheader'), 'tlbtn-editheader-', 'toolbar__icon btn-editheader', this.capBtnInsHeader,
                                 [Common.enumLock.editCell, Common.enumLock.selRangeEdit, Common.enumLock.headerLock, Common.enumLock.lostConnect, Common.enumLock.coAuth], undefined, undefined, undefined, '1', 'bottom', 'small');
             Array.prototype.push.apply(this.lockControls, this.btnsEditHeader);
@@ -1993,6 +2331,10 @@ define([
             _updateHint(this.btnPrintTitles, this.tipPrintTitles);
             _updateHint(this.btnScale, this.tipScale);
             _updateHint(this.btnCondFormat, this.tipCondFormat);
+            _updateHint(this.btnVisibleArea, this.tipVisibleArea);
+            _updateHint(this.btnTextFormatting, this.tipTextFormatting);
+            _updateHint(this.btnHorizontalAlign, this.tipHAligh);
+            _updateHint(this.btnVerticalAlign, this.tipVAligh);
             this.btnsEditHeader.forEach(function (btn) {
                 _updateHint(btn, me.tipEditHeader);
             });
@@ -2443,7 +2785,7 @@ define([
             if (mode.isDisconnected) {
                 this.lockToolbar( Common.enumLock.lostConnect, true );
                 this.lockToolbar( Common.enumLock.lostConnect, true,
-                    {array:[this.btnEditChart, this.btnEditChartData, this.btnEditChartType, this.btnUndo,this.btnRedo,this.btnSave]} );
+                    {array:[this.btnEditChart, this.btnEditChartData, this.btnEditChartType, this.btnUndo,this.btnRedo,this.btnSave, this.btnVisibleArea, this.btnVisibleAreaClose]} );
                 if ( this.synchTooltip )
                     this.synchTooltip.hide();
                 if (!mode.enableDownload)
@@ -2929,6 +3271,14 @@ define([
         capInsertSpark: 'Sparklines',
         txtScheme22: 'New Office',
         textPrintGridlines: 'Print gridlines',
-        textPrintHeadings: 'Print headings'
+        textPrintHeadings: 'Print headings',
+        textShowVA: 'Show Visible Area',
+        textHideVA: 'Hide Visible Area',
+        textEditVA: 'Edit Visible Area',
+        tipVisibleArea: 'Visible area',
+        textDone: 'Done',
+        tipTextFormatting: 'More text formatting tools',
+        tipHAligh: 'Horizontal Align',
+        tipVAligh: 'Vertical Align'
     }, SSE.Views.Toolbar || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -3599,6 +3599,13 @@
   "SSE.Views.Toolbar.txtTime": "Time",
   "SSE.Views.Toolbar.txtUnmerge": "Unmerge Cells",
   "SSE.Views.Toolbar.txtYen": "¥ Yen",
+  "SSE.Views.Toolbar.textHideVA": "Hide Visible Area",
+  "SSE.Views.Toolbar.textEditVA": "Edit Visible Area",
+  "SSE.Views.Toolbar.tipVisibleArea": "Visible area",
+  "SSE.Views.Toolbar.textDone": "Done",
+  "SSE.Views.Toolbar.tipTextFormatting": "More text formatting tools",
+  "SSE.Views.Toolbar.tipHAligh": "Horizontal Align",
+  "SSE.Views.Toolbar.tipVAligh": "Vertical Align",
   "SSE.Views.Top10FilterDialog.textType": "Show",
   "SSE.Views.Top10FilterDialog.txtBottom": "Bottom",
   "SSE.Views.Top10FilterDialog.txtBy": "by",

apps/spreadsheeteditor/main/resources/less/toolbar.less

@@ -13,6 +13,10 @@
     .simple-bar {
         display: table;
         width: 100%;
+
+        .separator.short {
+            margin-top: 1px;
+        }
     }
 
     .font-attr {
@@ -113,10 +117,6 @@
     border: @scaled-one-px-value solid @border-regular-control;
 }
 
-#slot-field-fontname {
-    width: 127px;
-}
-
 #slot-field-fontsize {
     width: 45px;
 }