From e9b78c354fda20c299b52cceaea9293713f53264 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:31:03 -0700
Subject: [PATCH] Resize handle improvements (#299)

Adds a delay to the resize handle line first showing so it doesn't flicker when the mouse briefly passes over it. Also removes an unnecessary findNode call that was happening on every move. Also adjusts the pointer offset based on the display container bounding rect.
---
 frontend/layout/lib/layoutModel.ts  | 21 +++++++++++++++------
 frontend/layout/lib/tilelayout.less | 28 +++++++++++++---------------
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/frontend/layout/lib/layoutModel.ts b/frontend/layout/lib/layoutModel.ts
index e3715f7a..59ffbdd9 100644
--- a/frontend/layout/lib/layoutModel.ts
+++ b/frontend/layout/lib/layoutModel.ts
@@ -48,8 +48,11 @@ import { getCenter, navigateDirectionToOffset, setTransform } from "./utils";
 interface ResizeContext {
     handleId: string;
     pixelToSizeRatio: number;
+    displayContainerRect?: Dimensions;
     resizeHandleStartPx: number;
+    beforeNodeId: string;
     beforeNodeStartSize: number;
+    afterNodeId: string;
     afterNodeStartSize: number;
 }
 
@@ -929,18 +932,22 @@ export class LayoutModel {
      */
     onResizeMove(resizeHandle: ResizeHandleProps, x: number, y: number) {
         const parentIsRow = resizeHandle.flexDirection === FlexDirection.Row;
-        const parentNode = findNode(this.treeState.rootNode, resizeHandle.parentNodeId);
-        const beforeNode = parentNode.children![resizeHandle.parentIndex];
-        const afterNode = parentNode.children![resizeHandle.parentIndex + 1];
 
         // If the resize context is out of date, update it and save it for future events.
         if (this.resizeContext?.handleId !== resizeHandle.id) {
+            const parentNode = findNode(this.treeState.rootNode, resizeHandle.parentNodeId);
+            const beforeNode = parentNode.children![resizeHandle.parentIndex];
+            const afterNode = parentNode.children![resizeHandle.parentIndex + 1];
+
             const addlProps = this.getter(this.additionalProps);
             const pixelToSizeRatio = addlProps[resizeHandle.parentNodeId]?.pixelToSizeRatio;
             if (beforeNode && afterNode && pixelToSizeRatio) {
                 this.resizeContext = {
                     handleId: resizeHandle.id,
+                    displayContainerRect: this.displayContainerRef.current?.getBoundingClientRect(),
                     resizeHandleStartPx: resizeHandle.centerPx,
+                    beforeNodeId: beforeNode.id,
+                    afterNodeId: afterNode.id,
                     beforeNodeStartSize: beforeNode.size,
                     afterNodeStartSize: afterNode.size,
                     pixelToSizeRatio,
@@ -953,7 +960,9 @@ export class LayoutModel {
             }
         }
 
-        const clientPoint = parentIsRow ? x : y;
+        const clientPoint = parentIsRow
+            ? x - this.resizeContext.displayContainerRect?.left
+            : y - this.resizeContext.displayContainerRect?.top;
         const clientDiff = (this.resizeContext.resizeHandleStartPx - clientPoint) * this.resizeContext.pixelToSizeRatio;
         const minNodeSize = MinNodeSizePx * this.resizeContext.pixelToSizeRatio;
         const beforeNodeSize = this.resizeContext.beforeNodeStartSize - clientDiff;
@@ -968,11 +977,11 @@ export class LayoutModel {
             type: LayoutTreeActionType.ResizeNode,
             resizeOperations: [
                 {
-                    nodeId: beforeNode.id,
+                    nodeId: this.resizeContext.beforeNodeId,
                     size: beforeNodeSize,
                 },
                 {
-                    nodeId: afterNode.id,
+                    nodeId: this.resizeContext.afterNodeId,
                     size: afterNodeSize,
                 },
             ],
diff --git a/frontend/layout/lib/tilelayout.less b/frontend/layout/lib/tilelayout.less
index 19f609e6..dab35d01 100644
--- a/frontend/layout/lib/tilelayout.less
+++ b/frontend/layout/lib/tilelayout.less
@@ -41,27 +41,29 @@
 
     .resize-handle {
         z-index: var(--zindex-layout-resize-handle);
+
+        .line {
+            visibility: hidden;
+        }
         &.flex-row {
             cursor: ew-resize;
             .line {
                 height: 100%;
                 margin-left: calc(var(--gap-size-px) - 1px);
+                border-left: 2px solid var(--accent-color);
             }
         }
         &.flex-column {
             cursor: ns-resize;
             .line {
                 margin-top: calc(var(--gap-size-px) - 1px);
-            }
-        }
-        &:hover {
-            &.flex-row .line {
-                border-left: 2px solid var(--accent-color);
-            }
-            &.flex-column .line {
                 border-bottom: 2px solid var(--accent-color);
             }
         }
+        &:hover .line {
+            visibility: visible;
+            transition: visibility calc(var(--animation-time-s) * 2) var(--animation-time-s);
+        }
     }
 
     .tile-node {
@@ -133,13 +135,9 @@
 
 .prefers-reduced-motion {
     .tile-layout {
-        &.animate {
-            .tile-node,
-            .placeholder {
-                transition-duration: none;
-                transition-timing-function: none;
-                transition-property: none;
-            }
-        }
+        transition-duration: none !important;
+        transition-timing-function: none !important;
+        transition-property: none !important;
+        transition-delay: none !important;
     }
 }