From 123e2a0a1ad613ac14cd4219eccefe33e23d6b4b Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 1 Oct 2020 14:09:03 +0200 Subject: [PATCH] chat --- Canvas.js | 49 +++++++- FloatingSpace/CodeEditor.js | 2 +- FloatingSpace/ConditionEditor.js | 2 +- FloatingSpace/ConfigEditor.js | 2 +- FloatingSpace/FormulaEditor.js | 2 +- SideSpace/SidePanelTab.js | 12 +- Spaces/ChatSpace.js | 194 +++++++++++++++++++++++++++++++ Spaces/TutorialSpace.js | 37 +++++- 8 files changed, 288 insertions(+), 12 deletions(-) create mode 100644 Spaces/ChatSpace.js diff --git a/Canvas.js b/Canvas.js index e926c5acf..148ba2160 100644 --- a/Canvas.js +++ b/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/FloatingSpace/CodeEditor.js b/FloatingSpace/CodeEditor.js index c490156c3..09d615a80 100644 --- a/FloatingSpace/CodeEditor.js +++ b/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/FloatingSpace/ConditionEditor.js b/FloatingSpace/ConditionEditor.js index 443c9f231..77ff9abed 100644 --- a/FloatingSpace/ConditionEditor.js +++ b/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/FloatingSpace/ConfigEditor.js b/FloatingSpace/ConfigEditor.js index e8864a0e8..dee760f94 100644 --- a/FloatingSpace/ConfigEditor.js +++ b/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/FloatingSpace/FormulaEditor.js b/FloatingSpace/FormulaEditor.js index 2a781b67c..e749b5c57 100644 --- a/FloatingSpace/FormulaEditor.js +++ b/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/SideSpace/SidePanelTab.js b/SideSpace/SidePanelTab.js index bd853f480..6c04ec2e5 100644 --- a/SideSpace/SidePanelTab.js +++ b/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/Spaces/ChatSpace.js b/Spaces/ChatSpace.js new file mode 100644 index 000000000..f429006f8 --- /dev/null +++ b/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/Spaces/TutorialSpace.js b/Spaces/TutorialSpace.js index 496af8b75..8f90e671b 100644 --- a/Spaces/TutorialSpace.js +++ b/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]