[SSE] Show equation bar

apps/spreadsheeteditor/main/app/controller/DocumentHolder.js

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

apps/spreadsheeteditor/main/app/controller/Toolbar.js

@@ -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.Symbol       ] = [this.textSymbols, 11, false, 'svg-icon-symbols'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Fraction     ] = [this.textFraction, 4];
+            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Fraction     ] = [this.textFraction, 4, false, 'svg-icon-fraction'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Script       ] = [this.textScript, 4];
+            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Script       ] = [this.textScript, 4, false, 'svg-icon-script'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Radical      ] = [this.textRadical, 4];
+            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];
+            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];
+            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];
+            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];
+            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Function     ] = [this.textFunction, 3, true, 'svg-icon-function'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Accent       ] = [this.textAccent, 4];
+            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Accent       ] = [this.textAccent, 4, false, 'svg-icon-accent'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LimitLog     ] = [this.textLimitAndLog, 3];
+            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.LimitLog     ] = [this.textLimitAndLog, 3, false, 'svg-icon-limAndLog'];
-            c_oAscMathMainTypeStrings[Common.define.c_oAscMathMainType.Operator     ] = [this.textOperator, 4];
+            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];
+            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();
                 }
             }
         },

apps/spreadsheeteditor/main/index.html

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

apps/spreadsheeteditor/main/index.html.deploy

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

apps/spreadsheeteditor/main/index_loader.html

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

apps/spreadsheeteditor/main/index_loader.html.deploy

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

apps/spreadsheeteditor/main/resources/less/toolbar.less

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