1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import { action, computed, observable, runInAction } from 'mobx';
import { observer } from "mobx-react";
import wiki from "wikijs";
import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
import { Cast, FieldValue, NumCast } from "../../../fields/Types";
import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero } from "../../../Utils";
import { Docs } from "../../documents/Documents";
import { DocumentManager } from "../../util/DocumentManager";
import { Transform } from "../../util/Transform";
import { ContentFittingDocumentView } from "./ContentFittingDocumentView";
import React = require("react");
import { DocumentView } from './DocumentView';
interface Props {
linkDoc?: Doc;
linkSrc?: Doc;
href?: string;
backgroundColor: (doc: Doc) => string;
addDocTab: (document: Doc, where: string) => boolean;
location: number[];
}
@observer
export class LinkDocPreview extends React.Component<Props> {
@observable public static LinkInfo: Opt<{ linkDoc?: Doc; addDocTab: (document: Doc, where: string) => boolean, linkSrc: Doc; href?: string; Location: number[] }>;
@observable _targetDoc: Opt<Doc>;
@observable _toolTipText = "";
componentDidUpdate() { this.updatePreview(); }
componentDidMount() { this.updatePreview(); }
async updatePreview() {
const linkDoc = this.props.linkDoc;
const linkSrc = this.props.linkSrc;
if (this.props.href) {
if (this.props.href.startsWith("https://en.wikipedia.org/wiki/")) {
wiki().page(this.props.href.replace("https://en.wikipedia.org/wiki/", "")).then(page => page.summary().then(action(summary => this._toolTipText = summary.substring(0, 500))));
} else {
runInAction(() => this._toolTipText = "external => " + this.props.href);
}
} else if (linkDoc && linkSrc) {
const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(linkDoc.anchor1, Doc)), linkSrc) ? Cast(linkDoc.anchor2, Doc) : (Cast(linkDoc.anchor1, Doc)) || linkDoc);
const target = anchor?.annotationOn ? await DocCastAsync(anchor.annotationOn) : anchor;
runInAction(() => {
this._toolTipText = "";
this._targetDoc = target;
if (anchor !== this._targetDoc && anchor && this._targetDoc) {
this._targetDoc._scrollY = NumCast(anchor?.y);
}
});
}
}
pointerDown = (e: React.PointerEvent) => {
if (this.props.linkDoc && this.props.linkSrc) {
DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.linkSrc,
(doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
} else if (this.props.href) {
this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { title: this.props.href, _width: 200, _height: 400, UseCors: true }), "onRight");
}
}
width = () => Math.min(350, NumCast(this._targetDoc?.[WidthSym](), 350));
height = () => Math.min(350, NumCast(this._targetDoc?.[HeightSym](), 350));
@computed get targetDocView() {
return !this._targetDoc ?
<div style={{ pointerEvents: "all", maxWidth: 350, maxHeight: 250, width: "100%", height: "100%", overflow: "hidden" }}>
<div style={{ width: "100%", height: "100%", textOverflow: "ellipsis", }} onPointerDown={this.pointerDown}>
{this._toolTipText}
</div>
</div> :
<ContentFittingDocumentView
Document={this._targetDoc}
LibraryPath={emptyPath}
fitToBox={true}
backgroundColor={this.props.backgroundColor}
moveDocument={returnFalse}
rootSelected={returnFalse}
ScreenToLocalTransform={Transform.Identity}
parentActive={returnFalse}
addDocument={returnFalse}
removeDocument={returnFalse}
addDocTab={returnFalse}
pinToPres={returnFalse}
dontRegisterView={true}
docFilters={returnEmptyFilter}
ContainingCollectionDoc={undefined}
ContainingCollectionView={undefined}
renderDepth={0}
PanelWidth={this.width}
PanelHeight={this.height}
focus={emptyFunction}
whenActiveChanged={returnFalse}
bringToFront={returnFalse}
ContentScaling={returnOne}
NativeWidth={returnZero}
NativeHeight={returnZero}
/>;
}
render() {
return <div className="linkDocPreview"
style={{
position: "absolute", left: this.props.location[0],
top: this.props.location[1], width: this.width(), height: this.height(),
boxShadow: "black 2px 2px 1em"
}}>
{this.targetDocView}
</div>;
}
}
|
