public calculatePaneSizes()

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 });
  }