diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index bbbb1bbb8..d142eed92 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -82,13 +82,14 @@ define([ maxValue: 100, step: 1, value: 100, - enableKeyEvents: false + enableKeyEvents: false, + direction: 'horizontal' // 'vertical' }, disabled: false, template : _.template([ - '
', + '
', '
', '
', '<% if (this.options.enableKeyEvents) { %>', @@ -107,6 +108,7 @@ define([ me.maxValue = me.options.maxValue; me.delta = 100/(me.maxValue - me.minValue); me.step = me.options.step; + me.direction = me.options.direction; if (me.options.el) { me.render(); @@ -133,7 +135,7 @@ define([ } this.cmpEl.find('.track-center').width(me.options.width - 14); - this.cmpEl.width(me.options.width); + this.cmpEl[me.direction === 'vertical' ? 'height' : 'width'](me.options.width); this.thumb = this.cmpEl.find('.thumb'); @@ -141,7 +143,9 @@ define([ e.preventDefault(); e.stopPropagation(); - var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))); + var pos = Math.max(0, Math.min(100, (Math.round(( + me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) - me._dragstart + ) / me.width * 100)))); me.setThumbPosition(pos); me.lastValue = me.value; @@ -162,7 +166,9 @@ define([ e.preventDefault(); e.stopPropagation(); - var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))); + var pos = Math.max(0, Math.min(100, (Math.round(( + me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) - me._dragstart + ) / me.width * 100)))); me.setThumbPosition(pos); me.lastValue = me.value; @@ -174,7 +180,7 @@ define([ var onMouseDown = function (e) { if ( me.disabled ) return; - me._dragstart = e.pageX*Common.Utils.zoom() - me.thumb.offset().left - 7; + me._dragstart = me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.thumb.offset().top) : (e.pageX*Common.Utils.zoom() - me.thumb.offset().left) - 7; me.thumb.addClass('active'); $(document).on('mouseup', onMouseUp); @@ -187,7 +193,9 @@ define([ var onTrackMouseDown = function (e) { if ( me.disabled ) return; - var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))); + var pos = Math.max(0, Math.min(100, (Math.round(( + me.direction === 'vertical' ? (e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top) : (e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) + ) / me.width * 100)))); me.setThumbPosition(pos); me.lastValue = me.value; @@ -245,8 +253,12 @@ define([ return this; }, - setThumbPosition: function(x) { - this.thumb.css({left: x + '%'}); + setThumbPosition: function(pos) { + if (this.direction === 'vertical') { + this.thumb.css({top: pos + '%'}); + } else { + this.thumb.css({left: pos + '%'}); + } }, setValue: function(value) { diff --git a/apps/common/main/resources/less/slider.less b/apps/common/main/resources/less/slider.less index fc134d2bf..cb7b32f55 100644 --- a/apps/common/main/resources/less/slider.less +++ b/apps/common/main/resources/less/slider.less @@ -32,6 +32,28 @@ &.active { } } + + &.vertical { + height: auto; + width: 18px; + padding-top: 0; + padding-left: 7px; + .track { + position: absolute; + @track-height: 4px; + height: calc(100% + @track-height); + width: @track-height; + margin-left: 0; + margin-top: -@track-height / 2; + } + .thumb { + @thumb-width: 12px; + top: auto; + left: 3px; + margin-left: 0; + margin-top: @thumb-width / -2; + } + } } .thumb { diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template index e43b4b60e..c63a68c60 100644 --- a/apps/documenteditor/main/app/template/FormSettings.template +++ b/apps/documenteditor/main/app/template/FormSettings.template @@ -83,6 +83,22 @@
+ + +
+
+
+
<%= scope.textImage %>
+
+
+
+
+
+ +
+
+ +
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index c6359a121..17d39bd90 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -423,6 +423,36 @@ define([ this.cmbScale.on('changed:after', this.onScaleChanged.bind(this)); this.cmbScale.on('hide:after', this.onHideMenus.bind(this)); + this.imagePositionPreview = $markup.findById('#form-img-example'); + this.imagePositionLabel = $markup.findById('#form-img-slider-value'); + + this.sldrPreviewPositionX = new Common.UI.SingleSlider({ + el: $('#form-img-slider-position-x'), + width: 116, + minValue: 0, + maxValue: 100, + value: 50 + }); + this.sldrPreviewPositionX.on('change', _.bind(this.onImagePositionChange, this, 'x')); + this.sldrPreviewPositionX.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'x')); + this.lockedControls.push(this.sldrPreviewPositionX); + + this.sldrPreviewPositionY = new Common.UI.SingleSlider({ + el: $('#form-img-slider-position-y'), + width: 116, + minValue: 0, + maxValue: 100, + value: 50, + direction: 'vertical' + }); + this.sldrPreviewPositionY.on('change', _.bind(this.onImagePositionChange, this, 'y')); + this.sldrPreviewPositionY.on('changecomplete', _.bind(this.onImagePositionChangeComplete, this, 'y')); + this.lockedControls.push(this.sldrPreviewPositionY); + + var xValue = this.sldrPreviewPositionX.getValue(), + yValue = this.sldrPreviewPositionY.getValue(); + this.imagePositionLabel.text(xValue + ',' + yValue); + this.updateMetricUnit(); this.UpdateThemeColors(); }, @@ -933,6 +963,27 @@ define([ this.cmbScale.setValue(val); this._state.scaleFlag=val; } + + val = pictPr.get_ShiftX() * 100; + if (this._state.imgPositionX !== val) { + this.sldrPreviewPositionX.setValue(val); + this._state.imgPositionX = val; + } + val = pictPr.get_ShiftY() * 100; + if (this._state.imgPositionY !== val) { + this.sldrPreviewPositionY.setValue(val); + this._state.imgPositionY = val; + } + this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY)); + val = ((130 - 80) * this._state.imgPositionX) / 100 - 1; + this.imagePositionPreview.css({'left': val + 'px'}); + val = ((130 - 80) * this._state.imgPositionY) / 100 - 1; + this.imagePositionPreview.css({'top': val + 'px'}); + + this.chAspect.setDisabled(this._state.scaleFlag === Asc.c_oAscPictureFormScaleFlag.Never); + var disableSliders = this._state.scaleFlag === Asc.c_oAscPictureFormScaleFlag.Always && !this._state.Aspect; + this.sldrPreviewPositionX.setDisabled(disableSliders); + this.sldrPreviewPositionY.setDisabled(disableSliders); } var formTextPr = props.get_TextFormPr(); @@ -1109,6 +1160,61 @@ define([ this.btnListDown.setDisabled(disabled || this._state.DisabledControls); }, + onImagePositionChange: function (type, field, newValue, oldValue) { + var value = ((130 - 80) * newValue) / 100 - 1; + if (type === 'x') { + this.imagePositionPreview.css({'left': value + 'px'}); + this._state.imgPositionX = newValue; + } else { + this.imagePositionPreview.css({'top': value + 'px'}); + this._state.imgPositionY = newValue; + } + if (_.isUndefined(this._state.imgPositionX)) { + this._state.imgPositionX = 50; + } else if (_.isUndefined(this._state.imgPositionY)) { + this._state.imgPositionY = 50; + } + this.imagePositionLabel.text(Math.round(this._state.imgPositionX) + ',' + Math.round(this._state.imgPositionY)); + + if (this._sendUndoPoint) { + this.api.setStartPointHistory(); + this._sendUndoPoint = false; + this.updateslider = setInterval(_.bind(this.imgPositionApplyFunc, this, type), 100); + } + }, + + onImagePositionChangeComplete: function (type, field, newValue, oldValue) { + clearInterval(this.updateslider); + if (type === 'x') { + this._state.imgPositionX = newValue; + } else { + this._state.imgPositionY = newValue; + } + if (!this._sendUndoPoint) { // start point was added + this.api.setEndPointHistory(); + this.imgPositionApplyFunc(type); + } + this._sendUndoPoint = true; + }, + + imgPositionApplyFunc: function (type) { + if (this.api && !this._noApply) { + var props = this._originalProps || new AscCommon.CContentControlPr(); + var pictPr = this._originalPictProps || new AscCommon.CSdtPictureFormPr(); + var val; + if (type === 'x') { + val = this._state.imgPositionX / 100; + pictPr.put_ShiftX(val); + } else { + val = this._state.imgPositionY / 100; + pictPr.put_ShiftY(val); + } + props.put_PictureFormPr(pictPr); + this.api.asc_SetContentControlProperties(props, this.internalId); + this.fireEvent('editcomplete', this); + } + }, + textField: 'Text Field', textKey: 'Key', textPlaceholder: 'Placeholder', diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index dfd274f36..7f10975b7 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -161,3 +161,40 @@ background-color: @background-normal-ie; background-color: @background-normal; } + +#form-cnt-position { + position: relative; + .row { + display: flex; + justify-content: flex-start; + } + #form-img-position-preview { + position: relative; + height: 130px; + width: 130px; + border: 1px solid @border-regular-control; + #form-img-example { + position: absolute; + top: 24px; + left: 24px; + display: flex; + justify-content: center; + align-items: center; + height: 80px; + width: 80px; + border: 1px solid @border-regular-control; + } + } + #form-img-slider-position-x { + margin-top: 4px; + margin-left: 7px; + } + #form-img-slider-position-y { + margin-top: 7px; + margin-left: 4px; + } + #form-img-slider-value { + margin-left: 10px; + margin-top: 4px; + } +}