Support for color in JS (as string)

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"

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!(),

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);
+
 ```
 */