Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE][SSE] Optimize shapes loading

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/documenteditor/main/app/controller/Main.js
View file

@ -1801,7 +1801,6 @@ define([
shapeStore.reset(); shapeStore.reset();
var groupscount = groupNames.length;
_.each(groupNames, function(groupName, index){ _.each(groupNames, function(groupName, index){
var store = new Backbone.Collection([], { var store = new Backbone.Collection([], {
model: DE.Models.ShapeModel model: DE.Models.ShapeModel

4
apps/documenteditor/main/app/controller/Toolbar.js
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++) { 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); me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);

2
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1637,7 +1637,7 @@ define([
me.btnChangeShape.menu.hide(); 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++) { for (var i=-1; i<count-1 && count>0; i++) {

7
apps/presentationeditor/main/app/controller/Main.js
View file

@ -1585,21 +1585,22 @@ define([
_.each(groupNames, function(groupName, index){ _.each(groupNames, function(groupName, index){
var store = new Backbone.Collection([], { var store = new Backbone.Collection([], {
model: PE.Models.ShapeModel model: PE.Models.ShapeModel
}); }),
arr = [];
var cols = (shapes[index].length) > 18 ? 7 : 6, var cols = (shapes[index].length) > 18 ? 7 : 6,
height = Math.ceil(shapes[index].length/cols) * 35 + 3, height = Math.ceil(shapes[index].length/cols) * 35 + 3,
width = 30 * cols; width = 30 * cols;
_.each(shapes[index], function(shape, idx){ _.each(shapes[index], function(shape, idx){
store.add({ arr.push({
data : {shapeType: shape.Type}, data : {shapeType: shape.Type},
tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)), tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)),
allowSelected : true, allowSelected : true,
selected: false selected: false
}); });
}); });
store.add(arr);
shapegrouparray.push({ shapegrouparray.push({
groupName : me.shapeGroupNames[index], groupName : me.shapeGroupNames[index],
groupStore : store, groupStore : store,

2
apps/presentationeditor/main/app/controller/Toolbar.js
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); me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);

52
apps/presentationeditor/main/app/view/ShapeSettings.js
View file

@ -1467,9 +1467,34 @@ define([
fillAutoShapes: function() { fillAutoShapes: function() {
var me = this, 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++) { for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i>-1 ? i : i+1); var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
var menuItem = new Common.UI.MenuItem({ var menuItem = new Common.UI.MenuItem({
@ -1482,29 +1507,8 @@ define([
}) })
}); });
me.btnChangeShape.menu.addItem(menuItem); 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() { UpdateThemeColors: function() {

35
apps/presentationeditor/main/app/view/Toolbar.js
View file

@ -1479,10 +1479,27 @@ define([
updateAutoshapeMenu: function (collection) { updateAutoshapeMenu: function (collection) {
var me = this; var me = this;
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++) { for (var i = 0; i < collection.size(); i++) {
var group = collection.at(i); var group = collection.at(i);
me.btnsInsertShape.forEach(function (btn, index) {
var menuitem = new Common.UI.MenuItem({ var menuitem = new Common.UI.MenuItem({
caption: group.get('groupName'), caption: group.get('groupName'),
menu: new Common.UI.Menu({ menu: new Common.UI.Menu({
@ -1492,22 +1509,10 @@ define([
] ]
}) })
}); });
btn.menu.addItem(menuitem); 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) { updateAddSlideMenu: function(collection) {

8
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -1765,25 +1765,25 @@ define([
shapeStore.reset(); shapeStore.reset();
var groupscount = groupNames.length;
_.each(groupNames, function(groupName, index){ _.each(groupNames, function(groupName, index){
var store = new Backbone.Collection([], { var store = new Backbone.Collection([], {
model: SSE.Models.ShapeModel model: SSE.Models.ShapeModel
}); }),
arr = [];
var cols = (shapes[index].length) > 18 ? 7 : 6, var cols = (shapes[index].length) > 18 ? 7 : 6,
height = Math.ceil(shapes[index].length/cols) * 35 + 3, height = Math.ceil(shapes[index].length/cols) * 35 + 3,
width = 30 * cols; width = 30 * cols;
_.each(shapes[index], function(shape, idx){ _.each(shapes[index], function(shape, idx){
store.add({ arr.push({
data : {shapeType: shape.Type}, data : {shapeType: shape.Type},
tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)), tip : me['txtShape_' + shape.Type] || (me.textShape + ' ' + (idx+1)),
allowSelected : true, allowSelected : true,
selected: false selected: false
}); });
}); });
store.add(arr);
shapegrouparray.push({ shapegrouparray.push({
groupName : me.shapeGroupNames[index], groupName : me.shapeGroupNames[index],
groupStore : store, groupStore : store,

44
apps/spreadsheeteditor/main/app/controller/Toolbar.js
View file

@ -2553,29 +2553,14 @@ define([
var me = this, var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups'); shapesStore = this.getApplication().getCollection('ShapeGroups');
var onShowAfter = function(menu) {
for (var i = 0; i < shapesStore.length; i++) { 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), 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>') 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) { shapePicker.on('item:click', function(picker, item, record, e) {
if (me.api) { if (me.api) {
if (record) { if (record) {
@ -2593,6 +2578,25 @@ define([
} }
}); });
} }
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);
}, },
fillTextArt: function() { 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); me.toolbar.btnInsertEquation.menu.on('show:after', onShowAfter);

52
apps/spreadsheeteditor/main/app/view/ShapeSettings.js
View file

@ -1483,9 +1483,34 @@ define([
fillAutoShapes: function() { fillAutoShapes: function() {
var me = this, 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++) { for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i>-1 ? i : i+1); var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
var menuItem = new Common.UI.MenuItem({ var menuItem = new Common.UI.MenuItem({
@ -1498,29 +1523,8 @@ define([
}) })
}); });
me.btnChangeShape.menu.addItem(menuItem); 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) { onBtnRotateClick: function(btn) {