Cleaning

Canvas.js

@@ -32,6 +32,7 @@ function newCanvas() {
         eventHandler: undefined,
         topSpace: undefined,
         sideSpace: undefined,
+        docSpace: undefined,
         chartingSpace: undefined,
         floatingSpace: undefined,
         panelsSpace: undefined,
@@ -61,6 +62,7 @@ function newCanvas() {
 
     function finalize() {
         try {
+            thisObject.docSpace.finalize()
             thisObject.sideSpace.finalize()
             thisObject.chartingSpace.finalize()
             thisObject.floatingSpace.finalize()
@@ -122,6 +124,9 @@ function newCanvas() {
             thisObject.sideSpace = newSideSpace()
             thisObject.sideSpace.initialize()
 
+            thisObject.docSpace = newDocSpace()
+            thisObject.docSpace.initialize()
+
             thisObject.splashScreen = newSplashScreen()
 
             let animation = newAnimation()
@@ -136,6 +141,7 @@ function newCanvas() {
             animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics)
             animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
             animation.addCallBackFunction('Side Space Physics', thisObject.sideSpace.physics)
+            animation.addCallBackFunction('Doc Space Physics', thisObject.docSpace.physics)
 
             /* Spcaces Drawing */
             animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
@@ -145,6 +151,7 @@ function newCanvas() {
             animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw)
             animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
             animation.addCallBackFunction('Side Space Draw', thisObject.sideSpace.draw)
+            animation.addCallBackFunction('Doc Space Draw', thisObject.docSpace.draw)
             animation.addCallBackFunction('Splash Screen Draw', thisObject.splashScreen.draw)
             animation.start()
         } catch (err) {
@@ -565,6 +572,20 @@ function newCanvas() {
 
             let container
 
+            /* We check if the mouse is over an element of the Doc Space / */
+            container = thisObject.docSpace.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 Side Space / */
             container = thisObject.sideSpace.getContainer(point)
 
@@ -694,6 +715,14 @@ function newCanvas() {
 
             let container
 
+            /* We check if the mouse is over an element of the Doc Space / */
+            container = thisObject.docSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
+
+            if (container !== undefined && container.isClickeable === true) {
+                container.eventHandler.raiseEvent('onMouseClick', point)
+                return
+            }
+
             /* We check if the mouse is over an element of the Side Space / */
             container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
@@ -836,7 +865,17 @@ function newCanvas() {
 
             let container
 
-            /* We check if the mouse is over an element of the Designe Space / */
+            /* We check if the mouse is over an element of the Doc Space / */
+            if (thisObject.docSpace !== undefined) {
+                container = thisObject.docSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
+
+                if (container !== undefined && container.detectMouseOver === true) {
+                    containerFound()
+                    return
+                }
+            }
+
+            /* We check if the mouse is over an element of the Side Space / */
             if (thisObject.sideSpace !== undefined) {
                 container = thisObject.sideSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
@@ -944,6 +983,14 @@ function newCanvas() {
             event.mousePosition = point
             let container
 
+            /* Doc Space */
+            container = canvas.docSpace.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.
+            }
+
             /* Side Space */
             container = canvas.sideSpace.getContainer({ x: point.x, y: point.y })
 

SideSpace/SidePanelTab.js

@@ -1,7 +1,8 @@
 function newSidePanelTab() {
     const MODULE_NAME = 'Side Panel Tab'
     let thisObject = {
-        pointerDirection: 'left',
+        screenside: undefined,
+        pointerDirection: undefined,
         container: undefined,
         resize: resize,
         physics: physics,
@@ -12,6 +13,7 @@ function newSidePanelTab() {
 
     const TAB_WIDTH = 25
     const TAB_HEIGHT = 60
+    const ANIMATION_STEP = 100
 
     let isInitialized = false
     let animation = 'none'
@@ -26,7 +28,18 @@ function newSidePanelTab() {
 
     return thisObject
 
-    function initialize() {
+    function initialize(screenside) {
+        thisObject.screenside = screenside
+        switch (thisObject.screenside) {
+            case 'left': {
+                thisObject.pointerDirection = 'left'
+                break
+            }
+            case 'right': {
+                thisObject.pointerDirection = 'right'
+                break
+            }
+        }
         thisObject.container.frame.width = TAB_WIDTH
         thisObject.container.frame.height = TAB_HEIGHT
 
@@ -38,18 +51,43 @@ function newSidePanelTab() {
     }
 
     function resize() {
-        thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+        switch (thisObject.screenside) {
+            case 'left': {
+                thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+                break
+            }
+            case 'right': {
+                thisObject.container.frame.position.x = 0 - TAB_WIDTH
+                break
+            }
+        }
+        
         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')
+        switch (thisObject.screenside) {
+            case 'left': {
+                if (thisObject.pointerDirection === 'left') {
+                    animation = 'opening'
+                    thisObject.container.eventHandler.raiseEvent('opening')
+                } else {
+                    animation = 'closing'
+                    thisObject.container.eventHandler.raiseEvent('closing')
+                }
+                break
+            }
+            case 'right': {
+                if (thisObject.pointerDirection === 'left') {
+                    animation = 'closing'
+                    thisObject.container.eventHandler.raiseEvent('closing')
+                } else {
+                    animation = 'opening'
+                    thisObject.container.eventHandler.raiseEvent('opening')
+                }
+                break
+            }
         }
     }
 
@@ -74,11 +112,20 @@ function newSidePanelTab() {
     }
 
     function animate() {
-        const STEP = 50
 
         if (animation === 'opening') {
-            xOffset = xOffset + STEP
-            thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+            xOffset = xOffset + ANIMATION_STEP
+            switch (thisObject.screenside) {
+                case 'left': {
+                    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+                    break
+                }
+                case 'right': {
+                    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset
+                    break
+                }
+            }
+
             if (xOffset >= thisObject.container.parentContainer.frame.width) {
                 setOpened()
                 thisObject.container.eventHandler.raiseEvent('opened')
@@ -86,8 +133,18 @@ function newSidePanelTab() {
         }
 
         if (animation === 'closing') {
-            xOffset = xOffset - STEP
-            thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+            xOffset = xOffset - ANIMATION_STEP
+            switch (thisObject.screenside) {
+                case 'left': {
+                    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+                    break
+                }
+                case 'right': {
+                    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset
+                    break
+                }
+            }
+
             if (xOffset <= 0) {
                 setClosed()
                 thisObject.container.eventHandler.raiseEvent('closed')
@@ -98,16 +155,36 @@ function newSidePanelTab() {
     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'
+        switch (thisObject.screenside) {
+            case 'left': {
+                thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+                thisObject.pointerDirection = 'right'
+                break
+            }
+            case 'right': {
+                thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON - xOffset
+                thisObject.pointerDirection = 'left'
+                break
+            }
+        }
     }
     function setClosed() {
         animation = 'none'
         xOffset = 0
-        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
         thisObject.container.parentContainer.status = 'hidden'
-        thisObject.pointerDirection = 'left'
+        switch (thisObject.screenside) {
+            case 'left': {
+                thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+                thisObject.pointerDirection = 'left'
+                break
+            }
+            case 'right': {
+                thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+                thisObject.pointerDirection = 'right'
+                break
+            }
+        }
     }
 
     function arrow() {

Spaces/DesignSpace.js

@@ -312,7 +312,7 @@ function newDesignSpace() {
             function onImageLoad() {
                 image.canDrawIcon = true
             }
-            image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+            image.src = PATH + name + '.png'
             thisObject.iconCollection.set(name, image)
         }
     }

Spaces/DocSpace.js

@@ -0,0 +1,148 @@
+function newDocSpace() {
+    const MODULE_NAME = 'Doc Space'
+    let thisObject = {
+        sidePanelTab: undefined,
+        container: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
+    }
+
+    let isInitialized = false
+
+    thisObject.container = newContainer()
+    thisObject.container.name = MODULE_NAME
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = true
+    thisObject.container.status = 'hidden'
+
+    resize()
+
+    let openingEventSubscriptionId
+    let closedEventSubscriptionId
+    let browserResizedEventSubscriptionId
+    return thisObject
+
+    function initialize() {
+        thisObject.sidePanelTab = newSidePanelTab()
+        thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
+        thisObject.sidePanelTab.initialize('right')
+
+        browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+        isInitialized = true
+    }
+
+    function finalize() {
+        canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
+    }
+
+    function resize() {
+        thisObject.container.frame.width = SIDE_PANEL_WIDTH * 2
+        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
+
+        if (thisObject.sidePanelTab !== undefined) {
+            thisObject.sidePanelTab.resize()
+        }
+    }
+
+    function getContainer(point, purpose) {
+        let container
+
+        container = thisObject.sidePanelTab.getContainer(point, purpose)
+        if (container !== undefined) { return container }
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function physics() {
+        thisObject.sidePanelTab.physics()
+    }
+
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (isInitialized === false) { return }
+        borders()
+        thisObject.sidePanelTab.draw()
+    }
+
+    function borders() {
+        let point1
+        let point2
+        let point3
+        let point4
+
+        point1 = {
+            x: 0,
+            y: 0
+        }
+
+        point2 = {
+            x: thisObject.container.frame.width,
+            y: 0
+        }
+
+        point3 = {
+            x: thisObject.container.frame.width,
+            y: thisObject.container.frame.height
+        }
+
+        point4 = {
+            x: 0,
+            y: thisObject.container.frame.height
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
+
+        browserCanvasContext.setLineDash([0, 0])
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point4.x, point4.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
+
+        let opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
+        browserCanvasContext.fill()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 0.3
+        browserCanvasContext.stroke()
+
+        /* Shadow */
+
+        if (thisObject.container.status !== 'hidden') {
+            for (let i = 0; i <= 30; i++) {
+                opacity = 1 - (i / 300) - 0.95
+
+                browserCanvasContext.setLineDash([0, 0])
+                browserCanvasContext.beginPath()
+                browserCanvasContext.moveTo(point2.x + i, point2.y)
+                browserCanvasContext.lineTo(point3.x + i, point3.y)
+                browserCanvasContext.closePath()
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+                browserCanvasContext.lineWidth = 1
+                browserCanvasContext.stroke()
+            }
+        }
+    }
+}

Spaces/SideSpace.js

@@ -32,7 +32,7 @@ function newSideSpace() {
     function initialize() {
         thisObject.sidePanelTab = newSidePanelTab()
         thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
-        thisObject.sidePanelTab.initialize()
+        thisObject.sidePanelTab.initialize('left')
 
         browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
 

Spaces/TopSpace.js

@@ -35,7 +35,7 @@ function newTopSpace() {
             function onImageLoad() {
                 image.canDraw = true
             }
-            image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+            image.src = PATH + name + '.png'
         }
     }
 

SplashScreen.js

@@ -43,7 +43,7 @@ function newSplashScreen() {
         function onImageLoad() {
             canDrawLogo = true
         }
-        logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
+        logo.src = 'Images/superalgos-logo.png'
         canvas.eventHandler.listenToEvent('Browser Resized', resize)
 
         isInitialized = true