[PE] Fix ComboDataViewShape component

apps/common/main/lib/component/ComboDataViewShape.js

@@ -96,7 +96,7 @@ define([
             this.fieldPicker = new Common.UI.DataView({
                 cls: 'field-picker',
                 allowScrollbar: 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>'),
+                itemTemplate: _.template('<div class="item-shape" id="<%= id %>" data-shape="<%= data.shapeType %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
                 delayRenderTips: this.delayRenderTips
             });
 
@@ -124,24 +124,45 @@ define([
         },
 
         fillComboView: function (collection) {
-            var newStyles = [],
+            var groups = collection.toJSON(),
-                store = collection.at(0).get('groupStore').toJSON(),
                 recents = Common.localStorage.getItem(this.appPrefix + 'recent-shapes');
             recents = recents ? JSON.parse(recents) : [];
 
-            if (recents.length > 0) {
+            if (recents.length < 12) {
-                for(var i = 0; i < recents.length && i < 12; i ++) {
+                var count = 12 - recents.length;
-                    newStyles.push(recents[i]);
+
+                var addItem = function (rec) {
+                    var item = rec.toJSON(),
+                        model = {
+                            data: item.data,
+                            tip: item.tip,
+                            allowSelected: item.allowSelected,
+                            selected: false
+                        };
+                    recents.push(model);
+                };
+
+                for (var j = 0; j < groups.length && count > 0; j++) {
+                    var groupStore = groups[j].groupStore;
+                    if (j === 0) {
+                        addItem(groupStore.at(1));
+                        count--;
+                        if (count > 0) {
+                            addItem(groupStore.at(2));
+                            count--;
+                        }
+                    } else if (j !== 3 && j !== 6 && j !== 7) {
+                        addItem(groupStore.at(0));
+                        count--;
+                        if (count > 0) {
+                            addItem(groupStore.at(1));
+                            count--;
+                        }
+                    }
                 }
             }
 
-            if (newStyles.length < 12) {
+            this.fieldPicker.store.reset(recents);
-                for(var j = newStyles.length; j < 12; j ++) {
-                    newStyles.push(store[j]);
-                }
-            }
-
-            this.fieldPicker.store.reset(newStyles);
 
             this.fieldPicker.on('item:select', _.bind(this.onFieldPickerSelect, this));
             this.fieldPicker.on('item:click',  _.bind(this.onFieldPickerClick, this));
@@ -245,17 +266,20 @@ define([
             }
             if (!model) {
                 store.pop();
-            } else {
-                store.remove([model]);
-            }
                 store.unshift([record]);
+            }
         },
 
-        setComboViewRecActive: function (isActive) {
+        activateRecord: function (record) {
+            var type = record.get('data').shapeType;
             if (this.isRecordActive)
+                this.deactivateRecords();
+            $(this.cmpEl.find("[data-shape='" + type + "']")).parent().addClass('active');
+            this.isRecordActive = true;
+        },
+
+        deactivateRecords: function () {
             $(this.cmpEl.find('.field-picker .item')).removeClass('active');
-            $(this.cmpEl.find('.field-picker .item')[0])[isActive ? 'addClass' : 'removeClass']('active');
-            this.isRecordActive = isActive;
         },
 
         isComboViewRecActive: function () {
@@ -364,11 +388,13 @@ define([
                 this.trigger('select', this, record);*/
         },
 
-        onFieldPickerClick: function(dataView, itemView, record) {
+        onFieldPickerClick: function(dataView, item, record) {
             if (this.disabled) return;
 
+            var isActive = item.$el.hasClass('active');
+
             if (!this.isSuspendEvents)
-                this.trigger('click', this, record);
+                this.trigger('click', this, record, isActive);
 
             if (this.options.hint) {
                 var tip = this.cmpEl.data('bs.tooltip');
@@ -378,6 +404,10 @@ define([
                     tip.hide();
                 }
             }
+
+            if (!isActive) {
+                this.activateRecord(record);
+            }
         },
 
         onMenuPickerClick: function(dataView, itemView, record) {
@@ -385,6 +415,8 @@ define([
 
             if (!this.isSuspendEvents)
                 this.trigger('click', this, record);
+
+            this.activateRecord(record);
         },
 
         onPickerItemContextMenu: function(dataView, itemView, record, e) {

apps/common/main/lib/component/DataView.js

@@ -1317,7 +1317,7 @@ define([
         template: _.template([
             '<div class="dataview inner" style="<%= style %>">',
                 '<% _.each(options.groupsWithRecent, function(group, index) { %>',
-                    '<div class="grouped-data <% if (index === 0) { %> recent-group <% } %> " id="<%= group.id %>" <% if (!options.recentShapes && index === 0) { %> style="display: none;" <% } %>>',
+                    '<div class="grouped-data <% if (index === 0) { %> recent-group <% } %> " id="<%= group.id %>" >',
                         '<% if (!_.isEmpty(group.groupName)) { %>',
                             '<div class="group-description">',
                                 '<span><%= group.groupName %></span>',
@@ -1356,7 +1356,45 @@ define([
 
             me.recentShapes = recentArr;
 
-            recentStore.add(recentArr);
+            // Add default recent
+
+            if (me.recentShapes.length < 12) {
+                var count = 12 - me.recentShapes.length,
+                    defaultArr = [];
+
+                var addItem = function (rec) {
+                    var item = rec.toJSON(),
+                        model = {
+                            data: item.data,
+                            tip: item.tip,
+                            allowSelected: item.allowSelected,
+                            selected: false
+                        };
+                    defaultArr.push(model);
+                };
+
+                for (var i = 0; i < me.groups.length && count > 0; i++) {
+                    var groupStore = me.groups[i].groupStore;
+                    if (i === 0) {
+                        addItem(groupStore.at(1));
+                        count--;
+                        if (count > 0) {
+                            addItem(groupStore.at(2));
+                            count--;
+                        }
+                    } else if (i !== 3 && i !== 6 && i !== 7) {
+                        addItem(groupStore.at(0));
+                        count--;
+                        if (count > 0) {
+                            addItem(groupStore.at(1));
+                            count--;
+                        }
+                    }
+                }
+                me.recentShapes = me.recentShapes.concat(defaultArr);
+            }
+
+            recentStore.add(me.recentShapes);
             me.groups.unshift({
                 groupName   : options.textRecentlyUsed,
                 groupStore  : recentStore,
@@ -1377,9 +1415,6 @@ define([
             Common.UI.DataViewSimple.prototype.initialize.call(this, options);
 
             me.parentMenu.on('show:before', function() { me.updateRecents(); });
-            if (me.recentShapes.length > 0 && !me.cmpEl.find('.recent-group').is(':visible')) {
-                me.cmpEl.find('.recent-group').show();
-            }
         },
         onAfterShowMenu: function(e) {
             var me = this;
@@ -1490,8 +1525,8 @@ define([
                     selected: false
                 };
             me.recentShapes.unshift(model);
-            if (me.recentShapes.length > 14) {
+            if (me.recentShapes.length > 12) {
-                me.recentShapes.splice(14, 1);
+                me.recentShapes.splice(12, 1);
             }
             Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(me.recentShapes));
             me.recentShapes = undefined;

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

@@ -188,16 +188,20 @@ define([
                     btn_id = cmp.closest('button').attr('id');
                 if (btn_id===undefined)
                     btn_id = cmp.closest('.btn-group').attr('id');
+                if (btn_id===undefined)
+                    btn_id = cmp.closest('.combo-dataview').attr('id');
 
                 if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) {
                     if ( me.toolbar.btnsInsertText.pressed() && !me.toolbar.btnsInsertText.contains(btn_id) ||
-                            me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) )
+                            me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) ||
+                            me.toolbar.cmbInsertShape.isComboViewRecActive() && me.toolbar.cmbInsertShape.id !== btn_id)
                     {
                         me._isAddingShape         = false;
 
                         me._addAutoshape(false);
                         me.toolbar.btnsInsertShape.toggle(false, true);
                         me.toolbar.btnsInsertText.toggle(false, true);
+                        me.toolbar.cmbInsertShape.deactivateRecords();
                         Common.NotificationCenter.trigger('edit:complete', me.toolbar);
                     } else
                     if ( me.toolbar.btnsInsertShape.pressed() && me.toolbar.btnsInsertShape.contains(btn_id) ) {
@@ -219,7 +223,7 @@ define([
                     this.toolbar.btnsInsertText.toggle(false, true);
 
                 if ( this.toolbar.cmbInsertShape.isComboViewRecActive() )
-                    this.toolbar.cmbInsertShape.setComboViewRecActive(false);
+                    this.toolbar.cmbInsertShape.deactivateRecords();
 
                 $(document.body).off('mouseup', checkInsertAutoshape);
             };
@@ -2052,10 +2056,13 @@ define([
             }
             me.toolbar.cmbInsertShape.openButton.menu.on('show:before', onComboShowBefore);
             me.toolbar.cmbInsertShape.fillComboView(collection);
-            me.toolbar.cmbInsertShape.on('click', function (btn, record) {
+            me.toolbar.cmbInsertShape.on('click', function (btn, record, cancel) {
+                if (cancel) {
+                    me._addAutoshape(false);
+                    return;
+                }
                 if (record) {
                     me.toolbar.cmbInsertShape.updateComboView(record);
-                    me.toolbar.cmbInsertShape.setComboViewRecActive(true);
                     me.onInsertShape(record.get('data').shapeType);
                 }
             });