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

Merge pull request #1309 from ONLYOFFICE/feature/shape-menu

Browse source 
[DE PE SSE] Refactoring shape menu
This commit is contained in:
JuliaSvinareva 2021-11-12 11:27:06 +03:00 committed by GitHub
parent b49d3f65c8 f903567389
commit fd76043a07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 194 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
apps/common/main/lib/component/DataView.js
View file

@ -1139,15 +1139,22 @@ define([
} else { } else {
var idx = _.indexOf(this.store.models, rec); var idx = _.indexOf(this.store.models, rec);
if (idx<0) { if (idx<0) {
function getFirstItemIndex() {
var first = 0;
while(!this.dataViewItems[first].el.is(':visible')) {
first++;
}
return first;
}
if (data.keyCode==Common.UI.Keys.LEFT) { if (data.keyCode==Common.UI.Keys.LEFT) {
var target = $(e.target).closest('.dropdown-submenu.over'); var target = $(e.target).closest('.dropdown-submenu.over');
if (target.length>0) { if (target.length>0) {
target.removeClass('over'); target.removeClass('over');
target.find('> a').focus(); target.find('> a').focus();
} else } else
idx = 0; idx = getFirstItemIndex.call(this);
} else } else
idx = 0; idx = getFirstItemIndex.call(this);
} else if (this.options.keyMoveDirection == 'both') { } else if (this.options.keyMoveDirection == 'both') {
if (this._layoutParams === undefined) if (this._layoutParams === undefined)
this.fillIndexesArray(); this.fillIndexesArray();
@ -1324,9 +1331,9 @@ define([
'</div>', '</div>',
'<% } %>', '<% } %>',
'<div class="group-items-container <% if (index === 0) { %> recent-items <% } %>">', '<div class="group-items-container <% if (index === 0) { %> recent-items <% } %>">',
'<% _.each(group.groupStore.toJSON(), function(item) { %>', '<% _.each(group.groupStore.toJSON(), function(item, index) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>', '<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>', '<div class="item" data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<% }); %>', '<% }); %>',
'</div>', '</div>',
'</div>', '</div>',
@ -1337,15 +1344,15 @@ define([
var me = this; var me = this;
this.canAddRecents = true; this.canAddRecents = true;
this._state = {
hideTextRect: options.hideTextRect,
hideLines: options.hideLines
}
var filter = Common.localStorage.getKeysFilter(); var filter = Common.localStorage.getKeysFilter();
this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : ''; this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : '';
me.groups = options.groups.toJSON(); me.groups = options.groups.toJSON();
if (options.isFromImage) {
var store = me.groups[0].groupStore.clone();
store.shift();
me.groups[0].groupStore = store;
}
// add recent shapes to store // add recent shapes to store
var recentStore = new Common.UI.DataViewGroupStore, var recentStore = new Common.UI.DataViewGroupStore,
@ -1362,31 +1369,33 @@ define([
var count = 12 - me.recentShapes.length, var count = 12 - me.recentShapes.length,
defaultArr = []; defaultArr = [];
var addItem = function (rec) { var addItem = function (rec, groupName) {
var item = rec.toJSON(), var item = rec.toJSON(),
model = { model = {
data: item.data, data: item.data,
tip: item.tip, tip: item.tip,
allowSelected: item.allowSelected, allowSelected: item.allowSelected,
selected: false selected: false,
groupName: groupName
}; };
defaultArr.push(model); defaultArr.push(model);
}; };
for (var i = 0; i < me.groups.length && count > 0; i++) { for (var i = 0; i < me.groups.length && count > 0; i++) {
var groupStore = me.groups[i].groupStore; var groupStore = me.groups[i].groupStore,
groupName = me.groups[i].groupName;
if (i === 0) { if (i === 0) {
addItem(groupStore.at(1)); addItem(groupStore.at(1), groupName);
count--; count--;
if (count > 0) { if (count > 0) {
addItem(groupStore.at(2)); addItem(groupStore.at(2), groupName);
count--; count--;
} }
} else if (i !== 3 && i !== 6 && i !== 7) { } else if (i !== 3 && i !== 6 && i !== 7) {
addItem(groupStore.at(0)); addItem(groupStore.at(0), groupName);
count--; count--;
if (count > 0) { if (count > 0) {
addItem(groupStore.at(1)); addItem(groupStore.at(1), groupName);
count--; count--;
} }
} }
@ -1406,8 +1415,14 @@ define([
var store = new Common.UI.DataViewStore(); var store = new Common.UI.DataViewStore();
_.each(me.groups, function (group) { _.each(me.groups, function (group, index) {
store.add(group.groupStore.models); var models = group.groupStore.models;
if (index > 0) {
for (var i = 0; i < models.length; i++) {
models.at(i).set({groupName: group.groupName})
}
}
store.add(models);
}); });
options.store = store; options.store = store;
@ -1415,9 +1430,14 @@ define([
Common.UI.DataViewSimple.prototype.initialize.call(this, options); Common.UI.DataViewSimple.prototype.initialize.call(this, options);
me.parentMenu.on('show:before', function() { me.updateRecents(); }); me.parentMenu.on('show:before', function() { me.updateRecents(); });
if (me._state.hideLines) {
me.hideLinesGroup();
}
}, },
onAfterShowMenu: function(e) { onAfterShowMenu: function(e) {
var me = this; var me = this,
updateHideRect = false;
if (!me.dataViewItems) { if (!me.dataViewItems) {
me.dataViewItems = []; me.dataViewItems = [];
_.each(me.cmpEl.find('div.grouped-data'), function (group, indexGroup) { _.each(me.cmpEl.find('div.grouped-data'), function (group, indexGroup) {
@ -1439,6 +1459,7 @@ define([
} }
}); });
}); });
updateHideRect = true;
} }
if (me.updateDataViewItems && me.cmpEl.is(':visible')) { if (me.updateDataViewItems && me.cmpEl.is(':visible')) {
// add recent item in dataViewItems // add recent item in dataViewItems
@ -1472,13 +1493,21 @@ define([
} }
}); });
me.dataViewItems = recentViewItems.concat(me.dataViewItems); me.dataViewItems = recentViewItems.concat(me.dataViewItems);
me.fillIndexesArray();
if (me.recentShapes.length === 1) { if (me.recentShapes.length === 1) {
$('.recent-group').show(); $('.recent-group').show();
} }
me.updateDataViewItems = false; me.updateDataViewItems = false;
updateHideRect = true;
} }
if (this._state.hideLines) {
me.hideLines();
}
if (updateHideRect) {
me.hideTextRect(me._state.hideTextRect);
}
me.fillIndexesArray();
}, },
onClickItem: function(e) { onClickItem: function(e) {
@ -1487,7 +1516,7 @@ define([
window._event = e; // for FireFox only window._event = e; // for FireFox only
var groupIndex = $(e.currentTarget).closest('div.grouped-data').index(), var groupIndex = $(e.currentTarget).closest('div.grouped-data').index(),
itemIndex = $(e.currentTarget).closest('div.item').index(); itemIndex = $(e.currentTarget).closest('div.item').data('index');
var index = _.findIndex(this.dataViewItems, function (item) { var index = _.findIndex(this.dataViewItems, function (item) {
return (item.groupIndex === groupIndex && item.index === itemIndex); return (item.groupIndex === groupIndex && item.index === itemIndex);
}); });
@ -1508,7 +1537,8 @@ define([
addRecentItem: function (rec) { addRecentItem: function (rec) {
var me = this, var me = this,
exist = false, exist = false,
type = rec.get('data').shapeType; type = rec.get('data').shapeType,
groupName = rec.get('groupName');
for (var i = 0; i < me.recentShapes.length; i++) { for (var i = 0; i < me.recentShapes.length; i++) {
if (me.recentShapes[i].data.shapeType === type) { if (me.recentShapes[i].data.shapeType === type) {
exist = true; exist = true;
@ -1522,7 +1552,8 @@ define([
data: item.data, data: item.data,
tip: item.tip, tip: item.tip,
allowSelected: item.allowSelected, allowSelected: item.allowSelected,
selected: false selected: false,
groupName: groupName
}; };
me.recentShapes.unshift(model); me.recentShapes.unshift(model);
if (me.recentShapes.length > 12) { if (me.recentShapes.length > 12) {
@ -1558,9 +1589,9 @@ define([
me.store = store; me.store = store;
var template = _.template([ var template = _.template([
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item, index) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>', '<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>', '<div class="item" data-index="<%= index %>"<% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<% }) %>' '<% }) %>'
].join('')); ].join(''));
me.cmpEl && me.cmpEl.find('.recent-items').html(template({ me.cmpEl && me.cmpEl.find('.recent-items').html(template({
@ -1571,6 +1602,72 @@ define([
me.updateDataViewItems = true; me.updateDataViewItems = true;
} }
},
fillIndexesArray: function() {
if (this.dataViewItems.length<=0) return;
this._layoutParams = {
itemsIndexes: [],
columns: 0,
rows: 0
};
var el = this.dataViewItems[0].el,
first = 0;
while (!this.dataViewItems[first].el.is(":visible")) { // if first elem is hidden
first++;
el = this.dataViewItems[first].el;
}
var itemW = el.outerWidth() + parseInt(el.css('margin-left')) + parseInt(el.css('margin-right')),
offsetLeft = this.$el.offset().left,
offsetTop = el.offset().top,
prevtop = -1, topIdx = 0, leftIdx = first;
for (var i=0; i<this.dataViewItems.length; i++) {
var item = this.dataViewItems[i];
if (item.el.is(":visible")) {
var top = item.el.offset().top - offsetTop;
leftIdx = Math.floor((item.el.offset().left - offsetLeft) / itemW);
if (top > prevtop) {
prevtop = top;
this._layoutParams.itemsIndexes.push([]);
topIdx = this._layoutParams.itemsIndexes.length - 1;
}
this._layoutParams.itemsIndexes[topIdx][leftIdx] = i;
item.topIdx = topIdx;
item.leftIdx = leftIdx;
if (this._layoutParams.columns < leftIdx) this._layoutParams.columns = leftIdx;
} else {
item.topIdx = -1;
item.leftIdx = -1;
}
}
this._layoutParams.rows = this._layoutParams.itemsIndexes.length;
this._layoutParams.columns++;
},
hideTextRect: function (hide) {
var me = this;
this.store.each(function(item, index){
if (item.get('data').shapeType === 'textRect') {
me.dataViewItems[index].el[hide ? 'addClass' : 'removeClass']('hidden');
}
}, this);
this._state.hideTextRect = hide;
},
hideLinesGroup: function () {
$(this.cmpEl.find('div.grouped-data')[9]).hide();
},
hideLines: function () {
var me = this;
this.store.each(function(item, index){
if (item.get('groupName') === 'Lines') {
var el = me.dataViewItems[index].el;
if (el.is(':visible')) {
el.addClass('hidden');
}
}
}, this);
} }
})); }));

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

@ -817,8 +817,7 @@ define([
this._state.isFromImage = !!shapeprops.get_FromImage(); this._state.isFromImage = !!shapeprops.get_FromImage();
this._state.isFromSmartArtInternal = !!shapeprops.get_FromSmartArtInternal(); this._state.isFromSmartArtInternal = !!shapeprops.get_FromSmartArtInternal();
if (!hidechangetype && this.btnChangeShape.menu.items.length) { if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage() || shapeprops.get_FromSmartArtInternal()); this.btnChangeShape.shapePicker.hideTextRect(shapeprops.get_FromImage() || shapeprops.get_FromSmartArtInternal());
this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage() && !shapeprops.get_FromSmartArtInternal());
} }
var value = props.get_WrappingStyle(); var value = props.get_WrappingStyle();
@ -1824,34 +1823,30 @@ define([
var me = this, var me = this,
recents = Common.localStorage.getItem('de-recent-shapes'); recents = Common.localStorage.getItem('de-recent-shapes');
for (var i = 0; i < 2; i++) { var menuitem = new Common.UI.MenuItem({
var menuitem = new Common.UI.MenuItem({ template: _.template('<div id="id-change-shape-menu" class="menu-insertshape"></div>'),
template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'), });
index: i me.btnChangeShape.menu.addItem(menuitem);
});
me.btnChangeShape.menu.addItem(menuitem);
var shapePicker = new Common.UI.DataViewShape({ me.btnChangeShape.shapePicker = new Common.UI.DataViewShape({
el: $('#id-change-shape-menu-' + i), el: $('#id-change-shape-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>'),
groups: me.application.getCollection('ShapeGroups'), groups: me.application.getCollection('ShapeGroups'),
parentMenu: me.btnChangeShape.menu, parentMenu: me.btnChangeShape.menu,
restoreHeight: 640, restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed, textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null, recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0 hideTextRect: me._state.isFromImage || me._state.isFromSmartArtInternal,
}); hideLines: true
shapePicker.on('item:click', function(picker, item, record, e) { });
if (me.api) { me.btnChangeShape.shapePicker.on('item:click', function(picker, item, record, e) {
me.api.ChangeShapeType(record.get('data').shapeType); if (me.api) {
me.fireEvent('editcomplete', me); me.api.ChangeShapeType(record.get('data').shapeType);
} me.fireEvent('editcomplete', me);
if (e.type !== 'click') }
me.btnChangeShape.menu.hide(); if (e.type !== 'click')
}); me.btnChangeShape.menu.hide();
} });
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage || me._state.isFromSmartArtInternal);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage && !me._state.isFromSmartArtInternal);
}, },
UpdateThemeColors: function() { UpdateThemeColors: function() {

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

@ -776,8 +776,7 @@ define([
this._state.isFromImage = !!props.get_FromImage(); this._state.isFromImage = !!props.get_FromImage();
this._state.isFromSmartArtInternal = !!props.get_FromSmartArtInternal(); this._state.isFromSmartArtInternal = !!props.get_FromSmartArtInternal();
if (!hidechangetype && this.btnChangeShape.menu.items.length) { if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(props.get_FromImage() || props.get_FromSmartArtInternal()); this.btnChangeShape.shapePicker.hideTextRect(props.get_FromImage() || props.get_FromSmartArtInternal());
this.btnChangeShape.menu.items[1].setVisible(!props.get_FromImage() && !props.get_FromSmartArtInternal());
} }
// background colors // background colors
@ -1685,36 +1684,31 @@ define([
var me = this, var me = this,
recents = Common.localStorage.getItem('pe-recent-shapes'); recents = Common.localStorage.getItem('pe-recent-shapes');
for (var i = 0; i < 2; i++) { var menuitem = new Common.UI.MenuItem({
var menuitem = new Common.UI.MenuItem({ template: _.template('<div id="id-change-shape-menu" class="menu-insertshape"></div>'),
template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
index: i
}); });
me.btnChangeShape.menu.addItem(menuitem); me.btnChangeShape.menu.addItem(menuitem);
var shapePicker = new Common.UI.DataViewShape({ me.btnChangeShape.shapePicker = new Common.UI.DataViewShape({
el: $('#id-change-shape-menu-' + i), el: $('#id-change-shape-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>'),
groups: me.application.getCollection('ShapeGroups'), groups: me.application.getCollection('ShapeGroups'),
parentMenu: me.btnChangeShape.menu, parentMenu: me.btnChangeShape.menu,
restoreHeight: 640, restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed, textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null, recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0 hideTextRect: me._state.isFromImage || me._state.isFromSmartArtInternal,
}); hideLines: true
shapePicker.on('item:click', function(picker, item, record, e) { });
if (me.api) { me.btnChangeShape.shapePicker.on('item:click', function(picker, item, record, e) {
PE.getController('Toolbar').toolbar.cmbInsertShape.updateComboView(record); if (me.api) {
me.api.ChangeShapeType(record.get('data').shapeType); PE.getController('Toolbar').toolbar.cmbInsertShape.updateComboView(record);
me.fireEvent('editcomplete', me); me.api.ChangeShapeType(record.get('data').shapeType);
} me.fireEvent('editcomplete', me);
if (e.type !== 'click') }
me.btnChangeShape.menu.hide(); if (e.type !== 'click')
}); me.btnChangeShape.menu.hide();
} });
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage || me._state.isFromSmartArtInternal);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage && !me._state.isFromSmartArtInternal);
}, },
UpdateThemeColors: function() { UpdateThemeColors: function() {

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

@ -772,8 +772,7 @@ define([
this._state.isFromImage = !!shapeprops.get_FromImage(); this._state.isFromImage = !!shapeprops.get_FromImage();
this._state.isFromSmartArtInternal = !!shapeprops.asc_getFromSmartArtInternal(); this._state.isFromSmartArtInternal = !!shapeprops.asc_getFromSmartArtInternal();
if (!hidechangetype && this.btnChangeShape.menu.items.length) { if (!hidechangetype && this.btnChangeShape.menu.items.length) {
this.btnChangeShape.menu.items[0].setVisible(shapeprops.get_FromImage() || shapeprops.asc_getFromSmartArtInternal()); this.btnChangeShape.shapePicker.hideTextRect(shapeprops.get_FromImage() || shapeprops.asc_getFromSmartArtInternal());
this.btnChangeShape.menu.items[1].setVisible(!shapeprops.get_FromImage() && !shapeprops.asc_getFromSmartArtInternal());
} }
// background colors // background colors
@ -1694,34 +1693,30 @@ define([
var me = this, var me = this,
recents = Common.localStorage.getItem('sse-recent-shapes'); recents = Common.localStorage.getItem('sse-recent-shapes');
for (var i = 0; i < 2; i++) { var menuitem = new Common.UI.MenuItem({
var menuitem = new Common.UI.MenuItem({ template: _.template('<div id="id-change-shape-menu" class="menu-insertshape"></div>')
template: _.template('<div id="id-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'), });
index: i me.btnChangeShape.menu.addItem(menuitem);
});
me.btnChangeShape.menu.addItem(menuitem);
var shapePicker = new Common.UI.DataViewShape({ me.btnChangeShape.shapePicker = new Common.UI.DataViewShape({
el: $('#id-change-shape-menu-' + i), el: $('#id-change-shape-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>'),
groups: me.application.getCollection('ShapeGroups'), groups: me.application.getCollection('ShapeGroups'),
parentMenu: me.btnChangeShape.menu, parentMenu: me.btnChangeShape.menu,
restoreHeight: 640, restoreHeight: 640,
textRecentlyUsed: me.textRecentlyUsed, textRecentlyUsed: me.textRecentlyUsed,
recentShapes: recents ? JSON.parse(recents) : null, recentShapes: recents ? JSON.parse(recents) : null,
isFromImage: i === 0 hideTextRect: me._state.isFromImage || me._state.isFromSmartArtInternal,
}); hideLines: true
shapePicker.on('item:click', function(picker, item, record, e) { });
if (me.api) { me.btnChangeShape.shapePicker.on('item:click', function(picker, item, record, e) {
me.api.asc_changeShapeType(record.get('data').shapeType); if (me.api) {
Common.NotificationCenter.trigger('edit:complete', me); me.api.asc_changeShapeType(record.get('data').shapeType);
} Common.NotificationCenter.trigger('edit:complete', me);
if (e.type !== 'click') }
me.btnChangeShape.menu.hide(); if (e.type !== 'click')
}); me.btnChangeShape.menu.hide();
} });
me.btnChangeShape.menu.items[0].setVisible(me._state.isFromImage || me._state.isFromSmartArtInternal);
me.btnChangeShape.menu.items[1].setVisible(!me._state.isFromImage && !me._state.isFromSmartArtInternal);
}, },
onBtnRotateClick: function(btn) { onBtnRotateClick: function(btn) {