-
-
Notifications
You must be signed in to change notification settings - Fork 922
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Adding x,y,width and height inputs to position components on De…
…v Tools (#3263) Adds fields to allow developers to change the x, y, width and height of position components from the dev tools. https://github.com/user-attachments/assets/70f6fe15-488c-4eb2-83bf-6cdc050526d8
- Loading branch information
1 parent
267d680
commit 003ec3a
Showing
9 changed files
with
380 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
packages/flame/lib/src/devtools/connectors/position_component_attributes_connector.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import 'dart:convert'; | ||
| import 'dart:developer'; | ||
|
|
||
| import 'package:flame/components.dart'; | ||
| import 'package:flame/src/devtools/dev_tools_connector.dart'; | ||
|
|
||
| class PositionComponentAttributesConnector extends DevToolsConnector { | ||
| @override | ||
| void init() { | ||
| registerExtension( | ||
| 'ext.flame_devtools.getPositionComponentAttributes', | ||
| (method, parameters) async { | ||
| final id = int.tryParse(parameters['id'] ?? ''); | ||
|
|
||
| final positionComponent = findComponent<PositionComponent>(id); | ||
|
|
||
| if (positionComponent != null) { | ||
| return ServiceExtensionResponse.result( | ||
| json.encode({ | ||
| 'id': id, | ||
| 'x': positionComponent.x, | ||
| 'y': positionComponent.y, | ||
| 'width': positionComponent.width, | ||
| 'height': positionComponent.height, | ||
| }), | ||
| ); | ||
| } else { | ||
| return ServiceExtensionResponse.error( | ||
| ServiceExtensionResponse.extensionError, | ||
| 'No PositionComponent found with id: $id', | ||
| ); | ||
| } | ||
| }, | ||
| ); | ||
|
|
||
| registerExtension( | ||
| 'ext.flame_devtools.setPositionComponentAttributes', | ||
| (method, parameters) async { | ||
| final id = int.tryParse(parameters['id'] ?? ''); | ||
| final attribute = parameters['attribute']; | ||
|
|
||
| final positionComponent = findComponent<PositionComponent>(id); | ||
|
|
||
| if (positionComponent != null) { | ||
| if (attribute == 'x') { | ||
| positionComponent.x = double.parse(parameters['value']!); | ||
| } else if (attribute == 'y') { | ||
| positionComponent.y = double.parse(parameters['value']!); | ||
| } else if (attribute == 'width') { | ||
| positionComponent.width = double.parse(parameters['value']!); | ||
| } else if (attribute == 'height') { | ||
| positionComponent.height = double.parse(parameters['value']!); | ||
| } else { | ||
| return ServiceExtensionResponse.error( | ||
| ServiceExtensionResponse.extensionError, | ||
| 'Invalid attribute: $attribute', | ||
| ); | ||
| } | ||
| return ServiceExtensionResponse.result('Success'); | ||
| } else { | ||
| return ServiceExtensionResponse.error( | ||
| ServiceExtensionResponse.extensionError, | ||
| 'No PositionComponent found with id: $id', | ||
| ); | ||
| } | ||
| }, | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
packages/flame_devtools/lib/providers/position_component_attributes_provider.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| 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); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
packages/flame_devtools/lib/widgets/incremental_number_form_field.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class IncrementalNumberFormField<T extends num> extends StatefulWidget { | ||
| const IncrementalNumberFormField({ | ||
| required this.initialValue, | ||
| required this.label, | ||
| this.onChanged, | ||
| super.key, | ||
| }); | ||
|
|
||
| final String label; | ||
| final T initialValue; | ||
| final void Function(T)? onChanged; | ||
|
|
||
| @override | ||
| State<IncrementalNumberFormField<T>> createState() => | ||
| _IncrementalNumberFormFieldState<T>(); | ||
| } | ||
|
|
||
| class _IncrementalNumberFormFieldState<T extends num> | ||
| extends State<IncrementalNumberFormField<T>> { | ||
| late final _controller = TextEditingController() | ||
| ..text = widget.initialValue.toString(); | ||
|
|
||
| String? errorText; | ||
|
|
||
| @override | ||
| void didUpdateWidget(covariant IncrementalNumberFormField<T> oldWidget) { | ||
| super.didUpdateWidget(oldWidget); | ||
|
|
||
| if (oldWidget.initialValue != widget.initialValue) { | ||
| _controller.text = widget.initialValue.toString(); | ||
| errorText = null; | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| void dispose() { | ||
| _controller.dispose(); | ||
| super.dispose(); | ||
| } | ||
|
|
||
| T _parse() { | ||
| if (T == double) { | ||
| return double.parse(_controller.text) as T; | ||
| } else { | ||
| return int.parse(_controller.text) as T; | ||
| } | ||
| } | ||
|
|
||
| void _tryUpdate(String value) { | ||
| try { | ||
| final value = _parse(); | ||
| _update(value); | ||
| } on Exception catch (_) { | ||
| setState(() { | ||
| errorText = 'Invalid number'; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| void _update(T v) { | ||
| setState(() { | ||
| errorText = null; | ||
| }); | ||
|
|
||
| widget.onChanged?.call(v); | ||
| } | ||
|
|
||
| void _increment() { | ||
| final value = _parse() + 1 as T; | ||
| _update(value); | ||
| _controller.text = value.toString(); | ||
| } | ||
|
|
||
| void _decrement() { | ||
| final value = _parse() - 1 as T; | ||
| _update(value); | ||
| _controller.text = value.toString(); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Row( | ||
| children: [ | ||
| IconButton( | ||
| onPressed: _decrement, | ||
| icon: const Icon(Icons.remove), | ||
| ), | ||
| const SizedBox(width: 8), | ||
| SizedBox( | ||
| width: 100, | ||
| child: TextField( | ||
| decoration: InputDecoration( | ||
| labelText: widget.label, | ||
| errorText: errorText, | ||
| ), | ||
| controller: _controller, | ||
| onChanged: _tryUpdate, | ||
| ), | ||
| ), | ||
| const SizedBox(width: 8), | ||
| IconButton( | ||
| onPressed: _increment, | ||
| icon: const Icon(Icons.add), | ||
| ), | ||
| ], | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.