From c9aaf283a7cf4389d8842ea3da151bf40a75cff4 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 3 Aug 2021 19:58:38 +0300 Subject: [PATCH 1/5] Add opportunity to add vertical slider --- apps/common/main/lib/component/Slider.js | 54 ++++++++++++++++----- apps/common/main/resources/less/slider.less | 20 ++++++++ 2 files changed, 61 insertions(+), 13 deletions(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index bbbb1bbb8..cd5f9a5ba 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,11 +143,17 @@ 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; - me.value = pos/me.delta + me.minValue; + if (me.direction === 'vertical') { + me.value = (100 - pos)/me.delta + me.minValue; + } else { + me.value = pos/me.delta + me.minValue; + } me.thumb.removeClass('active'); $(document).off('mouseup', onMouseUp); @@ -162,11 +170,17 @@ 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; - me.value = pos/me.delta + me.minValue; + if (me.direction === 'vertical') { + me.value = (100 - pos)/me.delta + me.minValue; + } else { + me.value = pos/me.delta + me.minValue; + } if (Math.abs(me.value-me.lastValue)>0.001) me.trigger('change', me, me.value, me.lastValue); @@ -174,7 +188,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,11 +201,17 @@ 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; - me.value = pos/me.delta + me.minValue; + if (me.direction === 'vertical') { + me.value = (100 - pos)/me.delta + me.minValue; + } else { + me.value = pos/me.delta + me.minValue; + } me.trigger('change', me, me.value, me.lastValue); me.trigger('changecomplete', me, me.value, me.lastValue); @@ -245,14 +265,22 @@ 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) { this.lastValue = this.value; this.value = Math.max(this.minValue, Math.min(this.maxValue, value)); - this.setThumbPosition(Math.round((value-this.minValue)*this.delta)); + if (this.direction === 'vertical') { + this.setThumbPosition(100 - Math.round((value-this.minValue)*this.delta)); + } else { + this.setThumbPosition(Math.round((value-this.minValue)*this.delta)); + } }, getValue: function() { diff --git a/apps/common/main/resources/less/slider.less b/apps/common/main/resources/less/slider.less index fc134d2bf..5bbec41c2 100644 --- a/apps/common/main/resources/less/slider.less +++ b/apps/common/main/resources/less/slider.less @@ -32,6 +32,26 @@ &.active { } } + + &.vertical { + height: auto; + width: 18px; + padding-top: 0; + padding-left: 7px; + .track { + @track-height: 4px; + height: 100%; + width: @track-height; + margin-left: 0; + } + .thumb { + @thumb-width: 12px; + top: auto; + left: 3px; + margin-left: 0; + margin-top: @thumb-width / -2; + } + } } .thumb { From b634ce9493433f12cce2bb9e770a1cdac9ee6458 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 3 Aug 2021 20:00:23 +0300 Subject: [PATCH 2/5] [DE] Make position image setting in form settings --- .../main/app/template/FormSettings.template | 16 +++++++++ .../main/app/view/FormSettings.js | 20 ++++++++++- .../main/resources/less/rightmenu.less | 33 +++++++++++++++++++ 3 files changed, 68 insertions(+), 1 deletion(-) diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template index e43b4b60e..806d33903 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 db7f1fc2e..bbdcd8589 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -423,6 +423,23 @@ define([ this.cmbScale.on('changed:after', this.onScaleChanged.bind(this)); this.cmbScale.on('hide:after', this.onHideMenus.bind(this)); + this.sldrPreviewPositionX = new Common.UI.SingleSlider({ + el: $('#form-img-slider-position-x'), + width: 116, + minValue: 0, + maxValue: 100, + value: 50 + }); + + this.sldrPreviewPositionY = new Common.UI.SingleSlider({ + el: $('#form-img-slider-position-y'), + width: 116, + minValue: 0, + maxValue: 100, + value: 50, + direction: 'vertical' + }); + this.updateMetricUnit(); this.UpdateThemeColors(); }, @@ -1149,7 +1166,8 @@ define([ textNever: 'Never', textTooBig: 'Image is Too Big', textTooSmall: 'Image is Too Small', - textScale: 'When to scale' + textScale: 'When to scale', + textButton: 'Button' }, DE.Views.FormSettings || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less index dfd274f36..8284db0cf 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -161,3 +161,36 @@ 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; + } +} From f466027c0fdecbf2ccb1fae9a89e592f50da25f8 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 5 Aug 2021 01:27:55 +0300 Subject: [PATCH 3/5] [DE] Make position image setting in form settings --- apps/common/main/resources/less/slider.less | 4 +- .../main/app/template/FormSettings.template | 1 + .../main/app/view/FormSettings.js | 86 +++++++++++++++++++ .../main/resources/less/rightmenu.less | 4 + 4 files changed, 94 insertions(+), 1 deletion(-) diff --git a/apps/common/main/resources/less/slider.less b/apps/common/main/resources/less/slider.less index 5bbec41c2..cb7b32f55 100644 --- a/apps/common/main/resources/less/slider.less +++ b/apps/common/main/resources/less/slider.less @@ -39,10 +39,12 @@ padding-top: 0; padding-left: 7px; .track { + position: absolute; @track-height: 4px; - height: 100%; + height: calc(100% + @track-height); width: @track-height; margin-left: 0; + margin-top: -@track-height / 2; } .thumb { @thumb-width: 12px; diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template index 806d33903..4d082243a 100644 --- a/apps/documenteditor/main/app/template/FormSettings.template +++ b/apps/documenteditor/main/app/template/FormSettings.template @@ -95,6 +95,7 @@
+
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index bbdcd8589..25815135c 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -423,6 +423,9 @@ 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, @@ -430,6 +433,9 @@ define([ 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'), @@ -439,6 +445,13 @@ define([ 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(); @@ -923,6 +936,22 @@ 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) * (100 - this._state.imgPositionY) / 100 - 1; + this.imagePositionPreview.css({'top': val + 'px'}); } var formTextPr = props.get_TextFormPr(); @@ -1128,6 +1157,63 @@ define([ this.btnListDown.setDisabled(disabled || this._state.DisabledControls); }, + onImagePositionChange: function (type, field, newValue, oldValue) { + var value; + if (type === 'x') { + value = ((130 - 80) * newValue) / 100 - 1; + this.imagePositionPreview.css({'left': value + 'px'}); + this._state.imgPositionX = newValue; + } else { + value = (130 - 80) * (100 - newValue) / 100 - 1; + 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 8284db0cf..7f10975b7 100644 --- a/apps/documenteditor/main/resources/less/rightmenu.less +++ b/apps/documenteditor/main/resources/less/rightmenu.less @@ -193,4 +193,8 @@ margin-top: 7px; margin-left: 4px; } + #form-img-slider-value { + margin-left: 10px; + margin-top: 4px; + } } From 817d6338f1e2c542f921c2a01fa32230f4771172 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Thu, 5 Aug 2021 15:34:28 +0300 Subject: [PATCH 4/5] [DE] Fix position image setting in form settings --- .../documenteditor/main/app/template/FormSettings.template | 1 - apps/documenteditor/main/app/view/FormSettings.js | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/documenteditor/main/app/template/FormSettings.template b/apps/documenteditor/main/app/template/FormSettings.template index 4d082243a..c63a68c60 100644 --- a/apps/documenteditor/main/app/template/FormSettings.template +++ b/apps/documenteditor/main/app/template/FormSettings.template @@ -85,7 +85,6 @@ -
diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index 25815135c..85017a0da 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -942,7 +942,7 @@ define([ this.sldrPreviewPositionX.setValue(val); this._state.imgPositionX = val; } - val = pictPr.get_ShiftY() * 100; + val = 100 - (pictPr.get_ShiftY() * 100); if (this._state.imgPositionY !== val) { this.sldrPreviewPositionY.setValue(val); this._state.imgPositionY = val; @@ -1205,7 +1205,7 @@ define([ val = this._state.imgPositionX / 100; pictPr.put_ShiftX(val); } else { - val = this._state.imgPositionY / 100; + val = (100 - this._state.imgPositionY) / 100; pictPr.put_ShiftY(val); } props.put_PictureFormPr(pictPr); @@ -1252,8 +1252,7 @@ define([ textNever: 'Never', textTooBig: 'Image is Too Big', textTooSmall: 'Image is Too Small', - textScale: 'When to scale', - textButton: 'Button' + textScale: 'When to scale' }, DE.Views.FormSettings || {})); }); \ No newline at end of file From 0cba1c20e0a875583aac2392b2ff7271fd117475 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 9 Aug 2021 19:11:22 +0300 Subject: [PATCH 5/5] [DE] Fix position image setting in form settings --- apps/common/main/lib/component/Slider.js | 24 ++++--------------- .../main/app/view/FormSettings.js | 15 +++++++----- 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index cd5f9a5ba..d142eed92 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -149,11 +149,7 @@ define([ me.setThumbPosition(pos); me.lastValue = me.value; - if (me.direction === 'vertical') { - me.value = (100 - pos)/me.delta + me.minValue; - } else { - me.value = pos/me.delta + me.minValue; - } + me.value = pos/me.delta + me.minValue; me.thumb.removeClass('active'); $(document).off('mouseup', onMouseUp); @@ -176,11 +172,7 @@ define([ me.setThumbPosition(pos); me.lastValue = me.value; - if (me.direction === 'vertical') { - me.value = (100 - pos)/me.delta + me.minValue; - } else { - me.value = pos/me.delta + me.minValue; - } + me.value = pos/me.delta + me.minValue; if (Math.abs(me.value-me.lastValue)>0.001) me.trigger('change', me, me.value, me.lastValue); @@ -207,11 +199,7 @@ define([ me.setThumbPosition(pos); me.lastValue = me.value; - if (me.direction === 'vertical') { - me.value = (100 - pos)/me.delta + me.minValue; - } else { - me.value = pos/me.delta + me.minValue; - } + me.value = pos/me.delta + me.minValue; me.trigger('change', me, me.value, me.lastValue); me.trigger('changecomplete', me, me.value, me.lastValue); @@ -276,11 +264,7 @@ define([ setValue: function(value) { this.lastValue = this.value; this.value = Math.max(this.minValue, Math.min(this.maxValue, value)); - if (this.direction === 'vertical') { - this.setThumbPosition(100 - Math.round((value-this.minValue)*this.delta)); - } else { - this.setThumbPosition(Math.round((value-this.minValue)*this.delta)); - } + this.setThumbPosition(Math.round((value-this.minValue)*this.delta)); }, getValue: function() { diff --git a/apps/documenteditor/main/app/view/FormSettings.js b/apps/documenteditor/main/app/view/FormSettings.js index 85017a0da..2aab93da9 100644 --- a/apps/documenteditor/main/app/view/FormSettings.js +++ b/apps/documenteditor/main/app/view/FormSettings.js @@ -942,7 +942,7 @@ define([ this.sldrPreviewPositionX.setValue(val); this._state.imgPositionX = val; } - val = 100 - (pictPr.get_ShiftY() * 100); + val = pictPr.get_ShiftY() * 100; if (this._state.imgPositionY !== val) { this.sldrPreviewPositionY.setValue(val); this._state.imgPositionY = val; @@ -950,8 +950,13 @@ define([ 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) * (100 - this._state.imgPositionY) / 100 - 1; + 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(); @@ -1158,13 +1163,11 @@ define([ }, onImagePositionChange: function (type, field, newValue, oldValue) { - var value; + var value = ((130 - 80) * newValue) / 100 - 1; if (type === 'x') { - value = ((130 - 80) * newValue) / 100 - 1; this.imagePositionPreview.css({'left': value + 'px'}); this._state.imgPositionX = newValue; } else { - value = (130 - 80) * (100 - newValue) / 100 - 1; this.imagePositionPreview.css({'top': value + 'px'}); this._state.imgPositionY = newValue; } @@ -1205,7 +1208,7 @@ define([ val = this._state.imgPositionX / 100; pictPr.put_ShiftX(val); } else { - val = (100 - this._state.imgPositionY) / 100; + val = this._state.imgPositionY / 100; pictPr.put_ShiftY(val); } props.put_PictureFormPr(pictPr);