Side Panel Opening and Closing

Canvas.js

@@ -578,8 +578,21 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Design Space / */
+      /* We check if the mouse is over an element of the Side Space / */
+      container = thisObject.sideSpace.getContainer(point)
 
+      if (container !== undefined && container.isDraggeable === true) {
+        containerBeingDragged = container
+        containerDragStarted = true
+        containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
+        return
+      }
+
+      if (container !== undefined && container.isDraggeable === false) {
+        return
+      }
+
+      /* We check if the mouse is over an element of the Design Space / */
       container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -593,8 +606,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the Top Space / */
-
+      /* We check if the mouse is over an element of the Top Space / */
       container = thisObject.topSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -604,8 +616,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the CockpitSpace / */
-
+      /* We check if the mouse is over an element of the CockpitSpace / */
       container = thisObject.cockpitSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
@@ -620,8 +631,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a panel/ */
-
+      /* We check if the mouse is over a panel/ */
       container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined && event.shiftKey === false) {
@@ -640,8 +650,7 @@ function newCanvas () {
         return
       }
 
-           /*  we check if it is over any of the existing containers at the Charting Space. */
-
+      /*  we check if it is over any of the existing containers at the Charting Space. */
       container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined) {
@@ -698,8 +707,15 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Design Space / */
+      /* We check if the mouse is over an element of the Side Space / */
+      container = thisObject.sideSpace.getContainer(point)
 
+      if (container !== undefined && container.isClickeable === true) {
+        container.eventHandler.raiseEvent('onMouseClick', point)
+        return
+      }
+
+      /* We check if the mouse is over an element of the Design Space / */
       container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -707,8 +723,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the Top Space / */
-
+      /* We check if the mouse is over an element of the Top Space / */
       container = thisObject.topSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -716,8 +731,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over an element of the CockpitSpace / */
-
+      /* We check if the mouse is over an element of the CockpitSpace / */
       container = thisObject.cockpitSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -725,8 +739,7 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a panel/ */
-
+      /* We check if the mouse is over a panel/ */
       container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -734,8 +747,7 @@ function newCanvas () {
         return
       }
 
-           /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
-
+      /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
       container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
@@ -837,6 +849,16 @@ function newCanvas () {
 
       let container
 
+      /* We check if the mouse is over an element of the Designe Space / */
+      if (thisObject.sideSpace !== undefined) {
+        container = thisObject.sideSpace.getContainer(point)
+
+        if (container !== undefined && container.detectMouseOver === true) {
+          containerFound()
+          return
+        }
+      }
+
       /* We check if the mouse is over an element of the Designe Space / */
       if (thisObject.designSpace !== undefined) {
         container = thisObject.designSpace.getContainer(point)
@@ -934,6 +956,16 @@ function newCanvas () {
 
       event.mousePosition = point
       let container
+
+      /* Side Space */
+      container = canvas.sideSpace.getContainer({ x: point.x, y: point.y })
+
+      if (container !== undefined && container.isWheelable === true) {
+        container.eventHandler.raiseEvent('onMouseWheel', event)
+        return false  // This instructs the browser not to take the event and scroll the page.
+      }
+
+      /* Panel Space */
       container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {
@@ -941,8 +973,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-           /* We try the CockpitSpace. */
-
+      /* We try the CockpitSpace. */
       container = canvas.cockpitSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {
@@ -950,8 +981,7 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-          /*   Charting Space. */
-
+      /*   Charting Space. */
       container = canvas.chartingSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
       if (container !== undefined && container.isWheelable === true) {
         container.eventHandler.raiseEvent('onMouseWheel', event)
@@ -963,8 +993,7 @@ function newCanvas () {
         return false
       }
 
-         /* We try second with floating objects. */
-
+      /* We try second with floating objects. */
       container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y })
 
       if (container !== undefined && container.isWheelable === true) {

SideSpace/SidePanelTab.js

@@ -3,6 +3,7 @@ function newSidePanelTab () {
   let thisObject = {
     pointerDirection: 'left',
     container: undefined,
+    physics: physics,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize
@@ -28,7 +29,7 @@ function newSidePanelTab () {
     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 = 20
+    thisObject.container.frame.position.y = 69
 
     ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
 
@@ -53,9 +54,13 @@ function newSidePanelTab () {
     }
   }
 
-  function draw () {
+  function physics () {
     if (isInitialized === false) { return }
     animate()
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
     borders()
     arrow()
   }

Spaces/SideSpace.js

@@ -1,7 +1,6 @@
 function newSideSpace () {
   const MODULE_NAME = 'Side Space'
   let thisObject = {
-    areas: [],
     sidePanelTab: undefined,
     container: undefined,
     physics: physics,
@@ -52,18 +51,13 @@ function newSideSpace () {
   }
 
   function physics () {
-
+    thisObject.sidePanelTab.physics()
   }
 
   function draw () {
     if (isInitialized === false) { return }
     borders()
     thisObject.sidePanelTab.draw()
-
-    for (let i = 0; i < thisObject.areas.length; i++) {
-      let area = thisObject.areas[i]
-      area.draw()
-    }
   }
 
   function borders () {