From 3b0c9a8a3282eb3c04123985a0512592fe0affae Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 1 Feb 2019 11:33:59 -0500
Subject: added lightbox for images

---
 src/views/nodes/ImageBox.tsx | 82 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/views/nodes/ImageBox.tsx

(limited to 'src/views/nodes/ImageBox.tsx')

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
-- 
cgit v1.2.3-70-g09d2


From ba9ef04e48d874124ce149c91bd49dcae394a82e Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 1 Feb 2019 11:37:41 -0500
Subject: from kast

---
 src/views/nodes/ImageBox.tsx | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

(limited to 'src/views/nodes/ImageBox.tsx')

diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 5c0db6cab..4535cef98 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -1,20 +1,10 @@
-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 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 { DocumentView, DocumentFieldViewProps } from "./DocumentView";
+import { 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,
-- 
cgit v1.2.3-70-g09d2


From 588e1edf046aea0f280117f4aaa5b9853258c05b Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 1 Feb 2019 14:36:41 -0500
Subject: fixed zordering of dragged items. image  lightbox shows on double tap
 now.

---
 src/fields/Key.ts                                |  1 +
 src/views/collections/CollectionFreeFormView.tsx | 21 ++++++++++++++++-
 src/views/nodes/DocumentView.tsx                 | 10 ++++++++
 src/views/nodes/ImageBox.tsx                     | 29 ++++++++++++++++++------
 4 files changed, 53 insertions(+), 8 deletions(-)

(limited to 'src/views/nodes/ImageBox.tsx')

diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index 4da800fac..5cd43f55e 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -41,6 +41,7 @@ export namespace KeyStore {
     export const Scale = new Key("Scale");
     export const Width = new Key("Width");
     export const Height = new Key("Height");
+    export const ZIndex = new Key("ZIndex");
     export const Data = new Key("Data");
     export const Layout = new Key("Layout");
     export const LayoutKeys = new Key("LayoutKeys");
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index ffb39426d..24daa2fbc 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -19,6 +19,7 @@ import { CollectionDockingView } from "./CollectionDockingView";
 export class CollectionFreeFormView extends React.Component<CollectionViewProps> {
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
+    private _nodeContainerRef = React.createRef<HTMLDivElement>();
 
     constructor(props: CollectionViewProps) {
         super(props);
@@ -51,10 +52,28 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
             const docY = (screenY - translateY) / sscale / scale;
             doc.x = docX;
             doc.y = docY;
+            this.bringToFront(doc);
         }
         e.stopPropagation();
     }
 
+    private bringToFront(doc: DocumentView) {
+        const { fieldKey, Document: Document } = this.props;
+
+        const value: Document[] = Document.GetListField<Document>(fieldKey, []);
+        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000);
+        value.map(d => {
+            var zind = d.GetNumberField(KeyStore.ZIndex, 0);
+            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
+                d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
+            }
+        })
+
+        if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) {
+            doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField);
+        }
+    }
+
     componentDidMount() {
         if (this._containerRef.current) {
             DragManager.MakeDropTarget(this._containerRef.current, {
@@ -191,7 +210,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
                 }} onDrop={this.onDrop} onDragOver={this.onDragOver} ref={this._containerRef}>
                     <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${currScale}, ${currScale})`, transformOrigin: `left, top` }} ref={this._canvasRef}>
 
-                        <div className="node-container">
+                        <div className="node-container" ref={this._nodeContainerRef}>
                             {value.map(doc => {
                                 return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView} />);
                             })}
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 34a95747b..560cc0ee0 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -154,6 +154,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) => {
     }
@@ -359,6 +368,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/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 4535cef98..ffdcbae05 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -33,13 +33,30 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
     componentWillUnmount() {
     }
 
+    _downX: number = 0;
+    _downY: number = 0;
+    _singleTap = false;
+    _lastTap: number = 0;
     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();
+        if (Date.now() - this._lastTap < 300) {
+            if (e.buttons === 1 && SelectionManager.IsSelected(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() {
@@ -63,9 +80,7 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
         }
         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>
+                <img src={images[0]} width="100%" alt="Image not found" />
                 {lightbox()}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2


From 156245bbca2082a8b8cf426a381ed25d1be57bcb Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Fri, 1 Feb 2019 14:50:11 -0500
Subject: stopped dragging of topmost documents.

---
 src/views/collections/CollectionFreeFormView.tsx | 47 +++++++++++++-----------
 src/views/nodes/DocumentView.tsx                 | 11 ++++--
 src/views/nodes/ImageBox.tsx                     | 11 ++----
 3 files changed, 36 insertions(+), 33 deletions(-)

(limited to 'src/views/nodes/ImageBox.tsx')

diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 24daa2fbc..c77bd5820 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -20,6 +20,8 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
     private _containerRef = React.createRef<HTMLDivElement>();
     private _canvasRef = React.createRef<HTMLDivElement>();
     private _nodeContainerRef = React.createRef<HTMLDivElement>();
+    private _lastX: number = 0;
+    private _lastY: number = 0;
 
     constructor(props: CollectionViewProps) {
         super(props);
@@ -35,6 +37,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         return isSelected || childSelected || topMost;
     }
 
+    @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         const doc = de.data["document"];
         if (doc instanceof DocumentView) {
@@ -57,23 +60,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         e.stopPropagation();
     }
 
-    private bringToFront(doc: DocumentView) {
-        const { fieldKey, Document: Document } = this.props;
-
-        const value: Document[] = Document.GetListField<Document>(fieldKey, []);
-        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000);
-        value.map(d => {
-            var zind = d.GetNumberField(KeyStore.ZIndex, 0);
-            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
-                d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
-            }
-        })
-
-        if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) {
-            doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField);
-        }
-    }
-
     componentDidMount() {
         if (this._containerRef.current) {
             DragManager.MakeDropTarget(this._containerRef.current, {
@@ -84,8 +70,6 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         }
     }
 
-    _lastX: number = 0;
-    _lastY: number = 0;
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         if (e.button === 2 && this.active) {
@@ -139,6 +123,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField);
     }
 
+    @action
     onDrop = (e: React.DragEvent): void => {
         e.stopPropagation()
         e.preventDefault()
@@ -170,6 +155,9 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         }
     }
 
+    onDragOver = (e: React.DragEvent): void => {
+    }
+
     @action
     addDocument = (doc: Document): void => {
         //TODO This won't create the field if it doesn't already exist
@@ -189,16 +177,31 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
         }
     }
 
-    onDragOver = (e: React.DragEvent): void => {
+    @action
+    bringToFront(doc: DocumentView) {
+        const { fieldKey, Document: Document } = this.props;
+
+        const value: Document[] = Document.GetListField<Document>(fieldKey, []);
+        var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000);
+        value.map(d => {
+            var zind = d.GetNumberField(KeyStore.ZIndex, 0);
+            if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
+                d.SetFieldValue(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
+            }
+        })
+
+        if (doc.props.Document.GetNumberField(KeyStore.ZIndex, 0) != 0) {
+            doc.props.Document.SetFieldValue(KeyStore.ZIndex, 0, NumberField);
+        }
     }
+
     render() {
         const { fieldKey, Document: Document } = this.props;
-
         const value: Document[] = Document.GetListField<Document>(fieldKey, []);
         const panx: number = Document.GetNumberField(KeyStore.PanX, 0);
         const pany: number = Document.GetNumberField(KeyStore.PanY, 0);
         const currScale: number = Document.GetNumberField(KeyStore.Scale, 1);
-        console.log("DocsR " + value.length);
+
         return (
             <div className="border" style={{
                 borderStyle: "solid",
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 560cc0ee0..ae5712182 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -172,6 +172,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
@@ -281,7 +286,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 } = {};
@@ -340,9 +345,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)
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index ffdcbae05..1dfad462f 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -15,7 +15,9 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
 
     public static LayoutString() { return "<ImageBox doc={Document} containingDocumentView={ContainingDocumentView} fieldKey={DataKey} />"; }
     private _ref: React.RefObject<HTMLDivElement>;
-    private _wasSelected: boolean = false;
+    private _downX: number = 0;
+    private _downY: number = 0;
+    private _lastTap: number = 0;
 
     constructor(props: DocumentFieldViewProps) {
         super(props);
@@ -33,14 +35,9 @@ export class ImageBox extends React.Component<DocumentFieldViewProps, ImageBoxSt
     componentWillUnmount() {
     }
 
-    _downX: number = 0;
-    _downY: number = 0;
-    _singleTap = false;
-    _lastTap: number = 0;
     onPointerDown = (e: React.PointerEvent): void => {
-        const { containingDocumentView } = this.props;
         if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && SelectionManager.IsSelected(containingDocumentView)) {
+            if (e.buttons === 1 && SelectionManager.IsSelected(this.props.containingDocumentView)) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
-- 
cgit v1.2.3-70-g09d2

