From baca65b70bff7dacf8c03c60b9b947e96fcdeb1e Mon Sep 17 00:00:00 2001
From: Mark MacKay <mark@duopixel.com>
Date: Wed, 16 Jun 2021 17:14:27 -0500
Subject: [PATCH] changes

---
 src/css/color-tool.css |  4 ++--
 src/js/Keyboard.js     |  1 +
 src/js/PaintBox.js     | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/css/color-tool.css b/src/css/color-tool.css
index 0a74e2d..1d4b11b 100644
--- a/src/css/color-tool.css
+++ b/src/css/color-tool.css
@@ -55,8 +55,8 @@
 }
 
 .color_block svg {
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
 }
 
  #tool_stroke .color_block > div {
diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js
index 3437b33..d1075d2 100644
--- a/src/js/Keyboard.js
+++ b/src/js/Keyboard.js
@@ -31,6 +31,7 @@ MD.Keyboard = function(){
     "cmd_o": { name: "Open SVG File",       cb: ()=> editor.import.open()},
     "cmd_k": { name: "Place image",         cb: ()=> editor.import.place()},
     "backspace": { name: "Delete",          cb: ()=> editor.deleteSelected()},
+    "delete":    { name: "Delete",          cb: ()=> editor.deleteSelected()},
     "ctrl_arrowleft":        { name: "Rotate -1deg",  cb: ()=> editor.rotateSelected(0,1)},
     "ctrl_arrowright":       { name: "Rotate +1deg",  cb: ()=> editor.rotateSelected(1,1)},
     "ctrl_shift_arrowleft":  { name: "Rotate -5deg",  cb: ()=> editor.rotateSelected(0,5)},
diff --git a/src/js/PaintBox.js b/src/js/PaintBox.js
index ef19947..3b8ec72 100644
--- a/src/js/PaintBox.js
+++ b/src/js/PaintBox.js
@@ -81,6 +81,20 @@ MD.PaintBox = function(container, type){
         this.grad = this.defs.appendChild(paint[ptype]);
         var id = this.grad.id = 'gradbox_' + this.type;
         fillAttr = "url(#" + id + ')';
+        if (this.grad.getAttribute('gradientUnits') === "userSpaceOnUse") {
+          const box = $("#tool_" + this.type);
+          const width = box.width();
+          const height = box.height();
+          const selectedElement = svgCanvas.getSelectedElems().filter(Boolean)[0];
+          if (!selectedElement) return;
+          const bbox = selectedElement.getBBox();
+          const rRatio = this.grad.getAttribute("r") / (bbox.width/2);
+          const cxRatio = this.grad.getAttribute("cx") / (bbox.width);
+          const cyRatio = this.grad.getAttribute("cy") / (bbox.height);
+          this.grad.setAttribute("r", width/2*rRatio);
+          this.grad.setAttribute("cx", cxRatio * width/2);
+          this.grad.setAttribute("cy", cyRatio * height/2);
+        }
     }
     this.rect.setAttribute('fill', fillAttr);
     this.rect.setAttribute('opacity', opac);