Add basic dragging

macrovision.css

@@ -20,9 +20,13 @@ body {
     --height: 100px;
     height: var(--height);
     text-align: center;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
 }
 
-.entity.selected {
+.selected {
     filter: drop-shadow(0px 0px 10px gold);
 }
 

macrovision.js

@@ -3,6 +3,10 @@ let selectedEntity = null;
 
 let entityIndex = 0;
 
+let clicked = null;
+let dragging = false;
+let clickTimeout = null;
+
 const config = {
     height: math.unit(10, "meters")
 }
@@ -84,16 +88,33 @@ function makeEntity() {
     const entityTemplate = {
         name: "",
         author: "",
-        location: {
-            x: 0,
-            y: 0
-        },
         height: math.unit(Math.random() * 2 + 1, "meters")
     }
 
     return entityTemplate;
 }
 
+function clickDown(e) {
+    console.log("DOWN")
+    clicked = e.target;
+    clickTimeout = setTimeout(() => {dragging = true}, 100)
+}
+
+function clickUp() {
+    console.log("UP");
+    clearTimeout(clickTimeout);
+
+    if (clicked) {
+        if (dragging) {
+            dragging = false;
+        } else {
+            select(clicked);
+        }
+        clicked = null;
+    }
+    
+}
+
 function select(target) {
     if (selected) {
         selected.classList.remove("selected");
@@ -124,7 +145,8 @@ function displayEntity(entity, x, y) {
     img.style.left = x + "px";
     img.style.top = y + "px";
 
-    img.addEventListener("click", e => select(e.target));
+    img.addEventListener("mousedown", e => clickDown(e));
+    document.addEventListener("mouseup", e => clickUp());
 
     img.id = "entity-" + entityIndex;
     img.dataset.key = entityIndex;
@@ -153,3 +175,11 @@ document.addEventListener("DOMContentLoaded", () => {
 window.addEventListener("resize", () => {
     updateSizes();
 })
+
+document.addEventListener("mousemove", (e) => {
+    if (clicked) {
+        clicked.style.left = e.clientX + "px";
+        clicked.style.top = e.clientY + "px";
+
+    }
+});