From 4f049370e56b923dc63cdb04eef828572e5bc0dd Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Thu, 12 Aug 2021 11:26:02 +1000 Subject: [PATCH] Prevent token and note menu focus after transform --- src/components/konva/Note.tsx | 6 +++--- src/components/konva/Token.tsx | 6 +++--- src/components/note/NoteMenu.tsx | 8 +++++++- src/components/token/TokenMenu.tsx | 8 +++++++- src/components/tools/NoteTool.tsx | 2 +- src/hooks/useMapNotes.tsx | 9 +++++++-- src/hooks/useMapTokens.tsx | 9 +++++++-- src/types/Events.ts | 6 ++++-- src/types/Note.ts | 1 + src/types/Token.ts | 1 + 10 files changed, 41 insertions(+), 15 deletions(-) diff --git a/src/components/konva/Note.tsx b/src/components/konva/Note.tsx index 47a3bbd..824234e 100644 --- a/src/components/konva/Note.tsx +++ b/src/components/konva/Note.tsx @@ -104,7 +104,7 @@ function Note({ function handleClick(event: Konva.KonvaEventObject) { if (draggable) { const noteNode = event.target; - onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode); + onNoteMenuOpen && onNoteMenuOpen(note.id, noteNode, true); } } @@ -130,7 +130,7 @@ function Note({ const delta = event.evt.timeStamp - notePointerDownTimeRef.current; if (delta < 300) { const noteNode = event.target; - onNoteMenuOpen?.(note.id, noteNode); + onNoteMenuOpen?.(note.id, noteNode, true); } } } @@ -198,7 +198,7 @@ function Note({ rotation: rotation, }, }); - onNoteMenuOpen?.(note.id, noteRef.current); + onNoteMenuOpen?.(note.id, noteRef.current, false); noteRef.current.scaleX(1); noteRef.current.scaleY(1); } diff --git a/src/components/konva/Token.tsx b/src/components/konva/Token.tsx index f2ea246..507caaf 100644 --- a/src/components/konva/Token.tsx +++ b/src/components/konva/Token.tsx @@ -229,7 +229,7 @@ function Token({ function handleClick() { if (selectable && draggable && tokenRef.current) { - onTokenMenuOpen(tokenState.id, tokenRef.current); + onTokenMenuOpen(tokenState.id, tokenRef.current, true); } } @@ -255,7 +255,7 @@ function Token({ // If down and up time is small trigger a click const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current; if (delta < 300) { - onTokenMenuOpen(tokenState.id, tokenRef.current); + onTokenMenuOpen(tokenState.id, tokenRef.current, true); } } } @@ -292,7 +292,7 @@ function Token({ }); tokenRef.current.scaleX(1); tokenRef.current.scaleY(1); - onTokenMenuOpen(tokenState.id, tokenRef.current); + onTokenMenuOpen(tokenState.id, tokenRef.current, false); } setIsTransforming(false); } diff --git a/src/components/note/NoteMenu.tsx b/src/components/note/NoteMenu.tsx index 2ba01c1..f2b6f81 100644 --- a/src/components/note/NoteMenu.tsx +++ b/src/components/note/NoteMenu.tsx @@ -31,6 +31,7 @@ type NoteMenuProps = { onRequestClose: RequestCloseEventHandler; note?: Note; noteNode?: Konva.Node; + focus: boolean; onNoteChange: NoteChangeEventHandler; map: Map | null; }; @@ -40,6 +41,7 @@ function NoteMenu({ onRequestClose, note, noteNode, + focus, onNoteChange, map, }: NoteMenuProps) { @@ -95,7 +97,7 @@ function NoteMenu({ // Focus input const tokenLabelInput = node.querySelector("#changeNoteText"); - if (tokenLabelInput) { + if (tokenLabelInput && focus) { tokenLabelInput.focus(); tokenLabelInput.select(); } @@ -219,4 +221,8 @@ function NoteMenu({ ); } +NoteMenu.defaultProps = { + focus: false, +}; + export default NoteMenu; diff --git a/src/components/token/TokenMenu.tsx b/src/components/token/TokenMenu.tsx index f56924d..dfa1f64 100644 --- a/src/components/token/TokenMenu.tsx +++ b/src/components/token/TokenMenu.tsx @@ -58,6 +58,7 @@ type TokenMenuProps = { onRequestClose: RequestCloseEventHandler; tokenState?: TokenState; tokenImage?: Konva.Node; + focus: boolean; onTokenStateChange: TokenStateChangeEventHandler; map: Map | null; }; @@ -67,6 +68,7 @@ function TokenMenu({ onRequestClose, tokenState, tokenImage, + focus, onTokenStateChange, map, }: TokenMenuProps) { @@ -143,7 +145,7 @@ function TokenMenu({ // Focus input const tokenLabelInput = node.querySelector("#changeTokenLabel"); - if (tokenLabelInput) { + if (tokenLabelInput && focus) { tokenLabelInput.focus(); tokenLabelInput.select(); } @@ -276,4 +278,8 @@ function TokenMenu({ ); } +TokenMenu.defaultProps = { + focus: false, +}; + export default TokenMenu; diff --git a/src/components/tools/NoteTool.tsx b/src/components/tools/NoteTool.tsx index 2669f09..98195d8 100644 --- a/src/components/tools/NoteTool.tsx +++ b/src/components/tools/NoteTool.tsx @@ -117,7 +117,7 @@ function NoteTool({ function handleBrushUp() { if (noteData && creatingNoteRef.current) { onNoteCreate([noteData]); - onNoteMenuOpen(noteData.id, creatingNoteRef.current); + onNoteMenuOpen(noteData.id, creatingNoteRef.current, true); } setNoteData(null); setIsBrushDown(false); diff --git a/src/hooks/useMapNotes.tsx b/src/hooks/useMapNotes.tsx index a9d633d..43647da 100644 --- a/src/hooks/useMapNotes.tsx +++ b/src/hooks/useMapNotes.tsx @@ -41,8 +41,12 @@ function useMapNotes( const [noteDraggingOptions, setNoteDraggingOptions] = useState(); - function handleNoteMenuOpen(noteId: string, noteNode: Konva.Node) { - setNoteMenuOptions({ noteId, noteNode }); + function handleNoteMenuOpen( + noteId: string, + noteNode: Konva.Node, + focus: boolean + ) { + setNoteMenuOptions({ noteId, noteNode, focus }); setIsNoteMenuOpen(true); } @@ -135,6 +139,7 @@ function useMapNotes( onNoteChange={onNoteChange} note={noteMenuOptions && mapState?.notes[noteMenuOptions.noteId]} noteNode={noteMenuOptions?.noteNode} + focus={noteMenuOptions?.focus} map={map} /> ); diff --git a/src/hooks/useMapTokens.tsx b/src/hooks/useMapTokens.tsx index b9e54df..a41c2ab 100644 --- a/src/hooks/useMapTokens.tsx +++ b/src/hooks/useMapTokens.tsx @@ -49,8 +49,12 @@ function useMapTokens( const [tokenDraggingOptions, setTokenDraggingOptions] = useState(); - function handleTokenMenuOpen(tokenStateId: string, tokenImage: Konva.Node) { - setTokenMenuOptions({ tokenStateId, tokenImage }); + function handleTokenMenuOpen( + tokenStateId: string, + tokenImage: Konva.Node, + focus: boolean + ) { + setTokenMenuOptions({ tokenStateId, tokenImage, focus }); setIsTokenMenuOpen(true); } @@ -174,6 +178,7 @@ function useMapTokens( tokenState={ tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId] } + focus={tokenMenuOptions?.focus} tokenImage={tokenMenuOptions?.tokenImage} map={map} /> diff --git a/src/types/Events.ts b/src/types/Events.ts index b07f183..29be309 100644 --- a/src/types/Events.ts +++ b/src/types/Events.ts @@ -28,7 +28,8 @@ export type TokenStateChangeEventHandler = ( ) => void; export type TokenMenuOpenChangeEventHandler = ( tokenStateId: string, - tokenImage: Konva.Node + tokenImage: Konva.Node, + focus: boolean ) => void; export type TokenMenuCloseChangeEventHandler = () => void; export type TokenSettingsChangeEventHandler = (change: Partial) => void; @@ -45,7 +46,8 @@ export type NoteChangeEventHandler = ( ) => void; export type NoteMenuOpenEventHandler = ( noteId: string, - noteNode: Konva.Node + noteNode: Konva.Node, + focus: boolean ) => void; export type NoteMenuCloseEventHandler = () => void; export type NoteDragEventHandler = ( diff --git a/src/types/Note.ts b/src/types/Note.ts index 7d54409..c7c746d 100644 --- a/src/types/Note.ts +++ b/src/types/Note.ts @@ -19,6 +19,7 @@ export type Note = { export type NoteMenuOptions = { noteId: string; noteNode: Konva.Node; + focus: boolean; }; export type NoteDraggingOptions = { diff --git a/src/types/Token.ts b/src/types/Token.ts index 2ae4583..d68fb16 100644 --- a/src/types/Token.ts +++ b/src/types/Token.ts @@ -34,6 +34,7 @@ export type Token = DefaultToken | FileToken; export type TokenMenuOptions = { tokenStateId: string; tokenImage: Konva.Node; + focus: boolean; }; export type TokenDraggingOptions = {