attach drag handler to body for better experience

lineupjs · Mar 31, 2020 · d74607b · d74607b
1 parent 2fcc3d6
commit d74607b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/styles/engine/_header.scss b/src/styles/engine/_header.scss
@@ -98,6 +98,10 @@
   }
 }
 
+.#{$lu_css_prefix}-resizing {
+  cursor: col-resize !important;
+}
+
 // FIXME
 .#{$lu_css_prefix}-dialog-sub-nested > section {
   margin-bottom: $lu_engine_grip_gap + 15px;

diff --git a/src/ui/header.ts b/src/ui/header.ts
@@ -306,6 +306,7 @@ export function dragWidth(col: Column, node: HTMLElement) {
     ueberElement.removeEventListener('mousemove', mouseMove);
     ueberElement.removeEventListener('mouseup', mouseUp);
     ueberElement.removeEventListener('mouseleave', mouseUp);
+    ueberElement.classList.remove(cssClass('resizing'));
     node.style.width = null;
 
     if (Math.abs(start - end) < 2) {
@@ -323,10 +324,11 @@ export function dragWidth(col: Column, node: HTMLElement) {
     node.classList.add(cssClass('change-width'));
 
     start = evt.clientX;
-    ueberElement = <HTMLElement>node.closest('header')!;
+    ueberElement = <HTMLElement>node.closest('body') || <HTMLElement>node.closest(`.${cssClass()}`)!; // take the whole body or root lineup
     ueberElement.addEventListener('mousemove', mouseMove);
     ueberElement.addEventListener('mouseup', mouseUp);
     ueberElement.addEventListener('mouseleave', mouseUp);
+    ueberElement.classList.add(cssClass('resizing'));
   };
   handle.onclick = (evt) => {
     // avoid resorting