Browse Source

[fancytree] Changed reordering behavior when Reparent and Reorder are active

Clément Espeute 1 month ago
parent
commit
0d8f7ebd0d
3 changed files with 33 additions and 20 deletions
  1. 9 7
      bin/style.css
  2. 10 7
      bin/style.less
  3. 14 6
      hide/comp/FancyTree.hx

+ 9 - 7
bin/style.css

@@ -4248,6 +4248,7 @@ hide-popover hide-content {
 :root {
   --hover-highlight: rgba(114, 180, 255, 0.5);
   --selection: #3185ce;
+  --drop-feedback: white;
   --hover: #444;
   --basic-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
   --sublte-shadow: 1px 1px 3px rgba(0, 0, 0, 0.33);
@@ -4987,7 +4988,8 @@ fancy-tree fancy-scroll fancy-tree-item {
   width: 100%;
   top: 0;
   contain: strict;
-  padding-left: calc((var(--depth) - 1) * 1em + 0.25em);
+  --padding: calc((var(--depth) - 1) * 1em + 0.25em);
+  padding-left: var(--padding);
   box-sizing: border-box;
   height: 20px;
   max-height: 20px;
@@ -5128,10 +5130,10 @@ fancy-tree fancy-scroll fancy-tree-item.feedback-drop-top::after {
   position: absolute;
   content: "";
   display: block;
-  left: 0;
+  left: var(--padding);
   right: 0;
   top: 0;
-  border-top: solid 1px var(--selection);
+  border-top: solid 1px var(--drop-feedback);
   z-index: 10;
   pointer-events: none;
 }
@@ -5139,10 +5141,10 @@ fancy-tree fancy-scroll fancy-tree-item.feedback-drop-bot::after {
   position: absolute;
   content: "";
   display: block;
-  left: 0;
+  left: var(--padding);
   right: 0;
   bottom: 0;
-  border-top: solid 1px var(--selection);
+  border-top: solid 1px var(--drop-feedback);
   z-index: 10;
   pointer-events: none;
 }
@@ -5150,11 +5152,11 @@ fancy-tree fancy-scroll fancy-tree-item.feedback-drop-in::after {
   position: absolute;
   content: "";
   display: block;
-  left: 0;
+  left: var(--padding);
   right: 0;
   bottom: 0;
   top: 0;
-  border: solid 1px var(--selection);
+  border: solid 1px var(--drop-feedback);
   z-index: 10;
   pointer-events: none;
 }

+ 10 - 7
bin/style.less

@@ -5036,6 +5036,8 @@ hide-popover {
 :root {
 	--hover-highlight: rgba(114, 180, 255, 0.5);
 	--selection: #3185ce;
+	--drop-feedback: white;
+
 	--hover: #444;
 
 	--basic-shadow: 2px 2px 3px rgba(0,0,0,.75);
@@ -6065,7 +6067,8 @@ fancy-tree {
 
 			box-sizing: border-box;
 
-			padding-left: calc((var(--depth) - 1) * 1.0em + 0.25em);
+			--padding: calc((var(--depth) - 1) * 1.0em + 0.25em);
+			padding-left: var(--padding);
 			box-sizing: border-box;
 
 			height: 20px;
@@ -6150,10 +6153,10 @@ fancy-tree {
 				position: absolute;
 				content: "";
 				display: block;
-				left: 0;
+				left: var(--padding);
 				right: 0;
 				top: 0;
-				border-top: solid 1px var(--selection);
+				border-top: solid 1px var(--drop-feedback);
 				z-index: 10;
 				pointer-events: none;
 			}
@@ -6162,10 +6165,10 @@ fancy-tree {
 				position: absolute;
 				content: "";
 				display: block;
-				left: 0;
+				left: var(--padding);
 				right: 0;
 				bottom: 0;
-				border-top: solid 1px var(--selection);
+				border-top: solid 1px var(--drop-feedback);
 				z-index: 10;
 				pointer-events: none;
 			}
@@ -6174,11 +6177,11 @@ fancy-tree {
 				position: absolute;
 				content: "";
 				display: block;
-				left: 0;
+				left: var(--padding);
 				right: 0;
 				bottom: 0;
 				top: 0;
-				border: solid 1px var(--selection);
+				border: solid 1px var(--drop-feedback);
 				z-index: 10;
 				pointer-events: none;
 			}

+ 14 - 6
hide/comp/FancyTree.hx

@@ -921,14 +921,22 @@ class FancyTree<TreeItem> extends hide.comp.Component {
 		var rect = element.getBoundingClientRect();
 		var nameRect = element.getBoundingClientRect();
 
-		if (flags.has(Reparent) && event.clientX > nameRect.left + 100) {
-			return Inside;
+		if (!flags.has(Reparent)) {
+			if (event.clientY > rect.top + rect.height / 2.0) {
+				return After;
+			}
+			return Before;
 		}
-
-		if (event.clientY > rect.top + rect.height / 2) {
-			return After;
+		else {
+			final split = 1.0 / 3.0;
+			if (event.clientY < rect.top + rect.height * split) {
+				return Before;
+			}
+			if (event.clientY > rect.top + rect.height * (1.0-split)) {
+				return After;
+			}
+			return Inside;
 		}
-		return Before;
 	}
 
 	public function clearSelection() {