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

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

View File

@ -565,7 +565,7 @@ const OverlayNode = <T,>({
return nodeRefs;
});
};
}, [overlayRef]);
}, [overlayRef, layoutNode.id]);
function onPointerOverLeaf(event: React.PointerEvent<HTMLDivElement>) {
event.stopPropagation();
@ -718,7 +718,9 @@ 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) => {
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
@ -750,8 +752,9 @@ const ResizeHandle = <T,>({ parentNode, index, dispatch, nodeRefsAtom, siblingSi
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" />

View File

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