Merge pull request #304 from lineupjs/sgratzl/drag

lineupjs · Apr 16, 2020 · 9f0d7a0 · 9f0d7a0
2 parents e11ed21 + a471095
commit 9f0d7a0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/internal/drag.ts b/src/internal/drag.ts
@@ -1,3 +1,4 @@
+import {cssClass} from '../styles';
 
 /** @internal */
 export interface IDragHandleOptions {
@@ -38,6 +39,8 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     minDelta: 2
   }, options);
 
+  let ueberElement: HTMLElement | null = null;
+
   // converts the given x coordinate to be relative to the given element
   const toContainerRelative = (x: number, elem: HTMLElement | SVGElement) => {
     const rect = elem.getBoundingClientRect();
@@ -73,9 +76,10 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     evt.preventDefault();
 
     const end = toContainerRelative(evt.clientX, o.container) - handleShift;
-    o.container.removeEventListener('mousemove', <any>mouseMove);
-    o.container.removeEventListener('mouseup', <any>mouseUp);
-    o.container.removeEventListener('mouseleave', <any>mouseUp);
+    ueberElement!.removeEventListener('mousemove', <any>mouseMove);
+    ueberElement!.removeEventListener('mouseup', <any>mouseUp);
+    ueberElement!.removeEventListener('mouseleave', <any>mouseUp);
+    ueberElement!.classList.remove(cssClass('dragging'));
 
     if (Math.abs(start - end) < 2) {
       //ignore
@@ -96,9 +100,11 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     start = last = toContainerRelative(evt.clientX, o.container) - handleShift;
 
     // register other event listeners
-    o.container.addEventListener('mousemove', <any>mouseMove);
-    o.container.addEventListener('mouseup', <any>mouseUp);
-    o.container.addEventListener('mouseleave', <any>mouseUp);
+    ueberElement = <HTMLElement>handle.closest('body') || <HTMLElement>handle.closest(`.${cssClass()}`)!; // take the whole body or root lineup
+    ueberElement.addEventListener('mousemove', <any>mouseMove);
+    ueberElement.addEventListener('mouseup', <any>mouseUp);
+    ueberElement.addEventListener('mouseleave', <any>mouseUp);
+    ueberElement.classList.add(cssClass('dragging'));
 
     o.onStart(handle, start, 0, evt);
   };

diff --git a/src/styles/engine/_header.scss b/src/styles/engine/_header.scss
@@ -102,6 +102,10 @@
   cursor: col-resize !important;
 }
 
+.#{$lu_css_prefix}-dragging {
+  cursor: ew-resize !important;
+}
+
 // FIXME
 .#{$lu_css_prefix}-dialog-sub-nested > section {
   margin-bottom: $lu_engine_grip_gap + 15px;

diff --git a/src/styles/renderer/_histogram.scss b/src/styles/renderer/_histogram.scss
@@ -86,6 +86,7 @@ span.#{$lu_css_prefix}-mapping-hint {
   top: 0;
   height: 100%;
   border-right: 1px solid black;
+  transform: translate(-1px, 0);
   transition: border-width 0.2s ease;
   width: 1px;
   cursor: ew-resize;
@@ -104,6 +105,7 @@ span.#{$lu_css_prefix}-mapping-hint {
 .#{$lu_css_prefix}-histogram-max {
   right: 0;
   border-right: none;
+  transform: translate(1px, 0);
   border-left: 1px solid black;
 }