Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into scripting

6 files changed, 283 insertions, 268 deletions

diff --git a/src/views/nodes/CollectionFreeFormDocumentView.tsx b/src/views/nodes/CollectionFreeFormDocumentView.tsx
new file mode 100644
index 000000000..ebe6d411c
--- /dev/null
+++ b/src/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -0,0 +1,222 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Key, KeyStore } from "../../fields/Key";
+import { NumberField } from "../../fields/NumberField";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
+import { ContextMenu } from "../ContextMenu";
+import "./NodeView.scss";
+import React = require("react");
+import { DocumentView, DocumentViewProps } from "./DocumentView";
+
+
+@observer
+export class CollectionFreeFormDocumentView extends DocumentView {
+    private _contextMenuCanOpen = false;
+    private _downX: number = 0;
+    private _downY: number = 0;
+
+    constructor(props: DocumentViewProps) {
+        super(props);
+    }
+    get screenRect(): ClientRect | DOMRect {
+        if (this._mainCont.current) {
+            return this._mainCont.current.getBoundingClientRect();
+        }
+        return new DOMRect();
+    }
+
+    @computed
+    get x(): number {
+        return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+    }
+
+    @computed
+    get y(): number {
+        return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+    }
+
+    set x(x: number) {
+        this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
+    }
+
+    set y(y: number) {
+        this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
+    }
+
+    @computed
+    get transform(): string {
+        return `translate(${this.x}px, ${this.y}px)`;
+    }
+
+    @computed
+    get width(): number {
+        return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+    }
+
+    set width(w: number) {
+        this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
+    }
+
+    @computed
+    get height(): number {
+        return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
+    }
+
+    set height(h: number) {
+        this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
+    }
+
+    @computed
+    get zIndex(): number {
+        return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
+    }
+
+    set zIndex(h: number) {
+        this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
+    }
+
+    @action
+    dragComplete = (e: DragManager.DragCompleteEvent) => {
+    }
+
+    @computed
+    get active(): boolean {
+        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
+    }
+
+    @computed
+    get topMost(): boolean {
+        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
+    }
+
+    onPointerDown = (e: React.PointerEvent): void => {
+        this._downX = e.clientX;
+        this._downY = e.clientY;
+        var me = this;
+        if (e.shiftKey && e.buttons === 1) {
+            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+            e.stopPropagation();
+            return;
+        }
+        this._contextMenuCanOpen = e.button == 2;
+        if (this.active && !e.isDefaultPrevented()) {
+            e.stopPropagation();
+            if (e.buttons === 2) {
+                e.preventDefault();
+            }
+            document.removeEventListener("pointermove", this.onPointerMove)
+            document.addEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp)
+            document.addEventListener("pointerup", this.onPointerUp);
+        }
+    }
+
+    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;
+                const rect = this.screenRect;
+                let dragData: { [id: string]: any } = {};
+                dragData["document"] = this;
+                dragData["xOffset"] = e.x - rect.left;
+                dragData["yOffset"] = e.y - rect.top;
+                DragManager.StartDrag(this._mainCont.current, dragData, {
+                    handlers: {
+                        dragComplete: this.dragComplete,
+                    },
+                    hideSource: true
+                })
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    onPointerUp = (e: PointerEvent): void => {
+        document.removeEventListener("pointermove", this.onPointerMove)
+        document.removeEventListener("pointerup", this.onPointerUp)
+        e.stopPropagation();
+        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    openRight = (e: React.MouseEvent): void => {
+        CollectionDockingView.AddRightSplit(this.props.Document);
+    }
+
+    deleteClicked = (e: React.MouseEvent): void => {
+        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+            this.props.ContainingCollectionView.removeDocument(this.props.Document)
+        }
+    }
+    @action
+    fullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.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)
+    }
+    @action
+    closeFullScreenClicked = (e: React.MouseEvent): void => {
+        CollectionDockingView.CloseFullScreen();
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+    }
+
+    @action
+    onContextMenu = (e: React.MouseEvent): void => {
+        if (!SelectionManager.IsSelected(this)) {
+            return;
+        }
+        e.preventDefault()
+
+        if (!this._contextMenuCanOpen) {
+            return;
+        }
+
+        if (this.topMost) {
+            ContextMenu.Instance.clearItems()
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+        }
+        else {
+            // DocumentViews should stop propogation of this event
+            e.stopPropagation();
+
+            ContextMenu.Instance.clearItems();
+            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
+            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
+            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
+            SelectionManager.SelectDoc(this, e.ctrlKey);
+        }
+    }
+
+    render() {
+        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
+        return (
+            <div className="node" ref={this._mainCont} style={{
+                transform: freestyling ? this.transform : "",
+                width: freestyling ? this.width : "100%",
+                height: freestyling ? this.height : "100%",
+                position: freestyling ? "absolute" : "relative",
+                zIndex: freestyling ? this.zIndex : 0,
+            }}
+                onContextMenu={this.onContextMenu}
+                onPointerDown={this.onPointerDown}>
+
+                <DocumentView {...this.props} DocumentView={this} />
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index dd47d4455..a1262e2ba 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,29 +6,29 @@ import { Key, KeyStore } from "../../fields/Key";
 import { ListField } from "../../fields/ListField";
 import { NumberField } from "../../fields/NumberField";
 import { TextField } from "../../fields/TextField";
-import { CollectionSchemaView } from "../collections/CollectionSchemaView"
-import "./NodeView.scss"
-import { DragManager } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
 import { Utils } from "../../Utils";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionFreeFormView } from "../collections/CollectionFreeFormView";
-import { ContextMenu } from "../ContextMenu";
-import { FieldTextBox } from "../nodes/FieldTextBox";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
-interface DocumentViewProps {
+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>;
-    ContainingDocumentView: Opt<DocumentView>;
 }
 @observer
-export class DocumentContents extends React.Component<DocumentViewProps> {
+export class DocumentView extends React.Component<DocumentViewProps> {
 
+    protected _mainCont = React.createRef<any>();
+    get MainContent() {
+        return this._mainCont;
+    }
     @computed
     get layout(): string {
         return this.props.Document.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
@@ -43,124 +43,15 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
     get layoutFields(): Key[] {
         return this.props.Document.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
-    render() {
-        let doc = this.props.Document;
-        let bindings = { ...this.props } as any;
-        for (const key of this.layoutKeys) {
-            bindings[key.Name + "Key"] = key;
-        }
-        for (const key of this.layoutFields) {
-            let field = doc.GetField(key);
-            if (field) {
-                bindings[key.Name] = field.GetValue();
-            }
-        }
-        return (
-            <JsxParser
-                components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
-                bindings={bindings}
-                jsx={this.layout}
-                showWarnings={true}
-                onError={(test: any) => { console.log(test) }}
-            />
-        )
-    }
-}
-
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-    private _mainCont = React.createRef<HTMLDivElement>();
-    private _contextMenuCanOpen = false;
-    private _downX: number = 0;
-    private _downY: number = 0;
-
-    constructor(props: DocumentViewProps) {
-        super(props);
-    }
-    get screenRect(): ClientRect | DOMRect {
-        if (this._mainCont.current) {
-            return this._mainCont.current.getBoundingClientRect();
-        }
-        return new DOMRect();
-    }
-
-    get MainContent() {
-        return this._mainCont;
-    }
-
-    @computed
-    get x(): number {
-        return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-    }
-
-    @computed
-    get y(): number {
-        return this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
-    }
-
-    set x(x: number) {
-        this.props.Document.SetFieldValue(KeyStore.X, x, NumberField)
-    }
-
-    set y(y: number) {
-        this.props.Document.SetFieldValue(KeyStore.Y, y, NumberField)
-    }
-
-    @computed
-    get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
-    }
-
-    @computed
-    get width(): number {
-        return this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
-    }
-
-    set width(w: number) {
-        this.props.Document.SetFieldValue(KeyStore.Width, w, NumberField)
-    }
-
-    @computed
-    get height(): number {
-        return this.props.Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
-    }
-
-    set height(h: number) {
-        this.props.Document.SetFieldValue(KeyStore.Height, h, NumberField)
-    }
-
-    @computed
-    get zIndex(): number {
-        return this.props.Document.GetFieldValue(KeyStore.ZIndex, NumberField, Number(0));
-    }
-
-    set zIndex(h: number) {
-        this.props.Document.SetFieldValue(KeyStore.ZIndex, h, NumberField)
-    }
-
-    @action
-    dragComplete = (e: DragManager.DragCompleteEvent) => {
-    }
-
-    @computed
-    get active(): boolean {
-        return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
-    }
-
-    @computed
-    get topMost(): boolean {
-        return this.props.ContainingCollectionView == undefined || this.props.ContainingCollectionView instanceof CollectionDockingView;
-    }
-
 
     // 
     // returns the cumulative scaling between the document and the screen
     //
     @computed
     public get ScalingToScreenSpace(): number {
-        if (this.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
-            return this.props.ContainingDocumentView.ScalingToScreenSpace * ss;
+        if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
+            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
         }
         return 1;
     }
@@ -171,8 +62,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public TransformToLocalPoint(screenX: number, screenY: number) {
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
-        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingDocumentView != undefined ?
-            this.props.ContainingDocumentView!.TransformToLocalPoint(screenX, screenY) :
+        let { LocalX: parentX, LocalY: parentY } = this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
+            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
         let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
@@ -183,7 +74,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // They also ignore any transformation that may have been applied to their content document.
         // NOTE: this currently assumes CollectionDockingViews aren't nested.
         if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
             Xx = rx - COLLECTION_BORDER_WIDTH;
             Yy = ry - COLLECTION_BORDER_WIDTH;
         }
@@ -208,7 +99,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // They also ignore any transformation that may have been applied to their content document.
         // NOTE: this currently assumes CollectionDockingViews aren't nested.
         if (this.props.ContainingCollectionView instanceof CollectionDockingView) {
-            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this._mainCont.current!);
+            var { translateX: rx, translateY: ry } = Utils.GetScreenTransform(this.MainContent.current!);
             Xx = rx - COLLECTION_BORDER_WIDTH;
             Yy = ry - COLLECTION_BORDER_WIDTH;
         }
@@ -220,7 +111,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
         // if this collection view is nested within another collection view, then 
         // first transform the local point into the parent collection's coordinate space.
-        let containingDocView = this.props.ContainingDocumentView;
+        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
         if (containingDocView != undefined) {
             let ss = containingDocView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
             let panxx = containingDocView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
@@ -232,130 +123,31 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return { ScreenX: parentX, ScreenY: parentY };
     }
 
-    onPointerDown = (e: React.PointerEvent): void => {
-        this._downX = e.clientX;
-        this._downY = e.clientY;
-        var me = this;
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
-            e.stopPropagation();
-            return;
-        }
-        this._contextMenuCanOpen = e.button == 2;
-        if (this.active && !e.isDefaultPrevented()) {
-            e.stopPropagation();
-            if (e.buttons === 2) {
-                e.preventDefault();
-            }
-            document.removeEventListener("pointermove", this.onPointerMove)
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp)
-            document.addEventListener("pointerup", this.onPointerUp);
-        }
-    }
 
-    onPointerMove = (e: PointerEvent): void => {
-        if (e.cancelBubble) {
-            this._contextMenuCanOpen = false;
-            return;
+    render() {
+        let doc = this.props.Document;
+        let bindings = { ...this.props } as any;
+        for (const key of this.layoutKeys) {
+            bindings[key.Name + "Key"] = key;
         }
-        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;
-                const rect = this.screenRect;
-                let dragData: { [id: string]: any } = {};
-                dragData["document"] = this;
-                dragData["xOffset"] = e.x - rect.left;
-                dragData["yOffset"] = e.y - rect.top;
-                DragManager.StartDrag(this._mainCont.current, dragData, {
-                    handlers: {
-                        dragComplete: this.dragComplete,
-                    },
-                    hideSource: true
-                })
+        if (bindings.DocumentView === undefined)
+            bindings.DocumentView = this;
+        for (const key of this.layoutFields) {
+            let field = doc.GetField(key);
+            if (field) {
+                bindings[key.Name] = field.GetValue();
             }
         }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    onPointerUp = (e: PointerEvent): void => {
-        document.removeEventListener("pointermove", this.onPointerMove)
-        document.removeEventListener("pointerup", this.onPointerUp)
-        e.stopPropagation();
-        if (Math.abs(e.clientX - this._downX) < 4 && Math.abs(e.clientY - this._downY) < 4) {
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    openRight = (e: React.MouseEvent): void => {
-        CollectionDockingView.AddRightSplit(this.props.Document);
-    }
-
-    deleteClicked = (e: React.MouseEvent): void => {
-        if (this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
-            this.props.ContainingCollectionView.removeDocument(this.props.Document)
-        }
-    }
-    @action
-    fullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.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)
-    }
-    @action
-    closeFullScreenClicked = (e: React.MouseEvent): void => {
-        CollectionDockingView.CloseFullScreen();
-        ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-    }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
-        if (!SelectionManager.IsSelected(this)) {
-            return;
-        }
-        e.preventDefault()
-
-        if (!this._contextMenuCanOpen) {
-            return;
-        }
-
-        if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-        }
-        else {
-            // DocumentViews should stop propogation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
-            SelectionManager.SelectDoc(this, e.ctrlKey);
-        }
-    }
-
-    render() {
-        var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
-            <div className="node" ref={this._mainCont} style={{
-                transform: freestyling ? this.transform : "",
-                width: freestyling ? this.width : "100%",
-                height: freestyling ? this.height : "100%",
-                position: freestyling ? "absolute" : "relative",
-                zIndex: freestyling ? this.zIndex : 0,
-            }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}>
-                <DocumentContents {...this.props} ContainingDocumentView={this} />
+            <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
+                <JsxParser
+                    components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+                    bindings={bindings}
+                    jsx={this.layout}
+                    showWarnings={true}
+                    onError={(test: any) => { console.log(test) }}
+                />
             </div>
-        );
+        )
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 6c1cd956b..2a2355a23 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,4 @@
 import React = require("react")
-import { DocumentView } from "./DocumentView";
 import { Document } from "../../fields/Document";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
@@ -7,24 +6,26 @@ import { Field, Opt } from "../../fields/Field";
 import { TextField } from "../../fields/TextField";
 import { NumberField } from "../../fields/NumberField";
 import { RichTextField } from "../../fields/RichTextField";
-import { FieldTextBox } from "./FieldTextBox";
+import { FormattedTextBox } from "./FormattedTextBox";
 import { ImageField } from "../../fields/ImageField";
 import { ImageBox } from "./ImageBox";
 import { Key } from "../../fields/Key";
+import { DocumentView } from "./DocumentView";
 
 //
 // these properties get assigned through the render() method of the DocumentView when it creates this node.
 // However, that only happens because the properties are "defined" in the markup for the field view.
-// See the LayoutString method on each field view :   ImageBox, FieldTextBox, etc. 
+// See the LayoutString method on each field view :   ImageBox, FormattedTextBox, etc. 
 //
 export interface FieldViewProps {
     fieldKey: Key;
     doc: Document;
-    documentViewContainer: DocumentView
+    DocumentViewForField: Opt<DocumentView>
 }
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
+    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
     @computed
     get field(): Opt<Field> {
         const { doc, fieldKey } = this.props;
@@ -39,7 +40,7 @@ export class FieldView extends React.Component<FieldViewProps> {
             return <p>{field.Data}</p>
         }
         else if (field instanceof RichTextField) {
-            return <FieldTextBox {...this.props} />
+            return <FormattedTextBox {...this.props} />
         }
         else if (field instanceof ImageField) {
             return <ImageBox {...this.props} />
diff --git a/src/views/nodes/FieldTextBox.scss b/src/views/nodes/FormattedTextBox.scss
index b6ce2fabc..492367fce 100644
--- a/src/views/nodes/FieldTextBox.scss
+++ b/src/views/nodes/FormattedTextBox.scss
@@ -8,7 +8,7 @@
     outline: none !important
 }
 
-.fieldTextBox-cont {
+.formattedTextBox-cont {
     background: white;
     padding: 1vw;
 }
\ No newline at end of file
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FormattedTextBox.tsx
index 188b39a17..9c4b24226 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FormattedTextBox.tsx
@@ -5,22 +5,21 @@ import { keymap } from "prosemirror-keymap";
 import { schema } from "prosemirror-schema-basic";
 import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Document } from "../../fields/Document";
 import { Opt } from "../../fields/Field";
-import { Key } from "../../fields/Key";
 import { SelectionManager } from "../../util/SelectionManager";
-import "./FieldTextBox.scss";
+import "./FormattedTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../fields/RichTextField";
-import { FieldViewProps } from "./FieldView";
+import { FieldViewProps, FieldView } from "./FieldView";
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
 
 
-// FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
+// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
 //
-//  HTML Markup:  <FieldTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
+//  HTML Markup:  <FormattedTextBox Doc={Document's ID} FieldKey={Key's name + "Key"}
 // 
 //  In Code, the node's HTML is specified in the document's parameterized structure as:
-//        document.SetField(KeyStore.Layout,  "<FieldTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
+//        document.SetField(KeyStore.Layout,  "<FormattedTextBox doc={doc} fieldKey={<KEYNAME>Key} />");
 //  and the node's binding to the specified document KEYNAME as:
 //        document.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.<KEYNAME>]));
 //  The Jsx parser at run time will bind:
@@ -31,9 +30,9 @@ import { FieldViewProps } from "./FieldView";
 //  specified Key and assigns it to an HTML input node.  When changes are made tot his node, 
 //  this will edit the document and assign the new value to that field.
 //
-export class FieldTextBox extends React.Component<FieldViewProps> {
+export class FormattedTextBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return "<FieldTextBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
@@ -110,12 +109,12 @@ export class FieldTextBox extends React.Component<FieldViewProps> {
     }
     onPointerDown = (e: React.PointerEvent): void => {
         let me = this;
-        if (e.buttons === 1 && SelectionManager.IsSelected(me.props.documentViewContainer)) {
+        if (e.buttons === 1 && me.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(me.props.DocumentViewForField)) {
             e.stopPropagation();
         }
     }
     render() {
-        return (<div className="fieldTextBox-cont"
+        return (<div className="formattedTextBox-cont"
             style={{
                 color: "initial",
                 whiteSpace: "initial"
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 5137dbf38..dd201f20f 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -5,7 +5,8 @@ import { SelectionManager } from "../../util/SelectionManager";
 import "./ImageBox.scss";
 import React = require("react")
 import { ImageField } from '../../fields/ImageField';
-import { FieldViewProps } from './FieldView';
+import { FieldViewProps, FieldView } from './FieldView';
+import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
 
 interface ImageBoxState {
     photoIndex: number,
@@ -14,7 +15,7 @@ interface ImageBoxState {
 
 export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
 
-    public static LayoutString() { return "<ImageBox doc={Document} documentViewContainer={ContainingDocumentView} fieldKey={DataKey} />"; }
+    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
     private _ref: React.RefObject<HTMLDivElement>;
     private _downX: number = 0;
     private _downY: number = 0;
@@ -38,7 +39,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
 
     onPointerDown = (e: React.PointerEvent): void => {
         if (Date.now() - this._lastTap < 300) {
-            if (e.buttons === 1 && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+            if (e.buttons === 1 && this.props.DocumentViewForField instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.DocumentViewForField)) {
                 e.stopPropagation();
                 this._downX = e.clientX;
                 this._downY = e.clientY;
@@ -66,7 +67,7 @@ export class ImageBox extends React.Component<FieldViewProps, ImageBoxState> {
         const images = [path,];
         var lightbox = () => {
             const { photoIndex } = this.state;
-            if (this.state.isOpen && SelectionManager.IsSelected(this.props.documentViewContainer)) {
+            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}