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); shapeStore.add(shapegrouparray);
setTimeout(function(){ setTimeout(function(){
me.getApplication().getController('Toolbar').fillAutoShapes(); me.getApplication().getController('Toolbar').onApiAutoShapes();
}, 50); }, 50);
}, },
fillTextArt: function(shapes){ fillTextArt: function(shapes){

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

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

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

@ -100,7 +100,8 @@ define([
DisabledFillPanels: false, DisabledFillPanels: false,
DisabledControls: false, DisabledControls: false,
HideShapeOnlySettings: false, HideShapeOnlySettings: false,
HideChangeTypeSettings: false HideChangeTypeSettings: false,
isFromImage: false
}; };
this.lockedControls = []; this.lockedControls = [];
this._locked = false; this._locked = false;
@ -785,7 +786,8 @@ define([
|| shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5' || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
|| shapetype=='straightConnector1'; || shapetype=='straightConnector1';
this.hideChangeTypeSettings(hidechangetype); 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[0].setVisible(shapeprops.get_FromImage());
this.btnChangeShape.menu.items[1].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.PatternFillType = this.patternViewData[0].type;
} }
this.fillAutoShapes(); this.onApiAutoShapes();
this.UpdateThemeColors(); this.UpdateThemeColors();
this._initSettings = false; this._initSettings = false;
}, },
@ -1610,6 +1612,15 @@ define([
this.fireEvent('editcomplete', this); 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() { fillAutoShapes: function() {
var me = this, var me = this,
shapesStore = this.application.getCollection('ShapeGroups'), shapesStore = this.application.getCollection('ShapeGroups'),
@ -1623,7 +1634,7 @@ define([
store.shift(); store.shift();
} }
var shapePicker = new Common.UI.DataViewSimple({ 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, store: store,
parentMenu: menu.items[i+1].menu, 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>') 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); menu.off('show:after', onShowAfter);
}; };
me.btnChangeShape.menu.on('show:after', onShowAfter);
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);
@ -1653,7 +1665,8 @@ define([
}); });
me.btnChangeShape.menu.addItem(menuItem); 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() { UpdateThemeColors: function() {

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

@ -1703,9 +1703,14 @@ define([
}, },
onResetAutoshapes: function () { onResetAutoshapes: function () {
setTimeout(function () { var me = this;
this.toolbar.updateAutoshapeMenu(PE.getCollection('ShapeGroups')); var onShowBefore = function(menu) {
}.bind(this), 0); 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) { onResetTextArt: function (collection, opts) {

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

@ -95,7 +95,8 @@ define([
DisabledFillPanels: false, DisabledFillPanels: false,
DisabledControls: false, DisabledControls: false,
HideShapeOnlySettings: false, HideShapeOnlySettings: false,
HideChangeTypeSettings: false HideChangeTypeSettings: false,
isFromImage: false
}; };
this.lockedControls = []; this.lockedControls = [];
this._locked = false; this._locked = false;
@ -717,7 +718,8 @@ define([
|| shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5' || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
|| shapetype=='straightConnector1'; || shapetype=='straightConnector1';
this.hideChangeTypeSettings(hidechangetype); 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[0].setVisible(props.get_FromImage());
this.btnChangeShape.menu.items[1].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.PatternFillType = this.patternViewData[0].type;
} }
this.fillAutoShapes(); this.onApiAutoShapes();
this.UpdateThemeColors(); this.UpdateThemeColors();
this._initSettings = false; this._initSettings = false;
}, },
@ -1465,6 +1467,15 @@ define([
this.fireEvent('editcomplete', this); 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() { fillAutoShapes: function() {
var me = this, var me = this,
shapesStore = this.application.getCollection('ShapeGroups'), shapesStore = this.application.getCollection('ShapeGroups'),
@ -1478,7 +1489,7 @@ define([
store.shift(); store.shift();
} }
var shapePicker = new Common.UI.DataViewSimple({ 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, store: store,
parentMenu: menu.items[i+1].menu, 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>') 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); menu.off('show:after', onShowAfter);
}; };
me.btnChangeShape.menu.on('show:after', onShowAfter);
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);
@ -1508,7 +1520,8 @@ define([
}); });
me.btnChangeShape.menu.addItem(menuItem); 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() { 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 me = this;
var onShowAfter = function(menu) { var onShowAfter = function(menu) {
for (var i = 0; i < collection.length; i++) { for (var i = 0; i < collection.length; i++) {
@ -1495,24 +1495,22 @@ define([
} }
menu.off('show:after', onShowAfter); menu.off('show:after', onShowAfter);
}; };
menuShape.on('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);
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({
menuAlign: 'tl-tr', menuAlign: 'tl-tr',
items: [ 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); menuShape.addItem(menuitem);
} }
btn.menu.on('show:after', onShowAfter);
});
}, },
updateAddSlideMenu: function(collection) { updateAddSlideMenu: function(collection) {

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

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

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

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

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

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