diff --git a/lib/components/visual_component.dart b/lib/components/visual_component.dart index 6d96a17..d62db0c 100644 --- a/lib/components/visual_component.dart +++ b/lib/components/visual_component.dart @@ -10,13 +10,34 @@ class VisualComponent extends HookWidget { final List outputs; final Map inputColors; final Map outputColors; + final bool isNextToSimulate; - VisualComponent({super.key, required this.name, required this.inputs, required this.outputs, Map? inputColors, Map? outputColors}) + VisualComponent({super.key, required this.name, required this.inputs, required this.outputs, Map? inputColors, Map? outputColors, this.isNextToSimulate = false}) : inputColors = inputColors ?? {} , outputColors = outputColors ?? {}; @override Widget build(BuildContext context) { + final nextToSimulateFlashingAnimation = useAnimationController( + duration: const Duration(milliseconds: 500), + initialValue: 0.0, + lowerBound: 0.0, + upperBound: 1.0, + ); + useEffect(() { + if (isNextToSimulate) { + nextToSimulateFlashingAnimation.repeat( + reverse: true, + ); + } + else { + nextToSimulateFlashingAnimation.reset(); + } + + return null; + }, [isNextToSimulate]); + final nextToSimAnimProgress = useAnimation(nextToSimulateFlashingAnimation); + final hovered = useState(false); final inputsWidth = inputs.map((input) => IOLabel.getNeededWidth(context, input)).fold(0, (previousValue, element) => max(previousValue, element)); @@ -46,7 +67,11 @@ class VisualComponent extends HookWidget { width: 100, decoration: BoxDecoration( border: Border.all( - color: hovered.value ? Theme.of(context).colorScheme.primary : Colors.black, + color: Color.lerp( + hovered.value ? Theme.of(context).colorScheme.primary : Colors.black, + Colors.blue, + nextToSimAnimProgress, + )!, ), ), child: Center( diff --git a/lib/pages/design_component.dart b/lib/pages/design_component.dart index 6bda709..425d26b 100644 --- a/lib/pages/design_component.dart +++ b/lib/pages/design_component.dart @@ -107,6 +107,7 @@ class DesignComponentPage extends HookWidget { : componentState.partialVisualSimulation!.outputsValues['${subcomponent.instanceId}/$output'] == false ? Colors.red : Colors.black, } : null, + isNextToSimulate: isSimulating.value && componentState.partialVisualSimulation!.nextToSimulate.contains(subcomponent.instanceId), ), ), ),