From aa1ca1163182e8a272feac0a1f518ef63d5478a6 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <sebastian@malton.name>
Date: Thu, 1 Oct 2020 10:49:29 -0400
Subject: [PATCH] fix review comments

Signed-off-by: Sebastian Malton <sebastian@malton.name>
---
 src/renderer/components/dock/dock.store.ts    |  8 +--
 src/renderer/components/dock/terminal.ts      | 18 +++---
 .../resizing-anchor/resizing-anchor.scss      | 14 ++---
 .../resizing-anchor/resizing-anchor.tsx       | 55 +++++++++++--------
 4 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/src/renderer/components/dock/dock.store.ts b/src/renderer/components/dock/dock.store.ts
index 95f03b13fa..2fed511e75 100644
--- a/src/renderer/components/dock/dock.store.ts
+++ b/src/renderer/components/dock/dock.store.ts
@@ -41,7 +41,7 @@ export class DockStore {
   }
 
   get defaultHeight() {
-    return Math.round(window.innerHeight * 0.4);
+    return Math.round(window.innerHeight / 2.5);
   }
 
   get maxHeight() {
@@ -54,11 +54,7 @@ export class DockStore {
   }
 
   constructor() {
-    const stored = this.storage.get()
-    if (Object.entries(stored).length > 0) {
-      // don't override perfectly good defaults in the class decl
-      Object.assign(this, stored);
-    }
+    Object.assign(this, this.storage.get());
 
     reaction(() => ({
       isOpen: this.isOpen,
diff --git a/src/renderer/components/dock/terminal.ts b/src/renderer/components/dock/terminal.ts
index 5dca59626a..cea1e91292 100644
--- a/src/renderer/components/dock/terminal.ts
+++ b/src/renderer/components/dock/terminal.ts
@@ -172,16 +172,16 @@ export class Terminal {
     // Handle custom hotkey bindings
     if (ctrlKey) {
       switch (code) {
-        // Ctrl+C: prevent terminal exit on windows / linux (?)
-        case "KeyC":
-          if (this.xterm.hasSelection()) return false;
-          break;
+      // Ctrl+C: prevent terminal exit on windows / linux (?)
+      case "KeyC":
+        if (this.xterm.hasSelection()) return false;
+        break;
 
-        // Ctrl+W: prevent unexpected terminal tab closing, e.g. editing file in vim
-        // https://github.com/kontena/lens-app/issues/156#issuecomment-534906480
-        case "KeyW":
-          evt.preventDefault();
-          break;
+      // Ctrl+W: prevent unexpected terminal tab closing, e.g. editing file in vim
+      // https://github.com/kontena/lens-app/issues/156#issuecomment-534906480
+      case "KeyW":
+        evt.preventDefault();
+        break;
       }
     }
 
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.scss b/src/renderer/components/resizing-anchor/resizing-anchor.scss
index fceb3ee73d..310727af2c 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.scss
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.scss
@@ -5,7 +5,7 @@ body.resizing {
 }
 
 .ResizingAnchor {
-  $prominentDimention: 12px;
+  $dimension: 12px;
 
   position: absolute;
   z-index: 10;
@@ -18,14 +18,14 @@ body.resizing {
     left: 0;
     right: 0;
     cursor: row-resize;
-    height: $prominentDimention;
+    height: $dimension;
 
     &.leading {
-      top: -$prominentDimention / 2;
+      top: -$dimension / 2;
     }
 
     &.trailing {
-      bottom: -$prominentDimention / 2;
+      bottom: -$dimension / 2;
     }
   }
 
@@ -33,14 +33,14 @@ body.resizing {
     top: 0;
     bottom: 0;
     cursor: col-resize;
-    width: $prominentDimention;
+    width: $dimension;
 
     &.leading {
-      left: -$prominentDimention / 2;
+      left: -$dimension / 2;
     }
 
     &.trailing {
-      right: -$prominentDimention / 2;
+      right: -$dimension / 2;
     }
   }
 }
diff --git a/src/renderer/components/resizing-anchor/resizing-anchor.tsx b/src/renderer/components/resizing-anchor/resizing-anchor.tsx
index 9be6b5a9ec..f3dff9f50d 100644
--- a/src/renderer/components/resizing-anchor/resizing-anchor.tsx
+++ b/src/renderer/components/resizing-anchor/resizing-anchor.tsx
@@ -45,7 +45,7 @@ interface Props {
   direction: ResizeDirection;
 
   /**
-   * getCurrentExtent should return the current prominent dimention in the
+   * getCurrentExtent should return the current prominent dimension in the
    * given resizing direction. Width for HORIZONTAL and height for VERTICAL
    */
   getCurrentExtent: () => number;
@@ -111,40 +111,42 @@ interface Position {
 /**
  * Return the direction delta, but ignore drags leading up to a moved item
  *  1. `->|` => return `false`
- *  2. `<-|` => return `directed length (P1, P2)` (negative)
+ *  2. `<-|` => return `directed length (M, P2)` (negative)
  *  3. `-|>` => return `directed length (M, P2)` (positive)
  *  4. `<|-` => return `directed length (M, P2)` (negative)
- *  5. `|->` => return `directed length (P1, P2)` (positive)
+ *  5. `|->` => return `directed length (M, P2)` (positive)
  *  6. `|<-` => return `false`
- * @param P the starting position on the number line
- * @param Q the ending position on the number line
+ * @param P1 the starting position on the number line
+ * @param P2 the ending position on the number line
  * @param M a third point that determines if the delta is meaningful
  * @returns the directional difference between including appropriate sign.
  */
-function directionDelta(P1: number, P2: number, B: number): number | false {
-  if (P1 < B) {
-    if (P2 >= B) {
+function directionDelta(P1: number, P2: number, M: number): number | false {
+  const delta = Math.abs(M - P2)
+
+  if (P1 < M) {
+    if (P2 >= M) {
       // case 3
-      return Math.abs(B - P2)
+      return delta
     }
 
     if (P2 < P1) {
       // case 2
-      return -Math.abs(P1 - P2)
+      return -delta
     }
 
     // case 1
     return false
   }
 
-  if (P2 < B) {
+  if (P2 < M) {
     // case 4
-    return -Math.abs(B - P2)
+    return -delta
   }
 
   if (P1 < P2) {
     // case 5
-    return Math.abs(P1 - P2)
+    return delta
   }
 
   // case 6
@@ -153,7 +155,7 @@ function directionDelta(P1: number, P2: number, B: number): number | false {
 
 export class ResizingAnchor extends React.PureComponent<Props> {
   @observable lastMouseEvent?: MouseEvent
-  @observable elem: HTMLElement
+  @observable.ref ref?: React.RefObject<HTMLDivElement>;
 
   static defaultProps = {
     onStart: noop,
@@ -177,10 +179,8 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     if (props.maxExtent < props.minExtent) {
       throw new Error("maxExtent must be >= minExtent")
     }
-  }
 
-  componentDidMount() {
-    this.elem = findDOMNode(this) as HTMLElement
+    this.ref = React.createRef<HTMLDivElement>()
   }
 
   componentWillUnmount() {
@@ -205,7 +205,12 @@ export class ResizingAnchor extends React.PureComponent<Props> {
   }
 
   calculateDelta(from: Position, to: Position): number | false {
-    const boundingBox = this.elem.getBoundingClientRect()
+    const node = this.ref.current
+    if (!node) {
+      return false
+    }
+
+    const boundingBox = node.getBoundingClientRect()
 
     if (this.props.direction === ResizeDirection.HORIZONTAL) {
       const barX = Math.round(boundingBox.x + (boundingBox.width / 2))
@@ -242,6 +247,10 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     const { maxExtent, minExtent, getCurrentExtent, growthDirection } = this.props
     const { onDrag, onMaxExtentExceed, onMinExtentSubceed, onMaxExtentSubceed, onMinExtentExceed } = this.props
     const delta = this.calculateDelta(this.lastMouseEvent, event)
+
+    // always update the last mouse event
+    this.lastMouseEvent = event
+
     if (delta === false) {
       return
     }
@@ -261,12 +270,10 @@ export class ResizingAnchor extends React.PureComponent<Props> {
     } else if (previousExtent >= maxExtent && maxExtent >= unboundedExtent) {
       onMaxExtentSubceed()
     }
-
-    this.lastMouseEvent = event
   }, 100)
 
   @action
-  onDragEnd = (event: MouseEvent) => {
+  onDragEnd = (_event: MouseEvent) => {
     this.props.onEnd()
     document.removeEventListener("mousemove", this.onDrag)
     document.removeEventListener("mouseup", this.onDragEnd)
@@ -275,6 +282,10 @@ export class ResizingAnchor extends React.PureComponent<Props> {
 
   render() {
     const { disabled, direction, placement } = this.props
-    return <div className={cssNames("ResizingAnchor", direction, placement, { disabled })} onMouseDown={this.onDragInit} />
+    return <div
+      ref={this.ref}
+      className={cssNames("ResizingAnchor", direction, placement, { disabled })}
+      onMouseDown={this.onDragInit}
+    />
   }
 }