[DE][PE][SSE] Add a new gradient point without changing track

This commit is contained in:
JuliaSvinareva 2020-07-13 22:14:51 +03:00
parent fcd12ad242
commit cc075fd7d3
10 changed files with 101 additions and 42 deletions

View file

@ -146,6 +146,43 @@ define([
return recalc_indexes; return recalc_indexes;
}, },
findLeftThumb: function(pos) {
var me = this,
leftThumb = 100,
index = 0,
len = this.thumbs.length,
dist;
for (var i=0; i<len; i++) {
dist = pos - me.thumbs[i].position;
if (dist > 0 && dist <= leftThumb) {
var above = me.thumbs[i + 1];
var below = me.thumbs[i - 1];
if (below !== undefined && pos < below.position) {
continue;
}
if (above !== undefined && pos > above.position) {
continue;
}
index = i;
leftThumb = dist;
}
}
return index;
},
calculationNewColor: function(color1, color2, ratio) {
var w1 = ratio ? ratio/100 : 0.5;
var w2 = 1 - w1;
var rgbColor1 = Common.Utils.ThemeColor.getRgbColor(color1),
rgbColor2 = Common.Utils.ThemeColor.getRgbColor(color2);
var rgb = [Math.round(rgbColor1.get_r() * w2 + rgbColor2.get_r() * w1),
Math.round(rgbColor1.get_g() * w2 + rgbColor2.get_g() * w1),
Math.round(rgbColor1.get_b() * w2 + rgbColor2.get_b() * w1)];
return Common.Utils.ThemeColor.getHexColor(rgb[0], rgb[1], rgb[2]);
},
addThumb: function() { addThumb: function() {
Common.UI.MultiSlider.prototype.addThumb.call(this); Common.UI.MultiSlider.prototype.addThumb.call(this);
@ -159,23 +196,29 @@ define([
me.changeSliderStyle(); me.changeSliderStyle();
}, },
addNewThumb: function(index, color, pos, curIndex) { addNewThumb: function(index, pos, curIndex) {
var me = this; var me = this,
var color = color; indexLeftThumb = this.findLeftThumb(pos),
var index = index; index = index,
if (!_.isUndefined(pos) && !_.isUndefined(curIndex)) { color;
if (!_.isUndefined(curIndex)) {
this.addThumb(); this.addThumb();
index = this.thumbs.length - 1; index = this.thumbs.length - 1;
color = this.thumbs[curIndex].colorValue; color = this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue);
this.setThumbPosition(index, pos); this.setThumbPosition(index, pos);
var value = pos/me.delta + me.minValue; var value = pos/this.delta + this.minValue;
me.thumbs[index].value = value; this.thumbs[index].value = value;
} else {
var ratio = (pos - this.thumbs[indexLeftThumb].value) * 100 / (this.thumbs[indexLeftThumb + 1].value - this.thumbs[indexLeftThumb].value);
color = ratio < 0 ? this.thumbs[indexLeftThumb].colorValue : this.calculationNewColor(this.thumbs[indexLeftThumb].colorValue, this.thumbs[indexLeftThumb === index - 1 ? indexLeftThumb : indexLeftThumb + 1].colorValue, ratio);
} }
me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div'); me.thumbs[index].thumbcolor = me.thumbs[index].thumb.find('> div');
(index>0) && this.setColorValue(color, index); (index>0) && this.setColorValue('#' + color, index);
me.sortThumbs(); me.sortThumbs();
me.changeSliderStyle(); me.changeSliderStyle();
me.changeGradientStyle(); me.changeGradientStyle();
return color;
}, },
removeThumb: function(index) { removeThumb: function(index) {

View file

@ -432,7 +432,7 @@ define([
var index = me.thumbs.length - 1; var index = me.thumbs.length - 1;
me.setThumbPosition(index, pos); me.setThumbPosition(index, pos);
me.thumbs[index].value = value; me.thumbs[index].value = value;
me.trigger('addthumb', me, index, nearIndex, thumbColor); me.trigger('addthumb', me, index, pos);
me.trigger('change', me); me.trigger('change', me);
me.trigger('changecomplete', me); me.trigger('changecomplete', me);

View file

@ -1380,10 +1380,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1892,7 +1893,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -945,10 +945,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1226,7 +1227,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -1292,10 +1292,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1763,7 +1764,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -837,10 +837,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1563,7 +1564,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -1252,10 +1252,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1657,7 +1658,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -278,10 +278,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1250,7 +1251,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -1318,10 +1318,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1794,7 +1795,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);

View file

@ -1256,10 +1256,11 @@ define([
me.GradColor.colors = colors; me.GradColor.colors = colors;
me.GradColor.currentIdx = currentIdx; me.GradColor.currentIdx = currentIdx;
}); });
this.sldrGradient.on('addthumb', function(cmp, index, nearIndex, color){ this.sldrGradient.on('addthumb', function(cmp, index, pos){
me.GradColor.colors[index] = me.GradColor.colors[nearIndex]; me.GradColor.colors[index] = me.GradColor.colors[me.GradColor.currentIdx];
me.GradColor.currentIdx = index; me.GradColor.currentIdx = index;
me.sldrGradient.addNewThumb(index, color); var color = me.sldrGradient.addNewThumb(index, pos);
me.GradColor.colors[me.GradColor.currentIdx] = color;
}); });
this.sldrGradient.on('removethumb', function(cmp, index){ this.sldrGradient.on('removethumb', function(cmp, index){
me.sldrGradient.removeThumb(index); me.sldrGradient.removeThumb(index);
@ -1660,7 +1661,8 @@ define([
this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex]; this.GradColor.colors[this.GradColor.colors.length] = this.GradColor.colors[curIndex];
this.GradColor.currentIdx = this.GradColor.colors.length - 1; this.GradColor.currentIdx = this.GradColor.colors.length - 1;
this.sldrGradient.addNewThumb(undefined, undefined, pos, curIndex); var color = this.sldrGradient.addNewThumb(undefined, pos, curIndex);
this.GradColor.colors[this.GradColor.currentIdx] = color;
this.sldrGradient.trigger('change', this.sldrGradient); this.sldrGradient.trigger('change', this.sldrGradient);
this.sldrGradient.trigger('changecomplete', this.sldrGradient); this.sldrGradient.trigger('changecomplete', this.sldrGradient);