Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web

4 files changed, 123 insertions, 6 deletions

diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index cbf09abae..f54493902 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");
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
@@ -80,7 +81,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}
@@ -151,6 +152,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
     }
 
+    @computed
+    get zIndex(): number {
+        return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
+    }
+
+    set zIndex(h: number) {
+        this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
+    }
+
     @action
     dragComplete = (e: DragManager.DragCompleteEvent) => {
     }
@@ -160,6 +170,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
     }
 
+    @computed
+    get topMost(): boolean {
+        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+    }
+
 
     // 
     // returns the cumulative scaling between the document and the screen
@@ -269,7 +284,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
             this._contextMenuCanOpen = false;
-            if (this._mainCont.current != null && this.props.ContainingCollectionView != null) {
+            if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
                 const rect = this.screenRect;
                 let dragData: { [id: string]: any } = {};
@@ -328,9 +343,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             return;
         }
 
-        var topMost = this.props.ContainingCollectionView == undefined ||
-            this.props.ContainingCollectionView instanceof CollectionDockingView;
-        if (topMost) {
+        if (this.topMost) {
             ContextMenu.Instance.clearItems()
             ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
@@ -356,6 +369,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
                 position: freestyling ? "absolute" : "relative",
+                zIndex: freestyling ? this.zIndex : 0,
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 54e78e3ec..eec63256d 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -8,6 +8,7 @@ import { NumberField } from "../../fields/NumberField";
 import { RichTextField } from "../../fields/RichTextField";
 import { FieldTextBox } from "./FieldTextBox";
 import { ImageField } from "../../fields/ImageField";
+import { ImageBox } from "./ImageBox";
 
 @observer
 export class FieldView extends React.Component<DocumentFieldViewProps> {
@@ -28,7 +29,7 @@ export class FieldView extends React.Component<DocumentFieldViewProps> {
             return <FieldTextBox {...this.props} />
         }
         else if (field instanceof ImageField) {
-            return <img src={field.Data.href}></img>
+            return <ImageBox {...this.props} />
         }
         else if (field instanceof NumberField) {
             return <p>{field.Data}</p>
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..7577627e8
--- /dev/null
+++ b/src/views/nodes/ImageBox.tsx
@@ -0,0 +1,91 @@
+
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import { SelectionManager } from "../../util/SelectionManager";
+import { DocumentFieldViewProps } from "./DocumentView";
+import "./ImageBox.scss";
+import React = require("react")
+import { ImageField } from '../../fields/ImageField';
+import { NumberField } from '../../fields/NumberField';
+
+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 _downX: number = 0;
+    private _downY: number = 0;
+    private _lastTap: number = 0;
+
+    constructor(props: DocumentFieldViewProps) {
+        super(props);
+
+        this._ref = React.createRef();
+        this.state = {
+            photoIndex: 0,
+            isOpen: false,
+        };
+    }
+
+    componentDidMount() {
+    }
+
+    componentWillUnmount() {
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1 && SelectionManager.IsSelected(this.props.containingDocumentView)) {
+                e.stopPropagation();
+                this._downX = e.clientX;
+                this._downY = e.clientY;
+                document.removeEventListener("pointerup", this.onPointerUp);
+                document.addEventListener("pointerup", this.onPointerUp);
+            }
+        } else {
+            this._lastTap = Date.now();
+        }
+    }
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointerup", this.onPointerUp);
+        if (Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2) {
+            this.setState({ isOpen: true })
+        }
+        e.stopPropagation();
+    }
+
+    render() {
+        let field = this.props.doc.GetFieldT(this.props.fieldKey, ImageField);
+        let path = "";
+        if (field) {
+            path = field.Data.href;
+        }
+        const images = [path,];
+        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} >
+                <img src={images[0]} width="100%" alt="Image not found" />
+                {lightbox()}
+            </div>)
+    }
+}
\ No newline at end of file