aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/LinkDocPreview.tsx
diff options
context:
space:
mode:
authorbrynnchernosky <56202540+brynnchernosky@users.noreply.github.com>2023-01-19 14:33:22 -0500
committerbrynnchernosky <56202540+brynnchernosky@users.noreply.github.com>2023-01-19 14:33:22 -0500
commit0ef7050b0792ce183c7d5cda637cb79b7a92b704 (patch)
treed1dca8f09ddc2954c2ce88439172aeded672c0b6 /src/client/views/nodes/LinkDocPreview.tsx
parentceb338752aacc383c97a0e3a9b608365a1cf39b6 (diff)
parentd5f796b433d7e72130d4109a3775347ccb10c454 (diff)
Merge branch 'master' of github.com:brown-dash/Dash-Web into master
Diffstat (limited to 'src/client/views/nodes/LinkDocPreview.tsx')
-rw-r--r--src/client/views/nodes/LinkDocPreview.tsx54
1 files changed, 32 insertions, 22 deletions
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 27e79a83b..232c3459e 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -12,12 +12,11 @@ import { DocumentType } from '../../documents/DocumentTypes';
import { DragManager } from '../../util/DragManager';
import { LinkFollower } from '../../util/LinkFollower';
import { LinkManager } from '../../util/LinkManager';
+import { SettingsManager } from '../../util/SettingsManager';
import { Transform } from '../../util/Transform';
-import { undoBatch } from '../../util/UndoManager';
-import { DocumentView, DocumentViewSharedProps } from './DocumentView';
+import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView';
import './LinkDocPreview.scss';
import React = require('react');
-import { LinkEditor } from '../linking/LinkEditor';
interface LinkDocPreviewProps {
linkDoc?: Doc;
@@ -26,6 +25,7 @@ interface LinkDocPreviewProps {
location: number[];
hrefs?: string[];
showHeader?: boolean;
+ noPreview?: boolean;
}
@observer
export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
@@ -40,6 +40,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
_linkDocRef = React.createRef<HTMLDivElement>();
@observable public static LinkInfo: Opt<LinkDocPreviewProps>;
@observable _targetDoc: Opt<Doc>;
+ @observable _markerTargetDoc: Opt<Doc>;
@observable _linkDoc: Opt<Doc>;
@observable _linkSrc: Opt<Doc>;
@observable _toolTipText = '';
@@ -56,9 +57,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
}
if (linkTarget?.annotationOn && linkTarget?.type !== DocumentType.RTF) {
// want to show annotation context document if annotation is not text
- linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => (this._targetDoc = anno)));
+ linkTarget && DocCastAsync(linkTarget.annotationOn).then(action(anno => (this._markerTargetDoc = this._targetDoc = anno)));
} else {
- this._targetDoc = linkTarget;
+ this._markerTargetDoc = this._targetDoc = linkTarget;
}
this._toolTipText = '';
}
@@ -104,13 +105,15 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
// automatic links specify the target in the link info, not the source
const linkTarget = anchor;
this._linkSrc = LinkManager.getOppositeAnchor(this._linkDoc, linkTarget);
- this._targetDoc = linkTarget;
+ this._markerTargetDoc = this._targetDoc = linkTarget;
} else {
this._linkSrc = anchor;
const linkTarget = LinkManager.getOppositeAnchor(this._linkDoc, this._linkSrc);
+ this._markerTargetDoc = linkTarget;
this._targetDoc = /*linkTarget?.type === DocumentType.MARKER &&*/ linkTarget?.annotationOn ? Cast(linkTarget.annotationOn, Doc, null) ?? linkTarget : linkTarget;
}
this._toolTipText = '';
+ if (LinkDocPreview.LinkInfo?.noPreview || this._markerTargetDoc?.type === DocumentType.PRES) this.followLink();
}
})
);
@@ -119,15 +122,22 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
}
return undefined;
}
- @observable _showEditor = false;
+
+ @action
editLink = (e: React.PointerEvent): void => {
- LinkManager.currentLink = this.props.linkDoc;
setupMoveUpEvents(
this,
e,
returnFalse,
emptyFunction,
- action(() => (this._showEditor = !this._showEditor))
+ action(() => {
+ LinkManager.currentLink = this._linkDoc;
+ LinkManager.currentLinkAnchor = this._linkSrc;
+ this.props.docProps.DocumentView?.().select(false);
+ if ((SettingsManager.propertiesWidth ?? 0) < 100) {
+ SettingsManager.propertiesWidth = 250;
+ }
+ })
);
};
nextHref = (e: React.PointerEvent) => {
@@ -152,7 +162,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
LinkDocPreview.Clear();
LinkFollower.FollowLink(this._linkDoc, this._linkSrc, this.props.docProps, false);
} else if (this.props.hrefs?.length) {
- this.props.docProps?.addDocTab(Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, useCors: true }), 'add:right');
+ this.props.docProps?.addDocTab(Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, useCors: true }), OpenWhere.addRight);
}
};
@@ -173,24 +183,25 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
return Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
};
@computed get previewHeader() {
- return !this._linkDoc || !this._targetDoc || !this._linkSrc ? null : (
+ return !this._linkDoc || !this._markerTargetDoc || !this._targetDoc || !this._linkSrc ? null : (
<div className="linkDocPreview-info">
+ <div className="linkDocPreview-buttonBar" style={{ float: 'left' }}>
+ <Tooltip title={<div className="dash-tooltip">Edit Link</div>} placement="top">
+ <div className="linkDocPreview-button" onPointerDown={this.editLink}>
+ <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="edit" color="white" size="sm" />
+ </div>
+ </Tooltip>
+ </div>
<div className="linkDocPreview-title" style={{ pointerEvents: 'all' }}>
- {StrCast(this._targetDoc.title).length > 16 ? StrCast(this._targetDoc.title).substr(0, 16) + '...' : StrCast(this._targetDoc.title)}
+ {StrCast(this._markerTargetDoc.title).length > 16 ? StrCast(this._markerTargetDoc.title).substr(0, 16) + '...' : StrCast(this._markerTargetDoc.title)}
<p className="linkDocPreview-description"> {StrCast(this._linkDoc.description)}</p>
</div>
- <div className="linkDocPreview-buttonBar">
+ <div className="linkDocPreview-buttonBar" style={{ float: 'right' }}>
<Tooltip title={<div className="dash-tooltip">Next Link</div>} placement="top">
<div className="linkDocPreview-button" style={{ background: (this.props.hrefs?.length || 0) <= 1 ? 'gray' : 'green' }} onPointerDown={this.nextHref}>
<FontAwesomeIcon className="linkDocPreview-fa-icon" icon="chevron-right" color="white" size="sm" />
</div>
</Tooltip>
-
- <Tooltip title={<div className="dash-tooltip">Edit Link</div>} placement="top">
- <div className="linkDocPreview-button" onPointerDown={this.editLink}>
- <FontAwesomeIcon className="linkDocPreview-fa-icon" icon="edit" color="white" size="sm" />
- </div>
- </Tooltip>
</div>
</div>
);
@@ -274,9 +285,8 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
className="linkDocPreview"
ref={this._linkDocRef}
onPointerDown={this.followLinkPointerDown}
- style={{ left: this.props.location[0], top: this.props.location[1], width: this._showEditor ? 'auto' : this.width() + borders, height: this._showEditor ? 'max-content' : this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
- {this._showEditor ? null : this.docPreview}
- {!this._showEditor || !this._linkSrc || !this._linkDoc ? null : <LinkEditor sourceDoc={this._linkSrc} linkDoc={this._linkDoc} showLinks={action(() => (this._showEditor = !this._showEditor))} />}
+ style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
+ {this.docPreview}
</div>
);
}