Merge pull request #1818 from ONLYOFFICE/feature/sse-internal-resize

Feature/sse internal resize

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -98,12 +98,14 @@ define([
                         'drag': _.bind(function(o, state){
                             externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
+                        'resize': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:resize', state == 'start');
+                        },this),
                         'show': _.bind(function(cmp){
                             var h = this.diagramEditorView.getHeight(),
                                 innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
-                            if (innerHeight>h && h<700 || innerHeight<h) {
+                            if (innerHeight<h) {
-                                h = Math.min(innerHeight, 700);
+                                this.diagramEditorView.setHeight(innerHeight);
-                                this.diagramEditorView.setHeight(h);
                             }
 
                             if (externalEditor) {
@@ -226,12 +228,20 @@ define([
                     if (eventData.type == "processMouse") {
                         if (eventData.data.event == 'mouse:up') {
                             this.diagramEditorView.binding.dragStop();
+                            if (this.diagramEditorView.binding.resizeStop)  this.diagramEditorView.binding.resizeStop();
                         } else
                         if (eventData.data.event == 'mouse:move') {
                             var x = parseInt(this.diagramEditorView.$window.css('left')) + eventData.data.pagex,
                                 y = parseInt(this.diagramEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.diagramEditorView.binding.drag({pageX:x, pageY:y});
+                            if (this.diagramEditorView.binding.resize)  this.diagramEditorView.binding.resize({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "resize") {
+                        var w = eventData.data.width,
+                            h = eventData.data.height;
+                        if (w>0 && h>0)
+                            this.diagramEditorView.setInnerSize(w, h);
                     } else
                         this.diagramEditorView.fireEvent('internalmessage', this.diagramEditorView, eventData);
                 }
@@ -243,15 +253,6 @@ define([
                 }
             },
 
-            showExternalEditor: function () {
-                if ( externalEditor ) {
-                    var value = Common.localStorage.getItem("ui-theme-id", "theme-light");
-                    externalEditor.serviceCommand('theme:change', value);
-                }
-
-                this.diagramEditorView.show();
-            },
-
             warningTitle: 'Warning',
             warningText: 'The object is disabled because of editing by another user.',
             textClose: 'Close',

apps/common/main/lib/controller/ExternalMergeEditor.js

@@ -51,7 +51,8 @@ define([
         var appLang         = '{{DEFAULT_LANG}}',
             customization   = undefined,
             targetApp       = '',
-            externalEditor  = null;
+            externalEditor  = null,
+            isAppFirstOpened = true;
 
 
         var createExternalEditor = function() {
@@ -96,16 +97,22 @@ define([
                         'drag': _.bind(function(o, state){
                             externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
+                        'resize': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:resize', state == 'start');
+                        },this),
                         'show': _.bind(function(cmp){
                             var h = this.mergeEditorView.getHeight(),
                                 innerHeight = Common.Utils.innerHeight();
-                            if (innerHeight>h && h<700 || innerHeight<h) {
+                            if (innerHeight<h) {
-                                h = Math.min(innerHeight, 700);
+                                this.mergeEditorView.setHeight(innerHeight);
-                                this.mergeEditorView.setHeight(h);
                             }
 
                             if (externalEditor) {
                                 externalEditor.serviceCommand('setAppDisabled',false);
+                                if (isAppFirstOpened && this.mergeEditorView._isExternalDocReady) {
+                                    isAppFirstOpened = false;
+                                    this.mergeEditorView._mergeData && this.setMergeData();
+                                }
                                 if (this.needDisableEditing && this.mergeEditorView._isExternalDocReady) {
                                     this.onMergeEditingDisabled();
                                 }
@@ -114,6 +121,7 @@ define([
                                 createExternalEditor.apply(this);
                             }
                             this.isExternalEditorVisible = true;
+                            this.isHandlerCalled = false;
                         }, this),
                         'hide':  _.bind(function(cmp){
                             if (externalEditor) {
@@ -138,14 +146,22 @@ define([
             },
 
             handler: function(result, value) {
-                externalEditor && externalEditor.serviceCommand('queryClose',{mr:result});
+                if (this.isHandlerCalled) return;
-                return true;
+                this.isHandlerCalled = true;
+                if (this.mergeEditorView._isExternalDocReady)
+                    externalEditor && externalEditor.serviceCommand('queryClose',{mr:result});
+                else {
+                    this.mergeEditorView.hide();
+                    this.isHandlerCalled = false;
+                }
             },
 
             setMergeData: function() {
-                externalEditor && externalEditor.serviceCommand('setMergeData', this.mergeEditorView._mergeData);
+                if (!isAppFirstOpened) {
-                this.mergeEditorView.setEditMode(true);
+                    externalEditor && externalEditor.serviceCommand('setMergeData', this.mergeEditorView._mergeData);
-                this.mergeEditorView._mergeData = null;
+                    this.mergeEditorView.setEditMode(true);
+                    this.mergeEditorView._mergeData = null;
+                }
             },
 
             loadConfig: function(data) {
@@ -184,6 +200,7 @@ define([
                 if (this.mergeEditorView) {
                     if (eventData.type == 'documentReady') {
                         this.mergeEditorView._isExternalDocReady = true;
+                        this.isExternalEditorVisible && (isAppFirstOpened = false);
                         this.mergeEditorView.setControlsDisabled(false);
                         if (this.mergeEditorView._mergeData) {
                             externalEditor && externalEditor.serviceCommand('setMergeData', this.mergeEditorView._mergeData);
@@ -206,16 +223,25 @@ define([
                             }
                             this.mergeEditorView.hide();
                         }
+                        this.isHandlerCalled = false;
                     } else
                     if (eventData.type == "processMouse") {
                         if (eventData.data.event == 'mouse:up') {
                             this.mergeEditorView.binding.dragStop();
+                            if (this.mergeEditorView.binding.resizeStop)  this.mergeEditorView.binding.resizeStop();
                         } else
                         if (eventData.data.event == 'mouse:move') {
                             var x = parseInt(this.mergeEditorView.$window.css('left')) + eventData.data.pagex,
                                 y = parseInt(this.mergeEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.mergeEditorView.binding.drag({pageX:x, pageY:y});
+                            if (this.mergeEditorView.binding.resize)  this.mergeEditorView.binding.resize({pageX:x, pageY:y});
                         }
+                    } else
+                    if (eventData.type == "resize") {
+                        var w = eventData.data.width,
+                            h = eventData.data.height;
+                        if (w>0 && h>0)
+                            this.mergeEditorView.setInnerSize(w, h);
                     } else
                         this.mergeEditorView.fireEvent('internalmessage', this.mergeEditorView, eventData);
                 }

apps/common/main/lib/controller/ExternalOleEditor.js

@@ -98,12 +98,14 @@ define([
                         'drag': _.bind(function(o, state){
                             externalEditor && externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
+                        'resize': _.bind(function(o, state){
+                            externalEditor && externalEditor.serviceCommand('window:resize', state == 'start');
+                        },this),
                         'show': _.bind(function(cmp){
                             var h = this.oleEditorView.getHeight(),
                                 innerHeight = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
-                            if (innerHeight>h && h<700 || innerHeight<h) {
+                            if (innerHeight<h) {
-                                h = Math.min(innerHeight, 700);
+                                this.oleEditorView.setHeight(innerHeight);
-                                this.oleEditorView.setHeight(h);
                             }
 
                             if (externalEditor) {
@@ -131,8 +133,6 @@ define([
                         }, this)
                     }
                 });
-
-
             },
 
             onLaunch: function() {
@@ -224,12 +224,20 @@ define([
                     if (eventData.type == "processMouse") {
                         if (eventData.data.event == 'mouse:up') {
                             this.oleEditorView.binding.dragStop();
+                            if (this.oleEditorView.binding.resizeStop)  this.oleEditorView.binding.resizeStop();
                         } else
                         if (eventData.data.event == 'mouse:move') {
                             var x = parseInt(this.oleEditorView.$window.css('left')) + eventData.data.pagex,
                                 y = parseInt(this.oleEditorView.$window.css('top')) + eventData.data.pagey + 34;
                             this.oleEditorView.binding.drag({pageX:x, pageY:y});
+                            if (this.oleEditorView.binding.resize)  this.oleEditorView.binding.resize({pageX:x, pageY:y});
                         }
+                    }  else
+                    if (eventData.type == "resize") {
+                        var w = eventData.data.width,
+                            h = eventData.data.height;
+                        if (w>0 && h>0)
+                            this.oleEditorView.setInnerSize(w, h);
                     } else
                         this.oleEditorView.fireEvent('internalmessage', this.oleEditorView, eventData);
                 }
@@ -241,15 +249,6 @@ define([
                 }
             },
 
-            showExternalEditor: function () {
-                if ( externalEditor ) {
-                    var value = Common.localStorage.getItem("ui-theme-id", "theme-light");
-                    externalEditor.serviceCommand('theme:change', value);
-                }
-
-                this.oleEditorView.show();
-            },
-
             warningTitle: 'Warning',
             warningText: 'The object is disabled because of editing by another user.',
             textClose: 'Close',

apps/common/main/lib/view/ExternalDiagramEditor.js

@@ -39,59 +39,29 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalDiagramEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalDiagramEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
             var _options = {};
-            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
             _.extend(_options,  {
                 title: this.textTitle,
-                width: 910,
+                storageName: 'diagram-editor',
-                height: (_inner_height - 700)<0 ? _inner_height : 700,
+                sdkplaceholder: 'id-diagram-editor-placeholder',
-                cls: 'advanced-settings-dlg',
+                initwidth: 900,
-                header: true,
+                initheight: 700,
-                toolclose: 'hide',
+                minwidth: 730,
-                toolcallback: _.bind(this.onToolClose, this)
+                minheight: 275
             }, options);
 
-            this.template = [
-                '<div id="id-diagram-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
-                    '<div id="id-diagram-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._chartData = null;
-            this._isNewChart = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-diagram-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-diagram-editor-cancel')
-            });
-
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 
         show: function() {
             this.setPlaceholder();
-            Common.UI.Window.prototype.show.apply(this, arguments);
+            Common.Views.ExternalEditor.prototype.show.apply(this, arguments);
         },
 
         setChartData: function(data) {
@@ -100,55 +70,6 @@ define([
                 this.fireEvent('setchartdata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewChart = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewChart;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            if ( this.handler ) {
-                this.handler.call(this, event.currentTarget.attributes['result'].value);
-                return;
-            }
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler ) {
-                this.handler.call(this, 'cancel');
-                return;
-            }
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-85);
-
-                var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
-                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-                this.$window.css('left',left);
-                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
-            }
-        },
-
         setPlaceholder: function(placeholder) {
             this._placeholder = placeholder;
         },
@@ -157,8 +78,6 @@ define([
             return this._placeholder;
         },
 
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Chart Editor'
     }, Common.Views.ExternalDiagramEditor || {}));
 });

apps/common/main/lib/view/ExternalEditor.js

@@ -0,0 +1,195 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
+ * street, Riga, Latvia, EU, LV-1050.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+*/
+/**
+ *  ExternalEditor.js
+ *
+ *  Created by Julia Radzhabova on 22/06/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'common/main/lib/component/Window'
+], function () { 'use strict';
+
+    Common.Views.ExternalEditor = Common.UI.Window.extend(_.extend({
+        initialize : function(options) {
+            var filter = Common.localStorage.getKeysFilter(),
+                appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
+            this.storageName = appPrefix + (options.storageName || 'external-editor');
+
+            var _options = {},
+                width = options.initwidth || 900,
+                height = options.initheight || 700;
+            var value = Common.localStorage.getItem(this.storageName + '-width');
+            value && (width = parseInt(value));
+            value = Common.localStorage.getItem(this.storageName + '-height');
+            value && (height = parseInt(value));
+
+            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
+            _.extend(_options,  {
+                width: width,
+                height: (_inner_height - height)<0 ? _inner_height : height,
+                cls: 'advanced-settings-dlg',
+                header: true,
+                toolclose: 'hide',
+                toolcallback: _.bind(this.onToolClose, this),
+                resizable: true
+            }, options);
+
+            this._headerFooterHeight = 85;
+
+            this.template = [
+                '<div id="id-editor-container" class="box" style="height:' + (_options.height-this._headerFooterHeight) + 'px; padding: 0 5px;">',
+                    '<div id="' + (_options.sdkplaceholder || '') + '" style="width: 100%;height: 100%;"></div>',
+                '</div>',
+                '<div class="separator horizontal"></div>',
+                '<div class="footer" style="text-align: center;">',
+                    '<button id="id-btn-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
+                    '<button id="id-btn-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
+                '</div>'
+            ].join('');
+
+            _options.tpl = _.template(this.template)(_options);
+
+            this.handler = _options.handler;
+            this._isNewObject = true;
+            this.on('resize', _.bind(this.onWindowResize, this));
+            Common.UI.Window.prototype.initialize.call(this, _options);
+        },
+
+        render: function() {
+            Common.UI.Window.prototype.render.call(this);
+            this.boxEl = this.$window.find('.body > .box');
+
+            this.btnSave = new Common.UI.Button({
+                el: this.$window.find('#id-btn-editor-apply'),
+                disabled: true
+            });
+            this.btnCancel = new Common.UI.Button({
+                el: this.$window.find('#id-btn-editor-cancel')
+            });
+
+            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
+        },
+
+        show: function() {
+            Common.UI.Window.prototype.show.apply(this, arguments);
+        },
+
+        setEditMode: function(mode) {
+            this._isNewObject = !mode;
+        },
+
+        isEditMode: function() {
+            return !this._isNewObject;
+        },
+
+        setControlsDisabled: function(disable) {
+            this.btnSave.setDisabled(disable);
+            this.btnCancel.setDisabled(disable);
+            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
+        },
+
+        onDlgBtnClick: function(event) {
+            if ( this.handler ) {
+                this.handler.call(this, event.currentTarget.attributes['result'].value);
+                return;
+            }
+            this.hide();
+        },
+
+        onToolClose: function() {
+            if ( this.handler ) {
+                this.handler.call(this, 'cancel');
+                return;
+            }
+            this.hide();
+        },
+
+        setHeight: function(height) {
+            if (height >= 0) {
+                var min = parseInt(this.$window.css('min-height'));
+                height < min && (height = min);
+                this.$window.height(height);
+
+                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
+
+                this.$window.find('> .body').css('height', height-header_height);
+                this.$window.find('> .body > .box').css('height', height-this._headerFooterHeight);
+            }
+        },
+
+        setInCenter: function() {
+            var height = this.$window.height(),
+                top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2,
+                left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
+
+            this.$window.css('left',left);
+            this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
+        },
+
+        setInnerSize: function(width, height) {
+            var maxHeight = Common.Utils.innerHeight(),
+                maxWidth = Common.Utils.innerWidth(),
+                borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width'))),
+                paddings = (parseInt(this.boxEl.css('padding-left')) + parseInt(this.boxEl.css('padding-right')));
+            height += 90; // add toolbar and statusbar height
+            if (maxHeight<height + this._headerFooterHeight)
+                height = maxHeight - this._headerFooterHeight;
+            if (maxWidth<width + paddings + borders_width)
+                width = maxWidth - paddings - borders_width;
+
+            this.boxEl.css('height', height);
+
+            this.setHeight(height + this._headerFooterHeight);
+            this.setWidth(width + paddings + borders_width);
+
+            if (this.getLeft()<0)
+                this.$window.css('left', 0);
+            if (this.getTop() < Common.Utils.InternalSettings.get('window-inactive-area-top') )
+                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top'));
+        },
+
+        onWindowResize: function (args) {
+            if (args && args[1]=='end') {
+                var value = this.getSize();
+                Common.localStorage.setItem(this.storageName + '-width', value[0]);
+                Common.localStorage.setItem(this.storageName + '-height', value[1]);
+            }
+        },
+
+        textSave: 'Save & Exit',
+        textClose: 'Close'
+    }, Common.Views.ExternalEditor || {}));
+});

apps/common/main/lib/view/ExternalMergeEditor.js

@@ -39,55 +39,24 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalMergeEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalMergeEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
             var _options = {};
             _.extend(_options,  {
                 title: this.textTitle,
-                width: 910,
+                storageName: 'merge-editor',
-                height: (Common.Utils.innerHeight()-700)<0 ? Common.Utils.innerHeight(): 700,
+                sdkplaceholder: 'id-merge-editor-placeholder',
-                cls: 'advanced-settings-dlg',
+                initwidth: 900,
-                header: true,
+                initheight: 700,
-                toolclose: 'hide',
+                minwidth: 370,
-                toolcallback: _.bind(this.onToolClose, this)
+                minheight: 275
             }, options);
 
-            this.template = [
-                '<div id="id-merge-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
-                    '<div id="id-merge-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-merge-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-merge-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._mergeData = null;
-            this._isNewMerge = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-merge-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-merge-editor-cancel'),
-                disabled: true
-            });
-
-            this.$window.find('.tool.close').addClass('disabled');
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
         },
 
         setMergeData: function(data) {
@@ -96,54 +65,6 @@ define([
                 this.fireEvent('setmergedata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewMerge = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewMerge;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            var state = event.currentTarget.attributes['result'].value;
-            if ( this.handler && this.handler.call(this, state) )
-                return;
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler && this.handler.call(this, 'cancel') )
-                return;
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-85);
-
-                var top  = (Common.Utils.innerHeight() - parseInt(height)) / 2;
-                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-                this.$window.css('left',left);
-                this.$window.css('top',top);
-            }
-        },
-
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Mail Merge Recipients'
     }, Common.Views.ExternalMergeEditor || {}));
 });

apps/common/main/lib/view/ExternalOleEditor.js

@@ -39,59 +39,24 @@
  */
 
 define([
-    'common/main/lib/component/Window'
+    'common/main/lib/view/ExternalEditor'
 ], function () { 'use strict';
 
-    Common.Views.ExternalOleEditor = Common.UI.Window.extend(_.extend({
+    Common.Views.ExternalOleEditor = Common.Views.ExternalEditor.extend(_.extend({
         initialize : function(options) {
             var _options = {};
-            var _inner_height = Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top');
             _.extend(_options,  {
                 title: this.textTitle,
-                width: 910,
+                storageName: 'ole-editor',
-                height: (_inner_height - 700)<0 ? _inner_height : 700,
+                sdkplaceholder: 'id-ole-editor-placeholder',
-                cls: 'advanced-settings-dlg',
+                initwidth: 900,
-                header: true,
+                initheight: 700,
-                toolclose: 'hide',
+                minwidth: 840,
-                toolcallback: _.bind(this.onToolClose, this)
+                minheight: 275
             }, options);
 
-            this.template = [
-                '<div id="id-ole-editor-container" class="box" style="height:' + (_options.height-85) + 'px;">',
-                    '<div id="id-ole-editor-placeholder" style="width: 100%;height: 100%;"></div>',
-                '</div>',
-                '<div class="separator horizontal"></div>',
-                '<div class="footer" style="text-align: center;">',
-                    '<button id="id-btn-ole-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
-                    '<button id="id-btn-ole-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
-                '</div>'
-            ].join('');
-
-            _options.tpl = _.template(this.template)(_options);
-
-            this.handler = _options.handler;
             this._oleData = null;
-            this._isNewOle = true;
+            Common.Views.ExternalEditor.prototype.initialize.call(this, _options);
-            Common.UI.Window.prototype.initialize.call(this, _options);
-        },
-
-        render: function() {
-            Common.UI.Window.prototype.render.call(this);
-
-            this.btnSave = new Common.UI.Button({
-                el: $('#id-btn-ole-editor-apply'),
-                disabled: true
-            });
-            this.btnCancel = new Common.UI.Button({
-                el: $('#id-btn-ole-editor-cancel')
-            });
-
-            this.$window.find('.dlg-btn').on('click', _.bind(this.onDlgBtnClick, this));
-        },
-
-        show: function() {
-            this.setPlaceholder();
-            Common.UI.Window.prototype.show.apply(this, arguments);
         },
 
         setOleData: function(data) {
@@ -100,65 +65,6 @@ define([
                 this.fireEvent('setoledata', this);
         },
 
-        setEditMode: function(mode) {
-            this._isNewOle = !mode;
-        },
-
-        isEditMode: function() {
-            return !this._isNewOle;
-        },
-
-        setControlsDisabled: function(disable) {
-            this.btnSave.setDisabled(disable);
-            this.btnCancel.setDisabled(disable);
-            (disable) ? this.$window.find('.tool.close').addClass('disabled') : this.$window.find('.tool.close').removeClass('disabled');
-        },
-
-        onDlgBtnClick: function(event) {
-            if ( this.handler ) {
-                this.handler.call(this, event.currentTarget.attributes['result'].value);
-                return;
-            }
-            this.hide();
-        },
-
-        onToolClose: function() {
-            if ( this.handler ) {
-                this.handler.call(this, 'cancel');
-                return;
-            }
-            this.hide();
-        },
-
-        setHeight: function(height) {
-            if (height >= 0) {
-                var min = parseInt(this.$window.css('min-height'));
-                height < min && (height = min);
-                this.$window.height(height);
-
-                var header_height = (this.initConfig.header) ? parseInt(this.$window.find('> .header').css('height')) : 0;
-
-                this.$window.find('> .body').css('height', height-header_height);
-                this.$window.find('> .body > .box').css('height', height-85);
-
-                var top  = (Common.Utils.innerHeight() - Common.Utils.InternalSettings.get('window-inactive-area-top') - parseInt(height)) / 2;
-                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
-
-                this.$window.css('left',left);
-                this.$window.css('top', Common.Utils.InternalSettings.get('window-inactive-area-top') + top);
-            }
-        },
-
-        setPlaceholder: function(placeholder) {
-            this._placeholder = placeholder;
-        },
-
-        getPlaceholder: function() {
-            return this._placeholder;
-        },
-
-        textSave: 'Save & Exit',
-        textClose: 'Close',
         textTitle: 'Spreadsheet Editor'
     }, Common.Views.ExternalOleEditor || {}));
 });

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

@@ -2159,14 +2159,12 @@ define([
                     chart.changeType(type);
                 Common.NotificationCenter.trigger('edit:complete', this.toolbar);
             } else {
-                var controller = this.getApplication().getController('Common.Controllers.ExternalDiagramEditor');
                 if (!this.diagramEditor)
-                    this.diagramEditor = controller.getView('Common.Views.ExternalDiagramEditor');
+                    this.diagramEditor = this.getApplication().getController('Common.Controllers.ExternalDiagramEditor').getView('Common.Views.ExternalDiagramEditor');
 
                 if (this.diagramEditor && me.api) {
                     this.diagramEditor.setEditMode(false);
-                    // this.diagramEditor.show();
+                    this.diagramEditor.show();
-                    controller.showExternalEditor();
 
                     chart = me.api.asc_getChartObject(type);
                     if (chart) {

apps/documenteditor/main/locale/en.json

@@ -279,12 +279,15 @@
   "Common.Views.CopyWarningDialog.textToPaste": "for Paste",
   "Common.Views.DocumentAccessDialog.textLoading": "Loading...",
   "Common.Views.DocumentAccessDialog.textTitle": "Sharing Settings",
-  "Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "Common.Views.ExternalEditor.textClose": "Close",
-  "Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
+  "Common.Views.ExternalEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "del_Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
   "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
-  "Common.Views.ExternalMergeEditor.textClose": "Close",
+  "del_Common.Views.ExternalMergeEditor.textClose": "Close",
-  "Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalMergeEditor.textSave": "Save & Exit",
   "Common.Views.ExternalMergeEditor.textTitle": "Mail Merge Recipients",
+  "Common.Views.ExternalOleEditor.textTitle": "Spreadsheet Editor",
   "Common.Views.Header.labelCoUsersDescr": "Users who are editing the file:",
   "Common.Views.Header.textAddFavorite": "Mark as favorite",
   "Common.Views.Header.textAdvSettings": "Advanced settings",

apps/presentationeditor/main/locale/en.json

@@ -366,9 +366,12 @@
   "Common.Views.CopyWarningDialog.textToPaste": "for Paste",
   "Common.Views.DocumentAccessDialog.textLoading": "Loading...",
   "Common.Views.DocumentAccessDialog.textTitle": "Sharing Settings",
-  "Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "Common.Views.ExternalEditor.textClose": "Close",
-  "Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
+  "Common.Views.ExternalEditor.textSave": "Save & Exit",
+  "del_Common.Views.ExternalDiagramEditor.textClose": "Close",
+  "del_Common.Views.ExternalDiagramEditor.textSave": "Save & Exit",
   "Common.Views.ExternalDiagramEditor.textTitle": "Chart Editor",
+  "Common.Views.ExternalOleEditor.textTitle": "Spreadsheet Editor",
   "Common.Views.Header.labelCoUsersDescr": "Users who are editing the file:",
   "Common.Views.Header.textAddFavorite": "Mark as favorite",
   "Common.Views.Header.textAdvSettings": "Advanced settings",

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

@@ -1415,7 +1415,7 @@ define([
                             Common.Gateway.internalMessage('processMouse', {event: 'mouse:up'});
                         })
                         .mousemove($.proxy(function(e){
-                            if (this.isDiagramDrag) {
+                            if (this.isDiagramDrag || this.isDiagramResize) {
                                 Common.Gateway.internalMessage('processMouse', {event: 'mouse:move', pagex: e.pageX*Common.Utils.zoom(), pagey: e.pageY*Common.Utils.zoom()});
                             }
                         },this));
@@ -2572,6 +2572,9 @@ define([
                     case 'window:drag':
                         this.isDiagramDrag = data.data;
                         break;
+                    case 'window:resize':
+                        this.isDiagramResize = data.data;
+                        break;
                     case 'processmouse':
                         this.onProcessMouse(data.data);
                         break;

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

@@ -23,7 +23,7 @@
                 <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>
+                    <span class="btn-slot" id="slot-btn-format" style="width: 80px; vertical-align: middle;"></span>
                 </div>
             </div>
             <div class="separator short"></div>
@@ -86,9 +86,9 @@
             </div>
             <div class="separator short"></div>
             <div class="group small">
-                <div class="elset" style="width: 202px;">
+                <div class="elset" style="width: 172px;">
-                    <span class="btn-slot" id="slot-field-fontname" style="width: 100px;float: left;"></span>
+                    <span class="btn-slot" id="slot-field-fontname" style="width: 80px;float: left;"></span>
-                    <span class="btn-slot" id="slot-field-fontsize" style="margin-left: 2px;float: left;"></span>
+                    <span class="btn-slot" id="slot-field-fontsize" style="width: 35px;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>
@@ -113,7 +113,7 @@
             <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>
+                    <span class="btn-slot" id="slot-btn-format" style="width: 80px; float: left;"></span>
                 </div>
             </div>
             <div class="separator short"></div>
@@ -128,7 +128,7 @@
                     <span class="btn-slot" id="slot-btn-search"></span>
                 </div>
             </div>
-            <div class="group" style="width: 100%;"></div>
+            <div class="group" style="width: 100%;padding-left: 0;"></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>