Make drag handles follow cursor more closely (#1003)

Author: duranb

src/components/console/ConsoleDragHandle.svelte

@@ -10,7 +10,8 @@
 
   const dispatch = createEventDispatcher();
 
-  let clientY: number | null = null;
+  let dragElement: HTMLElement;
+  let previousHeight: number = 0;
 
   function getPixelHeight(value: string | number): number {
     if (typeof value === 'string' && /%/.test(value)) {
@@ -22,33 +23,33 @@
   }
 
   function onMouseMove(event: MouseEvent): void {
-    if (clientY == null) {
-      return;
-    }
-
-    const dy = event.clientY - clientY;
-    const newHeight = rowHeight - dy;
+    const dy = event.clientY - dragElement.getBoundingClientRect().y;
+    const newHeight = clamp(rowHeight - dy, getPixelHeight(minHeight), getPixelHeight(maxHeight));
 
-    dispatch('updateRowHeight', { newHeight: clamp(newHeight, getPixelHeight(minHeight), getPixelHeight(maxHeight)) });
-
-    clientY = event.clientY;
+    if (newHeight !== previousHeight) {
+      dispatch('updateRowHeight', { newHeight });
+      previousHeight = newHeight;
+    }
   }
 
-  function onMouseDown(event: MouseEvent): void {
-    clientY = event.clientY;
+  function onMouseDown(): void {
     document.addEventListener('mousemove', onMouseMove, false);
   }
 
   function onMouseUp(): void {
-    clientY = null;
     document.removeEventListener('mousemove', onMouseMove, false);
   }
 </script>
 
 <svelte:window on:mouseup={onMouseUp} />
 
 <div class="console-drag-handle-container">
-  <div class="console-drag-handle-height" role="none" on:mousedown|preventDefault={onMouseDown} />
+  <div
+    bind:this={dragElement}
+    class="console-drag-handle-height"
+    role="none"
+    on:mousedown|preventDefault={onMouseDown}
+  />
 </div>
 
 <style>
@@ -75,4 +76,10 @@
   .console-drag-handle-height:hover {
     background-color: var(--st-gray-30);
   }
+
+  .console-drag-handle-height:hover,
+  .console-drag-handle-height:active {
+    background-color: var(--st-gray-30);
+    z-index: 4;
+  }
 </style>

src/components/timeline/RowDragHandleHeight.svelte

@@ -8,35 +8,31 @@
 
   const dispatch = createEventDispatcher();
 
-  let clientY: number | null = null;
+  let dragElement: HTMLElement;
+  let previousHeight: number = 0;
 
   function onMouseMove(event: MouseEvent): void {
-    if (clientY == null) {
-      return;
-    }
+    const dy = event.clientY - dragElement.getBoundingClientRect().y;
+    const newHeight = Math.max(rowHeight + dy, ViewConstants.MIN_ROW_HEIGHT);
 
-    const dy = event.clientY - clientY;
-    const newHeight = rowHeight + dy;
-    if (newHeight >= ViewConstants.MIN_ROW_HEIGHT) {
+    if (newHeight !== previousHeight) {
       dispatch('updateRowHeight', { newHeight });
+      previousHeight = newHeight;
     }
-    clientY = event.clientY;
   }
 
-  function onMouseDown(event: MouseEvent): void {
-    clientY = event.clientY;
+  function onMouseDown(): void {
     document.addEventListener('mousemove', onMouseMove, false);
   }
 
   function onMouseUp(): void {
-    clientY = null;
     document.removeEventListener('mousemove', onMouseMove, false);
   }
 </script>
 
 <svelte:window on:mouseup={onMouseUp} />
 
-<div class="row-drag-handle-height" role="none" on:mousedown|capture={onMouseDown} />
+<div bind:this={dragElement} class="row-drag-handle-height" role="none" on:mousedown|capture={onMouseDown} />
 
 <style>
   div {

src/components/timeline/RowHeaderDragHandleWidth.svelte

@@ -9,55 +9,52 @@
 
   const dispatch = createEventDispatcher();
 
-  let clientX: number | null = null;
+  let dragElement: HTMLElement;
+  let previousWidth: number = 0;
 
   function onMouseMove(event: MouseEvent): void {
-    if (clientX == null) {
-      return;
-    }
+    const dx = event.clientX - dragElement.getBoundingClientRect().x;
+    const newWidth = Math.max(rowHeaderWidth + dx, ViewConstants.MIN_MARGIN_LEFT);
 
-    const dx = event.clientX - clientX;
-    const newWidth = rowHeaderWidth + dx;
-    dispatch('updateRowHeaderWidth', {
-      newWidth: newWidth >= ViewConstants.MIN_MARGIN_LEFT ? newWidth : ViewConstants.MIN_MARGIN_LEFT,
-    });
+    if (newWidth !== previousWidth) {
+      dispatch('updateRowHeaderWidth', { newWidth });
+      previousWidth = newWidth;
+    }
 
-    clientX = event.clientX;
     event.stopPropagation();
     event.preventDefault();
   }
 
-  function onMouseDown(event: MouseEvent): void {
-    clientX = event.clientX;
+  function onMouseDown(): void {
     document.addEventListener('mousemove', onMouseMove, false);
   }
 
   function onMouseUp(): void {
-    clientX = null;
     document.removeEventListener('mousemove', onMouseMove, false);
   }
 </script>
 
 <svelte:window on:mouseup={onMouseUp} />
 
-<div class="row-header-drag-handle-height">
+<div class="row-header-drag-handle-width">
   <div
+    bind:this={dragElement}
     style={`transform: translateX(${rowHeaderWidth || 0}px); left: -${width}px; width: ${width}px`}
-    class="row-header-drag-handle-height--handle"
+    class="row-header-drag-handle-width--handle"
     role="none"
     on:mousedown|capture={onMouseDown}
   />
 </div>
 
 <style>
-  .row-header-drag-handle-height {
+  .row-header-drag-handle-width {
     height: 100%;
     pointer-events: none;
     position: absolute;
     width: 100%;
   }
 
-  .row-header-drag-handle-height--handle {
+  .row-header-drag-handle-width--handle {
     background-color: var(--st-gray-20);
     cursor: col-resize;
     height: 100%;
@@ -66,7 +63,7 @@
     z-index: 4;
   }
 
-  .row-header-drag-handle-height--handle:hover {
+  .row-header-drag-handle-width--handle:hover {
     background-color: var(--st-gray-30);
   }
 </style>