preview drop while dragging line in cdb

HeapsIO · Feb 2, 2024 · e106d6e · e106d6e
1 parent edba695
commit e106d6e
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 84 deletions.
diff --git a/bin/cdb.css b/bin/cdb.css
@@ -425,6 +425,50 @@
   min-width: 500px;
   min-height: 500px;
 }
+.cdb .cdb-sheet .cdb-types {
+  position: absolute;
+  padding: 2px 2px 2px 2px;
+  display: flex;
+  background-color: #333333;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #474747;
+  cursor: pointer;
+}
+.cdb .cdb-sheet .cdb-types select {
+  cursor: pointer;
+  min-width: 100px;
+  width: auto!important;
+}
+.cdb .cdb-sheet .cdb-types #dropdown-custom-type {
+  width: fit-content;
+}
+.cdb .cdb-sheet .cdb-types #parameters {
+  display: flex;
+}
+.cdb .cdb-sheet .cdb-types input {
+  cursor: pointer;
+  width: 50px;
+}
+.cdb .cdb-sheet .cdb-types input[type="checkbox"] {
+  width: auto;
+  height: auto;
+  margin: 0px 0px 0px 0px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.cdb .cdb-sheet .cdb-types p {
+  margin-top: 2px;
+  margin-bottom: 2px;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.cdb .cdb-sheet .cdb-preview-drag {
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  background-color: #54FF85;
+}
 .cdb.cdb-obj-editor:not(.cdb-large .cdb.cdb-obj-editor) {
   margin-top: 10px;
 }

diff --git a/bin/cdb.less b/bin/cdb.less
@@ -55,7 +55,7 @@
 		}
 	}
 
-	
+
 	.cdb-sheet {
 
 		width : 100%;
@@ -477,6 +477,57 @@
 			}
 		}
 
+		.cdb-types {
+			position: absolute;
+			padding: 2px 2px 2px 2px;
+			display: flex;
+			background-color: #333333;
+			border-style: solid;
+			border-width: 1px;
+			border-color: #474747;
+			cursor:pointer;
+
+			select {
+				cursor:pointer;
+				min-width: 100px;
+				width: auto!important;
+			}
+
+			#dropdown-custom-type {
+				width:fit-content;
+			}
+
+			#parameters {
+				display: flex;
+			}
+
+			input {
+				cursor:pointer;
+				width: 50px;
+			}
+
+			input[type="checkbox"] {
+				width: auto;
+				height: auto;
+				margin: 0px 0px 0px 0px;
+				margin-top: 2px;
+				margin-bottom: 2px;
+			}
+
+			p {
+				margin-top: 2px;
+				margin-bottom: 2px;
+				padding-left: 2px;
+				padding-right: 2px;
+			}
+		}
+
+		.cdb-preview-drag {
+			position: absolute;
+			width: 100%;
+			height: 5px;
+			background-color: #54FF85;
+		}
 	}
 
 	&.cdb-obj-editor {

diff --git a/bin/style.css b/bin/style.css
@@ -1296,44 +1296,6 @@ input[type=checkbox]:checked:after {
 .identifiers :nth-child(2) {
   right: 20px;
 }
-.cdb-types {
-  position: absolute;
-  padding: 2px 2px 2px 2px;
-  display: flex;
-  background-color: #333333;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #474747;
-  cursor: pointer;
-}
-.cdb-types select {
-  cursor: pointer;
-  min-width: 100px;
-  width: auto!important;
-}
-.cdb-types #dropdown-custom-type {
-  width: fit-content;
-}
-.cdb-types #parameters {
-  display: flex;
-}
-.cdb-types input {
-  cursor: pointer;
-  width: 50px;
-}
-.cdb-types input[type="checkbox"] {
-  width: auto;
-  height: auto;
-  margin: 0px 0px 0px 0px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-}
-.cdb-types p {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  padding-left: 2px;
-  padding-right: 2px;
-}
 /* Curve editor */
 .hide-curve-editor {
   position: relative;

diff --git a/bin/style.less b/bin/style.less
@@ -1416,51 +1416,6 @@ input[type=checkbox] {
 	}
 }
 
-.cdb-types {
-	position: absolute;
-	padding: 2px 2px 2px 2px;
-	display: flex;
-	background-color: #333333;
-	border-style: solid;
-	border-width: 1px;
-	border-color: #474747;
-	cursor:pointer;
-
-	select {
-		cursor:pointer;
-		min-width: 100px;
-		width: auto!important;
-	}
-
-	#dropdown-custom-type {
-		width:fit-content;
-	}
-
-	#parameters {
-		display: flex;
-	}
-
-	input {
-		cursor:pointer;
-		width: 50px;
-	}
-
-	input[type="checkbox"] {
-		width: auto;
-		height: auto;
-		margin: 0px 0px 0px 0px;
-		margin-top: 2px;
-		margin-bottom: 2px;
-	}
-
-	p {
-		margin-top: 2px;
-		margin-bottom: 2px;
-		padding-left: 2px;
-		padding-right: 2px;
-	}
-}
-
 /* Curve editor */
 @timelineHeight: 20px;
 .hide-curve-editor {

diff --git a/hide/comp/cdb/Table.hx b/hide/comp/cdb/Table.hx
@@ -22,6 +22,7 @@ class Table extends Component {
 	public var view : cdb.DiffFile.SheetView;
 
 	var separators : Array<Separator>;
+	var previewDrop : Element;
 
 	public var nestedIndex : Int = 0;
 
@@ -53,6 +54,10 @@ class Table extends Component {
 			}
 		}
 		refresh();
+
+		previewDrop = new Element('<div class="cdb-preview-drag"><div>');
+		previewDrop.appendTo(root);
+		previewDrop.hide();
 	}
 
 	public function getRealSheet() {
@@ -185,15 +190,33 @@ class Table extends Component {
 				}
 				ide.registerUpdate(updateDrag);
 				e.dataTransfer.effectAllowed = "move";
+				previewDrop.show();
 			}
 			headEl.ondrag = function(e:js.html.DragEvent) {
 				if (hxd.Key.isDown(hxd.Key.ESCAPE)) {
 					e.dataTransfer.dropEffect = "none";
 					e.preventDefault();
 				}
+
+				// Update preview of where the line while be dropped
+				var pickedEl = js.Browser.document.elementFromPoint(e.clientX, e.clientY);
+				var pickedLine = null;
+				var parentEl = pickedEl;
+				while (parentEl != null) {
+					if (lines.filter((otherLine) -> otherLine.element.get()[0] == parentEl).length > 0) {
+						pickedLine = lines.filter((otherLine) -> otherLine.element.get()[0] == parentEl)[0];
+						break;
+					}
+					parentEl = parentEl.parentElement;
+				}
+				if (pickedLine != null) {
+					var lineEl = editor.getLine(line.table.sheet, pickedLine.index).element;
+					previewDrop.css("top",'${pickedLine.index > line.index ? lineEl.position().top + lineEl.height() : lineEl.position().top}px');
+				}
 			}
 			headEl.ondragend = function(e:js.html.DragEvent) {
 				ide.unregisterUpdate(updateDrag);
+				previewDrop.hide();
 				if (e.dataTransfer.dropEffect == "none") return false;
 				var pickedEl = js.Browser.document.elementFromPoint(e.clientX, e.clientY);
 				var pickedLine = null;