From fc461a61d2153f075b8add922fa878b0d9ddd99a Mon Sep 17 00:00:00 2001
From: khuram <khuramhaf@gmail.com>
Date: Mon, 10 Jul 2023 07:13:06 -0700
Subject: [PATCH 1/8] move rects

---
 graphic-editor.html | 77 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 11 deletions(-)

diff --git a/graphic-editor.html b/graphic-editor.html
index 8889893..fd6edfa 100644
--- a/graphic-editor.html
+++ b/graphic-editor.html
@@ -12,26 +12,42 @@
 
 
 
-  <h1>Draw Rectangles on Mouse Move in SVG</h1>
+  <h1>Move Drawn Rectangles</h1>
   <svg id="my-svg" width="700" height="450" style="background-color: blue; margin-top:0px; margin-left:0px"></svg>
+ 
+  <div>
 
+    <button onclick = "selectfun()">Select</button>
+    <button onclick = "rectfun()">Rect</button>
+  </div>
  
   </div>
   <script>
 
     let svg = document.getElementById('my-svg');
     let startX, startY;
-
-
- 
-   
+    
     let rectangle;
     let rectangle2;
+    let recttool=0
 
-    
+    let selecttool = 0;
 
-    function handleMouseDown(event) {
+    function selectfun(){
+
+      selecttool = 1;
+      recttool = 0;
+    }
+
+
+    function rectfun(){
+
+      selecttool = 0;
+      recttool = 1;
+    }
 
+    function handleMouseDown(event) {
+if(recttool ===1){
 rectangle2 = true;
 
 
@@ -41,14 +57,53 @@ <h1>Draw Rectangles on Mouse Move in SVG</h1>
 
 
       rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      rectangle.selectrect = 0;
       rectangle.setAttribute('stroke', 'black');
       rectangle.setAttribute('fill', 'transparent');
       svg.appendChild(rectangle);
   
+      rectangle.addEventListener("mousedown", (event)=>{
+
+
+    
+
+if (selecttool === 1){
+
+  startX = event.clientX;
+startY = event.clientY;
+
+  event.target.selectrect = 1;
+}
+
+
+})
+
+
+rectangle.addEventListener("mousemove", (event)=>{
+
+if (event.target.selectrect===1){
+
+
+var x = event.clientX - svg.getBoundingClientRect().left;
+var y = event.clientY - svg.getBoundingClientRect().top;
+event.target.setAttribute('x', x - event.target.getAttribute('width')/2);
+event.target.setAttribute('y', y - event.target.getAttribute('height')/2);
+
+}
+})
+
+
+rectangle.addEventListener("mouseup", (event)=>{
+
+if (selecttool ===1){
+event.target.selectrect = 0;
+
+}
+
+})
   
   
-  
-  
+} 
   
   }
 
@@ -59,8 +114,8 @@ <h1>Draw Rectangles on Mouse Move in SVG</h1>
         const width = Math.abs(event.clientX - startX);
         const height = Math.abs(event.clientY - startY);
 
-        rectangle.setAttribute('x', Math.min(startX, event.clientX-rect.left));
-        rectangle.setAttribute('y', Math.min(startY, event.clientY-rect.top));
+        rectangle.setAttribute('x', Math.min(startX-rect.left, event.clientX-rect.left));
+        rectangle.setAttribute('y', Math.min(startY-rect.top, event.clientY-rect.top));
         rectangle.setAttribute('width', width);
         rectangle.setAttribute('height', height);
       }

From 2bdc8a222badd65053a020562c60997432a162fc Mon Sep 17 00:00:00 2001
From: khuram <khuramhaf@gmail.com>
Date: Mon, 10 Jul 2023 07:21:20 -0700
Subject: [PATCH 2/8] move rects

---
 graphic-editor.html => move-rects.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename graphic-editor.html => move-rects.html (100%)

diff --git a/graphic-editor.html b/move-rects.html
similarity index 100%
rename from graphic-editor.html
rename to move-rects.html

From dc5abef7f7e0f41434f54628e13710e55133541e Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Mon, 10 Jul 2023 09:50:18 -0700
Subject: [PATCH 3/8] Create README.md

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c726b2b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,5 @@
+# Graphic-Editor-Tutorial
+
+You can watch video for this tutorial on youtube.
+
+https://youtu.be/3Qb47zBp444

From 80f12919d1ad6ec9cf4a245477b501ee279d5545 Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Mon, 10 Jul 2023 09:50:52 -0700
Subject: [PATCH 4/8] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c726b2b..225dd3c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Graphic-Editor-Tutorial
+# Graphic-Editor-Tutorial | How to move rectangles on mouse move
 
 You can watch video for this tutorial on youtube.
 

From 5cf4c5f2573d22ade78052d6662ca4b523685c0c Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Mon, 10 Jul 2023 09:53:12 -0700
Subject: [PATCH 5/8] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 225dd3c..14ba50f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Graphic-Editor-Tutorial | How to move rectangles on mouse move
+# Graphic-Editor-Tutorial using HTML SVG | How to move rectangles on mouse move?
 
 You can watch video for this tutorial on youtube.
 

From 20e508b85087783faea6ee08038070c9ca012c15 Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Tue, 11 Jul 2023 07:47:53 -0700
Subject: [PATCH 6/8] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 14ba50f..54da53c 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,4 @@
 
 You can watch video for this tutorial on youtube.
 
-https://youtu.be/3Qb47zBp444
+https://youtu.be/oUqNIaSquqk

From 987999b48c23959fa4d4cbca2604ad3a1e9fe818 Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Fri, 11 Aug 2023 13:55:41 +0500
Subject: [PATCH 7/8] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 54da53c..3decb73 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,4 @@
 
 You can watch video for this tutorial on youtube.
 
-https://youtu.be/oUqNIaSquqk
+https://youtu.be/4zOwqRJMOIc

From 03980fa117bd3714dfa8603e7df1d65513653f64 Mon Sep 17 00:00:00 2001
From: Khuram Hafeez <khuramhaf@gmail.com>
Date: Fri, 11 Aug 2023 13:58:13 +0500
Subject: [PATCH 8/8] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3decb73..356c9cd 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Graphic-Editor-Tutorial using HTML SVG | How to move rectangles on mouse move?
+# How to Draw and Move Rectangles on HTML SVG with Mouse Move for Graphics Editor
 
 You can watch video for this tutorial on youtube.