Merge pull request #51 from ilopX/add-properties-to-tool-factory

Add properties to tool factory.

Author: ilopX

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.23.12
+- Add properties bar to "Tool Panel Factory".
+
 ## 0.23.0
 - Add "Tool Panel Factory" flutter example
 

bin/main.dart

@@ -14,7 +14,7 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Refactoring Guru: Flutter launcher',
       theme: ThemeData(primarySwatch: Colors.pink),
-      initialRoute: '/abstract_factory/tool_panel',
+      initialRoute: '/abstract_factory/tool_panel_factory',
       routes: {
         '/observer/subscriber_flutter_widget': (_) => SubscriberFlutterApp(),
         '/adapter/flutter_adapter': (_) => FlutterAdapterApp(),

patterns/abstract_factory/tool_panel_factory/README.md

@@ -7,43 +7,34 @@ Tutorial: [here](https://refactoring.guru/design-patterns/abstract-factory).
 ### Online demo:
 Click on the picture to see the [demo](https://RefactoringGuru.github.io/design-patterns-dart/#/abstract_factory/tool_panel_factory).
 
-[![image](https://user-images.githubusercontent.com/8049534/168668992-369a1bab-9f97-4333-a20e-ffd06bf91b54.png)](https://refactoringguru.github.io/design-patterns-dart/#/abstract_factory/tool_panel_factory)
+[![image](https://user-images.githubusercontent.com/8049534/169530318-0ce7ee6a-3538-4398-a2ab-e6e85f2132b5.png)](https://refactoringguru.github.io/design-patterns-dart/#/abstract_factory/tool_panel_factory)
+
+### About
+![image](https://user-images.githubusercontent.com/8049534/169521422-052cc59a-7b3d-4889-8d76-5664a75b271a.png)
 
 ### Diagram:
-![image](https://user-images.githubusercontent.com/8049534/168672053-73ae1c9c-8fad-45ae-9247-429f7b5da565.png)
+![image](https://user-images.githubusercontent.com/8049534/169528461-d7c5279d-7e7f-4ce7-b8d2-87388ec2d32f.png)
 
-### Client code (using the "createShape" method):
+### Client code:
 ```dart
-final app = App(
-  tools: Tools(
-    factories: [
-      TxtFactory(),
-      LineFactory(),
-      CircleFactory(),
-      TriangleFactory(),
-      StarFactory(),
-    ],
-  ),
-);
-
 class App {
   void addShape(double x, double y) {
-    final newShape = activeFactory.createShape(x, y, activeColor);
+    final newShape = activeToolFactory.createShape(x, y, activeColor);
     shapes.add(newShape);
   }
 }
 
-mixin IconBoxMixin implements FactoryTool {
-  Image? _icon;
 
-  @override
-  Image get icon => _icon!;
+class PropertyPanel extends StatelessWidget {
+  final PropertyWidgetFactories factories;
 
-  Future<void> updateIcon(Color color) async {
-    final shape = createShape(0, 0, color);
-    final pngBytes = await _pngImageFromShape(shape);
-    _icon = Image.memory(pngBytes);
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+        children: propertyWidgetFactories
+            .createListWidgetsFrom(activeToolFactory.properties)
+            .toList(),
+      );
   }
 }
 ```
-

patterns/abstract_factory/tool_panel_factory/app/app.dart

@@ -12,7 +12,7 @@ class App {
 
   void addShape(double x, double y) {
     final activeColor = tools.activeColor.value;
-    final activeFactory = tools.activeFactory.value!;
+    final activeFactory = tools.activeFactory.value;
 
     final newShape = activeFactory.createShape(x, y, activeColor);
     newShape.centerToFit();

patterns/abstract_factory/tool_panel_factory/app/tools.dart

@@ -10,22 +10,18 @@ class Tools {
   final List<ToolFactory> factories;
   final List<Color> colors;
 
-  final activeFactory = ValueNotifier<ToolFactory?>(null);
+  late final ValueNotifier<ToolFactory> activeFactory;
 
-  final activeColor = ValueNotifier(Color(0x0FFFFFFFF));
+  late final ValueNotifier<Color> activeColor;
 
   Future<bool> get iconsReady => _iconsInitCompleter.future;
 
-  Tools({required this.factories, required this.colors}) {
+  Tools({required this.factories, required this.colors})
+      : assert(factories.isNotEmpty),
+        assert(colors.isNotEmpty) {
+    activeFactory = ValueNotifier(factories.first);
+    activeColor = ValueNotifier(colors.first);
     _initIconsFromShapes();
-
-    if (factories.isNotEmpty) {
-      activeFactory.value = factories.first;
-    }
-
-    if (colors.isNotEmpty) {
-      activeColor.value = colors.first;
-    }
   }
 
   final _iconsInitCompleter = Completer<bool>();

patterns/abstract_factory/tool_panel_factory/factories/circle_factory.dart

@@ -1,18 +1,43 @@
 import 'dart:ui';
 
 import '../mixin/icon_box_mixin.dart';
+import '../pattern/property.dart';
 import '../pattern/tool_factory.dart';
 import '../shapes/circle_shape.dart';
 import '../pattern/shape.dart';
 
 class CircleFactory extends ToolFactory with IconBoxMixin {
+  var _radius = 50.0;
+  var _isFilled = false;
+
   @override
   Shape createShape(double x, double y, Color color) {
     return CircleShape(
-      radius: 50,
+      radius: _radius,
+      isFilled: _isFilled,
       x: x,
       y: y,
       color: color,
     );
   }
+
+  @override
+  Iterable<Property> get properties {
+    return [
+      Property(
+        name: 'radius',
+        value: () => _radius,
+        onChange: (val) {
+          _radius = val;
+        },
+      ),
+      Property(
+        name: 'filled',
+        value: () => _isFilled,
+        onChange: (val) {
+          _isFilled = val;
+        },
+      ),
+    ];
+  }
 }

patterns/abstract_factory/tool_panel_factory/factories/line_factory.dart

@@ -1,18 +1,43 @@
 import 'dart:ui';
 
 import '../mixin/icon_box_mixin.dart';
+import '../pattern/property.dart';
 import '../pattern/tool_factory.dart';
 import '../pattern/shape.dart';
 import '../shapes/line_shape.dart';
 
 class LineFactory extends ToolFactory with IconBoxMixin {
+  var _isMirror = true;
+  var _length = 100.0;
+
   @override
   Shape createShape(double x, double y, Color color) {
     return LineShape(
-      length: 100,
+      length: _length,
+      isMirror: _isMirror,
       x: x,
       y: y,
       color: color,
     );
   }
+
+  @override
+  Iterable<Property> get properties {
+    return [
+      Property(
+        name: 'mirror',
+        value: () => _isMirror,
+        onChange: (val) {
+          _isMirror = val;
+        },
+      ),
+      Property(
+        name: 'length',
+        value: () => _length,
+        onChange: (val) {
+          _length = val;
+        },
+      ),
+    ];
+  }
 }

patterns/abstract_factory/tool_panel_factory/factories/star_factory.dart

@@ -1,18 +1,43 @@
 import 'dart:ui';
 
 import '../mixin/icon_box_mixin.dart';
+import '../pattern/property.dart';
 import '../pattern/tool_factory.dart';
 import '../pattern/shape.dart';
 import '../shapes/star_shape.dart';
 
 class StarFactory extends ToolFactory with IconBoxMixin {
+  var _radius = 80.0;
+  var _isFilled = false;
+
   @override
   Shape createShape(double x, double y, Color color) {
     return StarShape(
-      radius: 80,
+      radius: _radius,
+      isFilled: _isFilled,
       x: x,
       y: y,
       color: color,
     );
   }
+
+  @override
+  Iterable<Property> get properties {
+    return [
+      Property(
+        name: 'radius',
+        value: () => _radius,
+        onChange: (val) {
+          _radius = val;
+        },
+      ),
+      Property(
+        name: 'filled',
+        value: () => _isFilled,
+        onChange: (val) {
+          _isFilled = val;
+        },
+      ),
+    ];
+  }
 }

patterns/abstract_factory/tool_panel_factory/factories/text_factory.dart

@@ -0,0 +1,43 @@
+import 'dart:ui';
+
+import '../mixin/icon_box_mixin.dart';
+import '../pattern/property.dart';
+import '../pattern/tool_factory.dart';
+import '../shapes/text_shape.dart';
+import '../pattern/shape.dart';
+
+class TextFactory extends ToolFactory with IconBoxMixin {
+  var _text = 'Text';
+  var _fontSize = 50.0;
+
+  @override
+  Shape createShape(double x, double y, Color color) {
+    return TextShape(
+      text: _text,
+      fontSize: _fontSize,
+      x: x,
+      y: y,
+      color: color,
+    );
+  }
+
+  @override
+  Iterable<Property> get properties {
+    return [
+      Property(
+        name: 'text',
+        value: () => _text,
+        onChange: (value) {
+          _text = value;
+        },
+      ),
+      Property(
+        name: 'fontSize',
+        value: () => _fontSize,
+        onChange: (value) {
+          _fontSize = value;
+        },
+      ),
+    ];
+  }
+}

patterns/abstract_factory/tool_panel_factory/factories/triangle_factory.dart

@@ -1,18 +1,41 @@
 import 'dart:ui';
 
 import '../mixin/icon_box_mixin.dart';
+import '../pattern/property.dart';
 import '../pattern/tool_factory.dart';
 import '../pattern/shape.dart';
 import '../shapes/triangle_shape.dart';
 
 class TriangleFactory extends ToolFactory with IconBoxMixin {
+  var _isFilled = false;
+  var _sideLength = 120.0;
+
   @override
   Shape createShape(double x, double y, Color color) {
     return TriangleShape(
-      sideLength: 120,
+      sideLength: _sideLength,
+      isFilled: _isFilled,
       x: x,
       y: y,
       color: color,
     );
   }
+
+  @override
+  Iterable<Property> get properties => [
+        Property(
+          name: 'sideLength',
+          value: () => _sideLength,
+          onChange: (val) {
+            _sideLength = val;
+          },
+        ),
+        Property(
+          name: 'filled',
+          value: () => _isFilled,
+          onChange: (val) {
+            _isFilled = val;
+          },
+        ),
+      ];
 }