Merge pull request #1057 from ONLYOFFICE/feature/Bug_50105

Feature/bug 50105

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([
-            '<div class="slider single-slider" style="">',
+            '<div class="slider single-slider <% if (this.options.direction === \'vertical\') { %>vertical<% } %>" style="">',
                 '<div class="track"></div>',
                 '<div class="thumb" style=""></div>',
                 '<% 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) {
+        setThumbPosition: function(pos) {
-            this.thumb.css({left: x + '%'});
+            if (this.direction === 'vertical') {
+                this.thumb.css({top: pos + '%'});
+            } else {
+                this.thumb.css({left: pos + '%'});
+            }
         },
 
         setValue: function(value) {

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 {

apps/documenteditor/main/app/template/FormSettings.template

@@ -83,6 +83,22 @@
             <div id="form-chb-aspect"></div>
         </td>
     </tr>
+    <tr class="form-image">
+        <td class="padding-large">
+            <div id="form-cnt-position" style="width: 100%;">
+                <div class="row">
+                    <div id="form-img-position-preview">
+                        <div id="form-img-example"><%= scope.textImage %></div>
+                    </div>
+                    <div id="form-img-slider-position-y"></div>
+                </div>
+                <div class="row">
+                    <div id="form-img-slider-position-x"></div>
+                    <label id="form-img-slider-value"></label>
+                </div>
+            </div>
+        </td>
+    </tr>
     <tr class="form-image">
         <td class="padding-large">
             <div id="form-button-replace" style="width:100%;"></div>

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',

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;
+    }
+}