From acf2929efc61f285ed237df215a36793ae4751d0 Mon Sep 17 00:00:00 2001 From: Martynas Bagdonas Date: Tue, 22 Aug 2023 18:31:31 +0300 Subject: [PATCH] Fix page label popup opening from PDF view popup context menu Fixes zotero/zotero#3274 --- src/common/components/common/preview.js | 18 ++---------------- src/common/components/reader-ui.js | 1 - .../components/sidebar/annotations-view.js | 15 +++------------ src/common/components/view/annotation-popup.js | 1 - src/common/context-menu.js | 2 +- src/common/reader.js | 14 +++++--------- 6 files changed, 11 insertions(+), 40 deletions(-) diff --git a/src/common/components/common/preview.js b/src/common/components/common/preview.js index 445cb66f..e3d7e374 100644 --- a/src/common/components/common/preview.js +++ b/src/common/components/common/preview.js @@ -18,14 +18,7 @@ export function PopupPreview(props) { if (props.type !== 'pdf' || props.readOnly) { return; } - let rect = event.currentTarget.querySelector('.label').getBoundingClientRect(); - rect = [ - rect.left, - rect.top, - rect.right, - rect.bottom - ]; - props.onDoubleClickPageLabel(props.annotation.id, rect); + props.onOpenPageLabelPopup(props.annotation.id); } function handleTagsClick(event) { @@ -138,14 +131,7 @@ export function SidebarPreview(props) { if (props.type !== 'pdf' || props.readOnly) { return; } - let rect = event.currentTarget.querySelector('.label').getBoundingClientRect(); - rect = [ - rect.left, - rect.top, - rect.right, - rect.bottom - ]; - props.onDoubleClickPageLabel(props.annotation.id, rect); + props.onOpenPageLabelPopup(props.annotation.id); } function handleSectionClick(event, section) { diff --git a/src/common/components/reader-ui.js b/src/common/components/reader-ui.js index f5cbb6eb..70a9885f 100644 --- a/src/common/components/reader-ui.js +++ b/src/common/components/reader-ui.js @@ -91,7 +91,6 @@ const ReaderUI = React.forwardRef((props, ref) => { setState, sidebarScrollAnnotationIntoView: (id) => annotationsViewRef.current?.scrollAnnotationIntoView(id), sidebarEditAnnotationText: (id) => annotationsViewRef.current?.editAnnotationText(id), - sidebarOpenPageLabelPopup: (id) => annotationsViewRef.current?.openPageLabelPopup(id) })); let findState = state.primary ? state.primaryViewFindState : state.secondaryViewFindState; diff --git a/src/common/components/sidebar/annotations-view.js b/src/common/components/sidebar/annotations-view.js index c9deb565..92b75c1c 100644 --- a/src/common/components/sidebar/annotations-view.js +++ b/src/common/components/sidebar/annotations-view.js @@ -132,7 +132,7 @@ const Annotation = React.memo((props) => { onSetDataTransferAnnotations={props.onSetDataTransferAnnotations} onClickSection={props.onClickAnnotationSection} onDoubleClickText={props.onDoubleClickText} - onDoubleClickPageLabel={props.onDoubleClickPageLabel} + onOpenPageLabelPopup={props.onOpenPageLabelPopup} onOpenContextMenu={props.onOpenContextMenu} onChange={props.onChange} /> @@ -173,18 +173,9 @@ const AnnotationsView = memo(React.forwardRef((props, ref) => { }, 50); } - function openPageLabelPopup(id) { - let node = document.querySelector(`[data-sidebar-annotation-id="${id}"] .page`); - var clickEvent = document.createEvent('MouseEvents'); - clickEvent.initEvent('dblclick', true, true); - node.dispatchEvent(clickEvent); - node.focus(); - } - useImperativeHandle(ref, () => ({ scrollAnnotationIntoView, - editAnnotationText, - openPageLabelPopup + editAnnotationText })); useEffect(() => { @@ -467,7 +458,7 @@ const AnnotationsView = memo(React.forwardRef((props, ref) => { onChange={props.onChange} onClickAnnotationSection={handleSidebarAnnotationSectionClick} onDoubleClickText={handleSidebarAnnotationDoubleClick} - onDoubleClickPageLabel={props.onOpenPageLabelPopup} + onOpenPageLabelPopup={props.onOpenPageLabelPopup} onOpenContextMenu={handleContextMenuOpen} onSetDataTransferAnnotations={props.onSetDataTransferAnnotations} /> diff --git a/src/common/components/view/annotation-popup.js b/src/common/components/view/annotation-popup.js index 8a0c6f6b..b734dfec 100644 --- a/src/common/components/view/annotation-popup.js +++ b/src/common/components/view/annotation-popup.js @@ -28,7 +28,6 @@ function AnnotationPopup(props) { onColorChange={(color) => { props.onChange({ id: popupAnnotation.id, color }); }} - onDoubleClickPageLabel={props.onOpenPageLabelPopup} onOpenTagsPopup={props.onOpenTagsPopup} onChange={props.onChange} onOpenPageLabelPopup={props.onOpenPageLabelPopup} diff --git a/src/common/context-menu.js b/src/common/context-menu.js index 72b62095..e0be3853 100644 --- a/src/common/context-menu.js +++ b/src/common/context-menu.js @@ -162,7 +162,7 @@ export function createAnnotationContextMenu(reader, params) { label: reader._getString('pdfReader.editPageNumber'), disabled: readOnly || reader._type !== 'pdf', persistent: reader._type === 'pdf', - onCommand: () => reader._sidebarOpenPageLabelPopup(params.currentID) + onCommand: () => reader._handleOpenPageLabelPopup(params.currentID) }, !params.view && { label: reader._getString('pdfReader.editAnnotationText'), diff --git a/src/common/reader.js b/src/common/reader.js index 7cbc71bf..5f714268 100644 --- a/src/common/reader.js +++ b/src/common/reader.js @@ -265,10 +265,6 @@ class Reader { onToggleFindPopup={this.toggleFindPopup.bind(this)} onSetPortal={this._setPortal.bind(this)} - - onDoubleClickPageLabel={options.onDoubleClickPageLabel} - onFocusSplitButton={options.onFocusSplitButton} - onFocusContextPane={options.onFocusContextPane} ref={this._readerRef} /> @@ -601,10 +597,6 @@ class Reader { this._readerRef.current.sidebarEditAnnotationText(id); } - _sidebarOpenPageLabelPopup(id) { - this._readerRef.current.sidebarOpenPageLabelPopup(id); - } - _getString(name) { return this._localizedStrings[name] || name; } @@ -1288,13 +1280,17 @@ class Reader { this._onSetDataTransferAnnotations(dataTransfer, annotations, fromText); } - _handleOpenPageLabelPopup(id, rect) { + _handleOpenPageLabelPopup(id) { this._ensureType('pdf'); let pageLabels = this._state.pageLabels; let selectedIDs = this._state.selectedAnnotationIDs; let currentAnnotation = this._annotationManager._getAnnotationByID(id); let selectedAnnotations = this._annotationManager._annotations.filter(x => selectedIDs.includes(x.id)); let allAnnotations = this._annotationManager._annotations; + // Get target rect from preview component in the sidebar or a view popup + let labelNode = document.querySelector(`[data-sidebar-annotation-id="${id}"] header .label, .view-popup header .label`); + let { left, top, right, bottom } = labelNode.getBoundingClientRect(); + let rect = [left, top, right, bottom]; this._updateState({ labelOverlay: { currentAnnotation, selectedAnnotations, allAnnotations, rect, selectedIDs, pageLabels } }); }