From a9af58146b93368a55108b4d1f6841d6476cca4c Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Wed, 23 Dec 2020 23:17:12 +0000 Subject: [PATCH] Desktop: Fixes #4201: Fixed context menu when the UI is zoomed in or out --- .eslintignore | 3 +++ .gitignore | 3 +++ .../NoteBody/CodeMirror/CodeMirror.tsx | 3 ++- .../NoteBody/TinyMCE/utils/useContextMenu.ts | 3 ++- .../gui/utils/convertToScreenCoordinates.ts | 18 ++++++++++++++++++ 5 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 packages/app-desktop/gui/utils/convertToScreenCoordinates.ts diff --git a/.eslintignore b/.eslintignore index 3c4b2044f..2265e1864 100644 --- a/.eslintignore +++ b/.eslintignore @@ -718,6 +718,9 @@ packages/app-desktop/gui/style/StyledTextInput.js.map packages/app-desktop/gui/utils/NoteListUtils.d.ts packages/app-desktop/gui/utils/NoteListUtils.js packages/app-desktop/gui/utils/NoteListUtils.js.map +packages/app-desktop/gui/utils/convertToScreenCoordinates.d.ts +packages/app-desktop/gui/utils/convertToScreenCoordinates.js +packages/app-desktop/gui/utils/convertToScreenCoordinates.js.map packages/app-desktop/plugins/GotoAnything.d.ts packages/app-desktop/plugins/GotoAnything.js packages/app-desktop/plugins/GotoAnything.js.map diff --git a/.gitignore b/.gitignore index 76b611a38..ef31bd220 100644 --- a/.gitignore +++ b/.gitignore @@ -707,6 +707,9 @@ packages/app-desktop/gui/style/StyledTextInput.js.map packages/app-desktop/gui/utils/NoteListUtils.d.ts packages/app-desktop/gui/utils/NoteListUtils.js packages/app-desktop/gui/utils/NoteListUtils.js.map +packages/app-desktop/gui/utils/convertToScreenCoordinates.d.ts +packages/app-desktop/gui/utils/convertToScreenCoordinates.js +packages/app-desktop/gui/utils/convertToScreenCoordinates.js.map packages/app-desktop/plugins/GotoAnything.d.ts packages/app-desktop/plugins/GotoAnything.js packages/app-desktop/plugins/GotoAnything.js.map diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index cf6d8fa5e..65aa5a9ab 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -24,6 +24,7 @@ import { themeStyle } from '@joplin/lib/theme'; import { ThemeAppearance } from '@joplin/lib/themes/type'; import SpellCheckerService from '@joplin/lib/services/spellChecker/SpellCheckerService'; import dialogs from '../../../dialogs'; +import convertToScreenCoordinates from '../../../utils/convertToScreenCoordinates'; const Note = require('@joplin/lib/models/Note.js'); const { clipboard } = require('electron'); @@ -613,7 +614,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { function pointerInsideEditor(x: number, y: number) { const elements = document.getElementsByClassName('codeMirrorEditor'); if (!elements.length) return null; - const rect = elements[0].getBoundingClientRect(); + const rect = convertToScreenCoordinates(elements[0].getBoundingClientRect()); return rect.x < x && rect.y < y && rect.right > x && rect.bottom > y; } diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts index a04195227..ec46479d7 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts @@ -6,6 +6,7 @@ import bridge from '../../../../../services/bridge'; import { menuItems, ContextMenuOptions, ContextMenuItemType } from '../../../utils/contextMenu'; import MenuUtils from '@joplin/lib/services/commands/MenuUtils'; import CommandService from '@joplin/lib/services/CommandService'; +import convertToScreenCoordinates from '../../../../utils/convertToScreenCoordinates'; const Resource = require('@joplin/lib/models/Resource'); @@ -20,7 +21,7 @@ function contextMenuElement(editor: any, x: number, y: number) { const iframes = document.getElementsByClassName('tox-edit-area__iframe'); if (!iframes.length) return null; - const iframeRect = iframes[0].getBoundingClientRect(); + const iframeRect = convertToScreenCoordinates(iframes[0].getBoundingClientRect()); if (iframeRect.x < x && iframeRect.y < y && iframeRect.right > x && iframeRect.bottom > y) { const relativeX = x - iframeRect.x; diff --git a/packages/app-desktop/gui/utils/convertToScreenCoordinates.ts b/packages/app-desktop/gui/utils/convertToScreenCoordinates.ts new file mode 100644 index 000000000..c4a3b5dff --- /dev/null +++ b/packages/app-desktop/gui/utils/convertToScreenCoordinates.ts @@ -0,0 +1,18 @@ +// Converts world coordinate to screen coordinates by applying the current +// zoom. +export default function convertToScreenCoordinates(o: any): any { + const pixelRatio = window.devicePixelRatio; + + if (typeof o === 'number') return o * pixelRatio; + + if (typeof o === 'object' && o !== null) { + o = JSON.parse(JSON.stringify(o)); + console.info('K', Object.keys(o)); + for (const k of Object.keys(o)) { + o[k] = convertToScreenCoordinates(o[k]); + } + return o; + } + + throw new Error(`Cannot convert to screen coordinates: ${typeof o}`); +}