Fix canvas fill condition not working when there's only 1 fill

Author: BirjuVachhani

lib/src/api/models/color_rgb.dart

@@ -68,6 +68,11 @@ class ColorRGB extends Equatable with SerializableMixin {
   /// Factory constructor for creating a new [ColorRGB] instance from JSON data.
   factory ColorRGB.fromJson(Map json) => _$ColorRGBFromJson(json);
 
+  static ColorRGB? fromColorRGBA(ColorRGBA? color) {
+    if (color == null) return null;
+    return ColorRGB(r: color.r, g: color.g, b: color.b);
+  }
+
   @override
   Map toJson() => _$ColorRGBToJson(this);
 

lib/src/api/models/color_rgba.dart

@@ -5,7 +5,7 @@
 import 'package:equatable/equatable.dart';
 import 'package:json_annotation/json_annotation.dart';
 
-import '../mixins.dart';
+import '../../../codelessly_api.dart';
 
 part 'color_rgba.g.dart';
 
@@ -81,6 +81,43 @@ class ColorRGBA with EquatableMixin, SerializableMixin {
   /// Factory constructor for creating a new [ColorRGBA] instance form JSON data.
   factory ColorRGBA.fromJson(Map json) => _$ColorRGBAFromJson(json);
 
+  /// Factory constructor for creating a new [ColorRGBA] instance form JSON data.
+  /// Returns null if cannot parse the JSON.
+  static ColorRGBA? tryFromJson(Map? json) {
+    if (json == null) return null;
+    try {
+      return ColorRGBA.fromJson(json);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /// Factory constructor for creating a new [ColorRGBA] instance from hex string.
+  static ColorRGBA? fromHex(String hex) {
+    String hexCode = hex.replaceAll('#', '').toUpperCase();
+    if (hexCode.length == 6) {
+      hexCode = 'FF$hexCode';
+    }
+
+    if (!RegExp(r'^[0-9A-F]{8}$', caseSensitive: false).hasMatch(hexCode)) {
+      return null;
+    }
+
+    return ColorRGBA(
+      r: int.parse(hexCode.substring(2, 4), radix: 16) / 255,
+      g: int.parse(hexCode.substring(4, 6), radix: 16) / 255,
+      b: int.parse(hexCode.substring(6, 8), radix: 16) / 255,
+      a: int.parse(hexCode.substring(0, 2), radix: 16) / 255,
+    );
+  }
+
   @override
   Map toJson() => _$ColorRGBAToJson(this);
+
+  /// Creates a [PaintModel] with this color.
+  PaintModel toPaint([String? id]) => PaintModel.solid(
+        id: id ?? generateId(),
+        color: ColorRGB.fromColorRGBA(this),
+        opacity: a,
+      );
 }

lib/src/api/models/variables_model.dart

@@ -19,29 +19,25 @@ enum VariableType {
   /// Boolean type. Represents a boolean value.
   boolean,
 
+  /// Color type. Represents a color.
+  color,
+
   /// List type. Represents a list of values.
   list,
 
   /// Map type. Represents a map.
   map;
 
   /// Returns a string representation of the variable type.
-  String get label {
-    switch (this) {
-      case VariableType.integer:
-        return 'Integer';
-      case VariableType.text:
-        return 'Text';
-      case VariableType.decimal:
-        return 'Decimal';
-      case VariableType.boolean:
-        return 'Boolean';
-      case VariableType.list:
-        return 'List';
-      case VariableType.map:
-        return 'Map';
-    }
-  }
+  String get label => switch (this) {
+        VariableType.integer => 'Integer',
+        VariableType.text => 'Text',
+        VariableType.decimal => 'Decimal',
+        VariableType.boolean => 'Boolean',
+        VariableType.color => 'Color',
+        VariableType.list => 'List',
+        VariableType.map => 'Map',
+      };
 }
 
 /// Store information of a variable. [id] must not be empty when creating a
@@ -125,6 +121,7 @@ class VariableData
         VariableType.integer => num.tryParse(value).toInt(),
         VariableType.decimal => num.tryParse(value).toDouble(),
         VariableType.boolean => bool.tryParse(value, caseSensitive: false),
+        VariableType.color => ColorRGBA.fromHex(value),
         VariableType.map => tryJsonDecode(value),
         VariableType.list => value.toList(),
       };
@@ -140,6 +137,10 @@ String? sanitizeValueForVariableType(String? value, VariableType type) {
     VariableType.decimal => num.tryParse(value).toDouble()?.toString(),
     VariableType.boolean =>
       bool.tryParse(value, caseSensitive: false)?.toString(),
+    VariableType.color =>
+      RegExp(r'^#[0-9a-fA-F]{2,8}$', caseSensitive: false).hasMatch(value)
+          ? value.toUpperCase()
+          : null,
     // TODO: this could be a bit expensive. Maybe enable only when required!
     // VariableType.map => tryJsonDecode(value),
     // VariableType.list => value.toList(),

lib/src/api/models/variables_model.g.dart

@@ -2,6 +2,8 @@ import 'dart:convert';
 
 import 'package:collection/collection.dart';
 
+import '../../codelessly_api.dart';
+
 /// Declares extensions on [Object].
 extension ObjectExt on Object? {
   /// Converts given string to a typed value if possible.
@@ -17,6 +19,10 @@ extension ObjectExt on Object? {
       double => value.toDouble().tryCast<R>() ?? defaultValue,
       num => value.toNum().tryCast<R>() ?? defaultValue,
       bool => value.toBool().tryCast<R>() ?? defaultValue,
+      ColorRGBA => value.toColorRGBA().tryCast<R>() ?? defaultValue,
+      ColorRGB => ColorRGB.fromColorRGBA(value.toColorRGBA()).tryCast<R>() ??
+          defaultValue,
+      PaintModel => value.toColorRGBA()?.toPaint().tryCast<R>() ?? defaultValue,
       _ when R.isMap => value.toMap().tryCast<R>(),
       _ when R.isList || R.isIterable => value.toList<R>(),
       _ when R.isSet => value.toSet<R>(),
@@ -163,6 +169,17 @@ extension ConversionExt on Object? {
     return null;
   }
 
+  /// Converts given object to [ColorRGBA] if possible. Returns null otherwise.
+  ColorRGBA? toColorRGBA() {
+    final value = this;
+    if (value == null) return null;
+    if (value is ColorRGBA) return value;
+    if (value is String) return ColorRGBA.fromHex(value);
+    if (value is ColorRGB) return value.toColorRGBA();
+
+    return null;
+  }
+
   /// Converts given object to a map if possible. Returns null otherwise.
   Map? toMap() {
     if (this == null) return null;