バウンディングボックスを操作するためのクラス

rect.spec.ts

import Rect from "./rect";

const rect = new Rect({ x: 100, y: 200, width: 300, height: 400 });

describe("Rect", () => {
  describe("Left Top", () => {
    it("左上に動かしたら拡大する", () => {
      const b = rect.moveLeftTop({ x: 50, y: 50 });
      expect(b).toEqual({ x: 50, y: 50, width: 350, height: 550 });
    });
    it("右下に動かしたら縮小する", () => {
      const b = rect.moveLeftTop({ x: 300, y: 300 });
      expect(b).toEqual({ x: 300, y: 300, width: 100, height: 300 });
    });
    it("長さがマイナスになったら反転する", () => {
      const b = rect.moveLeftTop({ x: 1000, y: 1000 });
      expect(b).toEqual({ x: 400, y: 600, width: 600, height: 400 });
    });
  });

  describe("Right Bottom", () => {
    it("左上に動かしたら縮小する", () => {
      const b = rect.moveRightBottom({ x: 300, y: 300 });
      expect(b).toEqual({ x: 100, y: 200, width: 200, height: 100 });
    });
    it("右下に動かしたら拡大する", () => {
      const b = rect.moveRightBottom({ x: 1000, y: 1000 });
      expect(b).toEqual({ x: 100, y: 200, width: 900, height: 800 });
    });
    it("長さがマイナスになったら反転する", () => {
      const b = rect.moveRightBottom({ x: 50, y: 50 });
      expect(b).toEqual({ x: 50, y: 50, width: 50, height: 150 });
    });
  });

  describe("Right Top", () => {
    it("右上に動かしたら拡大する", () => {
      const b = rect.moveRightTop({ x: 500, y: 100 });
      expect(b).toEqual({ x: 100, y: 100, width: 400, height: 500 });
    });
    it("長さがマイナスになったら反転する", () => {
      const b = rect.moveRightTop({ x: 0, y: 1000 });
      expect(b).toEqual({ x: 0, y: 600, width: 100, height: 400 });
    });
  });

  describe("Left Bottom", () => {
    it("右下に動かしたら縮小する", () => {
      const b = rect.moveLeftBottom({ x: 300, y: 300 });
      expect(b).toEqual({ x: 300, y: 200, width: 100, height: 100 });
    });
  });
});

rect.ts

interface Point {
  x: number;
  y: number;
}

interface RectInput {
  x: number;
  y: number;
  width: number;
  height: number;
}

export default class Rect {
  public readonly x: number;
  public readonly y: number;
  public readonly width: number;
  public readonly height: number;

  public constructor(params: RectInput) {
    this.x = params.x;
    this.y = params.y;
    this.width = params.width;
    this.height = params.height;
  }

  public moveLeft({ x }: Point): Rect {
    return new Rect({
      ...this,
      x: Math.min(this.right, x),
      width: Math.abs(this.right - x)
    });
  }

  public moveRight({ x }: Point): Rect {
    return new Rect({
      ...this,
      x: Math.min(this.left, x),
      width: Math.abs(x - this.left)
    });
  }

  public moveTop({ y }: Point): Rect {
    return new Rect({
      ...this,
      y: Math.min(this.bottom, y),
      height: Math.abs(this.bottom - y)
    });
  }

  public moveBottom({ y }: Point): Rect {
    return new Rect({
      ...this,
      y: Math.min(this.top, y),
      height: Math.abs(y - this.top)
    });
  }

  public moveLeftTop(p: Point): Rect {
    return this.moveLeft(p).moveTop(p);
  }

  public moveRightTop(p: Point): Rect {
    return this.moveRight(p).moveTop(p);
  }

  public moveLeftBottom(p: Point): Rect {
    return this.moveLeft(p).moveBottom(p);
  }

  public moveRightBottom(p: Point): Rect {
    return this.moveRight(p).moveBottom(p);
  }

  private get left(): number {
    return this.x;
  }

  private get right(): number {
    return this.x + this.width;
  }

  private get top(): number {
    return this.y;
  }

  private get bottom(): number {
    return this.y + this.height;
  }
}