Merge branch 'develop' of https://github.com/ONLYOFFICE/web-apps-pro into develop

apps/common/main/lib/view/ReviewPopover.js

@@ -196,7 +196,7 @@ define([
                             }
 
                             parentView.scroller.scrollTop(scrollPos);
-                            view.autoScrollToEditButtons();
+                            parentView.autoScrollToEditButtons();
                         }
 
                         if (textBox && textBox.length) {
@@ -216,23 +216,6 @@ define([
                             this.textBox.unbind('input propertychange');
                             this.textBox = undefined;
                         }
-                    },
-                    autoScrollToEditButtons: function () {
-                        var button = $('#id-comments-change-popover'),  // TODO: add to cache
-                            btnBounds = null,
-                            contentBounds = this.el.getBoundingClientRect(),
-                            moveY = 0,
-                            padding = 7;
-
-                        if (button.length) {
-                            btnBounds = button.get(0).getBoundingClientRect();
-                            if (btnBounds && contentBounds) {
-                                moveY = contentBounds.bottom - (btnBounds.bottom + padding);
-                                if (moveY < 0) {
-                                    parentView.scroller.scrollTop(parentView.scroller.getScrollTop() - moveY);
-                                }
-                            }
-                        }
                     }
                 }
             })());
@@ -328,7 +311,7 @@ define([
 
                                     me.hookTextBox();
 
-                                    this.autoScrollToEditButtons();
+                                    me.autoScrollToEditButtons();
                                     this.setFocusToTextBox();
                                 } else {
                                     if (!showEditBox) {
@@ -347,7 +330,7 @@ define([
 
                                         me.hookTextBox();
 
-                                        this.autoScrollToEditButtons();
+                                        me.autoScrollToEditButtons();
                                         this.setFocusToTextBox();
                                     }
                                 }
@@ -380,7 +363,7 @@ define([
                                 this.autoHeightTextBox();
                                 me.hookTextBox();
 
-                                this.autoScrollToEditButtons();
+                                me.autoScrollToEditButtons();
                                 this.setFocusToTextBox();
                             } else if (btn.hasClass('btn-reply', false)) {
                                 if (showReplyBox) {
@@ -388,6 +371,7 @@ define([
 
                                     me.fireEvent('comment:addReply', [commentId, this.getActiveTextBoxVal()]);
                                     me.fireEvent('comment:closeEditing');
+                                    me.calculateSizeOfContent();
 
                                     readdresolves();
                                 }
@@ -774,6 +758,8 @@ define([
                 sdkBoundsTopPos = 0;
 
             if (commentsView && arrowView && commentsView.get(0)) {
+                var scrollPos = this.scroller.getScrollTop();
+
                 commentsView.css({height: '100%'});
 
                 contentBounds = commentsView.get(0).getBoundingClientRect();
@@ -813,6 +799,7 @@ define([
                                 arrowPosY = Math.min(arrowPosY, sdkBoundsHeight - (sdkPanelHeight + this.arrow.margin + this.arrow.width));
 
                                 arrowView.css({top: arrowPosY + 'px'});
+                                this.scroller.scrollTop(scrollPos);
                             } else {
 
                                 outerHeight = windowHeight;
@@ -922,6 +909,24 @@ define([
             return this.popover;
         },
 
+        autoScrollToEditButtons: function () {
+            var button = $('#id-comments-change-popover'),  // TODO: add to cache
+                btnBounds = null,
+                contentBounds = this.$window[0].getBoundingClientRect(),
+                moveY = 0,
+                padding = 7;
+
+            if (button.length) {
+                btnBounds = button.get(0).getBoundingClientRect();
+                if (btnBounds && contentBounds) {
+                    moveY = contentBounds.bottom - (btnBounds.bottom + padding);
+                    if (moveY < 0) {
+                        this.scroller.scrollTop(this.scroller.getScrollTop() - moveY);
+                    }
+                }
+            }
+        },
+
         textAddReply            : 'Add Reply',
         textAdd                 : "Add",
         textCancel              : 'Cancel',

apps/common/main/resources/less/window.less

@@ -34,6 +34,7 @@
     opacity: 0;
 
     position: fixed;
+    cursor: default;
 
     > .header {
         height: 34px;

apps/documenteditor/main/app/view/DocumentHolder.js

@@ -673,7 +673,7 @@ define([
 
             var onDialogAddHyperlink = function() {
                 var win, props, text;
-                if (me.api && me.mode.isEdit && !me._isDisabled){
+                if (me.api && me.mode.isEdit && !me._isDisabled && !DE.getController('LeftMenu').leftMenu.menuFile.isVisible()){
                     var handlerDlg = function(dlg, result) {
                         if (result == 'ok') {
                             props = dlg.getSettings();

apps/documenteditor/main/resources/less/toolbar.less

@@ -341,10 +341,10 @@
 //.button-normal-icon(btn-dropcap,          50, @toolbar-icon-size);
 .button-normal-icon(btn-ic-doclang,     67, @toolbar-icon-size);
 
-.button-normal-icon(rotate-270,     67, @toolbar-icon-size);
+.button-normal-icon(rotate-90,      81, @toolbar-icon-size);
-.button-normal-icon(rotate-90,      67, @toolbar-icon-size);
+.button-normal-icon(rotate-270,     82, @toolbar-icon-size);
-.button-normal-icon(flip-vert,      67, @toolbar-icon-size);
+.button-normal-icon(flip-hor,       84, @toolbar-icon-size);
-.button-normal-icon(flip-hor,       67, @toolbar-icon-size);
+.button-normal-icon(flip-vert,      85, @toolbar-icon-size);
 
 @menu-icon-size: 22px;
 .menu-icon-normal(mnu-wrap-inline,          0, @menu-icon-size);

apps/presentationeditor/main/app/template/ImageSettings.template

@@ -22,6 +22,32 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <label class="header"><%= scope.textRotation %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textRotate90 %></label>
+            <div>
+                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-90" style="display: inline-block;"></div>
+            </div>
+        </td>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textFlip %></label>
+            <div>
+                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-flipv" style="display: inline-block;"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2>
             <label class="header" id="image-lbl-replace" ><%= scope.textInsert %></label>

apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template

@@ -45,6 +45,32 @@
         </table>
     </div>
 </div>
+<div id="id-adv-image-rotate" class="settings-panel active">
+    <div class="inner-content  padding-large">
+        <div style="width: 100%;">
+            <label class="input-label"><%= scope.textAngle %></label>
+            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+        </div>
+    </div>
+    <div class="separator horizontal padding-large"></div>
+    <div class="inner-content  padding-large">
+        <table cols="2">
+            <tr>
+                <td rowspan="2" class="padding-small" style="vertical-align: top;">
+                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                </td>
+                <td class="padding-small">
+                    <div id="image-advanced-checkbox-hor"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="image-advanced-checkbox-vert"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-image-alttext" class="settings-panel">
     <div class="inner-content">
         <table cols="1" width="100%">

apps/presentationeditor/main/app/template/ShapeSettings.template

@@ -116,6 +116,38 @@
         </div>
         </td>
     </tr>
+    <tr class="shape-only">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="shape-only">
+        <td class="padding-small">
+            <label class="header"><%= scope.textRotation %></label>
+        </td>
+    </tr>
+    <tr class="shape-only">
+        <td>
+            <table cols="2" style="width: 100%;">
+                <tr>
+                    <td class="padding-small" width="50%">
+                        <label class="input-label"><%= scope.textRotate90 %></label>
+                        <div>
+                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-90" style="display: inline-block;"></div>
+                        </div>
+                    </td>
+                    <td class="padding-small" width="50%">
+                        <label class="input-label"><%= scope.textFlip %></label>
+                        <div>
+                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
     <tr class="change-type">
         <td class="padding-small">
             <div class="separator horizontal"></div>

apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template

@@ -17,6 +17,32 @@
         </table>
     </div>
 </div>
+<div id="id-adv-shape-rotate" class="settings-panel active">
+    <div class="inner-content  padding-large">
+        <div style="width: 100%;">
+            <label class="input-label"><%= scope.textAngle %></label>
+            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+        </div>
+    </div>
+    <div class="separator horizontal padding-large"></div>
+    <div class="inner-content  padding-large">
+        <table cols="2">
+            <tr>
+                <td rowspan="2" class="padding-small" style="vertical-align: top;">
+                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                </td>
+                <td class="padding-small">
+                    <div id="shape-advanced-checkbox-hor"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="shape-advanced-checkbox-vert"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-shape-shape" class="settings-panel">
     <div class="inner-content">
         <table cols="2" style="width: 100%;">

apps/presentationeditor/main/app/view/DocumentHolder.js

@@ -583,7 +583,7 @@ define([
             
             var onDialogAddHyperlink = function() {
                 var win, props, text;
-                if (me.api && me.mode.isEdit && !me._isDisabled){
+                if (me.api && me.mode.isEdit && !me._isDisabled && !PE.getController('LeftMenu').leftMenu.menuFile.isVisible()){
                     var handlerDlg = function(dlg, result) {
                         if (result == 'ok') {
                             props = dlg.getSettings();

apps/presentationeditor/main/app/view/ImageSettings.js

@@ -139,6 +139,46 @@ define([
                 this.fireEvent('editcomplete', this);
             }, this));
 
+            this.btnRotate270 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-270',
+                value: 0,
+                hint: this.textHint270
+            });
+            this.btnRotate270.render( $('#image-button-270', this.$el));
+            this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate270);
+
+            this.btnRotate90 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-90',
+                value: 1,
+                hint: this.textHint90
+            });
+            this.btnRotate90.render( $('#image-button-90', this.$el));
+            this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate90);
+
+            this.btnFlipV = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-vert',
+                value: 0,
+                hint: this.textHintFlipV
+            });
+            this.btnFlipV.render( $('#image-button-flipv', this.$el));
+            this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipV);
+
+            this.btnFlipH = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-hor',
+                value: 1,
+                hint: this.textHintFlipH
+            });
+            this.btnFlipH.render( $('#image-button-fliph', this.$el));
+            this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipH);
+
             this.linkAdvanced = $('#image-advanced-link');
             this.lblReplace = $('#image-lbl-replace');
             $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
@@ -268,6 +308,23 @@ define([
             }
         },
 
+        onBtnRotateClick: function(btn) {
+            var properties = new Asc.asc_CImgProperty();
+            properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
+            this.api.ImgApply(properties);
+            this.fireEvent('editcomplete', this);
+        },
+
+        onBtnFlipClick: function(btn) {
+            var properties = new Asc.asc_CImgProperty();
+            if (btn.options.value==1)
+                properties.asc_putFlipH(true);
+            else
+                properties.asc_putFlipV(true);
+            this.api.ImgApply(properties);
+            this.fireEvent('editcomplete', this);
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
@@ -293,7 +350,14 @@ define([
         textFromFile:   'From File',
         textAdvanced:   'Show advanced settings',
         textEditObject: 'Edit Object',
-        textEdit:       'Edit'
+        textEdit:       'Edit',
+        textRotation: 'Rotation',
+        textRotate90: 'Rotate 90°',
+        textFlip: 'Flip',
+        textHint270: 'Rotate Left 90°',
+        textHint90: 'Rotate Right 90°',
+        textHintFlipV: 'Flip Vertical',
+        textHintFlipH: 'Flip Horizontal'
 
     }, PE.Views.ImageSettings || {}));
 });

apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js

@@ -40,7 +40,8 @@
 
 define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.template',
     'common/main/lib/view/AdvancedSettingsWindow',
-    'common/main/lib/component/MetricSpinner'
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/CheckBox'
 ], function (contentTemplate) {
     'use strict';
 
@@ -59,6 +60,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                 title: this.textTitle,
                 items: [
                     {panelId: 'id-adv-image-size',       panelCaption: this.textPlacement},
+                    {panelId: 'id-adv-image-rotate',     panelCaption: this.textRotation},
                     {panelId: 'id-adv-image-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -171,6 +173,27 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             });
             this.spinners.push(this.spnY);
 
+            // Rotation
+            this.spnAngle = new Common.UI.MetricSpinner({
+                el: $('#image-advanced-spin-angle'),
+                step: 1,
+                width: 80,
+                defaultUnit : "°",
+                value: '0 °',
+                maxValue: 3600,
+                minValue: -3600
+            });
+
+            this.chFlipHor = new Common.UI.CheckBox({
+                el: $('#image-advanced-checkbox-hor'),
+                labelText: this.textHorizontally
+            });
+
+            this.chFlipVert = new Common.UI.CheckBox({
+                el: $('#image-advanced-checkbox-vert'),
+                labelText: this.textVertically
+            });
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -225,6 +248,11 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                     this.spnY.setValue('', true);
                 }
 
+                value = props.asc_getRot();
+                this.spnAngle.setValue((value==undefined || value===null) ? '' : Math.floor(value*180/3.14159265358979+0.5), true);
+                this.chFlipHor.setValue(props.asc_getFlipH());
+                this.chFlipVert.setValue(props.asc_getFlipV());
+
                 value = props.asc_getTitle();
                 this.inputAltTitle.setValue(value ? value : '');
 
@@ -254,6 +282,10 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             if (this.isAltDescChanged)
                 properties.asc_putDescription(this.textareaAltDescription.val());
 
+            properties.asc_putRot(this.spnAngle.getNumberValue() * 3.14159265358979 / 180);
+            properties.asc_putFlipH(this.chFlipHor.getValue()=='checked');
+            properties.asc_putFlipV(this.chFlipVert.getValue()=='checked');
+
             return { imageProps: properties };
         },
 
@@ -289,7 +321,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         textAlt: 'Alternative Text',
         textAltTitle: 'Title',
         textAltDescription: 'Description',
-        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
+        textRotation: 'Rotation',
+        textAngle: 'Angle',
+        textFlipped: 'Flipped',
+        textHorizontally: 'Horizontally',
+        textVertically: 'Vertically'
 
     }, PE.Views.ImageSettingsAdvanced || {}));
 });

apps/presentationeditor/main/app/view/ShapeSettings.js

@@ -1290,6 +1290,46 @@ define([
             this.btnChangeShape.render( $('#shape-btn-change')) ;
             this.lockedControls.push(this.btnChangeShape);
 
+            this.btnRotate270 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-270',
+                value: 0,
+                hint: this.textHint270
+            });
+            this.btnRotate270.render( $('#shape-button-270', me.$el));
+            this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate270);
+
+            this.btnRotate90 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-90',
+                value: 1,
+                hint: this.textHint90
+            });
+            this.btnRotate90.render( $('#shape-button-90', me.$el));
+            this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate90);
+
+            this.btnFlipV = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-vert',
+                value: 0,
+                hint: this.textHintFlipV
+            });
+            this.btnFlipV.render( $('#shape-button-flipv', me.$el));
+            this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipV);
+
+            this.btnFlipH = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-hor',
+                value: 1,
+                hint: this.textHintFlipH
+            });
+            this.btnFlipH.render( $('#shape-button-fliph', me.$el));
+            this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipH);
+
             this.linkAdvanced = $('#shape-advanced-link');
             $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
@@ -1544,6 +1584,23 @@ define([
             this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
         },
 
+        onBtnRotateClick: function(btn) {
+            var properties = new Asc.asc_CShapeProperty();
+            properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
+            this.api.ShapeApply(properties);
+            this.fireEvent('editcomplete', this);
+        },
+
+        onBtnFlipClick: function(btn) {
+            var properties = new Asc.asc_CShapeProperty();
+            if (btn.options.value==1)
+                properties.asc_putFlipH(true);
+            else
+                properties.asc_putFlipV(true);
+            this.api.ShapeApply(properties);
+            this.fireEvent('editcomplete', this);
+        },
+
         _pt2mm: function(value) {
             return (value * 25.4 / 72.0);
         },
@@ -1643,6 +1700,13 @@ define([
         textStyle: 'Style',
         textGradient: 'Gradient',
         textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
-        strType: 'Type'
+        strType: 'Type',
+        textRotation: 'Rotation',
+        textRotate90: 'Rotate 90°',
+        textFlip: 'Flip',
+        textHint270: 'Rotate Left 90°',
+        textHint90: 'Rotate Right 90°',
+        textHintFlipV: 'Flip Vertical',
+        textHintFlipH: 'Flip Horizontal'
     }, PE.Views.ShapeSettings || {}));
 });

apps/presentationeditor/main/app/view/ShapeSettingsAdvanced.js

@@ -41,7 +41,8 @@
 define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.template',
     'common/main/lib/view/AdvancedSettingsWindow',
     'common/main/lib/component/ComboBox',
-    'common/main/lib/component/MetricSpinner'
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/CheckBox'
 ], function (contentTemplate) {
     'use strict';
 
@@ -61,6 +62,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 title: this.textTitle,
                 items: [
                     {panelId: 'id-adv-shape-width',      panelCaption: this.textSize},
+                    {panelId: 'id-adv-shape-rotate',     panelCaption: this.textRotation},
                     {panelId: 'id-adv-shape-shape',      panelCaption: this.textWeightArrows},
                     {panelId: 'id-adv-shape-margins',    panelCaption: this.strMargins},
                     {panelId: 'id-adv-shape-columns',    panelCaption: this.strColumns},
@@ -230,6 +232,27 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             }, this));
             this.spinners.push(this.spnMarginRight);
 
+            // Rotation
+            this.spnAngle = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-angle'),
+                step: 1,
+                width: 80,
+                defaultUnit : "°",
+                value: '0 °',
+                maxValue: 3600,
+                minValue: -3600
+            });
+
+            this.chFlipHor = new Common.UI.CheckBox({
+                el: $('#shape-advanced-checkbox-hor'),
+                labelText: this.textHorizontally
+            });
+
+            this.chFlipVert = new Common.UI.CheckBox({
+                el: $('#shape-advanced-checkbox-vert'),
+                labelText: this.textVertically
+            });
+
             // Shape
             this._arrCapType = [
                 {displayValue: this.textFlat,   value: Asc.c_oAscLineCapType.Flat},
@@ -499,10 +522,10 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                     val = margins.get_Bottom();
                     this.spnMarginBottom.setValue((null !== val && undefined !== val) ? Common.Utils.Metric.fnRecalcFromMM(val) : '', true);
                 }
-                this.btnsCategory[2].setDisabled(null === margins);   // Margins
+                this.btnsCategory[3].setDisabled(null === margins);   // Margins
 
                 var shapetype = props.asc_getType();
-                this.btnsCategory[3].setDisabled(shapetype=='line' || shapetype=='bentConnector2' || shapetype=='bentConnector3'
+                this.btnsCategory[4].setDisabled(shapetype=='line' || shapetype=='bentConnector2' || shapetype=='bentConnector3'
                     || shapetype=='bentConnector4' || shapetype=='bentConnector5' || shapetype=='curvedConnector2'
                     || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
                     || shapetype=='straightConnector1');
@@ -519,6 +542,11 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
                 value = props.asc_getDescription();
                 this.textareaAltDescription.val(value ? value : '');
 
+                value = props.asc_getRot();
+                this.spnAngle.setValue((value==undefined || value===null) ? '' : Math.floor(value*180/3.14159265358979+0.5), true);
+                this.chFlipHor.setValue(props.asc_getFlipH());
+                this.chFlipVert.setValue(props.asc_getFlipV());
+
                 this._changedProps = new Asc.asc_CShapeProperty();
             }
         },
@@ -530,6 +558,10 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             if (this.isAltDescChanged)
                 this._changedProps.asc_putDescription(this.textareaAltDescription.val());
 
+            this._changedProps.asc_putRot(this.spnAngle.getNumberValue() * 3.14159265358979 / 180);
+            this._changedProps.asc_putFlipH(this.chFlipHor.getValue()=='checked');
+            this._changedProps.asc_putFlipV(this.chFlipVert.getValue()=='checked');
+
             Common.localStorage.setItem("pe-settings-shaperatio", (this.btnRatio.pressed) ? 1 : 0);
             return { shapeProps: this._changedProps} ;
         },
@@ -538,7 +570,7 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
             if (props ){
                 var stroke = props.get_stroke();
                 if (stroke) {
-                    this.btnsCategory[1].setDisabled(stroke.get_type() == Asc.c_oAscStrokeType.STROKE_NONE);   // Weights & Arrows
+                    this.btnsCategory[2].setDisabled(stroke.get_type() == Asc.c_oAscStrokeType.STROKE_NONE);   // Weights & Arrows
 
                     var value = stroke.get_linejoin();
                     for (var i=0; i<this._arrJoinType.length; i++) {
@@ -731,7 +763,12 @@ define([    'text!presentationeditor/main/app/template/ShapeSettingsAdvanced.tem
         textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
         strColumns: 'Columns',
         textSpacing: 'Spacing between columns',
-        textColNumber: 'Number of columns'
+        textColNumber: 'Number of columns',
+        textRotation: 'Rotation',
+        textAngle: 'Angle',
+        textFlipped: 'Flipped',
+        textHorizontally: 'Horizontally',
+        textVertically: 'Vertically'
 
     }, PE.Views.ShapeSettingsAdvanced || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1037,6 +1037,13 @@
   "PE.Views.ImageSettings.textOriginalSize": "Default Size",
   "PE.Views.ImageSettings.textSize": "Size",
   "PE.Views.ImageSettings.textWidth": "Width",
+  "PE.Views.ImageSettings.textRotation": "Rotation",
+  "PE.Views.ImageSettings.textRotate90": "Rotate 90°",
+  "PE.Views.ImageSettings.textFlip": "Flip",
+  "PE.Views.ImageSettings.textHint270": "Rotate Left 90°",
+  "PE.Views.ImageSettings.textHint90": "Rotate Right 90°",
+  "PE.Views.ImageSettings.textHintFlipV": "Flip Vertical",
+  "PE.Views.ImageSettings.textHintFlipH": "Flip Horizontal",
   "PE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
   "PE.Views.ImageSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
@@ -1051,6 +1058,11 @@
   "PE.Views.ImageSettingsAdvanced.textSize": "Size",
   "PE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
   "PE.Views.ImageSettingsAdvanced.textWidth": "Width",
+  "PE.Views.ImageSettingsAdvanced.textRotation": "Rotation",
+  "PE.Views.ImageSettingsAdvanced.textAngle": "Angle",
+  "PE.Views.ImageSettingsAdvanced.textFlipped": "Flipped",
+  "PE.Views.ImageSettingsAdvanced.textHorizontally": "Horizontally",
+  "PE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
   "PE.Views.LeftMenu.tipAbout": "About",
   "PE.Views.LeftMenu.tipChat": "Chat",
   "PE.Views.LeftMenu.tipComments": "Comments",
@@ -1148,6 +1160,13 @@
   "PE.Views.ShapeSettings.txtNoBorders": "No Line",
   "PE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "PE.Views.ShapeSettings.txtWood": "Wood",
+  "PE.Views.ShapeSettings.textRotation": "Rotation",
+  "PE.Views.ShapeSettings.textRotate90": "Rotate 90°",
+  "PE.Views.ShapeSettings.textFlip": "Flip",
+  "PE.Views.ShapeSettings.textHint270": "Rotate Left 90°",
+  "PE.Views.ShapeSettings.textHint90": "Rotate Right 90°",
+  "PE.Views.ShapeSettings.textHintFlipV": "Flip Vertical",
+  "PE.Views.ShapeSettings.textHintFlipH": "Flip Horizontal",
   "PE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "PE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
@@ -1182,6 +1201,11 @@
   "PE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "PE.Views.ShapeSettingsAdvanced.textWidth": "Width",
   "PE.Views.ShapeSettingsAdvanced.txtNone": "None",
+  "PE.Views.ShapeSettingsAdvanced.textRotation": "Rotation",
+  "PE.Views.ShapeSettingsAdvanced.textAngle": "Angle",
+  "PE.Views.ShapeSettingsAdvanced.textFlipped": "Flipped",
+  "PE.Views.ShapeSettingsAdvanced.textHorizontally": "Horizontally",
+  "PE.Views.ShapeSettingsAdvanced.textVertically": "Vertically",
   "PE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "PE.Views.SignatureSettings.strDelete": "Remove Signature",
   "PE.Views.SignatureSettings.strDetails": "Signature Details",

apps/presentationeditor/main/resources/less/toolbar.less

@@ -289,6 +289,11 @@
 .toolbar-btn-icon(btn-save-coauth,      69, @toolbar-icon-size);
 //.toolbar-btn-icon(btn-insertequation,   74, @toolbar-icon-size);
 
+//.toolbar-btn-icon(rotate-90,      79, @toolbar-icon-size);
+//.toolbar-btn-icon(rotate-270,     80, @toolbar-icon-size);
+//.toolbar-btn-icon(flip-hor,       81, @toolbar-icon-size);
+//.toolbar-btn-icon(flip-vert,      82, @toolbar-icon-size);
+
 // add slide
 //.btn-toolbar .btn-addslide {background-position: 0 -120px;}
 //.btn-toolbar.active   > .btn-addslide,

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

@@ -1437,7 +1437,8 @@ define([
                         e.stopPropagation();
                     },
                     'command+k,ctrl+k': function (e) {
-                        if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.toolbar.mode.isEditDiagram && !me.api.isCellEdited && !me._state.multiselect && !me._state.inpivot)
+                        if (me.editMode && !me.toolbar.mode.isEditMailMerge && !me.toolbar.mode.isEditDiagram && !me.api.isCellEdited && !me._state.multiselect && !me._state.inpivot &&
+                            !me.getApplication().getController('LeftMenu').leftMenu.menuFile.isVisible())
                             me.onHyperlink();
                         e.preventDefault();
                     },

apps/spreadsheeteditor/main/app/template/ImageSettings.template

@@ -29,6 +29,32 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td colspan=2 class="padding-small">
+            <label class="header"><%= scope.textRotation %></label>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textRotate90 %></label>
+            <div>
+                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-90" style="display: inline-block;"></div>
+            </div>
+        </td>
+        <td class="padding-small" width="50%">
+            <label class="input-label"><%= scope.textFlip %></label>
+            <div>
+                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                <div id="image-button-flipv" style="display: inline-block;"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2>
             <label class="header" id="image-lbl-replace"><%= scope.textInsert %></label>

apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template

@@ -1,3 +1,29 @@
+<div id="id-adv-image-rotate" class="settings-panel active">
+    <div class="inner-content  padding-large">
+        <div style="width: 100%;">
+            <label class="input-label"><%= scope.textAngle %></label>
+            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+        </div>
+    </div>
+    <div class="separator horizontal padding-large"></div>
+    <div class="inner-content  padding-large">
+        <table cols="2">
+            <tr>
+                <td rowspan="2" class="padding-small" style="vertical-align: top;">
+                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                </td>
+                <td class="padding-small">
+                    <div id="image-advanced-checkbox-hor"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="image-advanced-checkbox-vert"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-image-alttext" class="settings-panel active">
     <div class="inner-content">
         <table cols="1" width="100%">

apps/spreadsheeteditor/main/app/template/ShapeSettings.template

@@ -116,6 +116,38 @@
         </div>
         </td>
     </tr>
+    <tr class="shape-only">
+        <td class="padding-small">
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr class="shape-only">
+        <td class="padding-small">
+            <label class="header"><%= scope.textRotation %></label>
+        </td>
+    </tr>
+    <tr class="shape-only">
+        <td>
+            <table cols="2" style="width: 100%;">
+                <tr>
+                    <td class="padding-small" width="50%">
+                        <label class="input-label"><%= scope.textRotate90 %></label>
+                        <div>
+                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-90" style="display: inline-block;"></div>
+                        </div>
+                    </td>
+                    <td class="padding-small" width="50%">
+                        <label class="input-label"><%= scope.textFlip %></label>
+                        <div>
+                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
+                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
     <tr class="change-type">
         <td class="padding-small">
             <div class="separator horizontal"></div>

apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template

@@ -17,6 +17,32 @@
     </table>
     </div>
 </div>
+<div id="id-adv-shape-rotate" class="settings-panel active">
+    <div class="inner-content  padding-large">
+        <div style="width: 100%;">
+            <label class="input-label"><%= scope.textAngle %></label>
+            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+        </div>
+    </div>
+    <div class="separator horizontal padding-large"></div>
+    <div class="inner-content  padding-large">
+        <table cols="2">
+            <tr>
+                <td rowspan="2" class="padding-small" style="vertical-align: top;">
+                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                </td>
+                <td class="padding-small">
+                    <div id="shape-advanced-checkbox-hor"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="shape-advanced-checkbox-vert"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-shape-shape" class="settings-panel">
     <div class="inner-content">
         <table cols="2" style="width: 100%;">

apps/spreadsheeteditor/main/app/view/ImageSettings.js

@@ -195,6 +195,46 @@ define([
 
             this.lblReplace = $('#image-lbl-replace');
 
+            this.btnRotate270 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-270',
+                value: 0,
+                hint: this.textHint270
+            });
+            this.btnRotate270.render( $('#image-button-270', me.$el));
+            this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate270);
+
+            this.btnRotate90 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-90',
+                value: 1,
+                hint: this.textHint90
+            });
+            this.btnRotate90.render( $('#image-button-90', me.$el));
+            this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate90);
+
+            this.btnFlipV = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-vert',
+                value: 0,
+                hint: this.textHintFlipV
+            });
+            this.btnFlipV.render( $('#image-button-flipv', me.$el));
+            this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipV);
+
+            this.btnFlipH = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-hor',
+                value: 1,
+                hint: this.textHintFlipH
+            });
+            this.btnFlipH.render( $('#image-button-fliph', me.$el));
+            this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipH);
+
             $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
 
@@ -366,6 +406,23 @@ define([
             })).show();
         },
 
+        onBtnRotateClick: function(btn) {
+            var properties = new Asc.asc_CImgProperty();
+            properties.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
+            this.api.asc_setGraphicObjectProps(properties);
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onBtnFlipClick: function(btn) {
+            var properties = new Asc.asc_CImgProperty();
+            if (btn.options.value==1)
+                properties.asc_putFlipH(true);
+            else
+                properties.asc_putFlipV(true);
+            this.api.asc_setGraphicObjectProps(properties);
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },
@@ -392,6 +449,13 @@ define([
         textFromFile:   'From File',
         textEditObject: 'Edit Object',
         textEdit:       'Edit',
-        textAdvanced:   'Show advanced settings'
+        textAdvanced:   'Show advanced settings',
+        textRotation: 'Rotation',
+        textRotate90: 'Rotate 90°',
+        textFlip: 'Flip',
+        textHint270: 'Rotate Left 90°',
+        textHint90: 'Rotate Right 90°',
+        textHintFlipV: 'Flip Vertical',
+        textHintFlipH: 'Flip Horizontal'
     }, SSE.Views.ImageSettings || {}));
 });

apps/spreadsheeteditor/main/app/view/ImageSettingsAdvanced.js

@@ -40,7 +40,9 @@
 
 define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template',
     'common/main/lib/view/AdvancedSettingsWindow',
-    'common/main/lib/component/InputField'
+    'common/main/lib/component/InputField',
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/CheckBox'
 ], function (contentTemplate) {
     'use strict';
 
@@ -57,6 +59,7 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
+                    {panelId: 'id-adv-image-rotate',     panelCaption: this.textRotation},
                     {panelId: 'id-adv-image-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -74,6 +77,27 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
 
             var me = this;
 
+            // Rotation
+            this.spnAngle = new Common.UI.MetricSpinner({
+                el: $('#image-advanced-spin-angle'),
+                step: 1,
+                width: 80,
+                defaultUnit : "°",
+                value: '0 °',
+                maxValue: 3600,
+                minValue: -3600
+            });
+
+            this.chFlipHor = new Common.UI.CheckBox({
+                el: $('#image-advanced-checkbox-hor'),
+                labelText: this.textHorizontally
+            });
+
+            this.chFlipVert = new Common.UI.CheckBox({
+                el: $('#image-advanced-checkbox-vert'),
+                labelText: this.textVertically
+            });
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -112,6 +136,11 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
                 value = props.asc_getDescription();
                 this.textareaAltDescription.val(value ? value : '');
 
+                value = props.asc_getRot();
+                this.spnAngle.setValue((value==undefined || value===null) ? '' : Math.floor(value*180/3.14159265358979+0.5), true);
+                this.chFlipHor.setValue(props.asc_getFlipH());
+                this.chFlipVert.setValue(props.asc_getFlipV());
+
                 this._changedProps = new Asc.asc_CImgProperty();
             }
         },
@@ -123,6 +152,10 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
             if (this.isAltDescChanged)
                 this._changedProps.asc_putDescription(this.textareaAltDescription.val());
 
+            this._changedProps.asc_putRot(this.spnAngle.getNumberValue() * 3.14159265358979 / 180);
+            this._changedProps.asc_putFlipH(this.chFlipHor.getValue()=='checked');
+            this._changedProps.asc_putFlipV(this.chFlipVert.getValue()=='checked');
+
             return { imageProps: this._changedProps} ;
         },
 
@@ -132,7 +165,12 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
         textAlt: 'Alternative Text',
         textAltTitle: 'Title',
         textAltDescription: 'Description',
-        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.'
+        textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
+        textRotation: 'Rotation',
+        textAngle: 'Angle',
+        textFlipped: 'Flipped',
+        textHorizontally: 'Horizontally',
+        textVertically: 'Vertically'
 
     }, SSE.Views.ImageSettingsAdvanced || {}));
 });

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -1314,6 +1314,46 @@ define([
             this.btnChangeShape.render( $('#shape-btn-change')) ;
             this.lockedControls.push(this.btnChangeShape);
 
+            this.btnRotate270 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-270',
+                value: 0,
+                hint: this.textHint270
+            });
+            this.btnRotate270.render( $('#shape-button-270', me.$el));
+            this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate270);
+
+            this.btnRotate90 = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'rotate-90',
+                value: 1,
+                hint: this.textHint90
+            });
+            this.btnRotate90.render( $('#shape-button-90', me.$el));
+            this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
+            this.lockedControls.push(this.btnRotate90);
+
+            this.btnFlipV = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-vert',
+                value: 0,
+                hint: this.textHintFlipV
+            });
+            this.btnFlipV.render( $('#shape-button-flipv', me.$el));
+            this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipV);
+
+            this.btnFlipH = new Common.UI.Button({
+                cls: 'btn-toolbar',
+                iconCls: 'flip-hor',
+                value: 1,
+                hint: this.textHintFlipH
+            });
+            this.btnFlipH.render( $('#shape-button-fliph', me.$el));
+            this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
+            this.lockedControls.push(this.btnFlipH);
+
             $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
             this.linkAdvanced = $('#shape-advanced-link');
         },
@@ -1463,6 +1503,25 @@ define([
             }
         },
 
+        onBtnRotateClick: function(btn) {
+            var props = new Asc.asc_CShapeProperty();
+            props.asc_putRot((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
+            this.imgprops.asc_putShapeProperties(props);
+            this.api.asc_setGraphicObjectProps(this.imgprops);
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
+        onBtnFlipClick: function(btn) {
+            var props = new Asc.asc_CShapeProperty();
+            if (btn.options.value==1)
+                props.asc_putFlipH(true);
+            else
+                props.asc_putFlipV(true);
+            this.imgprops.asc_putShapeProperties(props);
+            this.api.asc_setGraphicObjectProps(this.imgprops);
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
         UpdateThemeColors: function() {
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
@@ -1668,6 +1727,13 @@ define([
         textStyle: 'Style',
         textGradient: 'Gradient',
         textBorderSizeErr: 'The entered value is incorrect.<br>Please enter a value between 0 pt and 1584 pt.',
-        strType: 'Type'
+        strType: 'Type',
+        textRotation: 'Rotation',
+        textRotate90: 'Rotate 90°',
+        textFlip: 'Flip',
+        textHint270: 'Rotate Left 90°',
+        textHint90: 'Rotate Right 90°',
+        textHintFlipV: 'Flip Vertical',
+        textHintFlipH: 'Flip Horizontal'
     }, SSE.Views.ShapeSettings || {}));
 });

apps/spreadsheeteditor/main/app/view/ShapeSettingsAdvanced.js

@@ -41,7 +41,8 @@
 define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template',
     'common/main/lib/view/AdvancedSettingsWindow',
     'common/main/lib/component/ComboBox',
-    'common/main/lib/component/MetricSpinner'
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/CheckBox'
 ], function (contentTemplate) {
     'use strict';
 
@@ -61,6 +62,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 title: this.textTitle,
                 items: [
                     {panelId: 'id-adv-shape-width',      panelCaption: this.textSize},
+                    {panelId: 'id-adv-shape-rotate',     panelCaption: this.textRotation},
                     {panelId: 'id-adv-shape-shape',      panelCaption: this.textWeightArrows},
                     {panelId: 'id-adv-shape-margins',    panelCaption: this.strMargins},
                     {panelId: 'id-adv-shape-columns',    panelCaption: this.strColumns},
@@ -246,6 +248,27 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
             }, this));
             this.spinners.push(this.spnMarginRight);
 
+            // Rotation
+            this.spnAngle = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-angle'),
+                step: 1,
+                width: 80,
+                defaultUnit : "°",
+                value: '0 °',
+                maxValue: 3600,
+                minValue: -3600
+            });
+
+            this.chFlipHor = new Common.UI.CheckBox({
+                el: $('#shape-advanced-checkbox-hor'),
+                labelText: this.textHorizontally
+            });
+
+            this.chFlipVert = new Common.UI.CheckBox({
+                el: $('#shape-advanced-checkbox-vert'),
+                labelText: this.textVertically
+            });
+
             // Shape
             this._arrCapType = [
                 {displayValue: this.textFlat,   value: Asc.c_oAscLineCapType.Flat},
@@ -533,10 +556,10 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                     val = margins.asc_getBottom();
                     this.spnMarginBottom.setValue((null !== val && undefined !== val) ? Common.Utils.Metric.fnRecalcFromMM(val) : '', true);
                 }
-                this.btnsCategory[2].setDisabled(null === margins);   // Margins
+                this.btnsCategory[3].setDisabled(null === margins);   // Margins
 
                 var shapetype = shapeprops.asc_getType();
-                this.btnsCategory[3].setDisabled(shapetype=='line' || shapetype=='bentConnector2' || shapetype=='bentConnector3'
+                this.btnsCategory[4].setDisabled(shapetype=='line' || shapetype=='bentConnector2' || shapetype=='bentConnector3'
                     || shapetype=='bentConnector4' || shapetype=='bentConnector5' || shapetype=='curvedConnector2'
                     || shapetype=='curvedConnector3' || shapetype=='curvedConnector4' || shapetype=='curvedConnector5'
                     || shapetype=='straightConnector1');
@@ -553,6 +576,11 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 value = props.asc_getDescription();
                 this.textareaAltDescription.val(value ? value : '');
 
+                value = props.asc_getRot();
+                this.spnAngle.setValue((value==undefined || value===null) ? '' : Math.floor(value*180/3.14159265358979+0.5), true);
+                this.chFlipHor.setValue(props.asc_getFlipH());
+                this.chFlipVert.setValue(props.asc_getFlipV());
+
                 this._changedProps = new Asc.asc_CImgProperty();
             }
         },
@@ -564,6 +592,10 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
             if (this.isAltDescChanged)
                 this._changedProps.asc_putDescription(this.textareaAltDescription.val());
 
+            this._changedProps.asc_putRot(this.spnAngle.getNumberValue() * 3.14159265358979 / 180);
+            this._changedProps.asc_putFlipH(this.chFlipHor.getValue()=='checked');
+            this._changedProps.asc_putFlipV(this.chFlipVert.getValue()=='checked');
+
             return { shapeProps: this._changedProps} ;
         },
 
@@ -571,7 +603,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
             if (props ){
                 var stroke = props.asc_getStroke();
                 if (stroke) {
-                    this.btnsCategory[1].setDisabled(stroke.asc_getType() == Asc.c_oAscStrokeType.STROKE_NONE);   // Weights & Arrows
+                    this.btnsCategory[2].setDisabled(stroke.asc_getType() == Asc.c_oAscStrokeType.STROKE_NONE);   // Weights & Arrows
 
                     var value = stroke.asc_getLinejoin();
                     for (var i=0; i<this._arrJoinType.length; i++) {
@@ -775,7 +807,12 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
         strColumns: 'Columns',
         textSpacing: 'Spacing between columns',
-        textColNumber: 'Number of columns'
+        textColNumber: 'Number of columns',
+        textRotation: 'Rotation',
+        textAngle: 'Angle',
+        textFlipped: 'Flipped',
+        textHorizontally: 'Horizontally',
+        textVertically: 'Vertically'
 
     }, SSE.Views.ShapeSettingsAdvanced || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1388,6 +1388,13 @@
   "SSE.Views.ImageSettings.textOriginalSize": "Default Size",
   "SSE.Views.ImageSettings.textSize": "Size",
   "SSE.Views.ImageSettings.textWidth": "Width",
+  "SSE.Views.ImageSettings.textRotation": "Rotation",
+  "SSE.Views.ImageSettings.textRotate90": "Rotate 90°",
+  "SSE.Views.ImageSettings.textFlip": "Flip",
+  "SSE.Views.ImageSettings.textHint270": "Rotate Left 90°",
+  "SSE.Views.ImageSettings.textHint90": "Rotate Right 90°",
+  "SSE.Views.ImageSettings.textHintFlipV": "Flip Vertical",
+  "SSE.Views.ImageSettings.textHintFlipH": "Flip Horizontal",
   "SSE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
   "SSE.Views.ImageSettingsAdvanced.okButtonText": "Ok",
   "SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",
@@ -1395,6 +1402,11 @@
   "SSE.Views.ImageSettingsAdvanced.textAltTip": "The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.",
   "SSE.Views.ImageSettingsAdvanced.textAltTitle": "Title",
   "SSE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
+  "SSE.Views.ImageSettingsAdvanced.textRotation": "Rotation",
+  "SSE.Views.ImageSettingsAdvanced.textAngle": "Angle",
+  "SSE.Views.ImageSettingsAdvanced.textFlipped": "Flipped",
+  "SSE.Views.ImageSettingsAdvanced.textHorizontally": "Horizontally",
+  "SSE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
   "SSE.Views.LeftMenu.tipAbout": "About",
   "SSE.Views.LeftMenu.tipChat": "Chat",
   "SSE.Views.LeftMenu.tipComments": "Comments",
@@ -1647,6 +1659,13 @@
   "SSE.Views.ShapeSettings.txtNoBorders": "No Line",
   "SSE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "SSE.Views.ShapeSettings.txtWood": "Wood",
+  "SSE.Views.ShapeSettings.textRotation": "Rotation",
+  "SSE.Views.ShapeSettings.textRotate90": "Rotate 90°",
+  "SSE.Views.ShapeSettings.textFlip": "Flip",
+  "SSE.Views.ShapeSettings.textHint270": "Rotate Left 90°",
+  "SSE.Views.ShapeSettings.textHint90": "Rotate Right 90°",
+  "SSE.Views.ShapeSettings.textHintFlipV": "Flip Vertical",
+  "SSE.Views.ShapeSettings.textHintFlipH": "Flip Horizontal",
   "SSE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "SSE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",
@@ -1680,6 +1699,11 @@
   "SSE.Views.ShapeSettingsAdvanced.textTop": "Top",
   "SSE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "SSE.Views.ShapeSettingsAdvanced.textWidth": "Width",
+  "SSE.Views.ShapeSettingsAdvanced.textRotation": "Rotation",
+  "SSE.Views.ShapeSettingsAdvanced.textAngle": "Angle",
+  "SSE.Views.ShapeSettingsAdvanced.textFlipped": "Flipped",
+  "SSE.Views.ShapeSettingsAdvanced.textHorizontally": "Horizontally",
+  "SSE.Views.ShapeSettingsAdvanced.textVertically": "Vertically",
   "SSE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "SSE.Views.SignatureSettings.strDelete": "Remove Signature",
   "SSE.Views.SignatureSettings.strDetails": "Signature Details",

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

@@ -168,6 +168,11 @@
 .toolbar-btn-icon(btn-subscript,        85, @toolbar-icon-size);
 .toolbar-btn-icon(btn-superscript,      86, @toolbar-icon-size);
 
+//.toolbar-btn-icon(rotate-90,      89, @toolbar-icon-size);
+//.toolbar-btn-icon(rotate-270,     90, @toolbar-icon-size);
+//.toolbar-btn-icon(flip-hor,       91, @toolbar-icon-size);
+//.toolbar-btn-icon(flip-vert,      92, @toolbar-icon-size);
+
 @menu-icon-size: 22px;
 .menu-btn-icon(mnu-align-center,         0, @menu-icon-size);
 .menu-btn-icon(mnu-align-just,           1, @menu-icon-size);