How to use the @bentley/ui-core.Rectangle function in @bentley/ui-core

public getInitialBounds(zoneId: WidgetZoneId, props: ZonesManagerProps): RectangleProps {
    const zonesBounds = Rectangle.create(props.zonesBounds);
    const rootBounds = Rectangle.createFromSize(zonesBounds.getSize());
    if (zoneId === 8 && props.isInFooterMode) {
      return new Rectangle(rootBounds.left, rootBounds.bottom, rootBounds.right, rootBounds.bottom);
    }

    const rootSize = rootBounds.getSize();
    const cell = getZoneCell(zoneId);
    const left = rootBounds.left + rootSize.width * cell.col / 3;
    const right = rootBounds.left + rootSize.width * (cell.col + 1) / 3;
    const top = rootBounds.top + rootSize.height * cell.row / 3;
    const bottom = rootBounds.top + rootSize.height * (cell.row + 1) / 3;
    const zoneBounds = new Rectangle(left, top, right, bottom);

    const zone = props.zones[zoneId];
    if (zone.widgets.length === 1 && zone.widgets[0] === zone.id)
      return zoneBounds;

    const mergedBounds = zone.widgets.reduce((acc, wId) => {
      if (zoneId === wId)

public getInitialBounds(zoneId: WidgetZoneId, props: ZonesManagerProps): RectangleProps {
    const zonesBounds = Rectangle.create(props.zonesBounds);
    const rootBounds = Rectangle.createFromSize(zonesBounds.getSize());
    if (zoneId === 8 && props.isInFooterMode) {
      return new Rectangle(rootBounds.left, rootBounds.bottom, rootBounds.right, rootBounds.bottom);
    }

    const rootSize = rootBounds.getSize();
    const cell = getZoneCell(zoneId);
    const left = rootBounds.left + rootSize.width * cell.col / 3;
    const right = rootBounds.left + rootSize.width * (cell.col + 1) / 3;
    const top = rootBounds.top + rootSize.height * cell.row / 3;
    const bottom = rootBounds.top + rootSize.height * (cell.row + 1) / 3;
    const zoneBounds = new Rectangle(left, top, right, bottom);

    const zone = props.zones[zoneId];
    if (zone.widgets.length === 1 && zone.widgets[0] === zone.id)
      return zoneBounds;

    const mergedBounds = zone.widgets.reduce((acc, wId) => {
      if (zoneId === wId)
        return acc;

      const bounds = this.getInitialBounds(wId, props);
      return acc.outerMergeWith(bounds);
    }, zoneBounds);
    return mergedBounds.toProps();
  }

public getBounds(): RectangleProps {
    if (!this._tab.current)
      return new Rectangle();
    return this._tab.current.getBoundingClientRect();
  }

public getBounds(): RectangleProps {
    if (!this._widget.current)
      return new Rectangle();
    return this._widget.current.getBoundingClientRect();
  }

public getContainerBounds(): Rectangle {
      if (!this.props.container)
        return new Rectangle(0, 0, window.innerWidth, window.innerHeight);

      const containerBounds = this.props.container.getBoundingClientRect();
      return new Rectangle(containerBounds.left, containerBounds.top, containerBounds.right, containerBounds.bottom);
    }

public getBounds(): RectangleProps {
    if (!this._widget.current)
      return new Rectangle();
    return this._widget.current.getBoundingClientRect();
  }

public getContainerBounds(): Rectangle {
      if (!this.props.container)
        return new Rectangle(0, 0, window.innerWidth, window.innerHeight);

      const containerBounds = this.props.container.getBoundingClientRect();
      return new Rectangle(containerBounds.left, containerBounds.top, containerBounds.right, containerBounds.bottom);
    }