From 29808a683c7b9b133bf32563282cb71149e2d0dc Mon Sep 17 00:00:00 2001
From: Joeri Exelmans <joeri.exelmans@gmail.com>
Date: Tue, 21 Oct 2025 14:23:25 +0200
Subject: [PATCH] fired transitions run animation once

---
 src/App/BottomPanel.tsx                 |  6 ++++--
 src/App/TextDialog.tsx                  | 13 +++++++------
 src/Plant/DigitalWatch/DigitalWatch.tsx |  2 +-
 src/VisualEditor/VisualEditor.css       | 11 ++++++-----
 src/VisualEditor/VisualEditor.tsx       | 15 +++++++++++++++
 todo.txt                                |  1 +
 6 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/App/BottomPanel.tsx b/src/App/BottomPanel.tsx
index b829fc6..27d31ce 100644
--- a/src/App/BottomPanel.tsx
+++ b/src/App/BottomPanel.tsx
@@ -6,9 +6,10 @@ import "./BottomPanel.css";
 import head from "../head.svg" ;
 import { usePersistentState } from "@/util/persistent_state";
 import { PersistentDetails } from "./PersistentDetails";
+import { DigitalWatch } from "@/Plant/DigitalWatch/DigitalWatch";
 
 export function BottomPanel(props: {errors: TraceableError[]}) {
-  const [greeting, setGreeting] = useState(<><b><img src={head} style={{transform: "scaleX(-1)"}}/>&emsp;"Welcome to StateBuddy, buddy!"</b></>);
+  const [greeting, setGreeting] = useState(<><b><img src={head} style={{transform: "scaleX(-1)"}}/>&emsp;"Welcome to StateBuddy, buddy!"</b><br/></>);
 
   useEffect(() => {
     setTimeout(() => {
@@ -17,7 +18,8 @@ export function BottomPanel(props: {errors: TraceableError[]}) {
   }, []);
 
   return <div className="toolbar bottom">
-    <>{greeting}</>
+    {greeting}
+    <DigitalWatch alarm={true} light={true}  h={12} m={30} s={33}/>
     {props.errors.length > 0 &&
       <div className="errorStatus">
         <PersistentDetails initiallyOpen={false} localStorageKey="errorsExpanded">
diff --git a/src/App/TextDialog.tsx b/src/App/TextDialog.tsx
index f524ec8..627aa04 100644
--- a/src/App/TextDialog.tsx
+++ b/src/App/TextDialog.tsx
@@ -1,9 +1,10 @@
-import { Dispatch, ReactElement, SetStateAction, useState, KeyboardEvent } from "react";
+import { Dispatch, ReactElement, SetStateAction, useState, KeyboardEvent, useEffect, useRef } from "react";
 
 import { parse as parseLabel } from "../statecharts/label_parser";
 
 export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElement|null>>, text: string, done: (newText: string|undefined) => void}) {
   const [text, setText] = useState(props.text);
+
   function onKeyDown(e: KeyboardEvent) {
     if (e.key === "Enter") {
       if (!e.shiftKey) {
@@ -19,19 +20,19 @@ export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElemen
     e.stopPropagation();
   }
 
-  let error = "";
+  let parseError = "";
   try {
-    const parsed = parseLabel(text);
+    parseLabel(text);
   } catch (e) {
     // @ts-ignore
-    error = e.message;
+    parseError = e.message;
   }
 
   return <div onKeyDown={onKeyDown} style={{padding: 4}}>
     Text label:<br/>
-    <textarea autoFocus style={{fontFamily: 'Roboto', width:'calc(100%-10px)', height: 60}} onChange={e=>setText(e.target.value)} value={text}/>
+    <textarea autoFocus style={{fontFamily: 'Roboto', width: 400, height: 60}} onChange={e=>setText(e.target.value)} value={text} onFocus={e => e.target.select()}/>
     <br/>
-    <span style={{color: 'var(--error-color)'}}>{error}</span><br/>
+    <span style={{color: 'var(--error-color)'}}>{parseError}</span><br/>
     <p><kbd>Enter</kbd> to confirm. <kbd>Esc</kbd> to cancel.
     </p>
     (Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.)
diff --git a/src/Plant/DigitalWatch/DigitalWatch.tsx b/src/Plant/DigitalWatch/DigitalWatch.tsx
index e1d24a3..a7163e0 100644
--- a/src/Plant/DigitalWatch/DigitalWatch.tsx
+++ b/src/Plant/DigitalWatch/DigitalWatch.tsx
@@ -35,7 +35,7 @@ export function DigitalWatch({light, h, m, s, alarm, callbacks}: DigitalWatchPro
         src: url(${digitalFont});
       }
     `}</style>
-    <svg version="1.1" width="222" height="236">
+    <svg version="1.1" width="222" height="236" style={{userSelect: 'none'}}>
       {light ?
         <image width="222" height="236" xlinkHref={imgWatchLight}/>
       : <image width="222" height="236" xlinkHref={imgWatch}/>
diff --git a/src/VisualEditor/VisualEditor.css b/src/VisualEditor/VisualEditor.css
index d494b0b..f36bd16 100644
--- a/src/VisualEditor/VisualEditor.css
+++ b/src/VisualEditor/VisualEditor.css
@@ -161,17 +161,18 @@ text.helper:hover {
 }
 .arrow.fired {
   stroke: rgb(160, 0, 168);
-  stroke-width: 4px;
-  /* animation: blinkTransition 1s infinite; */
+  stroke-width: 3px;
+  animation: blinkTransition 1s;
 }
 
 @keyframes blinkTransition {
-  100%,
   0% {
-    stroke: rgb(231, 111, 0);
+    stroke: rgb(255, 128, 9);
+    stroke-width: 6px;
+    filter: drop-shadow(0 0 5px rgba(255, 128, 9, 1));
   }
   100% {
-    stroke: rgb(160, 0, 168);
+    stroke: rgb(160 0 168);
   }
 }
 
diff --git a/src/VisualEditor/VisualEditor.tsx b/src/VisualEditor/VisualEditor.tsx
index 2a3978d..e2c3d61 100644
--- a/src/VisualEditor/VisualEditor.tsx
+++ b/src/VisualEditor/VisualEditor.tsx
@@ -119,6 +119,21 @@ export function VisualEditor({state, setState, ast, setAST, rt, errors, setError
     }
   }, []);
 
+  useEffect(() => {
+    // bit of a hacky way to force the animation on fired transitions to replay, if the new 'rt' contains the same fired transitions as the previous one
+    requestAnimationFrame(() => {
+      console.log('rt changed');
+      document.querySelectorAll(".arrow.fired").forEach(el => {
+        el.style.animation = 'none';
+        requestAnimationFrame(() => {
+          el.style.animation = ''; 
+        })
+        setTimeout(() => {
+        }, 10); // <- small timeout seems to be necessary or the animation won't restart
+      });
+    })
+  }, [rt]);
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       const serializedState = JSON.stringify(state);
diff --git a/todo.txt b/todo.txt
index c16257e..66c42c3 100644
--- a/todo.txt
+++ b/todo.txt
@@ -33,6 +33,7 @@ TODO
         - regions in AND-state
 
 - usability stuff:
+    - show internal events
     - highlight selected shapes while making a selection
     - comments sometimes snap to transitions even if they belong to a state
     - highlight fired transitions