in packages/sdk/ui-react/src/splitter/splitter.tsx [242:310]
public calculatePaneSizes(splitterIndex: number, e: any): void {
// get dimensions of both panes and the splitter
const pane1Index = splitterIndex;
const pane2Index = splitterIndex + 1;
const pane1Dimensions = this.panes[pane1Index].ref.getBoundingClientRect();
const pane2Dimensions = this.panes[pane2Index].ref.getBoundingClientRect();
const splitterDimensions = this.splitters[splitterIndex].dimensions;
// the primary pane's size will be the difference between the top (horizontal) or left (vertical) of the pane,
// and the mouse's Y (horizontal) or X (vertical) position
const { minSizes } = this.props;
const condition1 = this.props.orientation === 'horizontal';
const rightEval1 = () => {
return (this.panes[pane1Index].size = Math.max(
e.clientY - pane1Dimensions.top,
minSizes[pane1Index] || MIN_PANE_SIZE
));
};
const leftEval1 = () => {
return (this.panes[pane1Index].size = Math.max(
e.clientX - pane1Dimensions.left,
minSizes[pane1Index] || MIN_PANE_SIZE
));
};
let primarySize = condition1 ? rightEval1() : leftEval1();
// the local container size will be the sum of the heights (horizontal)
// or widths (vertical) of both panes and the splitter
const localContainerSize =
this.props.orientation === 'horizontal'
? pane1Dimensions.height + pane2Dimensions.height + splitterDimensions.height
: pane1Dimensions.width + pane2Dimensions.width + splitterDimensions.width;
// bound the bottom (horizontal) or right (vertical) of the primary pane to the bottom or right of the container
const splitterSize = this.props.orientation === 'horizontal' ? splitterDimensions.height : splitterDimensions.width;
if (primarySize + splitterSize > localContainerSize) {
primarySize = localContainerSize - splitterSize;
}
// the secondary pane's size will be the remaining height (horizontal) or width (vertical)
// left in the container after subtracting the size of the splitter and primary pane from the total size
const condition2 = this.props.orientation === 'horizontal';
const leftEval2 = () => {
return (this.panes[pane2Index].size = Math.max(
localContainerSize - primarySize - splitterDimensions.height,
this.props.minSizes[pane2Index] || MIN_PANE_SIZE
));
};
const rightEval2 = () => {
return (this.panes[pane2Index].size = Math.max(
localContainerSize - primarySize - splitterDimensions.width,
this.props.minSizes[pane2Index] || MIN_PANE_SIZE
));
};
const secondarySize = condition2 ? leftEval2() : rightEval2();
const currentPaneSizes = this.state.paneSizes;
currentPaneSizes[pane1Index] = primarySize;
currentPaneSizes[pane2Index] = secondarySize;
if (this.props.onSizeChange) {
const globalContainerSize = this.getContainerSize();
const paneSizes = currentPaneSizes.map(size => ({
absolute: size,
percentage: (size / globalContainerSize) * 100,
}));
this.props.onSizeChange(paneSizes);
}
this.setState({ paneSizes: currentPaneSizes });
}