Fixed issues with Document updates and changed how FieldView layout string works

5 files changed, 60 insertions, 12 deletions

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 9e6407768..bfd50da81 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu";
 import "./NodeView.scss";
 import React = require("react");
 import { DocumentView, DocumentViewProps } from "./DocumentView";
+import { Utils } from "../../../Utils";
 
 
 @observer
@@ -188,7 +189,6 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         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
@@ -198,9 +198,15 @@ export class CollectionFreeFormDocumentView extends DocumentView {
             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);
         }
+
+        ContextMenu.Instance.addItem({
+            description: "Copy ID", event: () => {
+                Utils.CopyText(this.props.Document.Id)
+            }
+        })
+        ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
 
     render() {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b219f2279..3767d28c6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,7 +1,7 @@
 import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
-import { Opt, FieldWaiting } from "../../../fields/Field";
+import { Opt, FieldWaiting, Field } from "../../../fields/Field";
 import { Key } from "../../../fields/Key";
 import { KeyStore } from "../../../fields/KeyStore";
 import { ListField } from "../../../fields/ListField";
@@ -23,6 +23,48 @@ export interface DocumentViewProps {
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
 }
+export interface JsxArgs extends DocumentViewProps {
+    Keys: { [name: string]: Key }
+    Fields: { [name: string]: Field }
+}
+
+/*
+This function is pretty much a hack that lets us fill out the fields in JsxArgs with something that
+jsx-to-string can recover the jsx from
+Example usage of this function:
+    public static LayoutString() {
+        let args = FakeJsxArgs(["Data"]);
+        return jsxToString(
+            <CollectionFreeFormView
+                doc={args.Document}
+                fieldKey={args.Keys.Data}
+                DocumentViewForField={args.DocumentView} />,
+            { useFunctionCode: true, functionNameOnly: true }
+        )
+    }
+*/
+export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
+    let Keys: { [name: string]: any } = {}
+    let Fields: { [name: string]: any } = {}
+    for (const key of keys) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: key + "Key" })
+        Keys[key] = fn;
+    }
+    for (const field of fields) {
+        let fn = () => { }
+        Object.defineProperty(fn, "name", { value: field })
+        Fields[field] = fn;
+    }
+    let args: JsxArgs = {
+        Document: function Document() { },
+        DocumentView: function DocumentView() { },
+        Keys,
+        Fields
+    } as any;
+    return args;
+}
+
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
 
@@ -51,9 +93,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed
     public get ScalingToScreenSpace(): number {
         if (this.props.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
-            return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
+            this.props.ContainingCollectionView.props.DocumentViewForField != undefined) {
+            let ss = this.props.ContainingCollectionView.props.doc.GetData(KeyStore.Scale, NumberField, Number(1));
+            return this.props.ContainingCollectionView.props.DocumentViewForField.ScalingToScreenSpace * ss;
         }
         return 1;
     }
@@ -65,8 +107,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // 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.ContainingCollectionView != undefined &&
-            this.props.ContainingCollectionView.props.ContainingDocumentView != undefined ?
-            this.props.ContainingCollectionView.props.ContainingDocumentView.TransformToLocalPoint(screenX, screenY) :
+            this.props.ContainingCollectionView.props.DocumentViewForField != undefined ?
+            this.props.ContainingCollectionView.props.DocumentViewForField.TransformToLocalPoint(screenX, screenY) :
             { LocalX: screenX, LocalY: screenY };
         let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
         let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
@@ -114,7 +156,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.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
+        let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.DocumentViewForField : undefined;
         if (containingDocView != undefined) {
             let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
             let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 12371eb2e..fae124528 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -25,7 +25,7 @@ export interface FieldViewProps {
 
 @observer
 export class FieldView extends React.Component<FieldViewProps> {
-    public static LayoutString(fieldType: string) { return `<${fieldType} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
+    public static LayoutString(fieldType: { name: string }) { return `<${fieldType.name} doc={Document} DocumentViewForField={DocumentView} fieldKey={DataKey} />`; }
     @computed
     get field(): FieldValue<Field> {
         const { doc, fieldKey } = this.props;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 8bc4c902c..39d7bf4f0 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -34,7 +34,7 @@ import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView
 @observer
 export class FormattedTextBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("FormattedTextBox"); }
+    public static LayoutString() { return FieldView.LayoutString(FormattedTextBox) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _editorView: Opt<EditorView>;
     private _reactionDisposer: Opt<IReactionDisposer>;
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ab20f140c..013b8b7d3 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -14,7 +14,7 @@ import { observable, action } from 'mobx';
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
 
-    public static LayoutString() { return FieldView.LayoutString("ImageBox"); }
+    public static LayoutString() { return FieldView.LayoutString(ImageBox) }
     private _ref: React.RefObject<HTMLDivElement>;
     private _downX: number = 0;
     private _downY: number = 0;