* Callback to update pending node sizes when a resize handle is dragged. * @param resizeHandle The resize handle that is being dragged. * @param x The X coordinate of the pointer device, in CSS pixels. * @param y The Y coordinate of the pointer device, in CSS pixels.
(resizeHandle: ResizeHandleProps, x: number, y: number)
| 1413 | * @param y The Y coordinate of the pointer device, in CSS pixels. |
| 1414 | */ |
| 1415 | onResizeMove(resizeHandle: ResizeHandleProps, x: number, y: number) { |
| 1416 | const parentIsRow = resizeHandle.flexDirection === FlexDirection.Row; |
| 1417 | |
| 1418 | // If the resize context is out of date, update it and save it for future events. |
| 1419 | if (this.resizeContext?.handleId !== resizeHandle.id) { |
| 1420 | const parentNode = findNode(this.treeState.rootNode, resizeHandle.parentNodeId); |
| 1421 | const beforeNode = parentNode.children![resizeHandle.parentIndex]; |
| 1422 | const afterNode = parentNode.children![resizeHandle.parentIndex + 1]; |
| 1423 | |
| 1424 | const addlProps = this.getter(this.additionalProps); |
| 1425 | const pixelToSizeRatio = addlProps[resizeHandle.parentNodeId]?.pixelToSizeRatio; |
| 1426 | if (beforeNode && afterNode && pixelToSizeRatio) { |
| 1427 | this.resizeContext = { |
| 1428 | handleId: resizeHandle.id, |
| 1429 | displayContainerRect: this.displayContainerRef.current?.getBoundingClientRect(), |
| 1430 | resizeHandleStartPx: resizeHandle.centerPx, |
| 1431 | beforeNodeId: beforeNode.id, |
| 1432 | afterNodeId: afterNode.id, |
| 1433 | beforeNodeStartSize: beforeNode.size, |
| 1434 | afterNodeStartSize: afterNode.size, |
| 1435 | pixelToSizeRatio, |
| 1436 | }; |
| 1437 | } else { |
| 1438 | console.error( |
| 1439 | "Invalid resize handle, cannot get the additional properties for the nodes in the resize handle properties." |
| 1440 | ); |
| 1441 | return; |
| 1442 | } |
| 1443 | } |
| 1444 | |
| 1445 | const clientPoint = parentIsRow |
| 1446 | ? x - this.resizeContext.displayContainerRect?.left |
| 1447 | : y - this.resizeContext.displayContainerRect?.top; |
| 1448 | const clientDiff = (this.resizeContext.resizeHandleStartPx - clientPoint) * this.resizeContext.pixelToSizeRatio; |
| 1449 | const minNodeSize = MinNodeSizePx * this.resizeContext.pixelToSizeRatio; |
| 1450 | const beforeNodeSize = this.resizeContext.beforeNodeStartSize - clientDiff; |
| 1451 | const afterNodeSize = this.resizeContext.afterNodeStartSize + clientDiff; |
| 1452 | |
| 1453 | // If either node will be too small after this resize, don't let it happen. |
| 1454 | if (beforeNodeSize < minNodeSize || afterNodeSize < minNodeSize) { |
| 1455 | return; |
| 1456 | } |
| 1457 | |
| 1458 | const resizeAction: LayoutTreeResizeNodeAction = { |
| 1459 | type: LayoutTreeActionType.ResizeNode, |
| 1460 | resizeOperations: [ |
| 1461 | { |
| 1462 | nodeId: this.resizeContext.beforeNodeId, |
| 1463 | size: beforeNodeSize, |
| 1464 | }, |
| 1465 | { |
| 1466 | nodeId: this.resizeContext.afterNodeId, |
| 1467 | size: afterNodeSize, |
| 1468 | }, |
| 1469 | ], |
| 1470 | }; |
| 1471 | const setPendingAction: LayoutTreeSetPendingAction = { |
| 1472 | type: LayoutTreeActionType.SetPendingAction, |
no test coverage detected