From d0f7e5b60f4b60c797d953943f5331a3c2e111dc Mon Sep 17 00:00:00 2001
From: Erik Corry <erik@toit.io>
Date: Tue, 12 Dec 2023 15:40:22 +0100
Subject: [PATCH] Make x, y, w, h all configurable with style sheets.

---
 src/element.toit                        | 12 ++++++++++--
 src/style.toit                          |  8 ++++++++
 tests/horizontal-slider-visualized.toit |  4 ++--
 tests/slider-rotated-visualized.toit    |  4 +---
 tests/slider-visualized.toit            |  4 ++--
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/element.toit b/src/element.toit
index bcc0276..8413929 100644
--- a/src/element.toit
+++ b/src/element.toit
@@ -179,6 +179,12 @@ abstract class Element implements Window:
         invalidate
         border_ = value
         invalidate
+    else if key == "x":
+      x = value
+    else if key == "y":
+      y = value
+    else:
+      print "Unknown style key: '$key'"
 
   abstract type -> string
 
@@ -289,9 +295,9 @@ class Div extends Element:
       invalidate
 
   set-attribute_ key/string value -> none:
-    if key == "width":
+    if key == "w":
       w = value
-    else if key == "height":
+    else if key == "h":
       h = value
     else:
       super key value
@@ -334,6 +340,8 @@ class Label extends Element implements ColoredElement:
       orientation = value
     else if key == "alignment":
       alignment = value
+    else if key == "label":
+      label = value
     else:
       super key value
 
diff --git a/src/style.toit b/src/style.toit
index bb0d914..45768ff 100644
--- a/src/style.toit
+++ b/src/style.toit
@@ -624,6 +624,10 @@ class Style:
   constructor.empty: return EMPTY-STYLE_
 
   constructor
+      --x/int?=null
+      --y/int?=null
+      --w/int?=null
+      --h/int?=null
       --color/int?=null
       --font/Font?=null
       --background=null
@@ -632,6 +636,10 @@ class Style:
       --id-map/Map?=null
       --type-map/Map?=null
       .map_={:}:
+    if x != null: map_["x"] = x
+    if y != null: map_["y"] = y
+    if w != null: map_["w"] = w
+    if h != null: map_["h"] = h
     if color != null: map_["color"] = color
     if font != null: map_["font"] = font
     if border != null: map_["border"] = border
diff --git a/tests/horizontal-slider-visualized.toit b/tests/horizontal-slider-visualized.toit
index 497bbd7..5dc24e1 100644
--- a/tests/horizontal-slider-visualized.toit
+++ b/tests/horizontal-slider-visualized.toit
@@ -55,8 +55,8 @@ main args:
           "slider": Style {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 120,
-              "height": 20,
+              "w": 120,
+              "h": 20,
               "horizontal": true,
           },
           "label": Style --font=sans10 --color=0xffffff,
diff --git a/tests/slider-rotated-visualized.toit b/tests/slider-rotated-visualized.toit
index b951a99..c70d36a 100644
--- a/tests/slider-rotated-visualized.toit
+++ b/tests/slider-rotated-visualized.toit
@@ -52,11 +52,9 @@ main args:
 
   style := Style
       --type-map={
-          "slider": Style {
+          "slider": Style --w=20 --h=100 {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 20,
-              "height": 100,
           },
           "label": Style --font=sans10 --color=0xffffff,
       }
diff --git a/tests/slider-visualized.toit b/tests/slider-visualized.toit
index 7b8ca37..61a42e7 100644
--- a/tests/slider-visualized.toit
+++ b/tests/slider-visualized.toit
@@ -55,8 +55,8 @@ main args:
           "slider": Style {
               "background-hi": heat,
               "background-lo": cold,
-              "width": 20,
-              "height": 100,
+              "w": 20,
+              "h": 100,
           },
           "label": Style --font=sans10 --color=0xffffff,
       }