Support to remove colorstop with alt key

easylogic · Jul 12, 2019 · 322a28b · 322a28b
1 parent cffd643
commit 322a28b
Show file tree

Hide file tree

Showing 9 changed files with 164 additions and 39 deletions.
diff --git a/addon/colorpicker.js b/addon/colorpicker.js
@@ -5277,10 +5277,10 @@ var EventMachin = function () {
     value: function checkEventType(e, eventObject) {
       var _this8 = this;
 
-      var onlyControl = e.ctrlKey ? eventObject.isControl : true;
-      var onlyShift = e.shiftKey ? eventObject.isShift : true;
-      var onlyAlt = e.altKey ? eventObject.isAlt : true;
-      var onlyMeta = e.metaKey ? eventObject.isMeta : true;
+      var onlyControl = eventObject.isControl ? e.ctrlKey : true;
+      var onlyShift = eventObject.isShift ? e.shiftKey : true;
+      var onlyAlt = eventObject.isAlt ? e.altKey : true;
+      var onlyMeta = eventObject.isMeta ? e.metaKey : true;
 
       var hasKeyCode = true;
       if (eventObject.codes.length) {
@@ -9719,6 +9719,12 @@ var GradientEditor = function (_UIElement) {
           offset: Length.percent(percent),
           color: 'rgba(0, 0, 0, 1)'
         });
+      } else {
+        this.colorsteps.push({
+          cut: false,
+          offset: Length.percent(0),
+          color: 'rgba(0, 0, 0, 1)'
+        });
       }
 
       this.refresh();
@@ -9741,6 +9747,24 @@ var GradientEditor = function (_UIElement) {
         this.updateData();
       }
     }
+  }, {
+    key: "removeStep",
+    value: function removeStep(index) {
+      if (this.colorsteps.length === 2) return;
+      this.colorsteps.splice(index, 1);
+      var currentStep = this.colorsteps[index];
+      var currentIndex = index;
+      if (!currentStep) {
+        currentStep = this.colorsteps[index - 1];
+        currentIndex = index - 1;
+      }
+
+      if (currentStep) {
+        this.selectStep(currentIndex);
+      }
+      this.refresh();
+      this.updateData();
+    }
   }, {
     key: "selectStep",
     value: function selectStep(index) {
@@ -9761,14 +9785,20 @@ var GradientEditor = function (_UIElement) {
     value: function mousedown$stepListStep(e) {
       var index = +e.$delegateTarget.attr('data-index');
 
-      this.selectStep(index);
+      if (e.altKey) {
+        this.removeStep(index);
+        // return false; 
+      } else {
 
-      this.startXY = e.xy;
-      this.$store.emit('selectColorStep', this.currentStep.color);
-      this.refs.$cut.checked(this.currentStep.cut);
-      this.refs.$offset.val(this.currentStep.offset.value);
-      this.refs.$stepList.attr('data-selected-index', index);
-      this.cachedStepListRect = this.refs.$stepList.rect();
+        this.selectStep(index);
+
+        this.startXY = e.xy;
+        this.$store.emit('selectColorStep', this.currentStep.color);
+        this.refs.$cut.checked(this.currentStep.cut);
+        this.refs.$offset.val(this.currentStep.offset.value);
+        this.refs.$stepList.attr('data-selected-index', index);
+        this.cachedStepListRect = this.refs.$stepList.rect();
+      }
     }
   }, {
     key: "getStepListRect",
@@ -9785,7 +9815,6 @@ var GradientEditor = function (_UIElement) {
   }, {
     key: 'mousemove document',
     value: function mousemoveDocument(e) {
-
       if (!this.startXY) return;
 
       var dx = e.xy.x - this.startXY.x;
@@ -9832,6 +9861,15 @@ var GradientEditor = function (_UIElement) {
     value: function getLinearGradient() {
       var _this3 = this;
 
+      if (this.colorsteps.length === 0) {
+        return '';
+      }
+
+      if (this.colorsteps.length === 1) {
+        var colorstep = this.colorsteps[0];
+        return "linear-gradient(to right, " + colorstep.color + " " + colorstep.offset + ", " + colorstep.color + " 100%)";
+      }
+
       return "linear-gradient(to right, " + this.colorsteps.map(function (it, index) {
 
         if (it.cut) {
@@ -9975,6 +10013,7 @@ var LinearGradient = function (_Gradient) {
   }, {
     key: "toString",
     value: function toString() {
+      if (this.colorsteps.length === 0) return '';
       var colorString = this.getColorString();
 
       var opt = '';
@@ -10109,6 +10148,7 @@ var RadialGradient = function (_Gradient) {
   }, {
     key: "toString",
     value: function toString() {
+      if (this.colorsteps.length === 0) return '';
       var colorString = this.getColorString();
       var json = this.json;
       var opt = '';
@@ -10267,6 +10307,7 @@ var ConicGradient = function (_Gradient) {
   }, {
     key: "getColorString",
     value: function getColorString() {
+      if (this.colorsteps.length === 0) return '';
       var colorsteps = this.colorsteps;
       if (!colorsteps) return '';
 

diff --git a/dist/colorpicker.js b/dist/colorpicker.js
@@ -5356,10 +5356,10 @@ var EventMachin = function () {
     value: function checkEventType(e, eventObject) {
       var _this8 = this;
 
-      var onlyControl = e.ctrlKey ? eventObject.isControl : true;
-      var onlyShift = e.shiftKey ? eventObject.isShift : true;
-      var onlyAlt = e.altKey ? eventObject.isAlt : true;
-      var onlyMeta = e.metaKey ? eventObject.isMeta : true;
+      var onlyControl = eventObject.isControl ? e.ctrlKey : true;
+      var onlyShift = eventObject.isShift ? e.shiftKey : true;
+      var onlyAlt = eventObject.isAlt ? e.altKey : true;
+      var onlyMeta = eventObject.isMeta ? e.metaKey : true;
 
       var hasKeyCode = true;
       if (eventObject.codes.length) {
@@ -9799,6 +9799,12 @@ var GradientEditor = function (_UIElement) {
           offset: Length.percent(percent),
           color: 'rgba(0, 0, 0, 1)'
         });
+      } else {
+        this.colorsteps.push({
+          cut: false,
+          offset: Length.percent(0),
+          color: 'rgba(0, 0, 0, 1)'
+        });
       }
 
       this.refresh();
@@ -9821,6 +9827,24 @@ var GradientEditor = function (_UIElement) {
         this.updateData();
       }
     }
+  }, {
+    key: "removeStep",
+    value: function removeStep(index) {
+      if (this.colorsteps.length === 2) return;
+      this.colorsteps.splice(index, 1);
+      var currentStep = this.colorsteps[index];
+      var currentIndex = index;
+      if (!currentStep) {
+        currentStep = this.colorsteps[index - 1];
+        currentIndex = index - 1;
+      }
+
+      if (currentStep) {
+        this.selectStep(currentIndex);
+      }
+      this.refresh();
+      this.updateData();
+    }
   }, {
     key: "selectStep",
     value: function selectStep(index) {
@@ -9841,14 +9865,20 @@ var GradientEditor = function (_UIElement) {
     value: function mousedown$stepListStep(e) {
       var index = +e.$delegateTarget.attr('data-index');
 
-      this.selectStep(index);
+      if (e.altKey) {
+        this.removeStep(index);
+        // return false; 
+      } else {
 
-      this.startXY = e.xy;
-      this.$store.emit('selectColorStep', this.currentStep.color);
-      this.refs.$cut.checked(this.currentStep.cut);
-      this.refs.$offset.val(this.currentStep.offset.value);
-      this.refs.$stepList.attr('data-selected-index', index);
-      this.cachedStepListRect = this.refs.$stepList.rect();
+        this.selectStep(index);
+
+        this.startXY = e.xy;
+        this.$store.emit('selectColorStep', this.currentStep.color);
+        this.refs.$cut.checked(this.currentStep.cut);
+        this.refs.$offset.val(this.currentStep.offset.value);
+        this.refs.$stepList.attr('data-selected-index', index);
+        this.cachedStepListRect = this.refs.$stepList.rect();
+      }
     }
   }, {
     key: "getStepListRect",
@@ -9865,7 +9895,6 @@ var GradientEditor = function (_UIElement) {
   }, {
     key: 'mousemove document',
     value: function mousemoveDocument(e) {
-
       if (!this.startXY) return;
 
       var dx = e.xy.x - this.startXY.x;
@@ -9912,6 +9941,15 @@ var GradientEditor = function (_UIElement) {
     value: function getLinearGradient() {
       var _this3 = this;
 
+      if (this.colorsteps.length === 0) {
+        return '';
+      }
+
+      if (this.colorsteps.length === 1) {
+        var colorstep = this.colorsteps[0];
+        return "linear-gradient(to right, " + colorstep.color + " " + colorstep.offset + ", " + colorstep.color + " 100%)";
+      }
+
       return "linear-gradient(to right, " + this.colorsteps.map(function (it, index) {
 
         if (it.cut) {
@@ -10055,6 +10093,7 @@ var LinearGradient = function (_Gradient) {
   }, {
     key: "toString",
     value: function toString() {
+      if (this.colorsteps.length === 0) return '';
       var colorString = this.getColorString();
 
       var opt = '';
@@ -10189,6 +10228,7 @@ var RadialGradient = function (_Gradient) {
   }, {
     key: "toString",
     value: function toString() {
+      if (this.colorsteps.length === 0) return '';
       var colorString = this.getColorString();
       var json = this.json;
       var opt = '';
@@ -10347,6 +10387,7 @@ var ConicGradient = function (_Gradient) {
   }, {
     key: "getColorString",
     value: function getColorString() {
+      if (this.colorsteps.length === 0) return '';
       var colorsteps = this.colorsteps;
       if (!colorsteps) return '';
 

diff --git a/dist/colorpicker.min.js b/dist/colorpicker.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@easylogic/colorpicker",
-  "version": "1.9.61",
+  "version": "1.9.62",
   "description": "simple colorpicker used anywhere",
   "main": "./dist/colorpicker.js",
   "scripts": {

diff --git a/src/gradient/GradientEditor.js b/src/gradient/GradientEditor.js
@@ -274,7 +274,13 @@ export default class GradientEditor extends UIElement  {
         offset: Length.percent(percent),
         color: 'rgba(0, 0, 0, 1)'
       })      
-    }
+    } else {
+      this.colorsteps.push({
+        cut: false, 
+        offset: Length.percent(0),
+        color: 'rgba(0, 0, 0, 1)'
+      })            
+    } 
 
     this.refresh();
     this.updateData();
@@ -298,6 +304,25 @@ export default class GradientEditor extends UIElement  {
     } 
   }
 
+
+  removeStep(index) {
+    if (this.colorsteps.length === 2) return; 
+    this.colorsteps.splice(index, 1);
+    var currentStep = this.colorsteps[index]
+    var currentIndex = index; 
+    if (!currentStep) {
+      currentStep = this.colorsteps[index-1]
+      currentIndex = index - 1; 
+    }
+
+    if (currentStep) {
+      this.selectStep(currentIndex);
+    }
+    this.refresh();
+    this.updateData();          
+  }
+
+
   selectStep(index) {
     this.index = index; 
     this.currentStep = this.colorsteps[index];
@@ -318,14 +343,20 @@ export default class GradientEditor extends UIElement  {
   'mousedown $stepList .step' (e) {
     var index = +e.$delegateTarget.attr('data-index')
 
-    this.selectStep(index);
+    if (e.altKey) {
+      this.removeStep(index);
+      // return false; 
+    } else {
 
-    this.startXY = e.xy;
-    this.$store.emit('selectColorStep', this.currentStep.color)
-    this.refs.$cut.checked(this.currentStep.cut);
-    this.refs.$offset.val(this.currentStep.offset.value);
-    this.refs.$stepList.attr('data-selected-index', index);
-    this.cachedStepListRect = this.refs.$stepList.rect();
+      this.selectStep(index);
+
+      this.startXY = e.xy;
+      this.$store.emit('selectColorStep', this.currentStep.color)
+      this.refs.$cut.checked(this.currentStep.cut);
+      this.refs.$offset.val(this.currentStep.offset.value);
+      this.refs.$stepList.attr('data-selected-index', index);
+      this.cachedStepListRect = this.refs.$stepList.rect();
+    }
   }
 
 
@@ -341,7 +372,6 @@ export default class GradientEditor extends UIElement  {
   }
 
   'mousemove document' (e) { 
-
     if (!this.startXY) return; 
 
     var dx = e.xy.x - this.startXY.x;
@@ -388,6 +418,16 @@ export default class GradientEditor extends UIElement  {
   }
 
   getLinearGradient () {
+    if (this.colorsteps.length === 0) {
+      return '';
+    }
+
+    if (this.colorsteps.length === 1) {
+      var colorstep = this.colorsteps[0];
+      return `linear-gradient(to right, ${colorstep.color} ${colorstep.offset}, ${colorstep.color} 100%)`
+    }
+
+
     return `linear-gradient(to right, ${this.colorsteps.map((it, index) => {
 
       if (it.cut) {

diff --git a/src/gradient/image-resource/ConicGradient.js b/src/gradient/image-resource/ConicGradient.js
@@ -49,6 +49,7 @@ export class ConicGradient extends Gradient {
   }
 
   getColorString() {
+    if(this.colorsteps.length === 0) return '';        
     var colorsteps = this.colorsteps;
     if (!colorsteps) return '';
 

diff --git a/src/gradient/image-resource/LinearGradient.js b/src/gradient/image-resource/LinearGradient.js
@@ -50,6 +50,7 @@ export class LinearGradient extends Gradient {
   }
 
   toString() {
+    if(this.colorsteps.length === 0) return '';        
     var colorString = this.getColorString();
 
     var opt = '';

diff --git a/src/gradient/image-resource/RadialGradient.js b/src/gradient/image-resource/RadialGradient.js
@@ -37,6 +37,7 @@ export class RadialGradient extends Gradient {
   }
 
   toString() {
+    if(this.colorsteps.length === 0) return '';        
     var colorString = this.getColorString();
     var json = this.json;
     var opt = '';

diff --git a/src/util/EventMachin.js b/src/util/EventMachin.js
@@ -279,10 +279,10 @@ export default class EventMachin {
   }
 
   checkEventType (e, eventObject ) {
-    var onlyControl = e.ctrlKey ? eventObject.isControl : true;
-    var onlyShift = e.shiftKey ? eventObject.isShift : true; 
-    var onlyAlt = e.altKey ? eventObject.isAlt : true; 
-    var onlyMeta = e.metaKey ? eventObject.isMeta : true; 
+    var onlyControl = eventObject.isControl ? e.ctrlKey : true;
+    var onlyShift = eventObject.isShift ? e.shiftKey  : true; 
+    var onlyAlt = eventObject.isAlt ? e.altKey : true; 
+    var onlyMeta = eventObject.isMeta ? e.metaKey : true; 
 
     var hasKeyCode = true; 
     if (eventObject.codes.length) {