Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +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; return nodeRefs;
}); });
}; };
}, [overlayRef]); }, [overlayRef, layoutNode.id]);
function onPointerOverLeaf(event: React.PointerEvent<HTMLDivElement>) { function onPointerOverLeaf(event: React.PointerEvent<HTMLDivElement>) {
event.stopPropagation(); 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 // Calculates the new size of the two nodes on either side of the handle, based on the position of the cursor
const handlePointerMove = useCallback( const handlePointerMove = useCallback(
(clientX: number, clientY: number) => { throttle(10, (event: React.PointerEvent<HTMLDivElement>) => {
const parentIsRow = parentNode.flexDirection === FlexDirection.Row; if (trackingPointer === event.pointerId) {
const combinedStart = parentIsRow ? combinedNodesRect.left : combinedNodesRect.top; const { clientX, clientY } = event;
const combinedEnd = parentIsRow const parentIsRow = parentNode.flexDirection === FlexDirection.Row;
? combinedNodesRect.left + combinedNodesRect.width const combinedStart = parentIsRow ? combinedNodesRect.left : combinedNodesRect.top;
: combinedNodesRect.top + combinedNodesRect.height; const combinedEnd = parentIsRow
const clientPoint = parentIsRow ? clientX : clientY; ? combinedNodesRect.left + combinedNodesRect.width
// console.log("handlePointerMove", parentNode, index, clientX, clientY, parentRect, combinedNodesRect); : combinedNodesRect.top + combinedNodesRect.height;
if (clientPoint > combinedStart + 10 && clientPoint < combinedEnd - 10) { const clientPoint = parentIsRow ? clientX : clientY;
const halfGap = gapSize / 2; // console.log("handlePointerMove", parentNode, index, clientX, clientY, parentRect, combinedNodesRect);
const sizeNode1 = clientPoint - combinedStart - halfGap; if (clientPoint > combinedStart + 10 && clientPoint < combinedEnd - 10) {
const sizeNode2 = combinedEnd - clientPoint + halfGap; const halfGap = gapSize / 2;
const resizeAction: LayoutTreeResizeNodeAction = { const sizeNode1 = clientPoint - combinedStart - halfGap;
type: LayoutTreeActionType.ResizeNode, const sizeNode2 = combinedEnd - clientPoint + halfGap;
resizeOperations: [ const resizeAction: LayoutTreeResizeNodeAction = {
{ type: LayoutTreeActionType.ResizeNode,
nodeId: parentNode.children![index].id, resizeOperations: [
size: parseFloat((sizeNode1 * pixelToSizeRatio).toPrecision(5)), {
}, nodeId: parentNode.children![index].id,
{ size: parseFloat((sizeNode1 * pixelToSizeRatio).toPrecision(5)),
nodeId: parentNode.children![index + 1].id, },
size: parseFloat((sizeNode2 * pixelToSizeRatio).toPrecision(5)), {
}, nodeId: parentNode.children![index + 1].id,
], size: parseFloat((sizeNode2 * pixelToSizeRatio).toPrecision(5)),
}; },
const setPendingAction: LayoutTreeSetPendingAction = { ],
type: LayoutTreeActionType.SetPendingAction, };
action: resizeAction, 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 // 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] [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 // Don't render if we are dealing with the last child of a parent
if (index + 1 >= parentNode.children!.length) { if (index + 1 >= parentNode.children!.length) {
return; return;
@ -795,7 +788,7 @@ const ResizeHandle = <T,>({ parentNode, index, dispatch, nodeRefsAtom, siblingSi
onPointerDown={onPointerDown} onPointerDown={onPointerDown}
onGotPointerCapture={onPointerCapture} onGotPointerCapture={onPointerCapture}
onLostPointerCapture={onPointerRelease} onLostPointerCapture={onPointerRelease}
onPointerMove={onPointerMove} onPointerMove={handlePointerMove}
onPointerEnter={startResize} onPointerEnter={startResize}
> >
<div className="line" /> <div className="line" />

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

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