diff options
Diffstat (limited to 'src/client/views/linking/LinkMenuItem.tsx')
| -rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 108 |
1 files changed, 56 insertions, 52 deletions
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index bf2a4e1a9..06073b52c 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,23 +1,24 @@ -import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, observable } from 'mobx'; +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 { Doc } from '../../../fields/Doc'; import { Cast, DocCast, StrCast } from '../../../fields/Types'; import { WebField } from '../../../fields/URLField'; -import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils'; -import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager } from '../../util/DragManager'; import { LinkFollower } from '../../util/LinkFollower'; import { LinkManager } from '../../util/LinkManager'; import { SelectionManager } from '../../util/SelectionManager'; import { SettingsManager } from '../../util/SettingsManager'; -import { undoBatch } from '../../util/UndoManager'; +import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewInternal, OpenWhere } from '../nodes/DocumentView'; -import { LinkDocPreview } from '../nodes/LinkDocPreview'; +import { LinkInfo } from '../nodes/LinkDocPreview'; import './LinkMenuItem.scss'; -import React = require('react'); +import { undoBatch } from '../../util/UndoManager'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { DocumentType } from '../../documents/DocumentTypes'; interface LinkMenuItemProps { groupType: string; @@ -50,10 +51,13 @@ export async function StartLinkTargetsDrag(dragEle: HTMLElement, docView: Docume } @observer -export class LinkMenuItem extends React.Component<LinkMenuItemProps> { +export class LinkMenuItem extends ObservableReactComponent<LinkMenuItemProps> { private _drag = React.createRef<HTMLDivElement>(); - _editRef = React.createRef<HTMLDivElement>(); + constructor(props: any) { + super(props); + makeObservable(this); + } @observable private _showMore: boolean = false; @action toggleShowMore(e: React.PointerEvent) { @@ -62,12 +66,12 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { } @computed get sourceAnchor() { - const ldoc = this.props.linkDoc; - if (this.props.sourceDoc !== ldoc.link_anchor_1 && this.props.sourceDoc !== ldoc.link_anchor_2) { - if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_1); - if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this.props.sourceDoc)) return DocCast(ldoc.link_anchor_2); + const ldoc = this._props.linkDoc; + if (this._props.sourceDoc !== ldoc.link_anchor_1 && this._props.sourceDoc !== ldoc.link_anchor_2) { + if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_1).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_1); + if (Doc.AreProtosEqual(DocCast(DocCast(ldoc.link_anchor_2).annotationOn), this._props.sourceDoc)) return DocCast(ldoc.link_anchor_2); } - return this.props.sourceDoc; + return this._props.sourceDoc; } onEdit = (e: React.PointerEvent) => { @@ -75,24 +79,24 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { this, e, e => { - const dragData = new DragManager.DocumentDragData([this.props.linkDoc], 'embed'); + const dragData = new DragManager.DocumentDragData([this._props.linkDoc], 'embed'); dragData.dropPropertiesToRemove = ['hidden']; DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y); return true; }, emptyFunction, action(() => { - const trail = DocCast(this.props.docView.rootDoc.presentationTrail); + const trail = DocCast(this._props.docView.Document.presentationTrail); if (trail) { Doc.ActivePresentation = trail; DocumentViewInternal.addDocTabFunc(trail, OpenWhere.replaceRight); } else { - SelectionManager.SelectView(this.props.docView, false); - LinkManager.currentLink = this.props.linkDoc === LinkManager.currentLink ? undefined : this.props.linkDoc; + SelectionManager.SelectView(this._props.docView, false); + LinkManager.currentLink = this._props.linkDoc === LinkManager.currentLink ? undefined : this._props.linkDoc; LinkManager.currentLinkAnchor = LinkManager.currentLink ? this.sourceAnchor : undefined; - if ((SettingsManager.propertiesWidth ?? 0) < 100) { - setTimeout(action(() => (SettingsManager.propertiesWidth = 250))); + if ((SettingsManager.Instance.propertiesWidth ?? 0) < 100) { + setTimeout(action(() => (SettingsManager.Instance.propertiesWidth = 250))); } } }) @@ -106,43 +110,43 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { e => { 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]); - this.props.clearLinkEditor?.(); + StartLinkTargetsDrag(eleClone, this._props.docView, e.x, e.y, this._props.sourceDoc, [this._props.linkDoc]); + this._props.clearLinkEditor?.(); return true; }, emptyFunction, () => { - this.props.clearLinkEditor?.(); - if (this.props.itemHandler) { - this.props.itemHandler?.(this.props.linkDoc); + this._props.clearLinkEditor?.(); + if (this._props.itemHandler) { + this._props.itemHandler?.(this._props.linkDoc); } else { const focusDoc = - Cast(this.props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this.props.sourceDoc - ? Cast(this.props.linkDoc.link_anchor_1, Doc, null) - : Cast(this.props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this.props.sourceDoc - ? Cast(this.props.linkDoc.link_anchor_12, Doc, null) - : undefined; - - if (focusDoc) this.props.docView.props.focus(focusDoc, { instant: true }); - LinkFollower.FollowLink(this.props.linkDoc, this.props.sourceDoc, false); + Cast(this._props.linkDoc.link_anchor_1, Doc, null)?.annotationOn === this._props.sourceDoc + ? Cast(this._props.linkDoc.link_anchor_1, Doc, null) + : Cast(this._props.linkDoc.link_anchor_2, Doc, null)?.annotationOn === this._props.sourceDoc + ? Cast(this._props.linkDoc.link_anchor_12, Doc, null) + : undefined; + + if (focusDoc) this._props.docView._props.focus(focusDoc, { instant: true }); + LinkFollower.FollowLink(this._props.linkDoc, this._props.sourceDoc, false); } } ); }; - deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc)))); + deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this._props.linkDoc)))); @observable _hover = false; render() { - const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp; + const destinationIcon = Doc.toIcon(this._props.destinationDoc) as any as IconProp; - const title = StrCast(this.props.destinationDoc.title).length > 18 ? StrCast(this.props.destinationDoc.title).substr(0, 14) + '...' : this.props.destinationDoc.title; + const title = StrCast(this._props.destinationDoc.title).length > 18 ? StrCast(this._props.destinationDoc.title).substr(0, 14) + '...' : this._props.destinationDoc.title; const source = - this.props.sourceDoc.type === DocumentType.RTF - ? this.props.linkDoc.storedText - ? StrCast(this.props.linkDoc.storedText).length > 17 - ? StrCast(this.props.linkDoc.storedText).substr(0, 18) - : this.props.linkDoc.storedText + this._props.sourceDoc.type === DocumentType.RTF + ? this._props.linkDoc.storedText + ? StrCast(this._props.linkDoc.storedText).length > 17 + ? StrCast(this._props.linkDoc.storedText).substr(0, 18) + : this._props.linkDoc.storedText : undefined : undefined; @@ -154,7 +158,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { style={{ fontSize: this._hover ? 'larger' : undefined, fontWeight: this._hover ? 'bold' : undefined, - background: LinkManager.currentLink === this.props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + background: LinkManager.currentLink === this._props.linkDoc ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, }}> <div className="linkMenu-item-content expand-two"> <div @@ -170,14 +174,14 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { </div> <div className="linkMenu-text" - onPointerLeave={LinkDocPreview.Clear} + onPointerLeave={LinkInfo.Clear} onPointerEnter={e => - this.props.linkDoc && - this.props.clearLinkEditor && - LinkDocPreview.SetLinkInfo({ - docProps: this.props.docView.props, - linkSrc: this.props.sourceDoc, - linkDoc: this.props.linkDoc, + this._props.linkDoc && + this._props.clearLinkEditor && + LinkInfo.SetLinkInfo({ + docProps: this._props.docView._props, + linkSrc: this._props.sourceDoc, + linkDoc: this._props.linkDoc, showHeader: false, location: [(this._drag.current?.getBoundingClientRect().left ?? 100) + 40, (this._drag.current?.getBoundingClientRect().top ?? e.clientY) + 25], noPreview: false, @@ -194,10 +198,10 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { <FontAwesomeIcon className="destination-icon" icon={destinationIcon} size="sm" /> </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)} + {this._props.linkDoc.linksToAnnotation && Cast(this._props.destinationDoc.data, WebField)?.url.href === this._props.linkDoc.annotationUri ? 'Annotation in' : ''} {StrCast(title)} </p> </div> - {!this.props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this.props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>} + {!this._props.linkDoc.link_description ? null : <p className="linkMenu-description">{StrCast(this._props.linkDoc.link_description).split('\n')[0].substring(0, 50)}</p>} </div> <div className="linkMenu-item-buttons"> |