Intgrading the docs

DesignSpace/Workspace/Workspace.js

@@ -685,8 +685,7 @@ function newWorkspace() {
                     let definition = getNodeDefinition(payload.node)
                     if (definition !== undefined) {
                         if (definition.docURL !== undefined) {
-                            let newTab = window.open(definition.docURL, '_blank')
-                            newTab.focus()
+                            canvas.docSpace.navigateTo(definition.docURL)
                         }
                     }
                 }

SideSpace/SidePanelTab.js

@@ -4,6 +4,8 @@ function newSidePanelTab() {
         screenside: undefined,
         pointerDirection: undefined,
         container: undefined,
+        open: open,
+        close: close,
         resize: resize,
         physics: physics,
         draw: draw,
@@ -61,11 +63,19 @@ function newSidePanelTab() {
                 break
             }
         }
-        
+
         thisObject.container.frame.position.y = 69
         setClosed()
     }
 
+    function open() {
+        animation = 'opening'
+    }
+
+    function close() {
+        animation = 'closing'
+    }
+
     function onMouseClick(event) {
         switch (thisObject.screenside) {
             case 'left': {

Spaces/DocSpace.js

@@ -3,6 +3,7 @@ function newDocSpace() {
     let thisObject = {
         sidePanelTab: undefined,
         container: undefined,
+        navigateTo: navigateTo,
         physics: physics,
         draw: draw,
         getContainer: getContainer,
@@ -43,8 +44,14 @@ function newDocSpace() {
         thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
     }
 
+    function navigateTo(url) {
+        let docIFrame = document.getElementById('docIFrame')
+        docIFrame.src = url
+        thisObject.sidePanelTab.open()
+    }
+
     function resize() {
-        thisObject.container.frame.width = SIDE_PANEL_WIDTH * 2
+        thisObject.container.frame.width = 900
         thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
         thisObject.container.frame.position.x = browserCanvas.width
         thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
@@ -69,6 +76,29 @@ function newDocSpace() {
 
     function physics() {
         thisObject.sidePanelTab.physics()
+        docAppDivPhysics()
+        iFramePhysics()
+
+        function docAppDivPhysics() {
+            let docAppDiv = document.getElementById('docApp')
+            docAppDivPosition = {
+                x: 0,
+                y: 0
+            }
+            docAppDivPosition = thisObject.container.frame.frameThisPoint(docAppDivPosition)
+            docAppDiv.style = ' overflow-x: hidden;  ' + 
+            'position:fixed; top:' + docAppDivPosition.y + 'px; ' + 
+            'left:' + docAppDivPosition.x + 'px; z-index:1; ' + 
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        }
+
+        function iFramePhysics() {
+            let docIFrame = document.getElementById('docIFrame')
+            docIFrame.style = 'overflow-x: hidden; ' + 
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        }
     }
 
     function draw() {