Side Space

CanvasApp/Canvas.js

@@ -711,7 +711,7 @@ function newCanvas () {
       let container
 
       /* We check if the mouse is over an element of the Side Space / */
-      container = thisObject.sideSpace.getContainer(point)
+      container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -854,7 +854,7 @@ function newCanvas () {
 
       /* We check if the mouse is over an element of the Designe Space / */
       if (thisObject.sideSpace !== undefined) {
-        container = thisObject.sideSpace.getContainer(point)
+        container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()

CanvasApp/DesignSpace/Workspace/Workspace.js

@@ -11,6 +11,7 @@ function newWorkspace () {
     enabled: false,
     nodeChildren: undefined,
     eventsServerClients: new Map(),
+    replaceWorkspaceByLoadingOne: replaceWorkspaceByLoadingOne,
     save: saveWorkspace,
     getHierarchyHeads: getHierarchyHeads,
     getNodeThatIsOnFocus: getNodeThatIsOnFocus,
@@ -68,7 +69,7 @@ function newWorkspace () {
   let workingAtTask = 0
   let circularProgressBar = newBusyProgressBar()
   circularProgressBar.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
-  let droppedNode
+  let loadedWorkspaceNode
   let sessionTimestamp = (new Date()).valueOf()
   window.localStorage.setItem('Session Timestamp', sessionTimestamp)
 
@@ -238,8 +239,8 @@ function newWorkspace () {
           workingAtTask++
           break
         case 3:
-          thisObject.workspaceNode = droppedNode
-          droppedNode = undefined
+          thisObject.workspaceNode = loadedWorkspaceNode
+          loadedWorkspaceNode = undefined
           workingAtTask++
           break
         case 4:
@@ -339,6 +340,30 @@ function newWorkspace () {
     return nodes
   }
 
+  function replaceWorkspaceByLoadingOne (name) {
+    let blobService = newFileStorage()
+    blobService.getFileFromHost('LoadWorkspace' + '/' + name, onFileReceived, true)
+    function onFileReceived (err, text, response) {
+      if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+        canvas.cockpitSpace.setStatus('Could not load the Workspace called "' + name + '". ', 500, canvas.cockpitSpace.statusTypes.WARNING)
+        return
+      }
+
+      loadedWorkspaceNode = JSON.parse(text)
+
+      canvas.cockpitSpace.toTop()
+
+      let position = {
+        x: browserCanvas.width / 2,
+        y: browserCanvas.height / 2
+      }
+
+      circularProgressBar.initialize(position)
+      circularProgressBar.visible = true
+      workingAtTask = 1
+    }
+  }
+
   function spawn (nodeText, mousePointer) {
     try {
       let point = {
@@ -349,9 +374,10 @@ function newWorkspace () {
       spawnPosition.x = point.x
       spawnPosition.y = point.y
 
-      droppedNode = JSON.parse(nodeText)
+      let droppedNode = JSON.parse(nodeText)
 
       if (droppedNode.type === 'Workspace') {
+        loadedWorkspaceNode = droppedNode
         circularProgressBar.initialize(mousePointer)
         circularProgressBar.visible = true
         workingAtTask = 1

CanvasApp/Globals.js

@@ -190,8 +190,7 @@ const MAX_PLOTABLE_DATE = maxDate;
 
 const TOP_SPACE_HEIGHT = 40
 const COCKPIT_SPACE_HEIGHT = 30;
-const BREAKPOINT_HEIGHT = 15;
-const SIDE_PANEL_WIDTH = 450
+const SIDE_PANEL_WIDTH = 350
 let COCKPIT_SPACE_POSITION = browserCanvas.height - COCKPIT_SPACE_HEIGHT
 
 const LAYER_STATUS = {

CanvasApp/SideSpace/ListItem.js

@@ -19,17 +19,37 @@ function newListItem () {
   thisObject.container.isDraggeable = false
   thisObject.container.isWheelable = false
   thisObject.container.detectMouseOver = true
+  thisObject.container.isClickeable = true
+  thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
+  thisObject.container.frame.height = SIDE_PANEL_WIDTH * 0.75
 
+  let name
+  let type
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+  let onMouseClickEventSubscriptionId
+
+  let isMouseOver = false
   return thisObject
 
   function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSubscriptionId)
+
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
   }
 
-  function initialize () {
+  function initialize (pName, pType) {
+    name = pName
+    type = pType
 
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
   }
 
   function getContainer (point) {
@@ -38,8 +58,16 @@ function newListItem () {
     }
   }
 
-  function onMouseClick (event) {
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
 
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function onMouseClick (event) {
+    canvas.designSpace.workspace.replaceWorkspaceByLoadingOne(name)
   }
 
   function physics () {
@@ -47,12 +75,12 @@ function newListItem () {
   }
 
   function draw () {
-    let label1 = 'TEST NAME'
-
+    let icon = canvas.designSpace.iconByUiObjectType.get(type)
     let backgroundColor = UI_COLOR.BLACK
+    let labelColor
 
     const RED_LINE_HIGHT = 4
-    const OPACITY = 0.75
+    const OPACITY = 1
 
     let params = {
       cornerRadius: 0,
@@ -64,9 +92,16 @@ function newListItem () {
       opacity: OPACITY
     }
 
+    if (isMouseOver === false) {
+      labelColor = UI_COLOR.WHITE
+    } else {
+      labelColor = UI_COLOR.TITANIUM_YELLOW
+    }
+
     roundedCornersBackground(params)
 
-    drawLabel(label1, 1 / 2, 6 / 10, -5, 0, label1FontSize, thisObject.container)
-    drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawLabel(name, 1 / 2, 3.0 / 10, -5, 0, 15, thisObject.container, labelColor)
+    drawLabel(type, 1 / 2, 7.2 / 10, -5, 0, 15, thisObject.container, labelColor)
+    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 80, thisObject.container)
   }
 }

CanvasApp/SideSpace/ListView.js

@@ -10,6 +10,9 @@ function newListView () {
     listItems: [],
     payload: undefined,
     isVisible: false,
+    resize: resize,
+    turnOn: turnOn,
+    turnOff: turnOff,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -27,29 +30,22 @@ function newListView () {
 
   let listItemsMap = new Map()
   let visibleListItems = []
-  let firstVisibleListItem = 1
-
-  const LAYER_SEPARATION = 0
+  let firstVisibleListItem
 
   let headerHeight = 40
-  let footerHeight = 10
-  let listItemHeight = 70
-  let desiredVisibleListItems = 5
-  let posibleVisibleListItems = 5
-  let desiredObjectHeight = (listItemHeight + LAYER_SEPARATION) * desiredVisibleListItems + headerHeight + footerHeight
-  let posibleObjectHeight = (listItemHeight + LAYER_SEPARATION) * posibleVisibleListItems + headerHeight + footerHeight
+  let footerHeight = 30
+  let listItemHeight = SIDE_PANEL_WIDTH * 0.75
+
+  let posibleVisibleListItems
+
+  let itemSeparation
 
   let onMouseWheelEventSuscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
 
-  let isMouseOver
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
     listItemsMap = undefined
     visibleListItems = undefined
@@ -64,19 +60,35 @@ function newListView () {
   function initialize () {
     thisObject.container.name = MODULE_NAME
     thisObject.container.frame.containerName = thisObject.container.name
-    thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.80
-    thisObject.container.frame.height = headerHeight
+    thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
 
     let position = { // Default position
-      x: SIDE_PANEL_WIDTH * 0.10,
+      x: SIDE_PANEL_WIDTH * 0.25 / 2,
       y: 20
     }
 
     thisObject.container.frame.position = position
 
     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))
+    if ((posibleVisibleListItems - 1) !== 0) {
+      itemSeparation = (spaceForListItems - listItemHeight * posibleVisibleListItems) / (posibleVisibleListItems - 1)
+    } else {
+      itemSeparation = 0
+    }
+  }
+
+  function turnOn () {
+    firstVisibleListItem = 1
 
     callServer(undefined, 'ListWorkspaces', onResponse)
 
@@ -87,23 +99,23 @@ function newListView () {
       }
 
       let workspacelist = JSON.parse(text)
+      thisObject.listItems = []
       for (let i = 0; i < workspacelist.length; i++) {
-        let workspace = workspacelist[i]
+        let workspace = workspacelist[i].replace('.json', '')
         let listItem = newListItem()
-        listItem.initialize()
+        listItem.initialize(workspace, 'Workspace')
         listItem.container.connectToParent(thisObject.container, false, false)
+
         thisObject.listItems.push(listItem)
       }
+      calculateVisbleListItems()
       isInitialized = true
+      thisObject.isVisible = true
     }
   }
 
-  function onMouseOver (event) {
-    isMouseOver = true
-  }
-
-  function onMouseNotOver () {
-    isMouseOver = false
+  function turnOff () {
+    thisObject.isVisible = false
   }
 
   function onMouseWheel (event) {
@@ -114,19 +126,13 @@ function newListView () {
       delta = 1
     }
 
-    if (event.y - thisObject.container.frame.position.y - CURRENT_TOP_MARGIN < headerHeight) { // Mouse wheel over the header, not a listItem
-      desiredVisibleListItems = desiredVisibleListItems + delta
-      if (desiredVisibleListItems < 0) { desiredVisibleListItems = 0 }
-      if (desiredVisibleListItems > thisObject.listItems.length) { desiredVisibleListItems = thisObject.listItems.length }
-    } else {
-      firstVisibleListItem = firstVisibleListItem + delta
-    }
-    desiredObjectHeight = (listItemHeight + LAYER_SEPARATION) * desiredVisibleListItems + headerHeight + footerHeight
+    firstVisibleListItem = firstVisibleListItem + delta
+
     calculateVisbleListItems()
   }
 
   function calculateVisbleListItems () {
-    let availableSlots = posibleVisibleListItems
+    let availableSlots = Math.trunc(posibleVisibleListItems)
 
     if (firstVisibleListItem < 1) { firstVisibleListItem = 1 }
     if (firstVisibleListItem > (thisObject.listItems.length - availableSlots + 1)) { firstVisibleListItem = thisObject.listItems.length - availableSlots + 1 }
@@ -138,7 +144,7 @@ function newListView () {
         let listItem = thisObject.listItems[i]
 
         listItem.container.frame.position.x = 0
-        listItem.container.frame.position.y = (listItemHeight + LAYER_SEPARATION) * visibleListItems.length + headerHeight
+        listItem.container.frame.position.y = (listItemHeight + itemSeparation) * visibleListItems.length + headerHeight
 
          /* Add to Visible Product Array */
         visibleListItems.push(listItem)
@@ -147,17 +153,9 @@ function newListView () {
   }
 
   function getContainer (point, purpose) {
-    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
+    if (isInitialized === false || thisObject.isVisible === false) { return }
     let container
 
-    if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
-      container = thisObject.upDownButton.getContainer(point)
-      if (container !== undefined) { return container }
-
-      container = thisObject.leftRightButton.getContainer(point)
-      if (container !== undefined) { return container }
-    }
-
      /* First we check if thisObject point is inside thisObject space. */
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
        /* Now we see which is the inner most container that has it */
@@ -165,32 +163,13 @@ function newListView () {
         container = visibleListItems[i].getContainer(point)
 
         if (container !== undefined) {
-          let checkPoint = {
-            x: point.x,
-            y: point.y
-          }
-
-          checkPoint = thisObject.fitFunction(checkPoint)
-
-          if (point.x === checkPoint.x && point.y === checkPoint.y) {
-            if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
-              return container
-            }
+          if (container.isForThisPurpose(purpose) === true) {
+            return container
           }
         }
       }
 
-     /* The point does not belong to any inner container, so we return the current container. */
-      let checkPoint = {
-        x: point.x,
-        y: point.y
-      }
-
-      checkPoint = thisObject.fitFunction(checkPoint)
-
-      if (point.x === checkPoint.x && point.y === checkPoint.y) {
-        return thisObject.container
-      }
+      return thisObject.container
     }
   }
 
@@ -202,25 +181,33 @@ function newListView () {
   }
 
   function physics () {
+    if (isInitialized === false || thisObject.isVisible === false) { return }
     if (isInitialized === false) { return }
     if (thisObject.isVisible === false) { return }
     childrenPhysics()
   }
 
   function draw () {
-    if (isInitialized === false || thisObject.visible === false) { return }
+    if (isInitialized === false || thisObject.isVisible === false) { return }
 
-    drawHeader()
+    drawBackground()
+    drawChildren()
     drawScrollBar()
   }
 
-  function drawHeader () {
-    let label1 = 'HEADER'
+  function drawChildren () {
+    for (let i = 0; i < visibleListItems.length; i++) {
+      let listItem = visibleListItems[i]
+      if (listItem !== undefined) {
+        listItem.draw()
+      }
+    }
+  }
 
-    let icon1 = canvas.designSpace.iconByUiObjectType.get('Workspace')
+  function drawBackground () {
+    let label = 'Your Workspaces'
 
     let backgroundColor = UI_COLOR.WHITE
-
     let params = {
       cornerRadius: 5,
       lineWidth: 1,
@@ -233,8 +220,7 @@ function newListView () {
 
     roundedCornersBackground(params)
 
-    drawLabel(label1, 1 / 2, 0, 0, 15, 9, thisObject.container, UI_COLOR.BLACK)
-    drawIcon(icon1, 1 / 8, 0, 0, 20, 28, thisObject.container)
+    drawLabel(label, 1 / 2, 0, 0, 25, 15, thisObject.container, UI_COLOR.BLACK)
   }
 
   function drawScrollBar () {
@@ -248,11 +234,11 @@ function newListView () {
         x: thisObject.container.frame.width - xOffset,
         y: thisObject.container.frame.height - footerHeight
       }
-      let ratio = posibleVisibleListItems / thisObject.listItems.length
-      let handleHeight = (posibleVisibleListItems * (listItemHeight + LAYER_SEPARATION)) * ratio
+      let ratio = (posibleVisibleListItems * listItemHeight + (posibleVisibleListItems - 1) * itemSeparation) / (thisObject.listItems.length * listItemHeight + (thisObject.listItems.length - 1) * itemSeparation)
+      let handleHeight = posibleVisibleListItems * (listItemHeight * ratio) + (posibleVisibleListItems - 1) * itemSeparation * ratio
       let handleTopPoint = {
         x: thisObject.container.frame.width - xOffset,
-        y: headerHeight + (listItemHeight + LAYER_SEPARATION) * ratio * (firstVisibleListItem - 1)
+        y: headerHeight + (listItemHeight * ratio * (firstVisibleListItem - 1) + itemSeparation * ratio * (firstVisibleListItem - 1))
       }
       let handleBottomPoint = {
         x: thisObject.container.frame.width - xOffset,

CanvasApp/SideSpace/SidePanelTab.js

@@ -3,6 +3,7 @@ function newSidePanelTab () {
   let thisObject = {
     pointerDirection: 'left',
     container: undefined,
+    resize: resize,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -28,20 +29,27 @@ 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'
+      thisObject.container.eventHandler.raiseEvent('opening')
     } else {
       animation = 'closing'
+      thisObject.container.eventHandler.raiseEvent('closing')
     }
   }
 
@@ -71,28 +79,37 @@ function newSidePanelTab () {
     if (animation === 'opening') {
       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'
+      if (xOffset >= thisObject.container.parentContainer.frame.width) {
+        setOpened()
+        thisObject.container.eventHandler.raiseEvent('opened')
       }
     }
 
     if (animation === 'closing') {
       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'
+      if (xOffset <= 0) {
+        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
@@ -218,4 +235,3 @@ function newSidePanelTab () {
     browserCanvasContext.stroke()
   }
 }
-

CanvasApp/Spaces/SideSpace.js

@@ -6,7 +6,8 @@ function newSideSpace () {
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   let isInitialized = false
@@ -22,6 +23,10 @@ function newSideSpace () {
   let listView
 
   resize()
+
+  let openingEventSubscriptionId
+  let closedEventSubscriptionId
+  let browserResizedEventSubscriptionId
   return thisObject
 
   function initialize () {
@@ -29,16 +34,24 @@ function newSideSpace () {
     thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
     thisObject.sidePanelTab.initialize()
 
-    canvas.eventHandler.listenToEvent('Browser Resized', resize)
+    browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
 
     initializeListView()
     isInitialized = true
   }
 
+  function finalize () {
+    canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
+    thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
+    thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
+  }
+
   function initializeListView () {
     listView = newListView()
     listView.initialize()
     listView.container.connectToParent(thisObject.container, false, false)
+    openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn)
+    closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff)
   }
 
   function resize () {
@@ -46,15 +59,23 @@ 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) {
+  function getContainer (point, purpose) {
     let container
 
-    container = thisObject.sidePanelTab.getContainer(point)
+    container = thisObject.sidePanelTab.getContainer(point, purpose)
     if (container !== undefined) { return container }
 
-    container = listView.getContainer(point)
+    container = listView.getContainer(point, purpose)
     if (container !== undefined) { return container }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {