[SSE] Add rotation to image and shape settings in the right panel

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/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/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/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/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",
@@ -1647,6 +1654,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",

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