aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json33
-rw-r--r--package.json1
-rw-r--r--src/documents/Documents.ts5
-rw-r--r--src/views/nodes/DocumentView.tsx3
-rw-r--r--src/views/nodes/ImageBox.scss11
-rw-r--r--src/views/nodes/ImageBox.tsx82
6 files changed, 132 insertions, 3 deletions
diff --git a/package-lock.json b/package-lock.json
index 0d0a2bcac..244ececa9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2099,6 +2099,11 @@
"strip-eof": "1.0.0"
}
},
+ "exenv": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+ "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+ },
"expand-brackets": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -8805,6 +8810,15 @@
"react-dom": "16.7.0"
}
},
+ "react-image-lightbox": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.0.tgz",
+ "integrity": "sha512-R46QvffoDBscLQgTl4s3kFxVbnP7a+nIh7AXJNS0EXVeDaa6zKDKtIT+jFeEvs+F9oUHtZfenG1NHhTkO4hEOA==",
+ "requires": {
+ "prop-types": "15.6.2",
+ "react-modal": "3.8.1"
+ }
+ },
"react-is": {
"version": "16.7.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
@@ -8824,6 +8838,17 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-modal": {
+ "version": "3.8.1",
+ "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.8.1.tgz",
+ "integrity": "sha512-aLKeZM9pgXpIKVwopRHMuvqKWiBajkqisDA8UzocdCF6S4fyKVfLWmZR5G1Q0ODBxxxxf2XIwiCP8G/11GJAuw==",
+ "requires": {
+ "exenv": "1.2.2",
+ "prop-types": "15.6.2",
+ "react-lifecycles-compat": "3.0.4",
+ "warning": "3.0.0"
+ }
+ },
"react-mosaic": {
"version": "0.0.20",
"resolved": "https://registry.npmjs.org/react-mosaic/-/react-mosaic-0.0.20.tgz",
@@ -10462,6 +10487,14 @@
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-1.1.8.tgz",
"integrity": "sha512-2HAdug8GTiu3b4NYhssdtY8PXRue3ICnh1IlxvZYl+hiINRq0GfNWei3XOPDg8L0PsxbmYjWVLuLj6BMRR/9vA=="
},
+ "warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+ "requires": {
+ "loose-envify": "1.4.0"
+ }
+ },
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/package.json b/package.json
index 5307804c9..9b4df3c24 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
"react": "^16.5.2",
"react-dom": "^16.7.0",
"react-golden-layout": "^1.0.6",
+ "react-image-lightbox": "^5.1.0",
"react-jsx-parser": "^1.13.0",
"react-mosaic": "0.0.20",
"react-table": "^6.9.0",
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index 73cf483ef..487490ea5 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -6,6 +6,7 @@ import { ListField } from "../fields/ListField";
import { FieldTextBox } from "../views/nodes/FieldTextBox";
import { CollectionDockingView } from "../views/collections/CollectionDockingView";
import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
+import { ImageBox } from "../views/nodes/ImageBox";
interface DocumentOptions {
x?: number;
@@ -110,9 +111,9 @@ export namespace Documents {
imageProto.SetField(KeyStore.Y, new NumberField(0));
imageProto.SetField(KeyStore.Width, new NumberField(300));
imageProto.SetField(KeyStore.Height, new NumberField(300));
- imageProto.SetField(KeyStore.Layout, new TextField('<img src={Data} draggable="false" width="100%" alt="Image not found"/>'));
+ imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
// imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
- imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data]));
+ imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
}
return imageProto;
}
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 634cd78be..34a95747b 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
import { ContextMenu } from "../ContextMenu";
import { FieldTextBox } from "../nodes/FieldTextBox";
+import { ImageBox } from "../nodes/ImageBox";
import "./NodeView.scss";
import React = require("react");
import { cpus } from "os";
@@ -82,7 +83,7 @@ class DocumentContents extends React.Component<DocumentViewProps> {
}
}
return <JsxParser
- components={{ FieldTextBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+ components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
bindings={bindings}
jsx={this.layout}
showWarnings={true}
diff --git a/src/views/nodes/ImageBox.scss b/src/views/nodes/ImageBox.scss
new file mode 100644
index 000000000..136fda1d0
--- /dev/null
+++ b/src/views/nodes/ImageBox.scss
@@ -0,0 +1,11 @@
+
+.imageBox-cont {
+ padding: 0vw;
+}
+
+.imageBox-button {
+ padding : 0vw;
+ border: none;
+ width : 100%;
+ height: 100%;
+} \ No newline at end of file
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
new file mode 100644
index 000000000..5c0db6cab
--- /dev/null
+++ b/src/views/nodes/ImageBox.tsx
@@ -0,0 +1,82 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { schema } from "prosemirror-schema-basic";
+import { EditorState, Transaction } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { Document } from "../../fields/Document";
+import { Opt } from "../../fields/Field";
+import { Key, KeyStore } from "../../fields/Key";
+import { TextField } from "../../fields/TextField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { DocumentView, DocumentFieldViewProps } from "./DocumentView";
+import "./ImageBox.scss";
+import React = require("react")
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+
+interface ImageBoxState {
+ photoIndex: number,
+ isOpen: boolean,
+};
+
+export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxState> {
+
+ public static LayoutString() { return "<ImageBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; }
+ private _ref: React.RefObject<HTMLDivElement>;
+ private _wasSelected: boolean = false;
+
+ constructor(props: DocumentFieldViewProps) {
+ super(props);
+
+ this._ref = React.createRef();
+ this.state = {
+ photoIndex: 0,
+ isOpen: false,
+ };
+ }
+
+ componentDidMount() {
+ }
+
+ componentWillUnmount() {
+ }
+
+ onPointerDown = (e: React.PointerEvent): void => {
+ const { containingDocumentView } = this.props;
+ this._wasSelected = SelectionManager.IsSelected(containingDocumentView);
+ let me = this;
+ if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) {
+ e.stopPropagation();
+ }
+ }
+
+ render() {
+ const images = [this.props.doc.GetTextField(this.props.fieldKey, ""),];
+ var lightbox = () => {
+ const { photoIndex } = this.state;
+ if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) {
+ return (<Lightbox
+ mainSrc={images[photoIndex]}
+ nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}
+ prevSrc={photoIndex - 1 > 0 ? images[(photoIndex + images.length - 1) % images.length] : undefined}
+ onCloseRequest={() => this.setState({ isOpen: false })}
+ onMovePrevRequest={() =>
+ this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, })
+ }
+ onMoveNextRequest={() =>
+ this.setState({ photoIndex: (photoIndex + 1) % images.length, })
+ }
+ />)
+ }
+ }
+ return (
+ <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+ <button className="imageBox-button" type="button" onClick={() => this.setState({ isOpen: this._wasSelected })}>
+ <img src={images[0]} width="100%" alt="Image not found" />
+ </button>
+ {lightbox()}
+ </div>)
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 09:34:10 +0000