From 3213d828b4386eabc2ee19b47279d0053958ea2a Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sun, 24 Feb 2019 15:27:27 -0500
Subject: why doesn't this work

---
 src/client/views/collections/CollectionView.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 90080ab43..35ebb5687 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
+import { CollectionTreeView } from "./CollectionTreeView";
 
 
 
@@ -19,6 +20,7 @@ export enum CollectionViewType {
     Freeform,
     Schema,
     Docking,
+    Tree
 }
 
 export const COLLECTION_BORDER_WIDTH = 2;
@@ -91,6 +93,10 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 return (<CollectionDockingView {...this.props}
                     addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
                     CollectionView={this} />)
+            case CollectionViewType.Tree:
+                return (<CollectionTreeView {...this.props}
+                    addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+                    CollectionView={this} />)
             default:
                 return <div></div>
         }
-- 
cgit v1.2.3-70-g09d2


From fe05db6c34d54e27ceeb853da5718aca4c52dcae Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Sun, 24 Feb 2019 23:16:55 -0500
Subject: look it works

---
 .../views/collections/CollectionTreeView.tsx       | 98 ++++++++++++++++++++--
 src/client/views/collections/CollectionView.tsx    |  2 -
 src/client/views/nodes/DocumentView.tsx            |  1 +
 3 files changed, 92 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 9cead9558..745b06c46 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -3,19 +3,103 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { Document } from "../../../fields/Document";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
+import React = require("react")
+import { TextField } from "../../../fields/TextField";
+import { BasicField } from "../../../fields/BasicField";
+import { assertParenthesizedExpression } from "babel-types";
+import { observable, action } from "mobx";
+
+export interface TreeViewProps {
+    document: Document;
+}
 
 @observer
-export class CollectionTreeView extends CollectionViewBase {
+/**
+ * Component that takes in a document prop and a boolean whether it's collapsed or not.
+ */
+class TreeView extends React.Component<TreeViewProps> {
+
+    @observable
+    collapsed: boolean = false;
+
+    /**
+     * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element.
+     * @param document The document to render.
+     */
+    renderChild(document: Document) {
+        var children = document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+        let title = document.GetT<TextField>(KeyStore.Title, TextField);
+
+        // if the title hasn't loaded, immediately return the div
+        if (!title || title === "<Waiting>") {
+            return <div key={document.Id}></div>;
+        }
+
+        // otherwise, check if it's a collection.
+        else if (children && children !== "<Waiting>") {
+            // if it's not collapsed, then render the full TreeView.
+            if (!this.collapsed) {
+                return (
+                    <li key={document.Id} onClick={action(() => this.collapsed = true)} >
+                        {title.Data}
+                        <ul key={document.Id}>
+                            <TreeView
+                                document={document}
+                            />
+                        </ul>
+                    </li>
+                );
+            } else {
+                return <li key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li>
+            }
+        }
+
+        // finally, if it's a normal document, then render it as such.
+        else {
+            return <li key={document.Id}>{title.Data}</li>;
+        }
+    }
+
+    render() {
+        var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
+
+        if (children && children !== "<Waiting>") {
+            return (<div>
+                {children.Data.map(value => this.renderChild(value))}
+            </div>)
+            // let results: JSX.Element[] = [];
+
+            // // append a list item for each child in the collection
+            // children.Data.forEach((value) => {
+            //     results.push(this.renderChild(value));
+            // })
 
-    test = () => {
-        var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
-        if (children != null) {
-            console.log("\nNumber of Children: " + children);
+            // return results;
+        } else {
+            return <div></div>;
         }
-        return "HELLO WORLD";
     }
+}
+
+
+@observer
+export class CollectionTreeView extends CollectionViewBase {
 
     render() {
-        return { test };
+        let titleStr = "";
+        let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
+        if (title && title !== "<Waiting>") {
+            titleStr = title.Data;
+        }
+        return (
+            <div>
+                <h3>{titleStr}</h3>
+                <ul>
+                    <TreeView
+                        document={this.props.Document}
+                    />
+                </ul>
+            </div>
+        );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 35ebb5687..37fe43ab3 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -13,8 +13,6 @@ import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
 import { CollectionTreeView } from "./CollectionTreeView";
 
-
-
 export enum CollectionViewType {
     Invalid,
     Freeform,
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ad1328e5d..f06ea632c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -189,6 +189,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
             ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
             ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
+            ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
             ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
             SelectionManager.SelectDoc(this, e.ctrlKey);
-- 
cgit v1.2.3-70-g09d2


From c439f11ba9695703697f7abc53a7cc2fd2d5c1a2 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 12:38:47 -0500
Subject: fixes for dropping documents without a know height.

---
 src/client/documents/Documents.ts                  |  6 +---
 src/client/views/DocumentDecorations.tsx           | 23 ++++++++--------
 .../views/collections/CollectionFreeFormView.tsx   | 30 ++++++++++++++------
 src/client/views/collections/CollectionView.tsx    | 11 ++++++--
 .../views/collections/CollectionViewBase.tsx       |  4 +--
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 32 +++++-----------------
 src/client/views/nodes/DocumentView.tsx            |  4 ++-
 src/client/views/nodes/FormattedTextBox.tsx        |  5 +++-
 src/client/views/nodes/ImageBox.tsx                | 13 +++++++--
 src/fields/Document.ts                             |  2 +-
 src/fields/Field.ts                                |  3 ++
 11 files changed, 73 insertions(+), 60 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2dfff6235..15ecfbfe6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -112,9 +112,7 @@ export namespace Documents {
             imageProto.Set(KeyStore.X, new NumberField(0));
             imageProto.Set(KeyStore.Y, new NumberField(0));
             imageProto.Set(KeyStore.NativeWidth, new NumberField(300));
-            imageProto.Set(KeyStore.NativeHeight, new NumberField(300));
             imageProto.Set(KeyStore.Width, new NumberField(300));
-            imageProto.Set(KeyStore.Height, new NumberField(300));
             imageProto.Set(KeyStore.Layout, new TextField(CollectionView.LayoutString("AnnotationsKey")));
             imageProto.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform)
             imageProto.Set(KeyStore.BackgroundLayout, new TextField(ImageBox.LayoutString()));
@@ -151,9 +149,7 @@ export namespace Documents {
         doc.Set(KeyStore.BackgroundLayout, new TextField(EmbeddedCaption()));
         doc.Set(KeyStore.OverlayLayout, new TextField(FixedCaption()));
         doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption]));
-
-        let annotation = Documents.TextDocument({ title: "hello" });
-        doc.Set(KeyStore.Annotations, new ListField([annotation]));
+        console.log("" + doc.GetNumber(KeyStore.Height, 311));
         return doc;
     }
 
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 2f012913d..975a125f7 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -104,25 +104,26 @@ export class DocumentDecorations extends React.Component {
             const rect = element.screenRect();
             if (rect.width !== 0) {
                 let doc = element.props.Document;
-                let width = doc.GetOrCreate(KeyStore.Width, NumberField);
-                let height = doc.GetOrCreate(KeyStore.Height, NumberField);
+                let width = doc.GetNumber(KeyStore.Width, 0);
+                let nwidth = doc.GetNumber(KeyStore.NativeWidth, 0);
+                let nheight = doc.GetNumber(KeyStore.NativeHeight, 0);
+                let height = doc.GetNumber(KeyStore.Height, nwidth ? nheight / nwidth * width : 0);
                 let x = doc.GetOrCreate(KeyStore.X, NumberField);
                 let y = doc.GetOrCreate(KeyStore.Y, NumberField);
-                let scale = width.Data / rect.width;
-                let actualdW = Math.max(width.Data + (dW * scale), 20);
-                let actualdH = Math.max(height.Data + (dH * scale), 20);
-                x.Data += dX * (actualdW - width.Data);
-                y.Data += dY * (actualdH - height.Data);
+                let scale = width / rect.width;
+                let actualdW = Math.max(width + (dW * scale), 20);
+                let actualdH = Math.max(height + (dH * scale), 20);
+                x.Data += dX * (actualdW - width);
+                y.Data += dY * (actualdH - height);
                 var nativeWidth = doc.GetNumber(KeyStore.NativeWidth, 0);
                 var nativeHeight = doc.GetNumber(KeyStore.NativeHeight, 0);
                 if (nativeWidth > 0 && nativeHeight > 0) {
                     if (Math.abs(dW) > Math.abs(dH))
                         actualdH = nativeHeight / nativeWidth * actualdW;
-                    else
-                        actualdW = nativeWidth / nativeHeight * actualdH;
+                    else actualdW = nativeWidth / nativeHeight * actualdH;
                 }
-                width.Data = actualdW;
-                height.Data = actualdH;
+                doc.SetNumber(KeyStore.Width, actualdW);
+                doc.SetNumber(KeyStore.Height, actualdH);
             }
         })
     }
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index c40da6eaa..7cad2cc03 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -102,18 +102,30 @@ export class CollectionFreeFormView extends CollectionViewBase {
         e.stopPropagation();
         e.preventDefault();
         let coefficient = 1000;
-        // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
-        // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
-        let transform = this.getTransform();
 
-        let deltaScale = (1 - (e.deltaY / coefficient));
-        let [x, y] = transform.transformPoint(e.clientX, e.clientY);
+        if (e.ctrlKey) {
+            var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
+            var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+            const coefficient = 1000;
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            this.props.Document.SetNumber(KeyStore.NativeWidth, nativeWidth * deltaScale);
+            this.props.Document.SetNumber(KeyStore.NativeHeight, nativeHeight * deltaScale);
+            e.stopPropagation();
+            e.preventDefault();
+        } else {
+            // if (modes[e.deltaMode] == 'pixels') coefficient = 50;
+            // else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+            let transform = this.getTransform();
 
-        let localTransform = this.getLocalTransform();
-        localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+            let deltaScale = (1 - (e.deltaY / coefficient));
+            let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
-        this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
-        this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
+            let localTransform = this.getLocalTransform();
+            localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
+
+            this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
+            this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
+        }
     }
 
     @action
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 90080ab43..88c15da07 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
+import { Field } from "../../../fields/Field";
 
 
 
@@ -39,9 +40,13 @@ export class CollectionView extends React.Component<CollectionViewProps> {
     }
     @action
     addDocument = (doc: Document): void => {
-        //TODO This won't create the field if it doesn't already exist
-        const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
-        value.push(doc);
+        if (this.props.Document.Get(this.props.fieldKey) instanceof Field) {
+            //TODO This won't create the field if it doesn't already exist
+            const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+            value.push(doc);
+        } else {
+            this.props.Document.SetData(this.props.fieldKey, [doc], ListField);
+        }
     }
 
     @action
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 7e269caf1..f64a48c18 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -60,7 +60,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
 
         let html = e.dataTransfer.getData("text/html");
         let text = e.dataTransfer.getData("text/plain");
-        if (html) {
+        if (html && html.indexOf("<img") != 0) {
             let htmlDoc = Documents.HtmlDocument(html, { ...options });
             htmlDoc.SetText(KeyStore.DocumentText, text);
             this.props.addDocument(htmlDoc);
@@ -72,7 +72,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
             if (item.kind === "string" && item.type.indexOf("uri") != -1) {
                 e.dataTransfer.items[i].getAsString(function (s) {
                     action(() => {
-                        var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, nativeHeight: 300, width: 300, height: 300 })
+                        var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, width: 300, })
 
                         let docs = that.props.Document.GetT(KeyStore.Data, ListField);
                         if (docs != FieldWaiting) {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d7243421a..50dc5a619 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -27,44 +27,26 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
         return `scale(${this.props.ContentScaling()}, ${this.props.ContentScaling()}) translate(${this.props.Document.GetNumber(KeyStore.X, 0)}px, ${this.props.Document.GetNumber(KeyStore.Y, 0)}px)`;
     }
 
-    @computed
-    get width(): number {
-        return this.props.Document.GetNumber(KeyStore.Width, 0);
-    }
-
-    @computed
-    get nativeWidth(): number {
-        return this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
-    }
+    @computed get zIndex(): number { return this.props.Document.GetNumber(KeyStore.ZIndex, 0); }
+    @computed get width(): number { return this.props.Document.Width(); }
+    @computed get height(): number { return this.props.Document.Height(); }
+    @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+    @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
 
     set width(w: number) {
         this.props.Document.SetData(KeyStore.Width, w, NumberField)
-        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+        if (this.nativeWidth && this.nativeHeight) {
             this.props.Document.SetNumber(KeyStore.Height, this.nativeHeight / this.nativeWidth * w)
         }
     }
 
-    @computed
-    get height(): number {
-        return this.props.Document.GetNumber(KeyStore.Height, 0);
-    }
-    @computed
-    get nativeHeight(): number {
-        return this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
-    }
-
     set height(h: number) {
         this.props.Document.SetData(KeyStore.Height, h, NumberField);
-        if (this.nativeWidth > 0 && this.nativeHeight > 0) {
+        if (this.nativeWidth && this.nativeHeight) {
             this.props.Document.SetNumber(KeyStore.Width, this.nativeWidth / this.nativeHeight * h)
         }
     }
 
-    @computed
-    get zIndex(): number {
-        return this.props.Document.GetNumber(KeyStore.ZIndex, 0);
-    }
-
     set zIndex(h: number) {
         this.props.Document.SetData(KeyStore.ZIndex, h, NumberField)
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ad1328e5d..212697442 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -196,6 +196,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @computed get mainContent() {
+        var val = this.props.Document.Id;
         return <JsxParser
             components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
             bindings={this._documentBindings}
@@ -237,7 +238,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                     transform: `scale(${scaling},${scaling})`
                 }}
                 onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown} >
+                onPointerDown={this.onPointerDown}
+            >
                 {this.mainContent}
             </div>
         )
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 60ee0b5e1..a58e1955f 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -111,10 +111,13 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             e.stopPropagation();
         }
     }
+    onPointerWheel = (e: React.WheelEvent): void => {
+        e.stopPropagation();
+    }
     render() {
-        var val = this.props.doc.Get(this.props.fieldKey);
         return (<div className="formattedTextBox-cont"
             onPointerDown={this.onPointerDown}
+            onWheel={this.onPointerWheel}
             ref={this._ref} />)
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index b5ce8b28c..4fe73fb8d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,12 +9,14 @@ import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
 import { observable, action } from 'mobx';
 import { KeyStore } from '../../../fields/KeyStore';
+import { element } from 'prop-types';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
 
     public static LayoutString() { return FieldView.LayoutString(ImageBox) }
     private _ref: React.RefObject<HTMLDivElement>;
+    private _imgRef: React.RefObject<HTMLImageElement>;
     private _downX: number = 0;
     private _downY: number = 0;
     private _lastTap: number = 0;
@@ -25,12 +27,20 @@ export class ImageBox extends React.Component<FieldViewProps> {
         super(props);
 
         this._ref = React.createRef();
+        this._imgRef = React.createRef();
         this.state = {
             photoIndex: 0,
             isOpen: false,
         };
     }
 
+    @action
+    onLoad = (target: any) => {
+        var h = this._imgRef.current!.naturalHeight;
+        var w = this._imgRef.current!.naturalWidth;
+        this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w)
+    }
+
     componentDidMount() {
     }
 
@@ -84,10 +94,9 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
         let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
-
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width={nativeWidth} alt="Image not found" />
+                <img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
                 {this.lightbox(path)}
             </div>)
     }
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 0d7d357a0..4e68b3b4d 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -31,7 +31,7 @@ export class Document extends Field {
     }
 
     public Width = () => { return this.GetNumber(KeyStore.Width, 0) }
-    public Height = () => { return this.GetNumber(KeyStore.Height, 0) }
+    public Height = () => { return this.GetNumber(KeyStore.Height, this.GetNumber(KeyStore.NativeWidth, 0) ? this.GetNumber(KeyStore.NativeHeight, 0) / this.GetNumber(KeyStore.NativeWidth, 0) * this.GetNumber(KeyStore.Width, 0) : 0) }
     public Scale = () => { return this.GetNumber(KeyStore.Scale, 1) }
 
     @computed
diff --git a/src/fields/Field.ts b/src/fields/Field.ts
index c7e0232af..d48509a47 100644
--- a/src/fields/Field.ts
+++ b/src/fields/Field.ts
@@ -1,6 +1,7 @@
 
 import { Utils } from "../Utils";
 import { Types } from "../server/Message";
+import { computed } from "mobx";
 
 export function Cast<T extends Field>(field: FieldValue<Field>, ctor: { new(): T }): Opt<T> {
     if (field) {
@@ -25,6 +26,8 @@ export abstract class Field {
     }
 
     private id: FieldId;
+
+    @computed
     get Id(): FieldId {
         return this.id;
     }
-- 
cgit v1.2.3-70-g09d2


From ad1aab1e757a2f0d8acc6038c19c54caa5b1ec48 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 13:47:59 -0500
Subject: fixed so that docs are centered in middle of window.

---
 .../views/collections/CollectionDockingView.scss   |  4 ++++
 .../views/collections/CollectionDockingView.tsx    |  7 ++++---
 .../views/collections/CollectionFreeFormView.tsx   | 23 +++++++++++-----------
 src/client/views/collections/CollectionView.tsx    |  2 +-
 .../views/collections/CollectionViewBase.tsx       |  2 ++
 5 files changed, 22 insertions(+), 16 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 7c0b512a7..2706c3272 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,3 +1,7 @@
+.collectiondockingview-content {
+    height: 100%;
+}
+
 .collectiondockingview-container {
     position: relative;
     top: 0;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 2230ec14f..a0f457ef2 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -265,6 +265,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
 
     @observable private _mainCont = React.createRef<HTMLDivElement>();
     @observable private _panelWidth = 0;
+    @observable private _panelHeight = 0;
     @observable private _document: Opt<Document>;
 
     constructor(props: any) {
@@ -272,8 +273,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
     }
 
-    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
-    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+    private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, this._panelWidth); }
+    private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, this._panelHeight); }
     private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
 
     ScreenToLocalTransform = () => {
@@ -297,7 +298,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
                     ContainingCollectionView={undefined} />
             </div>
 
-        return <Measure onResize={action((r: any) => this._panelWidth = r.entry.width)}>
+        return <Measure onResize={action((r: any) => { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}>
             {({ measureRef }) => <div ref={measureRef}>  {content} </div>}
         </Measure>
     }
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 7cad2cc03..90eb8a44e 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -20,7 +20,6 @@ import "./CollectionFreeFormView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 import React = require("react");
-import { Documents } from "../../documents/Documents";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 @observer
@@ -31,7 +30,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private _downX: number = 0;
     private _downY: number = 0;
 
-
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
     @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@@ -39,6 +37,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
     @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
     @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this.props.panelWidth() / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this.props.panelHeight() / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
 
     @undoBatch
     @action
@@ -118,6 +118,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
             let transform = this.getTransform();
 
             let deltaScale = (1 - (e.deltaY / coefficient));
+            if (deltaScale * this.zoomScaling < 1 && this.isAnnotationOverlay)
+                deltaScale = 1 / this.zoomScaling;
             let [x, y] = transform.transformPoint(e.clientX, e.clientY);
 
             let localTransform = this.getLocalTransform();
@@ -132,17 +134,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private SetPan(panX: number, panY: number) {
         const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
         const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
-        this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX);
-        this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY);
+        this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
+        this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
     }
 
     @action
     onDrop = (e: React.DragEvent): void => {
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
-        let transform = this.getTransform();
-
-        var pt = transform.transformPoint(e.pageX, e.pageY);
+        var pt = this.getTransform().transformPoint(e.pageX, e.pageY);
         super.onDrop(e, { x: pt[0], y: pt[1] });
     }
 
@@ -222,13 +220,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 onError={(test: any) => console.log(test)}
             />);
     }
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
+
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH - this.centeringShiftX, -COLLECTION_BORDER_WIDTH - this.centeringShiftY).transform(this.getLocalTransform())
     getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
     noScaling = () => 1;
 
     render() {
-        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
-        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
+        const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX;
+        const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY;
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 88c15da07..6d30cf365 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -29,7 +29,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
 
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<CollectionView Document={Document}
-                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} bindings={bindings}
+                    ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
                     isTopMost={isTopMost} BackgroundView={BackgroundView} />`;
     }
     public active = () => {
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index f64a48c18..e53485183 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -20,6 +20,8 @@ export interface CollectionViewProps {
     isTopMost: boolean;
     select: (ctrlPressed: boolean) => void;
     bindings: any;
+    panelWidth: () => number;
+    panelHeight: () => number;
 }
 export interface SubCollectionViewProps extends CollectionViewProps {
     active: () => boolean;
-- 
cgit v1.2.3-70-g09d2


From 39215d8999413a5e27d222c6650fc9e84c7a9ae9 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 25 Feb 2019 16:08:36 -0500
Subject: added drag/drop out of schema view

---
 src/client/util/DragManager.ts                     |  20 ++--
 .../views/collections/CollectionFreeFormView.tsx   |  23 ++---
 .../views/collections/CollectionSchemaView.tsx     | 114 ++++++++++++++++-----
 src/client/views/collections/CollectionView.tsx    |   8 +-
 .../views/collections/CollectionViewBase.tsx       |  14 ++-
 src/client/views/nodes/DocumentView.tsx            |   2 +-
 6 files changed, 127 insertions(+), 54 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index eb4b3aeaa..fd026992b 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -61,7 +61,7 @@ export namespace DragManager {
         };
     }
 
-    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) {
+    export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) {
         DocumentDecorations.Instance.Hidden = true;
         if (!dragDiv) {
             dragDiv = document.createElement("div");
@@ -87,10 +87,12 @@ export namespace DragManager {
         dragDiv.appendChild(dragElement);
 
         let hideSource = false;
-        if (typeof options.hideSource === "boolean") {
-            hideSource = options.hideSource;
-        } else {
-            hideSource = options.hideSource();
+        if (options) {
+            if (typeof options.hideSource === "boolean") {
+                hideSource = options.hideSource;
+            } else {
+                hideSource = options.hideSource();
+            }
         }
         const wasHidden = ele.hidden;
         if (hideSource) {
@@ -107,7 +109,7 @@ export namespace DragManager {
         const upHandler = (e: PointerEvent) => {
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
-            FinishDrag(dragElement, e, options, dragData);
+            FinishDrag(dragElement, e, dragData, options);
             if (hideSource && !wasHidden) {
                 ele.hidden = false;
             }
@@ -116,7 +118,7 @@ export namespace DragManager {
         document.addEventListener("pointerup", upHandler);
     }
 
-    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) {
+    function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) {
         dragDiv.removeChild(dragEle);
         const target = document.elementFromPoint(e.x, e.y);
         if (!target) {
@@ -130,7 +132,9 @@ export namespace DragManager {
                 data: dragData
             }
         }));
-        options.handlers.dragComplete({});
+        if (options) {
+            options.handlers.dragComplete({});
+        }
         DocumentDecorations.Instance.Hidden = false;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 90eb8a44e..b54d9e0cf 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -44,16 +44,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
         super.drop(e, de);
-        const doc: DocumentView = de.data["document"];
-        const xOffset = de.data["xOffset"] as number || 0;
-        const yOffset = de.data["yOffset"] as number || 0;
-        //this should be able to use translate and scale methods on an Identity transform, no?
-        const transform = this.getTransform();
-        const screenX = de.x - xOffset;
-        const screenY = de.y - yOffset;
-        const [x, y] = transform.transformPoint(screenX, screenY);
-        doc.props.Document.SetNumber(KeyStore.X, x);
-        doc.props.Document.SetNumber(KeyStore.Y, y);
+        const docView: DocumentView = de.data["documentView"];
+        let doc: Document = docView ? docView.props.Document : de.data["document"];
+        let screenX = de.x - (de.data["xOffset"] as number || 0);
+        let screenY = de.y - (de.data["yOffset"] as number || 0);
+        const [x, y] = this.getTransform().transformPoint(screenX, screenY);
+        doc.SetNumber(KeyStore.X, x);
+        doc.SetNumber(KeyStore.Y, y);
         this.bringToFront(doc);
     }
 
@@ -148,15 +145,15 @@ export class CollectionFreeFormView extends CollectionViewBase {
     }
 
     @action
-    bringToFront(doc: DocumentView) {
+    bringToFront(doc: Document) {
         const { fieldKey: fieldKey, Document: Document } = this.props;
 
         const value: Document[] = Document.GetList<Document>(fieldKey, []).slice();
         value.sort((doc1, doc2) => {
-            if (doc1 === doc.props.Document) {
+            if (doc1 === doc) {
                 return 1;
             }
-            if (doc2 === doc.props.Document) {
+            if (doc2 === doc) {
                 return -1;
             }
             return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0);
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index dc952ef82..d5b82cbb6 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -15,6 +15,8 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView";
 import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
+import { DragManager } from "../../util/DragManager";
+import { CollectionDockingView } from "./CollectionDockingView";
 
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
@@ -30,6 +32,9 @@ export class CollectionSchemaView extends CollectionViewBase {
     @observable _selectedIndex = 0;
     @observable _splitPercentage: number = 50;
 
+
+
+
     renderCell = (rowProps: CellInfo) => {
         let props: FieldViewProps = {
             doc: rowProps.value[0],
@@ -42,31 +47,55 @@ export class CollectionSchemaView extends CollectionViewBase {
         let contents = (
             <FieldView {...props} />
         )
+        let reference = React.createRef<HTMLDivElement>();
+        let onRowMove = action((e: PointerEvent): void => {
+            e.stopPropagation();
+            e.preventDefault();
+
+            document.removeEventListener("pointermove", onRowMove);
+            document.removeEventListener('pointerup', onRowUp);
+            DragManager.StartDrag(reference.current!, { document: props.doc });
+        });
+        let onRowUp = action((e: PointerEvent): void => {
+            document.removeEventListener("pointermove", onRowMove);
+            document.removeEventListener('pointerup', onRowUp);
+        });
+        let onRowDown = (e: React.PointerEvent) => {
+            if (e.shiftKey) {
+                CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc);
+                e.stopPropagation();
+            } else {
+                document.addEventListener("pointermove", onRowMove);
+                document.addEventListener('pointerup', onRowUp);
+            }
+        }
         return (
-            <EditableView contents={contents} height={36} GetValue={() => {
-                let field = props.doc.Get(props.fieldKey);
-                if (field && field instanceof Field) {
-                    return field.ToScriptString();
-                }
-                return field || "";
-            }} SetValue={(value: string) => {
-                let script = CompileScript(value);
-                if (!script.compiled) {
-                    return false;
-                }
-                let field = script();
-                if (field instanceof Field) {
-                    props.doc.Set(props.fieldKey, field);
-                    return true;
-                } else {
-                    let dataField = ToField(field);
-                    if (dataField) {
-                        props.doc.Set(props.fieldKey, dataField);
-                        return true;
-                    }
-                }
-                return false;
-            }}></EditableView>
+            <div onPointerDown={onRowDown} ref={reference}>
+                <EditableView contents={contents}
+                    height={36} GetValue={() => {
+                        let field = props.doc.Get(props.fieldKey);
+                        if (field && field instanceof Field) {
+                            return field.ToScriptString();
+                        }
+                        return field || "";
+                    }} SetValue={(value: string) => {
+                        let script = CompileScript(value);
+                        if (!script.compiled) {
+                            return false;
+                        }
+                        let field = script();
+                        if (field instanceof Field) {
+                            props.doc.Set(props.fieldKey, field);
+                            return true;
+                        } else {
+                            let dataField = ToField(field);
+                            if (dataField) {
+                                props.doc.Set(props.fieldKey, dataField);
+                                return true;
+                            }
+                        }
+                        return false;
+                    }}></EditableView></div>
         )
     }
 
@@ -91,21 +120,49 @@ export class CollectionSchemaView extends CollectionViewBase {
         };
     }
 
+    _startSplitPercent = 0;
     @action
     onDividerMove = (e: PointerEvent): void => {
         let nativeWidth = this._mainCont.current!.getBoundingClientRect();
         this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
     }
+    @action
     onDividerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onDividerMove);
         document.removeEventListener('pointerup', this.onDividerUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 1 ? 66 : 100;
+        }
     }
     onDividerDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
         e.stopPropagation();
         e.preventDefault();
         document.addEventListener("pointermove", this.onDividerMove);
         document.addEventListener('pointerup', this.onDividerUp);
     }
+    @action
+    onExpanderMove = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+    @action
+    onExpanderUp = (e: PointerEvent): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        document.removeEventListener("pointermove", this.onExpanderMove);
+        document.removeEventListener('pointerup', this.onExpanderUp);
+        if (this._startSplitPercent == this._splitPercentage) {
+            this._splitPercentage = this._splitPercentage == 100 ? 66 : 100;
+        }
+    }
+    onExpanderDown = (e: React.PointerEvent) => {
+        this._startSplitPercent = this._splitPercentage;
+        e.stopPropagation();
+        e.preventDefault();
+        document.addEventListener("pointermove", this.onExpanderMove);
+        document.addEventListener('pointerup', this.onExpanderUp);
+    }
 
     onPointerDown = (e: React.PointerEvent) => {
         // if (e.button === 2 && this.active) {
@@ -113,8 +170,10 @@ export class CollectionSchemaView extends CollectionViewBase {
         //     e.preventDefault();
         // } else 
         {
-            if (e.buttons === 1 && this.props.active()) {
-                e.stopPropagation();
+            if (e.buttons === 1) {
+                if (this.props.isSelected()) {
+                    e.stopPropagation();
+                }
             }
         }
     }
@@ -155,6 +214,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                 }
             </Measure>
         )
+        let handle = !this.props.active() ? (null) : (
+            <div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
         return (
             <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
                 <Measure onResize={action((r: any) => {
@@ -190,6 +251,7 @@ export class CollectionSchemaView extends CollectionViewBase {
                     style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
                     {content}
                 </div>
+                {handle}
             </div >
         )
     }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 6d30cf365..83886f933 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -53,7 +53,13 @@ export class CollectionView extends React.Component<CollectionViewProps> {
     removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
         const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
-        let index = value.indexOf(doc);
+        let index = -1;
+        for (let i = 0; i < value.length; i++) {
+            if (value[i].Id == doc.Id) {
+                index = i;
+                break;
+            }
+        }
         if (index !== -1) {
             value.splice(index, 1)
 
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index e53485183..217536e2b 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -44,12 +44,16 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     @undoBatch
     @action
     protected drop(e: Event, de: DragManager.DropEvent) {
-        const doc: DocumentView = de.data["document"];
-        if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) {
-            if (doc.props.RemoveDocument) {
-                doc.props.RemoveDocument(doc.props.Document);
+        const docView: DocumentView = de.data["documentView"];
+        const doc: Document = de.data["document"];
+        if (docView && docView.props.ContainingCollectionView && docView.props.ContainingCollectionView !== this.props.CollectionView) {
+            if (docView.props.RemoveDocument) {
+                docView.props.RemoveDocument(docView.props.Document);
             }
-            this.props.addDocument(doc.props.Document);
+            this.props.addDocument(docView.props.Document);
+        } else if (doc) {
+            this.props.removeDocument(doc);
+            this.props.addDocument(doc);
         }
         e.stopPropagation();
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 212697442..6fe78daee 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -124,7 +124,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
                 this._contextMenuCanOpen = false;
                 const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
                 let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
+                dragData["documentView"] = this;
                 dragData["xOffset"] = e.x - left;
                 dragData["yOffset"] = e.y - top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
-- 
cgit v1.2.3-70-g09d2


From 171852260c04ba7aafd789b231d98cdaa2a7dc8d Mon Sep 17 00:00:00 2001
From: laurawilsonri <laura_wilson@brown.edu>
Date: Mon, 25 Feb 2019 19:44:58 -0500
Subject: all but removing preview cursor works

---
 src/client/util/SelectionManager.ts                |  3 +--
 .../views/collections/CollectionFreeFormView.tsx   | 28 +++++++---------------
 src/client/views/collections/CollectionView.tsx    | 21 +++++++++++++++-
 src/client/views/nodes/DocumentView.tsx            |  3 ++-
 src/client/views/nodes/FormattedTextBox.tsx        | 14 +++++------
 5 files changed, 39 insertions(+), 30 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 82767bdcd..d5d9b29b2 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,5 +1,4 @@
 import { observable, action } from "mobx";
-import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
 import { DocumentView } from "../views/nodes/DocumentView";
 
 export namespace SelectionManager {
@@ -11,7 +10,7 @@ export namespace SelectionManager {
         SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
 
             //remove preview cursor from collection
-            if (doc.props.ContainingCollectionView != undefined && doc.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            if (doc.props.ContainingCollectionView != undefined) {
                 doc.props.ContainingCollectionView.hidePreviewCursor();
             }
 
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index d97710ffe..834aabd99 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -40,6 +40,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @observable
     private _previewCursorVisible: boolean = false;
 
+    @computed get colFocus(): boolean { return this.props.CollectionView.isFocusOn() }
+
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
     @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@@ -71,19 +73,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
             !e.defaultPrevented) {
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
-            //document.removeEventListener("keypress", this.onKeyDown);
-            //document.addEventListener("keydown", this.onKeyDown);
             document.removeEventListener("pointerup", this.onPointerUp);
             document.addEventListener("pointerup", this.onPointerUp);
             this._lastX = e.pageX;
             this._lastY = e.pageY;
             this._downX = e.pageX;
             this._downY = e.pageY;
-            //update downX/downY to update UI (used for preview text cursor)
-            this.setState({
-                DownX: e.pageX,
-                DownY: e.pageY,
-            })
         }
     }
 
@@ -95,6 +90,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
             //show preview text cursor on tap
             this._previewCursorVisible = true;
+            this.props.CollectionView.showPreviewCursor();
             //select is not already selected
             if (!this.props.isSelected()) {
                 this.props.select(false);
@@ -165,13 +161,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
             if (this._previewCursorVisible) {
                 //make textbox and add it to this collection
-                let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
-                let LocalX = tr.TranslateX;
-                let LocalY = tr.TranslateY;
-                let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" });
+                let [x, y] = this.getTransform().transformPoint(this._downX, this._downY); (this._downX, this._downY);
+                let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
                 //set text to be the typed key and get focus on text box
                 this.props.CollectionView.addDocument(newBox);
-                newBox.SetText(KeyStore.Text, e.key);
+                newBox.SetText(KeyStore.Data, e.key);
                 newBox.SetNumber(KeyStore.SelectOnLoaded, 1);
 
                 //remove cursor from screen
@@ -267,14 +261,10 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
         let cursor = null;
         //toggle for preview cursor -> will be on when user taps freeform
-        if (this._previewCursorVisible) {
+        if (this._previewCursorVisible && this.props.CollectionView.isFocusOn) {
             //get local position and place cursor there!
-            //let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
-            let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
-            let LocalX = tr.TranslateX;
-            let LocalY = tr.TranslateY;
-            //let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div>
+            let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
+            cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
         }
 
         const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 90080ab43..57d876996 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,4 +1,4 @@
-import { action, computed } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { ListField } from "../../../fields/ListField";
@@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
+var ReactDOM = require('react-dom');
 
 
 
@@ -26,6 +27,8 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionView extends React.Component<CollectionViewProps> {
 
+    private _focusOn: boolean = false;
+
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<CollectionView Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} bindings={bindings}
@@ -59,6 +62,21 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         return false
     }
 
+
+
+    @computed
+    get isFocusOn() { return this._focusOn; }
+
+    @action
+    showPreviewCursor() {
+        this._focusOn = true;
+    }
+
+    @action
+    hidePreviewCursor() {
+        this._focusOn = false;
+    }
+
     get collectionViewType(): CollectionViewType {
         let Document = this.props.Document;
         let viewField = Document.GetT(KeyStore.ViewType, NumberField);
@@ -76,6 +94,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         Document.SetData(KeyStore.ViewType, type, NumberField);
     }
 
+
     render() {
         let viewType = this.collectionViewType;
         switch (viewType) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 914182efa..bb6c8d13a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -120,7 +120,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
             //remove preview cursor from collection
-            if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            if (this.props.ContainingCollectionView != undefined) {
                 this.props.ContainingCollectionView.hidePreviewCursor();
             }
             this._contextMenuCanOpen = false;
@@ -208,6 +208,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             onError={(test: any) => { console.log(test) }}
         />
     }
+
     render() {
         if (!this.props.Document)
             return <div></div>
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 4a6560dc9..640c9b208 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -85,10 +85,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
                 keymap(baseKeymap),
-                //sets the placeholder text!
-                this.placeholderPlugin(
-                    this.props.doc.GetText(KeyStore.Text, "")
-                )
+                //sets the placeholder text to what's in KeyStore.Text!
             ]
         };
 
@@ -113,6 +110,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 this._editorView.updateState(EditorState.fromJSON(config, JSON.parse(field)));
             }
         })
+
+        //if tagged to be selected when created, then select & focus
+        if (this.props.doc.GetNumber(KeyStore.SelectOnLoaded, 0)) {
+            this.props.select();
+            this._editorView!.focus();
+        }
     }
 
     componentWillUnmount() {
@@ -141,9 +144,6 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         }
     }
     render() {
-        //if (this.props.doc.GetText(KeyStore.Text, "") !== ;
-
-
         return (<div className="formattedTextBox-cont"
             style={{
                 color: "initial",
-- 
cgit v1.2.3-70-g09d2


From 11327191e249382cc5d2551f1fd262d3a4ff25b9 Mon Sep 17 00:00:00 2001
From: laurawilsonri <laura_wilson@brown.edu>
Date: Mon, 25 Feb 2019 20:58:11 -0500
Subject: ALL SETgit add -A

---
 src/client/util/SelectionManager.ts                     |  5 -----
 src/client/views/collections/CollectionFreeFormView.tsx | 10 +++++-----
 src/client/views/collections/CollectionView.tsx         | 17 -----------------
 src/client/views/nodes/DocumentView.tsx                 |  6 ++----
 4 files changed, 7 insertions(+), 31 deletions(-)

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index d5d9b29b2..c349e7631 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -9,11 +9,6 @@ export namespace SelectionManager {
         @action
         SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
 
-            //remove preview cursor from collection
-            if (doc.props.ContainingCollectionView != undefined) {
-                doc.props.ContainingCollectionView.hidePreviewCursor();
-            }
-
             // if doc is not in SelectedDocuments, add it
             if (!ctrlPressed) {
                 manager.SelectedDocuments = [];
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index c2d2b0f7b..cd88c931b 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -90,7 +90,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
         if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
             //show preview text cursor on tap
             this._previewCursorVisible = true;
-            this.props.CollectionView.showPreviewCursor();
             //select is not already selected
             if (!this.props.isSelected()) {
                 this.props.select(false);
@@ -262,17 +261,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
     getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
     noScaling = () => 1;
 
-    //hides the preview cursor for generating new text boxes - called when other docs are selected/dragged
+    //when focus is lost, this will remove the preview cursor
     @action
-    hidePreviewCursor() {
+    onBlur = (e: React.FocusEvent<HTMLInputElement>): void => {
         this._previewCursorVisible = false;
     }
 
     render() {
 
+        //determines whether preview text cursor should be visible (ie when user taps this collection it should)
         let cursor = null;
-        //toggle for preview cursor -> will be on when user taps freeform
-        if (this._previewCursorVisible && this.props.CollectionView.isFocusOn) {
+        if (this._previewCursorVisible) {
             //get local position and place cursor there!
             let [x, y] = this.getTransform().transformPoint(this._downX, this._downY);
             cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div>
@@ -289,6 +288,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 onContextMenu={(e) => e.preventDefault()}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
+                onBlur={this.onBlur}
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
                 tabIndex={0}
                 ref={this.createDropTarget}>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 6ab0f15c0..11cc6d28e 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -28,8 +28,6 @@ export const COLLECTION_BORDER_WIDTH = 2;
 @observer
 export class CollectionView extends React.Component<CollectionViewProps> {
 
-    private _focusOn: boolean = false;
-
     public static LayoutString(fieldKey: string = "DataKey") {
         return `<CollectionView Document={Document}
                     ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings}
@@ -73,21 +71,6 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         return false
     }
 
-
-
-    @computed
-    get isFocusOn() { return this._focusOn; }
-
-    @action
-    showPreviewCursor() {
-        this._focusOn = true;
-    }
-
-    @action
-    hidePreviewCursor() {
-        this._focusOn = false;
-    }
-
     get collectionViewType(): CollectionViewType {
         let Document = this.props.Document;
         let viewField = Document.GetT(KeyStore.ViewType, NumberField);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a7632b008..6ff75c4dc 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -113,16 +113,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
+
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
             this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-            //remove preview cursor from collection
-            if (this.props.ContainingCollectionView != undefined) {
-                this.props.ContainingCollectionView.hidePreviewCursor();
-            }
+
             this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
-- 
cgit v1.2.3-70-g09d2


From 498f915675c1a7e6a3c3b332a2ecc77222bb4785 Mon Sep 17 00:00:00 2001
From: laurawilsonri <laura_wilson@brown.edu>
Date: Tue, 26 Feb 2019 17:46:27 -0500
Subject: removed a bunch of stuff

---
 build/index.html                                   |  2 -
 package-lock.json                                  | 71 ++++++++++++++++++++++
 package.json                                       |  5 +-
 src/PreviewTextCursor.tsx                          | 15 -----
 src/client/util/SelectionManager.ts                |  1 -
 .../views/collections/CollectionFreeFormView.tsx   |  8 ---
 src/client/views/collections/CollectionView.tsx    |  1 -
 src/client/views/nodes/DocumentView.tsx            |  2 -
 src/client/views/nodes/FormattedTextBox.tsx        | 29 ++-------
 src/fields/KeyStore.ts                             |  3 -
 src/server/database.ts                             | 11 +---
 11 files changed, 81 insertions(+), 67 deletions(-)
 delete mode 100644 src/PreviewTextCursor.tsx

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/build/index.html b/build/index.html
index 5ce31e1ce..fda212af4 100644
--- a/build/index.html
+++ b/build/index.html
@@ -2,8 +2,6 @@
 
 <head>
   <title>Dash Web</title>
-  <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 </head>
 
 <body>
diff --git a/package-lock.json b/package-lock.json
index 761af7f92..fe90f7b96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2137,6 +2137,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "crel": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/crel/-/crel-3.1.0.tgz",
+      "integrity": "sha512-VIGY44ERxx8lXVkOEfcB0A49OkjxkQNK+j+fHvoLy7GsGX1KKgAaQ+p9N0YgvQXu+X+ryUWGDeLx/fSI+w7+eg=="
+    },
     "cross-spawn": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -10004,6 +10009,43 @@
         "prosemirror-transform": "^1.0.0"
       }
     },
+    "prosemirror-dropcursor": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.1.1.tgz",
+      "integrity": "sha512-GeUyMO/tOEf8MXrP7Xb7UIMrfK86OGh0fnyBrHfhav4VjY9cw65mNoqHy87CklE5711AhCP5Qzfp8RL/hVKusg==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-example-setup": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-example-setup/-/prosemirror-example-setup-1.0.1.tgz",
+      "integrity": "sha512-4NKWpdmm75Zzgq/dIrypRnkBNPx+ONKyoGF42a9g3VIVv0TWglf1CBNxt5kzCgli9xdfut/xE5B42F9DR6BLHw==",
+      "requires": {
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-dropcursor": "^1.0.0",
+        "prosemirror-gapcursor": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-inputrules": "^1.0.0",
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-menu": "^1.0.0",
+        "prosemirror-schema-list": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.3.tgz",
+      "integrity": "sha512-X+hJhr42PcHWiSWL+lI5f/UeOhXCxlBFb8M6O8aG1hssmaRrW7sS2/Fjg5jFV+pTdS1REFkmm1occh01FMdDIQ==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
     "prosemirror-history": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.0.3.tgz",
@@ -10014,6 +10056,15 @@
         "rope-sequence": "^1.2.0"
       }
     },
+    "prosemirror-inputrules": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.0.1.tgz",
+      "integrity": "sha512-UHy22NmwxS5WIMQYkzraDttQAF8mpP82FfbJsmKFfx6jwkR/SZa+ZhbkLY0zKQ5fBdJN7euj36JG/B5iAlrpxA==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
     "prosemirror-keymap": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.0.1.tgz",
@@ -10023,6 +10074,17 @@
         "w3c-keyname": "^1.1.8"
       }
     },
+    "prosemirror-menu": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.0.5.tgz",
+      "integrity": "sha512-9Vrn7CC191v7FA4QrAkL8W1SrR73V3CRIYCDuk94R8oFVk4VxSFdoKVLHuvGzxZ8b5LCu3DMJfh86YW9uL4RkQ==",
+      "requires": {
+        "crel": "^3.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
     "prosemirror-model": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.7.0.tgz",
@@ -10039,6 +10101,15 @@
         "prosemirror-model": "^1.0.0"
       }
     },
+    "prosemirror-schema-list": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.0.2.tgz",
+      "integrity": "sha512-IJ4DEpUEymfO+NNA4DAgCMF39XiQqpmCoPYY3SXa1jYcVgObGpGfJlSjZYVFEpimoLI7/mLoOLDhCtpGCRhTfg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
     "prosemirror-state": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.2.2.tgz",
diff --git a/package.json b/package.json
index bd4655816..8568a7bef 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,6 @@
     "express-validator": "^5.3.1",
     "expressjs": "^1.0.1",
     "flexlayout-react": "^0.3.3",
-    "font-awesome": "^4.7.0",
     "golden-layout": "^1.5.9",
     "jsonwebtoken": "^8.4.0",
     "jsx-to-string": "^1.4.0",
@@ -92,6 +91,7 @@
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
     "prosemirror-commands": "^1.0.7",
+    "prosemirror-example-setup": "^1.0.1",
     "prosemirror-history": "^1.0.3",
     "prosemirror-keymap": "^1.0.1",
     "prosemirror-model": "^1.7.0",
@@ -103,7 +103,6 @@
     "react": "^16.5.2",
     "react-dimensions": "^1.3.1",
     "react-dom": "^16.7.0",
-    "react-fontawesome": "^1.6.1",
     "react-golden-layout": "^1.0.6",
     "react-image-lightbox": "^5.1.0",
     "react-jsx-parser": "^1.13.0",
@@ -117,4 +116,4 @@
     "url-loader": "^1.1.2",
     "uuid": "^3.3.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/PreviewTextCursor.tsx b/src/PreviewTextCursor.tsx
deleted file mode 100644
index 6818bf28c..000000000
--- a/src/PreviewTextCursor.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React = require("react");
-import { observer } from "mobx-react";
-
-@observer
-export class PreviewTextCursor extends React.Component {
-
-    render() {
-        return (
-            <div>
-
-            </div>
-        )
-    };
-
-}
\ No newline at end of file
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index c349e7631..1a711ae64 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -8,7 +8,6 @@ export namespace SelectionManager {
 
         @action
         SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
-
             // if doc is not in SelectedDocuments, add it
             if (!ctrlPressed) {
                 manager.SelectedDocuments = [];
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cd88c931b..63ecec0df 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -2,8 +2,6 @@ import { observable, action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { FieldWaiting } from "../../../fields/Field";
-import { Server } from "tls";
-import { RichTextField } from "../../../fields/RichTextField";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
 import { TextField } from "../../../fields/TextField";
@@ -12,7 +10,6 @@ import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionSchemaView } from "../collections/CollectionSchemaView";
-import { CollectionTreeView } from "../collections/CollectionTreeView";
 import { CollectionView } from "../collections/CollectionView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { DocumentView } from "../nodes/DocumentView";
@@ -41,8 +38,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     @observable
     private _previewCursorVisible: boolean = false;
 
-    @computed get colFocus(): boolean { return this.props.CollectionView.isFocusOn() }
-
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
     @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
@@ -165,7 +160,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
     @action
     onKeyDown = (e: React.KeyboardEvent<Element>) => {
-        console.log("KEY PRESSED");
         //if not these keys, make a textbox if preview cursor is active!
         if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
             if (this._previewCursorVisible) {
@@ -174,9 +168,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "new" });
                 //set text to be the typed key and get focus on text box
                 this.props.CollectionView.addDocument(newBox);
-                newBox.SetText(KeyStore.Data, e.key);
                 newBox.SetNumber(KeyStore.SelectOnLoaded, 1);
-
                 //remove cursor from screen
                 this._previewCursorVisible = false;
             }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 11cc6d28e..35ac48177 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -11,7 +11,6 @@ import { CollectionFreeFormView } from "./CollectionFreeFormView";
 import { CollectionDockingView } from "./CollectionDockingView";
 import { CollectionSchemaView } from "./CollectionSchemaView";
 import { CollectionViewProps } from "./CollectionViewBase";
-var ReactDOM = require('react-dom');
 import { CollectionTreeView } from "./CollectionTreeView";
 import { Field } from "../../../fields/Field";
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 9f80c4e3a..50dc9ddc1 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -113,14 +113,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         }
     }
 
-
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
             this._contextMenuCanOpen = false;
             return;
         }
         if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
-
             this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 63d00a310..a92821ed6 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -2,24 +2,22 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
+const { exampleSetup } = require("prosemirror-example-setup")
 import { schema } from "prosemirror-schema-basic";
-import { Transform } from "prosemirror-transform";
-import { EditorState, Transaction } from "prosemirror-state";
+import { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Node } from "prosemirror-model";
 import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field";
 import "./FormattedTextBox.scss";
 import { KeyStore } from "../../../fields/KeyStore";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
-import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-import { observer } from "mobx-react";
-import { Schema, DOMParser } from "prosemirror-model"
 import { Plugin } from 'prosemirror-state'
 import { Decoration, DecorationSet } from 'prosemirror-view'
 
 
+
+
 // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
 //  HTML Markup:  <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
@@ -42,7 +40,6 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
-    private _lastTextState = "";
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -58,24 +55,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
             this._editorView.updateState(state);
             const { doc, fieldKey } = this.props;
             doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
-            this._lastTextState = JSON.stringify(state.toJSON);
         }
     }
 
-    //enables textboxes to be created with preexisting text or placeholder text 
-    //this method is passed in as part of the config the editor state in componentDidMount()
-    placeholderPlugin(text: string) {
-        return new Plugin({
-            props: {
-                decorations(state) {
-                    let doc = state.doc
-                    if (doc.childCount == 1 && doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size == 0)
-                        return DecorationSet.create(doc, [Decoration.widget(1, document.createTextNode(text))])
-                }
-            }
-        })
-    }
-
     componentDidMount() {
         let state: EditorState;
         const { doc, fieldKey } = this.props;
@@ -85,8 +67,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
                 keymap(baseKeymap),
-                //sets the placeholder text to what's in KeyStore.Text!
             ]
+
         };
 
         let field = doc.GetT(fieldKey, RichTextField);
@@ -134,7 +116,6 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
     @action
     onChange(e: React.ChangeEvent<HTMLInputElement>) {
         const { fieldKey, doc } = this.props;
-        this._lastTextState = e.target.value;
         doc.SetData(fieldKey, e.target.value, RichTextField);
     }
     onPointerDown = (e: React.PointerEvent): void => {
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index 6b5fafe05..662574396 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -26,10 +26,7 @@ export namespace KeyStore {
     export const Caption = new Key("Caption");
     export const ActiveFrame = new Key("ActiveFrame");
     export const DocumentText = new Key("DocumentText");
-    //used for setting the text of a text document
-    export const Text = new Key("Text");
     //determines whether doc views will be selected when they are first loaded
-    //should be NumberField where 0 = false and 1 = true
     //currently only implemented for FormattedTextView
     export const SelectOnLoaded = new Key("SelectOnLoaded");
 }
diff --git a/src/server/database.ts b/src/server/database.ts
index dbf335c0a..07c5819ab 100644
--- a/src/server/database.ts
+++ b/src/server/database.ts
@@ -1,6 +1,6 @@
 import { action, configure } from 'mobx';
-import * as mongodb from "mongodb"
-import { ObjectID } from "mongodb"
+import * as mongodb from 'mongodb';
+import { ObjectID } from 'mongodb';
 import { Transferable } from './Message';
 import { Utils } from '../Utils';
 
@@ -8,15 +8,10 @@ export class Database {
     public static Instance = new Database()
     private MongoClient = mongodb.MongoClient;
     private url = 'mongodb://localhost:27017/Dash';
-
     private db?: mongodb.Db;
 
     constructor() {
         this.MongoClient.connect(this.url, (err, client) => {
-            if (err) {
-                console.log(err.message);
-                throw err;
-            }
             this.db = client.db()
         })
     }
@@ -83,4 +78,4 @@ export class Database {
     public print() {
         console.log("db says hi!")
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From f90b7ca17a9f45aa6c47f1d7a37d09af4d44d2ad Mon Sep 17 00:00:00 2001
From: madelinegr <laura_wilson@brown.edu>
Date: Wed, 27 Feb 2019 00:38:39 -0500
Subject: kvp almost done

---
 .../views/collections/CollectionFreeFormView.tsx   |   6 +
 src/client/views/collections/CollectionView.tsx    |   2 +
 src/client/views/nodes/DocumentView.tsx            |  16 +++
 src/client/views/nodes/KeyValuePane.scss           |   0
 src/client/views/nodes/KeyValuePane.tsx            | 124 +++++++++++++++++++++
 5 files changed, 148 insertions(+)
 create mode 100644 src/client/views/nodes/KeyValuePane.scss
 create mode 100644 src/client/views/nodes/KeyValuePane.tsx

(limited to 'src/client/views/collections/CollectionView.tsx')

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 12909c151..ded1e3785 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -163,6 +163,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
         });
     }
 
+    @action
+    addKVP(doc: Document) {
+        let fields = doc.fields;
+        // aefawefwaef
+    }
 
     @computed get backgroundLayout(): string | undefined {
         let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
@@ -241,6 +246,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     {this.backgroundView}
                     {this.views}
                 </div>
+                <!-- put fale stuff here>
                 {this.overlayView}
             </div>
         );
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 03e1f1fa4..2e48bd57a 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -49,6 +49,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
         }
     }
 
+
     @action
     removeDocument = (doc: Document): boolean => {
         //TODO This won't create the field if it doesn't already exist
@@ -60,6 +61,7 @@ export class CollectionView extends React.Component<CollectionViewProps> {
                 break;
             }
         }
+
         if (index !== -1) {
             value.splice(index, 1)
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index feecde921..d6f8bb66c 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -16,10 +16,18 @@ import { WebView } from "./WebView";
 import { ContextMenu } from "../ContextMenu";
 import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
+import { Documents } from "../../documents/Documents"
+import { KeyValuePane } from "../nodes/KeyValuePane"
 import "./DocumentView.scss";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
+/*
+    if containingcollectionview is CollectionFreeformView:
+        (ContainingCollectionView as CollectionFreeformView)?.addKVP
+*/
+
+
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView>;
 
@@ -153,12 +161,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this.props.RemoveDocument(this.props.Document);
         }
     }
+
+    fieldsClicked = (e: React.MouseEvent): void => {
+        if (this.props.ContainingCollectionView) {
+            (this.props.ContainingCollectionView as unknown as CollectionFreeFormView).addKVP(this.props.Document);
+        }
+    }
     fullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
         ContextMenu.Instance.clearItems();
         ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
+
     closeFullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.CloseFullScreen();
         ContextMenu.Instance.clearItems();
@@ -176,6 +191,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         ContextMenu.Instance.clearItems()
         ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({ description: "Fields", event: () => this.fieldsClicked })
         ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
         ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
         ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
diff --git a/src/client/views/nodes/KeyValuePane.scss b/src/client/views/nodes/KeyValuePane.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/KeyValuePane.tsx b/src/client/views/nodes/KeyValuePane.tsx
new file mode 100644
index 000000000..26d5ed9fd
--- /dev/null
+++ b/src/client/views/nodes/KeyValuePane.tsx
@@ -0,0 +1,124 @@
+
+import Lightbox from 'react-image-lightbox';
+import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
+import "./KeyValuePane.scss";
+import React = require("react")
+import { FieldViewProps, FieldView } from './FieldView';
+import { FieldWaiting } from '../../../fields/Field';
+import { observer } from "mobx-react"
+import { observable, action } from 'mobx';
+import { KeyStore } from '../../../fields/KeyStore';
+import { element } from 'prop-types';
+import { props } from 'bluebird';
+
+@observer
+export class KeyValuePane extends React.Component/*<FieldViewProps>*/ {
+
+    public static LayoutString() { return FieldView.LayoutString(KeyValuePane) }
+    //private _ref: React.RefObject<HTMLDivElement>;
+    // private _downX: number = 0;
+    // private _downY: number = 0;
+    // private _lastTap: number = 0;
+    // @observable private _photoIndex: number = 0;
+    // @observable private _isOpen: boolean = false;
+
+    constructor() {
+        super(props);
+    }
+    // constructor(props: FieldViewProps) {
+    //     super(props);
+
+    //     //     this._ref = React.createRef();
+    //     //     this._imgRef = React.createRef();
+    //     //     this.state = {
+    //     //         photoIndex: 0,
+    //     //         isOpen: false,
+    //     //     };
+    // }
+
+    // @action
+    // onLoad = (target: any) => {
+    //     var h = this._imgRef.current!.naturalHeight;
+    //     var w = this._imgRef.current!.naturalWidth;
+    //     this.props.doc.SetNumber(KeyStore.NativeHeight, this.props.doc.GetNumber(KeyStore.NativeWidth, 0) * h / w)
+    // }
+
+    // componentDidMount() {
+    // }
+
+    // componentWillUnmount() {
+    // }
+
+    // onPointerDown = (e: React.PointerEvent): void => {
+    //     if (Date.now() - this._lastTap < 300) {
+    //         if (e.buttons === 1 && this.props.isSelected()) {
+    //             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();
+    //     }
+    // }
+    // @action
+    // 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._isOpen = true;
+    //     }
+    //     e.stopPropagation();
+    // }
+
+    // lightbox = (path: string) => {
+    //     const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
+    //     if (this._isOpen && this.props.isSelected()) {
+    //         return (<Lightbox
+    //             mainSrc={images[this._photoIndex]}
+    //             nextSrc={images[(this._photoIndex + 1) % images.length]}
+    //             prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
+    //             onCloseRequest={action(() =>
+    //                 this._isOpen = false
+    //             )}
+    //             onMovePrevRequest={action(() =>
+    //                 this._photoIndex = (this._photoIndex + images.length - 1) % images.length
+    //             )}
+    //             onMoveNextRequest={action(() =>
+    //                 this._photoIndex = (this._photoIndex + 1) % images.length
+    //             )}
+    //         />)
+    //     }
+    // }
+
+    render() {
+        //     let field = this.props.doc.Get(this.props.fieldKey);
+        //     let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+        //         field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        //     let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
+        //     return (
+        //         <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+        //             <img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
+        //             {this.lightbox(path)}
+        //         </div>)
+        console.log("bleh");
+        return (<table>
+            <tr>
+                <th>Key</th>
+                <th>Fields</th>
+            </tr>
+            <tr>
+                <td>Jill</td>
+                <td>Smith</td>
+            </tr>
+            <tr>
+                <td>Eve</td>
+                <td>Jackson</td>
+            </tr>
+            <tr>
+                <td>John</td>
+                <td>Doe</td>
+            </tr>
+        </table>)
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2