blob: 2683d943936c31ad75e3d0c91d7c82b977cded4c (
plain)
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
|
import { computed, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { ScriptField } from '../../../../fields/ScriptField';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './CollectionFreeFormView.scss';
export interface CollectionFreeFormPannableContentsProps {
Doc: Doc;
viewDefDivClick?: ScriptField;
children?: React.ReactNode | undefined;
transition: () => string;
isAnnotationOverlay: boolean | undefined;
showPresPaths: () => boolean;
transform: () => string;
brushedView: () => { panX: number; panY: number; width: number; height: number } | undefined;
}
@observer
export class CollectionFreeFormPannableContents extends ObservableReactComponent<CollectionFreeFormPannableContentsProps> {
static _overlayPlugin: ((fform: Doc) => React.JSX.Element) | null = null;
/**
* Setup a plugin function that returns components to display on a layer above the collection
* See PresBox which renders presenstation paths over the collection
* @param plugin a function that receives the collection Doc and returns JSX Elements
*/
public static SetOverlayPlugin(plugin: ((fform: Doc) => React.JSX.Element) | null) {
CollectionFreeFormPannableContents._overlayPlugin = plugin;
}
constructor(props: CollectionFreeFormPannableContentsProps) {
super(props);
makeObservable(this);
}
@computed get presPaths() {
return this._props.showPresPaths() ? CollectionFreeFormPannableContents._overlayPlugin?.(this._props.Doc) : null;
}
// rectangle highlight used when following trail/link to a region of a collection that isn't a document
showViewport = (viewport: { panX: number; panY: number; width: number; height: number } | undefined) =>
!viewport ? null : (
<div
className="collectionFreeFormView-brushView"
style={{
transform: `translate(${viewport.panX}px, ${viewport.panY}px)`,
width: viewport.width,
height: viewport.height,
border: `orange solid ${viewport.width * 0.005}px`,
}}
/>
);
render() {
return (
<div
className={'collectionfreeformview' + (this._props.viewDefDivClick ? '-viewDef' : '-none')}
onScroll={e => {
const { target } = e;
if (target instanceof Element && getComputedStyle(target)?.overflow === 'visible') {
target.scrollTop = target.scrollLeft = 0; // if collection is visible, scrolling messes things up since there are no scroll bars
}
}}
style={{
transform: this._props.transform(),
transition: this._props.transition(),
width: this._props.isAnnotationOverlay ? undefined : 0, // if not an overlay, then this will be the size of the collection, but panning and zooming will move it outside the visible border of the collection and make it selectable. This problem shows up after zooming/panning on a background collection -- you can drag the collection by clicking on apparently empty space outside the collection
}}>
{this.props.children}
{this.presPaths}
{this.showViewport(this._props.brushedView())}
</div>
);
}
}
|
