aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionView.tsx27
-rw-r--r--src/client/views/nodes/ImageBox.tsx31
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx1
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx1
-rw-r--r--src/client/views/nodes/PDFBox.tsx1
5 files changed, 28 insertions, 33 deletions
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 3d5b4e562..f8011b1f8 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -5,7 +5,7 @@ import { action, IReactionDisposer, observable, reaction, runInAction } from 'mo
import { observer } from "mobx-react";
import * as React from 'react';
import { Id } from '../../../new_fields/FieldSymbols';
-import { StrCast } from '../../../new_fields/Types';
+import { StrCast, Cast } from '../../../new_fields/Types';
import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils';
import { ContextMenu } from "../ContextMenu";
import { ContextMenuProps } from '../ContextMenuItem';
@@ -20,6 +20,11 @@ import { CollectionTreeView } from "./CollectionTreeView";
import { CollectionViewBaseChrome } from './CollectionViewChromes';
import { ImageUtils } from '../../util/Import & Export/ImageUtils';
import { CollectionLinearView } from '../CollectionLinearView';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { ImageField } from '../../../new_fields/URLField';
+import { DocListCast } from '../../../new_fields/Doc';
+import Lightbox from 'react-image-lightbox-with-rotate';
+import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be imported once in your app
export const COLLECTION_BORDER_WIDTH = 2;
library.add(faTh, faTree, faSquare, faProjectDiagram, faSignature, faThList, faFingerprint, faColumns, faEllipsisV, faImage, faEye as any, faCopy);
@@ -120,6 +125,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
break;
}
}
+ subItems.push({ description: "lightbox", event: action(() => this._isOpen = true), icon: "eye" });
!existingVm && ContextMenu.Instance.addItem({ description: "View Modes...", subitems: subItems, icon: "eye" });
let existing = ContextMenu.Instance.findByDescription("Layout...");
@@ -130,11 +136,26 @@ export class CollectionView extends React.Component<FieldViewProps> {
}
}
+ @observable _isOpen = false;
+ @observable _curPage = 0;
+ lightbox = (images: string[]) => {
+ return !this._isOpen ? (null) : (<Lightbox key="lightbox"
+ mainSrc={images[this._curPage]}
+ nextSrc={images[(this._curPage + 1) % images.length]}
+ prevSrc={images[(this._curPage + images.length - 1) % images.length]}
+ onCloseRequest={action(() => this._isOpen = false)}
+ onMovePrevRequest={action(() => this._curPage = (this._curPage + images.length - 1) % images.length)}
+ onMoveNextRequest={action(() => this._curPage = (this._curPage + 1) % images.length)} />);
+ }
+
render() {
- return (
- <CollectionBaseView {...this.props} onContextMenu={this.onContextMenu}>
+ return (<>
+ <CollectionBaseView key="baseView" {...this.props} onContextMenu={this.onContextMenu}>
{this.SubView}
</CollectionBaseView>
+
+ {this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d => Cast(d.data, ImageField)!.url!.href))}
+ </>
);
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index fbf05d148..a6d6a16a0 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -4,8 +4,6 @@ import { faAsterisk, faFileAudio, faImage, faPaintBrush } from '@fortawesome/fre
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, computed, observable, runInAction, trace } from 'mobx';
import { observer } from "mobx-react";
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { Doc, DocListCast, HeightSym, WidthSym } from '../../../new_fields/Doc';
import { List } from '../../../new_fields/List';
import { createSchema, listSpec, makeInterface } from '../../../new_fields/Schema';
@@ -84,27 +82,6 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
}
}
-
- @action
- lightbox = (images: string[]) => {
- if (this._isOpen) {
- return (<Lightbox
- mainSrc={images[this.Document.curPage || 0]}
- nextSrc={images[((this.Document.curPage || 0) + 1) % images.length]}
- prevSrc={images[((this.Document.curPage || 0) + images.length - 1) % images.length]}
- onCloseRequest={action(() =>
- this._isOpen = false
- )}
- onMovePrevRequest={action(() =>
- this.Document.curPage = ((this.Document.curPage || 0) + images.length - 1) % images.length
- )}
- onMoveNextRequest={action(() =>
- this.Document.curPage = ((this.Document.curPage || 0) + 1) % images.length
- )}
- />);
- }
- }
-
recordAudioAnnotation = () => {
let gumStream: any;
let recorder: any;
@@ -294,13 +271,13 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
// let [bptX, bptY] = transform.transformPoint(pw, this.props.PanelHeight());
// let w = bptX - sptX;
- let nativeWidth = NumCast(this.Document.nativeWidth, pw);
- let nativeHeight = NumCast(this.Document.nativeHeight, 0);
- let paths: string[] = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
+ let nativeWidth = (this.Document.nativeWidth || pw);
+ let nativeHeight = (this.Document.nativeHeight || 0);
+ let paths = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")];
// this._curSuffix = "";
// if (w > 20) {
let alts = DocListCast(this.extensionDoc.Alternates);
- let altpaths: string[] = alts.filter(doc => doc.data instanceof ImageField).map(doc => this.choosePath((doc.data as ImageField).url));
+ let altpaths = alts.filter(doc => doc.data instanceof ImageField).map(doc => this.choosePath((doc.data as ImageField).url));
let field = this.dataDoc[this.props.fieldKey];
// if (w < 100 && this._smallRetryCount < 10) this._curSuffix = "_s";
// else if (w < 600 && this._mediumRetryCount < 10) this._curSuffix = "_m";
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index 41d43b8b8..2b46e9dff 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,7 +1,6 @@
import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { Doc, Field, FieldResult } from "../../../new_fields/Doc";
import { List } from "../../../new_fields/List";
import { RichTextField } from "../../../new_fields/RichTextField";
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 4e1390200..67d33845d 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,6 +1,5 @@
import { action, observable } from 'mobx';
import { observer } from "mobx-react";
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { Doc, Field, Opt } from '../../../new_fields/Doc';
import { emptyFunction, returnFalse, returnOne, returnZero } from '../../../Utils';
import { Docs } from '../../documents/Documents';
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 4513117b2..5795d6f12 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -3,7 +3,6 @@ import { action, observable, runInAction, reaction, IReactionDisposer } from 'mo
import { observer } from "mobx-react";
import * as Pdfjs from "pdfjs-dist";
import "pdfjs-dist/web/pdf_viewer.css";
-import 'react-image-lightbox/style.css';
import { Opt, WidthSym, Doc } from "../../../new_fields/Doc";
import { makeInterface } from "../../../new_fields/Schema";
import { ScriptField } from '../../../new_fields/ScriptField';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:20:33 +0000