starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-26 03:11:12 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Even better layouts

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 18:33:01 -07:00
parent 402b2a551f
commit 0d82cc7574
6 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src-web/components/RequestResponse.tsx
View File

@@ -2,16 +2,25 @@ import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { useKeyValue } from '../hooks/useKeyValue';
import { clamp } from '../lib/clamp';
import { RequestPane } from './RequestPane';
import { ResponsePane } from './ResponsePane';
import { ResizeBar } from './Workspace';
interface Props {
style: CSSProperties;
vertical?: boolean;
}
const rqst = { gridArea: 'rqst' };
const resp = { gridArea: 'resp' };
const drag = { gridArea: 'drag' };
export default function RequestResponse() {
const DEFAULT = 0.5;
const DEFAULT = 0.5;
const MIN_WIDTH_PX = 10;
const MIN_HEIGHT_PX = 100;
export default function RequestResponse({ style, vertical }: Props) {
const containerRef = useRef<HTMLDivElement>(null);
const widthKv = useKeyValue<number>({ key: 'body_width', defaultValue: DEFAULT });
const heightKv = useKeyValue<number>({ key: 'body_height', defaultValue: DEFAULT });
@@ -22,14 +31,14 @@ export default function RequestResponse() {
null,
);
const vertical = false;
const styles = useMemo<CSSProperties>(
() => ({
...style,
gridTemplate: vertical
? `
' ${rqst.gridArea}' ${1 - height}fr
' ${rqst.gridArea}' minmax(0,${1 - height}fr)
' ${drag.gridArea}' auto
' ${resp.gridArea}' ${height}fr
' ${resp.gridArea}' minmax(0,${height}fr)
/ 1fr
`
: `
@@ -37,7 +46,7 @@ export default function RequestResponse() {
/ ${1 - width}fr auto ${width}fr
`,
}),
[vertical, width, height],
[vertical, width, height, style],
);
const unsub = () => {
@@ -68,13 +77,21 @@ export default function RequestResponse() {
move: (e: MouseEvent) => {
e.preventDefault(); // Prevent text selection and things
if (vertical) {
const newHeightPx = startHeight - (e.clientY - mouseStartY);
const newHeight = newHeightPx / containerRect.height;
heightKv.set(newHeight);
const maxHeightPx = containerRect.height - MIN_HEIGHT_PX;
const newHeightPx = clamp(
startHeight - (e.clientY - mouseStartY),
MIN_HEIGHT_PX,
maxHeightPx,
);
heightKv.set(newHeightPx / containerRect.height);
} else {
const newWidthPx = startWidth - (e.clientX - mouseStartX);
const newWidth = newWidthPx / containerRect.width;
widthKv.set(newWidth);
const maxWidthPx = containerRect.width - MIN_WIDTH_PX;
const newWidthPx = clamp(
startWidth - (e.clientX - mouseStartX),
MIN_WIDTH_PX,
maxWidthPx,
);
widthKv.set(newWidthPx / containerRect.width);
}
},
up: (e: MouseEvent) => {
@@ -93,9 +110,9 @@ export default function RequestResponse() {
return (
<div ref={containerRef} className="grid w-full h-full p-3" style={styles}>
<div style={rqst}>
<RequestPane fullHeight />
<RequestPane fullHeight={!vertical} />
</div>
<div style={drag} className={classnames('relative', vertical ? 'h-3' : 'w-3')}>
<div style={drag} className={classnames('relative flex-grow-0', vertical ? 'h-3' : 'w-3')}>
<ResizeBar
isResizing={isResizing}
onResizeStart={handleResizeStart}