From b8b6c9edaeb1bfa1d38d8f11fb65dcf6799f8bd9 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 20 Aug 2019 14:05:13 +0300 Subject: [PATCH] Render autoshapes after menu is opened --- .../main/app/controller/Main.js | 3 +- .../main/app/controller/Toolbar.js | 15 +++++++-- .../main/app/view/ShapeSettings.js | 23 ++++++++++--- .../main/app/controller/Toolbar.js | 11 +++++-- .../main/app/view/ShapeSettings.js | 23 ++++++++++--- .../main/app/view/Toolbar.js | 32 +++++++++---------- .../main/app/controller/Main.js | 2 +- .../main/app/controller/Toolbar.js | 13 ++++++-- .../main/app/view/ShapeSettings.js | 23 ++++++++++--- 9 files changed, 102 insertions(+), 43 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index eb0e95c39..70eb5f419 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1830,9 +1830,8 @@ define([ shapeStore.add(shapegrouparray); setTimeout(function(){ - me.getApplication().getController('Toolbar').fillAutoShapes(); + me.getApplication().getController('Toolbar').onApiAutoShapes(); }, 50); - }, fillTextArt: function(shapes){ diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index a5ddc7a86..23ad1c6d5 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -2313,6 +2313,15 @@ define([ this._state.clrtext_asccolor = color; }, + onApiAutoShapes: function() { + var me = this; + var onShowBefore = function(menu) { + me.fillAutoShapes(); + menu.off('show:before', onShowBefore); + }; + me.toolbar.btnInsertShape.menu.on('show:before', onShowBefore); + }, + fillAutoShapes: function() { var me = this, shapesStore = this.getApplication().getCollection('ShapeGroups'); @@ -2320,7 +2329,7 @@ define([ var onShowAfter = function(menu) { for (var i = 0; i < shapesStore.length; i++) { var shapePicker = new Common.UI.DataViewSimple({ - el: $('#id-toolbar-menu-shapegroup' + i), + el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el), store: shapesStore.at(i).get('groupStore'), parentMenu: menu.items[i].menu, itemTemplate: _.template('
\">
') @@ -2345,6 +2354,7 @@ define([ } menu.off('show:after', onShowAfter); }; + me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter); for (var i = 0; i < shapesStore.length; i++) { var shapeGroup = shapesStore.at(i); @@ -2360,7 +2370,6 @@ define([ }); me.toolbar.btnInsertShape.menu.addItem(menuItem); } - me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter); }, fillEquations: function() { @@ -2372,7 +2381,7 @@ define([ var onShowAfter = function(menu) { for (var i = 0; i < equationsStore.length; ++i) { var equationPicker = new Common.UI.DataViewSimple({ - el: $('#id-toolbar-menu-equationgroup' + i), + el: $('#id-toolbar-menu-equationgroup' + i, menu.items[i].$el), parentMenu: menu.items[i].menu, store: equationsStore.at(i).get('groupStore'), scrollAlwaysVisible: true, diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index d0aaaeaae..43176d54b 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -100,7 +100,8 @@ define([ DisabledFillPanels: false, DisabledControls: false, HideShapeOnlySettings: false, - HideChangeTypeSettings: false + HideChangeTypeSettings: false, + isFromImage: false }; this.lockedControls = []; this._locked = false; @@ -785,7 +786,8 @@ define([ || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5' || shapetype=='straightConnector1'; this.hideChangeTypeSettings(hidechangetype); - if (!hidechangetype) { + this._state.isFromImage = !!shapeprops.get_FromImage(); + if (!hidechangetype && this.btnChangeShape.menu.items.length) { this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage()); this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage()); } @@ -1513,7 +1515,7 @@ define([ this.PatternFillType = this.patternViewData[0].type; } - this.fillAutoShapes(); + this.onApiAutoShapes(); this.UpdateThemeColors(); this._initSettings = false; }, @@ -1610,6 +1612,15 @@ define([ this.fireEvent('editcomplete', this); }, + onApiAutoShapes: function() { + var me = this; + var onShowBefore = function(menu) { + me.fillAutoShapes(); + menu.off('show:before', onShowBefore); + }; + me.btnChangeShape.menu.on('show:before', onShowBefore); + }, + fillAutoShapes: function() { var me = this, shapesStore = this.application.getCollection('ShapeGroups'), @@ -1623,7 +1634,7 @@ define([ store.shift(); } var shapePicker = new Common.UI.DataViewSimple({ - el: $('#id-shape-menu-shapegroup' + (i+1)), + el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el), store: store, parentMenu: menu.items[i+1].menu, itemTemplate: _.template('
\">
') @@ -1639,6 +1650,7 @@ define([ } menu.off('show:after', onShowAfter); }; + me.btnChangeShape.menu.on('show:after', onShowAfter); for (var i=-1; i0; i++) { var shapeGroup = shapesStore.at(i > -1 ? i : i + 1); @@ -1653,7 +1665,8 @@ define([ }); me.btnChangeShape.menu.addItem(menuItem); } - me.btnChangeShape.menu.on('show:after', onShowAfter); + me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage); + me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage); }, UpdateThemeColors: function() { diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 89982786f..6c03379e5 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -1703,9 +1703,14 @@ define([ }, onResetAutoshapes: function () { - setTimeout(function () { - this.toolbar.updateAutoshapeMenu(PE.getCollection('ShapeGroups')); - }.bind(this), 0); + var me = this; + var onShowBefore = function(menu) { + me.toolbar.updateAutoshapeMenu(menu, PE.getCollection('ShapeGroups')); + menu.off('show:before', onShowBefore); + }; + me.toolbar.btnsInsertShape.forEach(function (btn, index) { + btn.menu.on('show:before', onShowBefore); + }); }, onResetTextArt: function (collection, opts) { diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 95d8ef13e..c400969e7 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -95,7 +95,8 @@ define([ DisabledFillPanels: false, DisabledControls: false, HideShapeOnlySettings: false, - HideChangeTypeSettings: false + HideChangeTypeSettings: false, + isFromImage: false }; this.lockedControls = []; this._locked = false; @@ -717,7 +718,8 @@ define([ || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5' || shapetype=='straightConnector1'; this.hideChangeTypeSettings(hidechangetype); - if (!hidechangetype) { + this._state.isFromImage = !!props.get_FromImage(); + if (!hidechangetype && this.btnChangeShape.menu.items.length) { this.btnChangeShape.menu.items[0].setVisible(props.get_FromImage()); this.btnChangeShape.menu.items[1].setVisible(!props.get_FromImage()); } @@ -1388,7 +1390,7 @@ define([ this.PatternFillType = this.patternViewData[0].type; } - this.fillAutoShapes(); + this.onApiAutoShapes(); this.UpdateThemeColors(); this._initSettings = false; }, @@ -1465,6 +1467,15 @@ define([ this.fireEvent('editcomplete', this); }, + onApiAutoShapes: function() { + var me = this; + var onShowBefore = function(menu) { + me.fillAutoShapes(); + menu.off('show:before', onShowBefore); + }; + me.btnChangeShape.menu.on('show:before', onShowBefore); + }, + fillAutoShapes: function() { var me = this, shapesStore = this.application.getCollection('ShapeGroups'), @@ -1478,7 +1489,7 @@ define([ store.shift(); } var shapePicker = new Common.UI.DataViewSimple({ - el: $('#id-shape-menu-shapegroup' + (i+1)), + el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el), store: store, parentMenu: menu.items[i+1].menu, itemTemplate: _.template('
\">
') @@ -1494,6 +1505,7 @@ define([ } menu.off('show:after', onShowAfter); }; + me.btnChangeShape.menu.on('show:after', onShowAfter); for (var i=-1; i0; i++) { var shapeGroup = shapesStore.at(i>-1 ? i : i+1); @@ -1508,7 +1520,8 @@ define([ }); me.btnChangeShape.menu.addItem(menuItem); } - me.btnChangeShape.menu.on('show:after', onShowAfter); + me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage); + me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage); }, UpdateThemeColors: function() { diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 6146ee0b5..971984ba8 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1477,7 +1477,7 @@ define([ } }, - updateAutoshapeMenu: function (collection) { + updateAutoshapeMenu: function (menuShape, collection) { var me = this; var onShowAfter = function(menu) { for (var i = 0; i < collection.length; i++) { @@ -1495,24 +1495,22 @@ define([ } menu.off('show:after', onShowAfter); }; + menuShape.on('show:after', onShowAfter); - me.btnsInsertShape.forEach(function (btn, index) { - for (var i = 0; i < collection.size(); i++) { - var group = collection.at(i); + for (var i = 0; i < collection.size(); i++) { + var group = collection.at(i); - var menuitem = new Common.UI.MenuItem({ - caption: group.get('groupName'), - menu: new Common.UI.Menu({ - menuAlign: 'tl-tr', - items: [ - {template: _.template('
')} - ] - }) - }); - btn.menu.addItem(menuitem); - } - btn.menu.on('show:after', onShowAfter); - }); + var menuitem = new Common.UI.MenuItem({ + caption: group.get('groupName'), + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + items: [ + {template: _.template('
')} + ] + }) + }); + menuShape.addItem(menuitem); + } }, updateAddSlideMenu: function(collection) { diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index be85b9c87..a007c5b30 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -1795,7 +1795,7 @@ define([ shapeStore.add(shapegrouparray); setTimeout(function(){ - me.getApplication().getController('Toolbar').fillAutoShapes(); + me.getApplication().getController('Toolbar').onApiAutoShapes(); }, 50); }, diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 73be5c408..56c1147db 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -2549,6 +2549,15 @@ define([ Common.NotificationCenter.trigger('edit:complete', this.toolbar); }, + onApiAutoShapes: function() { + var me = this; + var onShowBefore = function(menu) { + me.fillAutoShapes(); + menu.off('show:before', onShowBefore); + }; + me.toolbar.btnInsertShape.menu.on('show:before', onShowBefore); + }, + fillAutoShapes: function() { var me = this, shapesStore = this.getApplication().getCollection('ShapeGroups'); @@ -2556,7 +2565,7 @@ define([ var onShowAfter = function(menu) { for (var i = 0; i < shapesStore.length; i++) { var shapePicker = new Common.UI.DataViewSimple({ - el: $('#id-toolbar-menu-shapegroup' + i), + el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el), store: shapesStore.at(i).get('groupStore'), parentMenu: menu.items[i].menu, itemTemplate: _.template('
\">
') @@ -2580,6 +2589,7 @@ define([ } menu.off('show:after', onShowAfter); }; + me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter); for (var i = 0; i < shapesStore.length; i++) { var shapeGroup = shapesStore.at(i); @@ -2596,7 +2606,6 @@ define([ me.toolbar.btnInsertShape.menu.addItem(menuItem); } - me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter); }, fillTextArt: function() { diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 2ead04bd5..57016486a 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -96,7 +96,8 @@ define([ DisabledFillPanels: false, DisabledControls: false, HideShapeOnlySettings: false, - HideChangeTypeSettings: false + HideChangeTypeSettings: false, + isFromImage: false }; this.lockedControls = []; this._locked = false; @@ -741,7 +742,8 @@ define([ || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5' || shapetype=='straightConnector1'; this.hideChangeTypeSettings(hidechangetype); - if (!hidechangetype) { + this._state.isFromImage = !!shapeprops.get_FromImage(); + if (!hidechangetype && this.btnChangeShape.menu.items.length) { this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage()); this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage()); } @@ -1412,7 +1414,7 @@ define([ this.PatternFillType = this.patternViewData[0].type; } - this.fillAutoShapes(); + this.onApiAutoShapes(); this.UpdateThemeColors(); this._initSettings = false; }, @@ -1481,6 +1483,15 @@ define([ Common.NotificationCenter.trigger('edit:complete', this); }, + onApiAutoShapes: function() { + var me = this; + var onShowBefore = function(menu) { + me.fillAutoShapes(); + menu.off('show:before', onShowBefore); + }; + me.btnChangeShape.menu.on('show:before', onShowBefore); + }, + fillAutoShapes: function() { var me = this, shapesStore = this.application.getCollection('ShapeGroups'), @@ -1494,7 +1505,7 @@ define([ store.shift(); } var shapePicker = new Common.UI.DataViewSimple({ - el: $('#id-shape-menu-shapegroup' + (i+1)), + el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el), store: store, parentMenu: menu.items[i+1].menu, itemTemplate: _.template('
\">
') @@ -1510,6 +1521,7 @@ define([ } menu.off('show:after', onShowAfter); }; + me.btnChangeShape.menu.on('show:after', onShowAfter); for (var i=-1; i0; i++) { var shapeGroup = shapesStore.at(i>-1 ? i : i+1); @@ -1524,7 +1536,8 @@ define([ }); me.btnChangeShape.menu.addItem(menuItem); } - me.btnChangeShape.menu.on('show:after', onShowAfter); + me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage); + me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage); }, onBtnRotateClick: function(btn) {