not working

4 files changed, 102 insertions, 98 deletions

diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index dd47d4455..3cc0f3bf6 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -6,29 +6,33 @@ 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 { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "../collections/CollectionViewBase";
 import { ContextMenu } from "../ContextMenu";
 import { FieldTextBox } from "../nodes/FieldTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./NodeView.scss";
 import React = require("react");
+import { baseKeymap } from "prosemirror-commands";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
     Document: Document;
     ContainingCollectionView: Opt<CollectionViewBase>;
-    ContainingDocumentView: Opt<DocumentView>;
+    ContainingDocumentContentsView: Opt<DocumentContentsView>;
 }
 @observer
-export class DocumentContents extends React.Component<DocumentViewProps> {
+export class DocumentContentsView 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,12 +47,92 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
     get layoutFields(): Key[] {
         return this.props.Document.GetFieldValue(KeyStore.LayoutFields, ListField, new Array<Key>());
     }
+
+    // 
+    // returns the cumulative scaling between the document and the screen
+    //
+    @computed
+    public get ScalingToScreenSpace(): number {
+        if (this.props.ContainingDocumentContentsView != undefined) {
+            let ss = this.props.ContainingDocumentContentsView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+            return this.props.ContainingDocumentContentsView.ScalingToScreenSpace * ss;
+        }
+        return 1;
+    }
+
+    //
+    // Converts a coordinate in the screen space of the app into a local document coordinate.
+    //
+    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.ContainingDocumentContentsView != undefined ?
+            this.props.ContainingDocumentContentsView!.TransformToLocalPoint(screenX, screenY) :
+            { LocalX: screenX, LocalY: screenY };
+        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
+        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
+
+        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // 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.MainContent.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
+        }
+
+        let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+        let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
+        let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
+        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
+        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
+
+        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
+    }
+
+    //
+    // Converts a point in the coordinate space of a document to a screen space coordinate.
+    //
+    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
+
+        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
+        // 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.MainContent.current!);
+            Xx = rx - COLLECTION_BORDER_WIDTH;
+            Yy = ry - COLLECTION_BORDER_WIDTH;
+        }
+
+        let W = COLLECTION_BORDER_WIDTH;
+        let H = COLLECTION_BORDER_WIDTH;
+        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
+        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
+
+        // 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.ContainingDocumentContentsView;
+        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;
+            let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
+            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
+            parentX = ScreenX;
+            parentY = ScreenY;
+        }
+        return { ScreenX: parentX, ScreenY: parentY };
+    }
     render() {
         let doc = this.props.Document;
         let bindings = { ...this.props } as any;
         for (const key of this.layoutKeys) {
             bindings[key.Name + "Key"] = key;
         }
+        bindings.ContainingDocumentContentsView = this;
         for (const key of this.layoutFields) {
             let field = doc.GetField(key);
             if (field) {
@@ -56,20 +140,21 @@ export class DocumentContents extends React.Component<DocumentViewProps> {
             }
         }
         return (
-            <JsxParser
+            //<div ref={this._mainCont}>
+            <JsxParser ref={this._mainCont}
                 components={{ FieldTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
                 bindings={bindings}
                 jsx={this.layout}
                 showWarnings={true}
                 onError={(test: any) => { console.log(test) }}
             />
+            //</div>
         )
     }
 }
 
 @observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-    private _mainCont = React.createRef<HTMLDivElement>();
+export class DocumentView extends DocumentContentsView {
     private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
@@ -84,10 +169,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return new DOMRect();
     }
 
-    get MainContent() {
-        return this._mainCont;
-    }
-
     @computed
     get x(): number {
         return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
@@ -152,86 +233,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         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;
-        }
-        return 1;
-    }
-
-    //
-    // Converts a coordinate in the screen space of the app into a local document coordinate.
-    //
-    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) :
-            { LocalX: screenX, LocalY: screenY };
-        let ContainerX: number = parentX - COLLECTION_BORDER_WIDTH;
-        let ContainerY: number = parentY - COLLECTION_BORDER_WIDTH;
-
-        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // 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!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let Ss = this.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
-        let Panxx = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
-        let Panyy = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
-        let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
-        let LocalY = (ContainerY - (Yy + Panyy)) / Ss;
-
-        return { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY };
-    }
-
-    //
-    // Converts a point in the coordinate space of a document to a screen space coordinate.
-    //
-    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: number, ScreenY: number } {
-
-        var Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
-        var Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
-        // CollectionDockingViews change the location of their children frames without using a Dash transformation.
-        // 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!);
-            Xx = rx - COLLECTION_BORDER_WIDTH;
-            Yy = ry - COLLECTION_BORDER_WIDTH;
-        }
-
-        let W = COLLECTION_BORDER_WIDTH;
-        let H = COLLECTION_BORDER_WIDTH;
-        let parentX = (localX - W) * Ss + (Xx + Panxx) + W;
-        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
-
-        // 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;
-        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;
-            let panyy = containingDocView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
-            let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
-            parentX = ScreenX;
-            parentY = ScreenY;
-        }
-        return { ScreenX: parentX, ScreenY: parentY };
-    }
-
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
@@ -354,7 +355,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
-                <DocumentContents {...this.props} ContainingDocumentView={this} />
+
+                <DocumentContentsView {...this.props} />
             </div>
         );
     }
diff --git a/src/views/nodes/FieldTextBox.tsx b/src/views/nodes/FieldTextBox.tsx
index 188b39a17..0a8706517 100644
--- a/src/views/nodes/FieldTextBox.tsx
+++ b/src/views/nodes/FieldTextBox.tsx
@@ -13,6 +13,7 @@ import "./FieldTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../fields/RichTextField";
 import { FieldViewProps } from "./FieldView";
+import { DocumentView } from "./DocumentView";
 
 
 // FieldTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -110,7 +111,7 @@ 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.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(me.props.documentViewContainer)) {
             e.stopPropagation();
         }
     }
diff --git a/src/views/nodes/FieldView.tsx b/src/views/nodes/FieldView.tsx
index 6c1cd956b..b7a1d0526 100644
--- a/src/views/nodes/FieldView.tsx
+++ b/src/views/nodes/FieldView.tsx
@@ -1,5 +1,5 @@
 import React = require("react")
-import { DocumentView } from "./DocumentView";
+import { DocumentView, DocumentContentsView } from "./DocumentView";
 import { Document } from "../../fields/Document";
 import { observer } from "mobx-react";
 import { computed } from "mobx";
@@ -20,7 +20,7 @@ import { Key } from "../../fields/Key";
 export interface FieldViewProps {
     fieldKey: Key;
     doc: Document;
-    documentViewContainer: DocumentView
+    documentViewContainer: DocumentContentsView
 }
 
 @observer
diff --git a/src/views/nodes/ImageBox.tsx b/src/views/nodes/ImageBox.tsx
index 5137dbf38..d2f567423 100644
--- a/src/views/nodes/ImageBox.tsx
+++ b/src/views/nodes/ImageBox.tsx
@@ -6,6 +6,7 @@ import "./ImageBox.scss";
 import React = require("react")
 import { ImageField } from '../../fields/ImageField';
 import { FieldViewProps } from './FieldView';
+import { DocumentView } from './DocumentView';
 
 interface ImageBoxState {
     photoIndex: number,
@@ -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.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
                 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.documentViewContainer instanceof DocumentView && SelectionManager.IsSelected(this.props.documentViewContainer)) {
                 return (<Lightbox
                     mainSrc={images[photoIndex]}
                     nextSrc={photoIndex + 1 < images.length ? images[(photoIndex + 1) % images.length] : undefined}