Refactor the drag-drop handler

5 files changed, 77 insertions, 78 deletions

diff --git a/src/draghandler.js b/src/draghandler.js
index 62bcd25..36fc724 100644
--- a/src/draghandler.js
+++ b/src/draghandler.js
@@ -4,81 +4,16 @@
 *  http://www.webtoolkit.info/
 *
 **/
+
+function draghandler(webclient)
+{
+    this.webclient = webclient;
+}
+
 var DragHandler = {
     // private property.
     _oElem : null,
+    webclient : null,
 
-    // public method. Attach drag handler to an element.
-    attach : function(oElem) {
-        oElem.onmousedown = DragHandler._dragBegin;
-
-        // callbacks
-        oElem.dragBegin = new Function();
-        oElem.drag = new Function();
-        oElem.dragEnd = new Function();
-
-        return oElem;
-    },
-
-
-    // private method. Begin drag process.
-    _dragBegin : function(e) {
-        var oElem = DragHandler._oElem = this;
-
-        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '0px'; }
-        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }
-
-        var x = parseInt(oElem.style.left);
-        var y = parseInt(oElem.style.top);
-
-        e = e ? e : window.event;
-        oElem.mouseX = e.clientX;
-        oElem.mouseY = e.clientY;
-
-        oElem.dragBegin(oElem, x, y);
-
-        document.onmousemove = DragHandler._drag;
-        document.onmouseup = DragHandler._dragEnd;
-        return false;
-    },
-
-
-    // private method. Drag (move) element.
-    _drag : function(e) {
-        var oElem = DragHandler._oElem;
-
-        var x = parseInt(oElem.style.left);
-        var y = parseInt(oElem.style.top);
-
-        e = e ? e : window.event;
-        moveElement(oElem, x + (e.clientX - oElem.mouseX), y + (e.clientY - oElem.mouseY));
-
-//        oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
-//        oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
-
-        oElem.mouseX = e.clientX;
-        oElem.mouseY = e.clientY;
-
-        oElem.drag(oElem, x, y);
-
-        return false;
-    },
-
-
-    // private method. Stop drag process.
-    _dragEnd : function() {
-        var oElem = DragHandler._oElem;
-
-        var x = parseInt(oElem.style.left);
-        var y = parseInt(oElem.style.top);
-
-        oElem.dragEnd(oElem, x, y);
-
-        sendMoveMessage(oElem);
-
-        document.onmousemove = null;
-        document.onmouseup = null;
-        DragHandler._oElem = null;
-    }
 
 }
diff --git a/src/eventhandler.js b/src/eventhandler.js
index ab676ad..cca4e96 100644
--- a/src/eventhandler.js
+++ b/src/eventhandler.js
@@ -123,7 +123,7 @@ function createElement(widgetType, id)
     } else if (widgetType == "midisubwindow") {
 //        console.log("midisubwindow")
         element = this.createWidgetElement(id);
-        DragHandler.attach(element);
+        dojo.connect(element, 'onmousedown', this, dragBegin);
     } else {
         element = this.createWidgetElement(id);
     }
@@ -167,16 +167,28 @@ function updateText(element, text)
         element.value = text;
 }
 
-function moveElement(contentElement, x, y)
+function setElementRelativePosition(contentElement, x, y)
 {
+//    console.log("set element relative posisiton " + x + " " + y);
     var element = contentElement.structureElement;
     element.style.left = x;
     element.style.top = y;
 }
 
+function moveElement(contentElement, dx, dy)
+{
+    var element = contentElement.structureElement;
+    element.style.left = parseInt(element.style.left) + dx;
+    element.style.top = parseInt(element.style.top) + dy;
+//    console.log("move element " + dx + " " + dy + element.style.left);
+}
+
 function sendMoveMessage(element)
 {
-    var message = this.jsonUrl + JSON.stringify({ "type" : "positionupdate", "id" : element.pointer, "x" : element.style.left, "y" : element.style.top });
+    var structureElement = element.structureElement;
+//    console.log("element.structureElement" + structureElement + " " + element.pointer);
+    var message = this.jsonUrl + JSON.stringify({ "type" : "positionupdate", "id" : element.pointer,
+                                                  "x" : structureElement.style.left, "y" : structureElement.style.top });
     this.request(message);
 }
 
@@ -257,7 +269,7 @@ function eventHandler(text)
             element.src = source;
         } else if (type == "geometry") {
 //            console.log("geometry x " + event.x + " y " + event.y + " w " + event.w + " h " + event.h);
-            this.moveElement(element, event.x, event.y)
+            this.setElementRelativePosition(element, event.x, event.y)
             element.style.width = event.w;
             element.style.height = event.h;
 
@@ -380,6 +392,52 @@ function getElementsByClass(searchClass,node,tag) {
 
 var webclientObjectCounter = 0;
 
+    function dragBegin (event) {
+        event = event ? event : window.event;
+
+        var element = event.target.structureElement;
+        if (isNaN(parseInt(element.style.left))) { element.style.left = '0px'; }
+        if (isNaN(parseInt(element.style.top))) { element.style.top = '0px'; }
+
+        var x = parseInt(element.style.left);
+        var y = parseInt(element.style.top);
+
+        this.mouseX = event.clientX;
+        this.mouseY = event.clientY;
+        this.dragHandler = dojo.connect(document, 'onmousemove', this, drag);
+        this.dragEndHandler = dojo.connect(document, 'onmouseup', this, dragEnd);
+        this.dragElement = event.target;
+
+        return false;
+    }
+
+    function drag(event) {
+        var element = this.dragElement.structureElement;
+        //console.log(this.dragElement + this.dragElement.structureElement)
+        //console.log("Drag " + this + " " + this.dragElement + " " + element)
+        var x = parseInt(element.style.left);
+        var y = parseInt(element.style.top);
+
+        event = event ? event : window.event;
+
+        var dx = event.clientX - this.mouseX;
+        var dy = event.clientY - this.mouseY;
+
+        this.moveElement(this.dragElement, dx, dy);
+
+        this.mouseX = event.clientX;
+        this.mouseY = event.clientY;
+
+        return false;
+    }
+
+    function dragEnd(event) {
+        this.sendMoveMessage(this.dragElement);
+        dojo.disconnect(this.dragHandler);
+        dojo.disconnect(this.dragEndHandler);
+    }
+
+
 function setUpWebClientObject(webclientObject)
 {
     webclientObject.baseUrl = webclientObject.attributes["src"].value + "/";
@@ -403,6 +461,7 @@ function setUpWebClientObject(webclientObject)
     webclientObject.createTextInputElement = createTextInputElement;
     webclientObject.createButtonInputElement = createButtonInputElement;
     webclientObject.createElement = createElement
+    webclientObject.setElementRelativePosition = setElementRelativePosition
     webclientObject.moveElement = moveElement
     webclientObject.sendMoveMessage = sendMoveMessage
     webclientObject.eventHandler = eventHandler;
@@ -419,6 +478,10 @@ function setUpWebClientObject(webclientObject)
     webclientObject.inputElementKeyPress = inputElementKeyPress
     webclientObject.inputElementKeyRelease = inputElementKeyRelease
 
+    webclientObject.dragBegin = dragBegin;
+    webclientObject.drag = drag;
+    webclientObject.dragEnd = dragEnd;
+
 //    console.log(webclientObject);
 //    console.log(webclientObject.baseUrl);
 }
diff --git a/src/eventqueue.cpp b/src/eventqueue.cpp
index 8c9dc36..db5b87c 100644
--- a/src/eventqueue.cpp
+++ b/src/eventqueue.cpp
@@ -82,7 +82,7 @@ void EventQueue::handleRequest(HttpRequest *request, HttpResponse *response)
         DEBUG << "idle";
         response->setBody(queueToByteArray());
 
-    // If the part starts with "/josn" then the rest of the string is an json-encoded
+    // If the part starts with "/json" then the rest of the string is an json-encoded
     // string object.
     } else if (path.startsWith("/json")) {
         QByteArray jsonText = path.mid(5); // remove "/json"
diff --git a/src/webclientserver.h b/src/webclientserver.h
index ad9a0cf..9a823df 100644
--- a/src/webclientserver.h
+++ b/src/webclientserver.h
@@ -70,6 +70,7 @@ public:
     HttpRequest m_idleRequest;
     HttpResponse m_idleResponse;
     Server *m_server;
+
 };
 
 class FileServer : public QObject
diff --git a/src/widgeteventhandler.cpp b/src/widgeteventhandler.cpp
index 4cbfbb0..ce69de8 100644
--- a/src/widgeteventhandler.cpp
+++ b/src/widgeteventhandler.cpp
@@ -310,7 +310,7 @@ void WidgetEventHandler::widgetPaint(QWidget *widget, const QRect &updateRect)
     grabbing = true; // prevent recusion
     //DEBUG << "render";
     // grab widget only, no background or children
-    widget->render(&image, updateRect.topLeft(), QRegion(updateRect), QWidget::RenderFlags(0));
+    widget->render(&image, QPoint(0,0), QRegion(QRect(QPoint(0,0), widget->size())), QWidget::RenderFlags(0));
     //DEBUG << "render done";
     grabbing = false;