[PE] Add placement tab in table advanced settings

apps/presentationeditor/main/app/template/TableSettingsAdvanced.template

@@ -1,4 +1,58 @@
-<div id="id-adv-table-cell-props" class="settings-panel active">
+<div  id="id-adv-table-placement" class="settings-panel active">
+    <div class="inner-content">
+        <table cols="3">
+            <tr>
+                <td colspan="3" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textSize %></label>
+                </td>
+            </tr>
+            <tr>
+                <td width="108px">
+                    <label class="input-label"><%= scope.textWidth %></label>
+                    <div id="tableadv-spin-width"></div>
+                </td>
+                <td width="28px" style="vertical-align: bottom;">
+                    <div id="tableadv-button-ratio"></div>
+                </td>
+                <td width="108px">
+                    <label class="input-label"><%= scope.textHeight %></label>
+                    <div id="tableadv-spin-height"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+    <div class="padding-large"></div>
+    <div class="inner-content">
+        <table cols="2" style="width: 100%;">
+            <tr>
+                <td colspan="4" width="88px" class="padding-small">
+                    <label class="header"><%= scope.textPosition %></label>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small" width="115px">
+                    <label class="input-label"><%= scope.textHorizontal %></label>
+                    <div id="tableadv-spin-x"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="tableadv-combo-from-x"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textVertical %></label>
+                    <div id="tableadv-spin-y"></div>
+                </td>
+                <td class="padding-small">
+                    <label class="input-label"><%= scope.textFrom %></label>
+                    <div id="tableadv-combo-from-y"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+<div id="id-adv-table-cell-props" class="settings-panel">
     <div class="inner-content">
         <table cols="2" style="width: 100%;">
             <tr>

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

@@ -2484,6 +2484,7 @@ define([
                                 (new PE.Views.TableSettingsAdvanced(
                                     {
                                         tableProps: elValue,
+                                        slideSize: PE.getController('Toolbar').currentPageSize,
                                         handler: function(result, value) {
                                             if (result == 'ok') {
                                                 if (me.api) {

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

@@ -763,6 +763,7 @@ define([
                             (new PE.Views.TableSettingsAdvanced(
                             {
                                 tableProps: elValue,
+                                slideSize: PE.getController('Toolbar').currentPageSize,
                                 handler: function(result, value) {
                                     if (result == 'ok') {
                                         if (me.api) {

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

@@ -49,13 +49,15 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
             alias: 'TableSettingsAdvanced',
             contentWidth: 280,
             height: 385,
-            storageName: 'pe-table-settings-adv-category'
+            storageName: 'pe-table-settings-adv-category',
+            sizeMax: {width: 142.24, height: 142.24},
         },
 
         initialize : function(options) {
             _.extend(this.options, {
                 title: this.textTitle,
                 items: [
+                    {panelId: 'id-adv-table-placement',  panelCaption: this.textPlacement},
                     {panelId: 'id-adv-table-cell-props', panelCaption: this.textWidthSpaces},
                     {panelId: 'id-adv-table-alttext',    panelCaption: this.textAlt}
                 ],
@@ -86,6 +88,7 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
             this._initialMarginsDefault = false;  // если для всех выделенных ячеек пришло одинаковое значение Flag=0 (Use Default Margins)
             this._originalProps = new Asc.CTableProp(this.options.tableProps);
+            this.slideSize = this.options.slideSize;
         },
 
         render: function() {
@@ -93,6 +96,113 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
 
             var me = this;
 
+            // Placement
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-width'),
+                step: .1,
+                width: 100,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 142.24,
+                minValue: 0
+            });
+            this.spnWidth.on('change', _.bind(function(field){
+                if (this.btnRatio.pressed) {
+                    var w = field.getNumberValue();
+                    var h = w/this._nRatio;
+                    if (h>this.sizeMax.height) {
+                        h = this.sizeMax.height;
+                        w = h * this._nRatio;
+                        this.spnWidth.setValue(w, true);
+                    }
+                    this.spnHeight.setValue(h, true);
+                }
+            }, this));
+            this.spinners.push(this.spnWidth);
+
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-height'),
+                step: .1,
+                width: 100,
+                defaultUnit : "cm",
+                value: '3 cm',
+                maxValue: 142.24,
+                minValue: 0
+            });
+            this.spnHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
+                var h = field.getNumberValue(), w = null;
+                if (this.btnRatio.pressed) {
+                    w = h * this._nRatio;
+                    if (w>this.sizeMax.width) {
+                        w = this.sizeMax.width;
+                        h = w/this._nRatio;
+                        this.spnHeight.setValue(h, true);
+                    }
+                    this.spnWidth.setValue(w, true);
+                }
+            }, this));
+            this.spinners.push(this.spnHeight);
+
+            this.btnRatio = new Common.UI.Button({
+                parentEl: $('#tableadv-button-ratio'),
+                cls: 'btn-toolbar',
+                iconCls: 'toolbar__icon advanced-btn-ratio',
+                style: 'margin-bottom: 1px;',
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.on('click', _.bind(function(btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue()>0) {
+                    this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
+                }
+            }, this));
+
+            this.spnX = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-x'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnX);
+
+            this.spnY = new Common.UI.MetricSpinner({
+                el: $('#tableadv-spin-y'),
+                step: .1,
+                width: 85,
+                defaultUnit : "cm",
+                defaultValue : 0,
+                value: '0 cm',
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnY);
+
+            this.cmbFromX = new Common.UI.ComboBox({
+                el: $('#tableadv-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: $('#tableadv-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 }
+                ]
+            });
+
             this._marginsChange = function(field, newValue, oldValue, eOpts, source, property){
                 if (source=='table')
                     this.TableMargins[property] = field.getNumberValue();
@@ -352,6 +462,27 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
         },
 
         getSettings: function() {
+            if (this.spnHeight.getValue()!=='')
+                this._changedProps.put_FrameHeight(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
+            if (this.spnWidth.getValue()!=='')
+                this._changedProps.put_FrameWidth(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
+            //properties.asc_putLockAspect(this.btnRatio.pressed);
+
+            if (this.spnX.getValue() !== '') {
+                var x = Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue());
+                if (this.cmbFromX.getValue() === 'center') {
+                    x = (this.slideSize.width/36000)/2 + x;
+                }
+                this._changedProps.put_FrameX(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;
+                }
+                this._changedProps.put_FrameY(y);
+            }
+
             if (this.isAltTitleChanged)
                 this._changedProps.put_TableCaption(this.inputAltTitle.getValue());
 
@@ -365,6 +496,23 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
             if (props ){
                 this._allTable = !props.get_CellSelect();
 
+                // placement
+                this.spnWidth.setMaxValue(this.sizeMax.width);
+                this.spnHeight.setMaxValue(this.sizeMax.height);
+                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameWidth()).toFixed(2), true);
+                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_FrameHeight()).toFixed(2), true);
+
+                this.btnRatio.toggle(false); // to do
+                if (props.get_FrameHeight()>0)
+                    this._nRatio = props.get_FrameWidth()/props.get_FrameHeight();
+
+                this.cmbFromX.setValue('left');
+                this.cmbFromY.setValue('left');
+
+                var position = {x: props.get_FrameX(), y: props.get_FrameY()};
+                this.spnX.setValue((position.x !== null && position.x !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.x) : '', true);
+                this.spnY.setValue((position.y !== null && position.y !== undefined) ? Common.Utils.Metric.fnRecalcFromMM(position.y) : '', true);
+
                 // margins
                 var margins = props.get_DefaultMargins();
                 if (margins) {
@@ -442,6 +590,10 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.tem
                     spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
                 }
             }
+            this.sizeMax = {
+                width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width*10),
+                height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height*10)
+            };
         },
 
         textWidthSpaces:    'Margins',
@@ -456,7 +608,17 @@ define([    'text!presentationeditor/main/app/template/TableSettingsAdvanced.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.',
+        textPlacement: 'Placement',
+        textSize: 'Size',
+        textPosition: 'Position',
+        textHorizontal: 'Horizontal',
+        textVertical: 'Vertical',
+        textFrom: 'From',
+        textTopLeftCorner: 'Top Left Corner',
+        textCenter: 'Center',
+        textWidth: 'Width',
+        textHeight: 'Height'
 
     }, PE.Views.TableSettingsAdvanced || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -2023,6 +2023,16 @@
   "PE.Views.TableSettingsAdvanced.textTitle": "Table - Advanced Settings",
   "PE.Views.TableSettingsAdvanced.textTop": "Top",
   "PE.Views.TableSettingsAdvanced.textWidthSpaces": "Margins",
+  "PE.Views.TableSettingsAdvanced.textPlacement": "Placement",
+  "PE.Views.TableSettingsAdvanced.textSize": "Size",
+  "PE.Views.TableSettingsAdvanced.textWidth": "Width",
+  "PE.Views.TableSettingsAdvanced.textHeight": "Height",
+  "PE.Views.TableSettingsAdvanced.textPosition": "Position",
+  "PE.Views.TableSettingsAdvanced.textHorizontal": "Horizontal",
+  "PE.Views.TableSettingsAdvanced.textVertical": "Vertical",
+  "PE.Views.TableSettingsAdvanced.textFrom": "From",
+  "PE.Views.TableSettingsAdvanced.textTopLeftCorner": "Top Left Corner",
+  "PE.Views.TableSettingsAdvanced.textCenter": "Center",
   "PE.Views.TextArtSettings.strBackground": "Background color",
   "PE.Views.TextArtSettings.strColor": "Color",
   "PE.Views.TextArtSettings.strFill": "Fill",