cornerCompression1?: number;
  cornerCompression2?: number;
  cornerCompression3?: number;
  debugHasRectBorder: boolean;

    containerHeightProportion: 0.95,

    containerHeightProportion: 0.90,

    downscaleRatio12: 0.7,
    downscaleRatio23: 0.4,
    circleSize: 10,

    downscaleRatio12: 0.75,
    downscaleRatio23: 0.35,
    circleSize: 6,

    centerToEdgeBorderRatio2: 1.0,

    centerToEdgeBorderRatio2: 1.2,
    centerToEdgeBorderRatio3: 1.0,
    cornerCompression1: 0.08,
    cornerCompression2: 0.25,
    cornerCompression3: 0.35,
  debugHasRectBorder: true

    const hasBorder = this.config.debugHasRectBorder

    this.drawRect(newRect);

    this.drawRect(newRect, hasBorder, this.config.cornerCompression1 || 0);

    this.drawRect(layer2.first);
    this.drawRect(layer2.second);

    this.drawRect(
      layer2.first,
      hasBorder,
      this.config.cornerCompression2 || this.config.cornerCompression1 || 0
    );
    this.drawRect(
      layer2.second,
      hasBorder,
      this.config.cornerCompression2 || this.config.cornerCompression1 || 0
    );

        this.nestRectPair(
            layer2.first,
            this.config.downscaleRatio23 || this.config.downscaleRatio12,
            this.config.aspectRatio3 || this.config.aspectRatio2 || this.config.aspectRatio1,
            this.config.centerToEdgeBorderRatio3 || this.config.centerToEdgeBorderRatio2
        ),
        this.nestRectPair(
            layer2.second,
            this.config.downscaleRatio23 || this.config.downscaleRatio12,
            this.config.aspectRatio3 || this.config.aspectRatio2 || this.config.aspectRatio1,
            this.config.centerToEdgeBorderRatio3 || this.config.centerToEdgeBorderRatio2
        ),
    )
    this.drawRect(layer3.first.first);
    this.drawRect(layer3.second.first);
    this.drawRect(layer3.first.second);
    this.drawRect(layer3.second.second);

      this.nestRectPair(
        layer2.first,
        this.config.downscaleRatio23 || this.config.downscaleRatio12,
        this.config.aspectRatio3 ||
          this.config.aspectRatio2 ||
          this.config.aspectRatio1,
        this.config.centerToEdgeBorderRatio3 ||
          this.config.centerToEdgeBorderRatio2
      ),
      this.nestRectPair(
        layer2.second,
        this.config.downscaleRatio23 || this.config.downscaleRatio12,
        this.config.aspectRatio3 ||
          this.config.aspectRatio2 ||
          this.config.aspectRatio1,
        this.config.centerToEdgeBorderRatio3 ||
          this.config.centerToEdgeBorderRatio2
      )
    );
    this.drawRect(
      layer3.first.first,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.second.first,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.first.second,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );
    this.drawRect(
      layer3.second.second,
      hasBorder,
      this.config.cornerCompression3 ||
        this.config.cornerCompression2 ||
        this.config.cornerCompression1 ||
        0
    );

  private drawRect(rect: Rect, hasBorder: boolean = true) {
    this.drawCorners(rect);
    this.drawMidpoints(rect);

  private drawRect(
    rect: Rect,
    hasBorder: boolean,
    cornerCompressionRatio: number
  ) {
    const corners = rect.withScale({
      width: rect.width - cornerCompressionRatio * Math.min(rect.width, rect.height),
      height: rect.height - cornerCompressionRatio * Math.min(rect.width, rect.height),
    });
    const midpoints = {
      left: new Vector2(rect.left, rect.centerY),
      right: new Vector2(rect.right, rect.centerY),
      top: new Vector2(rect.centerX, rect.top),
      bottom: new Vector2(rect.centerX, rect.bottom),
    };

      this.drawLine(corners.topLeft, midpoints.left);
      this.drawLine(corners.topLeft, midpoints.top);
      this.drawLine(corners.topRight, midpoints.right);
      this.drawLine(corners.topRight, midpoints.top);
      this.drawLine(corners.bottomLeft, midpoints.left);
      this.drawLine(corners.bottomLeft, midpoints.bottom);
      this.drawLine(corners.bottomRight, midpoints.right);
      this.drawLine(corners.bottomRight, midpoints.bottom);
  
    this.drawCorners(corners);
    Object.values(midpoints).map((p) => this.drawCircleAt(p));

  private drawMidpoints(rect: Rect) {
    this.drawCircleAt(new Vector2(rect.left, rect.centerY));
    this.drawCircleAt(new Vector2(rect.right, rect.centerY));
    this.drawCircleAt(new Vector2(rect.centerX, rect.top));
    this.drawCircleAt(new Vector2(rect.centerX, rect.bottom));

  public drawLine(p1: IVector2, p2: IVector2) {
      const graphics = new Pixi.Graphics();
      // graphics.position.set(p1.x, p1.y);
      graphics.lineStyle(2, this.config.borderColor, 1);
      graphics.moveTo(p1.x, p1.y);
      graphics.lineTo(p2.x, p2.y);
      this.stage.addChild(graphics);

  public drawCircleAt(point: IVector2) {

  public drawCircleAt(point: IVector2): IVector2 {

    return point;