custom dialog for editing text labels (no more window.prompt)

src/App/App.tsx

@@ -184,7 +184,7 @@ export function App() {
         flexGrow:1,
         overflow:'auto',
       }}>
-        <VisualEditor {...{ast, setAST, rt: rt.at(rtIdx!), setRT, errors, setErrors, mode, highlightActive, highlightTransitions}}/>
+        <VisualEditor {...{ast, setAST, rt: rt.at(rtIdx!), setRT, errors, setErrors, mode, highlightActive, highlightTransitions, setModal}}/>
       </Box>
 
       {/* right sidebar */}

src/App/TextDialog.tsx

@@ -0,0 +1,26 @@
+import { Dispatch, ReactElement, SetStateAction, useState } from "react";
+
+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) {
+        e.preventDefault();
+        props.done(text);
+        props.setModal(null);
+      }
+    }
+    if (e.key === "Escape") {
+      props.setModal(null);
+      e.stopPropagation();
+    }
+    e.stopPropagation();
+  }
+  return <span onKeyDown={onKeyDown} style={{backgroundColor:'white'}}>
+    <textarea style={{fontFamily: 'Roboto', width:500, height: 100}} onChange={e=>setText(e.target.value)}>{text}</textarea>
+    <br/>
+    <span style={{backgroundColor:'lightyellow'}}>
+    Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.
+    </span>
+  </span>;
+}

src/App/TopPanel.tsx

@@ -75,6 +75,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
+      if (!e.ctrlKey) {
         if (e.key === " ") {
           e.preventDefault();
           if (rt)
@@ -108,6 +109,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
           e.preventDefault();
           onBack();
         }
+      }
     };
     window.addEventListener("keydown", onKeyDown);
     return () => {

src/App/shortcut_handler.ts

@@ -3,6 +3,7 @@ import { InsertMode } from "../VisualEditor/VisualEditor";
 
 export function getKeyHandler(setMode: Dispatch<SetStateAction<InsertMode>>) {
   return function onKeyDown(e: KeyboardEvent) {
+    if (!e.ctrlKey) {
       if (e.key === "a") {
         setMode("and");
       }
@@ -25,4 +26,5 @@ export function getKeyHandler(setMode: Dispatch<SetStateAction<InsertMode>>) {
         })
       }
     }
+  }
 }

src/VisualEditor/TextSVG.tsx

@@ -1,7 +1,9 @@
+import { TextDialog } from "@/App/TextDialog";
 import { TraceableError } from "..//statecharts/parser";
 import {Text} from "../statecharts/concrete_syntax";
+import { Dispatch, ReactElement, SetStateAction } from "react";
 
-export function TextSVG(props: {text: Text, error: TraceableError|undefined, selected: boolean, highlight: boolean, onEdit: (newText: string) => void}) {
+export function TextSVG(props: {text: Text, error: TraceableError|undefined, selected: boolean, highlight: boolean, onEdit: (newText: string) => void, setModal: Dispatch<SetStateAction<ReactElement|null>>}) {
   const commonProps = {
     "data-uid": props.text.uid,
     "data-parts": "text",
@@ -9,6 +11,7 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
     className: "draggableText"
       + (props.selected ? " selected":"")
       + (props.highlight ? " highlight":""),
+    style: {whiteSpace: "preserve"},
   }
 
   let textNode;
@@ -32,12 +35,13 @@ export function TextSVG(props: {text: Text, error: TraceableError|undefined, sel
     key={props.text.uid}
     transform={`translate(${props.text.topLeft.x} ${props.text.topLeft.y})`}
     onDoubleClick={() => {
-      const newText = prompt("", props.text.text);
+      props.setModal(<TextDialog setModal={props.setModal} text={props.text.text} done={newText => {
           if (newText) {
             props.onEdit(newText);
           }
+      }} />)
     }}>
       {textNode}
-      <text className="draggableText helper" textAnchor="middle" data-uid={props.text.uid} data-parts="text">{props.text.text}</text>
+      <text className="draggableText helper" textAnchor="middle" data-uid={props.text.uid} data-parts="text" style={{whiteSpace: "preserve"}}>{props.text.text}</text>
     </g>;
 }

src/VisualEditor/VisualEditor.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useRef, useState } from "react";
+import { Dispatch, ReactElement, SetStateAction, useEffect, useMemo, useRef, useState } from "react";
 
 import { Statechart } from "../statecharts/abstract_syntax";
 import { Arrow, ArrowPart, Diamond, History, Rountangle, RountanglePart, Text, VisualEditorState, emptyState } from "../statecharts/concrete_syntax";
@@ -68,9 +68,10 @@ type VisualEditorProps = {
   mode: InsertMode,
   highlightActive: Set<string>,
   highlightTransitions: string[],
+  setModal: Dispatch<SetStateAction<ReactElement|null>>,
 };
 
-export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highlightActive, highlightTransitions}: VisualEditorProps) {
+export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highlightActive, highlightTransitions, setModal}: VisualEditorProps) {
   const [historyState, setHistoryState] = useState<HistoryState>({current: emptyState, history: [], future: []});
 
   const state = historyState.current;
@@ -324,7 +325,7 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
     setSelection([]);
   };
 
-  const onMouseMove = (e: {pageX: number, pageY: number}) => {
+  const onMouseMove = (e: {pageX: number, pageY: number, movementX: number, movementY: number}) => {
     const currentPointer = getCurrentPointer(e);
     if (dragging) {
       // const pointerDelta = subtractV2D(currentPointer, dragging.lastMousePos);
@@ -812,6 +813,7 @@ export function VisualEditor({ast, setAST, rt, errors, setErrors, mode, highligh
         selected={Boolean(selection.find(s => s.uid === txt.uid)?.parts?.length)}
         highlight={textsToHighlight.hasOwnProperty(txt.uid)}
         onEdit={newText => onEditText(txt, newText)}
+        setModal={setModal}
       />
     })}