Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-08 00:21:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Resize handle improvements (#299)

Browse Source 
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.
This commit is contained in:
Evan Simkowitz 2024-08-30 12:31:03 -07:00 committed by GitHub
parent e488862355
commit e9b78c354f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/layout/lib/layoutModel.ts
View File

@ -48,8 +48,11 @@ import { getCenter, navigateDirectionToOffset, setTransform } from "./utils";
interface ResizeContext { interface ResizeContext {
handleId: string; handleId: string;
pixelToSizeRatio: number; pixelToSizeRatio: number;
displayContainerRect?: Dimensions;
resizeHandleStartPx: number; resizeHandleStartPx: number;
beforeNodeId: string;
beforeNodeStartSize: number; beforeNodeStartSize: number;
afterNodeId: string;
afterNodeStartSize: number; afterNodeStartSize: number;
} }
@ -929,18 +932,22 @@ export class LayoutModel {
*/ */
onResizeMove(resizeHandle: ResizeHandleProps, x: number, y: number) { onResizeMove(resizeHandle: ResizeHandleProps, x: number, y: number) {
const parentIsRow = resizeHandle.flexDirection === FlexDirection.Row; const parentIsRow = resizeHandle.flexDirection === FlexDirection.Row;
// 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 parentNode = findNode(this.treeState.rootNode, resizeHandle.parentNodeId);
const beforeNode = parentNode.children![resizeHandle.parentIndex]; const beforeNode = parentNode.children![resizeHandle.parentIndex];
const afterNode = parentNode.children![resizeHandle.parentIndex + 1]; 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 addlProps = this.getter(this.additionalProps); const addlProps = this.getter(this.additionalProps);
const pixelToSizeRatio = addlProps[resizeHandle.parentNodeId]?.pixelToSizeRatio; const pixelToSizeRatio = addlProps[resizeHandle.parentNodeId]?.pixelToSizeRatio;
if (beforeNode && afterNode && pixelToSizeRatio) { if (beforeNode && afterNode && pixelToSizeRatio) {
this.resizeContext = { this.resizeContext = {
handleId: resizeHandle.id, handleId: resizeHandle.id,
displayContainerRect: this.displayContainerRef.current?.getBoundingClientRect(),
resizeHandleStartPx: resizeHandle.centerPx, resizeHandleStartPx: resizeHandle.centerPx,
beforeNodeId: beforeNode.id,
afterNodeId: afterNode.id,
beforeNodeStartSize: beforeNode.size, beforeNodeStartSize: beforeNode.size,
afterNodeStartSize: afterNode.size, afterNodeStartSize: afterNode.size,
pixelToSizeRatio, 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 clientDiff = (this.resizeContext.resizeHandleStartPx - clientPoint) * this.resizeContext.pixelToSizeRatio;
const minNodeSize = MinNodeSizePx * this.resizeContext.pixelToSizeRatio; const minNodeSize = MinNodeSizePx * this.resizeContext.pixelToSizeRatio;
const beforeNodeSize = this.resizeContext.beforeNodeStartSize - clientDiff; const beforeNodeSize = this.resizeContext.beforeNodeStartSize - clientDiff;
@ -968,11 +977,11 @@ export class LayoutModel {
type: LayoutTreeActionType.ResizeNode, type: LayoutTreeActionType.ResizeNode,
resizeOperations: [ resizeOperations: [
{ {
nodeId: beforeNode.id, nodeId: this.resizeContext.beforeNodeId,
size: beforeNodeSize, size: beforeNodeSize,
}, },
{ {
nodeId: afterNode.id, nodeId: this.resizeContext.afterNodeId,
size: afterNodeSize, size: afterNodeSize,
}, },
], ],

28
frontend/layout/lib/tilelayout.less
View File

@ -41,27 +41,29 @@
.resize-handle { .resize-handle {
z-index: var(--zindex-layout-resize-handle); z-index: var(--zindex-layout-resize-handle);
.line {
visibility: hidden;
}
&.flex-row { &.flex-row {
cursor: ew-resize; cursor: ew-resize;
.line { .line {
height: 100%; height: 100%;
margin-left: calc(var(--gap-size-px) - 1px); margin-left: calc(var(--gap-size-px) - 1px);
border-left: 2px solid var(--accent-color);
} }
} }
&.flex-column { &.flex-column {
cursor: ns-resize; cursor: ns-resize;
.line { .line {
margin-top: calc(var(--gap-size-px) - 1px); 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); 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 { .tile-node {
@ -133,13 +135,9 @@
.prefers-reduced-motion { .prefers-reduced-motion {
.tile-layout { .tile-layout {
&.animate { transition-duration: none !important;
.tile-node, transition-timing-function: none !important;
.placeholder { transition-property: none !important;
transition-duration: none; transition-delay: none !important;
transition-timing-function: none;
transition-property: none;
}
}
} }
} }