diff options
Diffstat (limited to 'src/client/views/linking/LinkMenuItem.tsx')
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 48 |
1 files changed, 30 insertions, 18 deletions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index a2c9d10b6..303ff4b98 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,16 +1,20 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; +import { returnFalse, setupMoveUpEvents } from '../../../ClientUtils'; +import { emptyFunction } from '../../../Utils'; import { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; import { DocumentType } from '../../documents/DocumentTypes'; import { DocumentManager } from '../../util/DocumentManager'; -import { DragManager, dropActionType } from '../../util/DragManager'; +import { DragManager } from '../../util/DragManager'; +import { dropActionType } from '../../util/DropActionTypes'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; @@ -34,14 +38,14 @@ interface LinkMenuItemProps { // drag links and drop link targets (embedding them if needed) export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: DocumentView, downX: number, downY: number, sourceDoc: Doc, specificLinks?: Doc[]) { - const draggedDocs = (specificLinks ? specificLinks : LinkManager.Links(sourceDoc)).map(link => LinkManager.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[]; + const draggedDocs = (specificLinks || LinkManager.Links(sourceDoc)).map(link => LinkManager.getOppositeAnchor(link, sourceDoc)).filter(l => l) as Doc[]; if (draggedDocs.length) { const moddrag: Doc[] = []; - for (const draggedDoc of draggedDocs) { + draggedDocs.forEach(async draggedDoc => { const doc = await Cast(draggedDoc.annotationOn, Doc); if (doc) moddrag.push(doc); - } + }); const dragData = new DragManager.DocumentDragData(moddrag.length ? moddrag : draggedDocs); dragData.canEmbed = true; @@ -88,10 +92,10 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { setupMoveUpEvents( this, e, - e => { + moveEv => { const dragData = new DragManager.DocumentDragData([this._props.linkDoc], dropActionType.embed); dragData.dropPropertiesToRemove = ['hidden']; - DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y); + DragManager.StartDocumentDrag([this._editRef.current!], dragData, moveEv.x, moveEv.y); return true; }, emptyFunction, @@ -106,7 +110,11 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { LinkManager.Instance.currentLinkAnchor = LinkManager.Instance.currentLink ? this.sourceAnchor : undefined; if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { - setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250))); + setTimeout( + action(() => { + SettingsManager.Instance.propertiesWidth = 250; + }) + ); } } }) @@ -117,10 +125,10 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { setupMoveUpEvents( this, e, - e => { + moveEv => { const eleClone: any = this._drag.current!.cloneNode(true); - eleClone.style.transform = `translate(${e.x}px, ${e.y}px)`; - StartLinkTargetsDrag(eleClone, this._props.docView, e.x, e.y, this._props.sourceDoc, [this._props.linkDoc]); + eleClone.style.transform = `translate(${moveEv.x}px, ${moveEv.y}px)`; + StartLinkTargetsDrag(eleClone, this._props.docView, moveEv.x, moveEv.y, this._props.sourceDoc, [this._props.linkDoc]); this._props.clearLinkEditor?.(); return true; }, @@ -164,8 +172,12 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { return ( <div className="linkMenu-item" - onPointerEnter={action(e => (this._hover = true))} - onPointerLeave={action(e => (this._hover = false))} + onPointerEnter={action(() => { + this._hover = true; + })} + onPointerLeave={action(() => { + this._hover = false; + })} style={{ fontSize: this._hover ? 'larger' : undefined, fontWeight: this._hover ? 'bold' : undefined, @@ -174,15 +186,15 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { <div className="linkMenu-item-content expand-two"> <div ref={this._drag} - className="linkMenu-name" //title="drag to view target. click to customize." + className="linkMenu-name" // title="drag to view target. click to customize." onPointerDown={this.onLinkButtonDown}> <div className="linkMenu-item-buttons"> - <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Edit Link</div>}> + <Tooltip disableInteractive title={<div className="dash-tooltip">Edit Link</div>}> <div className="linkMenu-icon-wrapper" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}> <FontAwesomeIcon className="linkMenu-icon" icon="edit" size="sm" /> </div> </Tooltip> - <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Show/Hide Link</div>}> + <Tooltip disableInteractive title={<div className="dash-tooltip">Show/Hide Link</div>}> <div className="linkMenu-icon-wrapper" onPointerDown={this.onIconDown}> <FontAwesomeIcon className="linkMenu-icon" icon={destinationIcon} size="sm" /> </div> @@ -211,7 +223,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { </p> ) : null} <div className="linkMenu-title-wrapper"> - <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Follow Link</div>}> + <Tooltip disableInteractive title={<div className="dash-tooltip">Follow Link</div>}> <p className="linkMenu-destination-title"> {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} </p> @@ -221,7 +233,7 @@ export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { </div> <div className="linkMenu-item-buttons"> - <Tooltip disableInteractive={true} title={<div className="dash-tooltip">Delete Link</div>}> + <Tooltip disableInteractive title={<div className="dash-tooltip">Delete Link</div>}> <div className="linkMenu-deleteButton" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}> <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /> </div> |