Component Instances #38

Author: BirjuVachhani

lib/src/api/field_access.dart

@@ -60,11 +60,14 @@ sealed class FieldAccess<T extends Object?> {
 
   final DefaultFieldValueCallback<T>? _defaultValue;
 
+  /// Whether the field requires layout when changed.
+  final bool requiresLayout;
+
   /// The default value of the field.
   DefaultFieldValueCallback<T>? get getDefaultValue => _defaultValue;
 
   /// The serialized value of the field.
-  dynamic serialize(T? obj) => obj;
+  Object? serialize(T? obj) => obj;
 
   /// The dynamic key type of the field, used by the dynamic settings panel to
   /// determine the type of the field to be displayed and modified.
@@ -95,6 +98,7 @@ sealed class FieldAccess<T extends Object?> {
     this.getValue,
     this.setter, {
     DefaultFieldValueCallback<T>? defaultValue,
+    this.requiresLayout = false,
   }) : _defaultValue = defaultValue;
 }
 
@@ -107,6 +111,7 @@ final class StringFieldAccess extends FieldAccess<String> {
     super.getValue,
     super.setter, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
@@ -127,22 +132,23 @@ final class NumFieldAccess<Number extends num?> extends FieldAccess<Number> {
     this.min,
     this.max,
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
   String get dynamicKeyType => getValue() is double ? 'double' : 'int';
 
   /// The minimum value of the field.
-  final FieldGetterCallback<Number>? min;
+  final Number? min;
 
   /// The maximum value of the field.
-  final FieldGetterCallback<Number>? max;
+  final Number? max;
 
   @override
   Map<String, dynamic> get supplementarySchema => {
         if (getValue() is double) 'fractionDigits': 2,
-        if (min case FieldGetterCallback<Number> min) 'min': min(),
-        if (max case FieldGetterCallback<Number> max) 'max': max(),
+        if (min case Number min) 'min': min,
+        if (max case Number max) 'max': max,
       };
 
   @override
@@ -158,6 +164,7 @@ final class BoolFieldAccess extends FieldAccess<bool> {
     super.getValue,
     super.setter, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
@@ -177,6 +184,7 @@ final class ObjectFieldAccess<T extends FieldsHolder> extends FieldAccess<T> {
     super.getValue,
     super.setter, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
@@ -198,21 +206,27 @@ final class TextStyleFieldAccess<T extends TextProp> extends FieldAccess<T> {
     super.getValue,
     super.setter, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
   String get dynamicKeyType => 'text-style';
 
+  @override
+  Object? serialize(TextProp? obj) => obj?.toJson();
+
   @override
   void setValue(Object? value) {
     if (T == StartEndProp) {
       final StartEndProp? typedValue = switch (value) {
+        StartEndProp prop => prop,
         Map() => StartEndProp.fromJson(value),
         _ => null,
       };
       if (typedValue != null) setter(typedValue as T);
     } else if (T == TextProp) {
       final TextProp? typedValue = switch (value) {
+        TextProp prop => prop,
         Map() => TextProp.fromJson(value),
         _ => null,
       };
@@ -230,13 +244,14 @@ final class IconFieldAccess extends FieldAccess<MultiSourceIconModel> {
     super.getValue,
     super.setter, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   @override
   String get dynamicKeyType => 'icon';
 
   @override
-  dynamic serialize(MultiSourceIconModel? obj) => obj?.toJson();
+  Object? serialize(MultiSourceIconModel? obj) => obj?.toJson();
 
   @override
   void setValue(Object? value) {
@@ -259,6 +274,7 @@ final class EnumFieldAccess<T extends Enum> extends FieldAccess<T> {
     super.setter, {
     required super.defaultValue,
     required FieldOptionsGetter<T> options,
+    super.requiresLayout,
   }) : getOptions = options;
 
   /// The options of the field.
@@ -268,7 +284,7 @@ final class EnumFieldAccess<T extends Enum> extends FieldAccess<T> {
   String get dynamicKeyType => 'options';
 
   @override
-  dynamic serialize(T? obj) => obj?.name;
+  Object? serialize(T? obj) => obj?.name;
 
   @override
   Map<String, dynamic> get supplementarySchema => {
@@ -297,6 +313,7 @@ final class IterableFieldAccess<T> extends FieldAccess<List<T>> {
     super.setter,
     this.itemLabel, {
     super.defaultValue,
+    super.requiresLayout,
   });
 
   /// The label of an item in this iterable.
@@ -353,7 +370,7 @@ final class ColorFieldAccess<T extends ColorRGB> extends FieldAccess<T?> {
   String get dynamicKeyType => 'color';
 
   @override
-  dynamic serialize(ColorRGB? obj) => obj?.toJson();
+  Object? serialize(ColorRGB? obj) => obj?.toJson();
 
   @override
   void setValue(Object? value) {
@@ -420,7 +437,7 @@ final class VariantAccess extends FieldAccess<String> {
   String get dynamicKeyType => 'options';
 
   @override
-  dynamic serialize(String? obj) => obj;
+  Object? serialize(String? obj) => obj;
 
   @override
   Map<String, dynamic> get supplementarySchema => {

lib/src/api/mixins.dart

@@ -284,6 +284,23 @@ mixin BlendMixin on BaseNode {
     this.inkWell = inkWell;
   }
 
+  @override
+  FieldsMap generateFields() => {
+        ...super.generateFields(),
+        'effects': IterableFieldAccess<Effect>(
+          'Effects',
+          'A list of fills applied to the node.',
+          () => effects,
+          (value) => effects = value,
+          (item) => switch (item.type) {
+            EffectType.innerShadow => 'Inner Shadow',
+            EffectType.dropShadow => 'Drop Shadow',
+            EffectType.layerBlur => 'Layer Blur',
+            EffectType.backgroundBlur => 'Background Blur',
+          },
+        ),
+      };
+
   @override
   String toString() =>
       "${super.toString()}\n Blend(${"opacity: $opacity, isMask: $isMask, effects: $effects, blendMode: $blendMode, inkWell: $inkWell"})";
@@ -644,6 +661,7 @@ mixin GeometryMixin on BaseNode {
         'strokes': IterableFieldAccess<PaintModel>(
           'Strokes',
           'A list of strokes applied to the node.',
+          requiresLayout: true,
           () => strokes,
           (value) => strokes = value,
           (item) => switch (item.type) {
@@ -725,6 +743,17 @@ mixin ClipMixin on BaseNode {
   }) {
     this.clipsContent = clipsContent;
   }
+
+  @override
+  FieldsMap generateFields() => {
+        ...super.generateFields(),
+        'clipsContent': BoolFieldAccess(
+          'Clip Content',
+          'Clip the content outside.',
+          () => clipsContent,
+          (value) => clipsContent = value,
+        ),
+      };
 }
 
 /// Adds border shape properties to a node enabling the node to have differently
@@ -1009,6 +1038,29 @@ mixin RowColumnMixin on BaseNode {
     this.mainAxisAlignment = mainAxisAlignment;
     this.crossAxisAlignment = crossAxisAlignment;
   }
+
+  @override
+  FieldsMap generateFields() => {
+        ...super.generateFields(),
+        'mainAxisAlignment': EnumFieldAccess<MainAxisAlignmentC>(
+          'Main Axis Alignment',
+          'Alignment of the children along the main axis.',
+          () => mainAxisAlignment,
+          (value) => mainAxisAlignment = value,
+          defaultValue: () => MainAxisAlignmentC.center,
+          options: () => MainAxisAlignmentC.values,
+          requiresLayout: true,
+        ),
+        'crossAxisAlignment': EnumFieldAccess<CrossAxisAlignmentC>(
+          'Cross Axis Alignment',
+          'Alignment of the children along the cross axis.',
+          () => crossAxisAlignment,
+          (value) => crossAxisAlignment = value,
+          defaultValue: () => CrossAxisAlignmentC.center,
+          options: () => CrossAxisAlignmentC.values,
+          requiresLayout: true,
+        ),
+      };
 }
 
 /// A mixin that allows node behave like a placeholder for other nodes.

lib/src/api/models/effect.dart

@@ -1,6 +1,7 @@
 import 'package:codelessly_json_annotation/codelessly_json_annotation.dart';
 import 'package:equatable/equatable.dart';
 
+import '../field_access.dart';
 import '../generate_id.dart';
 import '../mixins.dart';
 import 'models.dart';
@@ -43,33 +44,33 @@ Object? _readId(Map json, String key) => json[key] ?? generateId();
 
 /// A visual effect such as a shadow or blur.
 @JsonSerializable()
-class Effect with EquatableMixin, SerializableMixin {
+class Effect with EquatableMixin, SerializableMixin, FieldsHolder {
   @JsonKey(readValue: _readId)
 
   /// Unique identifier of the effect.
   final String id;
 
   /// Type of effect.
-  final EffectType type;
+  EffectType type;
 
   /// Whether the affect is visible.
-  final bool visible;
+  bool visible;
 
   /// Radius of the effect.
-  final double radius;
+  double radius;
 
   /// The shadow spread, before blur is applied.
-  final double? spread;
+  double? spread;
 
   /// The color of the shadow.
-  final ColorRGBA? color;
+  ColorRGBA? color;
 
   /// Blend mode of the shadow.
   @JsonKey(unknownEnumValue: BlendModeC.srcOver)
-  final BlendModeC? blendMode;
+  BlendModeC? blendMode;
 
   /// How far the shadow is projected in the x and y directions.
-  final Vec? offset;
+  Vec? offset;
 
   /// Creates new [Effect] with given data.
   Effect({
@@ -174,6 +175,42 @@ class Effect with EquatableMixin, SerializableMixin {
     }
   }
 
+  @override
+  FieldsMap generateFields() => {
+        ...super.generateFields(),
+        'color': ColorFieldAccess<ColorRGBA>(
+          'Color',
+          'The color of the effect.',
+          () => color,
+          (value) => color = value,
+        ),
+        'offsetX': NumFieldAccess<double?>(
+          'Offset X',
+          'How far the shadow is projected in the x and y directions.',
+          () => offset?.x,
+          (value) => offset = Vec(value ?? 0, offset?.y ?? 0),
+        ),
+        'offsetY': NumFieldAccess<double?>(
+          'Offset Y',
+          'How far the shadow is projected in the x and y directions.',
+          () => offset?.y,
+          (value) => offset = Vec(offset?.x ?? 0, value ?? 0),
+        ),
+        'spread': NumFieldAccess<double?>(
+          'Spread',
+          'The shadow spread, before blur is applied.',
+          () => spread,
+          (value) => spread = value,
+        ),
+        'radius': NumFieldAccess<double>(
+          'Radius',
+          'Radius of the effect.',
+          () => radius,
+          (value) => radius = value,
+          min: 0,
+        ),
+      };
+
   @override
   List<Object?> get props => [
         id,

lib/src/api/nodes/base_node.dart

@@ -749,6 +749,23 @@ abstract class BaseNode
     positioningMode = PositioningMode.align;
   }
 
+  @override
+  FieldsMap generateFields() => {
+        ...super.generateFields(),
+        'visible': BoolFieldAccess(
+          'Visible',
+          'Whether this widget is visible or not.',
+          () => visible,
+          (value) => visible = value,
+        ),
+        'enabled': BoolFieldAccess(
+          'Exclude',
+          'Whether this widget is enabled or not.',
+          () => !enabled,
+          (value) => enabled = !value,
+        ),
+      };
+
   @override
   List<Object?> get props => [id];
 }