chat

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 })
 

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

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: '',

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

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

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()
     }

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()
+            }
+        }
+    }
+}

Spaces/TutorialSpace.js

@@ -425,13 +425,44 @@ 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]
+                                                    let partialNode
+                                                    let splittedParts = part.split('[')
+                                                    if (splittedParts.length > 1) {
+                                                        partialNode = eval(partialPath + separator + splittedParts[0])
+                                                        if (partialNode === undefined) {
+                                                            console.log(MODULE_NAME + ' -> This part can not be undefined -> part = ' + splittedParts[0])
+                                                            currentNode.payload.uiObject.setErrorMessage('Node Path is incorrect. See console log for details.')
+                                                            break
+                                                        }
+                                                    } 
+                                                    partialPath = partialPath + separator + part
+                                                    separator = '.'
+                                                   
+                                                    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]