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

[DE] Optimize shapes loading

Browse source
This commit is contained in:
Julia Radzhabova 2019-08-19 17:33:30 +03:00
parent 960a107e8e
commit d2709f17c1
3 changed files with 64 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

57
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -2317,6 +2317,35 @@ 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');
}
});
}
me.toolbar.btnInsertShape.menu.off('show:after', onShowAfter);
};
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
@ -2329,35 +2358,9 @@ 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);
},
fillEquations: function() {

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

@ -1612,44 +1612,48 @@ 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();
});
}
me.btnChangeShape.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 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>') }
{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({
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() {