key commands work

2 files changed, 35 insertions, 44 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7bddc298e..3b2cd2626 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,11 +1,14 @@
-import { observable, computed } from "mobx";
+import { observable, computed, action } from "mobx";
 import React = require("react");
 import { SelectionManager } from "../util/SelectionManager";
 import { observer } from "mobx-react";
 import './DocumentDecorations.scss'
 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";
+import { Document } from "../../fields/Document";
+import { DocumentView } from "./nodes/DocumentView";
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -14,6 +17,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     private _isPointerDown = false;
     @observable private _opacity = 1;
     private keyinput: React.RefObject<HTMLInputElement>;
+    @observable private _documents: DocumentView[] = [];
+    //@observable private _title: string = this._documents[0].props.Document.Title;
+    @observable private _title: string = document.title;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -23,26 +29,42 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
         this.keyinput = React.createRef();
     }
 
-    handleChange(event: any) {
-        this.setState({ value: event.target.value });
-        console.log("Input box has changed")
+    @action
+    handleChange = (event: any) => {
+        //this.setState({ value: event.target.value });
+        this._title = event.target.value;
+        console.log("Input box has changed");
     };
 
-    enterPressed(e: any) {
+    @action
+    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");
+                let command = text.slice(1, text.length);
+                if (command == "Title" || command == "title") {
+                    this._title = this._documents[0].props.Document.Title;
+                }
+                else if (command == "Width" || command == "width") {
+                    this._title = this._documents[0].props.Document.GetNumber(KeyStore.Width, 0).toString();
+                }
+                else {
+                    this._title = "undefined key";
+                }
                 // TODO: Change field with switch statement
             }
+            else {
+                this._title = document.title;
+            }
             e.target.blur();
         }
     }
 
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
+        this._documents = SelectionManager.SelectedDocuments();
         return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
             if (documentView.props.isTopMost) {
                 return bounds;
@@ -61,6 +83,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
     @computed
     public get Hidden() { return this._hidden; }
     public set Hidden(value: boolean) { this._hidden = value; }
+    private _hidden: boolean = false;
 
     onPointerDown = (e: React.PointerEvent): void => {
         e.stopPropagation();
@@ -178,8 +201,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 top: bounds.y - 20 - 20,
                 opacity: this._opacity
             }}>
-                <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> */}
+                <input ref={this.keyinput} className="title" type="text" name="dynbox" value={this._title} onChange={this.handleChange} onPointerDown={this.onPointerDown} onKeyPress={this.enterPressed} />
                 <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 4a3710e74..6e5b84075 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -18,6 +18,9 @@ import { DocumentDecorations } from './DocumentDecorations';
 import { DocumentView } from './nodes/DocumentView';
 import "./Main.scss";
 import { InkingControl } from './InkingControl';
+import { NumberField } from '../../fields/NumberField';
+import { TextField } from '../../fields/TextField';
+import { ListField } from '../../fields/ListField';
 
 
 configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
@@ -30,40 +33,6 @@ 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;
@@ -83,7 +52,6 @@ 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";
@@ -141,3 +109,4 @@ Documents.initProtos(mainDocId, (res?: Document) => {
         </div>),
         document.getElementById('root'));
 })
+