Prevent token and note menu focus after transform
This commit is contained in:
parent
f13b099ff1
commit
4f049370e5
@ -104,7 +104,7 @@ function Note({
|
|||||||
function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
|
function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
|
||||||
if (draggable) {
|
if (draggable) {
|
||||||
const noteNode = event.target;
|
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;
|
const delta = event.evt.timeStamp - notePointerDownTimeRef.current;
|
||||||
if (delta < 300) {
|
if (delta < 300) {
|
||||||
const noteNode = event.target;
|
const noteNode = event.target;
|
||||||
onNoteMenuOpen?.(note.id, noteNode);
|
onNoteMenuOpen?.(note.id, noteNode, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -198,7 +198,7 @@ function Note({
|
|||||||
rotation: rotation,
|
rotation: rotation,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
onNoteMenuOpen?.(note.id, noteRef.current);
|
onNoteMenuOpen?.(note.id, noteRef.current, false);
|
||||||
noteRef.current.scaleX(1);
|
noteRef.current.scaleX(1);
|
||||||
noteRef.current.scaleY(1);
|
noteRef.current.scaleY(1);
|
||||||
}
|
}
|
||||||
|
@ -229,7 +229,7 @@ function Token({
|
|||||||
|
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
if (selectable && draggable && tokenRef.current) {
|
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
|
// If down and up time is small trigger a click
|
||||||
const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
|
const delta = event.evt.timeStamp - tokenPointerDownTimeRef.current;
|
||||||
if (delta < 300) {
|
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.scaleX(1);
|
||||||
tokenRef.current.scaleY(1);
|
tokenRef.current.scaleY(1);
|
||||||
onTokenMenuOpen(tokenState.id, tokenRef.current);
|
onTokenMenuOpen(tokenState.id, tokenRef.current, false);
|
||||||
}
|
}
|
||||||
setIsTransforming(false);
|
setIsTransforming(false);
|
||||||
}
|
}
|
||||||
|
@ -31,6 +31,7 @@ type NoteMenuProps = {
|
|||||||
onRequestClose: RequestCloseEventHandler;
|
onRequestClose: RequestCloseEventHandler;
|
||||||
note?: Note;
|
note?: Note;
|
||||||
noteNode?: Konva.Node;
|
noteNode?: Konva.Node;
|
||||||
|
focus: boolean;
|
||||||
onNoteChange: NoteChangeEventHandler;
|
onNoteChange: NoteChangeEventHandler;
|
||||||
map: Map | null;
|
map: Map | null;
|
||||||
};
|
};
|
||||||
@ -40,6 +41,7 @@ function NoteMenu({
|
|||||||
onRequestClose,
|
onRequestClose,
|
||||||
note,
|
note,
|
||||||
noteNode,
|
noteNode,
|
||||||
|
focus,
|
||||||
onNoteChange,
|
onNoteChange,
|
||||||
map,
|
map,
|
||||||
}: NoteMenuProps) {
|
}: NoteMenuProps) {
|
||||||
@ -95,7 +97,7 @@ function NoteMenu({
|
|||||||
// Focus input
|
// Focus input
|
||||||
const tokenLabelInput =
|
const tokenLabelInput =
|
||||||
node.querySelector<HTMLInputElement>("#changeNoteText");
|
node.querySelector<HTMLInputElement>("#changeNoteText");
|
||||||
if (tokenLabelInput) {
|
if (tokenLabelInput && focus) {
|
||||||
tokenLabelInput.focus();
|
tokenLabelInput.focus();
|
||||||
tokenLabelInput.select();
|
tokenLabelInput.select();
|
||||||
}
|
}
|
||||||
@ -219,4 +221,8 @@ function NoteMenu({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
NoteMenu.defaultProps = {
|
||||||
|
focus: false,
|
||||||
|
};
|
||||||
|
|
||||||
export default NoteMenu;
|
export default NoteMenu;
|
||||||
|
@ -58,6 +58,7 @@ type TokenMenuProps = {
|
|||||||
onRequestClose: RequestCloseEventHandler;
|
onRequestClose: RequestCloseEventHandler;
|
||||||
tokenState?: TokenState;
|
tokenState?: TokenState;
|
||||||
tokenImage?: Konva.Node;
|
tokenImage?: Konva.Node;
|
||||||
|
focus: boolean;
|
||||||
onTokenStateChange: TokenStateChangeEventHandler;
|
onTokenStateChange: TokenStateChangeEventHandler;
|
||||||
map: Map | null;
|
map: Map | null;
|
||||||
};
|
};
|
||||||
@ -67,6 +68,7 @@ function TokenMenu({
|
|||||||
onRequestClose,
|
onRequestClose,
|
||||||
tokenState,
|
tokenState,
|
||||||
tokenImage,
|
tokenImage,
|
||||||
|
focus,
|
||||||
onTokenStateChange,
|
onTokenStateChange,
|
||||||
map,
|
map,
|
||||||
}: TokenMenuProps) {
|
}: TokenMenuProps) {
|
||||||
@ -143,7 +145,7 @@ function TokenMenu({
|
|||||||
// Focus input
|
// Focus input
|
||||||
const tokenLabelInput =
|
const tokenLabelInput =
|
||||||
node.querySelector<HTMLInputElement>("#changeTokenLabel");
|
node.querySelector<HTMLInputElement>("#changeTokenLabel");
|
||||||
if (tokenLabelInput) {
|
if (tokenLabelInput && focus) {
|
||||||
tokenLabelInput.focus();
|
tokenLabelInput.focus();
|
||||||
tokenLabelInput.select();
|
tokenLabelInput.select();
|
||||||
}
|
}
|
||||||
@ -276,4 +278,8 @@ function TokenMenu({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
TokenMenu.defaultProps = {
|
||||||
|
focus: false,
|
||||||
|
};
|
||||||
|
|
||||||
export default TokenMenu;
|
export default TokenMenu;
|
||||||
|
@ -117,7 +117,7 @@ function NoteTool({
|
|||||||
function handleBrushUp() {
|
function handleBrushUp() {
|
||||||
if (noteData && creatingNoteRef.current) {
|
if (noteData && creatingNoteRef.current) {
|
||||||
onNoteCreate([noteData]);
|
onNoteCreate([noteData]);
|
||||||
onNoteMenuOpen(noteData.id, creatingNoteRef.current);
|
onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
|
||||||
}
|
}
|
||||||
setNoteData(null);
|
setNoteData(null);
|
||||||
setIsBrushDown(false);
|
setIsBrushDown(false);
|
||||||
|
@ -41,8 +41,12 @@ function useMapNotes(
|
|||||||
const [noteDraggingOptions, setNoteDraggingOptions] =
|
const [noteDraggingOptions, setNoteDraggingOptions] =
|
||||||
useState<NoteDraggingOptions>();
|
useState<NoteDraggingOptions>();
|
||||||
|
|
||||||
function handleNoteMenuOpen(noteId: string, noteNode: Konva.Node) {
|
function handleNoteMenuOpen(
|
||||||
setNoteMenuOptions({ noteId, noteNode });
|
noteId: string,
|
||||||
|
noteNode: Konva.Node,
|
||||||
|
focus: boolean
|
||||||
|
) {
|
||||||
|
setNoteMenuOptions({ noteId, noteNode, focus });
|
||||||
setIsNoteMenuOpen(true);
|
setIsNoteMenuOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -135,6 +139,7 @@ function useMapNotes(
|
|||||||
onNoteChange={onNoteChange}
|
onNoteChange={onNoteChange}
|
||||||
note={noteMenuOptions && mapState?.notes[noteMenuOptions.noteId]}
|
note={noteMenuOptions && mapState?.notes[noteMenuOptions.noteId]}
|
||||||
noteNode={noteMenuOptions?.noteNode}
|
noteNode={noteMenuOptions?.noteNode}
|
||||||
|
focus={noteMenuOptions?.focus}
|
||||||
map={map}
|
map={map}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -49,8 +49,12 @@ function useMapTokens(
|
|||||||
const [tokenDraggingOptions, setTokenDraggingOptions] =
|
const [tokenDraggingOptions, setTokenDraggingOptions] =
|
||||||
useState<TokenDraggingOptions>();
|
useState<TokenDraggingOptions>();
|
||||||
|
|
||||||
function handleTokenMenuOpen(tokenStateId: string, tokenImage: Konva.Node) {
|
function handleTokenMenuOpen(
|
||||||
setTokenMenuOptions({ tokenStateId, tokenImage });
|
tokenStateId: string,
|
||||||
|
tokenImage: Konva.Node,
|
||||||
|
focus: boolean
|
||||||
|
) {
|
||||||
|
setTokenMenuOptions({ tokenStateId, tokenImage, focus });
|
||||||
setIsTokenMenuOpen(true);
|
setIsTokenMenuOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -174,6 +178,7 @@ function useMapTokens(
|
|||||||
tokenState={
|
tokenState={
|
||||||
tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId]
|
tokenMenuOptions && mapState?.tokens[tokenMenuOptions.tokenStateId]
|
||||||
}
|
}
|
||||||
|
focus={tokenMenuOptions?.focus}
|
||||||
tokenImage={tokenMenuOptions?.tokenImage}
|
tokenImage={tokenMenuOptions?.tokenImage}
|
||||||
map={map}
|
map={map}
|
||||||
/>
|
/>
|
||||||
|
@ -28,7 +28,8 @@ export type TokenStateChangeEventHandler = (
|
|||||||
) => void;
|
) => void;
|
||||||
export type TokenMenuOpenChangeEventHandler = (
|
export type TokenMenuOpenChangeEventHandler = (
|
||||||
tokenStateId: string,
|
tokenStateId: string,
|
||||||
tokenImage: Konva.Node
|
tokenImage: Konva.Node,
|
||||||
|
focus: boolean
|
||||||
) => void;
|
) => void;
|
||||||
export type TokenMenuCloseChangeEventHandler = () => void;
|
export type TokenMenuCloseChangeEventHandler = () => void;
|
||||||
export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
|
export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
|
||||||
@ -45,7 +46,8 @@ export type NoteChangeEventHandler = (
|
|||||||
) => void;
|
) => void;
|
||||||
export type NoteMenuOpenEventHandler = (
|
export type NoteMenuOpenEventHandler = (
|
||||||
noteId: string,
|
noteId: string,
|
||||||
noteNode: Konva.Node
|
noteNode: Konva.Node,
|
||||||
|
focus: boolean
|
||||||
) => void;
|
) => void;
|
||||||
export type NoteMenuCloseEventHandler = () => void;
|
export type NoteMenuCloseEventHandler = () => void;
|
||||||
export type NoteDragEventHandler = (
|
export type NoteDragEventHandler = (
|
||||||
|
@ -19,6 +19,7 @@ export type Note = {
|
|||||||
export type NoteMenuOptions = {
|
export type NoteMenuOptions = {
|
||||||
noteId: string;
|
noteId: string;
|
||||||
noteNode: Konva.Node;
|
noteNode: Konva.Node;
|
||||||
|
focus: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type NoteDraggingOptions = {
|
export type NoteDraggingOptions = {
|
||||||
|
@ -34,6 +34,7 @@ export type Token = DefaultToken | FileToken;
|
|||||||
export type TokenMenuOptions = {
|
export type TokenMenuOptions = {
|
||||||
tokenStateId: string;
|
tokenStateId: string;
|
||||||
tokenImage: Konva.Node;
|
tokenImage: Konva.Node;
|
||||||
|
focus: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type TokenDraggingOptions = {
|
export type TokenDraggingOptions = {
|
||||||
|
Loading…
Reference in New Issue
Block a user