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

---
 src/css/button.css             |  1 +
 src/index.html                 | 26 ++++++++++++++------------
 src/js/PaintBox.js             |  5 +++--
 src/js/Panel.js                |  3 +++
 src/js/lib/jquery.jgraduate.js | 23 +++++++++++++++++------
 src/js/start.js                |  6 +++---
 6 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/css/button.css b/src/css/button.css
index 2d48a37..21d7a70 100644
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -16,6 +16,7 @@
   padding: 0 var(--x4);
   display: inline-block;
   font-weight: bold;
+  background-color: var(--z1);
 }
 
 .button:hover {
diff --git a/src/index.html b/src/index.html
index 12b137b..ffd9dce 100644
--- a/src/index.html
+++ b/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"/>
@@ -428,17 +428,18 @@
   </div>
   
   <div id="g_panel" class="context_panel clearfix">
-      <h4>Group</h4>
-      <div class="draginputs">
-        <label>
-          <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
-          <span>X</span>
-        </label>
-        <label>
-          <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
-          <span>Y</span>
-        </label>
+    <h4>Group</h4>
+    <div class="draginputs">
+      <label>
+        <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
+        <span>X</span>
+      </label>
+      <label>
+        <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
+        <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>
diff --git a/src/js/PaintBox.js b/src/js/PaintBox.js
index 3b8ec72..f47e3d8 100644
--- a/src/js/PaintBox.js
+++ b/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.linearGradient) paint.linearGradient = paint.linearGradient.outerHTML
+        //if (paint.radialGradient) paint.radialGradient = paint.radialGradient.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);
diff --git a/src/js/Panel.js b/src/js/Panel.js
index 7b8cb21..fa8e40a 100644
--- a/src/js/Panel.js
+++ b/src/js/Panel.js
@@ -86,6 +86,9 @@ MD.Panel = function(){
     $("#tool_unlink_use").on("click", function(){
       svgCanvas.ungroupSelectedElement();
     });
+
+    $('#button_group').on("click", editor.groupSelected);
+    $('#button_ungroup').on("click", editor.ungroupSelected);
     
 
     function show(elem) {
diff --git a/src/js/lib/jquery.jgraduate.js b/src/js/lib/jquery.jgraduate.js
index f652bf7..b836730 100644
--- a/src/js/lib/jquery.jgraduate.js
+++ b/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) {
-              this.value = 0.0; 
-            } else if(this.value > 1) {
-              this.value = 1.0;
-            }
+            // if (isNaN(parseFloat(this.value)) || this.value < 0) {
+            //   this.value = 0.0; 
+            // } else if(this.value > 1) {
+            //   this.value = 1.0;
+            // }
             
             if(!(attr[0] === 'f' && !showFocus)) {
               if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
diff --git a/src/js/start.js b/src/js/start.js
index 5bebe0a..cfaa800 100644
--- a/src/js/start.js
+++ b/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.stroke.setPaint(state.get("canvasStroke"));
-editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
+//editor.paintBox.fill.setPaint(state.get("canvasFill"));
+//editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
+//editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
 document.body.classList.remove("loading");
\ No newline at end of file