[PE] Make settings for relative positioning in image advanced settings

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

@@ -34,13 +34,23 @@
             </tr>
             <tr>
                 <td class="padding-small" width="115px">
-                    <label class="input-label">X</label>
+                    <label class="input-label"><%= scope.textHorizontal %></label>
                     <div id="image-advanced-spin-x"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label">Y</label>
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="image-advanced-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
                     <div id="image-advanced-spin-y"></div>
                 </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="image-advanced-combo-from-y"></div>
+                </td>
             </tr>
         </table>
     </div>

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

@@ -2527,6 +2527,7 @@ define([
                                     {
                                         imageProps: elValue,
                                         sizeOriginal: imgsizeOriginal,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {

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

@@ -436,6 +436,7 @@ define([
                                 {
                                     imageProps: elValue,
                                     sizeOriginal: imgsizeOriginal,
+                                    slideSize: PE.getController('Toolbar').currentPageSize,
                                     handler: function(result, value) {
                                         if (result == 'ok') {
                                             if (me.api) {

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

@@ -74,6 +74,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             this._nRatio = 1;
             this._isDefaultSize = false;
             this._originalProps = this.options.imageProps;
+            this.slideSize = this.options.slideSize;
         },
 
         render: function() {
@@ -178,6 +179,28 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             });
             this.spinners.push(this.spnY);
 
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#image-advanced-combo-from-x'),
+                cls: 'input-group-nr',
+                style: "width: 100px;",
+                menuStyle: 'min-width: 100px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ]
+            });
+
+            this.cmbFromY = new Common.UI.ComboBox({
+                el: $('#image-advanced-combo-from-y'),
+                cls: 'input-group-nr',
+                style: "width: 100px;",
+                menuStyle: 'min-width: 100px;',
+                data: [
+                    { value: 'left', displayValue: this.textTopLeftCorner },
+                    { value: 'center', displayValue: this.textCenter }
+                ]
+            });
+
             // Rotation
             this.spnAngle = new Common.UI.MetricSpinner({
                 el: $('#image-advanced-spin-angle'),
@@ -223,7 +246,7 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
 
         getFocusedComponents: function() {
             return [
-                this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.spnY,// 0 tab
+                this.spnWidth, this.spnHeight, this.btnOriginalSize, this.spnX, this.cmbFromX, this.spnY, this.cmbFromY,// 0 tab
                 this.spnAngle, this.chFlipHor, this.chFlipVert, // 1 tab
                 this.inputAltTitle, this.textareaAltDescription  // 2 tab
             ];
@@ -271,6 +294,9 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
                 if (props.get_Height()>0)
                     this._nRatio = props.get_Width()/props.get_Height();
 
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
                 if (props.get_Position()) {
                     var Position = {X: props.get_Position().get_X(), Y: props.get_Position().get_Y()};
                     this.spnX.setValue((Position.X !== null && Position.X !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(Position.X) : '', true);
@@ -306,10 +332,20 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
             properties.put_ResetCrop(this._isDefaultSize);
 
             var Position = new Asc.CPosition();
-            if (this.spnX.getValue() !== '')
+            if (this.spnX.getValue() !== '') {
-                Position.put_X(Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue()));
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
-            if (this.spnY.getValue() !== '')
+                if (this.cmbFromX.getValue() === 'center') {
-                Position.put_Y(Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue()));
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                Position.put_X(x);
+            }
+            if (this.spnY.getValue() !== '') {
+                var y = Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue());
+                if (this.cmbFromY.getValue() === 'center') {
+                    y = (this.slideSize.height/36000)/2 + y;
+                }
+                Position.put_Y(y);
+            }
             properties.put_Position(Position);
 
             if (this.isAltTitleChanged)
@@ -360,7 +396,12 @@ define([    'text!presentationeditor/main/app/template/ImageSettingsAdvanced.tem
         textAngle: 'Angle',
         textFlipped: 'Flipped',
         textHorizontally: 'Horizontally',
-        textVertically: 'Vertically'
+        textVertically: 'Vertically',
+        textHorizontal: 'Horizontal',
+        textVertical: 'Vertical',
+        textFrom: 'From',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center'
 
     }, PE.Views.ImageSettingsAdvanced || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1696,6 +1696,11 @@
   "PE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
   "PE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
   "PE.Views.ImageSettingsAdvanced.textWidth": "Width",
+  "PE.Views.ImageSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.ImageSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.ImageSettingsAdvanced.textFrom": "From",
+  "PE.Views.ImageSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.ImageSettingsAdvanced.textCenter": "Center",
   "PE.Views.LeftMenu.tipAbout": "About",
   "PE.Views.LeftMenu.tipChat": "Chat",
   "PE.Views.LeftMenu.tipComments": "Comments",