Add support for resizing Drawers (#4440)

Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/resizing-anchor/resizing-anchor.scss

@@ -41,13 +41,20 @@ body.resizing {
     transition: background 0.2s 0s;
   }
 
-  &:hover {
+  &:hover, &.resizing {
     &::after {
       background: var(--blue);
       transition: background 0.2s 0.5s;
     }
   }
 
+  &:hover.wasDragging {
+    &::after {
+      background: transparent;
+      transition: background 0.2s 0s;
+    }
+  }
+
   &.disabled {
     display: none;
   }
@@ -64,16 +71,6 @@ body.resizing {
       margin-left: 0;
     }
 
-    .resizing & {
-      $expandedHeight: 200px;
-      height: $expandedHeight;
-      margin-top: -$expandedHeight * 0.5;
-
-      &::after {
-        margin-top: $expandedHeight * 0.5;
-      }
-    }
-
     &.trailing {
       bottom: -$dimension * 0.5;
     }
@@ -85,17 +82,6 @@ body.resizing {
     cursor: col-resize;
     width: $dimension;
 
-    // Expand hoverable area while resizing to keep highlighting resizer.
-    // Otherwise, cursor can move far away dropping hover indicator.
-    .resizing & {
-      $expandedWidth: 200px;
-      width: $expandedWidth;
-
-      &.trailing {
-        right: -$expandedWidth * 0.5;
-      }
-    }
-
     &.leading {
       left: -$dimension * 0.5;
     }

src/renderer/components/resizing-anchor/resizing-anchor.tsx

@@ -24,6 +24,7 @@ import React from "react";
 import { action, observable, makeObservable } from "mobx";
 import _ from "lodash";
 import { cssNames, noop } from "../../utils";
+import { observer } from "mobx-react";
 
 export enum ResizeDirection {
   HORIZONTAL = "horizontal",
@@ -162,9 +163,12 @@ function directionDelta(P1: number, P2: number, M: number): number | false {
   return false;
 }
 
+@observer
 export class ResizingAnchor extends React.PureComponent<Props> {
   @observable lastMouseEvent?: MouseEvent;
-  @observable.ref ref?: React.RefObject<HTMLDivElement>;
+  ref = React.createRef<HTMLDivElement>();
+  @observable isDragging = false;
+  @observable wasDragging = false;
 
   static defaultProps = {
     onStart: noop,
@@ -192,7 +196,13 @@ export class ResizingAnchor extends React.PureComponent<Props> {
       throw new Error("maxExtent must be >= minExtent");
     }
 
-    this.ref = React.createRef<HTMLDivElement>();
+    const cur = props.getCurrentExtent();
+
+    if (cur > props.maxExtent) {
+      props.onDrag(props.maxExtent);
+    } else if (cur < props.minExtent) {
+      props.onDrag(props.minExtent);
+    }
   }
 
   componentWillUnmount() {
@@ -211,6 +221,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     document.addEventListener("mousemove", this.onDrag);
     document.addEventListener("mouseup", this.onDragEnd);
     document.body.classList.add(ResizingAnchor.IS_RESIZING);
+    this.isDragging = true;
 
     this.lastMouseEvent = undefined;
     onStart();
@@ -296,6 +307,10 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     document.removeEventListener("mousemove", this.onDrag);
     document.removeEventListener("mouseup", this.onDragEnd);
     document.body.classList.remove(ResizingAnchor.IS_RESIZING);
+    this.isDragging = false;
+    this.wasDragging = true;
+
+    setTimeout(() => this.wasDragging = false, 200);
   };
 
   render() {
@@ -303,7 +318,7 @@ export class ResizingAnchor extends React.PureComponent<Props> {
 
     return <div
       ref={this.ref}
-      className={cssNames("ResizingAnchor", direction, placement, { disabled })}
+      className={cssNames("ResizingAnchor", direction, placement, { disabled, resizing: this.isDragging, wasDragging: this.wasDragging })}
       onMouseDown={this.onDragInit}
       onDoubleClick={onDoubleClick}
     />;