From df3e6a62190e52168876b2e9f5dfeb73dc69e49d Mon Sep 17 00:00:00 2001 From: Laurent Cozic Date: Thu, 7 Jan 2021 21:44:31 +0000 Subject: [PATCH] Desktop: Fixed context menu not being displayed on high DPI screens --- .../gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx | 2 +- .../NoteBody/TinyMCE/utils/useContextMenu.ts | 3 ++- .../gui/utils/convertToScreenCoordinates.ts | 10 +++++----- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index 198c8a4a7..65cb1d909 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -620,7 +620,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 = convertToScreenCoordinates(elements[0].getBoundingClientRect()); + const rect = convertToScreenCoordinates(Setting.value('windowContentZoomFactor'), 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 ec46479d7..4ad661e19 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts @@ -7,6 +7,7 @@ import { menuItems, ContextMenuOptions, ContextMenuItemType } from '../../../uti import MenuUtils from '@joplin/lib/services/commands/MenuUtils'; import CommandService from '@joplin/lib/services/CommandService'; import convertToScreenCoordinates from '../../../../utils/convertToScreenCoordinates'; +import Setting from '@joplin/lib/models/Setting'; const Resource = require('@joplin/lib/models/Resource'); @@ -21,7 +22,7 @@ function contextMenuElement(editor: any, x: number, y: number) { const iframes = document.getElementsByClassName('tox-edit-area__iframe'); if (!iframes.length) return null; - const iframeRect = convertToScreenCoordinates(iframes[0].getBoundingClientRect()); + const iframeRect = convertToScreenCoordinates(Setting.value('windowContentZoomFactor'), 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 index 7a8e67010..5902cf451 100644 --- a/packages/app-desktop/gui/utils/convertToScreenCoordinates.ts +++ b/packages/app-desktop/gui/utils/convertToScreenCoordinates.ts @@ -1,14 +1,14 @@ // Converts world coordinate to screen coordinates by applying the current -// zoom. -export default function convertToScreenCoordinates(o: any): any { - const pixelRatio = window.devicePixelRatio; +// zoom. `windowContentZoomFactor` is the setting value. +export default function convertToScreenCoordinates(windowContentZoomFactor: number, o: any): any { + const percent = windowContentZoomFactor / 100; - if (typeof o === 'number') return o * pixelRatio; + if (typeof o === 'number') return o * percent; if (typeof o === 'object' && o !== null) { o = JSON.parse(JSON.stringify(o)); for (const k of Object.keys(o)) { - o[k] = convertToScreenCoordinates(o[k]); + o[k] = convertToScreenCoordinates(windowContentZoomFactor, o[k]); } return o; }