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

Render autoshapes after menu is opened

Browse source
This commit is contained in:
Julia Radzhabova 2019-08-20 14:05:13 +03:00
parent d74909340b
commit b8b6c9edae
9 changed files with 102 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1830,9 +1830,8 @@ define([
shapeStore.add(shapegrouparray);
setTimeout(function(){
me.getApplication().getController('Toolbar').fillAutoShapes();
me.getApplication().getController('Toolbar').onApiAutoShapes();
}, 50);
},
fillTextArt: function(shapes){

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

@ -2313,6 +2313,15 @@ define([
this._state.clrtext_asccolor = color;
},
onApiAutoShapes: function() {
var me = this;
var onShowBefore = function(menu) {
me.fillAutoShapes();
menu.off('show:before', onShowBefore);
};
me.toolbar.btnInsertShape.menu.on('show:before', onShowBefore);
},
fillAutoShapes: function() {
var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups');
@ -2320,7 +2329,7 @@ define([
var onShowAfter = function(menu) {
for (var i = 0; i < shapesStore.length; i++) {
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-shapegroup' + i),
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
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>')
@ -2345,6 +2354,7 @@ define([
}
menu.off('show:after', onShowAfter);
};
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
@ -2360,7 +2370,6 @@ define([
});
me.toolbar.btnInsertShape.menu.addItem(menuItem);
}
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
},
fillEquations: function() {
@ -2372,7 +2381,7 @@ define([
var onShowAfter = function(menu) {
for (var i = 0; i < equationsStore.length; ++i) {
var equationPicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-equationgroup' + i),
el: $('#id-toolbar-menu-equationgroup' + i, menu.items[i].$el),
parentMenu: menu.items[i].menu,
store: equationsStore.at(i).get('groupStore'),
scrollAlwaysVisible: true,

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

@ -100,7 +100,8 @@ define([
DisabledFillPanels: false,
DisabledControls: false,
HideShapeOnlySettings: false,
HideChangeTypeSettings: false
HideChangeTypeSettings: false,
isFromImage: false
};
this.lockedControls = [];
this._locked = false;
@ -785,7 +786,8 @@ define([
|| shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
|| shapetype=='straightConnector1';
this.hideChangeTypeSettings(hidechangetype);
if (!hidechangetype) {
this._state.isFromImage = !!shapeprops.get_FromImage();
if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage());
this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage());
}
@ -1513,7 +1515,7 @@ define([
this.PatternFillType = this.patternViewData[0].type;
}
this.fillAutoShapes();
this.onApiAutoShapes();
this.UpdateThemeColors();
this._initSettings = false;
},
@ -1610,6 +1612,15 @@ define([
this.fireEvent('editcomplete', this);
},
onApiAutoShapes: function() {
var me = this;
var onShowBefore = function(menu) {
me.fillAutoShapes();
menu.off('show:before', onShowBefore);
};
me.btnChangeShape.menu.on('show:before', onShowBefore);
},
fillAutoShapes: function() {
var me = this,
shapesStore = this.application.getCollection('ShapeGroups'),
@ -1623,7 +1634,7 @@ define([
store.shift();
}
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-shape-menu-shapegroup' + (i+1)),
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
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>')
@ -1639,6 +1650,7 @@ define([
}
menu.off('show:after', onShowAfter);
};
me.btnChangeShape.menu.on('show:after', onShowAfter);
for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i > -1 ? i : i + 1);
@ -1653,7 +1665,8 @@ define([
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.on('show:after', onShowAfter);
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
},
UpdateThemeColors: function() {

11
apps/presentationeditor/main/app/controller/Toolbar.js
View file

@ -1703,9 +1703,14 @@ define([
},
onResetAutoshapes: function () {
setTimeout(function () {
this.toolbar.updateAutoshapeMenu(PE.getCollection('ShapeGroups'));
}.bind(this), 0);
var me = this;
var onShowBefore = function(menu) {
me.toolbar.updateAutoshapeMenu(menu, PE.getCollection('ShapeGroups'));
menu.off('show:before', onShowBefore);
};
me.toolbar.btnsInsertShape.forEach(function (btn, index) {
btn.menu.on('show:before', onShowBefore);
});
},
onResetTextArt: function (collection, opts) {

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

@ -95,7 +95,8 @@ define([
DisabledFillPanels: false,
DisabledControls: false,
HideShapeOnlySettings: false,
HideChangeTypeSettings: false
HideChangeTypeSettings: false,
isFromImage: false
};
this.lockedControls = [];
this._locked = false;
@ -717,7 +718,8 @@ define([
|| shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
|| shapetype=='straightConnector1';
this.hideChangeTypeSettings(hidechangetype);
if (!hidechangetype) {
this._state.isFromImage = !!props.get_FromImage();
if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(props.get_FromImage());
this.btnChangeShape.menu.items[1].setVisible(!props.get_FromImage());
}
@ -1388,7 +1390,7 @@ define([
this.PatternFillType = this.patternViewData[0].type;
}
this.fillAutoShapes();
this.onApiAutoShapes();
this.UpdateThemeColors();
this._initSettings = false;
},
@ -1465,6 +1467,15 @@ define([
this.fireEvent('editcomplete', this);
},
onApiAutoShapes: function() {
var me = this;
var onShowBefore = function(menu) {
me.fillAutoShapes();
menu.off('show:before', onShowBefore);
};
me.btnChangeShape.menu.on('show:before', onShowBefore);
},
fillAutoShapes: function() {
var me = this,
shapesStore = this.application.getCollection('ShapeGroups'),
@ -1478,7 +1489,7 @@ define([
store.shift();
}
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-shape-menu-shapegroup' + (i+1)),
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
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>')
@ -1494,6 +1505,7 @@ define([
}
menu.off('show:after', onShowAfter);
};
me.btnChangeShape.menu.on('show:after', onShowAfter);
for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
@ -1508,7 +1520,8 @@ define([
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.on('show:after', onShowAfter);
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
},
UpdateThemeColors: function() {

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

@ -1477,7 +1477,7 @@ define([
}
},
updateAutoshapeMenu: function (collection) {
updateAutoshapeMenu: function (menuShape, collection) {
var me = this;
var onShowAfter = function(menu) {
for (var i = 0; i < collection.length; i++) {
@ -1495,24 +1495,22 @@ define([
}
menu.off('show:after', onShowAfter);
};
menuShape.on('show:after', onShowAfter);
me.btnsInsertShape.forEach(function (btn, index) {
for (var i = 0; i < collection.size(); i++) {
var group = collection.at(i);
for (var i = 0; i < collection.size(); i++) {
var group = collection.at(i);
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>')}
]
})
});
btn.menu.addItem(menuitem);
}
btn.menu.on('show:after', onShowAfter);
});
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>')}
]
})
});
menuShape.addItem(menuitem);
}
},
updateAddSlideMenu: function(collection) {

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

@ -1795,7 +1795,7 @@ define([
shapeStore.add(shapegrouparray);
setTimeout(function(){
me.getApplication().getController('Toolbar').fillAutoShapes();
me.getApplication().getController('Toolbar').onApiAutoShapes();
}, 50);
},

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

@ -2549,6 +2549,15 @@ define([
Common.NotificationCenter.trigger('edit:complete', this.toolbar);
},
onApiAutoShapes: function() {
var me = this;
var onShowBefore = function(menu) {
me.fillAutoShapes();
menu.off('show:before', onShowBefore);
};
me.toolbar.btnInsertShape.menu.on('show:before', onShowBefore);
},
fillAutoShapes: function() {
var me = this,
shapesStore = this.getApplication().getCollection('ShapeGroups');
@ -2556,7 +2565,7 @@ define([
var onShowAfter = function(menu) {
for (var i = 0; i < shapesStore.length; i++) {
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-toolbar-menu-shapegroup' + i),
el: $('#id-toolbar-menu-shapegroup' + i, menu.items[i].$el),
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>')
@ -2580,6 +2589,7 @@ define([
}
menu.off('show:after', onShowAfter);
};
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
for (var i = 0; i < shapesStore.length; i++) {
var shapeGroup = shapesStore.at(i);
@ -2596,7 +2606,6 @@ define([
me.toolbar.btnInsertShape.menu.addItem(menuItem);
}
me.toolbar.btnInsertShape.menu.on('show:after', onShowAfter);
},
fillTextArt: function() {

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

@ -96,7 +96,8 @@ define([
DisabledFillPanels: false,
DisabledControls: false,
HideShapeOnlySettings: false,
HideChangeTypeSettings: false
HideChangeTypeSettings: false,
isFromImage: false
};
this.lockedControls = [];
this._locked = false;
@ -741,7 +742,8 @@ define([
|| shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
|| shapetype=='straightConnector1';
this.hideChangeTypeSettings(hidechangetype);
if (!hidechangetype) {
this._state.isFromImage = !!shapeprops.get_FromImage();
if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage());
this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage());
}
@ -1412,7 +1414,7 @@ define([
this.PatternFillType = this.patternViewData[0].type;
}
this.fillAutoShapes();
this.onApiAutoShapes();
this.UpdateThemeColors();
this._initSettings = false;
},
@ -1481,6 +1483,15 @@ define([
Common.NotificationCenter.trigger('edit:complete', this);
},
onApiAutoShapes: function() {
var me = this;
var onShowBefore = function(menu) {
me.fillAutoShapes();
menu.off('show:before', onShowBefore);
};
me.btnChangeShape.menu.on('show:before', onShowBefore);
},
fillAutoShapes: function() {
var me = this,
shapesStore = this.application.getCollection('ShapeGroups'),
@ -1494,7 +1505,7 @@ define([
store.shift();
}
var shapePicker = new Common.UI.DataViewSimple({
el: $('#id-shape-menu-shapegroup' + (i+1)),
el: $('#id-shape-menu-shapegroup' + (i+1), menu.items[i+1].$el),
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>')
@ -1510,6 +1521,7 @@ define([
}
menu.off('show:after', onShowAfter);
};
me.btnChangeShape.menu.on('show:after', onShowAfter);
for (var i=-1; i<count-1 && count>0; i++) {
var shapeGroup = shapesStore.at(i>-1 ? i : i+1);
@ -1524,7 +1536,8 @@ define([
});
me.btnChangeShape.menu.addItem(menuItem);
}
me.btnChangeShape.menu.on('show:after', onShowAfter);
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage);
},
onBtnRotateClick: function(btn) {