with collection view

1 files changed, 110 insertions, 71 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 4c302ed87..a14239e94 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -18,17 +18,15 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox";
 import { ImageBox } from "../nodes/ImageBox";
 import "./DocumentView.scss";
 import React = require("react");
-const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this?
 
 export interface DocumentViewProps {
     ContainingCollectionView: Opt<CollectionView>;
-
     Document: Document;
     AddDocument?: (doc: Document) => void;
     RemoveDocument?: (doc: Document) => boolean;
     ScreenToLocalTransform: () => Transform;
-    isTopMost: boolean;
-    //tfs: This shouldn't be necessary I don't think
+    isTopMost: boolean; //tfs: This shouldn't be necessary I don't think
     ContentScaling: () => number;
     PanelWidth: () => number;
     PanelHeight: () => number;
@@ -53,6 +51,7 @@ Example usage of this function:
         )
     }
 */
+
 export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     let Keys: { [name: string]: any } = {}
     let Fields: { [name: string]: any } = {}
@@ -75,23 +74,28 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
     return args;
 }
 
-@observer
-export class DocumentView extends React.Component<DocumentViewProps> {
-
+@observer export class DocumentView extends React.Component<DocumentViewProps> {
     private _mainCont = React.createRef<HTMLDivElement>();
     private _documentBindings: any = null;
     private _contextMenuCanOpen = false;
     private _downX: number = 0;
     private _downY: number = 0;
-
-    @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
-    @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
-    @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
-    @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
-    @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
-
+    @computed get active(): boolean {
+        return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active();
+    }
+    @computed get topMost(): boolean {
+        return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking;
+    }
+    @computed get layout(): string {
+        return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
+    }
+    @computed get layoutKeys(): Key[] {
+        return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
+    }
+    @computed get layoutFields(): Key[] {
+        return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>());
+    }
     screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
-
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
@@ -112,7 +116,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             }
         }
     }
-
     onPointerMove = (e: PointerEvent): void => {
         if (e.cancelBubble) {
             this._contextMenuCanOpen = false;
@@ -122,23 +125,29 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             this._contextMenuCanOpen = false;
             if (this._mainCont.current != null && !this.topMost) {
                 this._contextMenuCanOpen = false;
-                const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                let dragData: { [id: string]: any } = {};
+                const [left,
+                    top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                let dragData: {
+                    [id: string]: any
+                }
+                    = {}
+                    ;
                 dragData["documentView"] = this;
                 dragData["xOffset"] = e.x - left;
                 dragData["yOffset"] = e.y - top;
                 DragManager.StartDrag(this._mainCont.current, dragData, {
                     handlers: {
-                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }),
-                    },
-                    hideSource: true
-                })
+                        dragComplete: action((e: DragManager.DragCompleteEvent) => { }
+                        ),
+                    }
+                    , hideSource: true
+                }
+                )
             }
         }
         e.stopPropagation();
         e.preventDefault();
     }
-
     onPointerUp = (e: PointerEvent): void => {
         document.removeEventListener("pointermove", this.onPointerMove)
         document.removeEventListener("pointerup", this.onPointerUp)
@@ -147,7 +156,6 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
-
     deleteClicked = (e: React.MouseEvent): void => {
         if (this.props.RemoveDocument) {
             this.props.RemoveDocument(this.props.Document);
@@ -156,93 +164,124 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     fullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
+        ContextMenu.Instance.addItem({
+            description: "Close Full Screen", event: this.closeFullScreenClicked
+        }
+        );
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
     closeFullScreenClicked = (e: React.MouseEvent): void => {
         CollectionDockingView.Instance.CloseFullScreen();
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+        ContextMenu.Instance.addItem({
+            description: "Full Screen", event: this.fullScreenClicked
+        })
         ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
     }
-
-    @action
-    onContextMenu = (e: React.MouseEvent): void => {
+    @action onContextMenu = (e: React.MouseEvent): void => {
         e.preventDefault()
         e.stopPropagation();
         if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) {
             return;
         }
-
         if (this.topMost) {
-            ContextMenu.Instance.clearItems()
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
+            ContextMenu.Instance.addItem({
+                description: "Full Screen", event: this.fullScreenClicked
+            })
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
         }
         else {
             // DocumentViews should stop propagation of this event
-            e.stopPropagation();
-
-            ContextMenu.Instance.clearItems();
-            ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
-            ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) })
-            ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked })
-            // ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) })
-            // ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) })
-            // ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) })
-            // ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) })
+            ContextMenu.Instance.addItem({
+                description: "Full Screen", event: this.fullScreenClicked
+            }
+            )
+            ContextMenu.Instance.addItem({
+                description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document)
+            }
+            )
+            ContextMenu.Instance.addItem({
+                description: "Delete", event: this.deleteClicked
+            }
+            )
             ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
             SelectionManager.SelectDoc(this, e.ctrlKey);
         }
     }
-
     @computed get mainContent() {
         var val = this.props.Document.Id;
-        return <JsxParser
-            components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
-            bindings={this._documentBindings}
-            jsx={this.layout}
-            showWarnings={true}
-            onError={(test: any) => { console.log(test) }}
+        return <JsxParser components={
+            {
+                FormattedTextBox,
+                ImageBox,
+                CollectionFreeFormView,
+                CollectionDockingView,
+                CollectionSchemaView,
+                CollectionView,
+                WebView
+            }
+        }
+            bindings={
+                this._documentBindings
+            }
+            jsx={
+                this.layout
+            }
+            showWarnings={
+                true
+            }
+            onError={
+                (test: any) => {
+                    console.log(test)
+                }
+            }
         />
     }
     render() {
-        if (!this.props.Document)
-            return <div></div>
+        if (!this.props.Document) return <div></div>
         let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField);
         if (!lkeys || lkeys === "<Waiting>") {
             return <p>Error loading layout keys</p>;
         }
         this._documentBindings = {
             ...this.props,
-            isSelected: () => SelectionManager.IsSelected(this),
-            select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed)
-        };
+            isSelected: () => SelectionManager.IsSelected(this), select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed)
+        }
+            ;
         for (const key of this.layoutKeys) {
-            this._documentBindings[key.Name + "Key"] = key;  // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
+            this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form <keyname>Key to an actual key Kestore.keyname  e.g,   "DataKey" => KeyStore.Data
         }
         for (const key of this.layoutFields) {
             let field = this.props.Document.Get(key);
             this._documentBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field;
         }
         this._documentBindings.bindings = this._documentBindings;
-
         var scaling = this.props.ContentScaling();
         var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
-        return (
-            <div className="documentView-node" ref={this._mainCont}
-                style={{
-                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%",
-                    height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%",
-                    transformOrigin: "left top",
-                    transform: `scale(${scaling},${scaling})`
-                }}
-                onContextMenu={this.onContextMenu}
-                onPointerDown={this.onPointerDown}
-            >
-                {this.mainContent}
-            </div>
-        )
+        return (<div className="documentView-node" ref={
+            this._mainCont
+        }
+            style={
+                {
+                    width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", transformOrigin: "left top", transform: `scale($ {
+                    scaling
+                }
+                , $ {
+                    scaling
+                }
+                )`
+                }
+            }
+            onContextMenu={
+                this.onContextMenu
+            }
+            onPointerDown={
+                this.onPointerDown
+            }
+        > {
+                this.mainContent
+            }
+        </div>)
     }
-}
+}
\ No newline at end of file