Fix drag and drop of modules, no column border

index.css: remove column border, decrease module margin index.js: bugfixdrag and drop modules (WIP?)
ewowi · Mar 11, 2024 · ab446c8 · ab446c8
1 parent 9c81d4b
commit ab446c8
Show file tree

Hide file tree

Showing 3 changed files with 1,274 additions and 1,277 deletions.
diff --git a/data/index.css b/data/index.css
@@ -294,21 +294,21 @@ canvas {
   background: var(--bg-color); /* linear-gradient(to bottom, #ffbe33 0%, #b60f62 100%); */
   border-radius: 10px; /* from .5em */
   padding: 5px;
-  margin: 10px; /*space around modules */
+  margin: 5px; /*space around modules */
   cursor: move;
 }
 
-.module.over, .appmod.over, .sysmod.over, .usermod.over {
+/* .module.over, .appmod.over, .sysmod.over, .usermod.over {
   background-color: #00BFFF;
-}
+} */
 
-.mdlColumn {
-  border: 2px solid var(--border-color);
+/* .mdlColumn { */
+  /* border: 2px solid var(--border-color); */
   /* border-radius: .5em; */
-  border-radius: 10px;
+  /* border-radius: 10px; */
   /* padding: 5px; */
   /* cursor: move; */
-}
+/* } */
 
 .module.over, .appmod.over, .sysmod.over, .usermod.over, .mdlColumn.over {
   border: 2px dotted var(--border-color);

diff --git a/data/index.js b/data/index.js
@@ -227,8 +227,6 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
       //otherwise next node is not positioned right. Improvements welcome on this hack
       varNode.appendChild(cE("br"));
       varNode.appendChild(cE("br"));
-
-      setupModule(varNode); //enable drag and drop of modules
     }
     else if (variable.type == "table") {
       ndivNeeded = false;
@@ -413,8 +411,9 @@ function createHTML(json, parentNode = null, rowNr = UINT8_MAX) {
 
     //disable drag of parent module
     if (["appmod", "usermod", "sysmod"].includes(variable.type)) {
-      varNode.draggable = true;
-      varNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
+      setupModule(varNode.parentNode); //enable drag and drop of (the div of modules
+      varNode.parentNode.draggable = true; //div of module
+      // varNode.parentNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});
     }
 
     if (variable.n && parentNodeType != "table") { //multiple details, not for table header
@@ -1220,9 +1219,9 @@ function removeDragStyle(item) {
   columns.forEach(function(column) {
     let modules = column.childNodes;
     modules.forEach(function(module) {
-      module.classList.remove('over');
+      if (module.classList) module.classList.remove('over'); //bug? dragLeave is called immediate so over has been removed already
     });
-    column.classList.remove('over');
+    if (column.classList) column.classList.remove('over');
   });
 }