From dfb48a23e4a7ac455be3a475ebf28027b6d2c148 Mon Sep 17 00:00:00 2001
From: Alex Vitkov <alexvitkov98@gmail.com>
Date: Thu, 25 Mar 2021 11:59:30 +0200
Subject: Draggable windows

---
 front/dragging.ts | 74 +++++++++++++++++--------------------------------------
 1 file changed, 23 insertions(+), 51 deletions(-)

(limited to 'front/dragging.ts')

diff --git a/front/dragging.ts b/front/dragging.ts
index b65f1f4..bcf6e9f 100644
--- a/front/dragging.ts
+++ b/front/dragging.ts
@@ -2,16 +2,15 @@
 export class Draggable {
     el: HTMLElement;
 
-    canDragX: boolean = true;
-    canDragY: boolean = true;
     reparent: boolean = true;
 
     lockSize: boolean = true;
 
     onBeforeDragStart: () => void = null;
     onAfterDragEnd:    () => void = null;
+    customMoveHandler: (x: number, y: number) => void = null;
 
-    Draggable(el: HTMLElement) {
+    constructor(el: HTMLElement) {
         this.el = el;
     }
 }
@@ -31,11 +30,6 @@ export var dragging_offset_x = 0, dragging_offset_y = 0;
 export var dragging_candidate: Draggable = null;
 export var dragging_candidate_x, dragging_candidate_y;
 
-// If we're dragging a fileview, this is set to the fileview class instance itself, because 'dragging' is just a DOM object
-// The placeholder is a dummy DIV that we insert in the object's place on the grid to keep things nicely aligned
-// export var dragging_fileview: FileView;
-// export var dragging_placeholder = null;
-
 export function set_dragging_candidate(e, candidate: Draggable) {
     dragging_candidate = candidate;
     dragging_candidate_x = e.clientX;
@@ -46,6 +40,8 @@ export function set_dragging_candidate(e, candidate: Draggable) {
 // Start dragging the 'obj' DOM element
 // e is a DOM event, this should only get called in response of a DOM event
 export function begin_drag(e, d: Draggable) {
+    if (d.onBeforeDragStart)
+        d.onBeforeDragStart()
     set_iframe_enabled(false);
     dragging = d;
     dragging_candidate = null;
@@ -55,42 +51,27 @@ export function begin_drag(e, d: Draggable) {
     dragging_offset_x = e.clientX - elemRect.left;
     dragging_offset_y = -e.clientY + elemRect.top;
 
-    //if (dragging_placeholder)
-    // dragging.el.parentNode.insertBefore(dragging_placeholder, dragging.el);
-
-    dragging.el.style.left = (e.clientX - dragging_offset_x) + "px";
-    dragging.el.style.top  = (e.clientY + dragging_offset_y) + "px";
 
     if (dragging.lockSize) {
+        dragging.el.style.left = (e.clientX - dragging_offset_x) + "px";
+        dragging.el.style.top  = (e.clientY + dragging_offset_y) + "px";
         dragging.el.style.width  = elemRect.width  + "px";
         dragging.el.style.height = elemRect.height + "px";
+        dragging.el.style.position = "absolute";
     }
 
-    dragging.el.style.position = "absolute";
-    document.body.appendChild(dragging.el);
+
+
+    if (dragging.reparent)
+        document.body.appendChild(dragging.el);
 }
 
 export function end_drag(_e) {
     set_iframe_enabled(true);
 
-    // If there's a dragging placeholder remove it and put the dragged node back into its place
-    if (dragging_placeholder) {
-        dragging_placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
-        dragging_placeholder.remove();
-        dragging_placeholder = null;
-    }
-
-    // If we were dragging a FileView, we need to reset some CSS
-    if (dragging_fileview) {
-        dragging.style.removeProperty("position");
-        dragging.style.removeProperty("width");
-        dragging.style.removeProperty("height");
-        dragging.style.removeProperty("left");
-        dragging.style.removeProperty("top");
-        dragging_fileview = null;
-    }
-
-    dragging.classList.remove("dragged");
+    dragging.el.classList.remove("dragged");
+    if (dragging.onAfterDragEnd)
+        dragging.onAfterDragEnd();
     dragging = null;
 }
 
@@ -109,30 +90,21 @@ document.body.onmouseup = (_e) => {
 
 document.body.onmousemove = (e) => {
     if (dragging) {
-        dragging.style.left = (e.clientX - dragging_offset_x) + "px";
-        dragging.style.top = (e.clientY + dragging_offset_y) + "px";
+        const x = e.clientX - dragging_offset_x;
+        const y = e.clientY + dragging_offset_y;
+        if (dragging.customMoveHandler) {
+            dragging.customMoveHandler(x, y)
+        } else {
+            dragging.el.style.left = x + "px";
+            dragging.el.style.top  = y + "px";
+        }
     }
     else if (dragging_candidate) {
         var d = Math.abs(e.clientX - dragging_candidate_x) + Math.abs(e.clientY - dragging_candidate_y);
         if (d > 15)
-            begin_drag(e, dragging_candidate, true);
+            begin_drag(e, dragging_candidate);
     }
 }
-// Dragging a fileview is a bit different from dragging a window
-// This does some setup work before calling the common begin_drag
-export function begin_drag_fileview(e, fileview) {
-    if (dragging)
-        end_drag(e);
-
-    // The dragging_placeholder is inserted into its place by the begin_drag function
-    dragging_placeholder = document.createElement('div');
-    dragging_fileview = fileview;
-
-    dragging = fileview.visuals;
-    dragging.style.zIndex = 50000;
-
-    begin_drag(e, fileview.visuals);
-}
 
 export function oncontextmenu_hook(e) {
     if (dragging) {
-- 
cgit v1.2.3