Added removing inputs/outputs

lib/dialogs/new_project.dart

@@ -27,6 +27,16 @@ class NewProjectDialog extends HookWidget {
             crossAxisAlignment: CrossAxisAlignment.stretch,
             mainAxisSize: MainAxisSize.min,
             children: [
+              Align(
+                alignment: Alignment.centerRight,
+                child: IconButton(
+                  icon: const Icon(Icons.close),
+                  tooltip: 'Close',
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                  },
+                ),
+              ),
               Center(
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),

lib/pages/edit_component.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:logic_circuits_simulator/models/project.dart';
@@ -18,18 +19,50 @@ class EditComponentPage extends HookWidget {
     final anySave = useState(false);
     final projectState = useProvider<ProjectState>();
     final ce = projectState.index.components.where((c) => c.componentId == component.componentId).first;
+    final truthTable = useState(ce.truthTable?.toList());
+    final inputs = useState(ce.inputs.toList());
+    final outputs = useState(ce.outputs.toList());
     final componentNameEditingController = useTextEditingController(text: ce.componentName);
     useValueListenable(componentNameEditingController);
-    final dirty = useMemoized(() {
-      if (componentNameEditingController.text.isEmpty) {
-        // Don't allow saving empty name
+    final dirty = useMemoized(
+      () {
+        if (componentNameEditingController.text.isEmpty) {
+          // Don't allow saving empty name
+          return false;
+        }
+        if (inputs.value.isEmpty) {
+          // Don't allow saving empty inputs
+          return false;
+        }
+        if (outputs.value.isEmpty) {
+          // Don't allow saving empty outputs
+          return false;
+        }
+        if (componentNameEditingController.text != ce.componentName) {
+          return true;
+        }
+        if (!const ListEquality().equals(inputs.value, ce.inputs)) {
+          return true;
+        }
+        if (!const ListEquality().equals(outputs.value, ce.outputs)) {
+          return true;
+        }
+        if (!const ListEquality().equals(truthTable.value, ce.truthTable)) {
+          return true;
+        }
         return false;
-      }
-      if (componentNameEditingController.text != ce.componentName) {
-        return true;
-      }
-      return false;
-    }, [componentNameEditingController.text, ce.componentName]);
+      },
+      [
+        componentNameEditingController.text,
+        ce.componentName,
+        inputs.value,
+        ce.inputs,
+        outputs.value,
+        ce.outputs,
+        truthTable.value,
+        ce.truthTable,
+      ],
+    );
 
     return WillPopScope(
       onWillPop: () async {
@@ -91,38 +124,154 @@ class EditComponentPage extends HookWidget {
             SliverToBoxAdapter(
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
-                child: Text(
-                  'Inputs',
-                  style: Theme.of(context).textTheme.headline5,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    Expanded(
+                      child: Text(
+                        'Inputs',
+                        style: Theme.of(context).textTheme.headline5,
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.add),
+                      tooltip: 'Add new input',
+                      onPressed: () {
+                        
+                      },
+                    ),
+                  ],
                 ),
               ),
             ),
             SliverList(
               delegate: SliverChildBuilderDelegate(
-                (context, i) => ListTile(
-                  title: Text(ce.inputs[i]),
+                (context, idx) => ListTile(
+                  leading: inputs.value.length > 1 ? IconButton(
+                    icon: const Icon(Icons.remove_circle),
+                    color: Colors.red,
+                    tooltip: 'Remove input ${inputs.value[idx]}',
+                    onPressed: () async {
+                      final shouldRemove = await showDialog<bool>(
+                        context: context,
+                        builder: (context) {
+                          return AlertDialog(
+                            title: Text('Remove Input ${inputs.value[idx]}?'),
+                            content: const Text('Are you sure you want to remove the input?'),
+                            actions: [
+                              TextButton(
+                                onPressed: () => Navigator.of(context).pop(false),
+                                child: const Text('Cancel'),
+                              ),
+                              ElevatedButton(
+                                onPressed: () {
+                                  Navigator.of(context).pop(true);
+                                },
+                                style: ButtonStyle(
+                                  backgroundColor: MaterialStateProperty.all(Colors.red),
+                                ),
+                                child: const Text('Remove'),
+                              ),
+                            ],
+                          );
+                        },
+                      );
+                      if (shouldRemove == true) {
+                        if (truthTable.value != null) {
+                          final tt = truthTable.value!.toList();
+                          final shiftIndex = inputs.value.length - 1 - idx;
+                          final shifted = 1 << shiftIndex;
+                          final indecesToRemove = [];
+                          for (var i = tt.length - 1; i >= 0; i--) {
+                            if (i & shifted == 0) {
+                              indecesToRemove.add(i);
+                            }
+                          } 
+                          for (final i in indecesToRemove) {
+                            tt.removeAt(i);
+                          }
+                          truthTable.value = tt;
+                        }
+                        inputs.value = inputs.value.toList()..removeRange(idx, idx+1);
+                      }
+                    },
+                  ) : null,
+                  title: Text(inputs.value[idx]),
                 ),
-                childCount: ce.inputs.length,
+                childCount: inputs.value.length,
               ),
             ),
             SliverToBoxAdapter(
               child: Padding(
                 padding: const EdgeInsets.all(8.0),
-                child: Text(
-                  'Outputs',
-                  style: Theme.of(context).textTheme.headline5,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    Expanded(
+                      child: Text(
+                        'Outputs',
+                        style: Theme.of(context).textTheme.headline5,
+                      ),
+                    ),
+                    IconButton(
+                      icon: const Icon(Icons.add),
+                      tooltip: 'Add new output',
+                      onPressed: () {
+                        
+                      },
+                    ),
+                  ],
                 ),
               ),
             ),
             SliverList(
               delegate: SliverChildBuilderDelegate(
-                (context, i) => ListTile(
-                  title: Text(ce.outputs[i]),
+                (context, idx) => ListTile(
+                  leading: outputs.value.length > 1 ? IconButton(
+                    icon: const Icon(Icons.remove_circle),
+                    color: Colors.red,
+                    tooltip: 'Remove output ${outputs.value[idx]}',
+                    onPressed: () async {
+                      final shouldRemove = await showDialog<bool>(
+                        context: context,
+                        builder: (context) {
+                          return AlertDialog(
+                            title: Text('Remove Output ${outputs.value[idx]}?'),
+                            content: const Text('Are you sure you want to remove the output?'),
+                            actions: [
+                              TextButton(
+                                onPressed: () => Navigator.of(context).pop(false),
+                                child: const Text('Cancel'),
+                              ),
+                              ElevatedButton(
+                                onPressed: () {
+                                  Navigator.of(context).pop(true);
+                                },
+                                style: ButtonStyle(
+                                  backgroundColor: MaterialStateProperty.all(Colors.red),
+                                ),
+                                child: const Text('Remove'),
+                              ),
+                            ],
+                          );
+                        },
+                      );
+                      if (shouldRemove == true) {
+                        if (truthTable.value != null) {
+                          for (var i = 0; i < truthTable.value!.length; i++) {
+                            truthTable.value!.replaceRange(i, i+1, [truthTable.value![i].replaceRange(idx, idx+1, "")]);
+                          }
+                        }
+                        outputs.value = outputs.value.toList()..removeRange(idx, idx+1);
+                      }
+                    },
+                  ) : null,
+                  title: Text(outputs.value[idx]),
                 ),
-                childCount: ce.outputs.length,
+                childCount: outputs.value.length,
               ),
             ),
-            if (ce.truthTable != null) ...[
+            if (truthTable.value != null) ...[
               SliverToBoxAdapter(
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
@@ -136,9 +285,12 @@ class EditComponentPage extends HookWidget {
                 child: Padding(
                   padding: const EdgeInsets.all(8.0),
                   child: TruthTableEditor(
-                    truthTable: ce.truthTable!,
-                    inputs: ce.inputs,
-                    outputs: ce.outputs,
+                    truthTable: truthTable.value!,
+                    inputs: inputs.value,
+                    outputs: outputs.value,
+                    onUpdateTable: (idx, newValue) {
+                      truthTable.value = truthTable.value?.toList()?..replaceRange(idx, idx+1, [newValue]);
+                    },
                   ),
                 ),
               )
@@ -150,6 +302,11 @@ class EditComponentPage extends HookWidget {
             if (componentNameEditingController.text.isNotEmpty) {
               await projectState.editComponent(component.copyWith(componentName: componentNameEditingController.text));
             }
+            await projectState.editComponent(ce.copyWith(
+              inputs: inputs.value,
+              outputs: outputs.value,
+              truthTable: truthTable.value,
+            ));
             anySave.value = true;
             // TODO: Implement saving
           },
@@ -187,8 +344,9 @@ class TruthTableHeaderText extends StatelessWidget {
 
 class TruthTableTrue extends StatelessWidget {
   final BoxBorder? border;
+  final void Function()? onTap;
 
-  const TruthTableTrue({super.key, this.border});
+  const TruthTableTrue({super.key, this.border, this.onTap});
 
   @override
   Widget build(BuildContext context) {
@@ -196,12 +354,15 @@ class TruthTableTrue extends StatelessWidget {
       decoration: BoxDecoration(
         border: border,
       ),
-      child: Text(
-        'T',
-        textAlign: TextAlign.center,
-        style: Theme.of(context).textTheme.bodyLarge!.copyWith(
-          color: Colors.green,
-          fontSize: 20,
+      child: InkWell(
+        onTap: onTap,
+        child: Text(
+          'T',
+          textAlign: TextAlign.center,
+          style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+            color: Colors.green,
+            fontSize: 20,
+          ),
         ),
       ),
     );
@@ -210,8 +371,9 @@ class TruthTableTrue extends StatelessWidget {
 
 class TruthTableFalse extends StatelessWidget {
   final BoxBorder? border;
+  final void Function()? onTap;
 
-  const TruthTableFalse({super.key, this.border});
+  const TruthTableFalse({super.key, this.border, this.onTap});
 
   @override
   Widget build(BuildContext context) {
@@ -219,12 +381,15 @@ class TruthTableFalse extends StatelessWidget {
       decoration: BoxDecoration(
         border: border,
       ),
-      child: Text(
-        'F',
-        textAlign: TextAlign.center,
-        style: Theme.of(context).textTheme.bodyLarge!.copyWith(
-          color: Colors.red,
-          fontSize: 20,
+      child: InkWell(
+        onTap: onTap,
+        child: Text(
+          'F',
+          textAlign: TextAlign.center,
+          style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+            color: Colors.red,
+            fontSize: 20,
+          ),
         ),
       ),
     );
@@ -236,7 +401,9 @@ class TruthTableEditor extends StatelessWidget {
   final List<String> outputs;
   final List<String> truthTable;
 
-  const TruthTableEditor({Key? key, required this.inputs, required this.outputs, required this.truthTable}) : super(key: key);
+  final void Function(int, String) onUpdateTable;
+
+  const TruthTableEditor({Key? key, required this.inputs, required this.outputs, required this.truthTable, required this.onUpdateTable}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -268,18 +435,33 @@ class TruthTableEditor extends StatelessWidget {
           final inputBinary = (index - 1).toRadixString(2).padLeft(inputs.length, '0');
           final outputBinary = truthTable[index - 1];
 
-          Widget runeToWidget(int rune, {BoxBorder? border}) {
-            return int.parse(String.fromCharCode(rune)) != 0 ? TruthTableTrue(border: border) : TruthTableFalse(border: border);
+          Widget runeToWidget({required int rune, void Function()? onTap, BoxBorder? border}) {
+            return int.parse(String.fromCharCode(rune)) != 0 
+              ? TruthTableTrue(
+                border: border,
+                onTap: onTap,
+              ) 
+              : TruthTableFalse(
+                border: border,
+                onTap: onTap,
+              );
           }
 
           return TableRow(
             children: inputBinary.runes.indexedMap(
-                (index, r) => runeToWidget(
-                  r, 
-                  border: index == inputBinary.runes.length - 1 ? const Border(right: BorderSide(width: 2)) : null,
+                (i, r) => runeToWidget(
+                  rune: r, 
+                  border: i == inputBinary.runes.length - 1 ? const Border(right: BorderSide(width: 2)) : null,
                 )
               )
-              .followedBy(outputBinary.runes.map((r) => runeToWidget(r)))
+              .followedBy(outputBinary.runes.indexedMap(
+                (i, r) => runeToWidget(
+                  rune: r,
+                  onTap: () {
+                    onUpdateTable(index - 1, outputBinary.replaceRange(i, i+1, (outputBinary[i] == "1") ? "0" : "1"));
+                  },
+                ),
+              ))
               .toList(),
           );
         },

pubspec.lock

@@ -28,7 +28,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.9.0"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -128,7 +128,7 @@ packages:
     source: hosted
     version: "4.1.0"
   collection:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: collection
       url: "https://pub.dartlang.org"

pubspec.yaml

@@ -34,6 +34,7 @@ dependencies:
   intl: ^0.17.0
   flutter_hooks: ^0.18.3
   uuid: ^3.0.6
+  collection: ^1.16.0
 
 dev_dependencies:
   flutter_test: