Make FAB of Scaffold an action item.

Author: BirjuVachhani

lib/src/api/nodes/canvas_node.dart

@@ -15,7 +15,12 @@ part 'canvas_node.g.dart';
 /// Represents a canvas or a screen.
 @JsonSerializable()
 class CanvasNode extends ParentNode
-    with RowColumnMixin, IsolatedMixin, ScrollableMixin, CustomPropertiesMixin {
+    with
+        RowColumnMixin,
+        IsolatedMixin,
+        ScrollableMixin,
+        CustomPropertiesMixin,
+        ParentReactionMixin {
   @override
   final String type = 'canvas';
 
@@ -35,6 +40,15 @@ class CanvasNode extends ParentNode
   /// Whether this canvas is a scaffold.
   bool get isAScaffold => properties.isAScaffold;
 
+  @override
+  List<TriggerType> get triggerTypes => [TriggerType.click];
+
+  @override
+  List<ReactionMixin> get reactiveChildren =>
+      properties.floatingActionButton != null
+          ? [properties.floatingActionButton!]
+          : [];
+
   /// Creates a new [CanvasNode] with given data.
   CanvasNode({
     required super.id,
@@ -90,7 +104,7 @@ class CanvasNode extends ParentNode
     // Custom properties.
     required this.properties,
     Map<String, String>? variables,
-  }): super(fills: fills ?? [PaintModel.whitePaint]) {
+  }) : super(fills: fills ?? [PaintModel.whitePaint]) {
     setRowColumnMixin(
       rowColumnType: rowColumnType,
       mainAxisAlignment: mainAxisAlignment,

lib/src/api/nodes/canvas_node.g.dart

@@ -85,7 +85,7 @@ class FloatingActionButtonNode extends SceneNode with CustomPropertiesMixin {
 /// Holds configurable properties for the [FloatingActionButtonNode].
 @JsonSerializable()
 class FloatingActionButtonProperties
-    with ShapeBorderMixin, SerializableMixin, EquatableMixin {
+    with ShapeBorderMixin, SerializableMixin, EquatableMixin, ReactionMixin {
   /// Background color of the FAB.
   ColorRGBA backgroundColor;
 
@@ -153,13 +153,16 @@ class FloatingActionButtonProperties
     CornerRadius cornerRadius = CornerRadius.zero,
     ColorRGBA? borderColor,
     double? borderWidth,
+    List<Reaction>? reactions,
   }) : labelStyle = labelStyle ?? TextProp.general(fontSize: 14) {
     setShapeBorderMixin(
       shape: shape,
       cornerRadius: cornerRadius,
       borderWidth: borderWidth,
       borderColor: borderColor,
     );
+
+    setReactionMixin(reactions ?? []);
   }
 
   /// Duplicate the current [FloatingActionButtonProperties] with the given data