3 files changed, 85 insertions, 5 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..9bafbda44 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -2,7 +2,7 @@
     position: absolute;
     display: grid;
     z-index: 1000;
-    grid-template-rows: 20px 1fr 20px;
+    grid-template-rows: 20px 20px 1fr 20px;
     grid-template-columns: 20px 1fr 20px;
     pointer-events: none;
     #documentDecorations-centerCont {
@@ -29,4 +29,10 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
+    .title{
+        background: lightblue;
+        grid-column-start:1;
+        grid-column-end: 4;
+        pointer-events: auto;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 9fd73a33b..0a126de1f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -3,20 +3,51 @@ import React = require("react");
 import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
+<<<<<<< HEAD
+import { CollectionFreeFormView } from "./collections/CollectionFreeFormView";
+import ContentEditable from 'react-contenteditable'
+import { KeyStore } from '../../fields/Key'
+=======
 import { KeyStore } from '../../fields/KeyStore'
 import { NumberField } from "../../fields/NumberField";
+>>>>>>> 96eede5f7d1706a3f7ac6ee02a85bb3da217f467
 
 @observer
-export class DocumentDecorations extends React.Component {
+export class DocumentDecorations extends React.Component<{}, { value: string }> {
     static Instance: DocumentDecorations
     private _resizer = ""
     private _isPointerDown = false;
+<<<<<<< HEAD
+    @observable private _opacity = 1;
+    private keyinput: React.RefObject<HTMLInputElement>;
+=======
     @observable private _hidden = false;
+>>>>>>> 96eede5f7d1706a3f7ac6ee02a85bb3da217f467
 
     constructor(props: Readonly<{}>) {
         super(props)
-
         DocumentDecorations.Instance = this
+        this.state = { value: document.title };
+        this.handleChange = this.handleChange.bind(this);
+        this.keyinput = React.createRef();
+    }
+
+    handleChange(event: any) {
+        this.setState({ value: event.target.value });
+        console.log("Input box has changed")
+    };
+
+    enterPressed(e: any) {
+        var key = e.keyCode || e.which;
+        // enter pressed
+        if (key == 13) {
+            var text = e.target.value;
+            if (text[0] == '#') {
+                console.log("hashtag");
+                // TODO: Change field with switch statement
+            }
+            e.target.blur();
+        }
     }
 
     @computed
@@ -44,6 +75,7 @@ export class DocumentDecorations extends React.Component {
         e.stopPropagation();
         if (e.button === 0) {
             this._isPointerDown = true;
+            console.log("Pointer down");
             this._resizer = e.currentTarget.id;
             document.removeEventListener("pointermove", this.onPointerMove);
             document.addEventListener("pointermove", this.onPointerMove);
@@ -149,11 +181,18 @@ export class DocumentDecorations extends React.Component {
         }
         return (
             <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + 40) + "px",
-                height: (bounds.b - bounds.y + 40) + "px",
+                width: (bounds.r - bounds.x + 20 + 20) + "px",
+                height: (bounds.b - bounds.y + 40 + 20) + "px",
                 left: bounds.x - 20,
+<<<<<<< HEAD
+                top: bounds.y - 20 - 20,
+                opacity: this.opacity
+=======
                 top: bounds.y - 20,
+>>>>>>> 96eede5f7d1706a3f7ac6ee02a85bb3da217f467
             }}>
+                <input ref={this.keyinput} className="title" type="text" name="dynbox" value={this.state.value} onChange={this.handleChange} onPointerDown={this.onPointerDown} onKeyPress={this.enterPressed} />
+                {/* <div className="title" onPointerDown={this.onPointerDown}>{document.title}</div> */}
                 <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index c9bdc24c2..4a3710e74 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -30,6 +30,40 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 }), true)
 
 
+<<<<<<< HEAD
+//runInAction(() => 
+{
+    let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 });
+    let doc2 = doc1.MakeDelegate();
+    doc2.Set(KS.X, new NumberField(150));
+    doc2.Set(KS.Y, new NumberField(500));
+    let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
+        x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386
+    });
+    //doc3.Set(KeyStore.Data, new ImageField);
+    const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", {
+        x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386
+    }));
+    schemaDocs.push(doc3);
+    schemaDocs[0].SetData(KS.Author, "Tyler", TextField);
+    schemaDocs[4].SetData(KS.Author, "Bob", TextField);
+    schemaDocs.push(doc2);
+    const doc7 = Documents.SchemaDocument(schemaDocs)
+    const docset = [doc1, doc2, doc3, doc7];
+    let doc4 = Documents.CollectionDocument(docset, {
+        x: 0, y: 400, title: "mini collection"
+    });
+    // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+    //     x: 650, y: 500, width: 600, height: 600, title: "cat 2"
+    // });
+    let docset2 = [doc3, doc4, doc2];
+    let doc6 = Documents.CollectionDocument(docset2, {
+        x: 350, y: 100, width: 600, height: 600, title: "docking collection"
+    });
+    let mainNodes = null;// mainContainer.GetFieldT(KeyStore.Data, ListField);
+    if (!mainNodes) {
+        mainNodes = new ListField<Document>();
+=======
 const mainDocId = "mainDoc";
 let mainContainer: Document;
 let mainfreeform: Document;
@@ -49,6 +83,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             mainContainer.SetText(KeyStore.Data, JSON.stringify(dockingLayout));
             mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
         }, 0);
+>>>>>>> 96eede5f7d1706a3f7ac6ee02a85bb3da217f467
     }
 
     let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";