diff --git a/front/components/TitleInput.tsx b/front/components/TitleInput.tsx index 8da1c65..477e3d0 100644 --- a/front/components/TitleInput.tsx +++ b/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() }} /> diff --git a/front/components/arrows/BendableArrow.tsx b/front/components/arrows/BendableArrow.tsx index f6d698e..4d42433 100644 --- a/front/components/arrows/BendableArrow.tsx +++ b/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(null) const svgRef = useRef(null) @@ -265,6 +268,10 @@ export default function BendableArrow({ stroke={"#000"} strokeWidth={styleWidth} fill="none" + tabIndex={0} + onKeyUp={(e) => { + if (e.key == "Delete") onDeleteRequested() + }} /> @@ -327,7 +334,7 @@ function ControlPoint({ width: radius * 2, height: radius * 2, }} - onKeyDown={(e) => { + onKeyUp={(e) => { if (e.key == "Delete") { onPosValidated(undefined) } diff --git a/front/style/bendable_arrows.css b/front/style/bendable_arrows.css index 75a1be1..ad9fb83 100644 --- a/front/style/bendable_arrows.css +++ b/front/style/bendable_arrows.css @@ -13,6 +13,7 @@ .arrow-path { pointer-events: stroke; cursor: pointer; + outline: none; } .arrow-path:hover, diff --git a/front/views/Editor.tsx b/front/views/Editor.tsx index a44a2ad..610a3ab 100644 --- a/front/views/Editor.tsx +++ b/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, diff --git a/front/views/editor/CourtAction.tsx b/front/views/editor/CourtAction.tsx index 47dadad..7a2e037 100644 --- a/front/views/editor/CourtAction.tsx +++ b/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 } 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} /> ) } diff --git a/src/App/react-display-file.php b/src/App/react-display-file.php index ca672d0..7b09417 100755 --- a/src/App/react-display-file.php +++ b/src/App/react-display-file.php @@ -17,6 +17,7 @@ "> +