[DE] Для автофигур добавлена возможность выставления относительных размеров.

apps/documenteditor/main/app/template/ImageSettingsAdvanced.template

@@ -20,6 +20,76 @@
     </table>
     </div>
 </div>
+<div id="id-adv-shape-size" class="settings-panel active">
+    <div class="inner-content">
+    <table cols="3">
+        <tr>
+            <td colspan="3">
+                <label class="header"><%= scope.textWidth %></label>
+            </td>
+        </tr>
+        <tr>
+            <td style="vertical-align: bottom; padding-bottom: 12px;">
+                <div id="shape-radio-hsize"></div>
+            </td>
+            <td class="padding-small">
+                <label class="input-label"><%= scope.textAbsoluteWH %></label>
+                <div id="shape-advanced-spin-width"></div>
+            </td>
+        </tr>
+        <tr>
+            <td style="vertical-align: bottom; padding-bottom: 19px;">
+                <div id="shape-radio-hsizepc"></div>
+            </td>
+            <td class="padding-large" style="padding-right: 15px;">
+                <label class="input-label"><%= scope.textRelativeWH %></label>
+                <div id="shape-advanced-spin-width-rel"></div>
+            </td>
+            <td class="padding-large">
+                <label class="input-label"><%= scope.textRelative %></label>
+                <div id="shape-combo-width-rel" style="width: 115px;"></div>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="3">
+                <label class="header"><%= scope.textHeight %></label>
+            </td>
+        </tr>
+        <tr>
+            <td style="vertical-align: bottom; padding-bottom: 12px;">
+                <div id="shape-radio-vsize"></div>
+            </td>
+            <td class="padding-small">
+                <label class="input-label"><%= scope.textAbsoluteWH %></label>
+                <div id="shape-advanced-spin-height"></div>
+            </td>
+        </tr>
+        <tr>
+            <td style="vertical-align: bottom; padding-bottom: 19px;">
+                <div id="shape-radio-vsizepc"></div>
+            </td>
+            <td class="padding-large" style="padding-right: 15px;">
+                <label class="input-label"><%= scope.textRelativeWH %></label>
+                <div id="shape-advanced-spin-height-rel"></div>
+            </td>
+            <td class="padding-large">
+                <label class="input-label"><%= scope.textRelative %></label>
+                <div id="shape-combo-height-rel" style="width: 115px;"></div>
+            </td>
+        </tr>
+    </table>
+    </div>
+    <div class="separator horizontal padding-large"></div>
+    <div class="inner-content">
+        <table cols="1" style="width: 100%;">
+            <tr>
+                <td>
+                    <div id="shape-checkbox-ratio"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-image-wrap" class="settings-panel">
     <div class="inner-content padding-large">
         <label class="header padding-small"><%= scope.textWrap %></label>

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

@@ -62,6 +62,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 title: this.textTitle,
                 items: [
                     {panelId: 'id-adv-image-width',      panelCaption: this.textSize},
+                    {panelId: 'id-adv-shape-size',      panelCaption: this.textSize},
                     {panelId: 'id-adv-image-wrap',       panelCaption: this.textBtnWrap},
                     {panelId: 'id-adv-image-position',   panelCaption: this.textPosition},
                     {panelId: 'id-adv-image-shape',      panelCaption: this.textShape},
@@ -80,10 +81,12 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 HAlignFrom: Asc.c_oAscRelativeFromH.Character,
                 HPositionFrom: Asc.c_oAscRelativeFromH.Character,
                 HPositionPcFrom: Asc.c_oAscRelativeFromH.Page,
+                ShapeWidthPcFrom: Asc.c_oAscRelativeFromH.Margin,
                 VAlignType: Asc.c_oAscAlignV.Top,
                 VAlignFrom: Asc.c_oAscRelativeFromV.Line,
                 VPositionFrom: Asc.c_oAscRelativeFromV.Line,
                 VPositionPcFrom: Asc.c_oAscRelativeFromV.Page,
+                ShapeHeightPcFrom: Asc.c_oAscRelativeFromV.Margin,
                 spnXChanged: false,
                 spnYChanged: false,
                 spnXPcChanged: false,
@@ -105,6 +108,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
 
             var me = this;
 
+            // Image & Chart Size
             this.spnWidth = new Common.UI.MetricSpinner({
                 el: $('#image-advanced-spin-width'),
                 step: .1,
@@ -186,6 +190,173 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 }
             }, this));
 
+            // Shape Size
+            this.radioHSize = new Common.UI.RadioBox({
+                el: $('#shape-radio-hsize'),
+                name: 'asc-radio-width',
+                checked: true
+            });
+            this.radioHSize.on('change', _.bind(this.onRadioHSizeChange, this));
+
+            this.radioHSizePc = new Common.UI.RadioBox({
+                el: $('#shape-radio-hsizepc'),
+                name: 'asc-radio-width'
+            });
+            this.radioHSizePc.on('change', _.bind(this.onRadioHSizePcChange, this));
+
+            this.radioVSize = new Common.UI.RadioBox({
+                el: $('#shape-radio-vsize'),
+                name: 'asc-radio-height',
+                checked: true
+            });
+            this.radioVSize.on('change', _.bind(this.onRadioVSizeChange, this));
+
+            this.radioVSizePc = new Common.UI.RadioBox({
+                el: $('#shape-radio-vsizepc'),
+                name: 'asc-radio-height'
+            });
+            this.radioVSizePc.on('change', _.bind(this.onRadioVSizePcChange, this));
+
+            this.chRatio = new Common.UI.CheckBox({
+                el: $('#shape-checkbox-ratio'),
+                labelText: this.textAspectRatio
+            });
+            this.chRatio.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if ((field.getValue()=='checked') && this.spnShapeHeight.getNumberValue()>0) {
+                    this._nRatio = this.spnShapeWidth.getNumberValue()/this.spnShapeHeight.getNumberValue();
+                }
+            }, this));
+
+            this.spnShapeWidth = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-width'),
+                step: .1,
+                width: 80,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnShapeWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this.chRatio.getValue()=='checked' && !this.chRatio.isDisabled()) {
+                    var w = field.getNumberValue();
+                    var h = w/this._nRatio;
+                    if (h>this.sizeMax.height) {
+                        h = this.sizeMax.height;
+                        w = h * this._nRatio;
+                        this.spnShapeWidth.setValue(w, true);
+                    }
+                    this.spnShapeHeight.setValue(h, true);
+                }
+                if (this._changedProps) {
+                    this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                    this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnShapeHeight.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.spnShapeWidth);
+
+            this.spnShapeHeight = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-height'),
+                step: .1,
+                width: 80,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnShapeHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var h = field.getNumberValue(), w = null;
+                if (this.chRatio.getValue()=='checked' && !this.chRatio.isDisabled()) {
+                    w = h * this._nRatio;
+                    if (w>this.sizeMax.width) {
+                        w = this.sizeMax.width;
+                        h = w/this._nRatio;
+                        this.spnShapeHeight.setValue(h, true);
+                    }
+                    this.spnShapeWidth.setValue(w, true);
+                }
+                if (this._changedProps) {
+                    this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                    this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnShapeWidth.getNumberValue()));
+                }
+            }, this));
+            this.spinners.push(this.spnShapeHeight);
+
+            this.spnShapeWidthPc = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-width-rel'),
+                disabled: true,
+                step: 1,
+                width: 80,
+                defaultUnit : "%",
+                value: '1 %',
+                maxValue: 1000,
+                minValue: 1
+            });
+            this.spnShapeWidthPc.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._changedProps) {
+                    if (this._changedProps.get_SizeRelH()===null || this._changedProps.get_SizeRelH()===undefined)
+                        this._changedProps.put_SizeRelH(new Asc.CImagePositionH());
+
+                    this._changedProps.get_SizeRelH().put_Value(field.getNumberValue());
+                    this._changedProps.get_SizeRelH().put_RelativeFrom(this._state.ShapeWidthPcFrom);
+                }
+            }, this));
+
+            this.spnShapeHeightPc = new Common.UI.MetricSpinner({
+                el: $('#shape-advanced-spin-height-rel'),
+                disabled: true,
+                step: 1,
+                width: 80,
+                defaultUnit : "%",
+                value: '1 %',
+                maxValue: 1000,
+                minValue: 1
+            });
+            this.spnShapeHeightPc.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                if (this._changedProps) {
+                    if (this._changedProps.get_SizeRelV()===null || this._changedProps.get_SizeRelV()===undefined)
+                        this._changedProps.put_SizeRelV(new Asc.CImagePositionV());
+
+                    this._changedProps.get_SizeRelV().put_Value(field.getNumberValue());
+                    this._changedProps.get_SizeRelV().put_RelativeFrom(this._state.ShapeHeightPcFrom);
+                }
+            }, this));
+
+            this._arrHRelativePc = [
+                {displayValue: this.textLeftMargin,   value: Asc.c_oAscRelativeFromH.LeftMargin},
+                {displayValue: this.textMargin,       value: Asc.c_oAscRelativeFromH.Margin},
+                {displayValue: this.textPage,         value: Asc.c_oAscRelativeFromH.Page},
+                {displayValue: this.textRightMargin,  value: Asc.c_oAscRelativeFromH.RightMargin}
+            ];
+
+            this.cmbWidthPc = new Common.UI.ComboBox({
+                el: $('#shape-combo-width-rel'),
+                cls: 'input-group-nr',
+                menuStyle: 'min-width: 115px;',
+                editable: false,
+                data: this._arrHRelativePc
+            });
+            this.cmbWidthPc.setDisabled(true);
+            this.cmbWidthPc.setValue(this._state.ShapeWidthPcFrom);
+            this.cmbWidthPc.on('selected', _.bind(this.onCmbWidthPcSelect, this));
+
+            this._arrVRelativePc = [
+                {displayValue: this.textMargin,       value: Asc.c_oAscRelativeFromV.Margin},
+                {displayValue: this.textBottomMargin,       value: Asc.c_oAscRelativeFromV.BottomMargin},
+                {displayValue: this.textPage,       value: Asc.c_oAscRelativeFromV.Page},
+                {displayValue: this.textTopMargin, value: Asc.c_oAscRelativeFromV.TopMargin}
+            ];
+
+            this.cmbHeightPc = new Common.UI.ComboBox({
+                el: $('#shape-combo-height-rel'),
+                cls: 'input-group-nr',
+                menuStyle: 'min-width: 115px;',
+                editable: false,
+                data: this._arrVRelativePc
+            });
+            this.cmbHeightPc.setDisabled(true);
+            this.cmbHeightPc.setValue(this._state.ShapeHeightPcFrom);
+            this.cmbHeightPc.on('selected', _.bind(this.onCmbHeightPcSelect, this));
+
             // Wrapping
 
             this.btnWrapInline = new Common.UI.Button({
@@ -471,13 +642,6 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 }
             }, this));
 
-            this._arrHRelativePc = [
-                {displayValue: this.textLeftMargin,   value: Asc.c_oAscRelativeFromH.LeftMargin},
-                {displayValue: this.textMargin,       value: Asc.c_oAscRelativeFromH.Margin},
-                {displayValue: this.textPage,         value: Asc.c_oAscRelativeFromH.Page},
-                {displayValue: this.textRightMargin,  value: Asc.c_oAscRelativeFromH.RightMargin}
-            ];
-
             this.cmbHPositionPc = new Common.UI.ComboBox({
                 el: $('#image-combo-hpositionpc'),
                 cls: 'input-group-nr',
@@ -560,13 +724,6 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                 }
             }, this));
 
-            this._arrVRelativePc = [
-                {displayValue: this.textMargin,       value: Asc.c_oAscRelativeFromV.Margin},
-                {displayValue: this.textBottomMargin,       value: Asc.c_oAscRelativeFromV.BottomMargin},
-                {displayValue: this.textPage,       value: Asc.c_oAscRelativeFromV.Page},
-                {displayValue: this.textTopMargin, value: Asc.c_oAscRelativeFromV.TopMargin}
-            ];
-
             this.cmbVPositionPc = new Common.UI.ComboBox({
                 el: $('#image-combo-vpositionpc'),
                 cls: 'input-group-nr',
@@ -906,6 +1063,26 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
         afterRender: function() {
             this.updateMetricUnit();
             this._setDefaults(this._originalProps);
+
+            var btnCategoryShapeSize, btnCategoryImageSize;
+            _.each(this.btnsCategory, function(btn) {
+                if (btn.options.contentTarget == 'id-adv-image-width')
+                    btnCategoryImageSize = btn;
+                else if(btn.options.contentTarget == 'id-adv-shape-size')
+                    btnCategoryShapeSize = btn;
+            });
+
+            this.content_panels.filter('.active').removeClass('active');
+
+            if (this._objectType == Asc.c_oAscTypeSelectElement.Shape) {
+                btnCategoryImageSize.hide();
+                btnCategoryShapeSize.toggle(true, true);
+                $("#" + btnCategoryShapeSize.options.contentTarget).addClass('active');
+            } else {
+                btnCategoryShapeSize.hide();
+                btnCategoryImageSize.toggle(true, true);
+                $("#" + btnCategoryImageSize.options.contentTarget).addClass('active');
+            }
         },
 
         _setDefaults: function(props) {
@@ -958,13 +1135,6 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                     this._DisableElem(Asc.c_oAscWrapStyle2.Inline);
                 }
 
-                this.spnWidth.setMaxValue(this.sizeMax.width);
-                this.spnHeight.setMaxValue(this.sizeMax.height);
-                value = props.get_Width();
-                this.spnWidth.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
-                value = props.get_Height();
-                this.spnHeight.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
-
                 if (props.get_Paddings()) {
                     var Paddings = {
                         Top: props.get_Paddings().get_Top(),
@@ -1081,15 +1251,58 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
 
                 this.btnOriginalSize.setVisible(!(shapeprops || chartprops));
                 this.btnOriginalSize.setDisabled(props.get_ImageUrl()===null || props.get_ImageUrl()===undefined);
-                this.btnsCategory[3].setVisible(shapeprops!==null && !shapeprops.get_FromChart());   // Shapes
+                this.btnsCategory[4].setVisible(shapeprops!==null && !shapeprops.get_FromChart());   // Shapes
-                this.btnsCategory[4].setVisible(shapeprops!==null && !shapeprops.get_FromChart());   // Margins
+                this.btnsCategory[5].setVisible(shapeprops!==null && !shapeprops.get_FromChart());   // Margins
-                this.btnsCategory[1].setDisabled(props.get_FromGroup()); // Wrapping
+                this.btnsCategory[2].setDisabled(props.get_FromGroup()); // Wrapping
 
                 if (shapeprops) {
                     this._objectType = Asc.c_oAscTypeSelectElement.Shape;
                     this._setShapeDefaults(shapeprops);
                     this.setTitle(this.textTitleShape);
                     value = Common.localStorage.getItem("de-settings-shaperatio");
+                    if (value!==null && parseInt(value) == 1) {
+                        this.chRatio.setValue(true);
+                    }
+
+                    this.spnShapeWidth.setMaxValue(this.sizeMax.width);
+                    this.spnShapeHeight.setMaxValue(this.sizeMax.height);
+
+                    var sizeRelH = props.get_SizeRelH();
+                    if (sizeRelH) {
+                        this.radioHSizePc.setValue(true);
+                        this.spnShapeWidthPc.setValue(sizeRelH.get_Value());
+                        value = sizeRelH.get_RelativeFrom();
+                        for (i=0; i<this._arrHRelativePc.length; i++) {
+                            if (value == this._arrHRelativePc[i].value) {
+                                this.cmbWidthPc.setValue(value);
+                                this._state.ShapeWidthPcFrom = value;
+                                break;
+                            }
+                        }
+                    } else {
+                        this.radioHSize.setValue(true);
+                        value = props.get_Width();
+                        this.spnShapeWidth.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+                    }
+
+                    var sizeRelV = props.get_SizeRelV();
+                    if (sizeRelV) {
+                        this.radioVSizePc.setValue(true);
+                        this.spnShapeHeightPc.setValue(sizeRelV.get_Value());
+                        value = sizeRelV.get_RelativeFrom();
+                        for (i=0; i<this._arrVRelativePc.length; i++) {
+                            if (value == this._arrVRelativePc[i].value) {
+                                this.cmbHeightPc.setValue(value);
+                                this._state.ShapeHeightPcFrom = value;
+                                break;
+                            }
+                        }
+                    } else {
+                        this.radioVSize.setValue(true);
+                        value = props.get_Height();
+                        this.spnShapeHeight.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+                    }
+                    this.chRatio.setDisabled(this.radioVSizePc.getValue() || this.radioHSizePc.getValue());
 
                     var margins = shapeprops.get_paddings();
                     if (margins) {
@@ -1103,9 +1316,10 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                         this.spnMarginBottom.setValue((null !== val && undefined !== val) ? Common.Utils.Metric.fnRecalcFromMM(val) : '', true);
                     }
 
-                    this.btnsCategory[4].setDisabled(null === margins);   // Margins
+                    this.btnsCategory[5].setDisabled(null === margins);   // Margins
-                }
+
-                else if (chartprops) {
+                } else {
+                    if (chartprops) {
                         this._objectType = Asc.c_oAscTypeSelectElement.Chart;
                         this.setTitle(this.textTitleChart);
                         value = Common.localStorage.getItem("de-settings-chartratio");
@@ -1120,21 +1334,31 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
                         this.btnRatio.toggle(true);
                     }
 
+                    this.spnWidth.setMaxValue(this.sizeMax.width);
+                    this.spnHeight.setMaxValue(this.sizeMax.height);
+                    value = props.get_Width();
+                    this.spnWidth.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+                    value = props.get_Height();
+                    this.spnHeight.setValue((value!==undefined) ? Common.Utils.Metric.fnRecalcFromMM(value).toFixed(2) : '', true);
+                }
+
                 this._changedProps = new CImgProperty();
             }
         },
 
         getSettings: function() {
-            var value = (this.btnRatio.pressed) ? 1 : 0;
             if (this._objectType==Asc.c_oAscTypeSelectElement.Shape) {
-                Common.localStorage.setItem("de-settings-shaperatio", value);
+                if (!this.chRatio.isDisabled())
-            }
+                    Common.localStorage.setItem("de-settings-shaperatio", (this.chRatio.getValue()=='checked') ? 1 : 0);
-            else if (this._objectType==Asc.c_oAscTypeSelectElement.Chart) {
+            } else {
+                var value = (this.btnRatio.pressed) ? 1 : 0;
+                if (this._objectType==Asc.c_oAscTypeSelectElement.Chart) {
                     Common.localStorage.setItem("de-settings-chartratio", value);
                 }
                 else {
                     Common.localStorage.setItem("de-settings-imageratio", value);
                 }
+            }
 
             var properties = this._changedProps;
 
@@ -1279,7 +1503,7 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             this.spnTop.setDisabled(disabledTB);
             this.spnBottom.setDisabled(disabledTB);
 
-            this.btnsCategory[2].setDisabled(btnId == Asc.c_oAscWrapStyle2.Inline);
+            this.btnsCategory[3].setDisabled(btnId == Asc.c_oAscWrapStyle2.Inline);
         },
 
         onHAlignSelect: function(combo, record){
@@ -1388,7 +1612,6 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             }
         },
 
-
         onVPositionPcSelect: function(combo, record){
             if (this._changedProps) {
                 if (this._changedProps.get_PositionV()===null || this._changedProps.get_PositionV()===undefined)
@@ -1544,6 +1767,86 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
             }
         },
 
+        onRadioHSizeChange: function(field, newValue, eOpts) {
+            if (newValue) {
+                if (this._changedProps) {
+                    this._changedProps.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnShapeWidth.getNumberValue()));
+                    this._changedProps.put_SizeRelH(undefined);
+                }
+                this.chRatio.setDisabled(this.radioVSizePc.getValue());
+                this.cmbWidthPc.setDisabled(true);
+                this.spnShapeWidthPc.setDisabled(true);
+                this.spnShapeWidth.setDisabled(false);
+            }
+        },
+
+        onRadioHSizePcChange: function(field, newValue, eOpts) {
+            if (newValue) {
+                if (this._changedProps) {
+                    if (this._changedProps.get_SizeRelH()===null || this._changedProps.get_SizeRelH()===undefined)
+                        this._changedProps.put_SizeRelH(new Asc.CImagePositionH());
+
+                    this._changedProps.get_SizeRelH().put_Value(this.spnShapeWidthPc.getNumberValue());
+                    this._changedProps.get_SizeRelH().put_RelativeFrom(this._state.ShapeWidthPcFrom);
+                }
+                this.chRatio.setDisabled(true);
+                this.cmbWidthPc.setDisabled(false);
+                this.spnShapeWidthPc.setDisabled(false);
+                this.spnShapeWidth.setDisabled(true);
+            }
+        },
+
+        onRadioVSizeChange: function(field, newValue, eOpts) {
+            if (newValue) {
+                if (this._changedProps) {
+                    this._changedProps.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnShapeHeight.getNumberValue()));
+                    this._changedProps.put_SizeRelV(undefined);
+                }
+                this.chRatio.setDisabled(this.radioHSizePc.getValue());
+                this.cmbHeightPc.setDisabled(true);
+                this.spnShapeHeightPc.setDisabled(true);
+                this.spnShapeHeight.setDisabled(false);
+            }
+        },
+
+        onRadioVSizePcChange: function(field, newValue, eOpts) {
+            if (newValue) {
+                if (this._changedProps) {
+                    if (this._changedProps.get_SizeRelV()===null || this._changedProps.get_SizeRelV()===undefined)
+                        this._changedProps.put_SizeRelV(new Asc.CImagePositionV());
+
+                    this._changedProps.get_SizeRelV().put_Value(this.spnShapeHeightPc.getNumberValue());
+                    this._changedProps.get_SizeRelV().put_RelativeFrom(this._state.ShapeHeightPcFrom);
+                }
+                this.chRatio.setDisabled(true);
+                this.cmbHeightPc.setDisabled(false);
+                this.spnShapeHeightPc.setDisabled(false);
+                this.spnShapeHeight.setDisabled(true);
+            }
+        },
+
+        onCmbWidthPcSelect: function(combo, record){
+            if (this._changedProps) {
+                if (this._changedProps.get_SizeRelH()===null || this._changedProps.get_SizeRelH()===undefined)
+                    this._changedProps.put_SizeRelH(new Asc.CImagePositionH());
+
+                this._state.ShapeWidthPcFrom = record.value;
+                this._changedProps.get_SizeRelH().put_Value(this.spnShapeWidthPc.getNumberValue());
+                this._changedProps.get_SizeRelH().put_RelativeFrom(this._state.ShapeWidthPcFrom);
+            }
+        },
+
+        onCmbHeightPcSelect: function(combo, record){
+            if (this._changedProps) {
+                if (this._changedProps.get_SizeRelV()===null || this._changedProps.get_SizeRelV()===undefined)
+                    this._changedProps.put_SizeRelV(new Asc.CImagePositionV());
+
+                this._state.ShapeHeightPcFrom = record.value;
+                this._changedProps.get_SizeRelV().put_Value(this.spnShapeHeightPc.getNumberValue());
+                this._changedProps.get_SizeRelV().put_RelativeFrom(this._state.ShapeHeightPcFrom);
+            }
+        },
+
         _updateSizeArr: function(combo, picker, record, sizeidx) {
             if (record.get('value')>0) {
                 picker.store.each( function(rec){
@@ -1674,7 +1977,10 @@ define([    'text!documenteditor/main/app/template/ImageSettingsAdvanced.templat
         textBeginSize:  'Begin Size',
         textEndStyle:   'End Style',
         textEndSize:    'End Size',
-        textPositionPc: 'Relative position'
+        textPositionPc: 'Relative position',
+        textAspectRatio: 'Lock aspect ratio',
+        textAbsoluteWH: 'Absolute',
+        textRelativeWH: 'Relative'
 
     }, DE.Views.ImageSettingsAdvanced || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1016,6 +1016,9 @@
   "DE.Views.ImageSettingsAdvanced.textWrapThroughTooltip": "Through",
   "DE.Views.ImageSettingsAdvanced.textWrapTightTooltip": "Tight",
   "DE.Views.ImageSettingsAdvanced.textWrapTopbottomTooltip": "Top and Bottom",
+  "DE.Views.ImageSettingsAdvanced.textAspectRatio": "Lock aspect ratio",
+  "DE.Views.ImageSettingsAdvanced.textAbsoluteWH": "Absolute",
+  "DE.Views.ImageSettingsAdvanced.textRelativeWH": "Relative",
   "DE.Views.LeftMenu.tipAbout": "About",
   "DE.Views.LeftMenu.tipChat": "Chat",
   "DE.Views.LeftMenu.tipComments": "Comments",