Resize working

SideSpace/ListView.js

@@ -10,6 +10,7 @@ function newListView () {
     listItems: [],
     payload: undefined,
     isVisible: false,
+    resize: resize,
     turnOn: turnOn,
     turnOff: turnOff,
     physics: physics,
@@ -29,7 +30,7 @@ function newListView () {
 
   let listItemsMap = new Map()
   let visibleListItems = []
-  let firstVisibleListItem = 1
+  let firstVisibleListItem
 
   let headerHeight = 40
   let footerHeight = 30
@@ -72,7 +73,17 @@ function newListView () {
     }
 
     thisObject.container.frame.position = position
-    thisObject.container.frame.height = browserCanvas.height - position.y * 2
+
+    onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+
+    resize()
+    turnOn()
+  }
+
+  function resize () {
+    thisObject.container.frame.height = browserCanvas.height - thisObject.container.frame.position.y * 2
 
     let spaceForListItems = (thisObject.container.frame.height - headerHeight - footerHeight)
     posibleVisibleListItems = Math.trunc(spaceForListItems / (listItemHeight))
@@ -81,15 +92,11 @@ function newListView () {
     } else {
       itemSeparation = 0
     }
-
-    onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-
-    turnOn()
   }
 
   function turnOn () {
+    firstVisibleListItem = 1
+
     callServer(undefined, 'ListWorkspaces', onResponse)
 
     function onResponse (err, text) {

SideSpace/SidePanelTab.js

@@ -3,6 +3,7 @@ function newSidePanelTab () {
   let thisObject = {
     pointerDirection: 'left',
     container: undefined,
+    resize: resize,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -28,15 +29,20 @@ function newSidePanelTab () {
   function initialize () {
     thisObject.container.frame.width = TAB_WIDTH
     thisObject.container.frame.height = TAB_HEIGHT
-    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
-    thisObject.container.frame.position.y = 69
 
     ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
 
     thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    resize()
     isInitialized = true
   }
 
+  function resize () {
+    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+    thisObject.container.frame.position.y = 69
+    setClosed()
+  }
+
   function onMouseClick (event) {
     if (thisObject.pointerDirection === 'left') {
       animation = 'opening'
@@ -74,11 +80,7 @@ function newSidePanelTab () {
       xOffset = xOffset + STEP
       thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
       if (xOffset >= thisObject.container.parentContainer.frame.width) {
-        animation = 'none'
-        xOffset = thisObject.container.parentContainer.frame.width
-        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-        thisObject.container.parentContainer.status = 'visible'
-        thisObject.pointerDirection = 'right'
+        setOpened()
         thisObject.container.eventHandler.raiseEvent('opened')
       }
     }
@@ -87,16 +89,27 @@ function newSidePanelTab () {
       xOffset = xOffset - STEP
       thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
       if (xOffset <= 0) {
-        animation = 'none'
-        xOffset = 0
-        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
-        thisObject.container.parentContainer.status = 'hidden'
-        thisObject.pointerDirection = 'left'
+        setClosed()
         thisObject.container.eventHandler.raiseEvent('closed')
       }
     }
   }
 
+  function setOpened () {
+    animation = 'none'
+    xOffset = thisObject.container.parentContainer.frame.width
+    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+    thisObject.container.parentContainer.status = 'visible'
+    thisObject.pointerDirection = 'right'
+  }
+  function setClosed () {
+    animation = 'none'
+    xOffset = 0
+    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+    thisObject.container.parentContainer.status = 'hidden'
+    thisObject.pointerDirection = 'left'
+  }
+
   function arrow () {
     let point1
     let point2

Spaces/SideSpace.js

@@ -59,6 +59,14 @@ function newSideSpace () {
     thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
     thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
     thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
+
+    if (listView !== undefined) {
+      listView.resize()
+    }
+
+    if (thisObject.sidePanelTab !== undefined) {
+      thisObject.sidePanelTab.resize()
+    }
   }
 
   function getContainer (point) {