From 119d8f909f40b692edc3fa75b8d5a5bad0b5e11e Mon Sep 17 00:00:00 2001
From: "Tod E. Kurt" <tod@todbot.com>
Date: Mon, 14 Sep 2020 22:21:17 -0700
Subject: [PATCH] for issue #148. Allow Delete/Backspace key to delete color
 pattern swatches / spots when in edit mode

---
 app/components/gui/patternView.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/gui/patternView.js b/app/components/gui/patternView.js
index 350bade..ac75874 100644
--- a/app/components/gui/patternView.js
+++ b/app/components/gui/patternView.js
@@ -149,6 +149,14 @@ var PatternView = React.createClass({
         var pattern = this.state.pattern;
         this.props.onDeletePattern( pattern.id );
     },
+    handleSwatchKeyDown: function(e,i) {
+      log.msg("handleSwatchKeyDown", i, e.key)
+      if( this.state.editing && (e.key === "Backspace" || e.key === "Delete") ) {
+        var pattern = this.state.pattern;
+        delete pattern.colors[this.state.activeSwatch];
+        this.setState({pattern: pattern});
+      }
+    },
 
     render: function() {
         var pattern = this.state.pattern;
@@ -206,9 +214,11 @@ var PatternView = React.createClass({
             if( isEditing && i === this.state.activeSwatch ) {
                  mystyle.borderColor='#333'; mystyle.borderWidth = 3;
             }
+            mystyle.outline = 0
             return (
-                <div style={mystyle} key={i}
+                <div style={mystyle} key={i} tabIndex={-1}
                     onClick={this.onSwatchClick.bind(this, i)}
+                    onKeyDown={(e) => this.handleSwatchKeyDown(e,i)}
                     onDoubleClick={this.onSwatchDoubleClick.bind(this,i)}></div>
              );
         };