semi working docking, but zooming is now broken.

8 files changed, 444 insertions, 421 deletions

diff --git a/src/DocumentDecorations.tsx b/src/DocumentDecorations.tsx
index 7899db9c9..d5a682b82 100644
--- a/src/DocumentDecorations.tsx
+++ b/src/DocumentDecorations.tsx
@@ -24,7 +24,10 @@ export class DocumentDecorations extends React.Component {
         return SelectionManager.SelectedDocuments().reduce((bounds, element) => {
             var spt = element.TransformToScreenPoint(0, 0);
             var bpt = element.TransformToScreenPoint(element.width, element.height);
-            return {
+            if (spt.ScreenX == undefined || spt.ScreenY == undefined ||
+                bpt.ScreenX == undefined || bpt.ScreenY == undefined)
+                return { x: bounds.x, y: bounds.y, r: bounds.r, b: bounds.b };
+            else return {
                 x: Math.min(spt.ScreenX, bounds.x), y: Math.min(spt.ScreenY, bounds.y),
                 r: Math.max(bpt.ScreenX, bounds.r), b: Math.max(bpt.ScreenY, bounds.b)
             }
diff --git a/src/Main.tsx b/src/Main.tsx
index 6ccb940f4..1b5d95132 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -54,14 +54,14 @@ runInAction(() => {
     let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 450, y: 500
     });
-    let docset = new Array<Document>(doc1, doc2);
+    let docset = new Array<Document>(doc1, doc2, doc3);
     let doc4 = Documents.CollectionDocument(docset, {
         x: 0, y: 400
     });
     let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
         x: 650, y: 500, width: 600, height: 600
     });
-    let doc6 = Documents.DockDocument("", {
+    let doc6 = Documents.DockDocument(docset, {
         x: 350, y: 100
     });
     let mainNodes = mainContainer.GetFieldT(KeyStore.Data, ListField);
@@ -71,8 +71,10 @@ runInAction(() => {
     }
     // mainNodes.Data.push(doc1);
     // mainNodes.Data.push(doc2);
-    // mainNodes.Data.push(doc4);
+    mainNodes.Data.push(doc4);
     // mainNodes.Data.push(doc3);
-    // mainNodes.Data.push(doc5);
+    mainNodes.Data.push(doc5);
+    mainNodes.Data.push(doc1);
+    mainNodes.Data.push(doc2);
     mainNodes.Data.push(doc6);
 });
\ No newline at end of file
diff --git a/src/Utils.ts b/src/Utils.ts
index 948b6176e..cc1d8f6c6 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -13,7 +13,7 @@ export class Utils {
 
     public static GetScreenTransform(ele: HTMLElement): { scale: number, translateX: number, translateY: number } {
         const rect = ele.getBoundingClientRect();
-        const scale = rect.width / ele.offsetWidth;
+        const scale = ele.offsetWidth == 0 && rect.width == 0 ? 1 : rect.width / ele.offsetWidth;
         const translateX = rect.left;
         const translateY = rect.top;
 
diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts
index a0bd021d8..7cc5de3a3 100644
--- a/src/documents/Documents.ts
+++ b/src/documents/Documents.ts
@@ -68,10 +68,10 @@ export namespace Documents {
         return dockProto;
     }
 
-    export function DockDocument(text: string, options: DocumentOptions = {}): Document {
+    export function DockDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
         let doc = GetDockPrototype().MakeDelegate();
         setupOptions(doc, options);
-        // doc.SetField(KeyStore.Data, new TextField(text));
+        doc.SetField(KeyStore.Data, new ListField(documents));
         return doc;
     }
 
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index dc29defdc..43af7c538 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -4,390 +4,383 @@
     top: 0;
     left: 0;
     overflow: hidden;
-    .collectiondockingview {
+    .flexlayout__layout {
+        width: 100%;
+        height: 100%;
         position: relative;
+        overflow:hidden;
+    }
+    
+    .flexlayout__splitter {
+        background-color: black;
+    }
+    
+    .flexlayout__splitter:hover {
+        background-color: #333;
+    }
+    
+    .flexlayout__splitter_drag {
+        border-radius: 5px;
+        background-color: #444;
+        z-index: 1000;
+    }
+    
+    .flexlayout__outline_rect {
+        position: absolute;
+        cursor: move;
+        border: 2px solid #cfe8ff;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+    }
+    
+    .flexlayout__outline_rect_edge {
+        cursor: move;
+        border: 2px solid #b7d1b5;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+    }
+    
+    .flexlayout__edge_rect {
+        position: absolute;
+        z-index: 1000;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
+        background-color: lightgray;
+    }
+    
+    .flexlayout__drag_rect {
+        position: absolute;
+        cursor: move;
+        border: 2px solid #aaaaaa;
+        box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
+        border-radius: 5px;
+        z-index: 1000;
+        box-sizing: border-box;
+        background-color:#eeeeee;
+        opacity: 0.9;
+        text-align: center;
+    
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        overflow:hidden;
+        padding:10px;
+        word-wrap: break-word;
+    }
+    
+    .flexlayout__tabset {
+        overflow: hidden;
+        background-color: #222;
+        box-sizing: border-box;
+    }
+    
+    .flexlayout__tab {
+        overflow: auto;
+        position: absolute;
+        box-sizing: border-box;
+        background-color: #222;
+    }
+    
+    .flexlayout__tab_button {
+        cursor: pointer;
+        padding: 2px 8px 3px 8px;
+        margin: 2px;
+        /*box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);*/
+        /*border-top-left-radius: 3px;*/
+        /*border-top-right-radius: 3px;*/
+        float:left;
+        vertical-align: top;
+        box-sizing: border-box;
+    
+    }
+    
+    .flexlayout__tab_button--selected {
+        color: #ddd;
+        background-color: #222;
+    }
+    
+    .flexlayout__tab_button--unselected {
+        color: gray;
+    }
+    
+    .flexlayout__tab_button_leading {
+        float: left;
+        display:inline-block;
+    }
+    
+    .flexlayout__tab_button_content {
+        float: left;
+        display:inline-block;
+    }
+    
+    .flexlayout__tab_button_textbox {
+        float: left;
+        border: none;
+        color:lightgreen;
+        background-color:#222;
+    }
+    .flexlayout__tab_button_textbox:focus {
+        outline: none;
+    }
+    
+    .flexlayout__tab_button_trailing {
+        float: left;
+        display:inline-block;
+        margin-left:5px;
+        margin-top:3px;
+        width:8px;
+        height:8px;
+    }
+    
+    .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
+    .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
+        //background: transparent url("../images/close_white.png") no-repeat center;
+    }
+    
+    .flexlayout__tab_button_overflow {
+        float: left;
+        width: 20px;
+        height:15px;
+        margin-top:2px;
+        padding-left:12px;
+        border:none;
+        font-size: 10px;
+        color:lightgray;
+        font-family: Arial, sans-serif;
+        //background: transparent url("../images/more.png") no-repeat left;
+    }
+    
+    .flexlayout__tabset_header
+    {
+        position: absolute;
+        left: 0;
+        right: 0;
+        color:#eee;
+        background-color: #212121;
+        padding:3px 3px 3px 5px;
+        /*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
+        box-sizing: border-box;
+    }
+    
+    .flexlayout__tab_header_inner {
+        position: absolute;
+        left: 0;
         top: 0;
-        left: 0;.flexlayout__layout {
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            position: absolute;
-            overflow:hidden;
-        }
-        
-        .flexlayout__splitter {
-            background-color: black;
-        }
-        
-        .flexlayout__splitter:hover {
-            background-color: #333;
-        }
-        
-        .flexlayout__splitter_drag {
-            border-radius: 5px;
-            background-color: #444;
-            z-index: 1000;
-        }
-        
-        .flexlayout__outline_rect {
-            position: absolute;
-            cursor: move;
-            border: 2px solid #cfe8ff;
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
-            border-radius: 5px;
-            z-index: 1000;
-            box-sizing: border-box;
-        }
-        
-        .flexlayout__outline_rect_edge {
-            cursor: move;
-            border: 2px solid #b7d1b5;
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, .2);
-            border-radius: 5px;
-            z-index: 1000;
-            box-sizing: border-box;
-        }
-        
-        .flexlayout__edge_rect {
-            position: absolute;
-            z-index: 1000;
-            box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
-            background-color: lightgray;
-        }
-        
-        .flexlayout__drag_rect {
-            position: absolute;
-            cursor: move;
-            border: 2px solid #aaaaaa;
-            box-shadow: inset 0 0 60px rgba(0, 0, 0, .3);
-            border-radius: 5px;
-            z-index: 1000;
-            box-sizing: border-box;
-            background-color:#eeeeee;
-            opacity: 0.9;
-            text-align: center;
-        
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            overflow:hidden;
-            padding:10px;
-            word-wrap: break-word;
-        }
-        
-        .flexlayout__tabset {
-            overflow: hidden;
-            background-color: #222;
-            box-sizing: border-box;
-        }
-        
-        .flexlayout__tab {
-            overflow: auto;
-            position:absolute;
-            box-sizing: border-box;
-            background-color: #222;
-            color:white;
-        }
-        
-        .flexlayout__tab_button {
-            cursor: pointer;
-            padding: 2px 8px 3px 8px;
-            margin: 2px;
-            /*box-shadow: inset 0px 0px 5px rgba(0, 0, 0, .15);*/
-            /*border-top-left-radius: 3px;*/
-            /*border-top-right-radius: 3px;*/
-            float:left;
-            vertical-align: top;
-            box-sizing: border-box;
-        
-        }
-        
-        .flexlayout__tab_button--selected {
-            color: #ddd;
-            background-color: #222;
-        }
-        
-        .flexlayout__tab_button--unselected {
-            color: gray;
-        }
-        
-        .flexlayout__tab_button_leading {
-            float: left;
-            display:inline-block;
-        }
-        
-        .flexlayout__tab_button_content {
-            float: left;
-            display:inline-block;
-        }
-        
-        .flexlayout__tab_button_textbox {
-            float: left;
-            border: none;
-            color:lightgreen;
-            background-color:#222;
-        }
-        .flexlayout__tab_button_textbox:focus {
-            outline: none;
-        }
-        
-        .flexlayout__tab_button_trailing {
-            float: left;
-            display:inline-block;
-            margin-left:5px;
-            margin-top:3px;
-            width:8px;
-            height:8px;
-        }
-        
-        .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
-        .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
-            //background: transparent url("../images/close_white.png") no-repeat center;
-        }
-        
-        .flexlayout__tab_button_overflow {
-            float: left;
-            width: 20px;
-            height:15px;
-            margin-top:2px;
-            padding-left:12px;
-            border:none;
-            font-size: 10px;
-            color:lightgray;
-            font-family: Arial, sans-serif;
-            //background: transparent url("../images/more.png") no-repeat left;
-        }
-        
-        .flexlayout__tabset_header
-        {
-            position: absolute;
-            left: 0;
-            right: 0;
-            color:#eee;
-            background-color: #212121;
-            padding:3px 3px 3px 5px;
-            /*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
-            box-sizing: border-box;
-        }
-        
-        .flexlayout__tab_header_inner {
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 10000px;
-        }
-        
-        .flexlayout__tab_header_outer {
-            background-color: black;
-            position: absolute;
-            left: 0;
-            right: 0;
-            /*top: 0px;*/
-            /*height: 100px;*/
-            overflow: hidden;
-        }
-        
-        .flexlayout__tabset-selected
-        {
-            //background-image: linear-gradient(#111, #444);
-        }
-        
-        .flexlayout__tabset-maximized
-        {
-            //background-image: linear-gradient(#666, #333);
-        }
-        
-        .flexlayout__tab_toolbar {
-            position:absolute;
-            display:flex;
-            flex-direction: row-reverse;
-            align-items: center;
-            top:0;
-            bottom:0;
-            right:0;
-        }
-        
-        .flexlayout__tab_toolbar_button-min {
-            width:20px;
-            height:20px;
-            border:none;
-            outline-width: 0;
-            //background: transparent url("../images/maximize.png") no-repeat center;
-        
-        }
-        .flexlayout__tab_toolbar_button-max {
-            width:20px;
-            height:20px;
-            border:none;
-            outline-width: 0;
-            //background: transparent url("../images/restore.png") no-repeat center;
-        }
-        
-        .flexlayout__popup_menu {
-        }
-        
-        .flexlayout__popup_menu_item {
-            padding: 2px 10px 2px 10px;
-            color:#ddd;
-        }
-        
-        .flexlayout__popup_menu_item:hover {
-            background-color: #444444;
-        }
-        
-        .flexlayout__popup_menu_container {
-            box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
-            border: 1px solid #555;
-            background: #222;
-            border-radius:3px;
-            position:absolute;
-            z-index:1000;
-        }
-        
-        
-        .flexlayout__border_top {
-            background-color:black;
-            border-bottom: 1px solid #ddd;
-            box-sizing: border-box;
-            overflow:hidden;
-        }
-        
-        .flexlayout__border_bottom {
-            background-color:black;
-            border-top: 1px solid #333;
-            box-sizing: border-box;
-            overflow:hidden;
-        }
-        .flexlayout__border_left {
-            background-color:black;
-            border-right: 1px solid #333;
-            box-sizing: border-box;
-            overflow:hidden;
-        }
-        
-        .flexlayout__border_right {
-            background-color:black;
-            border-left: 1px solid #333;
-            box-sizing: border-box;
-            overflow:hidden;
-        }
-        
-        .flexlayout__border_inner_bottom{
-            display: flex;
-        }
-        
-        .flexlayout__border_inner_left {
-            position:absolute;
-            white-space: nowrap;
-            right: 23px;
-            transform-origin:  top right;
-            transform: rotate(-90deg);
-        }
-        
-        .flexlayout__border_inner_right {
-            position:absolute;
-            white-space: nowrap;
-            left: 23px;
-            transform-origin:  top left;
-            transform: rotate(90deg);
-        }
-        
-        .flexlayout__border_button {
-            background-color: #222;
-            color:white;
-            display:inline-block;
-            white-space:nowrap;
-        
-            cursor: pointer;
-            padding: 2px 8px 3px 8px;
-            margin: 2px;
-            vertical-align: top;
-            box-sizing: border-box;
-        }
-        
-        .flexlayout__border_button--selected {
-            color: #ddd;
-            background-color: #222;
-        }
-        
-        .flexlayout__border_button--unselected {
-            color: gray;
-        }
-        
-        .flexlayout__border_button_leading {
-            float: left;
-            display:inline;
-        }
-        
-        .flexlayout__border_button_content {
-            display:inline-block;
-        }
-        
-        .flexlayout__border_button_textbox {
-            float: left;
-            border: none;
-            color:green;
-            background-color:#ddd;
-        }
-        .flexlayout__border_button_textbox:focus {
-            outline: none;
-        }
-        
-        .flexlayout__border_button_trailing {
-            display:inline-block;
-            margin-left:5px;
-            margin-top:3px;
-            width:8px;
-            height:8px;
-        }
-        
-        .flexlayout__border_button:hover .flexlayout__border_button_trailing,
-        .flexlayout__border_button--selected .flexlayout__border_button_trailing{
-            //background: transparent url("../images/close_white.png") no-repeat center;
-        }
-        
-        
-        .flexlayout__border_toolbar_left {
-            position:absolute;
-            display: flex;
-            flex-direction: column-reverse;
-            align-items: center;
-            bottom:0;
-            left:0;
-            right:0;
-        }
-        
-        .flexlayout__border_toolbar_right {
-            position:absolute;
-            display: flex;
-            flex-direction: column-reverse;
-            align-items: center;
-            bottom:0;
-            left:0;
-            right:0;
-        }
-        
-        .flexlayout__border_toolbar_top {
-            position:absolute;
-            display: flex;
-            flex-direction: row-reverse;
-            align-items: center;
-            top:0;
-            bottom:0;
-            right:0;
-        }
-        
-        .flexlayout__border_toolbar_bottom {
-            position:absolute;
-            display: flex;
-            flex-direction: row-reverse;
-            align-items: center;
-            top:0;
-            bottom:0;
-            right:0;
-        }
-        
+        bottom: 0;
+        width: 10000px;
+    }
+    
+    .flexlayout__tab_header_outer {
+        background-color: black;
+        position: absolute;
+        left: 0;
+        right: 0;
+        /*top: 0px;*/
+        /*height: 100px;*/
+        overflow: hidden;
+    }
+    
+    .flexlayout__tabset-selected
+    {
+        //background-image: linear-gradient(#111, #444);
+    }
+    
+    .flexlayout__tabset-maximized
+    {
+        //background-image: linear-gradient(#666, #333);
+    }
+    
+    .flexlayout__tab_toolbar {
+        position:absolute;
+        display:flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top:0;
+        bottom:0;
+        right:0;
+    }
+    
+    .flexlayout__tab_toolbar_button-min {
+        width:20px;
+        height:20px;
+        border:none;
+        outline-width: 0;
+        //background: transparent url("../images/maximize.png") no-repeat center;
+    
+    }
+    .flexlayout__tab_toolbar_button-max {
+        width:20px;
+        height:20px;
+        border:none;
+        outline-width: 0;
+        //background: transparent url("../images/restore.png") no-repeat center;
+    }
+    
+    .flexlayout__popup_menu {
+    }
+    
+    .flexlayout__popup_menu_item {
+        padding: 2px 10px 2px 10px;
+        color:#ddd;
+    }
+    
+    .flexlayout__popup_menu_item:hover {
+        background-color: #444444;
+    }
+    
+    .flexlayout__popup_menu_container {
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
+        border: 1px solid #555;
+        background: #222;
+        border-radius:3px;
+        position:absolute;
+        z-index:1000;
+    }
+    
+    
+    .flexlayout__border_top {
+        background-color:black;
+        border-bottom: 1px solid #ddd;
+        box-sizing: border-box;
+        overflow:hidden;
+    }
+    
+    .flexlayout__border_bottom {
+        background-color:black;
+        border-top: 1px solid #333;
+        box-sizing: border-box;
+        overflow:hidden;
+    }
+    .flexlayout__border_left {
+        background-color:black;
+        border-right: 1px solid #333;
+        box-sizing: border-box;
+        overflow:hidden;
+    }
+    
+    .flexlayout__border_right {
+        background-color:black;
+        border-left: 1px solid #333;
+        box-sizing: border-box;
+        overflow:hidden;
+    }
+    
+    .flexlayout__border_inner_bottom{
+        display: flex;
+    }
+    
+    .flexlayout__border_inner_left {
+        position:absolute;
+        white-space: nowrap;
+        right: 23px;
+        transform-origin:  top right;
+        transform: rotate(-90deg);
+    }
+    
+    .flexlayout__border_inner_right {
+        position:absolute;
+        white-space: nowrap;
+        left: 23px;
+        transform-origin:  top left;
+        transform: rotate(90deg);
+    }
+    
+    .flexlayout__border_button {
+        background-color: #222;
+        color:white;
+        display:inline-block;
+        white-space:nowrap;
+    
+        cursor: pointer;
+        padding: 2px 8px 3px 8px;
+        margin: 2px;
+        vertical-align: top;
+        box-sizing: border-box;
+    }
+    
+    .flexlayout__border_button--selected {
+        color: #ddd;
+        background-color: #222;
+    }
+    
+    .flexlayout__border_button--unselected {
+        color: gray;
+    }
+    
+    .flexlayout__border_button_leading {
+        float: left;
+        display:inline;
+    }
+    
+    .flexlayout__border_button_content {
+        display:inline-block;
+    }
+    
+    .flexlayout__border_button_textbox {
+        float: left;
+        border: none;
+        color:green;
+        background-color:#ddd;
+    }
+    .flexlayout__border_button_textbox:focus {
+        outline: none;
+    }
+    
+    .flexlayout__border_button_trailing {
+        display:inline-block;
+        margin-left:5px;
+        margin-top:3px;
+        width:8px;
+        height:8px;
+    }
+    
+    .flexlayout__border_button:hover .flexlayout__border_button_trailing,
+    .flexlayout__border_button--selected .flexlayout__border_button_trailing{
+        //background: transparent url("../images/close_white.png") no-repeat center;
+    }
+    
+    
+    .flexlayout__border_toolbar_left {
+        position:absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        bottom:0;
+        left:0;
+        right:0;
+    }
+    
+    .flexlayout__border_toolbar_right {
+        position:absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        bottom:0;
+        left:0;
+        right:0;
+    }
+    
+    .flexlayout__border_toolbar_top {
+        position:absolute;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top:0;
+        bottom:0;
+        right:0;
+    }
+    
+    .flexlayout__border_toolbar_bottom {
+        position:absolute;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        top:0;
+        bottom:0;
+        right:0;
     }
+    
 }
\ No newline at end of file
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index 51323e94b..b6fff6ba0 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -37,7 +37,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                         {
                             "type": "tab",
                             "name": "CHILD #1",
-                            "component": "grid",
+                            "component": "doc1",
                         }
                     ]
                 },
@@ -49,7 +49,19 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
                         {
                             "type": "tab",
                             "name": "CHILD #2",
-                            "component": "grid",
+                            "component": "doc2",
+                        }
+                    ]
+                },
+                {
+                    "type": "tabset",
+                    "weight": 50,
+                    "selected": 0,
+                    "children": [
+                        {
+                            "type": "tab",
+                            "name": "CHILD #3",
+                            "component": "doc3",
                         }
                     ]
                 }
@@ -107,7 +119,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
             e.stopPropagation();
             e.preventDefault();
         } else {
-            if (e.buttons === 1 && SelectionManager.IsSelected(this.props.ContainingDocumentView!)) {
+            if (e.buttons === 1 && this.active) {
                 e.stopPropagation();
             }
         }
@@ -117,14 +129,20 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         if (component === "button") {
             return <button>{node.getName()}</button>;
         }
-        if (component === "grid") {
-            let which = this._times++ % 3;
-            if (which == 0)
-                return <div style={{ backgroundColor: "blue", width: 100, height: 100 }}></div>
-            if (which == 1)
-                return <div style={{ backgroundColor: "yellow", width: 100, height: 100 }}></div>
-            if (which == 2)
-                return <div style={{ backgroundColor: "red", width: 100, height: 100 }}></div>
+        console.log("Gettting " + component);
+        const { fieldKey, Document: Document } = this.props;
+        const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
+        if (component === "doc1") {
+            return (<DocumentView key={value[ 0 ].Id} ContainingCollectionView={this} Document={value[ 0 ]} ContainingDocumentView={this.props.ContainingDocumentView} />);
+        }
+        if (component === "doc2") {
+            return (<DocumentView key={value[ 1 ].Id} ContainingCollectionView={this} Document={value[ 1 ]} ContainingDocumentView={this.props.ContainingDocumentView} />);
+        }
+        if (component === "doc3") {
+            return (<DocumentView key={value[ 2 ].Id} ContainingCollectionView={this} Document={value[ 2 ]} ContainingDocumentView={this.props.ContainingDocumentView} />);
+        }
+        if (component === "text") {
+            return (<div className="panel">Panel {node.getName()}</div>);
         }
     }
 
@@ -132,21 +150,20 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
         const { fieldKey, Document: Document } = this.props;
 
         const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []);
-        const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
-        const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
-        const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+        // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
+        var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+        var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0));
         return (
             <div className="border" style={{
                 borderStyle: "solid",
                 borderWidth: `${CollectionDockingView.BORDER_WIDTH}px`,
             }}>
-                <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} style={{
-                    width: "100%",
-                    height: `calc(100% - 2*${CollectionDockingView.BORDER_WIDTH}px)`,
-                }} ref={this._containerRef}>
-                    <div className="collectiondockingview" ref={this._canvasRef}>
-                        <FlexLayout.Layout model={this._model} factory={this.factory} />
-                    </div>
+                <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+                    style={{
+                        width: "100%",
+                        height: `calc(100% - 2*${CollectionDockingView.BORDER_WIDTH}px)`,
+                    }} >
+                    <FlexLayout.Layout model={this._model} factory={this.factory} />
                 </div>
             </div>
         );
diff --git a/src/views/collections/CollectionFreeFormView.scss b/src/views/collections/CollectionFreeFormView.scss
index 31e9985bc..2b68ba981 100644
--- a/src/views/collections/CollectionFreeFormView.scss
+++ b/src/views/collections/CollectionFreeFormView.scss
@@ -1,6 +1,11 @@
 .collectionfreeformview-container {
-    position: relative;
+    position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
+    .collectionfreeformview {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 3ee70213f..517d691f9 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { DocumentDecorations } from "../../DocumentDecorations";
 import { ContextMenu } from "../ContextMenu";
 import { Opt } from "../../fields/Field";
 import { DragManager } from "../../util/DragManager";
+import { number } from "prop-types";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
 
 interface DocumentViewProps {
@@ -193,14 +194,16 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     //
     // 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 } {
-
+    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): { ScreenX: Opt<number>, ScreenY: Opt<number> } {
+        if (this.props.ContainingCollectionView != undefined && !(this.props.ContainingCollectionView instanceof CollectionFreeFormView)) {
+            return { ScreenX: undefined, ScreenY: undefined };
+        }
         let W = this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
         let H = CollectionFreeFormView.BORDER_WIDTH;
         let Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
         let Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
-        let parentX = (localX - W / 2) * Ss + (Xx + Panxx) + W / 2;
-        let parentY = (localY - H) * Ss + (Yy + Panyy) + H;
+        let parentX: Opt<number> = (localX - W / 2) * Ss + (Xx + Panxx) + W / 2;
+        let parentY: Opt<number> = (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.
@@ -295,11 +298,12 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     render() {
+        let freeStyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
-                transform: this.transform,
-                width: this.width,
-                height: this.height,
+                transform: freeStyling ? this.transform : "",
+                width: freeStyling ? this.width : "100%",
+                height: freeStyling ? this.height : "100%",
             }}
                 onContextMenu={this.onContextMenu}
                 onPointerDown={this.onPointerDown}>
@@ -307,5 +311,4 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             </div>
         );
     }
-
 }
\ No newline at end of file