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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable, computed } from 'mobx';
import { observer } from 'mobx-react';
import "normalize.css";
import * as React from 'react';
import { Doc, Opt } from '../../fields/Doc';
import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
import { Transform } from '../util/Transform';
import "./LightboxView.scss";
import { DocumentView } from './nodes/DocumentView';
import { DefaultStyleProvider } from './StyleProvider';
import { DocUtils } from '../documents/Documents';
import { DocumentManager } from '../util/DocumentManager';
interface LightboxViewProps {
PanelWidth: number;
PanelHeight: number;
maxBorder: number[];
}
@observer
export class LightboxView extends React.Component<LightboxViewProps> {
@observable static LightboxDoc: Opt<Doc>;
@action public static SetLightboxDoc(doc: Opt<Doc>, future?: Doc[]) {
LightboxView.LightboxDoc = doc;
if (!doc) {
LightboxView.LightboxFuture = LightboxView.LightboxHistory = [];
} else if (future) {
LightboxView.LightboxFuture = future;
}
return true;
}
public static IsLightboxDocView(path: DocumentView[]) { return path.includes(LightboxView.LightboxDocView.current!); }
public static LightboxHistory: (Opt<Doc>)[] = [];
public static LightboxFuture: (Opt<Doc>)[] = [];
public static LightboxDocView = React.createRef<DocumentView>();
@computed get leftBorder() { return Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]); }
@computed get topBorder() { return Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]); }
lightboxWidth = () => this.props.PanelWidth - this.leftBorder * 2;
lightboxHeight = () => this.props.PanelHeight - this.topBorder * 2;
lightboxScreenToLocal = () => new Transform(-this.leftBorder, -this.topBorder, 1);
navBtn = (left: Opt<number>, icon: string, display: () => string, click: (e: React.MouseEvent) => void) => {
return <div className="lightboxView-navBtn-frame" style={{
display: display(),
left,
width: Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0])
}}>
<div className="lightboxView-navBtn" style={{ top: this.props.PanelHeight / 2 - 12.50 }}
onClick={click}>
<FontAwesomeIcon icon={icon as any} size="3x" />
</div>
</div>;
}
render() {
if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxDoc) LightboxView.LightboxHistory.push(LightboxView.LightboxDoc);
let downx = 0, downy = 0;
return !LightboxView.LightboxDoc ? (null) :
<div className="lightboxView-frame"
onPointerDown={e => { downx = e.clientX; downy = e.clientY; }}
onClick={e => {
if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
LightboxView.SetLightboxDoc(undefined);
}
}} >
<div className="lightboxView-contents" style={{
left: this.leftBorder,
top: this.topBorder,
width: this.lightboxWidth(),
height: this.lightboxHeight()
}}>
<DocumentView ref={LightboxView.LightboxDocView}
Document={LightboxView.LightboxDoc}
DataDoc={undefined}
addDocument={undefined}
addDocTab={returnFalse}
pinToPres={emptyFunction}
rootSelected={returnTrue}
docViewPath={returnEmptyDoclist}
removeDocument={undefined}
styleProvider={DefaultStyleProvider}
layerProvider={returnTrue}
ScreenToLocalTransform={this.lightboxScreenToLocal}
PanelWidth={this.lightboxWidth}
PanelHeight={this.lightboxHeight}
focus={DocUtils.DefaultFocus}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
docFilters={returnEmptyFilter}
docRangeFilters={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
renderDepth={0} />
</div>
{this.navBtn(undefined, "chevron-left",
() => LightboxView.LightboxDoc && LightboxView.LightboxHistory.length ? "" : "none",
e => {
e.stopPropagation();
const previous = LightboxView.LightboxHistory.pop();
const target = LightboxView.LightboxHistory.lastElement();
const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
if (docView && target) {
if (LightboxView.LightboxFuture.lastElement() !== previous) LightboxView.LightboxFuture.push(previous);
docView.focus(target, true, 0.9);
} else {
LightboxView.SetLightboxDoc(target);
}
})}
{this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right",
() => LightboxView.LightboxDoc && LightboxView.LightboxFuture.length ? "" : "none",
e => {
e.stopPropagation();
const target = LightboxView.LightboxFuture.pop();
const docView = target && DocumentManager.Instance.getLightboxDocumentView(target);
if (docView && target) {
docView.focus(target, true, 0.9);
if (LightboxView.LightboxHistory.lastElement() !== target) LightboxView.LightboxHistory.push(target);
} else {
LightboxView.SetLightboxDoc(target);
}
})}
</div>;
}
}
|
