From 0b849e76b65751144720785e8656f985e01ea90b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 17 Oct 2019 12:00:35 +0300 Subject: [PATCH 1/8] Gradient slider (add new color) --- .../main/lib/component/MultiSliderGradient.js | 10 +++++++ apps/common/main/lib/component/Slider.js | 26 ++++++++++++++++--- .../main/app/view/ShapeSettings.js | 5 ++++ 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 8ad11eaff..5f79042fb 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -159,6 +159,16 @@ define([ me.changeSliderStyle(); }, + addNewThumb: function(index, lastIndex, color) { + var me = this; + me.thumbs[index].thumb.on('dblclick', null, function() { + me.trigger('thumbdblclick', me); + }); + me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div'); + (index>0) && this.setColorValue(this.getColorValue(lastIndex), index); + me.changeSliderStyle(); + }, + removeThumb: function(index) { if (index===undefined) index = this.thumbs.length-1; if (index>0) { diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 0ee059b7e..ba49e37cd 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -403,7 +403,26 @@ define([ $(document).on('mousemove', null, e.data, me.binding.onMouseMove); }; - var onTrackMouseDown = function (e) { + var onTrackMouseUp = 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)))), + lastIndex = findThumb(pos), + thumbColor = me.thumbs[lastIndex].colorValue, + lastValue = me.thumbs[lastIndex].value, + value = pos/me.delta + me.minValue; + me.addThumb(); + var newIndex = me.thumbs.length - 1; + me.setThumbPosition(newIndex, pos); + me.thumbs[newIndex].value = value; + me.trigger('addthumb', me, newIndex, lastIndex, thumbColor); + + me.sortThumbs(); + + me.trigger('change', me); + }; + + /*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)))), @@ -416,7 +435,7 @@ define([ me.trigger('change', me, value, lastValue); me.trigger('changecomplete', me, value, lastValue); - }; + };*/ var findThumb = function(pos) { var nearest = 100, @@ -462,7 +481,8 @@ define([ me.setActiveThumb(0, true); if (!me.rendered) { - el.on('mousedown', '.track', onTrackMouseDown); + /*el.on('mousedown', '.track', onTrackMouseDown);*/ + el.on('mouseup', '.track', onTrackMouseUp); } me.rendered = true; diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 2a5281b4a..a3f54b70c 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -1293,6 +1293,11 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, lastIndex, color){ + me.GradColor.currentIdx = index; + + me.sldrGradient.addNewThumb(index, lastIndex, color); + }); this.fillControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ From 124a457283ea3f28d368ecf4f5b76cbd77951abb Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 12 Nov 2019 14:18:02 +0300 Subject: [PATCH 2/8] [SSE] Gradient Slider: add new color --- .../main/lib/component/MultiSliderGradient.js | 6 ++++-- apps/common/main/lib/component/Slider.js | 19 ++++++++++--------- .../main/app/view/ShapeSettings.js | 10 ++++++---- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 5f79042fb..0228fe09e 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -159,14 +159,16 @@ define([ me.changeSliderStyle(); }, - addNewThumb: function(index, lastIndex, color) { + addNewThumb: function(index, color) { var me = this; me.thumbs[index].thumb.on('dblclick', null, function() { me.trigger('thumbdblclick', me); }); me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div'); - (index>0) && this.setColorValue(this.getColorValue(lastIndex), index); + (index>0) && this.setColorValue(color, index); + me.sortThumbs(); me.changeSliderStyle(); + me.changeGradientStyle(); }, removeThumb: function(index) { diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index ba49e37cd..2c9d61ae4 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -405,21 +405,21 @@ define([ var onTrackMouseUp = function (e) { if ( me.disabled ) return; + if ( me.thumbs.length > 9 ) return; var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))), - lastIndex = findThumb(pos), - thumbColor = me.thumbs[lastIndex].colorValue, - lastValue = me.thumbs[lastIndex].value, + nearIndex = findThumb(pos), + thumbColor = me.thumbs[nearIndex].colorValue, + thumbValue = me.thumbs[nearIndex].value, value = pos/me.delta + me.minValue; me.addThumb(); - var newIndex = me.thumbs.length - 1; - me.setThumbPosition(newIndex, pos); - me.thumbs[newIndex].value = value; - me.trigger('addthumb', me, newIndex, lastIndex, thumbColor); - - me.sortThumbs(); + var index = me.thumbs.length - 1; + me.setThumbPosition(index, pos); + me.thumbs[index].value = value; + me.trigger('addthumb', me, index, nearIndex, thumbColor); me.trigger('change', me); + me.trigger('changecomplete', me); }; /*var onTrackMouseDown = function (e) { @@ -492,6 +492,7 @@ define([ setActiveThumb: function(index, suspend) { this.currentThumb = index; + this.$thumbs = this.cmpEl.find('.thumb'); this.$thumbs.removeClass('active'); this.thumbs[index].thumb.addClass('active'); if (suspend!==true) this.trigger('thumbclick', this, index); diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index a3f54b70c..6900ef876 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -895,6 +895,9 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (me.GradColor.currentIdx) { + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + } this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1293,10 +1296,9 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); - this.sldrGradient.on('addthumb', function(cmp, index, lastIndex, color){ - me.GradColor.currentIdx = index; - - me.sldrGradient.addNewThumb(index, lastIndex, color); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); }); this.fillControls.push(this.sldrGradient); From 87270ee486a60e91d963c3d8bf1bbbd7ab2b1336 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Tue, 12 Nov 2019 17:13:34 +0300 Subject: [PATCH 3/8] [SSE] Gradient Slider: remove color --- apps/common/main/lib/component/Slider.js | 19 ++++++++++++++ .../resources/less/multislider-gradient.less | 4 +++ .../main/app/view/ShapeSettings.js | 25 +++++++++++-------- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 2c9d61ae4..e6abb5266 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -347,6 +347,13 @@ define([ pos = Math.max(0, Math.min(100, position)), value = pos/me.delta + me.minValue; + if (me.isRemoveThumb) { + if (me.thumbs.length < 3) return; + me.trigger('removethumb', me, index); + me.trigger('change', me); + me.trigger('changecomplete', me); + } + me.setThumbPosition(index, pos); me.thumbs[index].value = value; @@ -376,6 +383,10 @@ define([ pos = Math.max(0, Math.min(100, position)), value = pos/me.delta + me.minValue; + var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top; + me.isRemoveThumb = positionY > me.cmpEl.height(); + me.setRemoveThumb(index, me.isRemoveThumb); + me.setThumbPosition(index, pos); me.thumbs[index].value = value; @@ -498,6 +509,14 @@ define([ if (suspend!==true) this.trigger('thumbclick', this, index); }, + setRemoveThumb: function(index, remove) { + if (remove) { + this.thumbs[index].thumb.addClass('remove'); + } else { + this.thumbs[index].thumb.removeClass('remove'); + } + }, + setThumbPosition: function(index, x) { this.thumbs[index].position = x; this.thumbs[index].thumb.css({left: x + '%'}); diff --git a/apps/common/main/resources/less/multislider-gradient.less b/apps/common/main/resources/less/multislider-gradient.less index d42350d94..562f15b8f 100644 --- a/apps/common/main/resources/less/multislider-gradient.less +++ b/apps/common/main/resources/less/multislider-gradient.less @@ -40,6 +40,10 @@ &.active .thumb-bottom { border-bottom-width: 2px; } + + &.remove { + opacity: 0.5; + } } .track { diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 6900ef876..f3b2f6ea6 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -546,17 +546,16 @@ define([ }); fill.asc_getFill().asc_putPositions(arr); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { - if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000); - fill.asc_getFill().asc_putLinearScale(true); - } - arr = []; - this.GradColor.colors.forEach(function(item){ - arr.push(Common.Utils.ThemeColor.getRgbColor(item)); - }); - fill.asc_getFill().asc_putColors(arr); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + fill.asc_getFill().asc_putLinearAngle(this.GradLinearDirectionType * 60000); + fill.asc_getFill().asc_putLinearScale(true); } + arr = []; + this.GradColor.colors.forEach(function(item){ + arr.push(Common.Utils.ThemeColor.getRgbColor(item)); + }); + fill.asc_getFill().asc_putColors(arr); + props.asc_putFill(fill); this.imgprops.asc_putShapeProperties(props); this.api.asc_setGraphicObjectProps(this.imgprops); @@ -1300,6 +1299,12 @@ define([ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.sldrGradient.addNewThumb(index, color); }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.GradColor.colors.splice(index, 1); + me.GradColor.values.splice(index, 1); + me.sldrGradient.removeThumb(index); + me.sldrGradient.changeGradientStyle(); + }); this.fillControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ From 7d7149a9e5364dc1345c5566ee8010bf1b3c9e48 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Thu, 14 Nov 2019 09:43:04 +0300 Subject: [PATCH 4/8] [DE] [PE] Gradient Slider: add new thumb, remove thumb --- .../main/app/view/ShapeSettings.js | 29 ++++++++++++------- .../main/app/view/ShapeSettings.js | 29 ++++++++++++------- 2 files changed, 38 insertions(+), 20 deletions(-) diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 1d227611a..609b50247 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -550,17 +550,16 @@ define([ }); fill.get_fill().put_positions(arr); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { - if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); - fill.get_fill().put_linear_scale(true); - } - arr = []; - this.GradColor.colors.forEach(function(item){ - arr.push(Common.Utils.ThemeColor.getRgbColor(item)); - }); - fill.get_fill().put_colors(arr); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); + fill.get_fill().put_linear_scale(true); } + arr = []; + this.GradColor.colors.forEach(function(item){ + arr.push(Common.Utils.ThemeColor.getRgbColor(item)); + }); + fill.get_fill().put_colors(arr); + props.put_fill(fill); this.imgprops.put_ShapeProperties(props); this.api.ImgApply(this.imgprops); @@ -1357,6 +1356,16 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.GradColor.colors.splice(index, 1); + me.GradColor.values.splice(index, 1); + me.sldrGradient.removeThumb(index); + me.sldrGradient.changeGradientStyle(); + }); this.fillControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 0ab44f978..79757ea42 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -531,17 +531,16 @@ define([ }); fill.get_fill().put_positions(arr); - if (this.OriginalFillType !== Asc.c_oAscFill.FILL_TYPE_GRAD) { - if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { - fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); - fill.get_fill().put_linear_scale(true); - } - arr = []; - this.GradColor.colors.forEach(function(item){ - arr.push(Common.Utils.ThemeColor.getRgbColor(item)); - }); - fill.get_fill().put_colors(arr); + if (this.GradFillType == Asc.c_oAscFillGradType.GRAD_LINEAR) { + fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); + fill.get_fill().put_linear_scale(true); } + arr = []; + this.GradColor.colors.forEach(function(item){ + arr.push(Common.Utils.ThemeColor.getRgbColor(item)); + }); + fill.get_fill().put_colors(arr); + props.put_fill(fill); this.api.ShapeApply(props); this._sliderChanged = false; @@ -1269,6 +1268,16 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.GradColor.colors.splice(index, 1); + me.GradColor.values.splice(index, 1); + me.sldrGradient.removeThumb(index); + me.sldrGradient.changeGradientStyle(); + }); this.fillControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ From 943afb4ebcbd552a493da1837e3e65444d142574 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 15 Nov 2019 11:42:13 +0300 Subject: [PATCH 5/8] Gradient Slider: fix remove thumb --- .../main/lib/component/MultiSliderGradient.js | 3 +- apps/common/main/lib/component/Slider.js | 45 +++++++++++-------- .../main/app/view/ShapeSettings.js | 6 ++- .../main/app/view/ShapeSettings.js | 6 ++- .../main/app/view/ShapeSettings.js | 3 +- 5 files changed, 37 insertions(+), 26 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index 0228fe09e..a3cc65c93 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -173,9 +173,10 @@ define([ removeThumb: function(index) { if (index===undefined) index = this.thumbs.length-1; - if (index>0) { + if (this.thumbs.length > 2) { this.thumbs[index].thumb.remove(); this.thumbs.splice(index, 1); + this.sortThumbs(); this.changeSliderStyle(); } }, diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index e6abb5266..c069a1b5d 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -348,23 +348,27 @@ define([ value = pos/me.delta + me.minValue; if (me.isRemoveThumb) { - if (me.thumbs.length < 3) return; - me.trigger('removethumb', me, index); - me.trigger('change', me); - me.trigger('changecomplete', me); + if (me.thumbs.length < 3) { + $(document).off('mouseup', me.binding.onMouseUp); + $(document).off('mousemove', me.binding.onMouseMove); + return; + } + me.trigger('removethumb', me, _.findIndex(me.thumbs, {index: index})); + me.trigger('changecomplete', me, value, lastValue); + } else { + me.setThumbPosition(index, pos); + me.thumbs[index].value = value; + + if (need_sort) + me.sortThumbs(); } - me.setThumbPosition(index, pos); - me.thumbs[index].value = value; - - if (need_sort) - me.sortThumbs(); - $(document).off('mouseup', me.binding.onMouseUp); $(document).off('mousemove', me.binding.onMouseMove); me._dragstart = undefined; - me.trigger('changecomplete', me, value, lastValue); + !me.isRemoveThumb && me.trigger('changecomplete', me, value, lastValue); + me.isRemoveThumb = undefined; }; var onMouseMove = function (e) { @@ -383,16 +387,16 @@ define([ pos = Math.max(0, Math.min(100, position)), value = pos/me.delta + me.minValue; - var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top; - me.isRemoveThumb = positionY > me.cmpEl.height(); - me.setRemoveThumb(index, me.isRemoveThumb); - me.setThumbPosition(index, pos); me.thumbs[index].value = value; if (need_sort) me.sortThumbs(); + var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top; + me.isRemoveThumb = positionY > me.cmpEl.height(); + me.setRemoveThumb(index, me.isRemoveThumb); + if (Math.abs(value-lastValue)>0.001) me.trigger('change', me, value, lastValue); }; @@ -510,10 +514,13 @@ define([ }, setRemoveThumb: function(index, remove) { - if (remove) { - this.thumbs[index].thumb.addClass('remove'); - } else { - this.thumbs[index].thumb.removeClass('remove'); + var ind = _.findIndex(this.thumbs, {index: index}); + if (ind !== -1) { + if (remove && this.thumbs.length > 2) { + this.thumbs[index].thumb.addClass('remove'); + } else { + this.thumbs[index].thumb.removeClass('remove'); + } } }, diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 609b50247..613b3078d 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -957,6 +957,9 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (me.GradColor.currentIdx) { + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + } this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1361,9 +1364,8 @@ define([ me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ - me.GradColor.colors.splice(index, 1); - me.GradColor.values.splice(index, 1); me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); me.sldrGradient.changeGradientStyle(); }); this.fillControls.push(this.sldrGradient); diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 79757ea42..28d8912b3 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -870,6 +870,9 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (me.GradColor.currentIdx) { + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + } this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1273,9 +1276,8 @@ define([ me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ - me.GradColor.colors.splice(index, 1); - me.GradColor.values.splice(index, 1); me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); me.sldrGradient.changeGradientStyle(); }); this.fillControls.push(this.sldrGradient); diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index f3b2f6ea6..d04fea464 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -1300,9 +1300,8 @@ define([ me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ - me.GradColor.colors.splice(index, 1); - me.GradColor.values.splice(index, 1); me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); me.sldrGradient.changeGradientStyle(); }); this.fillControls.push(this.sldrGradient); From 310033f575f974b59d49cfabf5b1706380005c5b Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 15 Nov 2019 14:05:50 +0300 Subject: [PATCH 6/8] [DE] [PE] [SSE] Gradient Slider: add, remove thumb --- .../main/lib/component/MultiSliderGradient.js | 3 --- apps/common/main/lib/component/Slider.js | 7 +++---- apps/documenteditor/main/app/view/ShapeSettings.js | 5 +++-- .../documenteditor/main/app/view/TextArtSettings.js | 13 +++++++++++++ .../main/app/view/ShapeSettings.js | 5 +++-- .../main/app/view/SlideSettings.js | 13 +++++++++++++ .../main/app/view/TextArtSettings.js | 13 +++++++++++++ .../main/app/view/ShapeSettings.js | 5 +++-- .../main/app/view/TextArtSettings.js | 13 +++++++++++++ 9 files changed, 64 insertions(+), 13 deletions(-) diff --git a/apps/common/main/lib/component/MultiSliderGradient.js b/apps/common/main/lib/component/MultiSliderGradient.js index a3cc65c93..71a5bf3a6 100644 --- a/apps/common/main/lib/component/MultiSliderGradient.js +++ b/apps/common/main/lib/component/MultiSliderGradient.js @@ -161,9 +161,6 @@ define([ addNewThumb: function(index, color) { var me = this; - me.thumbs[index].thumb.on('dblclick', null, function() { - me.trigger('thumbdblclick', me); - }); me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div'); (index>0) && this.setColorValue(color, index); me.sortThumbs(); diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index c069a1b5d..14e9717ea 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -419,8 +419,7 @@ define([ }; var onTrackMouseUp = function (e) { - if ( me.disabled ) return; - if ( me.thumbs.length > 9 ) return; + if ( me.disabled || !_.isUndefined(me._dragstart) || me.thumbs.length > 9) return; var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))), nearIndex = findThumb(pos), @@ -517,9 +516,9 @@ define([ var ind = _.findIndex(this.thumbs, {index: index}); if (ind !== -1) { if (remove && this.thumbs.length > 2) { - this.thumbs[index].thumb.addClass('remove'); + this.$el.find('.active').addClass('remove'); } else { - this.thumbs[index].thumb.removeClass('remove'); + this.$el.find('.remove').removeClass('remove'); } } }, diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 613b3078d..33ce7c598 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -957,9 +957,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } - if (me.GradColor.currentIdx) { - me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 4613bf022..f1a445a19 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -650,6 +650,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; + } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]}; } @@ -944,6 +948,15 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); + me.sldrGradient.changeGradientStyle(); + }); this.lockedControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 28d8912b3..602299ba0 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -870,9 +870,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } - if (me.GradColor.currentIdx) { - me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js index f71abc046..469038244 100644 --- a/apps/presentationeditor/main/app/view/SlideSettings.js +++ b/apps/presentationeditor/main/app/view/SlideSettings.js @@ -804,6 +804,15 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); + me.sldrGradient.changeGradientStyle(); + }); this.FillItems.push(this.sldrGradient); }, @@ -1282,6 +1291,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; + } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js index 7d1690829..d2940b0cd 100644 --- a/apps/presentationeditor/main/app/view/TextArtSettings.js +++ b/apps/presentationeditor/main/app/view/TextArtSettings.js @@ -846,6 +846,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; + } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1253,6 +1257,15 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); + me.sldrGradient.changeGradientStyle(); + }); this.lockedControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index d04fea464..9b28011ca 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -894,9 +894,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } - if (me.GradColor.currentIdx) { - me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index d3d6291d7..9141afbb5 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -850,6 +850,10 @@ define([ me.sldrGradient.setColorValue(Common.Utils.String.format('#{0}', (typeof(me.GradColor.colors[index]) == 'object') ? me.GradColor.colors[index].color : me.GradColor.colors[index]), index); me.sldrGradient.setValue(index, me.GradColor.values[index]); } + if (_.isUndefined(me.GradColor.currentIdx) || me.GradColor.currentIdx >= this.GradColor.colors.length) { + me.GradColor.currentIdx = 0; + } + me.sldrGradient.setActiveThumb(me.GradColor.currentIdx); this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD; this.FGColor = {Value: 1, Color: this.GradColor.colors[0]}; this.BGColor = {Value: 1, Color: 'ffffff'}; @@ -1257,6 +1261,15 @@ define([ me.GradColor.colors = colors; me.GradColor.currentIdx = currentIdx; }); + this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ + me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.sldrGradient.addNewThumb(index, color); + }); + this.sldrGradient.on('removethumb', function(cmp, index){ + me.sldrGradient.removeThumb(index); + me.GradColor.values.splice(index, 1); + me.sldrGradient.changeGradientStyle(); + }); this.lockedControls.push(this.sldrGradient); this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ From 3c493d898b7b718fde788b032ab15fe229af96c6 Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 15 Nov 2019 14:33:09 +0300 Subject: [PATCH 7/8] Gradient Slider: fix remove thumb --- apps/common/main/lib/component/Slider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js index 14e9717ea..00e54d0d0 100644 --- a/apps/common/main/lib/component/Slider.js +++ b/apps/common/main/lib/component/Slider.js @@ -394,7 +394,7 @@ define([ me.sortThumbs(); var positionY = e.pageY*Common.Utils.zoom() - me.cmpEl.offset().top; - me.isRemoveThumb = positionY > me.cmpEl.height(); + me.isRemoveThumb = positionY > me.cmpEl.height() || positionY < 0; me.setRemoveThumb(index, me.isRemoveThumb); if (Math.abs(value-lastValue)>0.001) From 58e5f5040f248b0acfbe4370ba7a8a4cd6a6c44f Mon Sep 17 00:00:00 2001 From: Julia Svinareva Date: Fri, 15 Nov 2019 15:10:03 +0300 Subject: [PATCH 8/8] [DE] [PE] [SSE] Gradient slider: set active new thumb --- apps/documenteditor/main/app/view/ShapeSettings.js | 1 + apps/documenteditor/main/app/view/TextArtSettings.js | 1 + apps/presentationeditor/main/app/view/ShapeSettings.js | 1 + apps/presentationeditor/main/app/view/SlideSettings.js | 1 + apps/presentationeditor/main/app/view/TextArtSettings.js | 1 + apps/spreadsheeteditor/main/app/view/ShapeSettings.js | 1 + apps/spreadsheeteditor/main/app/view/TextArtSettings.js | 1 + 7 files changed, 7 insertions(+) diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index 33ce7c598..76c98258b 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -1362,6 +1362,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index f1a445a19..89600a6df 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -950,6 +950,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 602299ba0..3043c455a 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -1274,6 +1274,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js index 469038244..11ef1102a 100644 --- a/apps/presentationeditor/main/app/view/SlideSettings.js +++ b/apps/presentationeditor/main/app/view/SlideSettings.js @@ -806,6 +806,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js index d2940b0cd..04a9f738a 100644 --- a/apps/presentationeditor/main/app/view/TextArtSettings.js +++ b/apps/presentationeditor/main/app/view/TextArtSettings.js @@ -1259,6 +1259,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js index 9b28011ca..6585349ca 100644 --- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js +++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js @@ -1298,6 +1298,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){ diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js index 9141afbb5..9ce20f43e 100644 --- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js +++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js @@ -1263,6 +1263,7 @@ define([ }); this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; + me.GradColor.currentIdx = index; me.sldrGradient.addNewThumb(index, color); }); this.sldrGradient.on('removethumb', function(cmp, index){