From 5af0ff8f2eba32bce46f4e2359e9198f86bf7f4e Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Sat, 12 Aug 2023 22:19:42 +0530 Subject: [PATCH] fix: Fixed issue where note context menu would not open if right-clicking multiple times --- .../ContentListView/NoteListItem.tsx | 2 - .../NotesController/NotesController.ts | 63 ------------------- .../Hooks/useLifecycleAnimation.ts | 24 +++++-- 3 files changed, 20 insertions(+), 69 deletions(-) diff --git a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx index 86f4cce16..500b09c03 100644 --- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx +++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx @@ -43,12 +43,10 @@ const NoteListItem: FunctionComponent> = ({ const hasFiles = application.items.itemsReferencingItem(item).filter(isFile).length > 0 const openNoteContextMenu = (posX: number, posY: number) => { - notesController.setContextMenuOpen(false) notesController.setContextMenuClickLocation({ x: posX, y: posY, }) - notesController.reloadContextMenuLayout() notesController.setContextMenuOpen(true) } diff --git a/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts b/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts index 81945213f..3665d8b1a 100644 --- a/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts +++ b/packages/web/src/javascripts/Controllers/NotesController/NotesController.ts @@ -8,7 +8,6 @@ import { STAR_NOTE_COMMAND, } from '@standardnotes/ui-services' import { StringEmptyTrash, Strings, StringUtils } from '@/Constants/Strings' -import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants/Constants' import { SNNote, NoteMutator, @@ -44,10 +43,6 @@ export class NotesController shouldLinkToParentFolders: boolean lastSelectedNote: SNNote | undefined contextMenuOpen = false - contextMenuPosition: { top?: number; left: number; bottom?: number } = { - top: 0, - left: 0, - } contextMenuClickLocation: { x: number; y: number } = { x: 0, y: 0 } contextMenuMaxHeight: number | 'auto' = 'auto' showProtectedWarning = false @@ -71,7 +66,6 @@ export class NotesController makeObservable(this, { contextMenuOpen: observable, - contextMenuPosition: observable, showProtectedWarning: observable, selectedNotes: computed, @@ -81,8 +75,6 @@ export class NotesController setContextMenuOpen: action, setContextMenuClickLocation: action, - setContextMenuPosition: action, - setContextMenuMaxHeight: action, setShowProtectedWarning: action, unselectNotes: action, }) @@ -175,61 +167,6 @@ export class NotesController this.contextMenuClickLocation = location } - setContextMenuPosition(position: { top?: number; left: number; bottom?: number }): void { - this.contextMenuPosition = position - } - - setContextMenuMaxHeight(maxHeight: number | 'auto'): void { - this.contextMenuMaxHeight = maxHeight - } - - reloadContextMenuLayout(): void { - const { clientHeight } = document.documentElement - const defaultFontSize = window.getComputedStyle(document.documentElement).fontSize - const maxContextMenuHeight = parseFloat(defaultFontSize) * 30 - const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect() - const footerHeightInPx = footerElementRect?.height - - // Open up-bottom is default behavior - let openUpBottom = true - - if (footerHeightInPx) { - const bottomSpace = clientHeight - footerHeightInPx - this.contextMenuClickLocation.y - const upSpace = this.contextMenuClickLocation.y - - // If not enough space to open up-bottom - if (maxContextMenuHeight > bottomSpace) { - // If there's enough space, open bottom-up - if (upSpace > maxContextMenuHeight) { - openUpBottom = false - this.setContextMenuMaxHeight('auto') - // Else, reduce max height (menu will be scrollable) and open in whichever direction there's more space - } else { - if (upSpace > bottomSpace) { - this.setContextMenuMaxHeight(upSpace - MENU_MARGIN_FROM_APP_BORDER) - openUpBottom = false - } else { - this.setContextMenuMaxHeight(bottomSpace - MENU_MARGIN_FROM_APP_BORDER) - } - } - } else { - this.setContextMenuMaxHeight('auto') - } - } - - if (openUpBottom) { - this.setContextMenuPosition({ - top: this.contextMenuClickLocation.y, - left: this.contextMenuClickLocation.x, - }) - } else { - this.setContextMenuPosition({ - bottom: clientHeight - this.contextMenuClickLocation.y, - left: this.contextMenuClickLocation.x, - }) - } - } - async changeSelectedNotes(mutate: (mutator: NoteMutator) => void): Promise { await this.mutator.changeItems(this.getSelectedNotesList(), mutate, MutationType.NoUpdateUserTimestamps) this.sync.sync().catch(console.error) diff --git a/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts b/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts index dad4483e7..5aa9185dc 100644 --- a/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts +++ b/packages/web/src/javascripts/Hooks/useLifecycleAnimation.ts @@ -62,6 +62,8 @@ export const useLifecycleAnimation = ( return } + let animation: Animation | undefined + if (open) { if (!enter) { setIsMounted(true) @@ -71,7 +73,7 @@ export const useLifecycleAnimation = ( if (enter.initialStyle) { Object.assign(element.style, enter.initialStyle) } - const animation = element.animate( + animation = element.animate( prefersReducedMotion && enter.reducedMotionKeyframes ? enter.reducedMotionKeyframes : enter.keyframes, { ...enter.options, @@ -82,7 +84,12 @@ export const useLifecycleAnimation = ( .then(() => { enterCallback?.(element) }) - .catch(console.error) + .catch((error) => { + if (animation?.currentTime === null) { + return + } + console.error(error) + }) } else { if (!exit) { setIsMounted(false) @@ -92,7 +99,7 @@ export const useLifecycleAnimation = ( if (exit.initialStyle) { Object.assign(element.style, exit.initialStyle) } - const animation = element.animate( + animation = element.animate( prefersReducedMotion && exit.reducedMotionKeyframes ? exit.reducedMotionKeyframes : exit.keyframes, { ...exit.options, @@ -104,7 +111,16 @@ export const useLifecycleAnimation = ( setIsMounted(false) exitCallback?.(element) }) - .catch(console.error) + .catch((error) => { + if (animation?.currentTime === null) { + return + } + console.error(error) + }) + } + + return () => { + animation?.cancel() } }, [open, element, enterRef, enterCallbackRef, exitRef, exitCallbackRef, disabled])