editable connections sc <-> plant

src/App/TopPanel/InsertModes.tsx

@@ -1,10 +1,11 @@
-import { Dispatch, memo, ReactElement, SetStateAction } from "react";
+import { Dispatch, memo, ReactElement, SetStateAction, useCallback, useEffect } from "react";
 import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo";
-import { InsertMode } from "@/App/VisualEditor/VisualEditor";
 import { HistoryIcon, PseudoStateIcon, RountangleIcon } from "./Icons";
 
 import TrendingFlatIcon from '@mui/icons-material/TrendingFlat';
 
+export type InsertMode = "and" | "or" | "pseudo" | "shallow" | "deep" | "transition" | "text";
+
 const insertModes: [InsertMode, string, ReactElement, ReactElement][] = [
   ["and", "AND-states", <RountangleIcon kind="and"/>, <kbd>A</kbd>],
   ["or", "OR-states", <RountangleIcon kind="or"/>, <kbd>O</kbd>],
@@ -16,6 +17,47 @@ const insertModes: [InsertMode, string, ReactElement, ReactElement][] = [
 ];
 
 export const InsertModes = memo(function InsertModes({showKeys, insertMode, setInsertMode}: {showKeys: boolean, insertMode: InsertMode, setInsertMode: Dispatch<SetStateAction<InsertMode>>}) {
+
+  const onKeyDown = useCallback((e: KeyboardEvent) => {
+    // @ts-ignore
+    if (["INPUT", "TEXTAREA", "SELECT"].includes(e.target?.tagName)) return;
+
+    if (!e.ctrlKey) {
+      if (e.key === "a") {
+        e.preventDefault();
+        setInsertMode("and");
+      }
+      if (e.key === "o") {
+        e.preventDefault();
+        setInsertMode("or");
+      }
+      if (e.key === "p") {
+        e.preventDefault();
+        setInsertMode("pseudo");
+      }
+      if (e.key === "t") {
+        e.preventDefault();
+        setInsertMode("transition");
+      }
+      if (e.key === "x") {
+        e.preventDefault();
+        setInsertMode("text");
+      }
+      if (e.key === "h") {
+        e.preventDefault();
+        setInsertMode(oldMode => {
+          if (oldMode === "shallow") return "deep";
+          return "shallow";
+        })
+      }
+    }
+  }, [setInsertMode]);
+
+  useEffect(() => {
+    window.addEventListener("keydown", onKeyDown);
+    () => window.removeEventListener("keydown", onKeyDown);
+  }, [onKeyDown]);
+
   const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;
   return <>{insertModes.map(([m, hint, buttonTxt, keyInfo]) => <KeyInfo key={m} keyInfo={keyInfo}>
     <button
@@ -25,4 +67,4 @@ export const InsertModes = memo(function InsertModes({showKeys, insertMode, setI
       onClick={() => setInsertMode(m)}
     >{buttonTxt}</button>
   </KeyInfo>)}</>;
-})
+})