Let's build browser engine! in typescript vol3 Layout Box, Dimensions
Murahashi [Matt] Kenichi
Posted on April 29, 2019
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();
});
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,
[]
);
}
}
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)
);
});
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
);
}
}
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));
});
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);
}
}
done!
references
- Let's build a browser engine! Part 1: Getting started
- mbrubeck/robinson
- sanemat/js-toy-engine
- sanemat/ts-toy-engine
series
- Let's build browser engine! in typescript vol0 Toy browser engine
- Let's build browser engine! in typescript vol1 Canvas with Color
- Let's build browser engine! in typescript vol2 Display Command
- Let's build browser engine! in typescript vol3 Layout Box, Dimensions
- Let's build browser engine! in typescript vol4 Layout Tree to Display List
💖 💪 🙅 🚩
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
webdev Understanding HTTP, Cookies, Email Protocols, and DNS: A Guide to Key Internet Technologies
November 30, 2024
react Axios NPM Package: A Beginner's Guide to Installing and Making HTTP Requests
November 30, 2024
webdev Guide to Cookies, Local Storage, Session Storage, and Other Web Storage Mechanisms
November 30, 2024