changes

src/css/button.css

@@ -16,6 +16,7 @@
   padding: 0 var(--x4);
   display: inline-block;
   font-weight: bold;
+  background-color: var(--z1);
 }
 
 .button:hover {

src/index.html

@@ -12,6 +12,7 @@
 
   <!-- build:css all.css -->
   <link rel="stylesheet" href="css/base.css" type="text/css"/>
+  <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
   <link rel="stylesheet" href="css/jpicker.css" type="text/css"/>
   <link rel="stylesheet" href="css/jgraduate.css" type="text/css"/>
   <link rel="stylesheet" href="css/fonts.css" type="text/css"/>
@@ -27,7 +28,6 @@
   <link rel="stylesheet" href="css/source.css" type="text/css"/>
   <link rel="stylesheet" href="css/keyboard.css" type="text/css"/>
   <link rel="stylesheet" href="css/dialog.css" type="text/css"/>
-  <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
   <link rel="stylesheet" href="css/app.css" type="text/css"/>
   <link rel="stylesheet" href="css/tools.css" type="text/css"/>
   <link rel="stylesheet" href="css/button.css" type="text/css"/>
@@ -439,6 +439,7 @@
         <span>Y</span>
       </label>
     </div>
+    <div class="button full" title="Ungroup Elements" id="button_ungroup">Ungroup</div>
   </div>
   
   <div id="path_node_panel" class="context_panel clearfix">
@@ -455,7 +456,7 @@
       </label>
       
       <div id="segment_type" class="draginput label">
-        <span>Segment Type</span>
+        <span>Seg Type</span>
         <select id="seg_type" data-title="Change Segment type">
           <option id="straight_segments" selected="selected" value="4">Straight</option>
           <option id="curve_segments" value="6">Curve</option>
@@ -590,6 +591,7 @@
         </div>
     </div>
     <div class="clearfix"></div>
+    <div class="button full" id="button_group">Group Elements</div>
     <div class="button full" id="tool_text_on_path" title="Place text on path">Place text on path</div>
 
   </div>

src/js/PaintBox.js

@@ -29,8 +29,8 @@ MD.PaintBox = function(container, type){
         paint = new $.jGraduate.Paint(p);
         editor.paintBox[picker].setPaint(paint, true);
         svgCanvas.setPaint(picker, paint);
-        if (paint.radialGradient) paint.radialGradient = paint.radialGradient.outerHTML
+        //if (paint.radialGradient) paint.radialGradient = paint.radialGradient.outerHTML
-        if (paint.linearGradient) paint.linearGradient = paint.linearGradient.outerHTML
+        //if (paint.linearGradient) paint.linearGradient = paint.linearGradient.outerHTML
         if (picker === "fill") state.set("canvasFill", paint);
         if (picker === "stroke") state.set("canvasStroke", paint);
         if (picker === "canvas") state.set("canvasBackground", paint);
@@ -91,6 +91,7 @@ MD.PaintBox = function(container, type){
           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.removeAttribute("gradientTransform");
           this.grad.setAttribute("r", width/2*rRatio);
           this.grad.setAttribute("cx", cxRatio * width/2);
           this.grad.setAttribute("cy", cyRatio * height/2);

src/js/Panel.js

@@ -87,6 +87,9 @@ MD.Panel = function(){
       svgCanvas.ungroupSelectedElement();
     });
 
+    $('#button_group').on("click", editor.groupSelected);
+    $('#button_ungroup').on("click", editor.ungroupSelected);
+    
 
     function show(elem) {
       $('.context_panel').hide();

src/js/lib/jquery.jgraduate.js

@@ -76,7 +76,18 @@ $.jGraduate = {
               this.linearGradient = options.copy.linearGradient.cloneNode(true);
               break;
             case "radialGradient":
-              this.radialGradient = options.copy.radialGradient.cloneNode(true);
+              const clone = options.copy.radialGradient.cloneNode(true);
+              
+              if (clone.getAttribute('gradientUnits') === "userSpaceOnUse") {
+                // todo hardcoded dimensions
+                const rRatio = (256/2) / clone.getAttribute("r");
+                const cxRatio = (256/2) / clone.getAttribute("cx");
+                const cyRatio = (256/2) /clone.getAttribute("cy");
+                clone.setAttribute("r", rRatio * 22/2 );
+                clone.setAttribute("cx", cxRatio * 22/2);
+                clone.setAttribute("cy", cyRatio * 22/2);
+              }
+              this.radialGradient = clone;
               break;
           }
         }
@@ -476,11 +487,11 @@ jQuery.fn.jGraduate =
           .val(attrval)
           .change(function() {
             // TODO: Support values < 0 and > 1 (zoomable preview?)
-            if (isNaN(parseFloat(this.value)) || this.value < 0) {
+            // if (isNaN(parseFloat(this.value)) || this.value < 0) {
-              this.value = 0.0; 
+            //   this.value = 0.0; 
-            } else if(this.value > 1) {
+            // } else if(this.value > 1) {
-              this.value = 1.0;
+            //   this.value = 1.0;
-            }
+            // }
             
             if(!(attr[0] === 'f' && !showFocus)) {
               if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {

src/js/start.js

@@ -118,7 +118,7 @@ const eyedropper = svgCanvas.addExtension.apply(this, ["eyedropper", MD.Eyedropp
 state.set("canvasId", t("Untitled"));
 state.set("canvasMode", state.get("canvasMode"));
 svgCanvas.setSvgString(state.get("canvasContent"));
-editor.paintBox.fill.setPaint(state.get("canvasFill"));
+//editor.paintBox.fill.setPaint(state.get("canvasFill"));
-editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
+//editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
-editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
+//editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
 document.body.classList.remove("loading");