[DE] Optimize shapes loading

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

@@ -1805,21 +1805,22 @@ define([
                 _.each(groupNames, function(groupName, index){
                     var store = new Backbone.Collection([], {
                         model: DE.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,
@@ -1829,7 +1830,6 @@ define([
                 });
 
                 shapeStore.add(shapegrouparray);
-
                 setTimeout(function(){
                     me.getApplication().getController('Toolbar').fillAutoShapes();
                 }, 50);

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

@@ -2317,29 +2317,14 @@ define([
             var me = this,
                 shapesStore = this.getApplication().getCollection('ShapeGroups');
 
+            var onShowAfter = function(menu) {
                 for (var i = 0; i < shapesStore.length; i++) {
-                var shapeGroup = shapesStore.at(i);
+                    var shapePicker = new Common.UI.DataViewSimple({
-
-                var menuItem = new Common.UI.MenuItem({
-                    caption: shapeGroup.get('groupName'),
-                    menu: new Common.UI.Menu({
-                        menuAlign: 'tl-tr',
-                        items: [
-                            { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
-                        ]
-                    })
-                });
-
-                me.toolbar.btnInsertShape.menu.addItem(menuItem);
-
-                var shapePicker = new Common.UI.DataView({
                         el: $('#id-toolbar-menu-shapegroup' + i),
-                    store: shapeGroup.get('groupStore'),
+                        store: shapesStore.at(i).get('groupStore'),
-                    parentMenu: menuItem.menu,
+                        parentMenu: menu.items[i].menu,
-                    showLast: false,
                         itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
                     });
-
                     shapePicker.on('item:click', function(picker, item, record, e) {
                         if (me.api) {
                             if (record) {
@@ -2358,6 +2343,24 @@ define([
                         }
                     });
                 }
+                me.toolbar.btnInsertShape.menu.off('show:after', onShowAfter);
+            };
+
+            for (var i = 0; i < shapesStore.length; i++) {
+                var shapeGroup = shapesStore.at(i);
+
+                var menuItem = new Common.UI.MenuItem({
+                    caption: shapeGroup.get('groupName'),
+                    menu: new Common.UI.Menu({
+                        menuAlign: 'tl-tr',
+                        items: [
+                            { template: _.template('<div id="id-toolbar-menu-shapegroup' + i + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
+                        ]
+                    })
+                });
+                me.toolbar.btnInsertShape.menu.addItem(menuItem);
+            }
+            me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
         },
 
         fillEquations: function() {

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

@@ -1612,35 +1612,22 @@ define([
 
         fillAutoShapes: function() {
             var me = this,
-                shapesStore = this.application.getCollection('ShapeGroups');
+                shapesStore = this.application.getCollection('ShapeGroups'),
+                count = shapesStore.length;
 
-            var count = shapesStore.length;
+            var onShowAfter = function(menu) {
                 for (var i=-1; i<count-1 && count>0; i++) {
-                var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
+                    var store = shapesStore.at(i > -1 ? i : 0).get('groupStore');
-                var menuItem = new Common.UI.MenuItem({
-                    caption: shapeGroup.get('groupName'),
-                    menu: new Common.UI.Menu({
-                        menuAlign: 'tr-tl',
-                        items: [
-                            { template: _.template('<div id="id-shape-menu-shapegroup' + (i+1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
-                        ]
-                    })
-                });
-                me.btnChangeShape.menu.addItem(menuItem);
-
-                var store = shapeGroup.get('groupStore');
                     if (i<0) {
                         store = store.clone();
                         store.shift();
                     }
-                var shapePicker = new Common.UI.DataView({
+                    var shapePicker = new Common.UI.DataViewSimple({
                         el: $('#id-shape-menu-shapegroup' + (i+1)),
                         store: store,
-                    parentMenu: menuItem.menu,
+                        parentMenu: menu.items[i+1].menu,
-                    showLast: false,
                         itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>')
                     });
-
                     shapePicker.on('item:click', function(picker, item, record, e) {
                         if (me.api) {
                             me.api.ChangeShapeType(record.get('data').shapeType);
@@ -1650,6 +1637,23 @@ define([
                             me.btnChangeShape.menu.hide();
                     });
                 }
+                me.btnChangeShape.menu.off('show:after', onShowAfter);
+            };
+
+            for (var i=-1; i<count-1 && count>0; i++) {
+                var shapeGroup = shapesStore.at(i > -1 ? i : i + 1);
+                var menuItem = new Common.UI.MenuItem({
+                    caption: shapeGroup.get('groupName'),
+                    menu: new Common.UI.Menu({
+                        menuAlign: 'tr-tl',
+                        items: [
+                            {template: _.template('<div id="id-shape-menu-shapegroup' + (i + 1) + '" class="menu-shape" style="width: ' + (shapeGroup.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
+                        ]
+                    })
+                });
+                me.btnChangeShape.menu.addItem(menuItem);
+            }
+            me.btnChangeShape.menu.on('show:after', onShowAfter);
         },
 
         UpdateThemeColors: function() {