summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBent Bisballe Nyeng <deva@aasimon.org>2020-06-07 13:55:40 +0200
committerBent Bisballe Nyeng <deva@aasimon.org>2020-06-07 13:55:40 +0200
commit133ad038681afc79adf47b7772508b3c187433cb (patch)
tree08265b6c72ac931b40c47bc5373ea88d209dac6e
parent916cef68e9accd45c90c5b83ba4011604f0a009a (diff)
JS: Dim nodes while they are being dragged.
-rw-r--r--src/ws/node.js19
-rw-r--r--src/ws/view.js21
2 files changed, 32 insertions, 8 deletions
diff --git a/src/ws/node.js b/src/ws/node.js
index f7deaf7..6ff8e50 100644
--- a/src/ws/node.js
+++ b/src/ws/node.js
@@ -105,7 +105,8 @@ Node.prototype.create = function()
node.setAttribute("ondragover", "return false");
node.setAttribute("draggable", true);
node.setAttribute("ondragstart", "drag(this, event)");
- node.setAttribute("title", this.id);
+ node.setAttribute("ondragend", "dragEnd(event)");
+ node.setAttribute("nodeid", this.id);
// This is a hack to make it possible to identify the nodeid and
// oberveid from the node id alone.
@@ -115,7 +116,7 @@ Node.prototype.create = function()
var subscribe_button = document.createElement("div");
subscribe_button.name = "subscribe_button";
subscribe_button.setAttribute("onclick", "subscribeMe(this, event)");
- subscribe_button.setAttribute("title", this.id);
+ subscribe_button.setAttribute("nodeid", this.id);
subscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid green 2px; cursor: pointer;");
var txt_plus = document.createTextNode("+");
subscribe_button.appendChild(txt_plus);
@@ -124,7 +125,7 @@ Node.prototype.create = function()
var unsubscribe_button = document.createElement("div");
unsubscribe_button.name = "unsubscribe_button";
unsubscribe_button.setAttribute("onclick", "unsubscribeMe(this, event)");
- unsubscribe_button.setAttribute("title", this.id);
+ unsubscribe_button.setAttribute("nodeid", this.id);
unsubscribe_button.setAttribute("style", "float: left; display: inline-box; width:14px; height: 14px; border: solid red 2px; cursor: pointer;");
var txt_minus = document.createTextNode("-");
unsubscribe_button.appendChild(txt_minus);
@@ -153,4 +154,16 @@ Node.prototype.setAttribute = function(name, value)
var title_txt = document.createTextNode(value);
this.div_title.appendChild(title_txt);
}
+
+ if(name == "dragged")
+ {
+ if(value == "true")
+ {
+ this.element.style.opacity = "0.3";
+ }
+ else
+ {
+ this.element.style.opacity = "1.0";
+ }
+ }
};
diff --git a/src/ws/view.js b/src/ws/view.js
index 18dfb91..e96ec70 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -51,8 +51,19 @@ function deleteNode(id)
function drag(target, e)
{
- e.dataTransfer.setData('Text', target.id);
+ e.dataTransfer.setData('id', target.id);
e.stopPropagation(); // <--- this fixes the drag target problem
+ update(idFromStr(target.id), "dragged", "true");
+}
+
+function dragEnd(e)
+{
+ e.preventDefault();
+ e.stopPropagation();
+
+ // FIXME: This doesn't seem to work in Chromium 65
+ var id = e.dataTransfer.getData('id');
+ update(idFromStr(id), "dragged", "false");
}
function drop(target, e)
@@ -60,21 +71,21 @@ function drop(target, e)
e.preventDefault();
e.stopPropagation();
- var id = e.dataTransfer.getData('Text');
- var node = document.getElementById(id);
+ var id = e.dataTransfer.getData('id');
+ update(idFromStr(id), "dragged", "false");
move(idFromStr(id), idFromStr(target.id));
}
function subscribeMe(target, e)
{
e.stopPropagation();
- subscribe(target.title);
+ subscribe(target.nodeid);
}
function unsubscribeMe(target, e)
{
e.stopPropagation();
- unsubscribe(target.title);
+ unsubscribe(target.nodeid);
}
function showHideChildren(target, e)