[PE][SSE] Optimize shapes loading

This commit is contained in:
Julia Radzhabova 2019-08-20 11:05:52 +03:00
parent d2709f17c1
commit d74909340b
10 changed files with 122 additions and 105 deletions

View file

@ -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

View file

@ -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);

View file

@ -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; i<count-1 && count>0; i++) {

View file

@ -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,

View file

@ -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);

View file

@ -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; i<count-1 && count>0; 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('<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);
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; i<count-1 && count>0; 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('<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);
me.fireEvent('editcomplete', me);
}
if (e.type !== 'click')
me.btnChangeShape.menu.hide();
});
}
me.btnChangeShape.menu.on('show:after', onShowAfter);
},
UpdateThemeColors: function() {

View file

@ -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('<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 (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('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>') }
{template: _.template('<div class="shapegroup-' + i + '" class="menu-shape" style="width: ' + (group.get('groupWidth') - 8) + 'px; margin-left: 5px;"></div>')}
]
})
});
btn.menu.addItem(menuitem);
(new Common.UI.DataView({
el: $('.shapegroup-' + i, menuitem.$el),
store: group.get('groupStore'),
parentMenu: menuitem.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>')
})).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) {

View file

@ -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,

View file

@ -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('<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) {
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('<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) {
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);

View file

@ -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; i<count-1 && count>0; 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('<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.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; i<count-1 && count>0; 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('<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.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) {