feat: Adding scale and angle to devtools attributes (#3267)

Adds scaling and angle to the dev tools form. Also fix a caching issue that was presenting outdated values to the user.
flame-engine · Aug 12, 2024 · b2a5e65 · b2a5e65
1 parent a0e99dd
commit b2a5e65
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 5 deletions.
diff --git a/packages/flame/lib/src/devtools/connectors/position_component_attributes_connector.dart b/packages/flame/lib/src/devtools/connectors/position_component_attributes_connector.dart
@@ -22,6 +22,9 @@ class PositionComponentAttributesConnector extends DevToolsConnector {
               'y': positionComponent.y,
               'width': positionComponent.width,
               'height': positionComponent.height,
+              'angle': positionComponent.angle,
+              'scaleX': positionComponent.scale.x,
+              'scaleY': positionComponent.scale.y,
             }),
           );
         } else {
@@ -50,6 +53,12 @@ class PositionComponentAttributesConnector extends DevToolsConnector {
             positionComponent.width = double.parse(parameters['value']!);
           } else if (attribute == 'height') {
             positionComponent.height = double.parse(parameters['value']!);
+          } else if (attribute == 'angle') {
+            positionComponent.angle = double.parse(parameters['value']!);
+          } else if (attribute == 'scaleX') {
+            positionComponent.scale.x = double.parse(parameters['value']!);
+          } else if (attribute == 'scaleY') {
+            positionComponent.scale.y = double.parse(parameters['value']!);
           } else {
             return ServiceExtensionResponse.error(
               ServiceExtensionResponse.extensionError,

diff --git a/packages/flame_devtools/lib/providers/position_component_attributes_provider.dart b/packages/flame_devtools/lib/providers/position_component_attributes_provider.dart
@@ -2,6 +2,8 @@ import 'package:flame_devtools/repository.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 final positionComponentAttributesProvider =
-    FutureProvider.family<PositionComponentAttributes, int>((ref, id) async {
-  return Repository.getPositionComponentAttributes(id: id);
-});
+    FutureProvider.autoDispose.family<PositionComponentAttributes, int>(
+  (ref, id) async {
+    return Repository.getPositionComponentAttributes(id: id);
+  },
+);
diff --git a/packages/flame_devtools/lib/repository.dart b/packages/flame_devtools/lib/repository.dart
@@ -112,12 +112,18 @@ class PositionComponentAttributes {
   final double y;
   final double width;
   final double height;
+  final double angle;
+  final double scaleX;
+  final double scaleY;
 
   PositionComponentAttributes({
     required this.x,
     required this.y,
     required this.width,
     required this.height,
+    required this.angle,
+    required this.scaleX,
+    required this.scaleY,
   });
 
   factory PositionComponentAttributes.fromJson(Map<String, dynamic> json) {
@@ -126,6 +132,9 @@ class PositionComponentAttributes {
       y: json['y'] as double,
       width: json['width'] as double,
       height: json['height'] as double,
+      angle: json['angle'] as double,
+      scaleX: json['scaleX'] as double,
+      scaleY: json['scaleY'] as double,
     );
   }
 }
diff --git a/packages/flame_devtools/lib/widgets/incremental_number_form_field.dart b/packages/flame_devtools/lib/widgets/incremental_number_form_field.dart
@@ -29,8 +29,10 @@ class _IncrementalNumberFormFieldState<T extends num>
     super.didUpdateWidget(oldWidget);
 
     if (oldWidget.initialValue != widget.initialValue) {
-      _controller.text = widget.initialValue.toString();
-      errorText = null;
+      setState(() {
+        _controller.text = widget.initialValue.toString();
+        errorText = null;
+      });
     }
   }
 

diff --git a/packages/flame_devtools/lib/widgets/position_component_attributes_form.dart b/packages/flame_devtools/lib/widgets/position_component_attributes_form.dart
@@ -36,6 +36,7 @@ class PositionComponentAttributesForm extends ConsumerWidget {
             Row(
               children: [
                 IncrementalNumberFormField<double>(
+                  key: Key('x_field_$componentId'),
                   label: 'X',
                   initialValue: attributes.x,
                   onChanged: (v) {
@@ -48,6 +49,7 @@ class PositionComponentAttributesForm extends ConsumerWidget {
                 ),
                 const SizedBox(width: 8),
                 IncrementalNumberFormField<double>(
+                  key: Key('y_field_$componentId'),
                   label: 'Y',
                   initialValue: attributes.y,
                   onChanged: (v) {
@@ -68,6 +70,7 @@ class PositionComponentAttributesForm extends ConsumerWidget {
             Row(
               children: [
                 IncrementalNumberFormField<double>(
+                  key: Key('width_field_$componentId'),
                   label: 'Width',
                   initialValue: attributes.width,
                   onChanged: (v) {
@@ -80,6 +83,7 @@ class PositionComponentAttributesForm extends ConsumerWidget {
                 ),
                 const SizedBox(width: 8),
                 IncrementalNumberFormField<double>(
+                  key: Key('height_field_$componentId'),
                   label: 'Height',
                   initialValue: attributes.height,
                   onChanged: (v) {
@@ -92,6 +96,57 @@ class PositionComponentAttributesForm extends ConsumerWidget {
                 ),
               ],
             ),
+            const SizedBox(height: 8),
+            Text(
+              'Angle',
+              style: Theme.of(context).textTheme.labelLarge,
+            ),
+            IncrementalNumberFormField<double>(
+              key: Key('angle_field_$componentId'),
+              label: 'Radian',
+              initialValue: attributes.angle,
+              onChanged: (v) {
+                Repository.setPositionComponentAttribute(
+                  id: componentId,
+                  attribute: 'angle',
+                  value: v,
+                );
+              },
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Scale',
+              style: Theme.of(context).textTheme.labelLarge,
+            ),
+            Row(
+              children: [
+                IncrementalNumberFormField<double>(
+                  key: Key('scale_x_field_$componentId'),
+                  label: 'X',
+                  initialValue: attributes.scaleX,
+                  onChanged: (v) {
+                    Repository.setPositionComponentAttribute(
+                      id: componentId,
+                      attribute: 'scaleX',
+                      value: v,
+                    );
+                  },
+                ),
+                const SizedBox(width: 8),
+                IncrementalNumberFormField<double>(
+                  key: Key('scale_y_field_$componentId'),
+                  label: 'Y',
+                  initialValue: attributes.scaleY,
+                  onChanged: (v) {
+                    Repository.setPositionComponentAttribute(
+                      id: componentId,
+                      attribute: 'scaleY',
+                      value: v,
+                    );
+                  },
+                ),
+              ],
+            ),
           ],
         );
       },