Added collection border and formatting

5 files changed, 29 insertions, 25 deletions

diff --git a/src/Main.tsx b/src/Main.tsx
index a3b9bc96f..604e443cf 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -45,7 +45,7 @@ runInAction(() => {
     doc2.SetField(KS.X, new NumberField(150));
     doc2.SetField(KS.Y, new NumberField(20));
     let doc3 = Documents.ImageDocument("https://static.boredpanda.com/blog/wp-content/uploads/2018/04/5acb63d83493f__700-png.jpg", {
-        x: 150, y: 500
+        x: 450, y: 500
     });
     let docset = new Array<Document>(doc1, doc2);
     let doc4 = Documents.CollectionDocument(docset, {
diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 7c523e70d..84a599907 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -4,14 +4,15 @@ import "./FreeFormCanvas.scss";
 import React = require("react");
 import { action } from "mobx";
 import { Document } from "../../fields/Document";
-import {DocumentViewModel} from "../../viewmodels/DocumentViewModel";
-import {DocumentView} from "../nodes/DocumentView";
-import {ListField} from "../../fields/ListField";
-import {NumberField} from "../../fields/NumberField";
+import { DocumentViewModel } from "../../viewmodels/DocumentViewModel";
+import { DocumentView } from "../nodes/DocumentView";
+import { ListField } from "../../fields/ListField";
+import { NumberField } from "../../fields/NumberField";
+import { SSL_OP_SINGLE_DH_USE } from "constants";
 
 interface IProps {
-    fieldKey:Key;
-    doc:Document;
+    fieldKey: Key;
+    doc: Document;
 }
 
 @observer
@@ -19,7 +20,7 @@ export class CollectionFreeFormView extends React.Component<IProps> {
 
     private _isPointerDown: boolean = false;
 
-    constructor(props:IProps) {
+    constructor(props: IProps) {
         super(props);
     }
 
@@ -48,11 +49,11 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         if (!this._isPointerDown) {
             return;
         }
-        const {doc} = this.props;
+        const { doc } = this.props;
         let x = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         let y = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
-        doc.SetFieldValue(KeyStore.PanX, x+e.movementX, NumberField);
-        doc.SetFieldValue(KeyStore.PanY, y+e.movementY, NumberField);
+        doc.SetFieldValue(KeyStore.PanX, x + e.movementX, NumberField);
+        doc.SetFieldValue(KeyStore.PanY, y + e.movementY, NumberField);
     }
 
     @action
@@ -64,17 +65,26 @@ export class CollectionFreeFormView extends React.Component<IProps> {
     }
 
     render() {
-        const {fieldKey, doc} = this.props;
+        const { fieldKey, doc } = this.props;
         const value: Document[] = doc.GetFieldValue(fieldKey, ListField, []);
         const panx: number = doc.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = doc.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         return (
-            <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel}>
-                <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}>
-                    <div className="node-container">
-                        {value.map(doc => {
-                            return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
-                        })}
+            <div className="border" style={{
+                    borderStyle: "solid",
+                    borderWidth: "2px"
+                }}>
+                <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} style={{
+                    width: "100%",
+                    height: "calc(100% - 4px)",
+                    overflow: "hidden"
+                }}>
+                    <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px)`, transformOrigin: '50% 50%' }}>
+                        <div className="node-container">
+                            {value.map(doc => {
+                                return (<DocumentView key={doc.Id} dvm={new DocumentViewModel(doc)} />);
+                            })}
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index b9fbef91c..c468d5576 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -43,12 +43,6 @@ export class DocumentView extends React.Component<IProps> {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.Height, NumberField, Number(0));
     }
 
-    //Temp
-    @computed
-    get data(): string {
-        return this.props.dvm.Doc.GetFieldValue(KeyStore.Data, TextField, String(""));
-    }
-
     @computed
     get layout(): string {
         return this.props.dvm.Doc.GetFieldValue(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
diff --git a/src/views/nodes/NodeView.scss b/src/views/nodes/NodeView.scss
index e8964399b..a68335f87 100644
--- a/src/views/nodes/NodeView.scss
+++ b/src/views/nodes/NodeView.scss
@@ -1,6 +1,6 @@
 .node {
     position: absolute;
-    // background: #cdcdcd;
+    background: #cdcdcd;
 
     overflow: hidden;
 
diff --git a/src/views/nodes/RichTextView.tsx b/src/views/nodes/RichTextView.tsx
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/src/views/nodes/RichTextView.tsx