examples/componentTest.ht

@@ -1,10 +0,0 @@
-fun simulate(inputs) -> Map {
-    final result = Map()
-    if (inputs['A'] && inputs['B']) {
-        result['OUT'] = true
-    } else {
-        result['OUT'] = false
-    }
-    return result
-}
-

examples/simulateTest.ht

@@ -1,42 +0,0 @@
-var inputsValue = 0
-
-fun onLoad {
-    snackBar("Script loaded", "Start", start)
-}
-
-fun getFunctions {
-    return ["start", "random"]
-}
-
-fun start {
-    inputsValue = 0
-    simSetPartiallySimulating(false)
-    simRestart()
-    tick()
-}
-
-fun tick {
-    final inputs = getInputs()
-    final inputsLength = inputs.length
-
-    simSetInputsBinary(inputsValue)
-    inputsValue += 1
-    
-    if (inputsValue >= Math.pow(2, inputsLength)) {
-        inputsValue = 0
-        snackBar("Finished going through all possible values", "Restart", () {
-            start()
-        })
-    }
-    else {
-        setTimeout(1000, tick)
-    }
-}
-
-fun random {
-    final inputs = getInputs()
-    final inputsLength = inputs.length
-
-    simSetInputsBinary(Math.randomInt(Math.pow(2, inputsLength)))
-}
-

lib/components/visual_component.dart

@@ -140,7 +140,7 @@ class VisualComponent extends HookWidget {
   }
 
   static double getHeightOfIO(BuildContext context, List<String> options, int index, [TextStyle? textStyle]) {
-    assert(index <= options.length);
+    assert(index < options.length);
     getHeightOfText(String text) {
       final textPainter = TextPainter(
         text: TextSpan(
@@ -163,9 +163,7 @@ class VisualComponent extends HookWidget {
     for (var i = 0; i < index; i++) {
       result += 5.0 + getHeightOfText(options[i]) + 5.0;
     }
-    if (index < options.length) {
+    result += 5.0 + getHeightOfText(options[index]);
-      result += 5.0 + getHeightOfText(options[index]);
-    }
     return result;
   }
 }

lib/pages/design_component.dart

@@ -1,11 +1,7 @@
-import 'dart:io';
 import 'dart:math';
 
-import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:hetu_script/hetu_script.dart';
-import 'package:hetu_script/values.dart';
 import 'package:logic_circuits_simulator/components/visual_component.dart';
 import 'package:logic_circuits_simulator/models.dart';
 import 'package:logic_circuits_simulator/pages_arguments/design_component.dart';
@@ -16,9 +12,7 @@ import 'package:logic_circuits_simulator/utils/future_call_debounce.dart';
 import 'package:logic_circuits_simulator/utils/iterable_extension.dart';
 import 'package:logic_circuits_simulator/utils/provider_hook.dart';
 import 'package:logic_circuits_simulator/utils/stack_canvas_controller_hook.dart';
-import 'package:provider/provider.dart';
 import 'package:stack_canvas/stack_canvas.dart';
-import 'package:tuple/tuple.dart';
 import 'package:uuid/uuid.dart';
 
 Key canvasKey = GlobalKey();
@@ -46,239 +40,6 @@ class DesignComponentPage extends HookWidget {
     
     useListenable(componentState.partialVisualSimulation!);
 
-    // Scripting
-    final scriptingEnvironment = useState<Hetu?>(null);
-    final loadScript = useMemoized(() => (String script) {
-      scriptingEnvironment.value = Hetu();
-      scriptingEnvironment.value!.init(
-        externalFunctions: {
-          'unload': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            scriptingEnvironment.value = null;
-          },
-          'alert': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final content = positionalArgs[0] as String;
-            final title = positionalArgs[1] as String? ?? 'Script Alert';
-            return showDialog(
-              context: context, 
-              builder: (context) {
-                return AlertDialog(
-                  title: Text(title),
-                  content: Text(content),
-                  actions: [
-                    TextButton(
-                      onPressed: () {
-                        Navigator.of(context).pop();
-                      },
-                      child: const Text('OK'),
-                    ),
-                  ],
-                );
-              },
-            );
-          },
-          'snackBar': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final content = positionalArgs[0] as String;
-            final actionName = positionalArgs[1] as String?;
-            final actionFunction = positionalArgs[2];
-            ScaffoldMessenger.of(context).showSnackBar(SnackBar(
-              content: Text(content),
-              action: actionName == null ? null : SnackBarAction(
-                label: actionName, 
-                onPressed: () {
-                  if (actionFunction is String) {
-                    scriptingEnvironment.value?.invoke(actionFunction);
-                  }
-                  else if (actionFunction is HTFunction && scriptingEnvironment.value != null) {
-                    actionFunction.call();
-                  }
-                },
-              ),
-            ));
-          },
-          'setTimeout': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final millis = positionalArgs[0] as int;
-            final function = positionalArgs[1];
-            final pos = namedArgs['positionalArgs'] ?? [];
-            final named = namedArgs['namedArgs'] ?? {};
-            Future.delayed(Duration(milliseconds: millis))
-              .then((_) {
-                if (function is String) {
-                  scriptingEnvironment.value?.invoke(function, positionalArgs: pos, namedArgs: Map.castFrom(named));
-                }
-                else if (function is HTFunction && scriptingEnvironment.value != null) {
-                  function.call(positionalArgs: pos, namedArgs: Map.castFrom(named));
-                }
-              });
-          },
-          'getInputs': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return componentState.currentComponent!.inputs;
-          },
-          'getOutputs': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return componentState.currentComponent!.outputs;
-          },
-          'simGetInputValues': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return Map.of(componentState.partialVisualSimulation!.inputsValues);
-          },
-          'simGetOutputValues': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return Map.of(componentState.partialVisualSimulation!.outputsValues);
-          },
-          'simSetInput': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final inputName = positionalArgs[0] as String;
-            final value = positionalArgs[1] as bool;
-
-            return componentState.partialVisualSimulation!.modifyInput(inputName, value);
-          },
-          'simSetInputs': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final inputs = positionalArgs[0] as Map;
-
-            return componentState.partialVisualSimulation!.provideInputs(inputs.map((key, value) => MapEntry(key as String, value as bool)));
-          },
-          'simSetInputsBinary': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            final inputs = componentState.currentComponent!.inputs;
-            final inputsNum = positionalArgs[0] as int;
-            final inputsBinary = inputsNum.toRadixString(2).padLeft(inputs.length, '0');
-            final inputsMap = Map.fromIterables(inputs, inputsBinary.characters.map((c) => c == '1'));
-
-            return componentState.partialVisualSimulation!.provideInputs(inputsMap);
-          },
-          'simNextStep': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return componentState.partialVisualSimulation!.nextStep();
-          },
-          'simRestart': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return componentState.partialVisualSimulation!.restart();
-          },
-          'simIsPartiallySimulating': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            return simulatePartially.value;
-          },
-          'simSetPartiallySimulating': (
-            HTEntity entity, {
-            List<dynamic> positionalArgs = const [],
-            Map<String, dynamic> namedArgs = const {},
-            List<HTType> typeArgs = const [],
-          }) {
-            simulatePartially.value = positionalArgs[0] as bool;
-          },
-        },
-      );
-      scriptingEnvironment.value!.eval('''
-        external fun unload
-        external fun alert(message: String, [title])
-        external fun snackBar(message: String, [actionName, actionFunction])
-        external fun setTimeout(millis: int, function, {positionalArgs, namedArgs})
-        external fun getInputs -> List
-        external fun getOutputs -> List
-        external fun simGetInputValues -> Map
-        external fun simGetOutputValues -> Map
-        external fun simSetInput(inputName: String, value: bool)
-        external fun simSetInputs(values: Map)
-        external fun simSetInputsBinary(values: int)
-        external fun simNextStep
-        external fun simRestart
-        external fun simIsPartiallySimulating -> bool
-        external fun simSetPartiallySimulating(partiallySimulating: bool)
-      ''');
-      scriptingEnvironment.value!.eval(script, type: ResourceType.hetuModule);
-      try {
-        scriptingEnvironment.value!.invoke('onLoad');
-      } catch (e) {
-        // onLoad handling is optional
-      }
-      try {
-        scriptingEnvironment.value!.invoke('getFunctions');
-      } catch (e) {
-        // Getting the callable functions of the script is mandatory
-        showDialog(
-          context: context,
-          builder: (context) {
-            return AlertDialog(
-              title: const Text('Script Loading Failed'),
-              content: const Text("The script doesn't implement the getFunctions function."),
-              actions: [
-                TextButton(
-                  onPressed: () {
-                    Navigator.of(context).pop();
-                  },
-                  child: const Text('OK'),
-                ),
-              ],
-            );
-          },
-        );
-        scriptingEnvironment.value = null;
-      }
-    }, [scriptingEnvironment.value]);
-
-    // Design
     final movingWidgetUpdater = useState<void Function(double dx, double dy)?>(null);
     final movingWidget = useState<dynamic>(null);
     final deleteOnDrop = useState<bool>(false);    
@@ -295,9 +56,6 @@ class DesignComponentPage extends HookWidget {
         final cs = componentState;
         // First remove all connected wires
         if (w is DesignComponent) {
-          // Get project state to be able to remove dependency
-          final projectState = Provider.of<ProjectState>(context, listen: false);
-
           final wires = cs.wiringDraft.wires
             .where(
               (wire) => wire.input.startsWith('${w.instanceId}/') || wire.output.startsWith('${w.instanceId}/')
@@ -305,9 +63,6 @@ class DesignComponentPage extends HookWidget {
             .map((wire) => wire.wireId)
             .toList();
 
-          // Get component id before removing
-          final componentId = cs.wiringDraft.instances.where((inst) => inst.instanceId == w.instanceId).first.componentId;
-
           await cs.updateDesign(cs.designDraft.copyWith(
             wires: cs.designDraft.wires
               .where((wire) => !wires.contains(wire.wireId))
@@ -328,12 +83,6 @@ class DesignComponentPage extends HookWidget {
               .where((comp) => comp.instanceId != w.instanceId)
               .toList(),
           ));
-
-          // Remove dependency if it's the last of its kind
-          if (!cs.wiringDraft.instances.map((inst) => inst.componentId).contains(componentId)) {
-            componentState.removeDependency(componentId, modifyCurrentComponent: true);
-            await projectState.editComponent(componentState.currentComponent!);
-          }
         }
         else if (w is DesignInput) {
           final wires = cs.wiringDraft.wires
@@ -770,95 +519,6 @@ class DesignComponentPage extends HookWidget {
               designSelection.value = null;
             },
           ),
-          if (isSimulating.value)
-            IconButton(
-              icon: const Icon(Icons.description),
-              tooltip: 'Scripting',
-              onPressed: () {
-                showDialog(
-                  context: context, 
-                  builder: (context) {
-                    return AlertDialog(
-                      title: const Text('Scripting'),
-                      content: Column(
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          ListTile(
-                            title: const Text('Load Script...'),
-                            onTap: () async {
-                              final nav = Navigator.of(context);
-
-                              final selectedFiles = await FilePicker.platform.pickFiles(
-                                dialogTitle: "Load Script",
-                                // allowedExtensions: ['ht', 'txt'],
-                                type: FileType.any,
-                              );
-                              if (selectedFiles == null || selectedFiles.files.isEmpty) {
-                                return;
-                              }
-
-                              try {
-                                final file = File(selectedFiles.files[0].path!);
-                                loadScript(await file.readAsString());
-                              } catch (e) {
-                                showDialog(
-                                  context: context,
-                                  builder: (context) {
-                                    return AlertDialog(
-                                      title: const Text('Script Loading Error'),
-                                      content: Text(e.toString()),
-                                      actions: [
-                                        TextButton(
-                                          onPressed: () {
-                                            Navigator.of(context).pop();
-                                          },
-                                          child: const Text('OK'),
-                                        ),
-                                      ],
-                                    );
-                                  },
-                                );
-                              }
-                              nav.pop();
-                            },
-                          ),
-                          if (scriptingEnvironment.value != null) ...[
-                            const Divider(),
-                            for (final function in scriptingEnvironment.value!.invoke('getFunctions'))
-                              ListTile(
-                                title: Text(function),
-                                onTap: () {
-                                  Navigator.of(context).pop();
-                                  try {
-                                    scriptingEnvironment.value!.invoke(function);
-                                  } on HTError catch (e) {
-                                    showDialog(
-                                      context: context,
-                                      builder: (context) {
-                                        return AlertDialog(
-                                          title: const Text('Script Error'),
-                                          content: Text(e.toString()),
-                                          actions: [
-                                            TextButton(
-                                              onPressed: () => Navigator.of(context).pop(), 
-                                              child: const Text('OK'),
-                                            ),
-                                          ],
-                                        );
-                                      },
-                                    );
-                                    scriptingEnvironment.value = null;
-                                  }
-                                },
-                              ),
-                          ],
-                        ],
-                      ),
-                    );
-                  },
-                );
-              },
-            )
         ],
       ),
       body: OrientationBuilder(
@@ -874,16 +534,8 @@ class DesignComponentPage extends HookWidget {
                 hw(update.delta.dx, update.delta.dy);
               }
             },
-            onTapUp: (update) async {
+            onTap: () {
-              final canvasCenterLocation = canvasController.canvasSize / 2;
+              if (designSelection.value == 'wiring') {
-              final canvasCenterLocationOffset = Offset(canvasCenterLocation.width, canvasCenterLocation.height);
-              final canvasLocation = update.localPosition - canvasCenterLocationOffset + canvasController.offset;
-              final ds = designSelection.value;
-
-              if (ds == null) {
-                return;
-              }
-              if (ds == 'wiring') {
                 // Handle wire creation
                 if (hoveredIO.value == null) {
                   // If clicking on something not hovered, ignore
@@ -916,90 +568,6 @@ class DesignComponentPage extends HookWidget {
                   hoveredIO.value = null;
                 }
               }
-              else if (ds.startsWith('input:')) {
-                final inputName = ds.substring(6);
-                componentState.updateDesign(componentState.designDraft.copyWith(
-                  inputs: componentState.designDraft.inputs + [
-                    DesignInput(
-                      name: inputName,
-                      x: canvasLocation.dx - IOComponent.getNeededWidth(context, inputName) / 2,
-                      y: canvasLocation.dy,
-                    ),
-                  ],
-                ));
-                designSelection.value = null;
-              }
-              else if (ds.startsWith('output:')) {
-                final outputName = ds.substring(7);
-                componentState.updateDesign(componentState.designDraft.copyWith(
-                  outputs: componentState.designDraft.outputs + [
-                    DesignOutput(
-                      name: outputName,
-                      x: canvasLocation.dx - IOComponent.getNeededWidth(context, outputName) / 2,
-                      y: canvasLocation.dy,
-                    ),
-                  ],
-                ));
-                designSelection.value = null;
-              }
-              else {
-                final currentProjectState = Provider.of<ProjectState>(context, listen: false);
-
-                // Add subcomponent
-                final splitted = ds.split('/');
-                var projectId = splitted[0];
-                final componentId = splitted[1];
-
-                if (Provider.of<ProjectState>(context, listen: false).currentProject!.projectId == projectId) {
-                  projectId = 'self';
-                }
-
-                final depId = '$projectId/$componentId';
-                final project = projectId == 'self' 
-                  ? Provider.of<ProjectState>(context, listen: false).currentProject! 
-                  : Provider.of<ProjectsState>(context, listen: false).index.projects.where((p) => p.projectId == projectId).first;
-                final projectState = ProjectState();
-                await projectState.setCurrentProject(project);
-                final component = projectState.index.components.where((c) => c.componentId == componentId).first;
-
-                // Add dependency
-                if (!componentState.hasDependency(depId)) {
-                  componentState.addDependency(
-                    depId, 
-                    Tuple2(
-                      project,
-                      component,
-                    ),
-                    modifyCurrentComponent: true,
-                  );
-                  await currentProjectState.editComponent(componentState.currentComponent!);
-                }
-
-                // Create component instance
-                final instanceId = const Uuid().v4();
-                await componentState.updateWiring(componentState.wiringDraft.copyWith(
-                  instances: componentState.wiringDraft.instances + [
-                    WiringInstance(
-                      componentId: depId,
-                      instanceId: instanceId,
-                    ),
-                  ],
-                ));
-                await componentState.updateDesign(componentState.designDraft.copyWith(
-                  components: componentState.designDraft.components + [
-                    DesignComponent(
-                      instanceId: instanceId,
-                      x: canvasLocation.dx,
-                      y: canvasLocation.dy,
-                    ),
-                  ],
-                ));
-
-                // Recreate simulation with new subcomponent
-                await componentState.recreatePartialSimulation();
-
-                designSelection.value = null;
-              }
             },
             child: Stack(
               children: [
@@ -1051,14 +619,13 @@ class DesignComponentPage extends HookWidget {
 
           final componentPicker = ComponentPicker(
             key: pickerKey,
-            onSelectionUpdate: (selection) {
+            onSeletionUpdate: (selection) {
               designSelection.value = selection;
               if (selection != 'wiring') {
                 wireToDelete.value = null;
                 sourceToConnect.value = null;
               }
             },
-            selection: designSelection.value,
           );
 
           if (orientation == Orientation.portrait) {
@@ -1159,29 +726,33 @@ class DebuggingButtons extends StatelessWidget {
 }
 
 class ComponentPicker extends HookWidget {
-  const ComponentPicker({required this.onSelectionUpdate, required this.selection, super.key});
+  const ComponentPicker({required this.onSeletionUpdate, super.key});
 
-  final String? selection;
+  final void Function(String? selection) onSeletionUpdate;
-  final void Function(String? selection) onSelectionUpdate;
 
   @override
   Widget build(BuildContext context) {
     final projectsState = useProvider<ProjectsState>();
     final tickerProvider = useSingleTickerProvider();
-    final tabBarControllerState = useState<TabController?>(null);
+    final selection = useState<String?>(null);
+    final tabBarControllerState = useState<TabController?>(null    );
     useEffect(() {
+      selection.addListener(() { 
+        onSeletionUpdate(selection.value);
+      });
+
       tabBarControllerState.value = TabController(
-        length: 3 + projectsState.projects.length, 
+        length: 1 + projectsState.projects.length, 
         vsync: tickerProvider,
         initialIndex: 1,
       );
 
       tabBarControllerState.value!.addListener(() {
         if (tabBarControllerState.value!.index == 0) {
-          onSelectionUpdate('wiring');
+          selection.value = 'wiring';
         }
         else {
-          onSelectionUpdate(null);
+          selection.value = null;
         }
       });
 
@@ -1205,12 +776,6 @@ class ComponentPicker extends HookWidget {
                   const Tab(
                     text: 'Wiring',
                   ),
-                  const Tab(
-                    text: 'Inputs',
-                  ),
-                  const Tab(
-                    text: 'Outputs',
-                  ),
                   for (final project in projectsState.projects)
                     Tab(
                       text: project.projectName,
@@ -1241,18 +806,6 @@ class ComponentPicker extends HookWidget {
                         ],
                       ),
                     ),
-                    IOComponentPickerOptions(
-                      orientation: orientation,
-                      outputs: false,
-                      selection: selection,
-                      onSelected: onSelectionUpdate,
-                    ),
-                    IOComponentPickerOptions(
-                      orientation: orientation,
-                      outputs: true,
-                      selection: selection,
-                      onSelected: onSelectionUpdate,
-                    ),
                     for (final project in projectsState.projects)
                       HookBuilder(
                         builder: (context) {
@@ -1291,21 +844,21 @@ class ComponentPicker extends HookWidget {
                                         for (final component in components)
                                           IntrinsicWidth(
                                             child: Card(
-                                              color: selection == '${project.projectId}/${component.componentId}' ? Theme.of(context).colorScheme.primaryContainer : null,
+                                              color: selection.value == '${project.projectId}/${component.componentId}' ? Theme.of(context).colorScheme.primaryContainer : null,
                                               child: InkWell(
                                                 onTap: () {
-                                                  if (selection != '${project.projectId}/${component.componentId}') {
+                                                  if (selection.value != '${project.projectId}/${component.componentId}') {
-                                                    onSelectionUpdate('${project.projectId}/${component.componentId}');
+                                                    selection.value = '${project.projectId}/${component.componentId}';
                                                   }
                                                   else {
-                                                    onSelectionUpdate(null);
+                                                    selection.value = null;
                                                   }
                                                 },
                                                 child: Padding(
                                                   padding: const EdgeInsets.all(8.0),
                                                   child: Text(
                                                     component.componentName,
-                                                    style: selection == '${project.projectId}/${component.componentId}' 
+                                                    style: selection.value == '${project.projectId}/${component.componentId}' 
                                                       ? TextStyle(
                                                         inherit: true,
                                                         color: Theme.of(context).colorScheme.onPrimaryContainer,
@@ -1335,94 +888,3 @@ class ComponentPicker extends HookWidget {
     );
   }
 }
-
-class IOComponentPickerOptions extends HookWidget {
-  final Orientation orientation;
-  final bool outputs;
-  final String? selection;
-  final void Function(String? selection) onSelected;
-
-  const IOComponentPickerOptions({required this.orientation, required this.outputs, required this.selection, required this.onSelected, super.key,});
-
-  String getSelectionName(String option) => '${!outputs ? "input" : "output"}:$option';
-
-  @override
-  Widget build(BuildContext context) {
-    final componentState = useProvider<ComponentState>();
-    
-    final scrollController = useScrollController();
-
-    final options = !outputs ? componentState.currentComponent!.inputs : componentState.currentComponent!.outputs;
-
-    return Builder(
-      builder: (context) {
-        return Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: [
-            Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: Text('To add an ${!outputs ? "input" : "output"}, select it below and then click on the canvas to place it. You can only add one of each. Red ${!outputs ? "inputs" : "outputs"} have already been placed.'),
-            ),
-            Expanded(
-              child: Scrollbar(
-                controller: scrollController,
-                scrollbarOrientation: orientation == Orientation.portrait ? ScrollbarOrientation.bottom : ScrollbarOrientation.right,
-                child: SingleChildScrollView(
-                  controller: scrollController,
-                  scrollDirection: orientation == Orientation.portrait ? Axis.horizontal : Axis.vertical,
-                  child: Wrap(
-                    direction: orientation == Orientation.portrait ? Axis.vertical : Axis.horizontal,
-                    crossAxisAlignment: WrapCrossAlignment.center,
-                    children: [
-                      for (final option in options)
-                        IntrinsicWidth(
-                          child: Card(
-                            color: (
-                              !outputs
-                                ? componentState.designDraft.inputs.map((input) => input.name).contains(option)
-                                : componentState.designDraft.outputs.map((output) => output.name).contains(option)
-                              )
-                              ? const Color.fromARGB(100, 255, 0, 0)
-                              : selection == getSelectionName(option) 
-                              ? Theme.of(context).colorScheme.primaryContainer 
-                              : null,
-                            child: InkWell(
-                              onTap: (
-                                !outputs
-                                  ? componentState.designDraft.inputs.map((input) => input.name).contains(option)
-                                  : componentState.designDraft.outputs.map((output) => output.name).contains(option)
-                                ) ? null : () {
-                                if (selection == getSelectionName(option)) {
-                                  onSelected(null);
-                                }
-                                else {
-                                  onSelected(getSelectionName(option));
-                                }
-                              },
-                              child: Padding(
-                                padding: const EdgeInsets.all(8.0),
-                                child: Text(
-                                  option,
-                                  style: selection == getSelectionName(option) 
-                                    ? TextStyle(
-                                      inherit: true,
-                                      color: Theme.of(context).colorScheme.onPrimaryContainer,
-                                    ) 
-                                    : null,
-                                ),
-                              ),
-                            ),
-                          ),
-                        ),
-                    ],
-                  ),
-                ),
-              ),
-            ),
-          ],
-        );
-      }
-    );
-  }
-}

lib/pages/edit_component.dart

@@ -616,7 +616,7 @@ class EditComponentPage extends HookWidget {
                             nav.pushNamed(
                               DesignComponentPage.routeName, 
                               arguments: DesignComponentPageArguments(
-                                component: ce(),
+                                component: component,
                               ),
                             );
                           } on DependenciesNotSatisfiedException catch (e) {

lib/state/component.dart

@@ -37,7 +37,7 @@ class ComponentState extends ChangeNotifier {
       await state.setCurrentComponent(
         project: proj, 
         component: comp, 
-        onDependencyNeeded: (projId, compId) async => _dependenciesMap['${projId == "self" ? proj.projectId : projId}/$compId'],
+        onDependencyNeeded: (projId, compId) async => _dependenciesMap['$projId/$compId'],
       );
     }
     return SimulatedComponent(
@@ -108,30 +108,14 @@ class ComponentState extends ChangeNotifier {
 
     // Load dependencies
     final unsatisfiedDependencies = <String>[];
-    final neededDependencies = component.dependencies.toList();
+    for (final depId in component.dependencies) {
-    while (neededDependencies.isNotEmpty) {
+      final splitted = depId.split('/');
-      final tmp = neededDependencies.toList();
+      final maybeDep = await onDependencyNeeded(splitted[0], splitted[1]);
-      neededDependencies.clear();
+      if (maybeDep == null) {
-      for (final depId in tmp) {
+        unsatisfiedDependencies.add(depId);
-        if (!hasDependency(depId)) {
+      }
-          final splitted = depId.split('/');
+      else {
-          final maybeDep = await onDependencyNeeded(splitted[0], splitted[1]);
+        _dependenciesMap[depId] = maybeDep;
-          if (maybeDep == null) {
-            unsatisfiedDependencies.add(depId);
-          }
-          else {
-            addDependency(depId, maybeDep);
-            neededDependencies.addAll(
-              maybeDep.item2.dependencies
-              .map((depId) {
-                final splitted = depId.split('/');
-                final projectId = splitted[0] == 'self' ? maybeDep.item1.projectId : splitted[0];
-                return '$projectId/${splitted[1]}';
-              })
-              .where((depId) => !hasDependency(depId))
-            );
-          }
-        }
       }
     }
     if (unsatisfiedDependencies.isNotEmpty) {
@@ -140,34 +124,10 @@ class ComponentState extends ChangeNotifier {
 
     await _loadComponentFiles();
 
-    await recreatePartialSimulation();
+    if (component.visualDesigned) {
-
-    notifyListeners();
-  }
-
-  void addDependency(String depId, Tuple2<ProjectEntry, ComponentEntry> dependency, {bool modifyCurrentComponent = false}) {
-    _dependenciesMap[depId] = dependency;
-    if (modifyCurrentComponent && _currentComponent?.dependencies.contains(depId) == false) {
-      _currentComponent = _currentComponent?.copyWith(
-        dependencies: (_currentComponent?.dependencies ?? []) + [depId],
-      );
-    }
-  }
-
-  void removeDependency(String depId, {bool modifyCurrentComponent = false}) {
-    _dependenciesMap.remove(depId);
-    if (modifyCurrentComponent && _currentComponent?.dependencies.contains(depId) == true) {
-      _currentComponent = _currentComponent?.copyWith(
-        dependencies: _currentComponent?.dependencies.where((dep) => dep != depId).toList() ?? [],
-      );
-    }
-  }
-
-  Future<void> recreatePartialSimulation() async {
-    if (_currentComponent!.visualDesigned) {
       _partialVisualSimulation = await PartialVisualSimulation.init(
-        project: _currentProject!,
+        project: project,
-        component: _currentComponent!,
+        component: component,
         state: this,
         onRequiredDependency: _onRequiredDependency,
       );
@@ -176,8 +136,6 @@ class ComponentState extends ChangeNotifier {
     notifyListeners();
   }
 
-  bool hasDependency(String depId) => _dependenciesMap.containsKey(depId);
-
   void noComponent() {
     _dependenciesMap.clear();
     _currentProject = null;

lib/state/project.dart

@@ -90,8 +90,8 @@ class ProjectState extends ChangeNotifier {
     await _updateIndex(
       index.copyWith(
         components: index.components
-          .map((c) => c.componentId == component.componentId ? component : c)
+          .where((c) => c.componentId != component.componentId)
-          .toList(),
+          .toList() + [component],
       )
     );
   }

lib/state/projects.dart

@@ -73,7 +73,8 @@ class ProjectsState extends ChangeNotifier {
     await _updateIndex(
       index.copyWith(
         projects: index.projects
-          .map((p) => p.projectId == project.projectId ? project : p)
+          .where((p) => p.projectId != project.projectId)
+          .followedBy([project])
           .toList()
       )
     );

lib/utils/simulation.dart

@@ -24,9 +24,7 @@ class SimulatedComponent {
       String instanceId, String? depId) async {
     if (!_instances.containsKey(instanceId)) {
       if (depId != null) {
-        final splitted = depId.split('/');
+        _instances[instanceId] = await onRequiredDependency(depId);
-        final projectId = splitted[0] == 'self' ? project.projectId : splitted[0];
-        _instances[instanceId] = await onRequiredDependency('$projectId/${splitted[1]}');
       } else {
         throw Exception('Attempted to get instance of unknown component');
       }
@@ -179,7 +177,7 @@ class PartialVisualSimulation with ChangeNotifier {
       if (depId != null) {
         _instances[instanceId] = await onRequiredDependency(depId);
       } else {
-        throw Exception('Attempted to get instance of unknown component: $instanceId');
+        throw Exception('Attempted to get instance of unknown component');
       }
     }
     return _instances[instanceId]!;