Skip to content

Commit 322a28b

Browse files
easylogiceasylogic
committed
Support to remove colorstop with alt key
1 parent cffd643 commit 322a28b

File tree

9 files changed

+164
-39
lines changed

9 files changed

+164
-39
lines changed

‎addon/colorpicker.js

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5277,10 +5277,10 @@ var EventMachin = function () {
52775277
value: function checkEventType(e, eventObject) {
52785278
var _this8 = this;
52795279

5280-
var onlyControl = e.ctrlKey ? eventObject.isControl : true;
5281-
var onlyShift = e.shiftKey ? eventObject.isShift : true;
5282-
var onlyAlt = e.altKey ? eventObject.isAlt : true;
5283-
var onlyMeta = e.metaKey ? eventObject.isMeta : true;
5280+
var onlyControl = eventObject.isControl ? e.ctrlKey : true;
5281+
var onlyShift = eventObject.isShift ? e.shiftKey : true;
5282+
var onlyAlt = eventObject.isAlt ? e.altKey : true;
5283+
var onlyMeta = eventObject.isMeta ? e.metaKey : true;
52845284

52855285
var hasKeyCode = true;
52865286
if (eventObject.codes.length) {
@@ -9719,6 +9719,12 @@ var GradientEditor = function (_UIElement) {
97199719
offset: Length.percent(percent),
97209720
color: 'rgba(0, 0, 0, 1)'
97219721
});
9722+
} else {
9723+
this.colorsteps.push({
9724+
cut: false,
9725+
offset: Length.percent(0),
9726+
color: 'rgba(0, 0, 0, 1)'
9727+
});
97229728
}
97239729

97249730
this.refresh();
@@ -9741,6 +9747,24 @@ var GradientEditor = function (_UIElement) {
97419747
this.updateData();
97429748
}
97439749
}
9750+
}, {
9751+
key: "removeStep",
9752+
value: function removeStep(index) {
9753+
if (this.colorsteps.length === 2) return;
9754+
this.colorsteps.splice(index, 1);
9755+
var currentStep = this.colorsteps[index];
9756+
var currentIndex = index;
9757+
if (!currentStep) {
9758+
currentStep = this.colorsteps[index - 1];
9759+
currentIndex = index - 1;
9760+
}
9761+
9762+
if (currentStep) {
9763+
this.selectStep(currentIndex);
9764+
}
9765+
this.refresh();
9766+
this.updateData();
9767+
}
97449768
}, {
97459769
key: "selectStep",
97469770
value: function selectStep(index) {
@@ -9761,14 +9785,20 @@ var GradientEditor = function (_UIElement) {
97619785
value: function mousedown$stepListStep(e) {
97629786
var index = +e.$delegateTarget.attr('data-index');
97639787

9764-
this.selectStep(index);
9788+
if (e.altKey) {
9789+
this.removeStep(index);
9790+
// return false;
9791+
} else {
97659792

9766-
this.startXY = e.xy;
9767-
this.$store.emit('selectColorStep', this.currentStep.color);
9768-
this.refs.$cut.checked(this.currentStep.cut);
9769-
this.refs.$offset.val(this.currentStep.offset.value);
9770-
this.refs.$stepList.attr('data-selected-index', index);
9771-
this.cachedStepListRect = this.refs.$stepList.rect();
9793+
this.selectStep(index);
9794+
9795+
this.startXY = e.xy;
9796+
this.$store.emit('selectColorStep', this.currentStep.color);
9797+
this.refs.$cut.checked(this.currentStep.cut);
9798+
this.refs.$offset.val(this.currentStep.offset.value);
9799+
this.refs.$stepList.attr('data-selected-index', index);
9800+
this.cachedStepListRect = this.refs.$stepList.rect();
9801+
}
97729802
}
97739803
}, {
97749804
key: "getStepListRect",
@@ -9785,7 +9815,6 @@ var GradientEditor = function (_UIElement) {
97859815
}, {
97869816
key: 'mousemove document',
97879817
value: function mousemoveDocument(e) {
9788-
97899818
if (!this.startXY) return;
97909819

97919820
var dx = e.xy.x - this.startXY.x;
@@ -9832,6 +9861,15 @@ var GradientEditor = function (_UIElement) {
98329861
value: function getLinearGradient() {
98339862
var _this3 = this;
98349863

9864+
if (this.colorsteps.length === 0) {
9865+
return '';
9866+
}
9867+
9868+
if (this.colorsteps.length === 1) {
9869+
var colorstep = this.colorsteps[0];
9870+
return "linear-gradient(to right, " + colorstep.color + " " + colorstep.offset + ", " + colorstep.color + " 100%)";
9871+
}
9872+
98359873
return "linear-gradient(to right, " + this.colorsteps.map(function (it, index) {
98369874

98379875
if (it.cut) {
@@ -9975,6 +10013,7 @@ var LinearGradient = function (_Gradient) {
997510013
}, {
997610014
key: "toString",
997710015
value: function toString() {
10016+
if (this.colorsteps.length === 0) return '';
997810017
var colorString = this.getColorString();
997910018

998010019
var opt = '';
@@ -10109,6 +10148,7 @@ var RadialGradient = function (_Gradient) {
1010910148
}, {
1011010149
key: "toString",
1011110150
value: function toString() {
10151+
if (this.colorsteps.length === 0) return '';
1011210152
var colorString = this.getColorString();
1011310153
var json = this.json;
1011410154
var opt = '';
@@ -10267,6 +10307,7 @@ var ConicGradient = function (_Gradient) {
1026710307
}, {
1026810308
key: "getColorString",
1026910309
value: function getColorString() {
10310+
if (this.colorsteps.length === 0) return '';
1027010311
var colorsteps = this.colorsteps;
1027110312
if (!colorsteps) return '';
1027210313

‎dist/colorpicker.js

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5356,10 +5356,10 @@ var EventMachin = function () {
53565356
value: function checkEventType(e, eventObject) {
53575357
var _this8 = this;
53585358

5359-
var onlyControl = e.ctrlKey ? eventObject.isControl : true;
5360-
var onlyShift = e.shiftKey ? eventObject.isShift : true;
5361-
var onlyAlt = e.altKey ? eventObject.isAlt : true;
5362-
var onlyMeta = e.metaKey ? eventObject.isMeta : true;
5359+
var onlyControl = eventObject.isControl ? e.ctrlKey : true;
5360+
var onlyShift = eventObject.isShift ? e.shiftKey : true;
5361+
var onlyAlt = eventObject.isAlt ? e.altKey : true;
5362+
var onlyMeta = eventObject.isMeta ? e.metaKey : true;
53635363

53645364
var hasKeyCode = true;
53655365
if (eventObject.codes.length) {
@@ -9799,6 +9799,12 @@ var GradientEditor = function (_UIElement) {
97999799
offset: Length.percent(percent),
98009800
color: 'rgba(0, 0, 0, 1)'
98019801
});
9802+
} else {
9803+
this.colorsteps.push({
9804+
cut: false,
9805+
offset: Length.percent(0),
9806+
color: 'rgba(0, 0, 0, 1)'
9807+
});
98029808
}
98039809

98049810
this.refresh();
@@ -9821,6 +9827,24 @@ var GradientEditor = function (_UIElement) {
98219827
this.updateData();
98229828
}
98239829
}
9830+
}, {
9831+
key: "removeStep",
9832+
value: function removeStep(index) {
9833+
if (this.colorsteps.length === 2) return;
9834+
this.colorsteps.splice(index, 1);
9835+
var currentStep = this.colorsteps[index];
9836+
var currentIndex = index;
9837+
if (!currentStep) {
9838+
currentStep = this.colorsteps[index - 1];
9839+
currentIndex = index - 1;
9840+
}
9841+
9842+
if (currentStep) {
9843+
this.selectStep(currentIndex);
9844+
}
9845+
this.refresh();
9846+
this.updateData();
9847+
}
98249848
}, {
98259849
key: "selectStep",
98269850
value: function selectStep(index) {
@@ -9841,14 +9865,20 @@ var GradientEditor = function (_UIElement) {
98419865
value: function mousedown$stepListStep(e) {
98429866
var index = +e.$delegateTarget.attr('data-index');
98439867

9844-
this.selectStep(index);
9868+
if (e.altKey) {
9869+
this.removeStep(index);
9870+
// return false;
9871+
} else {
98459872

9846-
this.startXY = e.xy;
9847-
this.$store.emit('selectColorStep', this.currentStep.color);
9848-
this.refs.$cut.checked(this.currentStep.cut);
9849-
this.refs.$offset.val(this.currentStep.offset.value);
9850-
this.refs.$stepList.attr('data-selected-index', index);
9851-
this.cachedStepListRect = this.refs.$stepList.rect();
9873+
this.selectStep(index);
9874+
9875+
this.startXY = e.xy;
9876+
this.$store.emit('selectColorStep', this.currentStep.color);
9877+
this.refs.$cut.checked(this.currentStep.cut);
9878+
this.refs.$offset.val(this.currentStep.offset.value);
9879+
this.refs.$stepList.attr('data-selected-index', index);
9880+
this.cachedStepListRect = this.refs.$stepList.rect();
9881+
}
98529882
}
98539883
}, {
98549884
key: "getStepListRect",
@@ -9865,7 +9895,6 @@ var GradientEditor = function (_UIElement) {
98659895
}, {
98669896
key: 'mousemove document',
98679897
value: function mousemoveDocument(e) {
9868-
98699898
if (!this.startXY) return;
98709899

98719900
var dx = e.xy.x - this.startXY.x;
@@ -9912,6 +9941,15 @@ var GradientEditor = function (_UIElement) {
99129941
value: function getLinearGradient() {
99139942
var _this3 = this;
99149943

9944+
if (this.colorsteps.length === 0) {
9945+
return '';
9946+
}
9947+
9948+
if (this.colorsteps.length === 1) {
9949+
var colorstep = this.colorsteps[0];
9950+
return "linear-gradient(to right, " + colorstep.color + " " + colorstep.offset + ", " + colorstep.color + " 100%)";
9951+
}
9952+
99159953
return "linear-gradient(to right, " + this.colorsteps.map(function (it, index) {
99169954

99179955
if (it.cut) {
@@ -10055,6 +10093,7 @@ var LinearGradient = function (_Gradient) {
1005510093
}, {
1005610094
key: "toString",
1005710095
value: function toString() {
10096+
if (this.colorsteps.length === 0) return '';
1005810097
var colorString = this.getColorString();
1005910098

1006010099
var opt = '';
@@ -10189,6 +10228,7 @@ var RadialGradient = function (_Gradient) {
1018910228
}, {
1019010229
key: "toString",
1019110230
value: function toString() {
10231+
if (this.colorsteps.length === 0) return '';
1019210232
var colorString = this.getColorString();
1019310233
var json = this.json;
1019410234
var opt = '';
@@ -10347,6 +10387,7 @@ var ConicGradient = function (_Gradient) {
1034710387
}, {
1034810388
key: "getColorString",
1034910389
value: function getColorString() {
10390+
if (this.colorsteps.length === 0) return '';
1035010391
var colorsteps = this.colorsteps;
1035110392
if (!colorsteps) return '';
1035210393

‎dist/colorpicker.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@easylogic/colorpicker",
3-
"version": "1.9.61",
3+
"version": "1.9.62",
44
"description": "simple colorpicker used anywhere",
55
"main": "./dist/colorpicker.js",
66
"scripts": {

‎src/gradient/GradientEditor.js

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,13 @@ export default class GradientEditor extends UIElement {
274274
offset: Length.percent(percent),
275275
color: 'rgba(0, 0, 0, 1)'
276276
})
277-
}
277+
} else {
278+
this.colorsteps.push({
279+
cut: false,
280+
offset: Length.percent(0),
281+
color: 'rgba(0, 0, 0, 1)'
282+
})
283+
}
278284

279285
this.refresh();
280286
this.updateData();
@@ -298,6 +304,25 @@ export default class GradientEditor extends UIElement {
298304
}
299305
}
300306

307+
308+
removeStep(index) {
309+
if (this.colorsteps.length === 2) return;
310+
this.colorsteps.splice(index, 1);
311+
var currentStep = this.colorsteps[index]
312+
var currentIndex = index;
313+
if (!currentStep) {
314+
currentStep = this.colorsteps[index-1]
315+
currentIndex = index - 1;
316+
}
317+
318+
if (currentStep) {
319+
this.selectStep(currentIndex);
320+
}
321+
this.refresh();
322+
this.updateData();
323+
}
324+
325+
301326
selectStep(index) {
302327
this.index = index;
303328
this.currentStep = this.colorsteps[index];
@@ -318,14 +343,20 @@ export default class GradientEditor extends UIElement {
318343
'mousedown $stepList .step' (e) {
319344
var index = +e.$delegateTarget.attr('data-index')
320345

321-
this.selectStep(index);
346+
if (e.altKey) {
347+
this.removeStep(index);
348+
// return false;
349+
} else {
322350

323-
this.startXY = e.xy;
324-
this.$store.emit('selectColorStep', this.currentStep.color)
325-
this.refs.$cut.checked(this.currentStep.cut);
326-
this.refs.$offset.val(this.currentStep.offset.value);
327-
this.refs.$stepList.attr('data-selected-index', index);
328-
this.cachedStepListRect = this.refs.$stepList.rect();
351+
this.selectStep(index);
352+
353+
this.startXY = e.xy;
354+
this.$store.emit('selectColorStep', this.currentStep.color)
355+
this.refs.$cut.checked(this.currentStep.cut);
356+
this.refs.$offset.val(this.currentStep.offset.value);
357+
this.refs.$stepList.attr('data-selected-index', index);
358+
this.cachedStepListRect = this.refs.$stepList.rect();
359+
}
329360
}
330361

331362

@@ -341,7 +372,6 @@ export default class GradientEditor extends UIElement {
341372
}
342373

343374
'mousemove document' (e) {
344-
345375
if (!this.startXY) return;
346376

347377
var dx = e.xy.x - this.startXY.x;
@@ -388,6 +418,16 @@ export default class GradientEditor extends UIElement {
388418
}
389419

390420
getLinearGradient () {
421+
if (this.colorsteps.length === 0) {
422+
return '';
423+
}
424+
425+
if (this.colorsteps.length === 1) {
426+
var colorstep = this.colorsteps[0];
427+
return `linear-gradient(to right, ${colorstep.color} ${colorstep.offset}, ${colorstep.color} 100%)`
428+
}
429+
430+
391431
return `linear-gradient(to right, ${this.colorsteps.map((it, index) => {
392432
393433
if (it.cut) {

‎src/gradient/image-resource/ConicGradient.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export class ConicGradient extends Gradient {
4949
}
5050

5151
getColorString() {
52+
if(this.colorsteps.length === 0) return '';
5253
var colorsteps = this.colorsteps;
5354
if (!colorsteps) return '';
5455

‎src/gradient/image-resource/LinearGradient.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export class LinearGradient extends Gradient {
5050
}
5151

5252
toString() {
53+
if(this.colorsteps.length === 0) return '';
5354
var colorString = this.getColorString();
5455

5556
var opt = '';

‎src/gradient/image-resource/RadialGradient.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export class RadialGradient extends Gradient {
3737
}
3838

3939
toString() {
40+
if(this.colorsteps.length === 0) return '';
4041
var colorString = this.getColorString();
4142
var json = this.json;
4243
var opt = '';

‎src/util/EventMachin.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -279,10 +279,10 @@ export default class EventMachin {
279279
}
280280

281281
checkEventType (e, eventObject ) {
282-
var onlyControl = e.ctrlKey ? eventObject.isControl : true;
283-
var onlyShift = e.shiftKey ? eventObject.isShift : true;
284-
var onlyAlt = e.altKey ? eventObject.isAlt : true;
285-
var onlyMeta = e.metaKey ? eventObject.isMeta : true;
282+
var onlyControl = eventObject.isControl ? e.ctrlKey : true;
283+
var onlyShift = eventObject.isShift ? e.shiftKey : true;
284+
var onlyAlt = eventObject.isAlt ? e.altKey : true;
285+
var onlyMeta = eventObject.isMeta ? e.metaKey : true;
286286

287287
var hasKeyCode = true;
288288
if (eventObject.codes.length) {

0 commit comments

Comments
 (0)