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

[SSE] Show equation bar

Browse source
This commit is contained in:
Julia Radzhabova 2022-11-01 01:23:02 +03:00
parent 47dffc8c0f
commit b75c2a061d
7 changed files with 169 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
apps/spreadsheeteditor/main/app/controller/DocumentHolder.js
View file

@ -1855,6 +1855,7 @@ define([
me.documentHolder.cmpEl.offset().top - $(window).scrollTop()
];
me.tooltips.coauth.apiHeight = me.documentHolder.cmpEl.height();
me.tooltips.coauth.apiWidth = me.documentHolder.cmpEl.width();
var rightMenu = $('#right-menu');
me.tooltips.coauth.rightMenuWidth = rightMenu.is(':visible') ? rightMenu.width() : 0;
me.tooltips.coauth.bodyWidth = $(window).width();
@ -1984,6 +1985,23 @@ define([
this.currentMenu && this.currentMenu.isVisible()){
(this.permissions.isEdit && !this._isDisabled) ? this.fillMenuProps(info, true) : this.fillViewMenuProps(info, true);
}
if (!this.mouse.isLeftButtonDown) return;
var selectedObjects = this.api.asc_getGraphicObjectProps(),
i = -1,
in_equation = false,
locked = false;
while (++i < selectedObjects.length) {
var type = selectedObjects[i].asc_getObjectType();
if (type === Asc.c_oAscTypeSelectElement.Math) {
in_equation = true;
} else if (type === Asc.c_oAscTypeSelectElement.Paragraph) {
var value = selectedObjects[i].asc_getObjectValue();
value && (locked = locked || value.asc_getLocked());
}
}
in_equation && this.permissions.isEdit && !this._isDisabled ? this.onEquationPanelShow(locked) : this.onEquationPanelHide();
},
fillMenuProps: function(cellinfo, showMenu, event){
@ -4276,6 +4294,121 @@ define([
}
},
onEquationPanelShow: function(disabled) {
var me = this,
documentHolder = me.documentHolder,
eqContainer = documentHolder.cmpEl.find('#equation-container');
// Prepare menu container
if (eqContainer.length < 1) {
var equationsStore = me.getApplication().getCollection('EquationGroups'),
eqStr = '<div id="equation-container" style="position: absolute;">';
me.getApplication().getController('Toolbar').onMathTypes();
me.equationBtns = [];
for (var i = 0; i < equationsStore.length; ++i) {
var style = 'margin-right: 8px;' + (i==0 ? 'margin-left: 5px;' : '');
eqStr += '<span id="id-document-holder-btn-equation-' + i + '" style="' + style +'"></span>';
}
// eqStr += '<div class="separator"></div>';
// eqStr += '<span id="id-document-holder-btn-equation-settings" style="margin-right: 5px; margin-left: 8px;"></span>';
eqStr += '</div>';
eqContainer = $(eqStr);
documentHolder.cmpEl.append(eqContainer);
var onShowBefore = function (menu) {
var index = menu.options.value,
group = equationsStore.at(index);
var equationPicker = new Common.UI.DataViewSimple({
el: $('#id-document-holder-btn-equation-menu-' + index, menu.cmpEl),
parentMenu: menu,
store: group.get('groupStore'),
scrollAlwaysVisible: true,
showLast: false,
restoreHeight: group.get('groupHeight') ? parseInt(group.get('groupHeight')) : true,
itemTemplate: _.template(
'<div class="item-equation" style="" >' +
'<div class="equation-icon" style="background-position:<%= posX %>px <%= posY %>px;width:<%= width %>px;height:<%= height %>px;" id="<%= id %>"></div>' +
'</div>')
});
equationPicker.on('item:click', function(picker, item, record, e) {
if (me.api) {
if (record)
me.api.asc_AddMath(record.get('data').equationType);
}
});
menu.off('show:before', onShowBefore);
};
for (var i = 0; i < equationsStore.length; ++i) {
var equationGroup = equationsStore.at(i);
var btn = new Common.UI.Button({
parentEl: $('#id-document-holder-btn-equation-' + i, documentHolder.cmpEl),
cls : 'btn-toolbar no-caret',
iconCls : 'svgicon ' + equationGroup.get('groupIcon'),
hint : equationGroup.get('groupName'),
menu : new Common.UI.Menu({
cls: 'menu-shapes',
value: i,
// restoreHeight: equationGroup.get('groupHeight') ? parseInt(equationGroup.get('groupHeight')) : true,
items: [
{ template: _.template('<div id="id-document-holder-btn-equation-menu-' + i +
'" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
equationGroup.get('groupHeightStr') + 'margin-left:5px;"></div>') }
]
})
});
btn.menu.on('show:before', onShowBefore);
me.equationBtns.push(btn);
}
/*
me.equationSettingsBtn = new Common.UI.Button({
parentEl: $('#id-document-holder-btn-equation-settings', documentHolder.cmpEl),
cls : 'btn-toolbar no-caret',
iconCls : 'toolbar__icon more-vertical',
hint : me.documentHolder.advancedEquationText,
menu : me.documentHolder.createEquationMenu('popuptbeqinput', 'tl-bl')
});
me.equationSettingsBtn.menu.options.initMenu = function() {
var eq = me.api.asc_GetMathInputType();
var menu = me.equationSettingsBtn.menu;
menu.items[0].setChecked(eq===Asc.c_oAscMathInputType.Unicode);
menu.items[1].setChecked(eq===Asc.c_oAscMathInputType.LaTeX);
menu.items[8].setChecked(me.api.asc_IsInlineMath());
};
me.equationSettingsBtn.menu.on('item:click', _.bind(me.convertEquation, me));
me.equationSettingsBtn.menu.on('show:before', function(menu) {
menu.options.initMenu();
});
*/
}
if (!me.tooltips.coauth.XY)
me.onDocumentResize();
var showPoint = [(me.tooltips.coauth.apiWidth - eqContainer.outerWidth())/2, 0];
eqContainer.css({left: showPoint[0], top : showPoint[1]});
if (eqContainer.is(':visible')) {
// if (me.equationSettingsBtn.menu.isVisible()) {
// me.equationSettingsBtn.menu.options.initMenu();
// me.equationSettingsBtn.menu.alignPosition();
// }
} else {
eqContainer.show();
}
me.equationBtns.forEach(function(item){
item && item.setDisabled(!!disabled);
});
// me.equationSettingsBtn.setDisabled(!!disabled);
},
onEquationPanelHide: function() {
var eqContainer = this.documentHolder.cmpEl.find('#equation-container');
if (eqContainer.is(':visible')) {
eqContainer.hide();
}
},
getUserName: function(id){
var usersStore = SSE.getCollection('Common.Collections.Users');
if (usersStore){

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

@ -3984,7 +3984,7 @@ define([
items: [
{ template: _.template('<div id="id-toolbar-menu-equationgroup' + i +
'" class="menu-shape" style="width:' + (equationGroup.get('groupWidth') + 8) + 'px; ' +
equationGroup.get('groupHeight') + 'margin-left:5px;"></div>') }
equationGroup.get('groupHeightStr') + 'margin-left:5px;"></div>') }
]
})
});
@ -4051,16 +4051,21 @@ define([
var me = this;
var onShowBefore = function(menu) {
me.onMathTypes(me._equationTemp);
if (me._equationTemp && me._equationTemp.get_Data().length>0)
me.fillEquations();
me.toolbar.btnInsertEquation.menu.off('show:before', onShowBefore);
};
me.toolbar.btnInsertEquation.menu.on('show:before', onShowBefore);
},
onMathTypes: function(equation) {
equation = equation || this._equationTemp;
var equationgrouparray = [],
equationsStore = this.getCollection('EquationGroups');
equationsStore.reset();
if (equationsStore.length>0)
return;
// equations groups
@ -4068,18 +4073,18 @@ define([
// [translate, count cells, scroll]
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Symbol ] = [this.textSymbols, 11];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Fraction ] = [this.textFraction, 4];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Script ] = [this.textScript, 4];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Radical ] = [this.textRadical, 4];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Integral ] = [this.textIntegral, 3, true];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LargeOperator] = [this.textLargeOperator, 5, true];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Bracket ] = [this.textBracket, 4, true];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Function ] = [this.textFunction, 3, true];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Accent ] = [this.textAccent, 4];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LimitLog ] = [this.textLimitAndLog, 3];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Operator ] = [this.textOperator, 4];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Matrix ] = [this.textMatrix, 4, true];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Symbol ] = [this.textSymbols, 11, false, 'svg-icon-symbols'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Fraction ] = [this.textFraction, 4, false, 'svg-icon-fraction'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Script ] = [this.textScript, 4, false, 'svg-icon-script'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Radical ] = [this.textRadical, 4, false, 'svg-icon-radical'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Integral ] = [this.textIntegral, 3, true, 'svg-icon-integral'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LargeOperator] = [this.textLargeOperator, 5, true, 'svg-icon-largeOperator'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Bracket ] = [this.textBracket, 4, true, 'svg-icon-bracket'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Function ] = [this.textFunction, 3, true, 'svg-icon-function'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Accent ] = [this.textAccent, 4, false, 'svg-icon-accent'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LimitLog ] = [this.textLimitAndLog, 3, false, 'svg-icon-limAndLog'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Operator ] = [this.textOperator, 4, false, 'svg-icon-operator'];
c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Matrix ] = [this.textMatrix, 4, true, 'svg-icon-matrix'];
// equations sub groups
@ -4149,12 +4154,14 @@ define([
groupName : c_oAscMathMainTypeStrings[id][0],
groupStore : store,
groupWidth : width,
groupHeight : c_oAscMathMainTypeStrings[id][2] ? ' height:'+ normHeight +'px!important; ' : ''
groupHeight : normHeight,
groupHeightStr : c_oAscMathMainTypeStrings[id][2] ? ' height:'+ normHeight +'px!important; ' : '',
groupIcon: c_oAscMathMainTypeStrings[id][3]
});
}
}
equationsStore.add(equationgrouparray);
this.fillEquations();
// this.fillEquations();
}
}
},

1
apps/spreadsheeteditor/main/index.html
View file

@ -368,6 +368,7 @@
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="resources/img/cf-icons.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');
SVGInjector(svgpoints);

1
apps/spreadsheeteditor/main/index.html.deploy
View file

@ -379,6 +379,7 @@
<inline src="../../common/main/resources/img/header/icons.svg" />
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
<inline src="resources/img/cf-icons.svg" />
<script src="../../../../../../sdkjs/common/device_scale.js?__inline=true"></script>

1
apps/spreadsheeteditor/main/index_loader.html
View file

@ -262,6 +262,7 @@
<img class="inline-svg" src="../../common/main/resources/img/header/icons.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/shapetypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/charttypes.svg">
<img class="inline-svg" src="../../common/main/resources/img/toolbar/equationicons.svg">
<img class="inline-svg" src="resources/img/cf-icons.svg">
<script>
var svgpoints = document.querySelectorAll('img.inline-svg');

1
apps/spreadsheeteditor/main/index_loader.html.deploy
View file

@ -320,6 +320,7 @@
<inline src="../../common/main/resources/img/header/icons.svg" />
<inline src="../../common/main/resources/img/toolbar/shapetypes.svg" />
<inline src="../../common/main/resources/img/toolbar/charttypes.svg" />
<inline src="../../common/main/resources/img/toolbar/equationicons.svg" />
<inline src="resources/img/cf-icons.svg" />
<div id="viewport"></div>

10
apps/spreadsheeteditor/main/resources/less/toolbar.less
View file

@ -108,7 +108,8 @@
}
#special-paste-container,
#autocorrect-paste-container {
#autocorrect-paste-container,
#equation-container {
position: absolute;
z-index: @zindex-dropdown - 20;
background-color: @background-toolbar-ie;
@ -117,6 +118,13 @@
border: @scaled-one-px-value solid @border-regular-control;
}
#equation-container {
padding: 4px;
.separator {
height: 20px;
}
}
#slot-field-fontsize {
width: 45px;
}