From 3d553db2e3fff39f7d0f89eeac55b34392c65994 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 1 Oct 2020 10:22:36 +0200
Subject: [PATCH] Tutorial Space fixed

---
 BackendServers/WebServer/AppLoader.js      |   1 +
 BackendServers/WebServer/index.html        |  40 +++--
 CanvasApp/Canvas.js                        |  49 +++++-
 CanvasApp/FloatingSpace/CodeEditor.js      |   2 +-
 CanvasApp/FloatingSpace/ConditionEditor.js |   2 +-
 CanvasApp/FloatingSpace/ConfigEditor.js    |   2 +-
 CanvasApp/FloatingSpace/FormulaEditor.js   |   2 +-
 CanvasApp/SideSpace/SidePanelTab.js        |  12 +-
 CanvasApp/Spaces/ChatSpace.js              | 194 +++++++++++++++++++++
 CanvasApp/Spaces/TutorialSpace.js          |  26 ++-
 10 files changed, 305 insertions(+), 25 deletions(-)
 create mode 100644 CanvasApp/Spaces/ChatSpace.js

diff --git a/BackendServers/WebServer/AppLoader.js b/BackendServers/WebServer/AppLoader.js
index f0b148c17..d1925874c 100644
--- a/BackendServers/WebServer/AppLoader.js
+++ b/BackendServers/WebServer/AppLoader.js
@@ -97,6 +97,7 @@ function newAppLoader() {
                 'Spaces/DesignSpace.js',
                 'Spaces/SideSpace.js',
                 'Spaces/DocSpace.js',
+                'Spaces/ChatSpace.js',
                 'Spaces/TutorialSpace.js',
 
                 'Files/SingleFile.js',
diff --git a/BackendServers/WebServer/index.html b/BackendServers/WebServer/index.html
index 086e86416..21ef07343 100644
--- a/BackendServers/WebServer/index.html
+++ b/BackendServers/WebServer/index.html
@@ -16,6 +16,15 @@
 
     <script type="text/javascript">
         function loadCanvas() {
+            // Prevent click-jacking
+            try {
+                if (window == window.top || window.chrome && chrome.app && chrome.app.window) {
+                    document.documentElement.style.display = 'block'
+                } else {
+                    top.location = self.location
+                }
+            } catch (e) { console.error('CJ protection', e) }
+            
             try {
                 loadSuperalgos();
             } catch (err) {
@@ -27,7 +36,7 @@
             try {
                 if (canvas === undefined) { return }
                 if (canvas.eventHandler === undefined) { return }
-                if (DISABLE_BROWSER_RESIZE_EVENT === true) {return}
+                if (DISABLE_BROWSER_RESIZE_EVENT === true) { return }
                 canvas.eventHandler.raiseEvent('Browser Resized')
             } catch (err) {
                 console.log('Error Resizing. ' + err.stack)
@@ -40,16 +49,21 @@
     style="overflow:hidden; background: url(Images/superalgos-platform.jpg); background-size: cover;"
     onresize="onResize()">
     <div id="contributors" class="credits">
-        <p class="tutorial-alert-success">This project is open source and free thanks to the efforts and time of it's contributors:</p>
-        <p class="tutorial-callout">Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller, Eduardo Remis, Jeff Braun, Barry Low, Nikola Bjelogrlic and Francisco J. Santillán.</p>
-        <p class="tutorial-alert-info">If you find it useful, please consider giving back to the community by becoming a contributor.</p>
+        <p class="tutorial-alert-success">This project is open source and free thanks to the efforts and time of it's
+            contributors:</p>
+        <p class="tutorial-callout">Luis Fernando Molina, Julian Molina, Andreja Cobeljic, Matías Benitez, Ira Miller,
+            Eduardo Remis, Jeff Braun, Barry Low, Nikola Bjelogrlic and Francisco J. Santillán.</p>
+        <p class="tutorial-alert-info">If you find it useful, please consider giving back to the community by becoming a
+            contributor.</p>
     </div>
     <div id="masterApp"></div>
     <div id="canvasApp"></div>
     <div id="docApp" style="position:fixed; top:100000px; left:100000px">
-        <iframe id="docIFrame" style="border:none; " height="2000" 
-            width="900"></iframe>
-    </div> <!--    -->
+        <iframe id="docIFrame" style="border:none; " height="2000" width="900"></iframe>
+    </div>
+    <div id="chatApp" style="position:fixed; top:100000px; left:100000px">
+        <iframe id="chatIFrame" style="border:none; " height="2000" width="900"></iframe>
+    </div>
     <div id="textAreaDiv"></div>
     <div id="inputDiv" style="font-family:saira condensed;">&nbsp;</div>
 
@@ -59,19 +73,19 @@
         <form>
             <table class="tutorial-buttonsTable">
                 <tr>
-                    <td align = "center">
+                    <td align="center">
                         <label class="tutorial-font-small tutorial-stop-button" onclick="canvas.tutorialSpace.stop()"
                             value="">&nbsp;&nbsp;Stop&nbsp;&nbsp;&nbsp;</label>
                     </td>
-                    <td align = "center">
+                    <td align="center">
                         <label class="tutorial-font-small tutorial-skip-button" onclick="canvas.tutorialSpace.skip()"
                             value="">&nbsp;&nbsp;Skip&nbsp;&nbsp;&nbsp;</label>
                     </td>
-                    <td align = "center">
-                        <label class="tutorial-font-small tutorial-previous-button" onclick="canvas.tutorialSpace.previous()"
-                            value="">Previous</label>
+                    <td align="center">
+                        <label class="tutorial-font-small tutorial-previous-button"
+                            onclick="canvas.tutorialSpace.previous()" value="">Previous</label>
                     </td>
-                    <td align = "center">
+                    <td align="center">
                         <label class="tutorial-font-small tutorial-next-button" onclick="canvas.tutorialSpace.next()"
                             value="">&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;</label>
                     </td>
diff --git a/CanvasApp/Canvas.js b/CanvasApp/Canvas.js
index e926c5acf..148ba2160 100644
--- a/CanvasApp/Canvas.js
+++ b/CanvasApp/Canvas.js
@@ -33,6 +33,7 @@ function newCanvas() {
         topSpace: undefined,
         sideSpace: undefined,
         docSpace: undefined,
+        chatSpace: undefined,
         tutorialSpace: undefined,
         chartingSpace: undefined,
         floatingSpace: undefined,
@@ -66,6 +67,7 @@ function newCanvas() {
         try {
             thisObject.tutorialSpace.finalize()
             thisObject.docSpace.finalize()
+            //thisObject.chatSpace.finalize()
             thisObject.sideSpace.finalize()
             thisObject.chartingSpace.finalize()
             thisObject.floatingSpace.finalize()
@@ -130,6 +132,9 @@ function newCanvas() {
             thisObject.docSpace = newDocSpace()
             thisObject.docSpace.initialize()
 
+            //thisObject.chatSpace = newChatSpace()
+            //thisObject.chatSpace.initialize()
+
             thisObject.tutorialSpace = newTutorialSpace()
             thisObject.tutorialSpace.initialize()
 
@@ -148,6 +153,7 @@ function newCanvas() {
             animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
             animation.addCallBackFunction('Side Space Physics', thisObject.sideSpace.physics)
             animation.addCallBackFunction('Doc Space Physics', thisObject.docSpace.physics)
+            //animation.addCallBackFunction('Chat Space Physics', thisObject.chatSpace.physics)
             animation.addCallBackFunction('Tutorial Space Physics', thisObject.tutorialSpace.physics)
 
             /* Spcaces Drawing */
@@ -159,6 +165,7 @@ function newCanvas() {
             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('Chat Space Draw', thisObject.chatSpace.draw)
             animation.addCallBackFunction('Tutorial Space Draw', thisObject.tutorialSpace.draw)
             animation.addCallBackFunction('Splash Screen Draw', thisObject.splashScreen.draw)
             animation.start()
@@ -303,7 +310,7 @@ function newCanvas() {
             return
             let top = (window.innerHeight - browserCanvas.height) / 2
             let left = (window.innerWidth - browserCanvas.width) / 2
-            browserCanvas.style = "position:absolute; top:"+ top + "px; left:"+ left + "px; z-index:1"
+            browserCanvas.style = "position:absolute; top:" + top + "px; left:" + left + "px; z-index:1"
         }
     }
 
@@ -664,6 +671,20 @@ function newCanvas() {
                 return
             }
 
+            /* We check if the mouse is over an element of the Chat Space / */
+            //container = thisObject.chatSpace.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)
 
@@ -809,6 +830,14 @@ function newCanvas() {
                 return
             }
 
+            /* We check if the mouse is over an element of the Chat Space / */
+            //container = thisObject.chatSpace.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)
 
@@ -971,6 +1000,16 @@ function newCanvas() {
                 }
             }
 
+            /* We check if the mouse is over an element of the Chat Space / */
+            if (thisObject.chatSpace !== undefined) {
+                //container = thisObject.chatSpace.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)
@@ -1095,6 +1134,14 @@ function newCanvas() {
                 return false  // This instructs the browser not to take the event and scroll the page.
             }
 
+            /* Chat Space */
+            //container = canvas.chatSpace.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 })
 
diff --git a/CanvasApp/FloatingSpace/CodeEditor.js b/CanvasApp/FloatingSpace/CodeEditor.js
index c490156c3..09d615a80 100644
--- a/CanvasApp/FloatingSpace/CodeEditor.js
+++ b/CanvasApp/FloatingSpace/CodeEditor.js
@@ -63,7 +63,7 @@ function newCodeEditor() {
         thisObject.rawRadius = 8
         thisObject.targetRadius = thisObject.container.frame.radius
         thisObject.currentRadius = 0
-        thisObject.payload.uiObject.setErrorMessage('', 0)
+        thisObject.payload.uiObject.resetErrorMessage()
 
         let textArea = document.getElementById('textArea')
         textArea.value = payload.node.code
diff --git a/CanvasApp/FloatingSpace/ConditionEditor.js b/CanvasApp/FloatingSpace/ConditionEditor.js
index 443c9f231..77ff9abed 100644
--- a/CanvasApp/FloatingSpace/ConditionEditor.js
+++ b/CanvasApp/FloatingSpace/ConditionEditor.js
@@ -80,7 +80,7 @@ function newConditionEditor() {
     function activate(payload) {
         thisObject.visible = true
         thisObject.payload = payload
-        thisObject.payload.uiObject.setErrorMessage('', 0)
+        thisObject.payload.uiObject.resetErrorMessage()
 
         conditionStructure = {
             code: '',
diff --git a/CanvasApp/FloatingSpace/ConfigEditor.js b/CanvasApp/FloatingSpace/ConfigEditor.js
index e8864a0e8..dee760f94 100644
--- a/CanvasApp/FloatingSpace/ConfigEditor.js
+++ b/CanvasApp/FloatingSpace/ConfigEditor.js
@@ -69,7 +69,7 @@ function newConfigEditor() {
         thisObject.rawRadius = 8
         thisObject.targetRadius = thisObject.container.frame.radius
         thisObject.currentRadius = 0
-        thisObject.payload.uiObject.setErrorMessage('', 0)
+        thisObject.payload.uiObject.resetErrorMessage()
 
         let textArea = document.getElementById('textArea')
         textArea.value = payload.node.config
diff --git a/CanvasApp/FloatingSpace/FormulaEditor.js b/CanvasApp/FloatingSpace/FormulaEditor.js
index 2a781b67c..e749b5c57 100644
--- a/CanvasApp/FloatingSpace/FormulaEditor.js
+++ b/CanvasApp/FloatingSpace/FormulaEditor.js
@@ -63,7 +63,7 @@ function newFormulaEditor() {
         thisObject.rawRadius = 8
         thisObject.targetRadius = thisObject.container.frame.radius
         thisObject.currentRadius = 0
-        thisObject.payload.uiObject.setErrorMessage('', 0)
+        thisObject.payload.uiObject.resetErrorMessage()
 
         let textArea = document.getElementById('textArea')
         textArea.value = payload.node.code
diff --git a/CanvasApp/SideSpace/SidePanelTab.js b/CanvasApp/SideSpace/SidePanelTab.js
index bd853f480..6c04ec2e5 100644
--- a/CanvasApp/SideSpace/SidePanelTab.js
+++ b/CanvasApp/SideSpace/SidePanelTab.js
@@ -4,6 +4,7 @@ function newSidePanelTab() {
         screenside: undefined,
         pointerDirection: undefined,
         container: undefined,
+        index: 0,
         open: open,
         close: close,
         resize: resize,
@@ -30,8 +31,11 @@ function newSidePanelTab() {
 
     return thisObject
 
-    function initialize(screenside) {
+    function initialize(screenside, index) {
         thisObject.screenside = screenside
+        if (index !== undefined) [
+            thisObject.index = index
+        ]
         switch (thisObject.screenside) {
             case 'left': {
                 thisObject.pointerDirection = 'left'
@@ -43,7 +47,7 @@ function newSidePanelTab() {
             }
         }
         thisObject.container.frame.width = TAB_WIDTH
-        thisObject.container.frame.height = TAB_HEIGHT        
+        thisObject.container.frame.height = TAB_HEIGHT
 
         thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
         resize()
@@ -61,8 +65,8 @@ function newSidePanelTab() {
                 break
             }
         }
-        
-        thisObject.container.frame.position.y = 69
+
+        thisObject.container.frame.position.y = 69 + 69 * thisObject.index
         ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
         setClosed()
     }
diff --git a/CanvasApp/Spaces/ChatSpace.js b/CanvasApp/Spaces/ChatSpace.js
new file mode 100644
index 000000000..f429006f8
--- /dev/null
+++ b/CanvasApp/Spaces/ChatSpace.js
@@ -0,0 +1,194 @@
+function newChatSpace() {
+    const MODULE_NAME = 'Chat Space'
+    let thisObject = {
+        sidePanelTab: undefined,
+        container: undefined,
+        navigateTo: navigateTo,
+        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 browserResizedEventSubscriptionId
+    let openingEventSubscriptionId
+    let closingEventSubscriptionId
+
+    const DEFAULT_URL = 'https://web.telegram.org/#/im?p=@superalgoscommunity'
+    return thisObject
+
+    function initialize() {
+        
+        thisObject.sidePanelTab = newSidePanelTab()
+        thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
+        thisObject.sidePanelTab.initialize('right', 1)
+        openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', onOpening)
+        closingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closing', onClosing)
+
+        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(closingEventSubscriptionId)
+    }
+
+    function onOpening() {
+        let docIFrame = document.getElementById('docIFrame')
+        if (docIFrame.src === "") {
+            docIFrame.src = DEFAULT_URL
+        }
+    }
+
+    function onClosing() {
+
+    }
+
+    function navigateTo(url) {
+        let docIFrame = document.getElementById('docIFrame')
+        docIFrame.src = url
+        thisObject.sidePanelTab.open()
+    }
+
+    function resize() {
+        thisObject.container.frame.width = 1200
+        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()
+        chatAppDivPhysics()
+        iFramePhysics()
+
+        function chatAppDivPhysics() {
+            let chatAppDiv = document.getElementById('chatApp')
+            chatAppDivPosition = {
+                x: 0,
+                y: 0
+            }
+            chatAppDivPosition = thisObject.container.frame.frameThisPoint(chatAppDivPosition)
+            chatAppDiv.style = '   ' + 
+            'position:fixed; top:' + chatAppDivPosition.y + 'px; ' + 
+            'left:' + chatAppDivPosition.x + 'px; z-index:1; ' + 
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        }
+
+        function iFramePhysics() {
+            let docIFrame = document.getElementById('chatIFrame')
+            docIFrame.style = '  ' + 
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        }
+    }
+
+    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()
+            }
+        }
+    }
+}
diff --git a/CanvasApp/Spaces/TutorialSpace.js b/CanvasApp/Spaces/TutorialSpace.js
index 496af8b75..089c94417 100644
--- a/CanvasApp/Spaces/TutorialSpace.js
+++ b/CanvasApp/Spaces/TutorialSpace.js
@@ -425,13 +425,33 @@ function newTutorialSpace() {
                                         change at each descendent. The nodePath route starts at the object
                                         referenceParent.
                                         */
-                                        let referenceParent = currentNode.payload.referenceParent 
+                                        let referenceParent = currentNode.payload.referenceParent
                                         for (let i = 0; i < config.batchConfigChangesReferenceParent.length; i++) {
                                             let arrayItem = config.batchConfigChangesReferenceParent[i]
-                                            let nodePath = arrayItem.nodePath 
+                                            let nodePath = arrayItem.nodePath
                                             let properties = arrayItem.properties
 
-                                            let childNode = eval(nodePath)
+                                            let childNode
+                                            try {
+                                                childNode = eval(nodePath)
+                                            } catch (err) {
+                                                console.log(MODULE_NAME + ' -> The nodePath provided is not good. -> nodePath = ' + nodePath)
+                                                let splittedPath = nodePath.split('.')
+                                                let partialPath = ''
+                                                let separator = ''
+                                                for (let j = 0; j < splittedPath.length; j++) {
+                                                    let part = splittedPath[j]
+                                                    partialPath = partialPath + separator + part
+                                                    separator = '.'
+                                                    let partialNode = eval(partialPath)
+                                                    if (partialNode === undefined) {
+                                                        console.log(MODULE_NAME + ' -> This part can not be undefined -> part = ' + part)
+                                                        currentNode.payload.uiObject.setErrorMessage('Node Path is incorrect. See console log for details.')
+                                                        break
+                                                    }
+                                                }
+                                                continue
+                                            }
                                             let nodeConfig = JSON.parse(childNode.config)
                                             for (const property in properties) {
                                                 nodeConfig[property] = properties[property]