From bdb51c478c1907377cc7ba66ee72f94cdefba95f Mon Sep 17 00:00:00 2001
From: JFH <20402845+jfhenon@users.noreply.github.com>
Date: Fri, 11 Dec 2020 00:08:58 +0100
Subject: [PATCH] fix(blur)

---
 src/editor/index.html  | 14 ++---------
 src/editor/svgedit.css | 19 +++++++++------
 src/editor/svgedit.js  | 53 +++++++-----------------------------------
 3 files changed, 22 insertions(+), 64 deletions(-)

diff --git a/src/editor/index.html b/src/editor/index.html
index 33f40177..0c5b5057 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -123,18 +123,8 @@
           </div>
           <se-spin-input size="3" id="angle" min=-180 max=180 step=5 src="./images/angle.svg"
             title="Change rotation angle"></se-spin-input>
-          <div class="toolset" id="tool_blur" title="Change gaussian blur value">
-            <se-spin-input size="2" id="blur" min=0 max=10 step=0.1 src="./images/blur.svg"
-              title="Change gaussian blur value"></se-spin-input>
-            <div id="blur_dropdown" class="dropdown">
-              <button></button>
-              <ul>
-                <li class="special">
-                  <div id="blur_slider"></div>
-                </li>
-              </ul>
-            </div>
-          </div>
+          <se-spin-input size="2" id="blur" min=0 max=100 step=5 src="./images/blur.svg"
+            title="Change gaussian blur value"></se-spin-input>
           <div class="dropdown toolset" id="tool_position" title="Align Element to Page">
             <div id="cur_position" class="icon_label"></div>
             <button></button>
diff --git a/src/editor/svgedit.css b/src/editor/svgedit.css
index a9c6e8fe..ae37168c 100644
--- a/src/editor/svgedit.css
+++ b/src/editor/svgedit.css
@@ -705,14 +705,19 @@ input[type=text] {
 
 #tools_bottom {
   position: absolute;
-  bottom: 0;
   left: 40px;
-  right: 20px;
-  display: flex;
-  flex-flow: row nowrap;
-  overflow-x: auto;
-  align-items: center;
-  justify-content: space-between;
+  right: 0;
+  bottom: 0;
+  height: 40px;
+  overflow: visible;
+}
+
+#tools_bottom * {
+  float: left;
+}
+
+#palette {
+  float: right;
 }
 
 .dropdown li.tool_button {
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 0d4cc248..9a8a34bc 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -1726,9 +1726,8 @@ editor.init = () => {
       const angle = svgCanvas.getRotationAngle(elem);
       $('#angle').val(angle);
 
-      const blurval = svgCanvas.getBlur(elem);
-      $('#blur').val(blurval);
-      $('#blur_slider').slider('option', 'value', blurval);
+      const blurval = svgCanvas.getBlur(elem) * 10;
+      $id('blur').value = blurval;
 
       if (svgCanvas.addedNew) {
         if (elname === 'image' && svgCanvas.getMode() === 'image') {
@@ -2646,9 +2645,6 @@ editor.init = () => {
     return new $.jGraduate.Paint(opts);
   };
 
-  // $('#text').focus(function () { textBeingEntered = true; });
-  // $('#text').blur(function () { textBeingEntered = false; });
-
   // bind the selected event to our function that handles updates to the UI
   svgCanvas.bind('selected', selectedChanged);
   svgCanvas.bind('transition', elementTransition);
@@ -2730,7 +2726,7 @@ editor.init = () => {
   /**
   * @type {module}
   */
-  const changeRotationAngle = function (e) {
+  const changeRotationAngle = (e) => {
     svgCanvas.setRotationAngle(e.target.value);
     $('#tool_reorient').toggleClass('disabled', Number.parseInt(e.target.value) === 0);
   };
@@ -2750,24 +2746,11 @@ editor.init = () => {
   };
 
   /**
-  * @param {PlainObject} ctl
-  * @param {string} [val=ctl.value]
-  * @param {boolean} noUndo
+  * @param {PlainObject} e
   * @returns {void}
   */
-  const changeBlur = function (ctl, val, noUndo) {
-    if (Utils.isNullish(val)) { val = ctl.value; }
-    $('#blur').val(val);
-    let complete = false;
-    if (!ctl || !ctl.handle) {
-      $('#blur_slider').slider('option', 'value', val);
-      complete = true;
-    }
-    if (noUndo) {
-      svgCanvas.setBlurNoUndo(val);
-    } else {
-      svgCanvas.setBlur(val, complete);
-    }
+  const changeBlur = (e) => {
+    svgCanvas.setBlur(e.target.value / 10, true);
   };
 
   $('#stroke_style').change(function () {
@@ -2873,7 +2856,6 @@ editor.init = () => {
     } else {
       svgCanvas.changeSelectedAttribute(attr, val);
     }
-    // e.target.blur();
     return true;
   };
 
@@ -3135,26 +3117,6 @@ editor.init = () => {
     }
   });
 
-  editor.addDropDown('#blur_dropdown', $.noop);
-
-  let slideStart = false;
-  $('#blur_slider').slider({
-    max: 10,
-    step: 0.1,
-    stop (evt, ui) {
-      slideStart = false;
-      changeBlur(ui);
-      $('#blur_dropdown li').show();
-      $(window).mouseup();
-    },
-    start () {
-      slideStart = true;
-    },
-    slide (evt, ui) {
-      changeBlur(ui, null, slideStart);
-    }
-  });
-
   addAltDropDown('#stroke_linecap', '#linecap_opts', function () {
     setStrokeOpt(this, true);
   }, {dropUp: true});
@@ -4208,7 +4170,7 @@ editor.init = () => {
   // Use this to test support for blur element. Seems to work to test support in Webkit
   const blurTest = svgdocbox.createElementNS(NS.SVG, 'feGaussianBlur');
   if (blurTest.stdDeviationX === undefined) {
-    $('#tool_blur').hide();
+    $('#blur').hide();
   }
   $(blurTest).remove();
 
@@ -4555,6 +4517,7 @@ editor.init = () => {
     $id('path_node_x').addEventListener('change', (e) => attrChanger(e));
     $id('path_node_y').addEventListener('change', (e) => attrChanger(e));
     $id('angle').addEventListener('change', (e) => changeRotationAngle(e));
+    $id('blur').addEventListener('change', (e) => changeBlur(e));
     $id('stroke_width').addEventListener('change', (e) => changeStrokeWidth(e));
     $id('rect_rx').addEventListener('change', (e) => changeRectRadius(e));
     $id('font_size').addEventListener('change', (e) => changeFontSize(e));