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
|
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';
interface LightboxViewProps {
PanelWidth: number;
PanelHeight: number;
maxBorder: number[];
}
@observer
export class LightboxView extends React.Component<LightboxViewProps> {
@observable public static LightboxDoc: Opt<Doc>;
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={action(e => {
if (Math.abs(downx - e.clientX) < 4 && Math.abs(downy - e.clientY) < 4) {
LightboxView.LightboxHistory = [];
LightboxView.LightboxFuture = [];
LightboxView.LightboxDoc = 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={emptyFunction}
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",
action(e => {
e.stopPropagation();
const popped = LightboxView.LightboxHistory.pop();
if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxFuture.lastElement()) LightboxView.LightboxFuture.push(popped);
LightboxView.LightboxDoc = LightboxView.LightboxHistory.lastElement();
}))}
{this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right",
() => LightboxView.LightboxDoc && LightboxView.LightboxFuture.length ? "" : "none",
action(e => {
e.stopPropagation();
LightboxView.LightboxDoc = LightboxView.LightboxFuture.pop();
}))}
</div>;
}
}
|
