Let's build browser engine! in typescript vol3 Layout Box, Dimensions

sanemat

Murahashi [Matt] Kenichi

Posted on April 29, 2019

Let's build browser engine! in typescript vol3 Layout Box, Dimensions

Layout box and dimensions for layout tree.

  • LayoutBox.Create, shortcut for new LayoutBox()
  • Rect#expandedBy
  • Dimensions#paddingBox
  • Dimensions#borderBox
  • Dimensions#marginBox

LayoutBox.Create, shortcut for new LayoutBox()

test("layout box create", () => {
  expect(() => LayoutBox.Create(new BoxType.AnonymousBlock())).not.toThrow();
});
Enter fullscreen mode Exit fullscreen mode
export class LayoutBox {
  (snip)

  static Create(boxType: BoxType) {
    return new LayoutBox(
      new Dimensions(
        new Rect(0, 0, 0, 0),
        new EdgeSizes(0, 0, 0, 0),
        new EdgeSizes(0, 0, 0, 0),
        new EdgeSizes(0, 0, 0, 0)
      ),
      boxType,
      []
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Rect#expandedBy

test("expandedBy", () => {
  expect(new Rect(12, 13, 4, 5).expandedBy(new EdgeSizes(1, 2, 3, 4))).toEqual(
    new Rect(11, 10, 7, 12)
  );
});
Enter fullscreen mode Exit fullscreen mode
export class Rect {
  (snip)

  expandedBy(edge: EdgeSizes): Rect {
    return new Rect(
      this.x - edge.left,
      this.y - edge.top,
      this.width + edge.left + edge.right,
      this.height + edge.top + edge.bottom
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Dimensions#paddingBox
Dimensions#borderBox
Dimensions#marginBox


const exampleDimensions = new Dimensions(
  new Rect(20, 30, 5, 5),
  new EdgeSizes(2, 3, 4, 5),
  new EdgeSizes(2, 3, 4, 5),
  new EdgeSizes(2, 3, 4, 5)
);

test("Dimensions#paddingBox", () => {
  expect(exampleDimensions.paddingBox()).toEqual(new Rect(18, 26, 10, 14));
});

test("Dimensions#borderBox", () => {
  expect(exampleDimensions.borderBox()).toEqual(new Rect(16, 22, 15, 23));
});

test("Dimensions#marginBox", () => {
  expect(exampleDimensions.marginBox()).toEqual(new Rect(14, 18, 20, 32));
});
Enter fullscreen mode Exit fullscreen mode
export class Dimensions {
  (nits)

  // The area covered by the content area plus its padding.
  paddingBox(): Rect {
    return this.content.expandedBy(this.padding);
  }

  // The area covered by the content area plus padding and borders.
  borderBox(): Rect {
    return this.paddingBox().expandedBy(this.border);
  }

  // The area covered by the content area plus padding, borders, and margin.
  marginBox(): Rect {
    return this.borderBox().expandedBy(this.margin);
  }
}
Enter fullscreen mode Exit fullscreen mode

done!

references

series

💖 💪 🙅 🚩
sanemat
Murahashi [Matt] Kenichi

Posted on April 29, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related