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);