From d74909340b0e3ebe451003a540b9408819bad692 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 20 Aug 2019 11:05:52 +0300 Subject: [PATCH] [PE][SSE] Optimize shapes loading --- .../main/app/controller/Main.js | 1 - .../main/app/controller/Toolbar.js | 4 +- .../main/app/view/ShapeSettings.js | 2 +- .../main/app/controller/Main.js | 7 ++- .../main/app/controller/Toolbar.js | 2 +- .../main/app/view/ShapeSettings.js | 52 +++++++++-------- .../main/app/view/Toolbar.js | 43 +++++++------- .../main/app/controller/Main.js | 8 +-- .../main/app/controller/Toolbar.js | 56 ++++++++++--------- .../main/app/view/ShapeSettings.js | 52 +++++++++-------- 10 files changed, 122 insertions(+), 105 deletions(-) diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 5e4aacf3b..eb0e95c39 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -1801,7 +1801,6 @@ define([ shapeStore.reset(); - var groupscount = groupNames.length; _.each(groupNames, function(groupName, index){ var store = new Backbone.Collection([], { model: DE.Models.ShapeModel diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index ba5f65819..a5ddc7a86 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -2343,7 +2343,7 @@ define([ } }); } - me.toolbar.btnInsertShape.menu.off('show:after', onShowAfter); + menu.off('show:after', onShowAfter); }; for (var i = 0; i < shapesStore.length; i++) { @@ -2400,7 +2400,7 @@ define([ } }); } - me.toolbar.btnInsertEquation.menu.off('show:after', onShowAfter); + menu.off('show:after', onShowAfter); }; me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter); diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 64c8e61cc..d0aaaeaae 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -1637,7 +1637,7 @@ define([ me.btnChangeShape.menu.hide(); }); } - me.btnChangeShape.menu.off('show:after', onShowAfter); + menu.off('show:after', onShowAfter); }; for (var i=-1; i0; i++) { diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js index 8e682a5d2..0f2d1bcc8 100644 --- a/apps/presentationeditor/main/app/controller/Main.js +++ b/apps/presentationeditor/main/app/controller/Main.js @@ -1585,21 +1585,22 @@ define([ _.each(groupNames, function(groupName, index){ var store = new Backbone.Collection([], { model: PE.Models.ShapeModel - }); + }), + arr = []; var cols = (shapes[index].length) > 18 ? 7 : 6, height = Math.ceil(shapes[index].length/cols) * 35 + 3, width = 30 * cols; _.each(shapes[index], function(shape, idx){ - store.add({ + arr.push({ data : {shapeType: shape.Type}, tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)), allowSelected : true, selected: false }); }); - + store.add(arr); shapegrouparray.push({ groupName : me.shapeGroupNames[index], groupStore : store, diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 0705d16c9..89982786f 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -1759,7 +1759,7 @@ define([ } }); } - me.toolbar.btnInsertEquation.menu.off('show:after', onShowAfter); + menu.off('show:after', onShowAfter); }; me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter); diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 29335a3dc..95d8ef13e 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -1467,9 +1467,34 @@ define([ fillAutoShapes: function() { var me = this, - shapesStore = this.application.getCollection('ShapeGroups'); + shapesStore = this.application.getCollection('ShapeGroups'), + count = shapesStore.length; + + var onShowAfter = function(menu) { + for (var i=-1; i0; i++) { + var store = shapesStore.at(i > -1 ? i : 0).get('groupStore'); + if (i<0) { + store = store.clone(); + store.shift(); + } + var shapePicker = new Common.UI.DataViewSimple({ + el: $('#id-shape-menu-shapegroup' + (i+1)), + store: store, + parentMenu: menu.items[i+1].menu, + itemTemplate: _.template('
\">
') + }); + shapePicker.on('item:click', function(picker, item, record, e) { + if (me.api) { + me.api.ChangeShapeType(record.get('data').shapeType); + me.fireEvent('editcomplete', me); + } + if (e.type !== 'click') + me.btnChangeShape.menu.hide(); + }); + } + menu.off('show:after', onShowAfter); + }; - var count = shapesStore.length; for (var i=-1; i0; i++) { var shapeGroup = shapesStore.at(i>-1 ? i : i+1); var menuItem = new Common.UI.MenuItem({ @@ -1482,29 +1507,8 @@ define([ }) }); me.btnChangeShape.menu.addItem(menuItem); - - var store = shapeGroup.get('groupStore'); - if (i<0) { - store = store.clone(); - store.shift(); - } - var shapePicker = new Common.UI.DataView({ - el: $('#id-shape-menu-shapegroup' + (i+1)), - store: store, - parentMenu: menuItem.menu, - showLast: false, - itemTemplate: _.template('
\">
') - }); - - shapePicker.on('item:click', function(picker, item, record, e) { - if (me.api) { - me.api.ChangeShapeType(record.get('data').shapeType); - me.fireEvent('editcomplete', me); - } - if (e.type !== 'click') - me.btnChangeShape.menu.hide(); - }); } + me.btnChangeShape.menu.on('show:after', onShowAfter); }, UpdateThemeColors: function() { diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index b0e1a4f69..6146ee0b5 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1479,35 +1479,40 @@ define([ updateAutoshapeMenu: function (collection) { var me = this; - for (var i = 0; i < collection.size(); i++) { - var group = collection.at(i); + var onShowAfter = function(menu) { + for (var i = 0; i < collection.length; i++) { + var shapePicker = new Common.UI.DataViewSimple({ + el: $('.shapegroup-' + i, menu.items[i].$el), + store: collection.at(i).get('groupStore'), + parentMenu: menu.items[i].menu, + itemTemplate: _.template('
\">
') + }); + shapePicker.on('item:click', function(picker, item, record, e) { + if (e.type !== 'click') Common.UI.Menu.Manager.hideAll(); + if (record) + me.fireEvent('insert:shape', [record.get('data').shapeType]); + }); + } + menu.off('show:after', onShowAfter); + }; + + me.btnsInsertShape.forEach(function (btn, index) { + for (var i = 0; i < collection.size(); i++) { + var group = collection.at(i); - me.btnsInsertShape.forEach(function (btn, index) { var menuitem = new Common.UI.MenuItem({ caption: group.get('groupName'), menu: new Common.UI.Menu({ menuAlign: 'tl-tr', items: [ - { template: _.template('
') } + {template: _.template('
')} ] }) }); - btn.menu.addItem(menuitem); - - (new Common.UI.DataView({ - el: $('.shapegroup-' + i, menuitem.$el), - store: group.get('groupStore'), - parentMenu: menuitem.menu, - showLast: false, - itemTemplate: _.template('
\">
') - })).on('item:click', function (picker, item, record, e) { - if (e.type !== 'click') Common.UI.Menu.Manager.hideAll(); - if (record) - me.fireEvent('insert:shape', [record.get('data').shapeType]); - }); - }); - } + } + btn.menu.on('show:after', onShowAfter); + }); }, updateAddSlideMenu: function(collection) { diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js index 20187b35c..be85b9c87 100644 --- a/apps/spreadsheeteditor/main/app/controller/Main.js +++ b/apps/spreadsheeteditor/main/app/controller/Main.js @@ -1765,25 +1765,25 @@ define([ shapeStore.reset(); - var groupscount = groupNames.length; _.each(groupNames, function(groupName, index){ var store = new Backbone.Collection([], { model: SSE.Models.ShapeModel - }); + }), + arr = []; var cols = (shapes[index].length) > 18 ? 7 : 6, height = Math.ceil(shapes[index].length/cols) * 35 + 3, width = 30 * cols; _.each(shapes[index], function(shape, idx){ - store.add({ + arr.push({ data : {shapeType: shape.Type}, tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)), allowSelected : true, selected: false }); }); - + store.add(arr); shapegrouparray.push({ groupName : me.shapeGroupNames[index], groupStore : store, diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 050e1a2b7..73be5c408 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -2553,6 +2553,34 @@ define([ var me = this, shapesStore = this.getApplication().getCollection('ShapeGroups'); + var onShowAfter = function(menu) { + for (var i = 0; i < shapesStore.length; i++) { + var shapePicker = new Common.UI.DataViewSimple({ + el: $('#id-toolbar-menu-shapegroup' + i), + store: shapesStore.at(i).get('groupStore'), + parentMenu: menu.items[i].menu, + itemTemplate: _.template('
\">
') + }); + shapePicker.on('item:click', function(picker, item, record, e) { + if (me.api) { + if (record) { + me._addAutoshape(true, record.get('data').shapeType); + me._isAddingShape = true; + } + + if (me.toolbar.btnInsertText.pressed) { + me.toolbar.btnInsertText.toggle(false, true); + } + if (e.type !== 'click') + me.toolbar.btnInsertShape.menu.hide(); + Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape); + Common.component.Analytics.trackEvent('ToolBar', 'Add Shape'); + } + }); + } + menu.off('show:after', onShowAfter); + }; + for (var i = 0; i < shapesStore.length; i++) { var shapeGroup = shapesStore.at(i); @@ -2567,32 +2595,8 @@ define([ }); me.toolbar.btnInsertShape.menu.addItem(menuItem); - - var shapePicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-shapegroup' + i), - store: shapeGroup.get('groupStore'), - parentMenu: menuItem.menu, - showLast: false, - itemTemplate: _.template('
\">
') - }); - - shapePicker.on('item:click', function(picker, item, record, e) { - if (me.api) { - if (record) { - me._addAutoshape(true, record.get('data').shapeType); - me._isAddingShape = true; - } - - if (me.toolbar.btnInsertText.pressed) { - me.toolbar.btnInsertText.toggle(false, true); - } - if (e.type !== 'click') - me.toolbar.btnInsertShape.menu.hide(); - Common.NotificationCenter.trigger('edit:complete', me.toolbar, me.toolbar.btnInsertShape); - Common.component.Analytics.trackEvent('ToolBar', 'Add Shape'); - } - }); } + me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter); }, fillTextArt: function() { @@ -2676,7 +2680,7 @@ define([ } }); } - me.toolbar.btnInsertEquation.menu.off('show:after', onShowAfter); + menu.off('show:after', onShowAfter); }; me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter); diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index f95f2bb96..2ead04bd5 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -1483,9 +1483,34 @@ define([ fillAutoShapes: function() { var me = this, - shapesStore = this.application.getCollection('ShapeGroups'); + shapesStore = this.application.getCollection('ShapeGroups'), + count = shapesStore.length; + + var onShowAfter = function(menu) { + for (var i=-1; i0; i++) { + var store = shapesStore.at(i > -1 ? i : 0).get('groupStore'); + if (i<0) { + store = store.clone(); + store.shift(); + } + var shapePicker = new Common.UI.DataViewSimple({ + el: $('#id-shape-menu-shapegroup' + (i+1)), + store: store, + parentMenu: menu.items[i+1].menu, + itemTemplate: _.template('
\">
') + }); + shapePicker.on('item:click', function(picker, item, record, e) { + if (me.api) { + me.api.asc_changeShapeType(record.get('data').shapeType); + Common.NotificationCenter.trigger('edit:complete', me); + } + if (e.type !== 'click') + me.btnChangeShape.menu.hide(); + }); + } + menu.off('show:after', onShowAfter); + }; - var count = shapesStore.length; for (var i=-1; i0; i++) { var shapeGroup = shapesStore.at(i>-1 ? i : i+1); var menuItem = new Common.UI.MenuItem({ @@ -1498,29 +1523,8 @@ define([ }) }); me.btnChangeShape.menu.addItem(menuItem); - - var store = shapeGroup.get('groupStore'); - if (i<0) { - store = store.clone(); - store.shift(); - } - var shapePicker = new Common.UI.DataView({ - el: $('#id-shape-menu-shapegroup' + (i+1)), - store: store, - parentMenu: menuItem.menu, - showLast: false, - itemTemplate: _.template('
\">
') - }); - - shapePicker.on('item:click', function(picker, item, record, e) { - if (me.api) { - me.api.asc_changeShapeType(record.get('data').shapeType); - Common.NotificationCenter.trigger('edit:complete', me); - } - if (e.type !== 'click') - me.btnChangeShape.menu.hide(); - }); } + me.btnChangeShape.menu.on('show:after', onShowAfter); }, onBtnRotateClick: function(btn) {