From 04010b3b1f6ba6fc44d2cd0cd6a8a39446cd7b1d Mon Sep 17 00:00:00 2001
From: Kyle Gunger <corechg@gmail.com>
Date: Mon, 28 Sep 2020 02:19:13 -0400
Subject: Drag code updates

---
 scripts/cards/drag.js  | 78 +++++++++++++++++++++++++++++++++-----------------
 scripts/gui/table.js   |  5 ++--
 styles/client/card.css |  1 +
 3 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/scripts/cards/drag.js b/scripts/cards/drag.js
index 3b02eff..807e0c5 100644
--- a/scripts/cards/drag.js
+++ b/scripts/cards/drag.js
@@ -3,31 +3,39 @@
 class MultiDrag extends EventTarget {
     del = false;
     drag = [];
-    cbs = [];
+    mouse = [null, null];
 
-    constructor() {
+    constructor(ret = false) {
         super();
 
         window.addEventListener("mousemove", this.update.bind(this));
+        window.addEventListener("mouseup", this.stopDraggingAll.bind(this));
         document.body.addEventListener("mouseleave", this.stopDraggingAll.bind(this));
+
+        this.ret = ret;
     }
 
     addDragEl(el, ox, oy, px, py, pt) {
         if(this.del)
             return;
     
-        el.style.transitionDuration = "0.04s";
-    
-        this.drag.push({
+        el.style.transitionDuration = "0s";
+        
+        let push = {
             e: el,
             osx: ox,
             osy: oy,
-            prx: px,
-            pry: py,
             ptd: pt
-        });
+        };
+
+        if(this.ret) {
+            push.prx = px;
+            push.pry = py;
+        }
+
+        this.drag.push(push);
     
-        return this.drag.length - 1;
+        return push;
     }
 
     dragging(e) {
@@ -46,10 +54,10 @@ class MultiDrag extends EventTarget {
     
         if(e.button != 0)
             return;
-        
-        this.dispatchEvent(new Event("dragstart", {target: e.target}));
 
-        return this.addDragEl(
+        var cap = new Event("dragstart");
+        
+        cap.drag = this.addDragEl(
             e.target,
             e.pageX - parseInt(e.target.style.left),
             e.pageY - parseInt(e.target.style.top),
@@ -57,6 +65,8 @@ class MultiDrag extends EventTarget {
             e.target.style.top,
             e.target.style.transitionDuration
         );
+
+        this.dispatchEvent(cap);
     }
     
     stopDragging(i) {
@@ -68,21 +78,22 @@ class MultiDrag extends EventTarget {
         if (i < 0 || i >= this.drag.length)
             return;
         
-        var cap = {target: null, x: 0, y: 0};
+        var cap = new Event("dragstop");
+        cap.x = this.mouse[0];
+        cap.y = this.mouse[1];
         
         this.drag[i].e.style.transitionDuration = this.drag[i].ptd;
-        
-        cap.x = parseInt(this.drag[i].e.style.left);
-        this.drag[i].e.style.left = this.drag[i].prx;
 
-        cap.y = parseInt(this.drag[i].e.style.top);
-        this.drag[i].e.style.top = this.drag[i].pry;
-    
-        cap.target = this.drag.splice(i, 1).e;
+        if(this.ret) {
+            this.drag[i].e.style.left = this.drag[i].prx;
+            this.drag[i].e.style.top = this.drag[i].pry;
+        }
+
+        cap.drag = this.drag.splice(i, 1);
     
         this.del = false;
 
-        this.dispatchEvent(new Event("dragstop", cap));
+        this.dispatchEvent(cap);
     }
 
     stopDraggingEl(el) {
@@ -97,21 +108,34 @@ class MultiDrag extends EventTarget {
             return;
         
         this.del = true;
-    
+        
+        var cap = new Event("dragstop");
+
+        cap.x = this.mouse[0];
+        cap.y = this.mouse[1];
+
+        cap.drag = [];
+        
         while (this.drag.length > 0) {
             this.drag[0].e.style.transitionDuration = this.drag[0].ptd;
-            this.drag[0].e.style.left = this.drag[0].prx;
-            this.drag[0].e.style.top = this.drag[0].pry;
+
+            if(this.ret) {
+                this.drag[0].e.style.left = this.drag[0].prx;
+                this.drag[0].e.style.top = this.drag[0].pry;
+            }
     
-            this.drag.shift();
+            cap.drag.push(this.drag.shift());
         }
     
         this.del = false;
 
-        this.dispatchEvent(new Event("dragstopall"));
+        this.dispatchEvent(cap);
     }
 
     update(e) {
+        this.mouse[0] = e.pageX;
+        this.mouse[1] = e.pageY;
+
         for (let i = 0; i < this.drag.length && !this.del; i++) {
             this.drag[i].e.style.left = e.pageX - this.drag[i].osx + "px";
             this.drag[i].e.style.top = e.pageY - this.drag[i].osy + "px";
@@ -120,9 +144,9 @@ class MultiDrag extends EventTarget {
 
     addTarget(e) {
         e.addEventListener("mousedown", this.startDragging.bind(this));
-        e.addEventListener("mouseup", this.stopDraggingEl.apply(this, [e]))
     }
 
     removeTarget (e) {
+        e.removeEventListener("mousedown", this.startDragging.bind(this));
     }
 }
\ No newline at end of file
diff --git a/scripts/gui/table.js b/scripts/gui/table.js
index c4878a0..7199f83 100644
--- a/scripts/gui/table.js
+++ b/scripts/gui/table.js
@@ -4,9 +4,8 @@ class Table{
         this.root = e;
         this.drag = drag;
 
-        this.root.addEventListener("mouseup", drag.stopDraggingAll.bind(drag));
-
-        //drag.addEventListener("dragstop", );
+        drag.addEventListener("dragstart", (e) => {console.log(e)});
+        drag.addEventListener("dragstop", (e) => {console.log(e)});
 
         this.socket = socket;
 
diff --git a/styles/client/card.css b/styles/client/card.css
index de49175..8172e41 100644
--- a/styles/client/card.css
+++ b/styles/client/card.css
@@ -19,6 +19,7 @@ card
 card:hover
 {
     box-shadow: 0 0 10px var(--card-hover);
+    z-index: 3;
 }
 
 card > * {
-- 
cgit v1.2.3