make arrows removeable

front/components/TitleInput.tsx

@@ -24,7 +24,7 @@ export default function TitleInput({
             value={value}
             onChange={(event) => setValue(event.target.value)}
             onBlur={(_) => on_validated(value)}
-            onKeyDown={(event) => {
+            onKeyUp={(event) => {
                 if (event.key == "Enter") ref.current?.blur()
             }}
         />

front/components/arrows/BendableArrow.tsx

@@ -28,6 +28,8 @@ export interface BendableArrowProps {
     startRadius?: number
     endRadius?: number
 
+    onDeleteRequested?: () => void
+
     style?: ArrowStyle
 }
 
@@ -73,6 +75,7 @@ export default function BendableArrow({
     style,
     startRadius = 0,
     endRadius = 0,
+    onDeleteRequested = () => {},
 }: BendableArrowProps) {
     const containerRef = useRef<HTMLDivElement>(null)
     const svgRef = useRef<SVGSVGElement>(null)
@@ -265,6 +268,10 @@ export default function BendableArrow({
                     stroke={"#000"}
                     strokeWidth={styleWidth}
                     fill="none"
+                    tabIndex={0}
+                    onKeyUp={(e) => {
+                        if (e.key == "Delete") onDeleteRequested()
+                    }}
                 />
             </svg>
 
@@ -327,7 +334,7 @@ function ControlPoint({
                     width: radius * 2,
                     height: radius * 2,
                 }}
-                onKeyDown={(e) => {
+                onKeyUp={(e) => {
                     if (e.key == "Delete") {
                         onPosValidated(undefined)
                     }

front/style/bendable_arrows.css

@@ -13,6 +13,7 @@
 .arrow-path {
     pointer-events: stroke;
     cursor: pointer;
+    outline: none;
 }
 
 .arrow-path:hover,

front/views/Editor.tsx

@@ -169,7 +169,7 @@ function EditorView({
                 players: [
                     ...content.players,
                     {
-                        id: "player-" + content.players.length,
+                        id: "player-" + element.key + "-" + element.team,
                         team: element.team,
                         role: element.key,
                         rightRatio: x,
@@ -450,6 +450,16 @@ function EditorView({
                                     key={i}
                                     action={action}
                                     courtRef={courtDivContentRef}
+                                    onActionDeleted={() => {
+                                        setContent((content) => ({
+                                            ...content,
+                                            players: content.players,
+                                            actions: content.actions.toSpliced(
+                                                i,
+                                                1,
+                                            ),
+                                        }))
+                                    }}
                                     onActionChanges={(a) =>
                                         setContent((content) => ({
                                             ...content,

front/views/editor/CourtAction.tsx

@@ -5,12 +5,14 @@ import { RefObject } from "react"
 export interface CourtActionProps {
     action: Action
     onActionChanges: (a: Action) => void
+    onActionDeleted: () => void
     courtRef: RefObject<HTMLElement>
 }
 
 export function CourtAction({
     action,
     onActionChanges,
+    onActionDeleted,
     courtRef,
 }: CourtActionProps) {
     return (
@@ -24,6 +26,7 @@ export function CourtAction({
             //TODO place those magic values in constants
             endRadius={action.toPlayerId ? 26 : 17}
             startRadius={26}
+            onDeleteRequested={onActionDeleted}
         />
     )
 }

src/App/react-display-file.php

@@ -17,6 +17,7 @@
     </script>
 
     <link rel="icon" href="<?= asset("assets/favicon.ico") ?>">
+
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">