checkpoint

10 files changed, 69 insertions, 76 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index de4a1de5d..2b805071f 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -80,7 +80,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 
 ReactDOM.render((
     <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} />
+        <DocumentView Document={mainContainer} ContainingCollectionView={undefined} DocumentView={undefined} Data={mainContainer.GetField(KeyStore.Data)} />
         <DocumentDecorations />
         <ContextMenu />
     </div>),
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index b69b79dd3..869e9ab90 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -21,6 +21,9 @@ interface DocumentOptions {
 
 export namespace Documents {
     function setupOptions(doc: Document, options: DocumentOptions): void {
+        if (options.title) {
+            doc.SetField(KeyStore.Title, new TextField(options.title));
+        }
         if (options.x) {
             doc.SetFieldValue(KeyStore.X, options.x, NumberField);
         }
@@ -33,9 +36,6 @@ export namespace Documents {
         if (options.height) {
             doc.SetFieldValue(KeyStore.Height, options.height, NumberField);
         }
-        if (options.title) {
-            doc.SetFieldValue(KeyStore.Title, options.title, TextField);
-        }
         doc.SetFieldValue(KeyStore.Scale, 1, NumberField);
         doc.SetFieldValue(KeyStore.PanX, 0, NumberField);
         doc.SetFieldValue(KeyStore.PanY, 0, NumberField);
@@ -110,13 +110,14 @@ export namespace Documents {
     function GetImagePrototype(): Document {
         if (!imageProto) {
             imageProto = new Document();
-            imageProto.SetField(KeyStore.X, new NumberField(0));
-            imageProto.SetField(KeyStore.Y, new NumberField(0));
-            imageProto.SetField(KeyStore.Width, new NumberField(300));
-            imageProto.SetField(KeyStore.Height, new NumberField(300));
-            imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString()));
+            imageProto.SetFieldValue(KeyStore.Title, "IMAGE PROTO", TextField);
+            imageProto.SetFieldValue(KeyStore.X, 0, NumberField);
+            imageProto.SetFieldValue(KeyStore.Y, 0, NumberField);
+            imageProto.SetFieldValue(KeyStore.Width, 300, NumberField);
+            imageProto.SetFieldValue(KeyStore.Height, 300, NumberField);
+            imageProto.SetFieldValue(KeyStore.Layout, ImageBox.LayoutString(), TextField);
             // imageProto.SetField(KeyStore.Layout, new TextField('<div style={"background-image: " + {Data}} />'));
-            imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data]));
+            imageProto.SetFieldValue(KeyStore.LayoutKeys, [KeyStore.Data], ListField);
         }
         return imageProto;
     }
@@ -124,7 +125,7 @@ export namespace Documents {
     export function ImageDocument(url: string, options: DocumentOptions = {}): Document {
         let doc = GetImagePrototype().MakeDelegate();
         setupOptions(doc, options);
-        doc.SetField(KeyStore.Data, new ImageField(new URL(url)));
+        doc.SetFieldValue(KeyStore.Data, new URL(url), ImageField);
         return doc;
     }
 
diff --git a/src/fields/Document.ts b/src/fields/Document.ts
index 0356959a5..5e9c3a707 100644
--- a/src/fields/Document.ts
+++ b/src/fields/Document.ts
@@ -21,42 +21,34 @@ export class Document extends Field {
     }
 
     @observable
+    GetFieldFromServerDeferred(key: Key) {
+        var me = this;
+        setTimeout(function () {
+            if (me) {
+                me.DeferredSetField(key);
+            }
+        }, key == KeyStore.Data ? 5000 : key == KeyStore.X ? 2500 : 500)
+    }
+
+    @observable
     GetField(key: Key, ignoreProto: boolean = false): Opt<Field> {
-        if (KeyStore.X == key) {
-            console.log("");
-        }
-        let field: Opt<Field>;
+        let field: Opt<Field> = WAITING;
         if (ignoreProto) {
             if (this.fields.has(key)) {
-                if (KeyStore.X == key) {
-                    console.log("");
-                }
                 field = this.fields.get(key);
             } else {
-                field = WAITING;
-                var me = this;
-                setTimeout(function () {
-                    me.DeferredSetField(key);
-                }, 100)
+                this.GetFieldFromServerDeferred(key); // bcz: only want to do this if the field is on the server
             }
         } else {
             let doc: Opt<Document> = this;
             while (doc && doc != WAITING) {
-                if (!(doc.fields.has(key))) {
-                    var me = this;
-                    setTimeout(function () {
-                        me.DeferredSetField(key);
-                    }, 1000)
+                if (!doc.fields.has(key)) {
+                    doc.GetFieldFromServerDeferred(key); // bcz: only want to do this if the field is on the server
                     doc = doc.GetPrototype();
-                } else
+                } else {
+                    field = doc.fields.get(key);
                     break;
-            }
-
-            if (doc && doc != WAITING) {
-                if (KeyStore.X == key) {
-                    console.log("");
                 }
-                field = doc.fields.get(key);
             }
         }
 
@@ -67,7 +59,7 @@ export class Document extends Field {
     GetFieldT<T extends Field = Field>(key: Key, ctor: { new(...args: any[]): T }, ignoreProto: boolean = false): Opt<T> {
         var getfield = this.GetField(key, ignoreProto);
         if (getfield != WAITING) {
-            return Cast(this.GetField(key, ignoreProto), ctor);
+            return Cast(getfield, ctor);
         }
         return WAITING;
     }
@@ -105,49 +97,45 @@ export class Document extends Field {
         return this.GetFieldValue<T[], ListField<T>>(key, ListField, defaultVal)
     }
 
+    @action
     SetField(key: Key, field: Field | undefined): void {
         if (field) {
-            if (KeyStore.X == key) {
-                console.log("");
-            }
             this.fields.set(key, field);
         } else {
             this.fields.delete(key);
         }
     }
 
+    @action
     SetFieldValue<T extends Field>(key: Key, value: any, ctor: { new(): T }): boolean {
-        if (KeyStore.X == key) {
-            console.log("");
-        }
         let field = new ctor();
         if (field.TrySetValue(value)) {
             this._sfields.set(key, field);
             return true;
-        } else {
-            return false;
         }
+        return false;
 
         // let field = this.GetField(key, true);
-        // if (field == WAITING)
-        //     return true;
-        // if (field != null) {
-        //     return field.TrySetValue(value);
-        // } else {
-        //     field = new ctor();
-        //     if (field.TrySetValue(value)) {
-        //         this.SetField(key, field);
-        //         return true;
+        // if (field != WAITING) {
+        //     if (field) {
+        //         return field.TrySetValue(value);
         //     } else {
-        //         return false;
+        //         field = new ctor();
+        //         if (field.TrySetValue(value)) {
+        //             this.SetField(key, field);
+        //             return true;
+        //         } 
         //     }
         // }
+        // return false;
     }
 
+    @observable
     GetPrototype(): Opt<Document> {
         return this.GetFieldT(KeyStore.Prototype, Document, true);
     }
 
+    @observable
     GetAllPrototypes(): Document[] {
         let protos: Document[] = [];
         let doc: Opt<Document> = this;
diff --git a/src/fields/ImageField.ts b/src/fields/ImageField.ts
index 9bfacf231..bc2e7cdf4 100644
--- a/src/fields/ImageField.ts
+++ b/src/fields/ImageField.ts
@@ -2,8 +2,8 @@ import { BasicField } from "./BasicField";
 import { Field } from "./Field";
 
 export class ImageField extends BasicField<URL> {
-    constructor(data: URL) {
-        super(data);
+    constructor(data: URL | undefined = undefined) {
+        super(data == undefined ? new URL("http://cs.brown.edu/~bcz/face.gif") : data);
     }
 
     toString(): string {
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 51e2cfbbc..adb885859 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -99,7 +99,8 @@ export class CollectionDockingView extends CollectionViewBase {
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
         for (var i: number = 0; i < value.length; i++) {
             if (value[i].Id === component) {
-                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} />);
+                var data = value[i].GetField(KeyStore.Data);
+                return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} DocumentView={undefined} Data={data} />);
             }
         }
         if (component === "text") {
@@ -239,8 +240,9 @@ export class CollectionDockingView extends CollectionViewBase {
             var containingDiv = "component_" + me.nextId();
             container.getElement().html("<div id='" + containingDiv + "'></div>");
             setTimeout(function () {
+                var data = state.doc.GetField(KeyStore.Data);
                 ReactDOM.render((
-                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} />
+                    <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} DocumentView={undefined} Data={data} />
                 ),
                     document.getElementById(containingDiv)
                 );
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 2c10c8056..ad470f9e2 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -189,6 +189,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         const panx: number = Document.GetNumberField(KeyStore.PanX, 0);
         const pany: number = Document.GetNumberField(KeyStore.PanY, 0);
         const currScale: number = Document.GetNumberField(KeyStore.Scale, 1);
+        const data = Document.GetField(KeyStore.Data);
 
         return (
             <div className="border" style={{
@@ -205,7 +206,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
 
                         <div className="node-container" ref={this._nodeContainerRef}>
                             {value.map(doc => {
-                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />);
+                                return (<CollectionFreeFormDocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} Data={data} />);
                             })}
                         </div>
                     </div>
diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx
index 8503aaf1e..bde727fea 100644
--- a/src/views/collections/CollectionSchemaView.tsx
+++ b/src/views/collections/CollectionSchemaView.tsx
@@ -74,7 +74,8 @@ export class CollectionSchemaView extends CollectionViewBase {
             [KS.Title, KS.Data, KS.Author])
         let content;
         if (this.selectedIndex != -1) {
-            content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
+            var data = this.props.DocumentForCollection.GetField(KS.Data);
+            content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} Data={data} />)
         } else {
             content = <div />
         }
diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
index 08068b384..9f13733c9 100644
--- a/src/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -11,6 +11,7 @@ import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import { WAITING } from "../../fields/Field";
+import { ImageField } from '../../fields/ImageField';
 
 
 @observer
@@ -206,6 +207,8 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     render() {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+        let data = this.props.Document.GetFieldT(KeyStore.Data, ImageField);
+        console.log("CollectionFFDocView " + this.props.Document.Title + "<" + data + "> x=" + this.x);
         return (
             <div className="node" ref={this._mainCont} style={{
                 transform: freestyling ? this.transform : "",
@@ -217,7 +220,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
 
-                <DocumentView {...this.props} DocumentView={this} />
+                <DocumentView {...this.props} DocumentView={this} Data={data} />
             </div>
         );
     }
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 334ea1cb2..94fe0440f 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -21,6 +21,7 @@ export interface DocumentViewProps {
     Document: Document;
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
+    Data: any;
 }
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
@@ -131,15 +132,15 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         let bindings = { ...this.props } as any;
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
+            let val = this.props.Document.GetField(key);
         }
         if (bindings.DocumentView === undefined)
             bindings.DocumentView = this;
         for (const key of this.layoutFields) {
             let field = doc.GetField(key);
-            if (field && field != WAITING) {
-                bindings[key.Name] = field.GetValue();
-            }
+            bindings[key.Name] = field && field != WAITING ? field.GetValue() : field;
         }
+        console.log("DocumentView Rendering " + doc.Title + " data = " + this.props.Data);
         return (
             <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
                 <JsxParser
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 65a3b7437..fa55c6811 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -8,6 +8,7 @@ import { ImageField } from '../../fields/ImageField';
 import { FieldViewProps, FieldView } from './FieldView';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
 import { WAITING } from '../../fields/Field';
+import { Key, KeyStore } from '../../fields/Key';
 
 interface ImageBoxState {
     photoIndex: number,
@@ -61,22 +62,17 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
 
     render() {
         let field = this.props.doc.GetFieldT(this.props.fieldKey, ImageField);
-        let path = "";
-        if (field) {
-            if (field === WAITING) {
-                path = "https://image.flaticon.com/icons/svg/66/66163.svg"
-            } else {
-                path = field.Data.href;
-            }
-        }
-        const images = [path,];
+        let path = field == WAITING ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
+            field instanceof ImageField ? field.Data.href : "";
+        console.log("ImageBox Rendering " + this.props.doc.Title);
         var lightbox = () => {
+            const images = [path, "http://www.cs.brown.edu/~bcz/face.gif"];
             const { photoIndex } = this.state;
             if (this.state.isOpen && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
                 return (<Lightbox
                     mainSrc={images[photoIndex]}
-                    nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}
-                    prevSrc={photoIndex - 1 > 0 ? images[(photoIndex + images.length - 1) % images.length] : undefined}
+                    nextSrc={images[(photoIndex + 1) % images.length]}
+                    prevSrc={images[(photoIndex + images.length - 1) % images.length]}
                     onCloseRequest={() => this.setState({ isOpen: false })}
                     onMovePrevRequest={() =>
                         this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, })
@@ -89,7 +85,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
         }
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={images[0]} width="100%" alt="Image not found" />
+                <img src={path} width="100%" alt="Image not found" />
                 {lightbox()}
             </div>)
     }