[DE] Matrix Spacing

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

@@ -39,6 +39,15 @@
  *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
  *
  */
+var c_matrixRowSpacing = {
+    MULTIPLE: 0,
+    EXACT: 1
+};
+
+var c_matrixColumnSpacing = {
+    MULTIPLE: 0,
+    EXACT: 1
+};
 
 var c_paragraphLinerule = {
     LINERULE_LEAST: 0,

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

@@ -40,6 +40,8 @@
 
 define([
     'common/main/lib/component/Window',
+    'common/main/lib/component/ComboBox',
+    'common/main/lib/component/MetricSpinner'
 ], function () { 'use strict';
 
     DE.Views.MatrixSpacingDialog = Common.UI.Window.extend(_.extend({
@@ -96,6 +98,22 @@ define([
 
             this.options.tpl = _.template(this.template)(this.options);
 
+            //this._originalProps = new Asc.asc_CMatrixProperty(this.options.matrixProps);
+            this.spinners = [];
+
+            this.CurRowSpacing = 0; //this.options.getRowSpacing();
+            this.CurColumnSpacing = 0; //this.options.getColumnSpacing();
+
+            this._arrRowSpacing = [
+                {displayValue: this.textMultiple,  defaultValue: 1, value: c_matrixRowSpacing.MULTIPLE, minValue: 0.5, step: 0.1, defaultUnit: ''},
+                {displayValue: this.textExact,  defaultValue: 5, value: c_matrixRowSpacing.EXACT, minValue: 0.3, step: 0.1, defaultUnit: 'cm'}
+            ];
+
+            this._arrColumnSpacing = [
+                {displayValue: this.textMultiple,  defaultValue: 1, value: c_matrixColumnSpacing.MULTIPLE, minValue: 0.5, step: 0.1, defaultUnit: ''},
+                {displayValue: this.textExact,  defaultValue: 5, value: c_matrixColumnSpacing.EXACT, minValue: 0.3, step: 0.1, defaultUnit: 'cm'}
+            ];
+
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
 
@@ -106,7 +124,7 @@ define([
                 el: $('#matrix-row-spacing-cmb'),
                 cls: 'input-group-nr',
                 editable: false,
-                data: [],
+                data: this._arrRowSpacing,
                 style: 'width: 130px;',
                 menuStyle   : 'min-width: 130px;'
             });
@@ -115,20 +133,16 @@ define([
 
             this.numRowSpacing = new Common.UI.MetricSpinner({
                 el: $('#matrix-row-spacing-spn'),
-                step: .01,
+                width: 70
-                width: 70,
-                value: '',
-                defaultUnit : "",
-                maxValue: 132,
-                minValue: 0.5
             });
             this.numRowSpacing.on('change', _.bind(this.onNumRowSpacingChange, this));
+            this.spinners.push(this.numRowSpacing);
 
             this.cmbColumnSpacing = new Common.UI.ComboBox({
                 el: $('#matrix-column-spacing-cmb'),
                 cls: 'input-group-nr',
                 editable: false,
-                data: [],
+                data: this._arrColumnSpacing,
                 style: 'width: 130px;',
                 menuStyle   : 'min-width: 130px;'
             });
@@ -137,28 +151,27 @@ define([
 
             this.numColumnSpacing = new Common.UI.MetricSpinner({
                 el: $('#matrix-column-spacing-spn'),
-                step: .01,
+                width: 70
-                width: 70,
-                value: '',
-                defaultUnit : "",
-                maxValue: 132,
-                minValue: 0.5
             });
             this.numColumnSpacing.on('change', _.bind(this.onNumColumnSpacingChange, this));
+            this.spinners.push(this.numColumnSpacing);
 
             this.numColumnSpacingEdges = new Common.UI.MetricSpinner({
                 el: $('#matrix-column-spacing-edges'),
-                step: .01,
+                step: .1,
                 width: 70,
                 value: '',
-                defaultUnit : "",
+                defaultUnit : "cm",
                 maxValue: 132,
                 minValue: 0.5
             });
             this.numColumnSpacingEdges.on('change', _.bind(this.onNumColumnSpacingEdgesChange, this));
+            this.spinners.push(this.numColumnSpacingEdges);
 
             var $window = this.getChild();
             $window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
+
+            this.afterRender();
         },
 
         _handleInput: function(state) {
@@ -172,6 +185,58 @@ define([
             this._handleInput(event.currentTarget.attributes['result'].value);
         },
 
+        afterRender: function() {
+            this.updateMetricUnit();
+            this._setDefaults(this._originalProps);
+        },
+
+        updateMetricUnit: function() {
+            if (this.spinners) {
+                for (var i=0; i<this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.getCurrentMetricName());
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.1);
+                }
+            }
+            this._arrRowSpacing[1].defaultUnit = Common.Utils.Metric.getCurrentMetricName();
+            this._arrRowSpacing[1].minValue =  parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2));
+            this._arrRowSpacing[1].step = (Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt) ? 1 : 0.1;
+            if (this.CurRowSpacing !== null) {
+                this.numRowSpacing.setDefaultUnit(this._arrRowSpacing[this.CurRowSpacing].defaultUnit);
+                this.numRowSpacing.setStep(this._arrRowSpacing[this.CurRowSpacing].step);
+            }
+            this._arrColumnSpacing[1].defaultUnit = Common.Utils.Metric.getCurrentMetricName();
+            this._arrColumnSpacing[1].minValue =  parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2));
+            this._arrColumnSpacing[1].step = (Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt) ? 1 : 0.1;
+            if (this.CurColumnSpacing !== null) {
+                this.numColumnSpacing.setDefaultUnit(this._arrColumnSpacing[this.CurColumnSpacing].defaultUnit);
+                this.numColumnSpacing.setStep(this._arrColumnSpacing[this.CurColumnSpacing].step);
+            }
+        },
+
+        _setDefaults: function(props) {
+            /*var rowSpacing = props.get_rowSpacing();
+            this.cmbRowSpacing.setValue((rowSpacing !== null) ? rowSpacing : '', true);
+
+            if(rowSpacing !== null) {
+                this.numRowSpacing.setValue((rowSpacing == c_matrixRowSpacing.MULTIPLE) ? props.get_numRowSpacing() : Common.Utils.Metric.fnRecalcFromMM(props.get_numRowSpacing()), true);
+            } else {
+                this.numRowSpacing.setValue('', true);
+            }*/
+
+            /*var сolumnSpacing = props.get_сolumnSpacing();
+            this.cmbСolumnSpacing.setValue((сolumnSpacing !== null) ? сolumnSpacing : '', true);
+
+            if(сolumnSpacing !== null) {
+                this.numСolumnSpacing.setValue((сolumnSpacing == c_matrixСolumnSpacing.MULTIPLE) ? props.get_numСolumnSpacing() : Common.Utils.Metric.fnRecalcFromMM(props.get_numСolumnSpacing()), true);
+            } else {
+                this.numСolumnSpacing.setValue('', true);
+            }*/
+
+            /*var columnSpacingEdges = props.get_columnSpacingEdges();
+            this.numColumnSpacingEdges.setValue(columnSpacingEdges !== null ? Common.Utils.Metric.fnRecalcFromMM(columnSpacingEdges) : '', true);*/
+        },
+
         getSettings: function() {
             return this;
         },
@@ -181,20 +246,54 @@ define([
             return false;
         },
 
-        onRowSpacingSelect: function() {
+        onRowSpacingSelect: function(combo, record) {
-
+            this.RowSpacing = record.value;
+            if ( this.CurRowSpacing !== this.RowSpacing ) {
+                this.numRowSpacing.setDefaultUnit(this._arrRowSpacing[record.value].defaultUnit);
+                this.numRowSpacing.setMinValue(this._arrRowSpacing[record.value].minValue);
+                this.numRowSpacing.setStep(this._arrRowSpacing[record.value].step);
+                if (this.RowSpacing === c_matrixRowSpacing.MULTIPLE) {
+                    this.numRowSpacing.setValue(this._arrRowSpacing[record.value].defaultValue);
+                } else {
+                    this.numRowSpacing.setValue(Common.Utils.Metric.fnRecalcFromMM(this._arrRowSpacing[record.value].defaultValue));
+                }
+                this.CurRowSpacing = record.value;
+            }
         },
 
-        onNumRowSpacingChange: function() {
+        onNumRowSpacingChange: function(field, newValue, oldValue, eOpts) {
-
+            /*if ( this.cmbRowSpacing.getRawValue() === '' )
+                return;
+            if (this.RowSpacing === null) {
+                var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CMatrixProperty();
+                this.RowSpacing = properties.get_RowSpacing();
+            }
+            this.RowSpacing = (this.cmbRowSpacing.getValue() == c_matrixRowSpacing.MULTIPLE) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());*/
         },
 
-        onColumnSpacingSelect: function() {
+        onColumnSpacingSelect: function(combo, record) {
-
+            this.ColumnSpacing = record.value;
+            if ( this.CurColumnSpacing !== this.ColumnSpacing ) {
+                this.numColumnSpacing.setDefaultUnit(this._arrColumnSpacing[record.value].defaultUnit);
+                this.numColumnSpacing.setMinValue(this._arrColumnSpacing[record.value].minValue);
+                this.numColumnSpacing.setStep(this._arrColumnSpacing[record.value].step);
+                if (this.ColumnSpacing === c_matrixColumnSpacing.MULTIPLE) {
+                    this.numColumnSpacing.setValue(this._arrColumnSpacing[record.value].defaultValue);
+                } else {
+                    this.numColumnSpacing.setValue(Common.Utils.Metric.fnRecalcFromMM(this._arrColumnSpacing[record.value].defaultValue));
+                }
+                this.CurColumnSpacing = record.value;
+            }
         },
 
         onNumColumnSpacingChange: function() {
-
+            /*if ( this.cmbColumnSpacing.getRawValue() === '' )
+                return;
+            if (this.ColumnSpacing === null) {
+                var properties = (this._originalProps) ? this._originalProps : new Asc.asc_CMatrixProperty();
+                this.ColumnSpacing = properties.get_ColumnSpacing();
+            }
+            this.ColumnSpacing = (this.cmbColumnSpacing.getValue() == c_matrixColumnSpacing.MULTIPLE) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue());*/
         },
 
         onNumColumnSpacingEdgesChange: function() {
@@ -209,7 +308,9 @@ define([
         textColumnSpacingEdges: 'Column Spacing Edges',
         textMinimumDistanceBetweenColumnEdges: 'Minimum distance between column edges',
         textColumnSpacing: 'Column Spacing',
-        textMinimumDistanceBetweenColumns: 'Minimum distance between columns'
+        textMinimumDistanceBetweenColumns: 'Minimum distance between columns',
+        textMultiple: 'Multiple',
+        textExact: 'Exactly'
 
     }, DE.Views.MatrixSpacingDialog || {}))
 });