From dced23210ce1b7e005d239f2167cae363bfef52f Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Thu, 17 Jan 2019 22:56:19 -0500
Subject: Added collection border and formatting

---
 .../freeformcanvas/CollectionFreeFormView.tsx      | 44 +++++++++++++---------
 1 file changed, 27 insertions(+), 17 deletions(-)

(limited to 'src/views/freeformcanvas/CollectionFreeFormView.tsx')

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>
-- 
cgit v1.2.3-70-g09d2