diff --git a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template index 97e3f3ab6..af774c688 100644 --- a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template +++ b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template @@ -20,6 +20,76 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ 		+ +
+
+
+ 		+ +
+ 		+ +
+
+ +
+
+ 		+ +
+
+
+ 		+ +
+ 		+ +
+
+
+
+
+ + + + +
+
+
+
+
diff --git a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js b/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js index dfb06c8b7..05544bcb3 100644 --- a/apps/documenteditor/main/app/view/ImageSettingsAdvanced.js +++ b/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,177 @@ 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.fillShapeHeight(); + } + }, 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.fillShapeWidth(); + } + }, 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.fillShapeHeight(); + } + }, 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.fillShapeWidth(); + } + }, 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 +646,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 +728,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 +1067,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 +1139,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 +1255,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()); // Margins - this.btnsCategory[1].setDisabled(props.get_FromGroup()); // Wrapping + this.btnsCategory[4].setVisible(shapeprops!==null && !shapeprops.get_FromChart()); // Shapes + this.btnsCategory[5].setVisible(shapeprops!==null && !shapeprops.get_FromChart()); // Margins + 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; i0) { picker.store.each( function(rec){ @@ -1674,7 +2017,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 || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index e71bd8338..f32e01a8f 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1017,6 +1017,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",