From 3ea524694ecebda99634e130e8384bc324fc94fe Mon Sep 17 00:00:00 2001
From: Olivier Goffart <ogoffart@sixtyfps.io>
Date: Fri, 16 Oct 2020 12:41:38 +0200
Subject: [PATCH] Support for color in JS (as string)

---
 api/sixtyfps-node/native/Cargo.toml |  1 +
 api/sixtyfps-node/native/lib.rs     | 12 +++++-
 tests/cases/types/color.60          | 59 +++++++++++++++++++++++++----
 3 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/api/sixtyfps-node/native/Cargo.toml b/api/sixtyfps-node/native/Cargo.toml
index 217dc192e..415628ad3 100644
--- a/api/sixtyfps-node/native/Cargo.toml
+++ b/api/sixtyfps-node/native/Cargo.toml
@@ -23,6 +23,7 @@ sixtyfps-interpreter = { path="../../../sixtyfps_runtime/interpreter" }
 sixtyfps-corelib = { path="../../../sixtyfps_runtime/corelib" }
 scoped-tls-hkt = "0.1"
 neon = "0.5.0"
+css-color-parser2 = "1.0.1"
 
 [build-dependencies]
 neon-build = "0.5.0"
diff --git a/api/sixtyfps-node/native/lib.rs b/api/sixtyfps-node/native/lib.rs
index 73c342dff..e64194621 100644
--- a/api/sixtyfps-node/native/lib.rs
+++ b/api/sixtyfps-node/native/lib.rs
@@ -150,7 +150,11 @@ fn to_eval_value<'cx>(
             Ok(Value::Number(val.downcast_or_throw::<JsNumber, _>(cx)?.value()))
         }
         Type::String => Ok(Value::String(val.to_string(cx)?.value().into())),
-        Type::Color | Type::Array(_) => todo!("conversion to this type is not yet implemented"),
+        Type::Color => {
+            let c = val.to_string(cx)?.value().parse::<css_color_parser2::Color>().or_else(|e| cx.throw_error(&e.to_string()))?;
+            Ok(Value::Color(sixtyfps_corelib::Color::from_argb_u8((c.a * 255.) as u8, c.r, c.g, c.b)))
+        }
+        Type::Array(_) => todo!("conversion to this type is not yet implemented"),
         Type::Resource => Ok(Value::String(val.to_string(cx)?.value().into())),
         Type::Bool => Ok(Value::Bool(val.downcast_or_throw::<JsBoolean, _>(cx)?.value())),
         Type::Object(o) => {
@@ -240,7 +244,11 @@ fn to_js_value<'cx>(
             }
             js_object.as_value(cx)
         }
-        Value::Color(c) => JsNumber::new(cx, c.as_argb_encoded()).as_value(cx),
+        Value::Color(c) => JsString::new(
+            cx,
+            &format!("#{:02x}{:02x}{:02x}{:02x}", c.alpha(), c.red(), c.green(), c.blue()),
+        )
+        .as_value(cx),
         Value::PathElements(_) => todo!(),
         Value::EasingCurve(_) => todo!(),
         Value::EnumerationValue(..) => todo!(),
diff --git a/tests/cases/types/color.60 b/tests/cases/types/color.60
index 40f13d3cf..2c3ea87ca 100644
--- a/tests/cases/types/color.60
+++ b/tests/cases/types/color.60
@@ -18,20 +18,37 @@ Test := Rectangle {
     property<color> r3: #ff0000;
     property<color> r4: #f00f;
     property<color> r5: #ff0000ff;
+
+    property<color> y1: yellow;
+    property<color> y2: #ff0;
+
+    property<color> g1: #999;
 }
 
 /*
 ```cpp
 Test t;
-assert(t.get_r1() == t.get_r2());
-assert(t.get_r1() == t.get_r3());
-assert(t.get_r1() == t.get_r4());
-assert(t.get_r1() == t.get_r5());
-assert(t.get_b1() == t.get_b2());
-assert(t.get_b1() == t.get_b3());
-assert(t.get_b1() == t.get_b4());
-assert(t.get_b1() == t.get_b5());
+assert_eq(t.get_r1(), t.get_r2());
+assert_eq(t.get_r1(), t.get_r3());
+assert_eq(t.get_r1(), t.get_r4());
+assert_eq(t.get_r1(), t.get_r5());
+assert_eq(t.get_b1(), t.get_b2());
+assert_eq(t.get_b1(), t.get_b3());
+assert_eq(t.get_b1(), t.get_b4());
+assert_eq(t.get_b1(), t.get_b5());
 assert(t.get_b1() != t.get_r5());
+assert_eq(t.get_y1(), t.get_y2());
+
+auto red = sixtyfps::Color::from_argb_float(1, 1, 0, 0);
+auto blue = sixtyfps::Color::from_rgb_float(0, 0, 1);
+auto g = sixtyfps::Color::from_rgb_uint8(0x99, 0x99, 0x99);
+assert_eq(t.get_r1(), red);
+assert_eq(t.get_b1(), blue);
+assert_eq(t.get_g1(), g);
+assert_eq(t.get_y1(), sixtyfps::Color::from_argb_encoded(0xffffff00));
+
+t.set_g1(blue);
+assert_eq(t.get_g1(), t.get_b1());
 ```
 
 
@@ -47,6 +64,18 @@ assert_eq!(t.get_b1(), t.get_b3());
 assert_eq!(t.get_b1(), t.get_b4());
 assert_eq!(t.get_b1(), t.get_b5());
 assert_ne!(t.get_b1(), t.get_r5());
+assert_eq!(t.get_y1(), t.get_y2());
+
+let red = sixtyfps::Color::from_argb_f32(1., 1., 0., 0.);
+let blue = sixtyfps::Color::from_rgb_f32(0., 0., 1.);
+let g = sixtyfps::Color::from_rgb_u8(0x99, 0x99, 0x99);
+assert_eq!(t.get_r1(), red);
+assert_eq!(t.get_b1(), blue);
+assert_eq!(t.get_g1(), g);
+assert_eq!(t.get_y1(), sixtyfps::Color::from_argb_encoded(0xffffff00));
+
+t.set_g1(blue);
+assert_eq!(t.get_g1(), t.get_b1());
 ```
 
 ```js
@@ -60,6 +89,20 @@ assert(t.b1 == t.b3);
 assert(t.b1 == t.b4);
 assert(t.b1 == t.b5);
 assert(t.b1 != t.r5);
+
+let red = "#ffff0000";
+let blue = "#ff0000ff";
+let g = "#ff999999";
+assert.equal(t.r1, red);
+assert.equal(t.b1, blue);
+assert.equal(t.g1, g);
+assert.equal(t.y1, "#ffffff00");
+
+t.g1 = "blue";
+assert.equal(t.g1, t.b1);
+t.g1 = "#f00";
+assert.equal(t.g1, t.r1);
+
 ```
 */