From 06b95f755a9ef4cc77eed0b3717ac64b8bdcb136 Mon Sep 17 00:00:00 2001
From: Yota Hamada <yohamta@gmail.com>
Date: Sun, 30 Apr 2023 02:37:18 +0900
Subject: [PATCH] Add Right and Bottom properties to View (#55)

* add right and bottom css property

* update readme
---
 README.md    |  2 ++
 flex.go      | 19 +++++++++++++------
 flex_test.go | 13 +++++++++++++
 html.go      |  8 ++++++++
 view.go      |  2 ++
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index db3d7f6..5a8ef2d 100644
--- a/README.md
+++ b/README.md
@@ -195,7 +195,9 @@ The following table lists the available CSS properties:
 | CSS Property | Type         | Available Values          |
 | -------------- | ------------ | ------------------------- |
 | `left`         | int          | Any integer value         |
+| `right`        | int          | Any integer value         |
 | `top`          | int          | Any integer value         |
+| `bottom`       | int          | Any integer value         |
 | `width`        | int          | Any integer value or percentage |
 | `height`       | int          | Any integer value or percentage |
 | `margin-left`  | int          | Any integer value         |
diff --git a/flex.go b/flex.go
index 9df8665..59670e7 100644
--- a/flex.go
+++ b/flex.go
@@ -213,12 +213,19 @@ func (f *flexEmbed) layout(width, height int, container *containerEmbed) {
 			continue
 		}
 		if c.item.Position == PositionAbsolute {
-			c.bounds = image.Rect(
-				container.frame.Min.X+c.item.Left,
-				container.frame.Min.Y+c.item.Top,
-				container.frame.Min.X+c.item.Left+c.item.Width,
-				container.frame.Min.Y+c.item.Top+c.item.Height,
-			)
+			x := container.frame.Min.X
+			if c.item.Left != 0 {
+				x = container.frame.Min.X + c.item.Left
+			} else if c.item.Right != 0 {
+				x = container.frame.Max.X - c.item.Right - c.item.Width
+			}
+			y := container.frame.Min.Y
+			if c.item.Top != 0 {
+				y = container.frame.Min.Y + c.item.Top
+			} else if c.item.Bottom != 0 {
+				y = container.frame.Max.Y - c.item.Bottom - c.item.Height
+			}
+			c.bounds = image.Rect(x, y, x+c.item.Width, y+c.item.Height)
 			c.item.frame = c.bounds
 			c.absolute = true
 			continue
diff --git a/flex_test.go b/flex_test.go
index 196d47c..f332c4d 100644
--- a/flex_test.go
+++ b/flex_test.go
@@ -157,6 +157,19 @@ func TestAbsolutePos(t *testing.T) {
 	require.Equal(t, image.Rect(x, y, x+w, y+h), mock.Frame)
 }
 
+func TestAbsolutePosRightBottom(t *testing.T) {
+	mock := mockHandler{}
+
+	f1 := (&View{Width: 100, Height: 100}).addChild(
+		&View{Position: PositionAbsolute, Width: 10, Height: 10, Right: 40, Bottom: 50, Handler: &mock},
+	)
+
+	f1.Update()
+	f1.Draw(nil)
+
+	assert.Equal(t, image.Rect(50, 40, 60, 50), mock.Frame)
+}
+
 func TestAbsolutePosNested(t *testing.T) {
 	f1 := &View{
 		Width:      150,
diff --git a/html.go b/html.go
index 0069f46..60678a3 100644
--- a/html.go
+++ b/html.go
@@ -212,10 +212,18 @@ var styleMapper = map[string]mapper[View]{
 		parseFunc: parseNumber,
 		setFunc:   setFunc(func(v *View, val int) { v.Left = val }),
 	},
+	"right": {
+		parseFunc: parseNumber,
+		setFunc:   setFunc(func(v *View, val int) { v.Right = val }),
+	},
 	"top": {
 		parseFunc: parseNumber,
 		setFunc:   setFunc(func(v *View, val int) { v.Top = val }),
 	},
+	"bottom": {
+		parseFunc: parseNumber,
+		setFunc:   setFunc(func(v *View, val int) { v.Bottom = val }),
+	},
 	"width": {
 		parseFunc: parseLength,
 		setFunc: setFunc(func(v *View, val cssLength) {
diff --git a/view.go b/view.go
index a99f130..9453a82 100644
--- a/view.go
+++ b/view.go
@@ -15,7 +15,9 @@ import (
 type View struct {
 	// TODO: Remove these fields in the future.
 	Left         int
+	Right        int
 	Top          int
+	Bottom       int
 	Width        int
 	WidthInPct   float64
 	Height       int