Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-17 20:51:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix error where resize handle doesn't work after creating new block

Browse Source
This commit is contained in:
Evan Simkowitz 2024-07-03 15:31:39 -07:00
parent 741ea2d0ae
commit 449f8bf7ef
No known key found for this signature in database
2 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/faraday/lib/TileLayout.tsx
View File

@ -565,7 +565,7 @@ const OverlayNode = <T,>({
return nodeRefs;
});
};
}, [overlayRef]);
}, [overlayRef, layoutNode.id]);
function onPointerOverLeaf(event: React.PointerEvent<HTMLDivElement>) {
event.stopPropagation();
@ -718,40 +718,43 @@ const ResizeHandle = <T,>({ parentNode, index, dispatch, nodeRefsAtom, siblingSi
// Calculates the new size of the two nodes on either side of the handle, based on the position of the cursor
const handlePointerMove = useCallback(
(clientX: number, clientY: number) => {
const parentIsRow = parentNode.flexDirection === FlexDirection.Row;
const combinedStart = parentIsRow ? combinedNodesRect.left : combinedNodesRect.top;
const combinedEnd = parentIsRow
? combinedNodesRect.left + combinedNodesRect.width
: combinedNodesRect.top + combinedNodesRect.height;
const clientPoint = parentIsRow ? clientX : clientY;
// console.log("handlePointerMove", parentNode, index, clientX, clientY, parentRect, combinedNodesRect);
if (clientPoint > combinedStart + 10 && clientPoint < combinedEnd - 10) {
const halfGap = gapSize / 2;
const sizeNode1 = clientPoint - combinedStart - halfGap;
const sizeNode2 = combinedEnd - clientPoint + halfGap;
const resizeAction: LayoutTreeResizeNodeAction = {
type: LayoutTreeActionType.ResizeNode,
resizeOperations: [
{
nodeId: parentNode.children![index].id,
size: parseFloat((sizeNode1 * pixelToSizeRatio).toPrecision(5)),
},
{
nodeId: parentNode.children![index + 1].id,
size: parseFloat((sizeNode2 * pixelToSizeRatio).toPrecision(5)),
},
],
};
const setPendingAction: LayoutTreeSetPendingAction = {
type: LayoutTreeActionType.SetPendingAction,
action: resizeAction,
};
throttle(10, (event: React.PointerEvent<HTMLDivElement>) => {
if (trackingPointer === event.pointerId) {
const { clientX, clientY } = event;
const parentIsRow = parentNode.flexDirection === FlexDirection.Row;
const combinedStart = parentIsRow ? combinedNodesRect.left : combinedNodesRect.top;
const combinedEnd = parentIsRow
? combinedNodesRect.left + combinedNodesRect.width
: combinedNodesRect.top + combinedNodesRect.height;
const clientPoint = parentIsRow ? clientX : clientY;
// console.log("handlePointerMove", parentNode, index, clientX, clientY, parentRect, combinedNodesRect);
if (clientPoint > combinedStart + 10 && clientPoint < combinedEnd - 10) {
const halfGap = gapSize / 2;
const sizeNode1 = clientPoint - combinedStart - halfGap;
const sizeNode2 = combinedEnd - clientPoint + halfGap;
const resizeAction: LayoutTreeResizeNodeAction = {
type: LayoutTreeActionType.ResizeNode,
resizeOperations: [
{
nodeId: parentNode.children![index].id,
size: parseFloat((sizeNode1 * pixelToSizeRatio).toPrecision(5)),
},
{
nodeId: parentNode.children![index + 1].id,
size: parseFloat((sizeNode2 * pixelToSizeRatio).toPrecision(5)),
},
],
};
const setPendingAction: LayoutTreeSetPendingAction = {
type: LayoutTreeActionType.SetPendingAction,
action: resizeAction,
};
dispatch(setPendingAction);
dispatch(setPendingAction);
}
}
},
[dispatch, parentNode, parentRect, combinedNodesRect, pixelToSizeRatio, gapSize]
}),
[dispatch, trackingPointer, parentNode, parentRect, combinedNodesRect, pixelToSizeRatio, gapSize]
);
// We want to use pointer capture so the operation continues even if the pointer leaves the bounds of the handle
@ -773,16 +776,6 @@ const ResizeHandle = <T,>({ parentNode, index, dispatch, nodeRefsAtom, siblingSi
[dispatch]
);
// Only track pointer moves if we have a captured pointer.
const onPointerMove = useCallback(
throttle(10, (event: React.PointerEvent<HTMLDivElement>) => {
if (trackingPointer === event.pointerId) {
handlePointerMove(event.clientX, event.clientY);
}
}),
[trackingPointer, handlePointerMove]
);
// Don't render if we are dealing with the last child of a parent
if (index + 1 >= parentNode.children!.length) {
return;
@ -795,7 +788,7 @@ const ResizeHandle = <T,>({ parentNode, index, dispatch, nodeRefsAtom, siblingSi
onPointerDown={onPointerDown}
onGotPointerCapture={onPointerCapture}
onLostPointerCapture={onPointerRelease}
onPointerMove={onPointerMove}
onPointerMove={handlePointerMove}
onPointerEnter={startResize}
>
<div className="line" />

1
frontend/faraday/lib/tilelayout.less
View File

@ -28,7 +28,6 @@
z-index: 2;
}
.tile-node,
.overlay-node {
display: flex;
flex: 0 1 auto;