From 9f7a370b9fa65ebb69b16a855718f34ee23d6f56 Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Tue, 17 Nov 2020 18:30:47 +0530
Subject: [PATCH] #se-input line, rectangel and coordinate related  input
 changes

---
 src/editor/components/seInput.js | 15 ++++++++++++-
 src/editor/images/height.svg     |  3 +++
 src/editor/images/width.svg      |  3 +++
 src/editor/index.html            | 38 +++++++-------------------------
 src/editor/svgedit.js            |  8 +++++++
 5 files changed, 36 insertions(+), 31 deletions(-)
 create mode 100644 src/editor/images/height.svg
 create mode 100644 src/editor/images/width.svg

diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js
index 96d58991..cf695adf 100644
--- a/src/editor/components/seInput.js
+++ b/src/editor/components/seInput.js
@@ -31,7 +31,11 @@ class SeInput extends Input {
   get [internal.template] () {
     const result = super[internal.template];
     result.content.prepend(fragmentFrom.html`
-      <label><span><img src="./images/logo.svg" alt="icon" width="18" height="18"></img></span></label>`.cloneNode(true));
+      <label>
+        <span class="icon_label">
+          <img src="./images/logo.svg" alt="icon" width="18" height="18" />
+        </span>
+      </label>`.cloneNode(true));
     // change the style so it fits in our toolbar
     result.content.append(
       templateFrom.html`
@@ -40,6 +44,15 @@ class SeInput extends Input {
           margin-top: 5px;
           height: 23px;
         }
+        .icon_label {
+          float: left;
+          padding-top: 3px;
+          padding-right: 3px;
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          -webkit-box-sizing: border-box;
+          height: 0;
+        }        
         </style>
       `.content
     );
diff --git a/src/editor/images/height.svg b/src/editor/images/height.svg
new file mode 100644
index 00000000..7e9cfd2e
--- /dev/null
+++ b/src/editor/images/height.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path transform="rotate(90, 50, 50)" fill="#000000" stroke="#000000" stroke-width="8" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" id="svg_6"/>
+  </svg></svg>
\ No newline at end of file
diff --git a/src/editor/images/width.svg b/src/editor/images/width.svg
new file mode 100644
index 00000000..c5846bfb
--- /dev/null
+++ b/src/editor/images/width.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg_icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>
+  </svg></svg>
\ No newline at end of file
diff --git a/src/editor/index.html b/src/editor/index.html
index d5952d36..f4b2b441 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -173,12 +173,8 @@
             <button></button>
           </div>
           <div id="xy_panel" class="toolset">
-            <label>
-              x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x" />
-            </label>
-            <label>
-              y: <input id="selected_y" class="attr_changer" title="Change Y coordinate" size="3" data-attr="y" />
-            </label>
+            <se-input id="selected_x" data-attr="x" inputsize="41px" type="text" label="x:" title="Change X coordinate"></se-input>
+            <se-input id="selected_y" data-attr="y" inputsize="41px" type="text" label="y:" title="Change Y coordinate"></se-input>
           </div>
         </div>
         <!-- Buttons when multiple elements are selected -->
@@ -208,14 +204,8 @@
         </div>
         <div id="rect_panel">
           <div class="toolset">
-            <label id="rect_width_tool" title="Change rectangle width">
-              <span id="rwidthLabel" class="icon_label"></span>
-              <input id="rect_width" class="attr_changer" size="3" data-attr="width" />
-            </label>
-            <label id="rect_height_tool" title="Change rectangle height">
-              <span id="rheightLabel" class="icon_label"></span>
-              <input id="rect_height" class="attr_changer" size="3" data-attr="height" />
-            </label>
+            <se-input id="rect_width" data-attr="width" inputsize="41px" type="text" src="./images/width.svg" title="Change rectangle width"></se-input>
+            <se-input id="rect_height" data-attr="height" inputsize="41px" type="text" src="./images/height.svg" title="Change rectangle height"></se-input>
           </div>
           <label id="cornerRadiusLabel" class="toolset" title="Change Rectangle Corner Radius">
             <span class="icon_label"></span>
@@ -263,24 +253,12 @@
         </div>
         <div id="line_panel">
           <div class="toolset">
-            <label id="tool_line_x1">x1:
-              <input id="line_x1" class="attr_changer" title="Change line's starting x coordinate" size="3"
-                data-attr="x1" />
-            </label>
-            <label id="tool_line_y1">y1:
-              <input id="line_y1" class="attr_changer" title="Change line's starting y coordinate" size="3"
-                data-attr="y1" />
-            </label>
+            <se-input id="line_x1" data-attr="x1" inputsize="41px" title="Change line's starting x coordinate" type="text" label="x1:"></se-input>
+            <se-input id="line_y1" data-attr="y1" inputsize="41px" title="Change line's starting y coordinate" type="text" label="y1:"></se-input>
           </div>
           <div class="toolset">
-            <label id="tool_line_x2">x2:
-              <input id="line_x2" class="attr_changer" title="Change line's ending x coordinate" size="3"
-                data-attr="x2" />
-            </label>
-            <label id="tool_line_y2">y2:
-              <input id="line_y2" class="attr_changer" title="Change line's ending y coordinate" size="3"
-                data-attr="y2" />
-            </label>
+            <se-input id="line_x2" data-attr="x2" inputsize="41px" title="Change line's ending x coordinate" type="text" label="x2:"></se-input>
+            <se-input id="line_y2" data-attr="y2" inputsize="41px" title="Change line's ending y coordinate" type="text" label="y2:"></se-input>
           </div>
         </div>
         <div id="text_panel">
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 350db007..7f8755a2 100644
--- a/src/editor/svgedit.js
+++ b/src/editor/svgedit.js
@@ -4908,6 +4908,14 @@ editor.init = () => {
     $id('ellipse_cy').addEventListener('change', (e) => attrChanger(e));
     $id('ellipse_rx').addEventListener('change', (e) => attrChanger(e));
     $id('ellipse_ry').addEventListener('change', (e) => attrChanger(e));
+    $id('selected_x').addEventListener('change', (e) => attrChanger(e));
+    $id('selected_y').addEventListener('change', (e) => attrChanger(e));
+    $id('rect_width').addEventListener('change', (e) => attrChanger(e));
+    $id('rect_height').addEventListener('change', (e) => attrChanger(e));
+    $id('line_x1').addEventListener('change', (e) => attrChanger(e));
+    $id('line_y1').addEventListener('change', (e) => attrChanger(e));
+    $id('line_x2').addEventListener('change', (e) => attrChanger(e));
+    $id('line_y2').addEventListener('change', (e) => attrChanger(e));
 
     // register actions for layer toolbar
     $id('layer_new').addEventListener('click', newLayer);